/* Loom Agency · demo by Aris Web Design · 2026-11
   Palette: teal #1F5A68 · linen #F2EEE6 · ink #0E2A31 · copper #C08457 (surfaces/lines only; text on copper = ink)
*/
@font-face{font-family:"Noto Serif Display";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/nsd-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Noto Serif Display";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/nsd-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Serif Display";font-style:italic;font-weight:300;font-display:swap;src:url(../fonts/nsd-italic-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Noto Serif Display";font-style:italic;font-weight:300;font-display:swap;src:url(../fonts/nsd-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Commissioner;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/commissioner-greek-400-normal.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:Commissioner;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/commissioner-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212}
@font-face{font-family:Commissioner;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/commissioner-greek-600-normal.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:Commissioner;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/commissioner-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212}

:root{
  --teal:#1F5A68; --teal-d:#174754; --linen:#F2EEE6; --linen-2:#E9E3D8; --ink:#0E2A31; --copper:#C08457; --white:#fff;
  --ink-2:rgba(14,42,49,.74); --ink-3:rgba(14,42,49,.2); --on-dark-2:rgba(242,238,230,.8);
  --serif:"Noto Serif Display","GFS Didot",Georgia,"Times New Roman",serif;
  --sans:Commissioner,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --gut:clamp(16px,4vw,48px); --max:1320px; --hd:72px;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
  --focus:var(--ink);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:calc(var(--hd) + 8px);background:var(--linen)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;font:400 17px/1.62 var(--sans);color:var(--ink);background:var(--linen);overflow-x:clip;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button,a,[role=button],summary,label,select{touch-action:manipulation}
button,.btn,summary,.menu-btn{-webkit-user-select:none;user-select:none}
input,textarea,select,button{font:inherit;color:inherit}
input,textarea,select{font-size:16px}
::selection{background:var(--copper);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.tone-dark,.tone-teal{--focus:var(--copper)}
h1,h2,h3,p,dl,dd,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
html{scrollbar-color:var(--teal) var(--linen-2)}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--linen-2)}::-webkit-scrollbar-thumb{background:var(--teal);border:2px solid var(--linen-2);border-radius:6px}

.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--ink);color:var(--linen);padding:10px 14px;border-radius:6px}
.skip:focus{top:8px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.label{font:600 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.h-display{font:300 clamp(2.5rem,6.6vw,6rem)/1.02 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.h-section{font:300 clamp(2.1rem,4.6vw,4rem)/1.05 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.h-sub{font:600 13px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin-bottom:var(--s2)}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.6;max-width:44ch;color:var(--ink-2)}
.tone-dark .lede,.tone-teal .lede{color:var(--on-dark-2)}
.small-note{font-size:14px;color:var(--ink-2)}
.tone-teal .small-note{color:var(--on-dark-2)}
.tone-dark,.tone-teal{background:var(--teal);color:var(--white)}
.tone-linen{background:var(--linen);color:var(--ink)}
/* very fine weave texture, linen only (≈2%) */
.weave{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 1.5h6M1.5 0v6' stroke='%230E2A31' stroke-opacity='.02' stroke-width='1'/%3E%3C/svg%3E")}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;font:600 15px/1 var(--sans);letter-spacing:.01em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform 140ms var(--ease-out),background-color 200ms ease,border-color 200ms ease,color 200ms ease;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-copper{background:var(--copper);color:var(--ink)}
.btn-line{background:transparent;border-color:currentColor;color:inherit}
@media (hover:hover) and (pointer:fine){
  .btn-copper:hover{background:#cd9467}
  .btn-line:hover{background:rgba(255,255,255,.08)}
  .nav a:hover{text-decoration:underline}
  .link-arrow:hover span,.link-down:hover span{transform:translateX(4px)}
  .link-down:hover span{transform:translateY(3px)}
  .ft a:hover{text-decoration:underline}
}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;min-height:44px}
.link-arrow span,.link-down span{display:inline-block;transition:transform 200ms var(--ease-out)}

/* header */
.hd{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--hd);display:flex;align-items:center;gap:var(--s4);padding:0 var(--gut);padding-top:env(safe-area-inset-top,0px);color:var(--linen);transition:background-color 260ms ease,color 260ms ease,box-shadow 260ms ease}
.hd.is-solid{background:rgba(242,238,230,.96);color:var(--ink);box-shadow:0 1px 0 rgba(14,42,49,.08);--focus:var(--ink)}
.hd{--focus:var(--copper)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;min-height:44px}
.mark{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.brand-mark{width:46px;height:auto}
.wordmark{font:400 12px/1 var(--sans);letter-spacing:.34em;white-space:nowrap}
.nav{display:flex;gap:28px;font-size:15px}
.nav a{text-decoration:none;padding:12px 0}
.hd-cta{min-height:42px;padding:0 18px;font-size:14px}
.menu-btn{display:none;align-items:center;gap:10px;background:none;border:0;padding:10px 0 10px 10px;min-height:44px;cursor:pointer;font-size:14px;letter-spacing:.06em}
.menu-lines{width:22px;height:10px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transition:transform 200ms var(--ease-out)}
.menu{position:fixed;inset:0;z-index:39;background:var(--teal);color:var(--linen);padding:calc(var(--hd) + 32px) var(--gut) calc(32px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:var(--s4);overscroll-behavior:contain}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column}
.menu nav a{font:300 clamp(2rem,9vw,3rem)/1.25 var(--serif);text-decoration:none;padding:6px 0;border-bottom:1px solid rgba(242,238,230,.18)}
.menu .btn{align-self:flex-start}
.menu-ig{font-size:15px}
body.menu-open{overflow:hidden}
body.menu-open .hd{color:var(--linen);background:transparent;box-shadow:none}

/* ===== SCENE 1 · hero ===== */
.s-hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--hd) + var(--s3)) var(--gut) calc(var(--s5) + 24px)}
.hero-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-stage canvas,.cta-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.hero-grid{position:relative;z-index:1;width:100%;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--s3);align-items:end;flex:1}
.hero-copy{grid-column:1 / span 7;padding-bottom:var(--s3)}
.hero-copy .h-display{max-width:13ch;font-size:clamp(2.6rem,5.2vw,5.4rem)}
.hero-sub{margin-top:var(--s3);font-size:clamp(17px,1.4vw,21px);max-width:38ch;color:var(--on-dark-2)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin-top:var(--s4)}
.link-down{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;text-decoration:none;color:var(--linen)}
.hero-mark-wrap{grid-column:8 / span 5;align-self:center;display:flex;flex-direction:column;align-items:center;gap:var(--s3);color:var(--linen)}
.hero-mark{width:min(100%,520px);stroke-width:2.6}
.hero-wordmark{font-size:clamp(12px,1.1vw,15px);letter-spacing:.5em;padding-left:.5em;opacity:.9}
.hero-bio{position:relative;z-index:1;width:100%;max-width:var(--max);margin:var(--s4) auto 0;color:var(--on-dark-2);font-size:11px;display:flex;flex-wrap:wrap;gap:6px 10px;border-top:1px solid rgba(242,238,230,.2);padding-top:var(--s2)}
.hero-bio i{font-style:normal;color:var(--copper)}
/* thread-ready states: the SVG knot becomes the destination ghost */
.mark .mk-knot,.mark .mk-l,.mark .mk-m{transition:opacity 600ms ease}
.threads-on .hero-mark .mk-knot{opacity:var(--knot-o,1)}

