/* Self-hosted so the browser never opens connections to fonts.googleapis.com
   and fonts.gstatic.com before it can paint text. Variable fonts: one file
   per family covers every weight the site uses. */
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/plus-jakarta-sans-var.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;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/jetbrains-mono-var.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;
}

:root{
  --primary:#ffbd23; --primary-strong:#ffd35e; --primary-ink:#1b1409;
  --ink:hsl(215 28% 12%); --ink-2:hsl(215 12% 42%);
  --bg:hsl(36 33% 97%); --card:#fff; --border:hsl(30 16% 86%);
  --muted:hsl(32 18% 93%); --dark:#060503;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 48px}
.micro{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.mono{font-family:var(--mono)}

/* chrome */
.chrome{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 22px}
.pill{background:rgba(6,5,3,.66);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:14px}
.chrome .brand{padding:13px 18px}
.chrome .brand img{height:30px;width:auto}
.chrome nav{padding:17px 30px;display:flex;gap:30px;white-space:nowrap;color:rgba(255,255,255,.74)}
.chrome nav a:hover{color:var(--primary)}
.chrome .stack{display:flex;flex-direction:column;gap:8px;width:212px}
.chrome .login{padding:13px 18px;display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.74)}
.chrome .login:hover{color:var(--primary)}

.chrome .burger{display:none;align-items:center;justify-content:center;width:48px;height:48px;padding:0;cursor:pointer;color:#fff}
.chrome .burger .bars{display:flex;flex-direction:column;gap:5px;width:18px}
.chrome .burger .bars i{display:block;height:2px;border-radius:2px;background:currentColor}
.sheet{display:none;position:fixed;inset:0;z-index:80;flex-direction:column;padding:20px clamp(20px,6vw,32px) max(28px,env(safe-area-inset-bottom));background:radial-gradient(120% 60% at 80% 0%,rgba(255,189,35,.16),rgba(255,189,35,0) 60%),#060503;overflow-y:auto}
.chrome.open ~ .sheet, .sheet.open{display:flex}
.sheet .top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:auto}
.sheet .top img{height:30px;width:auto}
.sheet .close{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);cursor:pointer;padding:10px 0}
.sheet .close b{position:relative;display:block;width:16px;height:16px}
.sheet .close b:before,.sheet .close b:after{content:'';position:absolute;top:7px;left:0;width:16px;height:2px;border-radius:2px;background:#ffbd23}
.sheet .close b:before{transform:rotate(45deg)}
.sheet .close b:after{transform:rotate(-45deg)}
.sheet nav{display:flex;flex-direction:column;padding:36px 0 28px}
.sheet nav a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:clamp(28px,9vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1;text-transform:uppercase;color:#fff}
.sheet nav a i{font-family:var(--mono);font-size:11px;font-weight:400;font-style:normal;letter-spacing:.1em;color:#ffbd23}
.sheet .foot{display:flex;flex-direction:column;gap:12px}
.sheet .foot .login{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.18);padding:16px 18px;border-radius:14px}
.sheet .foot .contacts{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--mono);font-size:12.5px;color:rgba(255,255,255,.55);padding-top:14px}

/* buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:600;line-height:1;padding:0 18px;height:40px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.btn-lg{height:48px;font-size:15px;padding:0 26px;border-radius:14px}
.btn-block{display:flex;width:100%}
.btn-primary{background:var(--primary);color:var(--primary-ink);box-shadow:0 1px 2px rgba(15,23,42,.06)}
.btn-primary:hover{background:var(--primary-strong)}
.btn-outline{background:var(--card);color:var(--ink);border-color:var(--border)}
.btn-outline:hover{background:hsl(34 24% 92%)}
.glow{box-shadow:0 18px 44px -18px rgba(255,189,35,.7);border-radius:14px}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--dark);color:#fff;min-height:100vh;display:flex;flex-direction:column}
.hero .photo{position:absolute;inset:0;background:#0d0b07 center/cover no-repeat;background-image:url('hero.jpg')}
/* WebP is ~4x smaller; the JPEG above stays as the fallback for browsers
   that don't support image-set, which drop this rule wholesale. */
@supports (background-image:image-set(url('hero.webp') type('image/webp'))){
  .hero .photo{background-image:image-set(url('hero.webp') type('image/webp'),url('hero.jpg') type('image/jpeg'))}
}
.hero .ripple{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (prefers-reduced-motion:reduce){.hero .ripple{display:none}}
.hero .scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,5,3,.78) 0%,rgba(6,5,3,.2) 30%,rgba(6,5,3,.55) 62%,rgba(6,5,3,.94) 100%),linear-gradient(90deg,rgba(6,5,3,.8) 0%,rgba(6,5,3,.25) 45%,rgba(6,5,3,.1) 100%)}
.hero .grid{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:36px 36px}
.hero .content{position:relative;margin-top:auto;padding:0 48px 26px;width:100%}
.hero .lead{display:grid;grid-template-columns:1.4fr .6fr;gap:56px;align-items:end;margin-bottom:44px}
.hero .eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:26px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--primary);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.hero h1{font-size:clamp(48px,8.6vw,128px);line-height:.9;letter-spacing:-.05em;font-weight:800;margin:0;text-transform:uppercase}
.hero p{font-size:17px;line-height:1.55;color:rgba(255,255,255,.82);margin:0 0 24px}
.hero .bar{border-top:1px solid rgba(255,255,255,.28);padding-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hero .bar a:hover{color:var(--primary)}

/* sections */
section.band{padding:104px 0}
.band-white{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
h2.big{font-size:clamp(38px,5.4vw,76px);line-height:.95;letter-spacing:-.045em;font-weight:800;margin:0}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:48px}

/* services */
.svc{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.svc-list{border-top:1px solid var(--border)}
.svc-row{display:flex;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--border);transition:color .18s ease,padding .18s ease}
.svc-row .n{font-family:var(--mono);font-size:12px;color:var(--ink-2);width:28px;flex:none}
.svc-row .t{font-size:clamp(20px,2.4vw,30px);font-weight:700;letter-spacing:-.03em}
.svc-row.on{color:hsl(38 92% 38%);padding-left:10px}
/* Desktop reads the description from the side panel, so the copy that lives
   inside each row is hidden here and revealed only in the mobile accordion. */
.svc-desc{display:none;margin:0}
.svc-panel{position:sticky;top:110px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:30px;box-shadow:0 10px 26px -18px rgba(15,23,42,.1)}
.svc-panel .k{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:hsl(38 92% 40%);margin-bottom:16px}
.svc-panel h3{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:0 0 12px}
.svc-panel p{font-size:15px;line-height:1.65;color:var(--ink-2);margin:0 0 24px;text-wrap:pretty}
.link{font-size:14px;font-weight:700;color:hsl(38 92% 38%)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{border-top:2px solid var(--primary);padding-top:24px}
.step .n{font-family:var(--mono);font-size:12px;font-weight:700;color:hsl(38 92% 40%);margin-bottom:16px}
.step h3{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:0 0 10px}
.step p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan{background:#fff;border:1px solid var(--border);border-radius:20px;padding:32px;transition:transform .18s ease,box-shadow .18s ease}
.plan:hover{transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(15,23,42,.28)}
.plan h3{font-size:15px;font-weight:700;margin:0 0 10px}
.plan .price{font-family:var(--mono);font-size:42px;font-weight:700;letter-spacing:-.04em;margin-bottom:24px}
.plan .price span{font-size:14px;color:var(--ink-2);font-weight:500;font-family:'Plus Jakarta Sans',sans-serif}
.plan ul{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ink-2)}
.plan-dark{background:var(--dark);color:#fff;border:none;box-shadow:0 26px 60px -30px rgba(255,189,35,.55)}
.plan-dark .price{color:var(--primary)}
.plan-dark .price span{color:rgba(255,255,255,.55)}
.plan-dark ul{color:rgba(255,255,255,.7)}
.tag{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,189,35,.18);color:var(--primary);padding:5px 10px;border-radius:999px}
.plan-quoted{font-size:42px;font-weight:800;letter-spacing:-.04em;margin-bottom:24px}

/* work */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{border:1px solid var(--border);border-radius:20px;overflow:hidden;background:#fff;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 22px 46px -28px rgba(15,23,42,.35)}
.shot{height:180px;background:var(--muted) center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.card .meta{padding:20px;border-top:1px solid var(--border)}
.card .meta b{display:block;font-size:15px;margin-bottom:4px}
.card .meta span{font-family:var(--mono);font-size:12px;color:var(--ink-2)}

/* project rows (work page) */
.proj{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:0 10px 26px -18px rgba(15,23,42,.1);margin-bottom:20px}
.proj .shot{height:300px;border-right:1px solid var(--border)}
.proj .body{padding:40px;display:flex;flex-direction:column;justify-content:center}
.proj .n{font-family:var(--mono);font-size:12px;color:hsl(38 92% 40%);margin-bottom:14px}
.proj h3{font-size:34px;font-weight:800;letter-spacing:-.035em;margin:0 0 10px}
.proj .dom{font-family:var(--mono);font-size:13px;color:var(--ink-2);margin-bottom:24px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12px;font-weight:600;color:var(--ink-2);border:1px solid var(--border);background:#fff;padding:6px 12px;border-radius:999px}

/* faq */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;font-size:19px;font-weight:700;letter-spacing:-.02em;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:22px;color:hsl(38 92% 40%);line-height:1}
.faq details[open] summary::after{content:'−'}
.faq p{font-size:16px;line-height:1.7;color:var(--ink-2);max-width:46em;margin:0;padding-bottom:26px}

/* dark closing */
.dark{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.dark .glowball{position:absolute;bottom:-40%;left:-10%;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(255,189,35,.16),rgba(255,189,35,0) 60%)}
.dark .inner{position:relative;padding:112px 0}
.about{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:96px}
.about h2{font-size:clamp(34px,4.4vw,58px);line-height:1.02;letter-spacing:-.04em;font-weight:800;margin:0}
.about p{font-size:17px;line-height:1.7;color:rgba(255,255,255,.68);margin:0}
.cta{text-align:center;border-top:1px solid rgba(255,255,255,.12);padding-top:88px}
.cta h2{font-size:clamp(44px,8vw,110px);line-height:.92;letter-spacing:-.05em;font-weight:800;margin:0 0 32px}
.cta .row{display:flex;gap:12px;justify-content:center;margin-bottom:44px}
.contacts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;font-family:var(--mono);font-size:14px;color:rgba(255,255,255,.62)}
.contacts a:hover{color:var(--primary)}
footer{position:relative;border-top:1px solid rgba(255,255,255,.09);background:var(--dark);color:rgba(255,255,255,.4)}
footer .wrap{display:flex;justify-content:space-between;padding-top:22px;padding-bottom:22px;font-size:12.5px}

/* page hero (work / quote) */
.phero{position:relative;overflow:hidden;background:var(--dark);color:#fff}
.phero .glowball{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:1000px;height:1000px;border-radius:50%;background:radial-gradient(circle,rgba(255,189,35,.18),rgba(255,189,35,0) 60%)}
.phero .wrap{position:relative;padding-top:170px;padding-bottom:96px}
.phero .k{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--primary);margin-bottom:28px}
.phero h1{font-size:clamp(52px,10vw,140px);line-height:.9;letter-spacing:-.05em;font-weight:800;margin:0 0 36px}
.phero p{font-size:19px;line-height:1.55;color:rgba(255,255,255,.7);margin:0;max-width:26em}

/* quote form */
.quote{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start;padding-bottom:96px}
.quote .side{position:sticky;top:48px}
.quote .side h1{font-size:clamp(44px,6.4vw,84px);line-height:.92;letter-spacing:-.05em;font-weight:800;margin:0 0 28px}
.quote .side p{font-size:17px;line-height:1.65;color:rgba(255,255,255,.68);margin:0 0 40px;max-width:24em}
.quote .side .list{display:flex;flex-direction:column;gap:14px;font-family:var(--mono);font-size:14px;color:rgba(255,255,255,.72);border-top:1px solid rgba(255,255,255,.12);padding-top:28px}
.panel{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:40px;backdrop-filter:blur(12px)}
.field{display:flex;flex-direction:column;gap:8px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
input[type=text],input[type=email],textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:13px 15px;font-size:15px;color:#fff;font-family:inherit;outline:none;width:100%}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.35)}
input:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,189,35,.25)}
.needs{display:flex;flex-wrap:wrap;gap:9px}
.needs input{position:absolute;opacity:0;pointer-events:none}
.needs label{font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;padding:10px 16px;border-radius:999px;cursor:pointer;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.72);transition:all .15s ease}
.needs input:checked + label{border-color:var(--primary);background:rgba(255,189,35,.16);color:var(--primary)}
.hp{position:absolute;left:-9999px}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:6px}
.note{font-size:13px;color:rgba(255,255,255,.45)}
.alert{border:1px solid rgba(255,255,255,.16);background:rgba(255,189,35,.1);color:#ffd35e;border-radius:12px;padding:14px 16px;font-size:14px;margin-bottom:22px}

/* reveal */
@media (prefers-reduced-motion:reduce){
  .svc-desc{transition:none}
  .step::before,.step::after{transition:none}
}
/* Without JS the observer never runs, so show the rail already walked. */
.no-js .step::before{background:var(--primary);border-color:var(--primary)}
.no-js .step::after{background-size:100% 100%,100% 100%}

[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
[data-reveal].in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}

@media (max-width:1100px){
  .chrome nav{gap:18px;padding:15px 18px}
  .chrome .stack{width:180px}
}
@media (max-width:900px){
  .wrap{padding:0 24px}
  /* One continuous bar instead of three floating pills. The pill styling
     moves from the children to .chrome itself, so the logo and the menu
     button read as one piece of chrome rather than scattered boxes. */
  .chrome{
    padding:10px 12px 10px 16px;gap:10px;align-items:center;
    background:rgba(6,5,3,.72);backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.09)
  }
  .chrome .brand,.chrome .burger{background:none;border:none;backdrop-filter:none;border-radius:0}
  .chrome .brand{padding:0}
  .chrome nav{display:none}
  .chrome .burger{display:flex;margin-left:auto}
  .chrome .stack{display:none}
  .chrome .login{display:none}
  .hero .content{padding:0 24px 22px}
  .hero .lead,.svc,.about,.quote,.proj{grid-template-columns:1fr;gap:32px}
  .steps,.plans,.cards{grid-template-columns:1fr}
  /* The three steps are a real sequence, so on mobile they read as a path:
     a rail down the left that fills in as each step scrolls into view. The
     .in class comes from the existing scroll-reveal observer, so no extra
     JS — and .no-js / reduced motion fall back to the finished state. */
  .steps{position:relative;padding-left:40px;gap:0}
  .step{border-top:none;padding-top:0;padding-bottom:34px;position:relative}
  .step:last-child{padding-bottom:0}
  .step::before{
    content:'';position:absolute;left:-31px;top:3px;width:14px;height:14px;border-radius:50%;
    background:var(--bg);border:2px solid var(--border);
    transition:background .4s ease .15s,border-color .4s ease .15s,box-shadow .4s ease .15s
  }
  .step.in::before{background:var(--primary);border-color:var(--primary);box-shadow:0 0 0 4px rgba(255,189,35,.16)}
  /* Two stacked gradients: the amber fill grows over a static grey track,
     so the rail is visible before a step is reached and no separate track
     element has to run past the final dot. */
  .step::after{
    content:'';position:absolute;left:-25px;top:17px;width:2px;height:calc(100% - 17px);
    background-image:linear-gradient(var(--primary),var(--primary)),linear-gradient(var(--border),var(--border));
    background-repeat:no-repeat;
    background-size:100% 0%,100% 100%;
    transition:background-size .55s cubic-bezier(.22,1,.36,1) .1s
  }
  .step.in::after{background-size:100% 100%,100% 100%}
  .step:last-child::after{display:none}
  .step .n{margin-bottom:8px}
  .proj .shot{border-right:none;border-bottom:1px solid var(--border);height:220px}
  .quote .side{position:static}
  /* Touch has no hover, and a panel below ten rows puts the answer off
     screen. Each row becomes a disclosure that opens in place instead,
     using the same +/− affordance as the FAQ. */
  .svc-panel{display:none}
  .svc{gap:0}
  .svc-row{flex-wrap:wrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .svc-row .t{flex:1}
  /* ::after is the last flex item in DOM order, which would push it below
     the full-width description; order keeps it on the title row. */
  .svc-row::after{content:'+';font-size:21px;line-height:1;color:hsl(38 92% 40%);flex:none;order:1}
  .svc-desc{order:2}
  .svc-row.on::after{content:'−'}
  .svc-row.on{padding-left:0}
  .svc-desc{
    display:block;width:100%;max-height:0;overflow:hidden;opacity:0;
    font-size:15px;line-height:1.65;color:var(--ink-2);text-wrap:pretty;
    transition:max-height .34s cubic-bezier(.22,1,.36,1),opacity .24s ease,margin .34s cubic-bezier(.22,1,.36,1)
  }
  .svc-row.on .svc-desc{max-height:340px;opacity:1;margin:12px 0 2px}
  .svc-row:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
  section.band{padding:64px 0}
  .panel{padding:22px}
  .two{grid-template-columns:1fr}
  .head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:32px}
  .hero{min-height:88vh}
  .hero .lead{margin-bottom:32px}
  .hero .bar{gap:8px 20px;font-size:10px}
  .quote .side h1{font-size:clamp(34px,9vw,52px)}
  input[type=text],input[type=email],textarea{font-size:16px}
  .phero .wrap{padding-top:120px;padding-bottom:64px}
  .cta{padding-top:56px}
  .about{margin-bottom:56px}
  footer .wrap{flex-direction:column;gap:6px}
}
@media (max-width:560px){
  .chrome{padding:9px 10px 9px 14px;gap:8px}
  .chrome .brand{padding:0}
  .chrome .brand img{height:26px}
  .hero h1{font-size:clamp(38px,13vw,64px)}
  .hero .content{padding:0 20px 18px}
  .hero .bar{justify-content:flex-start}
  .btn-lg{height:44px;font-size:14px;padding:0 20px}
  .plan,.svc-panel{padding:24px}
  .plan .price,.plan-quoted{font-size:34px}
  .proj .body{padding:24px}
  .proj h3{font-size:26px}
  .svc-row .t{font-size:19px}
  .faq summary{font-size:17px}
  .contacts{gap:10px 20px;font-size:13px}
  .form-foot{flex-direction:column-reverse;align-items:stretch}
  .form-foot .note{text-align:center}
}

