/* StudioExcel theme stylesheet.
   Ported as-is from design/index.html: do not tidy values or rename keyframes. */

/* self-hosted fonts (SIL OFL) */
/* latin-ext */
@font-face{font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face{font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(../fonts/bricolage-grotesque-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* latin-ext */
@font-face{font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url(../fonts/instrument-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face{font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url(../fonts/instrument-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* latin-ext */
@font-face{font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/instrument-serif-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face{font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/instrument-serif-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

body{margin:0; background-color: #ECEBE8; }
a{color:#121212}a:hover{color:#121212}
.site{--ink:#121212;--ground:#F2F0EA;--muted:#57554F;--accent-lite:color-mix(in oklch, var(--accent) 62%, white);font-family:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;overflow-x:clip}
.site *{box-sizing:border-box}
.disp{font-family:'Bricolage Grotesque','Helvetica Neue',Helvetica,sans-serif;font-variation-settings:'opsz' 96}
.serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-0.01em}

/* logo: the x turns into a + on hover */
.logo-x{display:inline-block;color:var(--accent);transition:transform .55s cubic-bezier(.34,1.8,.64,1)}
.logo:hover .logo-x{transform:rotate(45deg) scale(1.2)}
.logo-mark{width:56px;height:56px;flex:none;display:block;transition:transform .9s cubic-bezier(.34,1.5,.64,1)}
.logo:hover .logo-mark{transform:rotate(360deg)}

/* sticky header: transparent over the hero, frosted once you scroll */
.topbar{position:sticky;top:0;z-index:50;background-color:rgba(250,249,246,.86);box-shadow:0 1px 0 rgba(18,18,18,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.site section[id]{scroll-margin-top:96px}
@supports (animation-timeline: scroll()){
.motion-on .topbar{animation:bar linear both;animation-timeline:scroll();animation-range:0 140px}
.motion-on .topbar header{animation:barpad linear both;animation-timeline:scroll();animation-range:0 140px}
.motion-on .topbar .logo-mark{animation:barlogo linear both;animation-timeline:scroll();animation-range:0 140px}
/* the blur itself is not animated: Safari drops backdrop-filter when it is driven by the scroll animation.
   It stays on from the rule above; at the top of the page there is nothing behind the bar to blur. */
@keyframes bar{from{background-color:rgba(250,249,246,0);box-shadow:0 1px 0 rgba(18,18,18,0)}to{background-color:rgba(250,249,246,.86);box-shadow:0 1px 0 rgba(18,18,18,.12)}}
@keyframes barpad{from{padding-top:24px;padding-bottom:24px}to{padding-top:12px;padding-bottom:12px}}
@keyframes barlogo{from{width:56px;height:56px}to{width:44px;height:44px}}
}
.navlink{text-decoration:none;position:relative;padding:12px 2px}
.navlink::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
.navlink:hover::after{transform:scaleX(1);transform-origin:left}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 28px;border-radius:999px;font-weight:600;text-decoration:none;transition:transform .25s ease, background-color .25s ease, color .25s ease}
.btn-ink{background:var(--ink);color:#F2F0EA}
.btn-ink:hover{background:var(--accent);color:var(--on-accent);transform:translateY(-3px) rotate(-2deg)}
.btn-ghost{border:2px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#F2F0EA}
.btn svg{transition:transform .25s ease}
.btn:hover svg{transform:translateX(4px)}

/* hero */
.hero-h .in{display:flex;align-items:center;gap:.25em;animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:translateY(45%) rotate(2deg);opacity:0;filter:blur(10px)}to{transform:none;opacity:1;filter:blur(0)}}
.tick{width:.62em;height:.62em;flex:none;fill:none;stroke:var(--accent);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.tick path{stroke-dasharray:1;stroke-dashoffset:0;animation:draw .45s cubic-bezier(.6,0,.2,1) both}
.circ{position:relative;display:inline-block;white-space:nowrap}
.circ svg{position:absolute;left:-8%;top:-10%;width:116%;height:124%;overflow:visible;pointer-events:none}
.circ .draw{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;animation:draw 1.1s cubic-bezier(.6,0,.2,1) 1.75s both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.fade-up{animation:fadeup .9s ease both}
@keyframes fadeup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* hero visual: a site that builds itself — plan, develop, deliver, excel (12s loop) */
.hero-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:center}
.mock-wrap{position:relative;justify-self:end;width:100%;max-width:440px}
.mock{position:relative;aspect-ratio:4/5;background:#FAF9F6;border:2px solid #121212;border-radius:20px;box-shadow:14px 14px 0 var(--accent);display:flex;flex-direction:column;overflow:hidden;transform:rotate(3deg);animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(1.5deg) translateY(-12px)}}
.mock-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:2px solid #121212}
.mock-bar .dot{width:11px;height:11px;border-radius:50%;border:2px solid #121212}
.mock-bar .url{margin-left:8px;border:1.5px solid #121212;border-radius:999px;padding:3px 12px;font-size:12px;font-weight:500;color:#57554F}
.mock-bar .live{margin-left:auto;display:flex;align-items:center;gap:6px;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;animation:live 8s infinite both}
.mock-bar .live::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
@keyframes live{0%,38%{opacity:0;transform:scale(.5)}43%,97%{opacity:1;transform:none}100%{opacity:0;transform:scale(.5)}}
.mock-body{flex:1;display:flex;flex-direction:column;gap:14px;padding:20px}
.blk{display:block;border-radius:10px;border:2px solid var(--f);background:var(--f);animation:fillin 8s infinite both}
@keyframes fillin{0%,16%{background-color:transparent;border-color:#9A978F;border-style:dashed}21%,97%{background-color:var(--f);border-color:var(--f);border-style:solid}100%{background-color:transparent;border-color:#9A978F;border-style:dashed}}
.chart{position:absolute;inset:14% 8% 10% 8%;width:84%;height:76%;overflow:visible}
.chart path{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:chart 8s infinite both}
.chart circle{fill:#FFFFFF;animation:chartdot 8s infinite both}
@keyframes chart{0%,60%{stroke-dashoffset:1}75%,97%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes chartdot{0%,74%{opacity:0;transform:scale(0)}77%,97%{opacity:1;transform:none}100%{opacity:0}}
.chart circle{transform-box:fill-box;transform-origin:center}
.stage{position:absolute;left:-22px;top:-22px;display:grid;justify-items:center;text-align:center;background:#121212;color:#F2F0EA;border-radius:999px;padding:12px 20px;font-weight:800;font-size:18px;letter-spacing:-0.01em;transform:rotate(-6deg);box-shadow:0 0 0 4px #F2F0EA;z-index:2}
.stage{transition:none;animation:stagebg 8s infinite both}
@keyframes stagebg{0%,59%{background-color:#121212;color:#F2F0EA}62%,97%{background-color:var(--accent);color:#FFFFFF}100%{background-color:#121212;color:#F2F0EA}}
.stage .c{grid-area:1 / 1;white-space:nowrap;opacity:0;animation:8s infinite both}
.stage .c1{animation-name:c1}.stage .c2{animation-name:c2}.stage .c3{animation-name:c3}.stage .c4{animation-name:c4;opacity:1}
@keyframes c1{0%{opacity:0;transform:translateY(8px)}2%,18%{opacity:1;transform:none}21%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes c2{0%,19%{opacity:0;transform:translateY(8px)}22%,38%{opacity:1;transform:none}41%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes c3{0%,39%{opacity:0;transform:translateY(8px)}42%,58%{opacity:1;transform:none}61%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes c4{0%,59%{opacity:0;transform:translateY(8px) scale(.9)}63%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
.motion-off .stage, .motion-off .stage *{background-color:var(--accent);color:#FFFFFF}
@media (max-width: 980px){
.hero-grid{display:contents}
.mock-wrap{order:1;align-self:center;width:min(340px, 82%);margin:16px 0 8px}
.site .badge{display:none}
}
/* phones: the animation IS the headline; the text h1 stays for search engines and screen readers */
@media (max-width: 700px){
.hero-h{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.mock-wrap{order:0;width:min(360px, 88%);margin:44px 0 8px}
.mock{aspect-ratio:1 / 1.1}
.stage{left:50%;top:-34px;transform:translateX(-50%) rotate(-3deg);font-size:28px;padding:16px 28px;letter-spacing:-0.02em;justify-items:center}
}

/* spinning badge */
.badge{position:relative;display:grid;place-items:center;width:180px;height:180px;border-radius:50%;background:var(--accent);color:var(--on-accent);text-decoration:none;transition:transform .4s cubic-bezier(.34,1.6,.64,1)}
.badge:hover{transform:scale(1.08) rotate(-6deg)}
.badge .ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 16s linear infinite}
.badge .ring text{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.22em;fill:var(--on-accent)}
.badge .arrow{width:46px;height:46px;stroke:var(--on-accent);stroke-width:2.5;fill:none;transition:transform .4s ease}
.badge:hover .arrow{transform:rotate(45deg)}
@keyframes spin{to{transform:rotate(360deg)}}

/* marquee */
.marquee{display:flex;width:max-content;animation:slide 36s linear infinite}
.marquee:hover{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.star{width:34px;height:34px;flex:none;fill:#FFFFFF;animation:spin 6s linear infinite}

/* proof */
.stat{display:flex;flex-direction:column;gap:14px;border-top:2px solid var(--ink);padding-top:24px}
.stat .big{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(56px,6.4vw,96px);line-height:.9;letter-spacing:-0.05em;transition:color .3s ease, transform .4s cubic-bezier(.34,1.6,.64,1);display:inline-block;transform-origin:left bottom}
.stat:hover .big{color:var(--accent);transform:rotate(-3deg) scale(1.04)}

/* services */
.svc{position:relative;display:grid;grid-template-columns:80px minmax(0,1.2fr) minmax(0,1fr) 64px;gap:32px;align-items:center;padding:40px 24px;border-top:2px solid var(--ink);text-decoration:none;color:var(--ink);isolation:isolate;overflow:hidden;transition:color .3s ease}
.svc::before{content:'';position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.svc:hover{color:var(--on-accent)}
.svc:hover::before{transform:scaleY(1)}
.svc .t{transition:transform .45s cubic-bezier(.7,0,.2,1)}
.svc:hover .t{transform:translateX(24px)}
.svc .ar{width:56px;height:56px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.svc:hover .ar{transform:rotate(-45deg)}
.svc .we{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.75}

/* work */
.card{display:flex;flex-direction:column;gap:18px;text-decoration:none;color:#F2F0EA}
.card .img{position:relative;overflow:hidden;border-radius:20px;aspect-ratio:4/5}
.card .fill{position:absolute;inset:0;display:grid;place-items:center;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.card:hover .fill{transform:scale(1.06) rotate(-1.5deg)}
.card .pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.4);opacity:0;background:#F2F0EA;color:#121212;border-radius:999px;padding:14px 22px;font-weight:600;white-space:nowrap;transition:transform .4s cubic-bezier(.34,1.6,.64,1),opacity .25s ease}
.card:hover .pill{transform:translate(-50%,-50%) scale(1);opacity:1}
.card .tag{align-self:flex-start;border:1.5px solid #6B6962;border-radius:999px;padding:6px 12px;font-size:14px;color:#DAD7CF}
.pat-a{background:repeating-linear-gradient(-45deg,#1E1E1D 0 22px,#2C2B28 22px 44px)}
.pat-b{background:radial-gradient(circle at 50% 50%,transparent 0 30%,var(--on-accent) 30% 31%,transparent 31% 45%,var(--on-accent) 45% 46%,transparent 46% 60%,var(--on-accent) 60% 61%,transparent 61%),var(--accent)}
.pat-c{background:radial-gradient(#121212 2.5px,transparent 2.5px) 0 0/22px 22px,#DCD8CE}
.pat-d{background:linear-gradient(90deg,transparent 0 48%,var(--accent) 48% 52%,transparent 52%) 0 0/48px 48px,linear-gradient(0deg,transparent 0 48%,var(--accent) 48% 52%,transparent 52%) 0 0/48px 48px,#1E1E1D}
.lbl{background:#121212;color:#F2F0EA;padding:6px 10px;font-weight:600;letter-spacing:.08em;font-size:13px}
.offset{margin-top:96px}

/* founder */
.portrait{position:relative;aspect-ratio:4/5;border-radius:24px;border:2px solid var(--ink);background:radial-gradient(#121212 1.6px,transparent 1.6px) 0 0/16px 16px,#E4E1D8;display:grid;place-items:center;transform:rotate(-3deg);box-shadow:14px 14px 0 var(--accent);transition:transform .5s cubic-bezier(.34,1.6,.64,1), box-shadow .5s ease}
.portrait:hover{transform:rotate(1.5deg) translateY(-6px);box-shadow:22px 22px 0 var(--accent)}
.chip{border:2px solid var(--ink);border-radius:999px;padding:10px 18px;font-weight:600;transition:background-color .25s ease,color .25s ease,transform .25s ease}
.chip:hover{background:var(--ink);color:#F2F0EA;transform:rotate(-3deg)}

/* footer wave */
.wave span{display:inline-block;transition:transform .45s cubic-bezier(.34,1.8,.64,1),color .3s ease}
.wave:hover span{transform:translateY(-0.14em) rotate(-4deg);color:var(--accent)}
.mail{color:var(--accent-lite);text-decoration:none;background-image:linear-gradient(var(--accent-lite),var(--accent-lite));background-size:0 3px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s ease}
.mail:hover{color:var(--accent-lite);background-size:100% 3px}
.flink{color:#C9C6BD;text-decoration:none;padding:12px 0}
.flink:hover{color:#F2F0EA}

/* scroll-driven reveals where supported */
@supports (animation-timeline: view()){
.motion-on .reveal{animation:fadeup linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
.motion-on .mw{animation:light linear both;animation-timeline:view();animation-range:cover 10% cover 38%}
@keyframes light{from{color:#C9C6BD}to{color:#121212}}
.motion-on .grow{animation:grow linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
@keyframes grow{from{transform:scale(.86) rotate(-3deg)}to{transform:none}}
}
.motion-off *, .motion-off *::before, .motion-off *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion: reduce){.site *, .site *::before, .site *::after{animation:none!important;transition-duration:.01ms!important}}

@media (max-width: 860px){
.svc{grid-template-columns:48px minmax(0,1fr) 40px;gap:16px;padding:28px 8px}
.svc .d{grid-column:2 / 3}
.svc .ar{width:36px;height:36px;grid-row:1}
.offset{margin-top:0}
.badge{width:140px;height:140px}
.hide-sm{display:none}
}

/* ==========================================================================
   Everything below was inline style="" in design/index.html, moved into
   classes. Values are unchanged.
   ========================================================================== */

.site{--accent:#23ABFF;--on-accent:#121212;background:#F2F0EA;color:#121212;min-height:100vh}

/* header */
.topbar header{max-width:1360px;margin:0 auto;padding:24px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:12px;font-size:30px;letter-spacing:-0.04em;text-decoration:none;color:#121212}
.topnav{display:flex;flex-wrap:wrap;align-items:center;gap:32px;font-weight:500}

/* shared */
.label{margin:0;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;font-size:14px;color:#57554F}
.btn svg{fill:none;stroke:currentColor;stroke-width:2}
.btn.btn-line,.btn.btn-line:hover{border:2px solid #F2F0EA;color:#F2F0EA}

/* hero */
.hero{max-width:1360px;margin:0 auto;padding:56px 32px 96px;display:flex;flex-direction:column;gap:56px}
.eyebrow{margin:0;display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;font-size:14px;color:#57554F}
.eyebrow-dot{width:10px;height:10px;border-radius:50%;background:#23ABFF;box-shadow:0 0 0 4px #121212;flex:none;margin-left:4px}
.hero-h{margin:0;display:flex;flex-direction:column;gap:4px;font-weight:800;letter-spacing:-0.05em;line-height:0.95}
.hero-h .in.in-1,.hero-h .in.in-2,.hero-h .in.in-3{font-size:clamp(40px, 6.2vw, 92px)}
.hero-h .in.in-1{animation-delay:.1s}
.hero-h .in.in-2{animation-delay:.3s}
.hero-h .in.in-3{animation-delay:.5s}
.hero-h .in.in-4{animation-delay:1.5s;font-size:clamp(76px, 14vw, 216px);line-height:0.9;margin-top:12px}
.hero-h .in-1 .tick path{animation-delay:.75s}
.hero-h .in-2 .tick path{animation-delay:1.05s}
.hero-h .in-3 .tick path{animation-delay:1.35s}
.hero-h .circ{font-size:1.06em;letter-spacing:-0.02em}
.mock-wrap.fade-up{animation-delay:.6s}
.mock .mock-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mock .mock-pair{flex:1;min-height:56px;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
.mock .b1{--f:#121212;width:30%;height:12px;animation-delay:.05s}
.mock .b2{--f:#121212;width:24%;height:12px;animation-delay:.1s}
.mock .b3{--f:var(--accent);position:relative;height:36%;animation-delay:.15s}
.mock .b4{--f:#121212;width:88%;height:14px;animation-delay:.2s}
.mock .b5{--f:#121212;width:64%;height:14px;animation-delay:.25s}
.mock .b6{--f:#DCD8CE;animation-delay:.3s}
.mock .b7{--f:#121212;animation-delay:.35s}
.mock .b8{--f:#121212;width:42%;height:40px;border-radius:999px;animation-delay:.4s}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:40px}
.hero-intro{max-width:600px;display:flex;flex-direction:column;gap:32px}
.hero-intro.fade-up{animation-delay:2.2s}
.hero-intro p{margin:0;font-size:21px;line-height:1.5;color:#2B2A27}
.btn-row{display:flex;flex-wrap:wrap;gap:16px}
.badge.fade-up{animation-delay:2.4s}

/* ribbon */
.ribbon{background:#23ABFF;border-top:2px solid #121212;border-bottom:2px solid #121212;padding:26px 0;overflow:hidden;transform:rotate(-1.5deg);margin:24px -20px 0}
.marquee{font-size:44px;font-weight:800;letter-spacing:-0.03em;color:#FFFFFF}
.marquee-set{display:flex;align-items:center;gap:40px;padding-right:40px;white-space:nowrap}

/* manifesto */
.manifesto{max-width:1360px;margin:0 auto;padding:180px 32px 120px;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr));gap:48px}
.manifesto-text{margin:0;grid-column:span 3;font-size:clamp(32px, 4.4vw, 64px);line-height:1.08;font-weight:700;letter-spacing:-0.035em;text-wrap:pretty}
.manifesto-text .serif{font-weight:400}

/* proof */
.proof{max-width:1360px;margin:0 auto;padding:0 32px 180px}
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr));gap:40px}
.stat .cap{font-size:17px;line-height:1.5;color:#2B2A27}

/* services */
.services{max-width:1360px;margin:0 auto;padding:0 32px 160px;display:flex;flex-direction:column;gap:48px}
.services-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px}
.services-h{margin:0;font-size:clamp(44px, 6vw, 88px);font-weight:800;letter-spacing:-0.05em;line-height:1}
.services-intro{margin:0;max-width:380px;color:#57554F;font-size:17px;line-height:1.5}
.svc-list{display:flex;flex-direction:column;border-bottom:2px solid #121212}
.svc .num{font-size:20px;font-weight:700}
.svc .t{display:flex;flex-direction:column;gap:8px}
.svc .svc-title{margin:0;font-size:clamp(30px, 3.6vw, 52px);font-weight:800;letter-spacing:-0.04em;line-height:1}
.svc .d{font-size:17px;line-height:1.5}

/* work */
.work{background:#121212;color:#F2F0EA;padding:160px 0}
.work-in{max-width:1360px;margin:0 auto;padding:0 32px;display:flex;flex-direction:column;gap:64px}
.work-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.work-h{margin:0;font-size:clamp(44px, 7vw, 112px);font-weight:800;letter-spacing:-0.05em;line-height:0.95}
.work-h .serif{color:var(--accent-lite)}
.work-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));gap:32px;align-items:start}
.card .card-title{margin:0;font-size:26px;font-weight:700;letter-spacing:-0.03em}
.card .fill img{width:100%;height:100%;object-fit:cover;display:block}
.lbl-line{border:1px solid #6B6962}

/* about */
.about{max-width:1360px;margin:0 auto;padding:180px 32px 160px;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(380px, 100%), 1fr));gap:80px;align-items:center}
.about-pic{max-width:460px;width:100%;justify-self:center}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;border-radius:22px}
.about-copy{display:flex;flex-direction:column;gap:28px}
.about-h{margin:0;font-size:clamp(44px, 6vw, 88px);font-weight:800;letter-spacing:-0.05em;line-height:0.95}
.about-body{display:flex;flex-direction:column;gap:28px}
.about-body p{margin:0;font-size:20px;line-height:1.55;color:#2B2A27}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.sig{margin:0;font-size:40px;color:#121212}

/* quote */
.quote{max-width:1360px;margin:0 auto;padding:0 32px 160px}
.quote-card{margin:0;background:#23ABFF;color:#121212;border:2px solid #121212;border-radius:32px;padding:clamp(32px, 6vw, 88px);display:flex;flex-direction:column;gap:32px;box-shadow:12px 12px 0 #121212}
.quote-card svg{fill:currentColor}
.quote-card blockquote{margin:0;font-size:clamp(28px, 3.6vw, 52px);line-height:1.1;font-weight:700;letter-spacing:-0.035em}
.quote-card figcaption{font-size:17px;font-weight:600}

/* contact + footer. In the reference the footer sat inside the contact section;
   here it is the site footer, so the 56px gap and 48px bottom padding move to it. */
.contact{background:#121212;color:#F2F0EA;padding:160px 0 0}
.contact-in,.site-foot-in{max-width:1360px;margin:0 auto;padding:0 32px;display:flex;flex-direction:column;gap:56px}
.contact .label{color:#C9C6BD}
.wave{margin:0;font-size:clamp(72px, 16vw, 248px);line-height:0.85;font-weight:800;letter-spacing:-0.06em;cursor:default}
.wave span{transition-delay:calc(var(--i, 0) * .03s)}
.wave .stop{color:var(--accent)}
.contact-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:40px}
.contact-body{margin:0;max-width:520px;font-size:20px;line-height:1.5;color:#DAD7CF}
.mail{font-size:clamp(26px, 3.4vw, 48px);font-weight:700;letter-spacing:-0.03em;padding-bottom:6px}
.site-foot{background:#121212;color:#F2F0EA;padding:56px 0 48px}
.site-foot footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid #3A3935;padding-top:32px;font-size:15px;color:#C9C6BD}
.foot-nav{display:flex;flex-wrap:wrap;gap:28px}

/* ==========================================================================
   Additions: not in the reference.
   ========================================================================== */

/* reduced motion: the hero pill rests on its end state ("You excel", white on blue) */
@media (prefers-reduced-motion: reduce){.site .stage, .site .stage *{background-color:var(--accent);color:#FFFFFF}}

/* the reference let a:hover turn card titles ink-on-ink */
.card:hover{color:#F2F0EA}

/* focus states */
.site a:focus-visible,.site button:focus-visible{outline:3px solid #121212;outline-offset:4px}
.site .work a:focus-visible,.site .contact a:focus-visible,.site .site-foot a:focus-visible{outline-color:#F2F0EA}
.site .svc:focus-visible{outline-offset:-5px}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:#121212;color:#F2F0EA;padding:14px 20px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:16px;color:#F2F0EA}

/* keep the sticky bar clear of the WordPress admin bar */
.admin-bar .topbar{top:32px}
@media (max-width: 782px){.admin-bar .topbar{top:46px}}
@media (max-width: 600px){.admin-bar .topbar{top:0}}

/* inner pages: case study, plain page, 404 */
.page-head{max-width:1360px;margin:0 auto;padding:72px 32px 56px;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.page-h{margin:0;font-size:clamp(48px, 8vw, 128px);font-weight:800;letter-spacing:-0.05em;line-height:0.95}
.page-lede{margin:0;max-width:720px;font-size:21px;line-height:1.5;color:#2B2A27}
.tag-ink{align-self:flex-start;border:1.5px solid #121212;border-radius:999px;padding:6px 12px;font-size:14px;color:#121212}
.case-hero{max-width:1360px;margin:0 auto;padding:0 32px 96px}
.case-img{position:relative;aspect-ratio:16/9;border-radius:24px;border:2px solid #121212;overflow:hidden;display:grid;place-items:center}
.case-img .fill{position:absolute;inset:0;display:grid;place-items:center}
.case-img img{width:100%;height:100%;object-fit:cover;display:block}
.case-body{max-width:1360px;margin:0 auto;padding:0 32px 120px;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(380px, 100%), 1fr));gap:80px;align-items:start}
.prose{max-width:720px;font-size:20px;line-height:1.55;color:#2B2A27}
.prose > :first-child{margin-top:0}
.prose > :last-child{margin-bottom:0}
.prose h2,.prose h3{font-family:'Bricolage Grotesque','Helvetica Neue',Helvetica,sans-serif;font-weight:800;letter-spacing:-0.04em;line-height:1;color:#121212;margin:1.6em 0 .5em}
.prose h2{font-size:clamp(30px, 3.6vw, 52px)}
.prose h3{font-size:26px;letter-spacing:-0.03em}
.prose img{max-width:100%;height:auto;border-radius:16px}
.result{margin:0;background:#23ABFF;color:#121212;border:2px solid #121212;border-radius:32px;padding:clamp(28px, 4vw, 56px);display:flex;flex-direction:column;gap:20px;box-shadow:12px 12px 0 #121212}
.result-big{margin:0;font-size:clamp(28px, 3.6vw, 52px);line-height:1.1;font-weight:700;letter-spacing:-0.035em}
.case-gallery{max-width:1360px;margin:0 auto;padding:0 32px 120px;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(380px, 100%), 1fr));gap:32px}
.case-gallery img{width:100%;height:auto;display:block;border-radius:20px;border:2px solid #121212}
.page-body{max-width:1360px;margin:0 auto;padding:0 32px 160px}
.next{max-width:1360px;margin:0 auto;padding:0 32px 160px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px}
.next-h{margin:0;font-size:clamp(44px, 6vw, 88px);font-weight:800;letter-spacing:-0.05em;line-height:0.95}
.site-foot.solo{padding-top:48px}

/* photo feature: a section added after the reference (conference photo) */
.feature{max-width:1360px;margin:0 auto;padding:0 32px 160px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:80px;align-items:center}
.feature-copy{display:flex;flex-direction:column;gap:28px}
.feature-h{margin:0;font-size:clamp(40px, 5vw, 72px);font-weight:800;letter-spacing:-0.05em;line-height:0.95}
.feature-body{margin:0;font-size:20px;line-height:1.55;color:#2B2A27}
.feature-pic{position:relative;margin:0}
.feature-img{aspect-ratio:3/2;border:2px solid var(--ink);border-radius:24px;overflow:hidden;transform:rotate(2deg);box-shadow:14px 14px 0 var(--ink);transition:transform .5s cubic-bezier(.34,1.6,.64,1), box-shadow .5s ease}
.feature-pic:hover .feature-img{transform:rotate(-1deg) translateY(-6px);box-shadow:22px 22px 0 var(--ink)}
.feature-img img{width:100%;height:100%;object-fit:cover;display:block}
.feature-pill{position:absolute;left:-22px;top:-22px;background:#121212;color:#F2F0EA;border-radius:999px;padding:12px 20px;font-weight:800;font-size:18px;letter-spacing:-0.01em;transform:rotate(-6deg);box-shadow:0 0 0 4px #F2F0EA;z-index:2}
@media (max-width: 980px){
.feature{grid-template-columns:minmax(0,1fr);gap:56px}
}

/* inner-page sections: service detail, points grid, all projects, testimonials */
.detail{max-width:1360px;margin:0 auto;padding:0 32px}
.detail-in{border-top:2px solid var(--ink);padding:72px 0 96px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:80px;align-items:start}
.detail-head{display:flex;flex-direction:column;gap:16px}
.detail-num{font-size:20px;font-weight:700}
.detail-h{margin:0;font-size:clamp(40px, 5vw, 72px);font-weight:800;letter-spacing:-0.05em;line-height:0.95}
.ticks{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr));gap:14px 32px;font-size:17px;font-weight:600;line-height:1.4}
.ticks li{display:flex;align-items:flex-start;gap:12px}
.ticks svg{width:20px;height:20px;flex:none;margin-top:2px;fill:none;stroke:var(--accent);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.detail + :not(.detail){margin-top:64px}
.points{max-width:1360px;margin:0 auto;padding:0 32px 160px;display:flex;flex-direction:column;gap:48px}
.points-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr));gap:40px}
.point{border-top:2px solid var(--ink);padding-top:24px;display:flex;flex-direction:column;gap:12px}
.point h3{margin:0;font-size:28px;font-weight:800;letter-spacing:-0.03em;line-height:1.05}
.point p{margin:0;font-size:17px;line-height:1.5;color:#2B2A27}
.work-grid-all{gap:56px 32px}
.card .fill img{object-position:top}
.case-img img{object-position:top}
.voices{max-width:1360px;margin:0 auto;padding:0 32px 128px;display:flex;flex-direction:column;gap:48px}
.voices-grid{columns:3 340px;column-gap:32px}
.voice{break-inside:avoid;margin:0 0 32px;background:#FAF9F6;border:2px solid var(--ink);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:20px;transition:transform .4s cubic-bezier(.34,1.6,.64,1), box-shadow .4s ease}
.voice:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--accent)}
.voice blockquote{margin:0;font-size:19px;line-height:1.5;color:#2B2A27}
.voice figcaption{font-size:15px;font-weight:600}
.prose blockquote{margin:1.6em 0;padding-left:24px;border-left:4px solid var(--accent);font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:26px;line-height:1.3;color:#121212}
.prose blockquote cite{display:block;margin-top:12px;font-family:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;font-style:normal;font-size:15px;font-weight:600}
.page-head .label.fade-up{animation-delay:.05s}
.page-head .page-h.fade-up{animation-delay:.15s}
.page-head .page-lede.fade-up{animation-delay:.3s}
@media (max-width: 980px){
.detail-in{grid-template-columns:minmax(0,1fr);gap:40px;padding:56px 0 72px}
}
.work + .quote,.work + .voices,.work + .points{padding-top:160px}
.work-all{padding:96px 0 128px}
.card .fill.shot img{width:84%;height:auto;object-fit:contain;border:2px solid #121212;border-radius:10px;box-shadow:8px 8px 0 #121212;transform:rotate(-3deg)}
.card .fill.shot.pat-a img,.card .fill.shot.pat-d img{border-color:#F2F0EA;box-shadow:8px 8px 0 var(--accent)}

/* contact: copy and email on the left, form on the right (replaces the reference's full-width heading row) */
.contact-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:end}
.contact-copy{display:flex;flex-direction:column;align-items:flex-start;gap:40px}
.contact .wave{font-size:clamp(64px, 9.4vw, 136px);white-space:nowrap}
.cform{display:flex;flex-direction:column;gap:20px}
.cform-row{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:20px}
.cform label{display:flex;flex-direction:column;gap:10px;font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#C9C6BD}
.cform input,.cform textarea{width:100%;font:inherit;font-size:17px;font-weight:400;letter-spacing:0;text-transform:none;color:#F2F0EA;background:#1E1E1D;border:2px solid #3A3935;border-radius:16px;padding:16px 18px;transition:border-color .25s ease, background-color .25s ease}
.cform textarea{min-height:168px;resize:vertical;border-radius:20px}
.cform input:hover,.cform textarea:hover{border-color:#6B6962}
.cform input:focus-visible,.cform textarea:focus-visible{outline:3px solid var(--accent-lite);outline-offset:2px;border-color:var(--accent-lite);background:#121212}
.cform-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:8px}
.cform-note{margin:0;font-size:14px;color:#9A978F}
.cform-msg{margin:0;border:2px solid var(--accent-lite);border-radius:20px;padding:20px 24px;font-size:18px;line-height:1.5;color:#F2F0EA}
button.btn{border:0;cursor:pointer;font:inherit;font-weight:600}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{background:#F2F0EA;color:#121212;transform:translateY(-3px) rotate(-2deg)}
.site .contact button:focus-visible{outline-color:#F2F0EA}
@media (max-width: 980px){
.contact-in{grid-template-columns:minmax(0,1fr);gap:56px}
.contact .wave{font-size:clamp(72px, 16vw, 248px)}
}
@media (max-width: 560px){
.cform-row{grid-template-columns:minmax(0,1fr)}
}

/* small screens: keep the service row's arrow in the last column. The reference gave it a row
   but no column, so it was placed first and pushed the number and title one column along. */
@media (max-width: 860px){
.svc .ar{grid-column:3}
}