/* ===== SCENE 2 · manifesto ===== */
.s-manifesto{padding:var(--s8) 0 var(--s7)}
.s-manifesto .mf{margin-top:0}
.mf{margin-top:var(--s5);display:flex;flex-direction:column;gap:var(--s5)}
.mf-line{position:relative;padding-top:28px}
.mf-thread{position:absolute;left:0;top:0;width:100%;height:28px;overflow:visible}
.mf-thread path{fill:none;stroke:var(--teal);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.mf-thread.copper path{stroke:var(--copper);stroke-width:1.8}
.mf-text{overflow:hidden;font:300 clamp(1.9rem,4.4vw,4.1rem)/1.12 var(--serif);letter-spacing:-.015em;padding-bottom:.08em;text-wrap:balance}
.mf-text span{display:block}
.mf-line:first-child .mf-text{font-style:italic}

/* ===== SCENE 3 · services ===== */
.s-services{padding:var(--s7) 0 var(--s8)}
.svc-wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s3) var(--s6);align-items:start}
.svc-head{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--s3);margin-bottom:var(--s5);padding-bottom:var(--s3);border-bottom:1px solid var(--ink-3)}
.svc-list{grid-column:1}
.svc{border-bottom:1px solid var(--ink-3)}
.svc-title{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:var(--s3);background:none;border:0;padding:var(--s3) 0 var(--s1);text-align:left;cursor:pointer}
.svc-name{font:300 clamp(1.9rem,3.9vw,3.6rem)/1.06 var(--serif);letter-spacing:-.015em;color:rgba(14,42,49,.5);transition:color 380ms var(--ease-out);overflow-wrap:anywhere;hyphens:auto}
.svc.is-active .svc-name{color:var(--teal)}
.svc-x{display:none}
.svc-body{display:grid;grid-template-rows:1fr}
.svc-inner{min-height:0;overflow:hidden;padding:0 0 var(--s3);opacity:.5;transition:opacity 380ms var(--ease-out)}
.svc.is-active .svc-inner{opacity:1}
.svc-note{font-weight:600;font-size:15px}
.svc-line{margin-top:6px;max-width:46ch;color:var(--ink-2)}
.svc-inner .link-arrow{margin-top:var(--s1);font-size:15px}
.svc-fig-m{display:none}
.svc-figs{grid-column:2;grid-row:2 / span 1;position:sticky;top:calc(var(--hd) + 32px);aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:var(--linen-2)}
.svc-fig{position:absolute;inset:0;clip-path:inset(100% 0 0 0);transition:clip-path 760ms var(--ease-out)}
.svc-fig.is-active{clip-path:inset(0 0 0 0);z-index:1}
.svc-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1200ms var(--ease-out)}
.svc-fig.is-active img{transform:scale(1)}

