:root{--ink:#073f50;--ink-2:#0b4c5e;--deep:#032f3d;--lime:#b5df08;--blue:#1262e5;--teal:#069ca5;--paper:#f7f8f6;--white:#fff;--muted:#6b7c82;--line:rgba(7,63,80,.14);--max:1240px;--radius:24px;--sans:'DM Sans',sans-serif;--display:'Manrope',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.shell{width:min(calc(100% - 48px),var(--max));margin-inline:auto}
.skip-link{position:fixed;top:-60px;left:20px;background:var(--lime);color:var(--deep);padding:10px 18px;z-index:1000}
.skip-link:focus{top:12px}
.site-header{position:fixed;inset:0 0 auto;z-index:100;background:rgba(3,47,61,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.1);transition:.3s}
.site-header.scrolled{background:rgba(3,47,61,.96)}
.nav-shell{height:82px;width:min(calc(100% - 48px),var(--max));margin:auto;display:flex;align-items:center;gap:42px}
.brand{display:flex;flex-direction:column;line-height:1;min-width:145px}
.brand-name{font:800 27px/1 var(--display);letter-spacing:-1.7px;color:#fff}
.brand-name span{color:var(--lime)}
.brand small{font-size:11px;color:#fff;margin-top:5px;font-weight:400}
.main-nav{display:flex;gap:30px;margin-left:auto}
.main-nav a{font-size:14px;color:rgba(255,255,255,.78);transition:.2s}
.main-nav a:hover{color:var(--lime)}
.button{display:inline-flex;justify-content:center;align-items:center;gap:18px;background:var(--lime);color:var(--deep);min-height:54px;padding:0 25px;border:0;border-radius:999px;font-weight:700;font-family:var(--sans);cursor:pointer;transition:.25s}
.button:hover{transform:translateY(-2px);background:#c3eb18;box-shadow:0 12px 30px rgba(181,223,8,.18)}
.button-small{min-height:42px;padding:0 18px;font-size:14px}
.menu-toggle{display:none;background:none;border:0;width:42px;height:42px}
.menu-toggle span{display:block;width:22px;height:2px;background:#fff;margin:6px auto}
.hero{min-height:860px;background:linear-gradient(112deg,rgba(3,47,61,.98) 0%,rgba(3,47,61,.91) 47%,rgba(4,62,79,.77) 100%),url('/assets/meeting.jpg') center/cover;color:#fff;position:relative;overflow:hidden;padding-top:82px}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to right,transparent,#000)}
.hero-symbol,.contact-symbol{position:absolute;width:650px;height:650px;border:110px solid var(--lime);border-left-color:transparent;border-radius:50%;right:-190px;top:60px;transform:rotate(-35deg);opacity:.16}
.hero-symbol:after,.contact-symbol:after{content:'';position:absolute;width:260px;height:105px;background:var(--lime);left:-95px;top:200px;border-radius:0 60px 60px 0}
.hero-content{min-height:690px;display:grid;grid-template-columns:1.45fr .55fr;align-items:center;gap:80px;position:relative;z-index:2}
.eyebrow,.section-tag{text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:700;margin:0 0 23px}
.eyebrow{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.72)}
.eyebrow span{width:34px;height:2px;background:var(--lime)}
h1,h2,h3{font-family:var(--display);margin-top:0}
h1{font-size:clamp(54px,6.3vw,92px);line-height:.99;letter-spacing:-.055em;margin-bottom:30px}
h1 em{color:var(--lime);font-style:normal}
.hero-lead{font-size:19px;line-height:1.65;max-width:665px;color:rgba(255,255,255,.77)}
.hero-actions{display:flex;align-items:center;gap:32px;margin-top:38px}
.text-link{font-weight:600}
.text-link span{color:var(--lime);margin-left:8px}
.anniversary{align-self:end;margin-bottom:72px}
.anniversary-ring{width:210px;height:210px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.anniversary-ring:before{content:'';position:absolute;inset:-8px;border:2px solid var(--lime);border-radius:50%;border-left-color:transparent;transform:rotate(-38deg)}
.anniversary-ring b{font:800 92px/.8 var(--display);letter-spacing:-.08em}
.anniversary-ring span{text-transform:uppercase;letter-spacing:.3em;font-size:12px;margin-top:12px;color:var(--lime)}
.anniversary p{font-size:14px;color:rgba(255,255,255,.7);margin:30px 0 0}
.hero-footer{position:relative;z-index:2;display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.16);padding-block:25px;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:rgba(255,255,255,.58)}
.section{padding:120px 0}
.split-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:130px}
.section-tag{color:var(--teal)}
.section-tag.light{color:var(--lime)}
h2{font-size:clamp(42px,5vw,68px);line-height:1.05;letter-spacing:-.045em;margin-bottom:32px}
.intro-text{border-left:1px solid var(--line);padding-left:64px}
.large-copy{font:500 clamp(22px,2.3vw,32px)/1.45 var(--display);letter-spacing:-.025em;margin-top:0}
.intro-text>p:not(.large-copy){color:var(--muted);max-width:760px}
.under-link{display:inline-flex;gap:25px;margin-top:25px;padding-bottom:6px;border-bottom:1px solid var(--ink);font-weight:700}
.manifesto-band{background:var(--lime);color:var(--deep);overflow:hidden;padding:20px 0}
.marquee{display:flex;width:max-content;gap:45px;align-items:center;animation:scroll 22s linear infinite;font:800 36px/1 var(--display);letter-spacing:-.03em}
.marquee i{font-size:14px}
@keyframes scroll{to{transform:translateX(-50%)}
}
.solutions{background:var(--deep);color:#fff}
.section-head{display:grid;grid-template-columns:1.2fr .8fr;gap:120px;align-items:end;margin-bottom:65px}
.section-head>p{color:rgba(255,255,255,.62);max-width:460px;margin-bottom:38px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.14);border-left:1px solid rgba(255,255,255,.14)}
.service-card{min-height:430px;padding:34px;border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);position:relative;transition:.35s}
.service-card:hover{background:rgba(255,255,255,.045);transform:translateY(-4px)}
.service-card.featured{background:var(--lime);color:var(--deep)}
.service-card .num{font:600 12px var(--display);opacity:.65}
.service-icon{position:absolute;right:30px;top:25px;font-size:32px;color:var(--lime)}
.featured .service-icon{color:var(--deep)}
.service-card h3{font-size:25px;line-height:1.2;margin:78px 0 18px}
.service-card p{font-size:15px;line-height:1.7;opacity:.72}
.service-card ul{list-style:none;padding:0;margin:25px 0 0;font-size:13px;opacity:.75}
.service-card li{padding:7px 0;border-top:1px solid currentColor}
.method-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:120px;align-items:center}
.method-visual{min-height:650px;background:linear-gradient(150deg,var(--ink),#075c68);border-radius:var(--radius);display:flex;flex-direction:column;justify-content:space-between;padding:55px;color:#fff;overflow:hidden}
.loop-mark{width:400px;height:400px;border:78px solid var(--lime);border-left-color:transparent;border-radius:50%;transform:rotate(-38deg);margin-left:-95px;position:relative}
.loop-mark span{position:absolute;inset:0;display:grid;place-items:center;transform:rotate(38deg);font:800 180px/1 var(--display);color:#fff}
.method-visual p{font:500 19px/1.5 var(--display);max-width:370px}
.method-content>.large-copy{font-size:23px;color:var(--muted)}
.steps{margin-top:45px}
.steps article{display:grid;grid-template-columns:60px 1fr;gap:22px;padding:24px 0;border-top:1px solid var(--line)}
.steps b{color:var(--teal);font-size:13px}
.steps h3{font-size:20px;margin-bottom:5px}
.steps p{margin:0;color:var(--muted);font-size:15px}
.portfolio{background:#ecf0ef}
.section-head.dark>p{color:var(--muted)}
.work-grid{display:grid;grid-template-columns:1.3fr .7fr;grid-template-rows:360px 360px;gap:18px}
.work-card{margin:0;position:relative;overflow:hidden;border-radius:18px;background:var(--ink)}
.work-card.wide{grid-row:span 1}
.work-card.tall{grid-row:span 2}
.work-card img{width:100%;height:100%;object-fit:cover;transition:.7s}
.work-card:hover img{transform:scale(1.035)}
.work-card:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(3,47,61,.94))}
.work-card figcaption{position:absolute;inset:auto 28px 26px;z-index:2;color:#fff;display:flex;flex-direction:column}
.work-card figcaption span{text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:var(--lime)}
.work-card figcaption b{font:600 18px/1.3 var(--display);margin-top:8px}
.work-controls{display:none}
.timeline{background:var(--ink);color:#fff}
.timeline-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:140px}
.timeline-title{position:sticky;top:140px;align-self:start}
.timeline-title>p:last-child{color:rgba(255,255,255,.63)}
.timeline-list article{display:grid;grid-template-columns:105px 1fr;gap:35px;border-top:1px solid rgba(255,255,255,.18);padding:38px 0}
.timeline-list time{color:var(--lime);font:700 18px var(--display)}
.timeline-list h3{font-size:24px;margin-bottom:8px}
.timeline-list p{margin:0;color:rgba(255,255,255,.62)}
.timeline-list .now{background:var(--lime);color:var(--deep);padding:38px 30px;margin-inline:-30px;border:0;border-radius:14px}
.timeline-list .now time{color:var(--deep)}
.timeline-list .now p{color:rgba(3,47,61,.7)}
.proof{background:var(--lime)}
.proof-grid{display:grid;grid-template-columns:.7fr 1.3fr;align-items:center}
.proof-number{display:flex;align-items:center;gap:25px}
.proof-number strong{font:800 150px/.8 var(--display);letter-spacing:-.09em}
.proof-number span{text-transform:uppercase;font-weight:700;line-height:1.3}
.quote{border-left:1px solid rgba(3,47,61,.25);padding-left:75px}
.quote p{font:600 clamp(26px,3vw,40px)/1.35 var(--display);letter-spacing:-.03em;margin:0}
.quote span{display:block;margin-top:25px;text-transform:uppercase;letter-spacing:.16em;font-size:11px}
.contact{background:#fff;position:relative;overflow:hidden}
.contact-symbol{border-color:var(--ink);border-left-color:transparent;opacity:.035;right:-210px;top:-120px}
.contact-symbol:after{background:var(--ink)}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:120px;position:relative;z-index:2}
.contact-grid>div>p:last-child{color:var(--muted);max-width:500px}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:23px}
.contact-form label{display:flex;flex-direction:column;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.11em}
.contact-form input,.contact-form select,.contact-form textarea{border:0;border-bottom:1px solid var(--line);background:transparent;padding:13px 0;font:400 16px var(--sans);color:var(--ink);outline:0;border-radius:0}
.contact-form textarea{resize:vertical}
.contact-form .form-trap{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.contact-form button:disabled{opacity:.55;cursor:wait}
.form-status{margin:0;color:var(--ink);font-size:13px;line-height:1.5}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--teal)}
.full{grid-column:1/-1}
.form-status{grid-column:1/-1;margin:0;color:var(--teal);font-weight:600}
footer{background:var(--deep);color:#fff;padding:80px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.5fr .6fr .9fr;gap:80px}
.footer-brand p{color:rgba(255,255,255,.55);max-width:330px;margin-top:26px}
.footer-grid h3{text-transform:uppercase;letter-spacing:.15em;font-size:11px;color:var(--lime);margin-bottom:18px}
.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:9px}
.footer-grid a:not(.brand){font-size:14px;color:rgba(255,255,255,.72)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:65px;padding-top:26px;display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.46)}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .75s,transform .75s}
.reveal.visible{opacity:1;transform:none}
@media(max-width:960px){.main-nav,.header-cta{display:none}
.menu-toggle{display:block;margin-left:auto}
.main-nav.open{display:flex;position:absolute;top:82px;left:0;right:0;background:var(--deep);padding:25px;flex-direction:column}
.hero{min-height:800px}
.hero-content{grid-template-columns:1fr;padding-top:70px}
.anniversary{position:absolute;right:20px;bottom:0}
.anniversary-ring{width:145px;height:145px}
.anniversary-ring b{font-size:65px}
.hero-copy{max-width:680px}
.split-intro,.method-grid,.timeline-grid,.contact-grid{grid-template-columns:1fr;gap:65px}
.intro-text{padding-left:0;border-left:0}
.service-grid{grid-template-columns:1fr 1fr}
.section-head{gap:50px}
.method-visual{min-height:500px}
.timeline-title{position:static}
.proof-grid{grid-template-columns:1fr;gap:55px}
.quote{padding:45px 0 0;border-left:0;border-top:1px solid rgba(3,47,61,.25)}
}
@media(max-width:650px){.shell,.nav-shell{width:min(calc(100% - 32px),var(--max))}
.nav-shell{height:72px}
.hero{min-height:860px;padding-top:72px}
.hero-content{display:block;padding-top:110px}
.hero-actions{align-items:flex-start;flex-direction:column;gap:20px}
.hero-footer{display:none}
.anniversary{right:28px;bottom:28px}
.anniversary p{display:none}
.anniversary-ring{width:118px;height:118px}
.anniversary-ring b{font-size:52px}
.section{padding:82px 0}
h2{font-size:40px}
.split-intro{gap:40px}
.section-head{grid-template-columns:1fr;gap:10px}
.section-head>p{margin-bottom:0}
.service-grid{grid-template-columns:1fr}
.service-card{min-height:380px}
.method-visual{min-height:420px;padding:34px}
.loop-mark{width:330px;height:330px}
.work-grid{display:flex;overflow:auto;scroll-snap-type:x mandatory;margin-right:-16px;padding-right:16px}
.work-card,.work-card.tall,.work-card.wide{min-width:85vw;height:470px;scroll-snap-align:start}
.timeline-list article{grid-template-columns:70px 1fr;gap:15px}
.proof-number strong{font-size:120px}
.contact-form{grid-template-columns:1fr}
.contact-form label{grid-column:1/-1}
.footer-grid{grid-template-columns:1fr;gap:45px}
.footer-bottom{flex-direction:column;gap:8px}
.marquee{font-size:27px}
}

/* Responsive containment — keeps decorative and content layers inside the viewport. */
html,body{width:100%;max-width:100%;overflow-x:hidden;overflow-x:clip}
body{position:relative}
header,main,footer,section{width:100%;max-width:100%}
.hero-content>*,.split-intro>*,.section-head>*,.method-grid>*,.timeline-grid>*,.proof-grid>*,.contact-grid>*,.footer-grid>*,.service-card,.contact-form>*{min-width:0}
h1,h2,h3,p,li,a,span{overflow-wrap:break-word}
.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;max-width:100%;min-width:0}
.manifesto-band,.hero,.solutions,.method,.portfolio,.timeline,.proof,.contact,footer{overflow-x:hidden;overflow-x:clip}
@media(max-width:650px){
  .shell,.nav-shell{width:calc(100% - 32px);max-width:calc(100vw - 32px)}
  .hero-content,.split-intro,.section-head,.method-grid,.timeline-grid,.proof-grid,.contact-grid,.footer-grid,.service-grid{width:100%;max-width:100%}
  .service-card{width:100%;max-width:100%;padding-inline:28px}
  .timeline-list .now{margin-inline:0;padding-inline:22px}
  .method-visual{width:100%;max-width:100%;padding-inline:28px}
  .loop-mark{max-width:calc(100vw - 64px);max-height:calc(100vw - 64px);margin-left:-72px}
  .work-grid{width:100%;max-width:100%;margin-right:0;padding-right:0;overscroll-behavior-x:contain}
  .work-card,.work-card.tall,.work-card.wide{min-width:calc(100vw - 48px);max-width:calc(100vw - 48px)}
  .proof-number{min-width:0;gap:18px}
  .proof-number strong{font-size:104px}
  .quote{min-width:0}
  .quote p{max-width:100%}
}

