:root{
 --navy:#24324A; --teal:#3A7677; --orange:#DD7438; --red:#9C2E29;
 --paper:#F4F0E9; --white:#FFF; --ink:#20262B; --muted:#687176; --line:rgba(32,38,43,.18);
 --sans:'Barlow',system-ui,sans-serif; --display:'Barlow Condensed','Barlow',sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.48 var(--sans)}
a{color:inherit}.wrap{width:min(1240px,calc(100% - 56px));margin:auto}
.micro,.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.micro{color:var(--teal)} p{margin-top:0}
.arrow{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:4px}
.arrow i{font-style:normal;transition:.2s}.arrow:hover i{transform:translateX(5px)}

/* HERO */
.hero{background:var(--navy);color:white;padding:96px 0 82px}
.hero h1{font:700 clamp(62px,8.2vw,112px)/.82 var(--display);text-transform:uppercase;letter-spacing:-.04em;max-width:1060px;margin:0 0 40px}
.hero h1 em{font-style:italic;color:var(--orange);font-weight:600}
.hero-bottom{display:grid;grid-template-columns:1.3fr .7fr;gap:70px;align-items:end}
.hero-copy{font-size:clamp(20px,2vw,26px);line-height:1.35;color:#D8DEE3;max-width:760px;margin:0}
.hero .arrow{justify-self:end;color:white;border-color:var(--orange)}

/* ROLE / RECOGNITION */
.roles{background:white;padding:88px 0 102px}
.roles-head{display:grid;grid-template-columns:.65fr 1.35fr;gap:70px;margin-bottom:46px;align-items:end}
.roles h2{font:700 clamp(48px,5.7vw,75px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.03em;margin:10px 0 0}
.roles-intro{font-size:21px;color:var(--muted);max-width:670px;margin:0}
.role{display:grid;grid-template-columns:50px .72fr 1.28fr;gap:34px;padding:40px 0 44px;border-top:1px solid var(--line)}
.role:last-child{border-bottom:1px solid var(--line)}
.role-no{font:600 22px var(--display);color:var(--orange)}
.role-name{font:700 clamp(34px,3.6vw,50px)/.92 var(--display);text-transform:uppercase;color:var(--navy);margin:0 0 20px}
.identity{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.identity div{border-top:2px solid var(--teal);padding-top:8px}
.identity span{display:block;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.identity strong{font-size:15px;line-height:1.25;color:var(--teal)}
.role-problem{font-size:clamp(22px,2.1vw,28px);line-height:1.16;font-weight:600;margin:0 0 14px}
.role-desc{color:#596166;max-width:680px;margin:0}
.role-desc strong{color:var(--teal)}

/* CAPABILITY */
.capability{background:var(--teal);color:white;padding:70px 0}
.cap-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.capability h2{font:700 clamp(52px,6.4vw,84px)/.82 var(--display);text-transform:uppercase;letter-spacing:-.035em;margin:0}
.capability h2 em{font-style:italic;color:#F1A474}
.capability p{font-size:clamp(20px,2vw,26px);line-height:1.35;color:#E2ECEB;max-width:600px;margin:0}
.capability strong{color:white}

/* GET THINGS DONE */
.execution{background:var(--paper);padding:98px 0 108px}
.exec-head{display:grid;grid-template-columns:.65fr 1.35fr;gap:70px;margin-bottom:60px}
.exec-head h2{font:700 clamp(48px,6vw,80px)/.87 var(--display);text-transform:uppercase;letter-spacing:-.035em;margin:0}
.exec-head h2 em{font-style:italic;color:var(--orange)}
.exec-intro{font-size:20px;color:var(--muted);max-width:620px;margin:22px 0 0}

.offer{display:grid;grid-template-columns:.65fr 1.35fr;gap:70px;padding:52px 0;border-top:1px solid var(--line)}
.offer:last-child{border-bottom:1px solid var(--line)}
.offer-index{font:600 18px var(--display);color:var(--orange);margin-bottom:8px}
.offer h3{font:700 clamp(40px,4.7vw,62px)/.9 var(--display);text-transform:uppercase;color:var(--navy);margin:0 0 13px}
.offer-tagline{font-size:20px;font-weight:600;line-height:1.25;max-width:420px;margin:0}
.offer.special h3{color:var(--orange)}
.offer-right{display:grid;gap:28px}
.cluster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cluster{border-top:2px solid var(--teal);padding-top:10px}
.cluster h4{font:700 22px/1 var(--display);text-transform:uppercase;color:var(--teal);margin:0 0 10px}
.cluster p{font-size:15px;line-height:1.5;color:#596166;margin:0}
.method{font:600 clamp(24px,2.6vw,34px)/1.15 var(--display);text-transform:uppercase;color:var(--navy);margin:0}
.method span{color:var(--orange);padding:0 5px}
.teach-note{font-size:20px;font-weight:600;color:var(--navy);margin:0}
.teach-note em{color:var(--orange);font-style:normal}

/* MODE */
.mode{padding:0 0 94px}
.mode-inner{border-top:2px solid var(--ink);padding-top:26px;display:grid;grid-template-columns:.65fr 1.35fr;gap:70px}
.mode p{font-size:clamp(20px,2vw,27px);line-height:1.4;margin:0;max-width:790px}.mode strong{color:var(--teal)}

/* ABOUT */
.about{background:var(--navy);color:white;padding:90px 0}
.about-inner{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px}
.about h2{font:700 clamp(50px,6.4vw,82px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.035em;margin:0}
.about h2 em{font-style:italic;color:var(--orange)}
.about-copy{font-size:clamp(19px,1.8vw,24px);line-height:1.4;color:#D5DCE2;max-width:760px;margin:0 0 27px}
.about-copy strong{color:white}.about .arrow{color:white;border-color:var(--orange)}

/* CONTACT */
.contact{background:var(--orange);color:white;padding:86px 0 92px}
.contact-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}
.contact h2{font:700 clamp(58px,7vw,94px)/.83 var(--display);text-transform:uppercase;letter-spacing:-.04em;margin:0 0 24px}
.contact p{font-size:21px;max-width:430px}
form{display:grid;gap:20px}label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:700}
input,textarea{width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.75);background:transparent;color:white;font:inherit;padding:9px 0;outline:0}
textarea{height:90px;resize:vertical}button{justify-self:start;border:0;background:var(--navy);color:white;padding:13px 19px;font:700 14px var(--sans);cursor:pointer}
footer{height:22px;background:var(--navy)}

@media(max-width:920px){
 .wrap{width:min(100% - 38px,1240px)}
 .hero-bottom,.roles-head,.cap-inner,.exec-head,.offer,.mode-inner,.about-inner,.contact-inner{grid-template-columns:1fr;gap:28px}
 .hero .arrow{justify-self:start}
 .role{grid-template-columns:38px 1fr}
 .role-main{grid-column:2}.role-copy{grid-column:2}
 .cluster-grid{grid-template-columns:1fr}
}
@media(max-width:580px){
 .wrap{width:calc(100% - 28px)}
 .hero{padding:76px 0 64px}.hero h1{font-size:clamp(57px,17vw,82px)}
 .roles,.execution{padding:68px 0}
 .role{gap:12px;padding:34px 0}.identity{grid-template-columns:1fr}
 .capability{padding:58px 0}.offer{padding:40px 0}
 .about,.contact{padding:68px 0}
}

/* V7 — restrained motion layer */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  }
  .reveal.in{opacity:1;transform:none}
  .role.reveal:nth-of-type(2){transition-delay:.04s}
  .role.reveal:nth-of-type(3){transition-delay:.08s}
  .role.reveal:nth-of-type(4){transition-delay:.12s}
  .role.reveal:nth-of-type(5){transition-delay:.16s}

  .hero h1 .motion-word{
    display:inline-block;
    opacity:0;
    transform:translateY(.22em) rotate(1.5deg);
    animation:heroWord .85s .24s cubic-bezier(.2,.75,.2,1) forwards;
  }
  .hero-copy,.hero .arrow{
    opacity:0;
    transform:translateY(14px);
    animation:heroSub .65s .62s ease forwards;
  }
  .hero .arrow{animation-delay:.76s}
  @keyframes heroWord{to{opacity:1;transform:none}}
  @keyframes heroSub{to{opacity:1;transform:none}}

  .role{
    transition:background-color .25s ease, padding-left .25s ease, padding-right .25s ease;
  }
  .role .role-name,.role .identity strong,.role .role-problem{
    transition:color .25s ease, transform .25s ease;
  }
  .role:hover{
    background:rgba(58,118,119,.055);
    padding-left:14px;
    padding-right:14px;
  }
  .role:hover .role-name{color:var(--teal);transform:translateX(4px)}
  .role:hover .identity strong{color:var(--navy)}

  .capability h2 .cap-line{
    display:block;
    transition:transform .15s linear;
    will-change:transform;
  }
  .capability h2 .cap-line:nth-child(2){margin-left:6%}

  .offer{
    transition:background-color .28s ease, padding-left .28s ease, padding-right .28s ease;
  }
  .offer h3,.cluster{
    transition:transform .28s cubic-bezier(.2,.7,.2,1), color .28s ease, border-color .28s ease;
  }
  .offer:hover{
    background:rgba(255,255,255,.45);
    padding-left:14px;
    padding-right:14px;
  }
  .offer:hover h3{transform:translateX(5px);color:var(--teal)}
  .offer.special:hover h3{color:var(--red)}
  .offer:hover .cluster:nth-child(1){transform:translateY(-4px)}
  .offer:hover .cluster:nth-child(2){transform:translateY(-7px)}
  .offer:hover .cluster:nth-child(3){transform:translateY(-4px)}
  .offer:hover .cluster{border-color:var(--orange)}

  .arrow{transition:color .2s ease,border-color .2s ease}
  button{transition:transform .2s ease,background-color .2s ease}
  button:hover{transform:translateY(-2px)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}


.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.contact-confirmation{grid-column:1/-1;margin:0 0 26px;padding:18px 20px;border:1px solid currentColor;font-family:'Barlow',Arial,sans-serif}
.contact-confirmation strong,.contact-confirmation span{display:block}
.contact-confirmation strong{font-size:16px;margin-bottom:5px}
.contact-confirmation span{font-size:14px;line-height:1.45}
.contact-confirmation--success{background:#F4F0E9;color:#24324A;border-color:#F4F0E9}
.contact-confirmation--error{background:transparent;color:#F4F0E9;border-color:#F4F0E9}