/* ===== SCENE 4 · process ===== */
.s-process{padding:var(--s8) 0}
.pr-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6)}
.pr-head{position:sticky;top:calc(var(--hd) + 32px);align-self:start}
.pr-head .lede{margin-top:var(--s3)}
.pr-fig{margin-top:var(--s5);aspect-ratio:3/2;overflow:hidden;border-radius:4px}
.pr-fig img{width:100%;height:100%;object-fit:cover}
.pr-steps{position:relative;padding-left:72px}
.pr-thread{position:absolute;left:8px;top:0;width:40px;height:100%;overflow:visible}
.pr-thread path{fill:none;stroke:var(--copper);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.pr-steps ol{display:flex;flex-direction:column;gap:var(--s7);padding:var(--s4) 0}
.pr-step{position:relative}
.pr-knot{position:absolute;left:-58px;top:.55em;width:16px;height:16px;transform:rotate(45deg);border:1.5px solid var(--copper);background:var(--teal);transition:background-color 300ms ease}
.pr-step.is-in .pr-knot{background:var(--copper)}
.pr-step h3{font:300 clamp(1.9rem,3.4vw,3rem)/1.1 var(--serif);letter-spacing:-.01em}
.pr-step p{margin-top:var(--s2);max-width:40ch;color:var(--on-dark-2)}
.mask{overflow:hidden;padding-bottom:.06em}

/* ===== Why ===== */
.s-why{padding:var(--s7) 0}
.why-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s5)}
.why-fig{margin-top:var(--s4);aspect-ratio:3/2;overflow:hidden;border-radius:3px}
.why-fig img{width:100%;height:100%;object-fit:cover}
.why>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--ink-3)}
.tone-teal .why>div{border-color:rgba(242,238,230,.22)}
.why dt{font:300 clamp(1.5rem,2.4vw,2.1rem)/1.15 var(--serif)}
.why dd{color:var(--ink-2);max-width:42ch}
.tone-teal .why dd{color:var(--on-dark-2)}

