:root{
  --teal:#0f6f73;
  --teal-hover:#0b5457;
  --accent:#39c1c6;
  --deep:#123f41;
  --bg:#eceae5;
  --white:#fff;
  --text:#3d4144;
  --grey:#a9b1b4;
  --grey-text:#6b7378;
  --border:#cfcdc7;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-hover)}
img{max-width:100%}
h1,h2,h3,p{margin:0}

.wrap{width:1280px;max-width:100%;margin:0 auto;background:var(--bg)}

.eyebrow{font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 8px}

.btn{display:inline-block;background:var(--teal);color:#fff;font:600 15px/1 Archivo,sans-serif;padding:16px 30px;border-radius:3px;transition:background .15s}
.btn:hover{background:var(--teal-hover);color:#fff}
.btn--sm{padding:11px 20px}
.btn--inverted{background:#fff;color:var(--teal)}
.btn--inverted:hover{background:#e9efee;color:var(--teal)}

/* Header */
.site-header{display:flex;justify-content:space-between;align-items:center;padding:26px 72px;background:var(--teal);position:relative;z-index:2}
.logo{display:flex;align-items:center;gap:12px}
.logo-word{display:flex;flex-direction:column;gap:5px}
.logo-word .primary{font:800 26px/1 Archivo,sans-serif;letter-spacing:-.03em;color:var(--teal)}
.logo-word .secondary{font:500 10px/1 Archivo,sans-serif;letter-spacing:.2em;color:var(--grey-text);padding-left:6px}
.logo--light .primary{color:#fff}
.logo--light .secondary{color:rgba(255,255,255,.7)}

.nav{display:flex;align-items:center;gap:34px;font:500 14px/1 Archivo,sans-serif}
.nav a:not(.btn){color:rgba(255,255,255,.85)}
.nav a:not(.btn):hover{color:#fff}

/* Hero */
.hero{padding:76px 72px 92px}
.hero-heading-row{display:flex;align-items:center;justify-content:space-between;gap:80px}
.hero h1{font:700 54px/1.1 Archivo,sans-serif;letter-spacing:-.025em;color:var(--teal);max-width:640px}
.hero h1 span{white-space:nowrap}
.hero-sub-row{display:flex;justify-content:flex-end;align-items:center;gap:24px;margin-top:24px}
.hero-sub{font:400 21px/1.6 Archivo,sans-serif;color:var(--text);text-align:right;max-width:640px}
.hero-mark{flex:none;width:254px;height:125px}
.cta-row{display:flex;align-items:center;gap:20px;margin-top:34px}
.link-arrow{font:600 15px/1 Archivo,sans-serif;color:var(--teal)}

/* Bands */
.band{background:var(--teal);padding:64px 72px;text-align:center}
.band p{font:600 27px/1.45 Archivo,sans-serif;color:#fff;max-width:820px;margin:0 auto}
.band--quote{padding:84px 72px}
.band--quote p{font:600 27px/1.5 Archivo,sans-serif;max-width:1136px}

/* Generic sections */
.section{padding:88px 72px}
.section--bg{background:var(--bg)}
.section--white{background:#fff}
h2{font:700 34px/1.2 Archivo,sans-serif;letter-spacing:-.02em;color:var(--teal);margin:0 0 34px}

/* Pain point cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{background:#fff;border-left:3px solid var(--teal);padding:24px 26px;font:400 15.5px/1.6 Archivo,sans-serif;color:var(--text);display:flex;align-items:flex-start;gap:16px}
.card-icon{flex:none;width:38px;height:38px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center}
.card-icon svg{width:27px;height:14px}
.closing-line{font:600 21px/1.5 Archivo,sans-serif;color:var(--teal);margin:38px 0 0;text-align:center}

/* Services */
.services{display:grid;grid-template-columns:1fr 1fr;gap:40px 48px}
.service{display:flex;flex-direction:column;gap:14px}
.service svg{width:52px;height:26px}
.service h3{font:700 20px/1.3 Archivo,sans-serif;color:var(--teal)}
.service p{font:400 15px/1.65 Archivo,sans-serif;color:var(--text)}

/* Split layouts (Why / About) */
.split{display:grid;grid-template-columns:400px 1fr;gap:72px;align-items:start}
.split h2{max-width:620px;white-space:nowrap}
.split--stretch{align-items:stretch}
.split--center{align-items:center}
.split-left{display:flex;flex-direction:column}
.avatar{width:340px;height:340px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;margin:auto 0}
.avatar svg{width:210px;height:106px}
.list{display:flex;flex-direction:column;gap:2px;margin-top:80px}
.list-item{border-top:1px solid var(--border);padding:24px 0}
.list-item:last-child{border-bottom:1px solid var(--border)}
.list-item h3{font:700 18px/1.3 Archivo,sans-serif;color:var(--teal);margin:0 0 7px}
.list-item p{font:400 15px/1.6 Archivo,sans-serif;color:var(--text)}

.about{grid-template-columns:400px 1fr;gap:64px;padding:76px 72px 92px}
.about-photo{position:relative;height:520px;border-radius:3px;overflow:hidden;background:var(--deep)}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.about-photo::after{content:"";position:absolute;inset:0;background:var(--teal);mix-blend-mode:screen;opacity:.42;pointer-events:none}
.about h2{font:700 42px/1.15 Archivo,sans-serif;letter-spacing:-.025em}
.about-subtitle{font:500 17px/1.4 Archivo,sans-serif;color:var(--grey-text);margin:10px 0 0}
.about .rule{height:3px;width:64px;background:var(--teal);margin:22px 0 26px}
.about p{font:400 17px/1.7 Archivo,sans-serif;color:var(--text);text-align:justify;margin:0 0 20px}
.about .btn{margin-top:12px}

/* Contact */
.contact h2{text-align:center;margin:0}
.contact-grid{display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:44px}
.contact-item{display:flex;flex-direction:column;gap:7px;align-items:center}
.contact-item .label{font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.contact-item a{font:400 17px/1.4 Archivo,sans-serif;color:var(--text)}

/* Footer */
.site-footer{background:var(--teal);padding:44px 72px}
.footer-row{display:flex;justify-content:space-between;align-items:center}
.footer-nav{display:flex;gap:28px;font:500 13px/1 Archivo,sans-serif}
.footer-nav a{color:rgba(255,255,255,.75)}
.footer-nav a:hover{color:#fff}
.footer-bottom{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2);font:400 12px/1.5 Archivo,sans-serif;color:rgba(255,255,255,.6)}

@media (max-width:768px){
  .wrap{width:100%;max-width:100vw}
  .site-header{flex-wrap:wrap;gap:12px;padding:18px 20px}
  .nav{flex-wrap:wrap;gap:12px;font-size:12px}
  .section,.hero,.band,.about,.contact{padding-left:20px;padding-right:20px}
  .site-footer{padding-left:20px;padding-right:20px}
  .cards,.services,.split,.contact-grid{grid-template-columns:1fr}

  .hero h1{font-size:30px;line-height:1.25;max-width:none}
  .hero h1 span{white-space:normal}
  .hero-heading-row{flex-direction:column;align-items:flex-start;gap:16px}
  .hero-sub-row{justify-content:flex-start;margin-top:16px}
  .hero-sub{text-align:left;max-width:none}
  .hero-mark{display:none}
  .cta-row{flex-wrap:wrap}

  h2{font-size:24px;line-height:1.3}
  .split h2{white-space:normal;max-width:none}
  .band p,.band--quote p{font-size:19px;max-width:none}

  .split{gap:32px}
  .avatar{width:180px;height:180px;margin:0 auto}
  .avatar svg{width:120px;height:60px}

  .about-photo{height:200px}
}