/* ---- work grid + case study ---- */
.filterbar{position:sticky;top:0;z-index:30;background:rgba(250,247,242,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.filterbar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
.filterbar .chips{gap:8px}
.filterbar .chip{font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--ink-2);transition:all .15s ease}
.filterbar .chip:hover{border-color:hsl(38 92% 55%);color:hsl(38 92% 34%)}
.filterbar .chip.on{border-color:var(--primary);background:hsl(42 100% 57%/.16);color:hsl(38 92% 34%)}
.filterbar .count{font-size:12px;color:var(--ink-2)}

.docket{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 10px 26px -18px rgba(15,23,42,.1);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.docket:hover{transform:translateY(-3px);box-shadow:0 24px 48px -30px rgba(15,23,42,.4);border-color:hsl(30 16% 74%)}
.docket-img{position:relative;display:block}
.shot.ratio{aspect-ratio:16/10;height:auto}
.docket-img .cat{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;background:rgba(6,5,3,.72);color:rgba(255,255,255,.86);padding:6px 10px;border-radius:999px}
.docket-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.docket-body .meta{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px;display:flex;gap:10px}
.docket-body .meta .sep{color:var(--border)}
.docket-title{font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:10px;display:block}
.docket-body p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 22px;text-wrap:pretty}
.docket-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #eef2f6;padding-top:16px}
.docket-foot .link{font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:7px}
.outbound{font-size:12px;font-weight:600;color:var(--ink-2);border:1px solid var(--border);border-radius:999px;padding:7px 13px;display:inline-flex;align-items:center;gap:6px}
.outbound:hover{border-color:hsl(38 92% 55%);color:hsl(38 92% 34%)}
.empty{text-align:center;padding:80px 20px;border:1px dashed var(--border);border-radius:20px}
.empty .t{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.empty p{font-size:15px;color:var(--ink-2);margin:0}

.case-head .back{display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:32px}
.case-head-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(28px,4vw,56px);align-items:end}
.case-meta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.case-meta .sep{color:rgba(255,255,255,.25)}
.case-head-grid h1{font-size:clamp(38px,6.4vw,84px);line-height:.95;letter-spacing:-.045em;font-weight:800;margin:0 0 24px}
.case-head-grid p{font-size:18px;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 28px;max-width:34em;text-wrap:pretty}
.case-img{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05)}