/* ===== SCENE 5 · work ===== */
.s-work{padding:var(--s7) 0 var(--s8)}
.work-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--s3);margin-bottom:var(--s6)}
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s6) var(--s3)}
.tile{margin:0}
.tile-img{overflow:hidden;border-radius:3px;background:var(--linen-2)}
.tile-img img{width:100%;height:100%;object-fit:cover}
.tile-tall .tile-img{aspect-ratio:4/5}
.tile-wide .tile-img{aspect-ratio:3/2}
.tile figcaption{display:flex;flex-direction:column;gap:4px;margin-top:var(--s2)}
.tile .label{color:var(--ink-2);font-size:11px}
.tile-title{font:300 clamp(1.3rem,1.8vw,1.7rem)/1.2 var(--serif)}
.w1{grid-column:1 / span 5}
.w2{grid-column:7 / span 6;align-self:end}
.w3{grid-column:2 / span 6}
.w4{grid-column:9 / span 4;margin-top:var(--s7)}
.w5{grid-column:1 / span 4}
.w6{grid-column:6 / span 6;align-self:center}
.work-empty{font:300 clamp(1.6rem,3vw,2.4rem)/1.2 var(--serif);padding:var(--s7) 0;border-top:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3)}
.work-more{margin-top:var(--s6)}
.work-grid.is-empty{display:none}

/* ===== team ===== */
.s-team{padding:var(--s7) 0}
.team-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s5)}
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.member:nth-child(2){margin-top:var(--s6)}
.member-img{aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--linen-2)}
.member-img svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tm-loop{stroke-width:1.4}.tm-knot{stroke-width:2.2}
.member-v0{background:var(--teal)}.member-v0 .tm-loop,.member-v0 .tm-knot{stroke:var(--linen)}
.member-v1{background:var(--linen-2)}.member-v1 .tm-loop{stroke:var(--copper)}.member-v1 .tm-knot{stroke:var(--teal)}
.member-v2{background:var(--ink)}.member-v2 .tm-loop{stroke:var(--copper)}.member-v2 .tm-knot{stroke:var(--linen)}
.member figcaption{margin-top:var(--s2);display:flex;flex-direction:column;gap:2px}
.member-name{font:300 1.5rem/1.2 var(--serif);overflow-wrap:anywhere}
.member-role{font:600 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}

/* ===== FAQ ===== */
.s-faq,.sp-faq{padding:var(--s7) 0}
.faq-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s5)}
.qa{border-top:1px solid var(--ink-3)}
.qa:last-child{border-bottom:1px solid var(--ink-3)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:64px;padding:var(--s2) 0;cursor:pointer;font:400 clamp(1.15rem,1.6vw,1.4rem)/1.35 var(--serif)}
.qa summary::-webkit-details-marker{display:none}
.qa-x{position:relative;flex:0 0 18px;height:18px}
.qa-x::before,.qa-x::after{content:"";position:absolute;left:0;top:8px;width:18px;height:1.5px;background:currentColor;transition:transform 240ms var(--ease-out)}
.qa-x::after{transform:rotate(90deg)}
.qa[open] .qa-x::after{transform:rotate(0)}
.qa p{padding:0 0 var(--s3);max-width:60ch;color:var(--ink-2)}

/* ===== SCENE 6 · CTA ===== */
.s-cta{padding:var(--s6) 0 var(--s7)}
.cta-wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s6);align-items:start}
.cta-stage{position:relative;height:clamp(220px,26vw,340px);margin:0 0 var(--s4);color:var(--teal);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cta-mark{width:min(84%,400px);stroke-width:2.6;position:relative;z-index:1}
.cta-stage canvas{z-index:0}
.h-cta{font-size:clamp(2.4rem,5.2vw,4.8rem)}
.s-cta .lede{margin-top:var(--s3)}
.contacts{margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.contacts li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:var(--s2);align-items:baseline;overflow-wrap:anywhere}
.contacts .label{font-size:11px;color:var(--ink-2)}
.tone-teal .contacts .label{color:var(--on-dark-2)}
.contacts a{min-height:44px;display:inline-flex;align-items:center}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);background:var(--white);padding:clamp(24px,3vw,40px);border-radius:6px;box-shadow:0 1px 2px rgba(14,42,49,.06),0 12px 40px -18px rgba(14,42,49,.25);color:var(--ink);--focus:var(--ink)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field-wide,.btn-submit,.form-msg{grid-column:1 / -1}
.field label{font:600 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:10px 0;border:0;border-bottom:1px solid rgba(14,42,49,.35);background:transparent;border-radius:0;transition:border-color 200ms ease}
.field select{appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E2A31' stroke-width='1.5'/%3E%3C/svg%3E") right 4px center/12px no-repeat;padding-right:24px}
.field textarea{resize:vertical;min-height:84px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom:2px solid var(--teal)}
.field.is-error input{border-bottom-color:#a3402a}
.btn-submit{justify-self:start;margin-top:var(--s1)}
.form-msg{font-size:15px;min-height:1.6em}
.form-msg.is-ok{color:var(--teal);font-weight:600}
.form-msg.is-err{color:#8f3522}

/* ===== footer ===== */
.ft{background:var(--ink);color:var(--linen);padding:var(--s7) var(--gut) calc(var(--s6) + 16px + env(safe-area-inset-bottom,0px));--focus:var(--copper)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ft-top,.ft-cols,.ft-legal{max-width:var(--max);margin:0 auto}
.ft-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3);padding-bottom:var(--s5);border-bottom:1px solid rgba(242,238,230,.16)}
.ft-brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.ft-mark{width:64px}
.ft-tag{font:300 clamp(1.4rem,2.4vw,2rem)/1.2 var(--serif)}
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);padding:var(--s5) 0}
.ft-cols .label{color:rgba(242,238,230,.6);margin-bottom:var(--s2);font-size:11px}
.ft-cols li{padding:5px 0;font-size:15px;overflow-wrap:anywhere}
.ft-cols a{text-decoration:none}
.ft-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);font-size:13px;color:rgba(242,238,230,.6);border-top:1px solid rgba(242,238,230,.16);padding-top:var(--s3)}