@media(max-width:650px){
  .work-grid{align-items:flex-start;scroll-padding-inline:0}
  .work-card,.work-card.tall,.work-card.wide{display:flex;flex-direction:column;height:auto;min-height:0;min-width:100%;max-width:100%;background:var(--deep)}
  .work-card img{width:100%;height:auto;max-height:none;aspect-ratio:16/10;object-fit:cover;object-position:center;background:var(--deep)}
  .work-card:after{display:none}
  .work-card figcaption{position:static;inset:auto;min-height:112px;padding:20px 22px 24px;background:var(--deep)}
  .work-controls{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:18px}
  .work-controls button{width:44px;height:44px;border:1px solid rgba(7,63,80,.22);border-radius:50%;background:#fff;color:var(--ink);font:600 19px var(--display);cursor:pointer}
  .work-controls button:disabled{opacity:.35;cursor:default}
  .work-controls span{min-width:52px;text-align:center;color:var(--muted);font-size:12px;letter-spacing:.08em}
}

/* Composite sections also carry .shell. Keep their gutters after child-grid rules. */
@media(max-width:650px){
  .shell.hero-content,
  .shell.split-intro,
  .shell.method-grid,
  .shell.timeline-grid,
  .shell.proof-grid,
  .shell.contact-grid,
  .shell.footer-grid{
    width:calc(100% - 32px);
    max-width:calc(100vw - 32px);
    margin-inline:auto;
  }
  .split-intro>*,.intro-title,.intro-text{
    width:100%;
    max-width:100%;
    min-width:0;
  }
}

/* On phones the anniversary seal participates in layout instead of overlaying copy. */
@media(max-width:650px){
  .anniversary{
    position:static;
    width:100%;
    margin:38px 0 18px;
    display:flex;
    justify-content:flex-end;
  }
  .anniversary-ring{
    flex:0 0 118px;
  }
}