.story-rule{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:18px;margin-bottom:40px}
.story-rule .mono{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.story{max-width:34em;font-size:17px;line-height:1.75;color:var(--ink)}
.story h2{font-size:30px;line-height:1.15;letter-spacing:-.035em;font-weight:800;margin:44px 0 16px}
.story h2:first-child{margin-top:0}
.story h3{font-size:20px;line-height:1.3;letter-spacing:-.02em;font-weight:700;margin:32px 0 12px}
.story p{margin:0 0 24px;text-wrap:pretty}
.story ul{margin:0 0 24px;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.story li{padding-left:4px}
.story a{color:hsl(38 92% 36%);font-weight:600;border-bottom:1px solid hsl(38 92% 70%)}
.story blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:3px solid var(--primary);font-size:20px;line-height:1.55;letter-spacing:-.015em}

.pager{border-top:1px solid var(--border);margin-top:56px;padding-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.pagecard{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px 24px;display:block;box-shadow:0 10px 26px -18px rgba(15,23,42,.1)}
.pagecard:hover{border-color:hsl(30 16% 74%)}
.pagecard.right{text-align:right}
.pagecard .mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.pagecard .t{font-size:19px;font-weight:800;letter-spacing:-.025em}

@media (max-width:860px){
  .case-head-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .filterbar .chip{padding:11px 17px}
}