/* demo pill + mobile bar */
.demo-pill{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;margin:0;background:rgba(14,42,49,.86);color:var(--linen);font-size:11px;letter-spacing:.04em;padding:6px 12px;border-radius:999px;pointer-events:none}
.mbar{display:none}

/* ===== sub pages ===== */
.sp-hero,.pg-hero{padding:calc(var(--hd) + var(--s7)) 0 var(--s7)}
.sp-hero .label a{text-decoration:none;color:var(--on-dark-2)}
.sp-hero .label{color:var(--on-dark-2);margin-bottom:var(--s3)}
.sp-title{max-width:16ch;overflow-wrap:anywhere;hyphens:auto}
.sp-hero .btn{margin-top:var(--s4)}
.sp-motif{width:min(360px,80%);height:auto;margin-bottom:var(--s5);overflow:visible}
.sp-motif path{fill:none;stroke:var(--copper);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1600ms var(--ease-out) 200ms forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sp-body{padding:var(--s7) 0}
.sp-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6);align-items:start}
.sp-block+.sp-block{margin-top:var(--s6)}
.sp-problem{font:300 clamp(1.4rem,2.2vw,2rem)/1.3 var(--serif);max-width:30ch}
.ticks li,.deliver li{position:relative;padding:12px 0 12px 32px;border-top:1px solid var(--ink-3);max-width:56ch}
.ticks li::before{content:"";position:absolute;left:4px;top:1.15em;width:10px;height:10px;border:1.5px solid var(--copper);transform:rotate(45deg)}
.deliver li::before{content:"";position:absolute;left:0;top:1.35em;width:18px;height:1.5px;background:var(--copper)}
.sp-fig{position:sticky;top:calc(var(--hd) + 32px);aspect-ratio:4/5;overflow:hidden;border-radius:4px}
.sp-fig img{width:100%;height:100%;object-fit:cover}
.sp-cta{padding:var(--s7) 0}
.sp-cta-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s6);align-items:start}
.sp-cta .contacts a{color:var(--white)}
.sp-more{padding:var(--s5) 0 var(--s6);border-top:1px solid var(--ink-3)}
.sp-more ul{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:var(--s2)}
.sp-more a{display:inline-flex;min-height:44px;align-items:center;font:300 1.3rem/1.2 var(--serif)}
.case{padding:var(--s7) 0}
.case-grid,.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);align-items:start}
.case-fig,.about-fig{aspect-ratio:4/5;overflow:hidden;border-radius:4px}
.case-fig img,.about-fig img{width:100%;height:100%;object-fit:cover}
.case-text .label{color:var(--ink-2);margin-bottom:var(--s2)}
.case-dl{margin-top:var(--s4)}
.case-dl>div{padding:var(--s2) 0;border-top:1px solid var(--ink-3);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s2)}
.case-dl dt{font-weight:600}
.case-dl dd{color:var(--ink-2)}
.case-text .small-note{margin-top:var(--s4)}
.about{padding:var(--s7) 0}
.about-fig{aspect-ratio:3/2}
.about-lead{font:300 clamp(1.4rem,2.4vw,2.2rem)/1.3 var(--serif);text-wrap:pretty}
.about-quote{margin:var(--s5) 0 0;padding:var(--s3) 0 0 var(--s3);border-top:1px solid var(--ink-3);color:var(--ink-2);font-style:italic;max-width:56ch}
.legal{padding:var(--s7) 0}
.legal-text{max-width:760px}
.legal-text .h-sub{margin-top:var(--s5)}
.legal-text p{max-width:65ch}
.pg-404{min-height:80svh;display:flex;align-items:center}
.pg-404 .btn{margin-top:var(--s4)}

/* ===== portrait / phone composition =====
   phones, narrow windows, AND tall portrait viewports (e.g. 1080x1920 for the Reel) */
@media (max-width:767px),(orientation:portrait) and (max-aspect-ratio:3/4){
  .nav,.hd-cta{display:none}
  .menu-btn{display:inline-flex}
  .hero-grid{grid-template-columns:1fr;align-content:center;gap:var(--s4)}
  .hero-mark-wrap{grid-column:1;grid-row:1;gap:var(--s2)}
  .hero-mark{width:min(62vw,420px)}
  .hero-copy{grid-column:1;grid-row:2;padding-bottom:0}
  .hero-copy .h-display{max-width:none;font-size:clamp(2.4rem,11vw,7rem)}
  .hero-bio{display:none}
  .svc-wrap,.pr-wrap,.why-wrap,.faq-wrap,.cta-wrap,.sp-grid,.sp-cta-grid,.case-grid,.about-grid{grid-template-columns:minmax(0,1fr)}
  .pr-head{position:static}
  .team{grid-template-columns:repeat(3,minmax(0,1fr))}
  .w1,.w2,.w3,.w4,.w5,.w6{grid-column:1 / -1;margin-top:0;align-self:auto}
  .w2,.w4,.w6{grid-column:3 / -1}
  .w1,.w3,.w5{grid-column:1 / span 10}
  .work-grid{gap:var(--s5) var(--s2)}
  .sp-fig{position:static}
  .hero-mark{width:min(62vw,720px)}
  /* services: the image stays docked under the header, titles scroll beneath it */
  .svc-figs{grid-column:1;grid-row:2;aspect-ratio:16/10;top:calc(var(--hd) + 12px);z-index:2;box-shadow:0 24px 40px -28px rgba(14,42,49,.35)}
  .svc-list{grid-row:3}
}
@media (max-width:767px){
  :root{--hd:64px;--s7:72px;--s8:88px}
  body{font-size:17px}
  .s-hero{padding-bottom:calc(var(--s4) + 72px)}
  .hero-cta .btn{width:100%}
  .hero-sub{font-size:17px}
  .mf{gap:var(--s4)}
  /* services become an accordion with the same image */
  .svc-figs{display:none}
  .svc-title{padding:var(--s2) 0;min-height:64px;align-items:center}
  .svc-name{color:var(--ink);font-size:clamp(1.55rem,7.4vw,2.2rem)}
  .svc.is-active .svc-name{color:var(--ink)}
  .svc-x{display:block;position:relative;flex:0 0 16px;height:16px}
  .svc-x::before,.svc-x::after{content:"";position:absolute;left:0;top:7px;width:16px;height:1.5px;background:currentColor;transition:transform 240ms var(--ease-out)}
  .svc-x::after{transform:rotate(90deg)}
  .svc-title[aria-expanded=true] .svc-x::after{transform:rotate(0)}
  .svc-body{grid-template-rows:0fr;transition:grid-template-rows 360ms var(--ease-out)}
  .svc-title[aria-expanded=true]+.svc-body{grid-template-rows:1fr}
  .svc-inner{opacity:1}
  .svc-fig-m{display:block;margin-top:var(--s2);aspect-ratio:3/2;overflow:hidden;border-radius:3px}
  .svc-fig-m img{width:100%;height:100%;object-fit:cover}
  .pr-steps{padding-left:52px}
  .pr-knot{left:-42px}
  .pr-thread{left:0}
  .pr-steps ol{gap:var(--s5)}
  .team{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .member{display:grid;grid-template-columns:44% minmax(0,1fr);gap:var(--s3);align-items:end}
  .member:nth-child(2){margin-top:0}
  .why>div{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
  .form{grid-template-columns:minmax(0,1fr);padding:24px 20px}
  .btn-submit{width:100%}
  .contacts li{grid-template-columns:minmax(0,1fr);gap:2px}
  .ft-cols{grid-template-columns:minmax(0,1fr)}
  .case-dl>div{grid-template-columns:minmax(0,1fr)}
  .wordmark{font-size:11px;letter-spacing:.28em}
  .brand-mark{width:40px}
  .mbar{display:flex;position:fixed;z-index:45;left:0;right:0;bottom:0;gap:10px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--linen);transform:translateY(110%);transition:transform 320ms var(--ease-out)}
  .mbar.is-on{transform:none}
  .mbar .btn{flex:1;min-height:48px;padding:0 12px}
  .mbar .btn-copper{flex:1.6}
  .demo-pill{bottom:calc(80px + env(safe-area-inset-bottom,0px));font-size:10px}
  body.mbar-on .demo-pill{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .ft{padding-bottom:calc(var(--s7) + 24px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:768px) and (max-width:1100px) and (orientation:landscape){
  .hero-copy{grid-column:1 / span 8}
  .hero-mark-wrap{grid-column:9 / span 4}
}

/* ===== JS-enhanced initial states (only when motion is allowed) ===== */
.gsap-on .mf-text span{transform:translateY(105%)}
.gsap-on .mf-thread path{stroke-dashoffset:1}
.gsap-on .pr-thread path{stroke-dashoffset:1}
.gsap-on .pr-step .mask h3{transform:translateY(105%)}
.gsap-on .pr-step p{opacity:0;transform:translateY(12px)}
.gsap-on .pr-step.is-in .mask h3{transform:none;transition:transform 900ms var(--ease-out)}
.gsap-on .pr-step.is-in p{opacity:1;transform:none;transition:opacity 700ms var(--ease-out) 120ms,transform 700ms var(--ease-out) 120ms}
.js-motion .tile .tile-img{clip-path:inset(18% 0 0 0)}
.js-motion .tile .tile-img img{transform:scale(1.08)}
.js-motion .tile.is-in .tile-img{clip-path:inset(0);transition:clip-path 1100ms var(--ease-out)}
.js-motion .tile.is-in .tile-img img{transform:scale(1);transition:transform 1400ms var(--ease-out)}
.js-motion .tile figcaption{opacity:0;transform:translateY(8px)}
.js-motion .tile.is-in figcaption{opacity:1;transform:none;transition:opacity 600ms var(--ease-out) 250ms,transform 600ms var(--ease-out) 250ms}
.js-motion .reveal-img{clip-path:inset(0 0 100% 0)}
.js-motion .reveal-img.is-in{clip-path:inset(0);transition:clip-path 1100ms var(--ease-out)}

/* ===== recording mode (?film=1) ===== */
html.film{scrollbar-width:none}
html.film::-webkit-scrollbar{display:none}
html.film body{cursor:none}
html.film .demo-pill,html.film .mbar,html.film .skip{display:none!important}
/* ?film=1&v=1 : 1080x1920 portrait Reel, sized to be legible once the video is shown on a phone */
html.film-v{font-size:200%;--hd:120px}
html.film-v body{font-size:30px}
html.film-v .hd{height:120px}
html.film-v .wordmark{font-size:20px}
html.film-v .brand-mark{width:76px}
html.film-v .menu-btn{display:none}
html.film-v .label,html.film-v .tile .label,html.film-v .contacts .label,html.film-v .member-role,html.film-v .field label{font-size:19px}
html.film-v .lede,html.film-v .hero-sub{font-size:34px}
html.film-v .btn{min-height:88px;font-size:28px;padding:0 48px}
html.film-v .svc-note{font-size:28px}
html.film-v .field input,html.film-v .field select,html.film-v .field textarea{font-size:30px;min-height:80px}
html.film-v .hero-mark{width:min(66vw,760px)}
html.film-v .hero-wordmark{font-size:24px}

/* ===== reduced motion: everything in its final state ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:0ms!important;scroll-behavior:auto!important}
  .sp-motif path{stroke-dashoffset:0}
  .svc-fig img{transform:none}
}