/* Aurora Owl, v1-ink: paper and ink */
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(fonts/inter-tight-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ground:#e3ded1;          /* the painting's own paper, at its edges */
  --paper:#f4f1ea;
  --paper-2:#faf8f3;
  --ink:#1c1a17;
  --ink-2:#48433b;
  --ink-3:#645d53;
  --rule:rgba(28,26,23,.16);
  --a1:#36d7ff;--a2:#1a9ee6;--a3:#6d52f5;--a4:#8a5cff;--a5:#b44fd6;--a6:#e062e6;
  --aurora:linear-gradient(90deg,var(--a1),var(--a2) 22%,var(--a3) 48%,var(--a5) 78%,var(--a6));
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --sans:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(16px,4.2vw,64px);
  --max:1320px;
  --out:cubic-bezier(.22,1,.36,1);
  --inout:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:clamp(16px,1.05vw + 11px,18px);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.012em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--a3);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:99px;text-decoration:none;font-weight:500}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
[id]{scroll-margin-top:96px}
@media (max-width:760px){[id]{scroll-margin-top:84px}}

/* ---------- small type ---------- */
.eyebrow{font-family:var(--sans);font-size:.78rem;font-weight:550;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.num{font-family:var(--serif);font-style:italic;font-size:1.25rem;letter-spacing:0;text-transform:none;color:var(--ink);margin-right:.7em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;min-height:52px;padding:0 1.5em;border-radius:99px;font:550 1rem/1 var(--sans);letter-spacing:.005em;text-decoration:none;white-space:nowrap;transition:transform .5s var(--out),box-shadow .5s var(--out),background-color .3s}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(109,82,245,.45),0 0 12px rgba(138,92,255,.28)}
.btn-paper{background:var(--paper-2);color:var(--ink)}
.btn-paper:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(54,215,255,.55),0 0 12px rgba(54,215,255,.3)}
.btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(28,26,23,.35)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--ink),0 0 10px rgba(109,82,245,.18)}
/* a text link with a hairline that draws out in aurora on hover */
.line{position:relative;display:inline-flex;align-items:center;gap:.45em;min-height:44px;font-weight:550;text-decoration:none;color:var(--ink)}
.line::before,.line::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px}
.line::before{background:rgba(28,26,23,.3)}
.line::after{background:var(--aurora);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--out)}
.line:hover::after,.line:focus-visible::after{transform:scaleX(1)}
.line .arr{transition:transform .5s var(--out)}
.line:hover .arr{transform:translateX(4px)}

/* ---------- header ---------- */
.masthead{position:absolute;top:0;left:0;right:0;z-index:20}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:clamp(14px,2vw,26px);max-width:none}
.lockup{display:block;line-height:0;text-decoration:none}
.lockup svg{height:68px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,30px);font-size:.95rem;font-weight:500}
.nav a:not(.btn){position:relative;text-decoration:none;color:var(--ink);padding:12px 0}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--aurora);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--out)}
.nav a:not(.btn):hover::after,.nav a:not(.btn):focus-visible::after{transform:scaleX(1)}
.nav .btn{min-height:44px;font-size:.92rem;padding:0 1.2em}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 14px;background:none;border:0;font:500 .95rem var(--sans);color:var(--ink);cursor:pointer}
.menu-btn i{position:relative;display:block;width:26px;height:10px}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px}
.menu-btn i::before{top:0}.menu-btn i::after{bottom:0}

.bar{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(244,241,234,.86);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);box-shadow:0 1px 0 var(--rule);transform:translateY(-102%);transition:transform .6s var(--out);visibility:hidden}
.bar.on{transform:none;visibility:visible}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;max-width:none}
.bar .mark{display:block;height:46px;width:46px}
.bar .mark img{height:46px;width:46px}

@media (max-width:1060px){
  .nav a:not(.btn){display:none}
  .menu-btn{display:inline-flex}
}
@media (max-width:560px){
  .nav .btn{display:none}
  .lockup svg{height:64px}
  .bar .wrap{height:64px}
}

/* ---------- menu panel ---------- */
.panel{position:fixed;inset:0;z-index:60;visibility:hidden}
.panel .scrim{position:absolute;inset:0;background:rgba(28,26,23,.28);opacity:0;transition:opacity .45s var(--out)}
.panel .sheet{position:absolute;top:0;right:0;bottom:0;width:min(420px,88vw);background:var(--paper);padding:22px var(--gut) 32px;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .55s var(--out);box-shadow:-1px 0 0 var(--rule)}
.panel.open{visibility:visible}
.panel.open .scrim{opacity:1}
.panel.open .sheet{transform:none}
.panel .close{align-self:flex-end;min-height:44px;background:none;border:0;font:500 .95rem var(--sans);color:var(--ink);cursor:pointer;padding:0 4px}
.panel nav{margin-top:28px;display:flex;flex-direction:column}
.panel nav a{font-family:var(--serif);font-size:2.1rem;line-height:1.15;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--rule)}
.panel .btn{margin-top:auto;justify-content:center}
.panel .mail{margin-top:14px;text-align:center;color:var(--ink-2)}
body.locked{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ground);min-height:max(640px,100svh);overflow:hidden;isolation:isolate}
.hero{--artH:clamp(600px,110svh,1240px);--artW:calc(var(--artH) * .90909)}
.art{position:absolute;left:calc(var(--artW) * -.12);top:calc(50% - var(--artH) * .52);width:var(--artW);height:var(--artH);z-index:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 88%,transparent 99%),linear-gradient(90deg,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 88%,transparent 99%),linear-gradient(90deg,#000 90%,transparent 100%);mask-composite:intersect}
.art-in{position:absolute;inset:0;will-change:transform}
.art img{position:absolute;inset:0;width:100%;height:100%}
.art .shut{inset:auto;left:27.78%;top:43.69%;width:24.06%;height:14.19%;opacity:0}
.art .shut.on{opacity:1}
.hero-copy{position:relative;z-index:2;min-height:max(640px,100svh);display:flex;flex-direction:column;justify-content:center;padding:120px var(--gut) 80px calc(var(--artW) * .9);max-width:calc(var(--artW) * .9 + 640px)}
.hero .eyebrow{margin-bottom:26px}
.hero h1{font-size:clamp(2.5rem,.9rem + 3.7vw,4.8rem);line-height:1.02;letter-spacing:-.018em;text-wrap:pretty}
.hero h1 .s2{display:block;font-style:italic;margin-top:.12em}
.hero h1 .s1{display:block}
.hero .sub{margin-top:28px;max-width:34em;font-size:clamp(1.02rem,.9rem + .35vw,1.18rem);line-height:1.55;color:var(--ink-2)}
.hero .cta{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.hero .hint{position:absolute;left:50%;bottom:22px;z-index:2;transform:translateX(-50%);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);display:flex;flex-direction:column;align-items:center;gap:8px}
.hero .hint i{display:block;width:1px;height:34px;background:linear-gradient(var(--ink-3),transparent)}

@media (max-width:900px),(max-aspect-ratio:1/1){
  .hero{--artW:min(112vw,760px);--artH:calc(var(--artW) * 1.1);min-height:0}
  .art{position:relative;left:auto;top:auto;margin:calc(var(--artH) * -.04) 0 calc(var(--artH) * -.05) calc(var(--artW) * -.06);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 96%),linear-gradient(90deg,#000 88%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 96%),linear-gradient(90deg,#000 88%,transparent 100%)}
  .hero-copy{min-height:0;padding:0 var(--gut) 72px;max-width:760px}
  .hero .hint{display:none}
  .masthead{position:relative;background:var(--ground)}
}

/* ---------- arrival (only when motion is allowed) ---------- */
.js-motion .hero [data-in]{opacity:0;transform:translateY(22px)}
.js-motion .hero.go [data-in]{opacity:1;transform:none;transition:opacity .9s var(--out),transform 1s var(--out);transition-delay:var(--d,0s)}

/* ---------- ground: the painting's paper lightens into the page ---------- */
#problem{background:linear-gradient(var(--ground),var(--paper) min(420px,60%));padding-top:clamp(56px,7vw,110px)}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(72px,9vw,140px) 0}
.sec-note{padding:0 0 clamp(18px,2vw,28px)}
.sec-note .eyebrow{display:flex;align-items:baseline}
.sec-note .eyebrow::after{content:"";width:56px;height:1px;margin-left:16px;background:currentColor;opacity:.6;align-self:center}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px clamp(32px,5vw,96px);align-items:end}
.sec-head > :only-child{grid-column:1 / -1}
.sec h2{font-size:clamp(2.4rem,1.2rem + 3.7vw,5.3rem);line-height:1;letter-spacing:-.022em;max-width:14em}
.lede,.found-line{font-size:clamp(1.08rem,.95rem + .45vw,1.3rem);line-height:1.5;color:var(--ink-2);max-width:32em;padding-bottom:.35em}
@media (max-width:900px){.sec-head{grid-template-columns:1fr}}

/* ink rule between sections: a brush stroke, drawn on arrival */
.ink-rule{display:block;width:var(--w,60%);height:auto;aspect-ratio:1000/30;margin:0 0 0 max(var(--gut),(100% - var(--max)) / 2 + var(--gut));color:var(--ink);overflow:visible}
.ink-rule.flip{transform:scaleX(-1);margin:0 max(var(--gut),(100% - var(--max)) / 2 + var(--gut)) 0 auto}
@media (max-width:760px){.ink-rule,.ink-rule.flip{width:calc(var(--w,60%) + 22%)}}
.js-motion .ink-rule{clip-path:inset(0 100% 0 0)}
.js-motion .ink-rule.flip{clip-path:inset(0 0 0 100%)}
.js-motion .ink-rule.in{clip-path:inset(0 0 0 0);transition:clip-path 1.4s var(--inout)}
.js-motion [data-rise]{opacity:0;transform:translateY(26px)}
.js-motion [data-rise].in{opacity:1;transform:none;transition:opacity .9s var(--out),transform 1s var(--out);transition-delay:var(--d,0s)}

/* problem */
.problems{margin-top:clamp(44px,5.5vw,80px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px clamp(24px,3.4vw,56px)}
.problems li{padding-top:22px;border-top:1px solid var(--ink)}
.problems .n{display:block;font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--ink-3)}
.problems h3{margin-top:14px;font-size:clamp(1.65rem,1.1rem + 1.25vw,2.5rem);line-height:1.06}
.problems p{margin-top:14px;color:var(--ink-2)}
@media (max-width:900px){.problems{grid-template-columns:1fr}}

/* services */
.tag{display:inline-flex;align-items:center;gap:.55em;margin-top:14px;font-size:.84rem;font-weight:550;letter-spacing:.02em;color:var(--ink-2)}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--a3);box-shadow:0 0 0 3px rgba(109,82,245,.14)}
.ticks{margin-top:22px;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.72em;width:18px;height:2px;border-radius:2px;background:var(--ink);transform:rotate(-8deg)}
.next-h{margin-top:clamp(40px,5vw,64px);font-family:var(--sans);font-size:.78rem;font-weight:550;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.next{margin-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.next li{padding:6px clamp(18px,2.4vw,36px) 8px;border-left:1px solid var(--rule)}
.next li:first-child{padding-left:0;border-left:0}
.next h4{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,1.2rem + .8vw,2rem);line-height:1.1;margin:0}
.next .tag{margin-top:8px}
.next p{margin-top:14px;color:var(--ink-2)}
@media (max-width:900px){
  .next{grid-template-columns:1fr}
  .next li{padding:22px 0;border-left:0;border-top:1px solid var(--rule)}
  .next li:first-child{padding-top:6px;border-top:0}
}

/* found */
.found{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.found li{position:relative;padding-top:26px}
.found li::before{content:"";position:absolute;left:0;top:0;width:44px;height:2px;border-radius:2px;background:var(--c)}
.found h3{font-size:clamp(1.7rem,1.3rem + 1vw,2.4rem);line-height:1.05}
.found p{margin-top:14px;color:var(--ink-2)}
@media (max-width:760px){.found{grid-template-columns:1fr;gap:34px}}

/* process */
@media (max-width:900px){
}


/* work */
.shots{position:relative;display:block;padding:0 9% 9% 0}
.frame{position:relative;background:var(--paper-2);border-radius:10px;box-shadow:0 0 0 1px rgba(28,26,23,.14),0 24px 50px -30px rgba(28,26,23,.45);overflow:hidden}
.frame .dots{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--rule)}
.frame .dots i{width:8px;height:8px;border-radius:50%;background:rgba(28,26,23,.16)}
.frame img{width:100%}
.phone{position:absolute;right:0;bottom:0;width:26%;border-radius:18px;padding:6px;background:var(--ink);box-shadow:0 24px 40px -24px rgba(28,26,23,.6)}
.phone img{border-radius:13px}
.shots{transition:transform .8s var(--out)}
.phone{transition:transform .8s var(--out)}

/* packages */
.pk-note{margin-top:18px;color:var(--ink-2);max-width:40em}
.packs{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:1fr 1fr 1.18fr;gap:0;align-items:stretch}
.pack{position:relative;display:flex;flex-direction:column;padding:clamp(24px,2.6vw,40px) clamp(20px,2.4vw,36px);border-left:1px solid var(--rule)}
.pack:first-child{border-left:0;padding-left:0}
.pack h3{font-size:clamp(2rem,1.5rem + 1.3vw,2.9rem);line-height:1}
.pack .for{margin-top:10px;color:var(--ink-2);min-height:3.2em}
.pack .rounds{margin-top:20px;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:.92rem;font-weight:550}
.pack ul{margin:20px 0 30px;display:grid;gap:10px}
.pack li{position:relative;padding-left:22px;color:var(--ink-2)}
.pack li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:1.5px;background:currentColor}
.pack .btn{margin-top:auto;align-self:flex-start}
.pack.sig{background:var(--ink);color:var(--paper);border-left:0;border-radius:14px;padding-left:clamp(22px,2.6vw,40px);margin-left:clamp(8px,1vw,16px);box-shadow:0 30px 60px -40px rgba(28,26,23,.7)}
.pack.sig::before{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;background:var(--aurora);border-radius:0 0 2px 2px}
.pack.sig .for,.pack.sig li{color:rgba(244,241,234,.8)}
.pack.sig .rounds{border-color:rgba(244,241,234,.2)}
.pack.sig .pick{margin:-6px 0 14px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);display:flex;align-items:center;gap:8px}
.pack.sig .pick::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--a1);box-shadow:0 0 8px rgba(54,215,255,.8)}
@media (max-width:900px){
  .packs{grid-template-columns:1fr}
  .pack{border-left:0;padding:26px 0;border-top:1px solid var(--rule)}
  .pack:first-child{border-top:0;padding-top:0}
  .pack.sig{margin:12px 0 0;padding:30px 22px;border-top:0}
  .pack .for{min-height:0}
}

/* contact */
.contact{background:var(--ground);text-align:left}
.contact .sec-grid{align-items:start}
.contact .ways{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.contact .addr{margin-top:28px;color:var(--ink-2)}

/* footer */
.foot{padding:clamp(56px,7vw,96px) 0 32px;background:var(--ground)}
.foot .top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;padding-bottom:32px;border-bottom:1px solid var(--rule)}
.foot .lockup svg{height:clamp(64px,7vw,96px)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.foot nav a{text-decoration:none;padding:10px 0;color:var(--ink-2)}
.foot nav a:hover{color:var(--ink)}
.foot .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:22px;font-size:.88rem;color:var(--ink-3)}

/* case study + 404 */
.page-head{background:var(--ground)}
.page-head .masthead{position:relative}
.cs-hero{padding:clamp(40px,6vw,96px) 0 clamp(48px,6vw,96px)}
.crumb{font-size:.9rem;color:var(--ink-3)}
.crumb a{color:var(--ink-2)}
.cs-hero h1{margin-top:18px;font-size:clamp(2.6rem,1.6rem + 3.6vw,5.4rem);line-height:1;letter-spacing:-.02em;max-width:13em}
.cs-hero .lede{max-width:40em}
.cs-body{padding:clamp(56px,7vw,110px) 0}
.cs-shot{margin-top:clamp(40px,5vw,72px)}
.cs-list{margin-top:28px;display:grid;gap:0}
.cs-list li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:8px clamp(20px,4vw,64px);padding:28px 0;border-top:1px solid var(--rule)}
.cs-list li:last-child{border-bottom:1px solid var(--rule)}
.cs-list b{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,1.8rem + 1.6vw,3.6rem);line-height:.95}
.cs-list h3{font-size:clamp(1.5rem,1.2rem + .8vw,2rem);line-height:1.1}
.cs-list p{margin-top:8px;color:var(--ink-2);max-width:36em}
@media (max-width:760px){.cs-list li{grid-template-columns:1fr}}
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;background:var(--ground);padding:40px var(--gut)}
.nf img{width:min(300px,70vw);margin:0 auto;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent);mask-image:radial-gradient(closest-side,#000 72%,transparent)}
.nf h1{margin-top:8px;font-size:clamp(2.4rem,1.6rem + 3vw,4.2rem);line-height:1.02}
.nf p{margin:16px auto 0;max-width:30em;color:var(--ink-2)}
.nf .cta{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sec h2 .l{display:block}

/* contact: Sumi waits at the end of the page */
.contact{padding-bottom:clamp(24px,3vw,40px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"note art" "body art";gap:0 clamp(24px,4vw,64px);align-items:start}
.contact-grid > .sec-note{grid-area:note}
.contact-grid > .c-body{grid-area:body}
.contact .sec-head{grid-template-columns:1fr}
.contact-art{grid-area:art;position:relative;width:100%;max-width:540px;justify-self:end;aspect-ratio:1800/1980;margin-top:-40px;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 60%,transparent 100%)}
.contact-art img{position:absolute;inset:0;width:100%;height:100%}
.contact-art .shut{inset:auto;left:27.78%;top:43.69%;width:24.06%;height:14.19%;opacity:0}
.contact-art .shut.on{opacity:1}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;grid-template-areas:"note" "body" "art"}
  .contact-art{justify-self:start;max-width:380px;margin:24px 0 0 -6%}
}

/* get a quote: a brief on paper, ink underlines, pill choices */
.brief{position:relative;margin-top:clamp(28px,3.4vw,48px);max-width:1000px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3.4vw,56px)}
.field{margin:28px 0 0;min-width:0}
.field > label,.field legend{display:block;margin-bottom:6px;padding:0;font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.brief input[type=text],.brief input[type=email],.brief input[type=tel],.brief select{width:100%;min-height:50px;padding:10px 0;border:0;border-bottom:1.5px solid rgba(28,26,23,.42);border-radius:0;background:transparent no-repeat 0 100% / 0 2px;background-image:var(--aurora);font:400 1.08rem/1.3 var(--sans);color:var(--ink);transition:background-size .5s var(--out),border-color .3s}
.brief select{-webkit-appearance:none;appearance:none;padding-right:28px;background-image:var(--aurora),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231c1a17' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0 100%,right 4px center;background-size:0 2px,14px 9px;cursor:pointer}
.brief input::placeholder{color:#8a8378}
.brief textarea{width:100%;min-height:150px;padding:14px 16px;border:1.5px solid rgba(28,26,23,.42);border-radius:10px;background:var(--paper-2);font:400 1.05rem/1.55 var(--sans);color:var(--ink);resize:vertical}
.brief input:focus,.brief select:focus{outline:none;border-bottom-color:var(--ink);background-size:100% 2px}
.brief select:focus{background-size:100% 2px,14px 9px}
.brief textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px rgba(109,82,245,.4),0 0 12px rgba(138,92,255,.2)}
.brief [aria-invalid=true]{border-color:#a1231b!important}
.err{margin-top:8px;font-size:.92rem;color:#a1231b}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.send{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.send .btn{border:0;cursor:pointer}
.note{max-width:32em;font-size:.95rem;color:var(--ink-3)}
.form-status{margin-top:26px;padding:18px 22px;border-radius:10px;background:var(--paper-2);box-shadow:inset 3px 0 0 var(--a3);font-size:1.05rem}
.form-status a{font-weight:600}
.brief.sent > :not(.form-status){display:none}
.brief.sent .form-status{margin-top:0;font-family:var(--serif);font-size:clamp(1.5rem,1.1rem + 1vw,2rem);line-height:1.2;padding:28px 30px}
@media (max-width:700px){.f-grid{grid-template-columns:1fr}}

/* case study */
.cs-head{margin-top:clamp(20px,2.4vw,32px)}
.cta-row{display:flex;justify-content:flex-end;padding-bottom:.35em}
.cs-shots{background:linear-gradient(var(--ground) 55%,var(--paper) 55%)}
.shots.big{max-width:1120px;margin:0 auto;padding:0 11% 7% 0}
.shots.big .phone{width:22%}
.cs-list .ic{width:44px;height:44px}
.why{margin-top:clamp(28px,3.4vw,48px);display:grid;grid-template-columns:1fr 1fr;gap:20px clamp(24px,4vw,72px);font-size:clamp(1.04rem,.96rem + .3vw,1.18rem);line-height:1.6;color:var(--ink-2)}
@media (max-width:760px){.why{grid-template-columns:1fr}.cta-row{justify-content:flex-start}}

/* ink drawings in the middle of the page */
.draw{display:block;width:100%;max-width:340px;height:auto;margin:0 0 22px;color:var(--ink);padding:14px;border-radius:12px;background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);box-shadow:inset 0 0 0 1px var(--rule)}
.found li{padding-top:0}
.found li::before{display:none}
.found li h3{position:relative;padding-top:4px}
.found li h3::before{content:"";position:absolute;left:0;top:-10px;width:44px;height:2px;border-radius:2px;background:var(--c)}
/* a little aurora through the middle: a pale wash behind Getting found */
#found{isolation:isolate;overflow:hidden}
#found::before{content:"";position:absolute;z-index:-1;right:-10%;top:8%;width:min(760px,80vw);height:70%;opacity:.35;pointer-events:none;
  background:radial-gradient(closest-side at 35% 45%,rgba(54,215,255,.35),transparent),radial-gradient(closest-side at 62% 55%,rgba(138,92,255,.28),transparent),radial-gradient(closest-side at 50% 70%,rgba(224,98,230,.22),transparent);filter:blur(30px)}
/* round 7: getting found as three large illustrated rows */
.found{grid-template-columns:1fr;gap:clamp(44px,6vw,96px)}
.found li{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:clamp(32px,5vw,96px)}
.found li > .draw{grid-column:1;grid-row:1 / -1;max-width:none;margin:0;padding:clamp(10px,1.4vw,20px)}
.found li > h3{grid-column:2;grid-row:2;font-size:clamp(2rem,1.3rem + 2vw,3.3rem);line-height:1}
.found li > .ac{grid-column:2;grid-row:3;margin-top:10px}
.found li > p{grid-column:2;grid-row:4;font-size:clamp(1.04rem,.96rem + .35vw,1.22rem);line-height:1.5;max-width:24em}
.found li:nth-child(2){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.found li:nth-child(2) > .draw{grid-column:2}
.found li:nth-child(2) > :not(.draw){grid-column:1}
@media (max-width:760px){
  .found li,.found li:nth-child(2){grid-template-columns:1fr;grid-template-rows:none}
  .found li > *,.found li:nth-child(2) > *{grid-column:1!important;grid-row:auto!important}
  .found li > .draw{margin-bottom:22px}
}
/* round 7: services heading on two full-width lines; the brief as a sheet beside its intro */
.sec-head.wide{grid-template-columns:1fr}
.sec-head.wide h2{max-width:none}
.quote .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0 clamp(32px,5vw,88px);align-items:start}
.q-intro{position:sticky;top:110px}
.q-intro .sec-head{grid-template-columns:1fr}
.q-intro .lede{margin-top:4px}
.alt{margin-top:22px;color:var(--ink-2)}
.quote .brief{margin-top:0;max-width:none;padding:clamp(22px,3.4vw,52px);background:var(--paper-2);border-radius:16px;box-shadow:inset 0 0 0 1px var(--rule),0 40px 80px -60px rgba(28,26,23,.45)}
.quote .brief::before{content:"";position:absolute;left:32px;right:32px;top:0;height:2px;background:var(--aurora);border-radius:0 0 2px 2px;opacity:.8}
.quote .brief > .f-grid:first-of-type .field:first-child{margin-top:0}
.quote .brief textarea{background:var(--paper)}
@media (max-width:900px){
  .quote .wrap{grid-template-columns:1fr}
  .q-intro{position:static;margin-bottom:28px}
}
/* Sumi is a button: tap to blink, no button look */
[data-blink]{cursor:pointer;-webkit-tap-highlight-color:transparent}
[data-blink]:focus-visible{outline:2px solid var(--a3);outline-offset:-10px;border-radius:24px}
.hero-copy{pointer-events:none}
.hero-copy > *{pointer-events:auto}

/* ---------- one line language: every divider is a dry-brush stroke, pressed then tapering ----------
   The shape is a mask, so each line takes its own colour and weight: long and heavier for big breaks,
   short and lighter for small dividers. The long section breaks are the .ink-rule strokes above. */
:root{--brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 12' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-1%25' y='-50%25' width='102%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.5' numOctaves='2' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.4' xChannelSelector='R' yChannelSelector='G' result='g'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002 0.9' numOctaves='2' seed='2' result='s'/%3E%3CfeColorMatrix in='s' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  4 0 0 0 -1' result='k'/%3E%3CfeComposite in='g' in2='k' operator='in'/%3E%3C/filter%3E%3Cpath filter='url(%23d)' fill='%23000' fill-opacity='1' d='M2 6C4 2 14 1 40 1.4C300 3 650 4 998 4.6L998 7.4C650 8 300 9 40 10.6C14 11 4 10 2 6Z'/%3E%3C/svg%3E");--brush-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 12' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-1%25' y='-50%25' width='102%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.5' numOctaves='2' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.4' xChannelSelector='R' yChannelSelector='G' result='g'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002 0.9' numOctaves='2' seed='2' result='s'/%3E%3CfeColorMatrix in='s' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  4 0 0 0 -1' result='k'/%3E%3CfeComposite in='g' in2='k' operator='in'/%3E%3C/filter%3E%3Cpath filter='url(%23d)' fill='%231c1a17' fill-opacity='.55' d='M2 6C4 2 14 1 40 1.4C300 3 650 4 998 4.6L998 7.4C650 8 300 9 40 10.6C14 11 4 10 2 6Z'/%3E%3C/svg%3E");--brush-err:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 12' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-1%25' y='-50%25' width='102%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.5' numOctaves='2' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.4' xChannelSelector='R' yChannelSelector='G' result='g'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002 0.9' numOctaves='2' seed='2' result='s'/%3E%3CfeColorMatrix in='s' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  4 0 0 0 -1' result='k'/%3E%3CfeComposite in='g' in2='k' operator='in'/%3E%3C/filter%3E%3Cpath filter='url(%23d)' fill='%23a1231b' fill-opacity='.9' d='M2 6C4 2 14 1 40 1.4C300 3 650 4 998 4.6L998 7.4C650 8 300 9 40 10.6C14 11 4 10 2 6Z'/%3E%3C/svg%3E")}
.problems li::before,.next li::before,.pack .rounds::before,.pack .rounds::after,
.foot .top::after,.sec-note .eyebrow::after,.panel nav a::after,.bar::after,.found li h3::before,.pack.sig::before,.quote .brief::before{
  -webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat;border-radius:0}
.problems li{border-top:0;position:relative}
.problems li::before{content:"";position:absolute;left:0;right:0;top:-3px;height:7px;background:var(--ink)}
.next{gap:0 clamp(24px,3vw,48px)}
.next li,.next li:first-child{position:relative;border:0;padding:22px 0 0}
.next li::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--ink);opacity:.4}
.pack,.pack:first-child{border-left:0;border-top:0}
.pack .rounds{border:0;position:relative}
.pack .rounds::before,.pack .rounds::after{content:"";position:absolute;left:0;right:0;height:5px;background:var(--ink);opacity:.35}
.pack .rounds::before{top:-2px}.pack .rounds::after{bottom:-2px}
.pack.sig .rounds::before,.pack.sig .rounds::after{background:var(--paper);opacity:.35}
.pack.sig::before{height:7px;top:-2px;border-radius:0}
.quote .brief::before{height:7px;top:-2px;opacity:.9}
.foot .top{border-bottom:0;position:relative}
.foot .top::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:6px;background:var(--ink);opacity:.3}
.sec-note .eyebrow::after{height:5px;width:64px;opacity:.55}
.panel nav a{border-bottom:0;position:relative}
.panel nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--ink);opacity:.3}
.bar{box-shadow:none}
.bar::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:6px;background:var(--ink);opacity:.22}
.found li h3::before{width:64px;height:6px;top:-12px}
/* form underlines use the same stroke */
.brief input[type=text],.brief input[type=email],.brief input[type=tel]{border-bottom:0;background:var(--aurora) no-repeat 0 100% / 0 2px,var(--brush-ink) no-repeat 0 100% / 100% 6px}
.brief input:focus{background-size:100% 2px,100% 6px}
.brief select{border-bottom:0;background-image:var(--aurora),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231c1a17' stroke-width='1.6'/%3E%3C/svg%3E"),var(--brush-ink);background-repeat:no-repeat;background-position:0 100%,right 4px center,0 100%;background-size:0 2px,14px 9px,100% 6px}
.brief select:focus{background-size:100% 2px,14px 9px,100% 6px}
.brief input[aria-invalid=true]{background-image:var(--aurora),var(--brush-err)}
@media (max-width:900px){.next li,.next li:first-child{padding:22px 0 18px}.pack{padding-top:30px}}

/* the brief, now three fields */
.hint{margin:-2px 0 10px;font-size:.95rem;color:var(--ink-3)}
.field > label{font-size:.82rem}
.pk-chosen{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0 0 6px;font-size:.98rem;color:var(--ink-2)}
.pk-chosen b{font-weight:600;color:var(--ink)}
.pk-clear{min-height:36px;padding:0 14px;border:0;border-radius:99px;background:transparent;box-shadow:inset 0 0 0 1px rgba(28,26,23,.3);font:500 .88rem var(--sans);color:var(--ink);cursor:pointer}
.pk-clear:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.quote .brief textarea{min-height:0}
.pk-chosen[hidden]{display:none}
.quote .brief .f-grid .field{margin-top:0}
.quote .brief .pk-chosen:not([hidden]) + .f-grid{margin-top:18px}
/* the small bar carries the full lockup too, never below 64 px tall */
.bar .wrap{height:84px}
.bar .lockup svg{height:64px;width:auto}
@media (max-width:560px){.bar .wrap{height:80px}.bar .lockup svg{height:64px}}
/* round 8: optional notes sit inside the label, so paired fields stay level */
.opt{margin-left:.5em;font-size:.8rem;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--ink-3)}
.quote .brief .f-grid .field{margin-top:0}
.quote .brief .f-grid + .field,.quote .brief .field + .f-grid{margin-top:28px}
.quote .brief .f-grid{row-gap:28px}

/* ---------- round 9: readability. No negative tracking anywhere, headings a step smaller,
   a touch of word space so words never run together, looser leading. ---------- */
h1,h2,h3,h4{letter-spacing:0;word-spacing:.04em}
.hero h1{font-size:clamp(2.3rem,1.1rem + 2.7vw,3.7rem);line-height:1.08;letter-spacing:.003em;word-spacing:.06em}
.hero h1 .s2{margin-top:.08em}
.sec h2{font-size:clamp(2.1rem,1.15rem + 2.6vw,4rem);line-height:1.08;letter-spacing:0;max-width:18em}
.problems h3{font-size:clamp(1.5rem,1.1rem + .9vw,2.05rem);line-height:1.15}
.next h4{font-size:clamp(1.4rem,1.15rem + .6vw,1.75rem);line-height:1.15}
.found li > h3{font-size:clamp(1.8rem,1.3rem + 1.3vw,2.6rem);line-height:1.08}
.pack h3{font-size:clamp(1.8rem,1.4rem + 1vw,2.4rem);line-height:1.05}
.hero .sub{max-width:33em;color:var(--ink-2)}
.found li > p{max-width:30em}

/* aurora brush stroke under "see why", drawn in the site's own dry-brush language */
.hero h1 .u{position:relative;white-space:nowrap}
.hero h1 .u::after{content:"";position:absolute;left:-.03em;right:-.08em;bottom:-.1em;height:.17em;pointer-events:none;
  background:linear-gradient(90deg,#36d7ff,#6d52f5 50%,#e062e6);
  -webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat}
.js-motion .hero h1 .u::after{clip-path:inset(0 100% 0 0)}
.js-motion .hero.go h1 .u::after{clip-path:inset(0 0 0 0);transition:clip-path 1.05s cubic-bezier(.65,0,.35,1) 1.05s}

/* ---------- round 9: spacing pass on one scale: 8, 12, 16, 24, 32, 48, 72, 112 ---------- */
:root{--s1:8px;--s2:12px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:72px;--s8:112px}
/* hero */
.hero .eyebrow{margin-bottom:var(--s5)}
.hero .sub{margin-top:var(--s5)}
.hero .cta{margin-top:var(--s6);gap:var(--s3) var(--s5)}
.btn{min-height:56px;padding:0 28px;gap:var(--s2)}
.nav .btn{min-height:48px;padding:0 20px}
/* sections */
.sec{padding:clamp(52px,6vw,84px) 0}
#problem{padding-top:clamp(72px,8vw,112px)}
.sec-note{padding-bottom:var(--s4)}
.sec-head{row-gap:var(--s4)}
.problems{margin-top:clamp(48px,6vw,72px);gap:var(--s6) clamp(24px,3.4vw,48px)}
.problems li{padding-top:var(--s5)}
.problems h3{margin-top:var(--s3)}
.problems p{margin-top:var(--s3)}
.tag{margin-top:var(--s3)}
.next-h{margin-top:var(--s6)}
.next{margin-top:var(--s4);gap:var(--s5) clamp(24px,3.4vw,48px)}
.next li,.next li:first-child{padding:var(--s5) 0 0}
.next p{margin-top:var(--s3)}
.found{margin-top:clamp(48px,6vw,72px);gap:clamp(72px,8vw,112px)}
.found li > .draw{padding:var(--s4)}
.found li > p{margin-top:var(--s3)}
.pk-note,.packs{margin-top:clamp(48px,6vw,72px)}
.pack{padding:var(--s6) var(--s5)}
.pack:first-child{padding-left:0}
.pack.sig{padding:var(--s6) var(--s5)}
.pack.sig .pick{margin:0 0 var(--s3)}
.pack .for{margin-top:var(--s2)}
.pack .rounds{margin-top:var(--s4);padding:var(--s3) 0}
.pack ul{margin:var(--s4) 0 var(--s5);gap:var(--s2)}
/* get a quote */
.quote .wrap{gap:var(--s6) clamp(48px,6vw,112px)}
.alt{margin-top:var(--s5)}
.quote .brief{padding:var(--s6)}
.quote .brief .f-grid{row-gap:var(--s5);column-gap:var(--s5)}
.quote .brief .f-grid + .field,.quote .brief .field + .f-grid{margin-top:var(--s5)}
.field > label{margin-bottom:var(--s1)}
.hint{margin:0 0 var(--s2)}
.brief input[type=text],.brief input[type=email],.brief input[type=tel],.brief select{min-height:56px;padding:var(--s2) 0}
.brief textarea{padding:var(--s3)}
.err{margin-top:var(--s1)}
.pk-chosen{margin:0 0 var(--s4)}
.quote .brief .pk-chosen:not([hidden]) + .f-grid{margin-top:0}
.send{margin-top:var(--s6);gap:var(--s3) var(--s4)}
/* contact and footer */
.contact .ways{margin-top:var(--s6);gap:var(--s3) var(--s5)}
.contact .addr{margin-top:var(--s5)}
.foot .top{padding-bottom:var(--s5);gap:var(--s5)}
.foot .base{padding-top:var(--s4)}
@media (max-width:900px){
  .pack,.pack:first-child{padding:var(--s5) 0}
  .pack.sig{padding:var(--s5) var(--s4);margin-top:var(--s3)}
  .q-intro{margin-bottom:var(--s5)}
}
@media (max-width:700px){
  .quote .brief{padding:var(--s5) var(--s4)}
  .quote .brief .f-grid{row-gap:var(--s4)}
  .quote .brief .f-grid + .field,.quote .brief .field + .f-grid{margin-top:var(--s4)}
  .hero .cta{margin-top:var(--s5)}
}
:root{--rule-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 34' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-1%25' y='-50%25' width='102%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.5' numOctaves='2' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath filter='url(%23d)' fill='%231c1a17' fill-opacity='.32' d='M2 30C4 27.6 14 27 40 27.2C300 28.2 650 28.8 998 29.2L998 31C650 31.4 300 32 40 32.8C14 33 4 32.4 2 30Z'/%3E%3C/svg%3E");--rule-aur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 34' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-1%25' y='-50%25' width='102%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.5' numOctaves='2' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath filter='url(%23d)' fill='%236d52f5' fill-opacity='.8' d='M2 30C4 27.6 14 27 40 27.2C300 28.2 650 28.8 998 29.2L998 31C650 31.4 300 32 40 32.8C14 33 4 32.4 2 30Z'/%3E%3C/svg%3E");--rule-err:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 34' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-1%25' y='-50%25' width='102%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.5' numOctaves='2' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath filter='url(%23d)' fill='%23a1231b' fill-opacity='.8' d='M2 30C4 27.6 14 27 40 27.2C300 28.2 650 28.8 998 29.2L998 31C650 31.4 300 32 40 32.8C14 33 4 32.4 2 30Z'/%3E%3C/svg%3E")}

/* =====================================================================
   Round 10: colour as watercolour, lines that answer the reader
   ===================================================================== */
@keyframes redraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rule-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ants{to{stroke-dashoffset:-16}}
@keyframes pulse{0%{opacity:.6}40%{opacity:1}100%{opacity:.6}}

/* ---------- header: current section, WhatsApp as a link, Get a quote as the one pill ---------- */
.nav a:not(.btn):not(.wa-link)::after{height:6px;bottom:3px;background:var(--aurora);transform:none;clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--out);
  -webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat}
.nav a:not(.btn):hover::after,.nav a:not(.btn):focus-visible::after,.nav a.is-here::after{transform:none;clip-path:inset(0 0 0 0)}
.nav a.is-here{font-weight:600}
.wa-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:500;padding:12px 0}
.wa-link svg{flex:none}
.wa-link:hover{color:#3d2fa8}
@media (max-width:1060px){.nav .wa-link{display:none}}
.bar .read{position:absolute;left:0;right:0;bottom:-3px;height:6px;background:var(--ink);opacity:.5;transform-origin:0 50%;transform:scaleX(var(--p,0));
  -webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat}
@media (prefers-reduced-motion:reduce){.bar .read{display:none}}
@media (max-width:560px){.bar .wrap{height:76px}}

/* menu panel: roomier, slides, rules draw in one after another */
.panel .sheet{padding:24px;transition:transform .32s cubic-bezier(.22,1,.36,1)}
.panel nav a{font-size:1.75rem;padding:12px 0}
.panel nav a::after{clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--out)}
.panel.open nav a::after{clip-path:inset(0 0 0 0)}
.panel.open nav a:nth-child(1)::after{transition-delay:.12s}.panel.open nav a:nth-child(2)::after{transition-delay:.16s}
.panel.open nav a:nth-child(3)::after{transition-delay:.2s}.panel.open nav a:nth-child(4)::after{transition-delay:.24s}
.panel.open nav a:nth-child(5)::after{transition-delay:.28s}.panel.open nav a:nth-child(6)::after{transition-delay:.32s}
.panel nav a.is-here{color:#3d2fa8}

/* ---------- hero: tighter composition, a bloom behind Sumi, the branch drawn in ---------- */
.hero{--artH:clamp(560px,94svh,1100px);--artW:calc(var(--artH) * .90909);min-height:max(620px,calc(var(--artH) * .93))}
.art{left:calc(var(--artW) * -.04);top:calc(var(--artH) * -.03)}
.hero-copy{min-height:max(620px,calc(var(--artH) * .93));padding:110px var(--gut) 40px calc(var(--artW) * .95 + 48px);max-width:calc(var(--artW) * .95 + 48px + 620px)}
.art .layer,.art .bloom{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.art .bloom{inset:auto;left:-8%;top:5%;width:110%;height:auto;aspect-ratio:1;opacity:.5;mix-blend-mode:multiply}
.branch-layer{display:none}
.js-motion .hero:not(.rest) .art-full{opacity:0}
.js-motion .hero:not(.rest) .branch-layer{display:block;-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);
  -webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
.js-motion .hero .bloom{clip-path:circle(0% at 45% 50%)}
.js-motion .hero.bloom-on .bloom{clip-path:circle(72% at 45% 50%);transition:clip-path 1.4s cubic-bezier(.2,.7,.2,1)}
@media (max-width:900px),(max-aspect-ratio:1/1){
  .hero{--artH:min(46svh,560px);--artW:calc(var(--artH) * .90909);min-height:0}
  .art{left:auto;top:auto;margin:calc(var(--artH) * -.03) 0 calc(var(--artH) * -.06) calc(var(--artW) * -.04)}
  .hero-copy{min-height:0;padding:0 var(--gut) 48px;max-width:760px}
  .hero .eyebrow{margin-bottom:var(--s3)}
  .hero .sub{margin-top:var(--s4)}
}

/* ---------- shared: section washes that bloom after the rule, next-step links ---------- */
.sec{position:relative}
.sec > .wrap{position:relative;z-index:1}
.sec-wash{position:absolute;z-index:0;pointer-events:none;width:min(760px,70vw);height:auto;opacity:.5;mix-blend-mode:multiply}
.sec-wash.w-right{right:-3vw;top:40px}
.sec-wash.w-left{left:-8vw;top:38%}
.js-motion .sec-wash{opacity:0;transform:scale(.85)}
.js-motion .sec-wash.in{opacity:.5;transform:none;transition:opacity 1.2s ease .6s,transform 1.6s var(--out) .6s}
.step-on{margin-top:var(--s6)}
.next-step{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:600;text-decoration:none;color:var(--ink)}
.next-step .arrow{width:52px;height:18px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.next-step .arrow path{stroke-dasharray:1 1;stroke-dashoffset:0}
.next-step:hover,.next-step:focus-visible{color:#3d2fa8}
.next-step:hover .arrow path,.next-step:focus-visible .arrow path{animation:redraw .6s var(--out) both}
.next-step:hover .arrow path + path,.next-step:focus-visible .arrow path + path{animation-delay:.25s}
.draw-on path{stroke-dasharray:1 1;stroke-dashoffset:0}
.js-motion .draw-on path{stroke-dashoffset:1}
.js-motion .in .draw-on path{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--out) calc(var(--k,0) * 90ms + .3s)}

/* ---------- problem: the column you read answers ---------- */
.problems li{transition:opacity .35s ease}
.problems li::after{content:"";position:absolute;left:0;right:0;top:-6px;height:12px;background:var(--ink);opacity:0;transition:opacity .25s ease;
  -webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat}
.problems li:hover::after,.problems li.is-live::after{opacity:1}
.problems li:hover .n,.problems li.is-live .n{background:linear-gradient(90deg,#1683c4,#5b45d8 60%,#b0369f);-webkit-background-clip:text;background-clip:text;color:transparent}
.problems:has(li:hover) li:not(:hover),.problems:has(li.is-live) li:not(.is-live){opacity:.7}

/* ---------- services: the lead service as an inked band ---------- */
.lead-band{position:relative;margin-top:clamp(48px,6vw,72px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s6);align-items:center;padding:clamp(28px,4vw,56px)}
.frame-ink{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.frame-ink path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;opacity:.8;filter:url(#rough);transition:stroke-width .3s}
.js-motion .lead-band .frame-ink{clip-path:inset(0 100% 0 0)}
.js-motion .lead-band.in .frame-ink{clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--inout) .1s}
.lead-band:hover .frame-ink path,.lead-band.is-live .frame-ink path{stroke-width:3.4}
.band-wash{position:absolute;z-index:0;left:-6%;top:-22%;width:74%;height:auto;opacity:.5;mix-blend-mode:multiply;pointer-events:none}
.js-motion .lead-band .band-wash{opacity:0;transform:scale(.8)}
.js-motion .lead-band.in .band-wash{opacity:.5;transform:none;transition:opacity 1.2s ease .8s,transform 1.6s var(--out) .8s}
.band-text,.browser{position:relative;z-index:2}
.band-text h3{font-size:clamp(2rem,1.3rem + 1.8vw,3rem);line-height:1.05}
.band-text .copy{margin-top:var(--s4);font-size:clamp(1.06rem,.98rem + .3vw,1.2rem);line-height:1.5}
.brush-list{margin-top:var(--s3);display:grid;gap:var(--s2)}
.brush-list li{position:relative;padding-left:40px;font-size:clamp(1.06rem,.98rem + .3vw,1.2rem);line-height:1.45}
.brush-list li::before{content:"";position:absolute;left:0;top:.62em;width:26px;height:7px;background:var(--ink);-webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat}
.browser{width:100%;max-width:440px;justify-self:end;color:var(--ink)}
.lead-band:hover .browser path{animation:redraw .8s var(--out) both;animation-delay:calc(var(--k,0) * 60ms)}
.next li::before{transition:height .25s,opacity .25s,top .25s}
.next li:hover::before,.next li.is-live::before{height:9px;top:-2px;opacity:.95}
.mk2{display:block;width:44px;height:44px;margin-bottom:var(--s3);color:var(--ink)}
.mk2 path{stroke-dasharray:1 1}
.next li:hover .mk2 path,.next li.is-live .mk2 path{animation:redraw .6s var(--out) both;animation-delay:calc(var(--k,0) * 80ms)}
.next li:hover .mk2,.next li.is-live .mk2{color:#3d2fa8}
@media (max-width:900px){.lead-band{grid-template-columns:1fr;gap:var(--s5)}.browser{justify-self:start;max-width:360px}}

/* ---------- getting found: smaller panels, a wash per row, the path that matters lights up ---------- */
.found{gap:clamp(64px,8vw,96px)}
.found li{grid-template-columns:minmax(0,520px) minmax(0,1fr);align-items:center}
.found li:nth-child(2){grid-template-columns:minmax(0,1fr) minmax(0,520px)}
.found li > .panel-ink{grid-column:1;grid-row:1 / -1;position:relative}
.found li:nth-child(2) > .panel-ink{grid-column:2}
.panel-ink .draw{position:relative;z-index:1;max-width:none;width:100%;margin:0;padding:12px;background:none;box-shadow:none}
.row-wash{position:absolute;z-index:0;left:-8%;top:-14%;width:116%;height:128%;opacity:.4;mix-blend-mode:multiply;pointer-events:none}
.js-motion .found li .row-wash{opacity:0;transform:scale(.85)}
.js-motion .found li.in .row-wash{opacity:.4;transform:none;transition:opacity 1.2s ease .9s,transform 1.6s var(--out) .9s}
.found .hl{transition:stroke .3s,stroke-width .3s,fill .3s}
.found li:hover .hl,.found li.is-live .hl{stroke:var(--c);stroke-width:3.4}
.found li:hover .hl.page,.found li.is-live .hl.page{fill:rgba(109,82,245,.16)}
.found li:hover .ants,.found li.is-live .ants{animation:ants .9s linear infinite}
.found li:hover h3::before,.found li.is-live h3::before{height:9px}
@media (max-width:760px){.found li,.found li:nth-child(2){grid-template-columns:1fr}.found li > .panel-ink,.found li:nth-child(2) > .panel-ink{grid-column:1}}

/* ---------- how we work: one brush stroke through the four steps ---------- */
.route{position:relative;margin-top:clamp(48px,6vw,72px)}
.route-line{position:absolute;left:0;right:0;top:2px;width:100%;height:40px;overflow:visible;pointer-events:none}
.route-down{display:none}
.route-line path,.route-down path{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-dasharray:1 1}
.rl-base{stroke-width:2.6;opacity:.8;filter:url(#rough)}
.rl-hi{stroke-width:6;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--out)}
.js-motion .route .rl-base{stroke-dashoffset:1}
.js-motion .route.in .rl-base{animation:route 2.4s linear both}
@keyframes route{0%{stroke-dashoffset:.97}18%{stroke-dashoffset:.73}26%{stroke-dashoffset:.73}44%{stroke-dashoffset:.48}52%{stroke-dashoffset:.48}70%{stroke-dashoffset:.23}78%{stroke-dashoffset:.23}100%{stroke-dashoffset:0}}
.node{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper)}
.node svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.node svg path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0;filter:url(#rough)}
.node b{position:relative;font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.35rem;line-height:1}
.node .dot{position:absolute;inset:5px;border-radius:50%;background:url(img/wash/aurora.webp) 45% 45% / 260% auto;opacity:0;transform:scale(.5);transition:opacity .4s,transform .5s var(--out)}
.js-motion .route .node svg path{stroke-dashoffset:1}
.js-motion .route.in .node svg path{stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--out) calc(var(--i) * .62s)}
.js-motion .route li h3,.js-motion .route li p{opacity:0;transform:translateY(16px)}
.js-motion .route.in li h3,.js-motion .route.in li p{opacity:1;transform:none;transition:opacity .8s var(--out) calc(var(--i) * .62s + .15s),transform .9s var(--out) calc(var(--i) * .62s + .15s)}
.route:has(li:nth-child(1):hover) .rl-hi,.route:has(li:nth-child(1).is-live) .rl-hi{stroke-dashoffset:.97}
.route:has(li:nth-child(2):hover) .rl-hi,.route:has(li:nth-child(2).is-live) .rl-hi{stroke-dashoffset:.72}
.route:has(li:nth-child(3):hover) .rl-hi,.route:has(li:nth-child(3).is-live) .rl-hi{stroke-dashoffset:.47}
.route:has(li:nth-child(4):hover) .rl-hi,.route:has(li:nth-child(4).is-live) .rl-hi{stroke-dashoffset:.22}
@media (max-width:760px){
  .route-line{display:none}
  .route-down{display:block;position:absolute;left:20px;top:22px;bottom:0;width:4px;height:calc(100% - 22px);overflow:visible}
  .js-motion .route .route-down .rl-base{stroke-dashoffset:1}
  .js-motion .route.in .route-down .rl-base{animation:none;stroke-dashoffset:0;transition:stroke-dashoffset 2.2s linear}
  .node{position:absolute;left:0;top:-6px}
}
/* the promise, as a timeline in ink with a watercolour tint */
.promise2{margin-top:clamp(64px,8vw,96px)}
.promise-h{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.timeline{margin-top:var(--s4);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) clamp(24px,3.4vw,48px)}
.timeline li{position:relative;padding-top:var(--s5)}
.timeline li::before,.timeline li::after{content:"";position:absolute;left:0;right:0;background:var(--ink);-webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat}
.timeline li::before{top:-3px;height:7px;opacity:.5}
.timeline li::after{top:-6px;height:12px;opacity:0;transition:opacity .25s}
.timeline li:hover::after,.timeline li.is-live::after{opacity:1}
.timeline .big{font-family:var(--serif);font-size:clamp(2.2rem,1.5rem + 2vw,3.4rem);line-height:1.05;word-spacing:.04em;color:#3d2fa8;
  background:url(img/wash/teal-violet.webp) 30% 50% / 220% auto,linear-gradient(90deg,#1683c4,#5b45d8 60%,#9c3fc0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.timeline .big + p{margin-top:var(--s3);color:var(--ink-2);max-width:26em}
@media (max-width:900px){.timeline{grid-template-columns:1fr}}

/* ---------- packages: a set of three that answers the pointer ---------- */
.packs{gap:var(--s4)}
.pack,.pack:first-child{padding:var(--s6) var(--s5);transition:transform .5s var(--out)}
.pack > :not(.pk-wash):not(.frame-ink){position:relative;z-index:2}
.pack .frame-ink path{opacity:.4}
.pack:hover,.pack:focus-within,.pack.is-live{transform:translateY(-4px)}
.pack:hover .frame-ink path,.pack:focus-within .frame-ink path,.pack.is-live .frame-ink path{opacity:.85}
.pk-wash{position:absolute;z-index:0;left:var(--px,50%);top:var(--py,40%);width:540px;max-width:none;height:auto;transform:translate(-50%,-50%) scale(.3);opacity:0;mix-blend-mode:multiply;pointer-events:none;transition:opacity .6s ease,transform 1s var(--out)}
.pack:hover .pk-wash,.pack:focus-within .pk-wash,.pack.is-live .pk-wash{opacity:.5;transform:translate(-50%,-50%) scale(1)}
.pack.sig{overflow:hidden}
.pack.sig .pk-wash{mix-blend-mode:screen}
.pack.sig:hover .pk-wash,.pack.sig:focus-within .pk-wash,.pack.sig.is-live .pk-wash{opacity:.3}
.pack:hover .rounds::before,.pack:hover .rounds::after,.pack:focus-within .rounds::before,.pack:focus-within .rounds::after,.pack.is-live .rounds::before,.pack.is-live .rounds::after{animation:rule-draw .5s var(--out) both}
.pack .btn{align-self:stretch;justify-content:center;min-height:52px}
.pack.is-sel .btn-ghost{background:var(--ink);color:var(--paper)}
.btn-paper:hover{box-shadow:0 0 0 2px var(--ink),0 0 0 3.5px rgba(109,82,245,.9),0 0 14px rgba(138,92,255,.45)}
@media (max-width:900px){.pack,.pack:first-child{padding:var(--s5) var(--s4)}.pack.sig{margin:0}}

/* ---------- get a quote: fields you can see, a page with ruled lines, a progress row ---------- */
.field > label{font-size:.82rem}
.brief input[type=text],.brief input[type=email],.brief input[type=tel]{height:44px;min-height:0;padding:0 0 10px}
.brief input::placeholder,.brief textarea::placeholder{color:#8a8378}
.quote .brief textarea{border:0;border-radius:0;box-shadow:none;padding:0;min-height:0;line-height:34px;resize:vertical;
  background:var(--rule-ink) 0 0 / 100% 34px repeat-y local,transparent}
.quote .brief textarea:focus{background-image:var(--rule-aur);box-shadow:none}
.quote .brief textarea[aria-invalid=true]{background-image:var(--rule-err)}
.pk-chosen{display:block}
.pk-chosen .pk-clear{margin-left:12px;vertical-align:middle}
.pk-chosen b{position:relative;display:inline-block}
.pk-chosen b::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:6px;background:var(--aurora);-webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat}
.pk-chosen.fresh b::after{animation:rule-draw .6s var(--out) both}
.brief.pulse::before{animation:pulse .9s ease}
.dots{display:flex;gap:10px;margin-top:var(--s5)}
.dots i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(28,26,23,.55);transition:box-shadow .3s}
.dots i.on{background:url(img/wash/aurora.webp) 45% 45% / 400% auto;box-shadow:inset 0 0 0 1.5px #5b45d8}
.dots + .send{margin-top:var(--s3)}
.form-status .check{display:inline-block;width:44px;height:30px;vertical-align:-4px;margin-right:12px;fill:none;stroke:#3d2fa8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.form-status .check path{stroke-dasharray:1 1;animation:redraw .7s var(--out) both}
.mini-sumi{position:relative;display:block;width:72px;margin-top:var(--s3);aspect-ratio:1800/1980;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 60%,transparent 100%)}
.mini-sumi img{position:absolute;inset:0;width:100%;height:100%}
.mini-sumi .shut{inset:auto;left:27.78%;top:43.69%;width:24.06%;height:14.19%;opacity:0}
.mini-sumi .shut.on{opacity:1}

/* ---------- contact: a softer bloom, less paper below ---------- */
.contact{padding-bottom:var(--s5)}
.contact-art{max-width:440px;margin-top:0}
.contact-art .c-bloom{inset:auto;left:-10%;top:4%;width:120%;height:auto;aspect-ratio:1;opacity:.45;mix-blend-mode:multiply}
.contact-art .owl-layer{position:absolute;inset:0;width:100%;height:100%}

/* ---------- footer: all the links, a wash under the logo, the rule draws in ---------- */
.foot{position:relative;overflow:hidden}
.foot > .wrap{position:relative;z-index:1}
.foot-wash{position:absolute;z-index:0;left:max(0px,(100% - var(--max)) / 2 + 80px);top:-120px;width:520px;height:auto;opacity:.18;mix-blend-mode:multiply;pointer-events:none}
.js-motion .foot .top::after{clip-path:inset(0 100% 0 0)}
.js-motion .foot .top.in::after{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--inout) .2s}
.f-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.f-links a{color:var(--ink-2)}
@media (max-width:760px){.foot nav{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;width:100%}}

/* ---------- phones: a Get a quote pill that follows after the hero ---------- */
.sticky-quote{display:none}
@media (max-width:760px){
  .sticky-quote{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:99px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:600;box-shadow:0 12px 30px -12px rgba(28,26,23,.6);transform:translateY(150%);opacity:0;transition:transform .45s var(--out),opacity .3s}
  .sticky-quote.on{transform:none;opacity:1}
  body.locked .sticky-quote{opacity:0}
}
/* how we work: steps (restored after the orphan sweep) */
.steps2{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.4vw,36px)}
.steps2 li{position:relative}
.steps2 li:hover .dot,.steps2 li.is-live .dot{opacity:.85;transform:none}
.steps2 h3{margin-top:var(--s4);font-size:clamp(1.5rem,1.2rem + .7vw,1.95rem);line-height:1.12}
.steps2 p{margin-top:var(--s2);color:var(--ink-2)}
@media (max-width:760px){
  .steps2{grid-template-columns:1fr;gap:var(--s6)}
  .steps2 li{padding-left:64px}
  .steps2 h3{margin-top:0}
}
.sec{overflow-x:clip}

/* =====================================================================
   Round 11
   ===================================================================== */
/* nav: the section you are in keeps the aurora brush underline; weight stays put */
.nav a.is-here{font-weight:500}
.nav a.is-here:not(.btn):not(.wa-link)::after{clip-path:inset(0 0 0 0)}
.panel nav a.is-here{font-weight:inherit}
/* phones: the small bar tucks away while you read down and returns when you scroll up */
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .bar{transition:transform .28s var(--out)}
  .bar.on.tuck{transform:translateY(-102%)}
}

/* hero: Sumi's wash fades to paper before the screen edge; the bloom tints the wash and paper, never the owl */
.art{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 88%,transparent 99%),linear-gradient(90deg,transparent 0,#000 9%,#000 90%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 88%,transparent 99%),linear-gradient(90deg,transparent 0,#000 9%,#000 90%,transparent 100%)}
.contact-art .c-bloom{left:-8%;top:5%;width:110%}
.hero.rest .owl-layer{display:none}
.hero{min-height:max(600px,calc(var(--artH) * .9))}
.hero-copy{min-height:max(600px,calc(var(--artH) * .9))}
@media (max-width:900px),(max-aspect-ratio:1/1){.hero,.hero-copy{min-height:0}}

/* every wash fades to paper on all sides */
.sec-wash,.band-wash,.row-wash,.pk-wash,.foot-wash{-webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);mask-image:radial-gradient(closest-side,#000 45%,transparent 100%)}

/* problem: faded columns stay readable; the wash sits right of the lede */
.problems:has(li:hover) li:not(:hover),.problems:has(li.is-live) li:not(.is-live){opacity:.82}
.sec-wash.w-right{right:max(8px,2vw);top:-20px;width:min(640px,56vw)}

/* services: the frame closes, the wash sits behind the drawing */
.band-wash{left:auto;right:-4%;top:-12%;width:62%;opacity:.45}
.js-motion .lead-band.in .band-wash{opacity:.45}
.mk2.brushed .bf{fill:currentColor;stroke:none}
.mk2.brushed .rev{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.js-motion .mk2.brushed .rev{stroke-dashoffset:1}
.js-motion .in .mk2.brushed .rev{stroke-dashoffset:0;transition:stroke-dashoffset .55s var(--out) calc(var(--k,0) * 90ms + .3s)}
.next li:hover .mk2.brushed .rev,.next li.is-live .mk2.brushed .rev{animation:redraw .55s var(--out) both;animation-delay:calc(var(--k,0) * 70ms)}
.next li:hover .mk2.brushed .bf,.next li.is-live .mk2.brushed .bf{animation:none}

/* getting found: only the three painted washes, rows closer together */
#found::before{display:none}
.found{gap:clamp(32px,4vw,48px)}

/* how we work: no stray end dot before the stroke is drawn; the wash sits clear of the timeline text */
.js-motion .route:not(.in) .rl-base{opacity:0}
.rl-hi{opacity:0;transition:stroke-dashoffset .6s var(--out),opacity .2s}
.route:has(li:hover) .rl-hi,.route:has(li.is-live) .rl-hi{opacity:1}
.sec-wash.w-left{left:-12vw;top:auto;bottom:-140px;width:min(560px,52vw);opacity:.4}
.js-motion .sec-wash.w-left.in{opacity:.4}

/* packages: the bloom stays inside its card and follows the pointer; frames in divider ink */
.pack{overflow:clip}
.pk-wash{left:0;top:0;transform:translate(calc(var(--px,50%) - 50%),calc(var(--py,40%) - 50%)) scale(.3);transition:opacity .6s ease,transform .9s var(--out)}
.pack:hover .pk-wash,.pack:focus-within .pk-wash,.pack.is-live .pk-wash{transform:translate(calc(var(--px,50%) - 50%),calc(var(--py,40%) - 50%)) scale(1)}
.pack .frame-ink path{opacity:.7;stroke-width:2.2}

/* get a quote: the intro travels with the form, the dots say what they count, no resize grip */
.quote .wrap{align-items:start}
.q-intro{position:sticky;top:120px;align-self:start}
.quote .brief textarea{resize:none}
.dots{align-items:center;flex-wrap:wrap}
.dots-l{margin-left:6px;font-size:.82rem;color:var(--ink-3)}
.dots-l span{transition:color .3s}
.dots-l span.on{color:var(--ink);font-weight:600}
.dots-l .count{margin-left:8px;color:var(--ink-2)}
@media (max-width:900px){.q-intro{position:static}}

/* contact: less paper before the footer */
.contact-grid{align-items:center}
.contact-art{max-width:380px}
.contact{padding-bottom:0}
.foot{padding-top:clamp(48px,6vw,72px)}

/* footer: the wash sits inside the footer and fades on every side */
.foot-wash{top:10px;left:max(0px,(100% - var(--max)) / 2);width:460px;opacity:.2}

/* phone pill: smaller, a paper halo, and room at the end of the page */
@media (max-width:760px){
  .sticky-quote{min-height:44px;padding:0 20px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));box-shadow:0 0 0 4px rgba(244,241,234,.9),0 0 12px 6px rgba(244,241,234,.85),0 12px 30px -12px rgba(28,26,23,.6)}
  body{padding-bottom:88px}
  .foot{margin-bottom:-88px;padding-bottom:calc(32px + 88px)}
}
/* arrival order: the branch is painted first, then Tsuku-chan fades in on it as the wash blooms */
.js-motion .hero:not(.rest) .owl-layer{opacity:0;transform:scale(.985);transform-origin:50% 88%;transition:opacity .65s ease,transform .8s var(--out)}
.js-motion .hero.owl-in:not(.rest) .owl-layer{opacity:1;transform:none}

/* =====================================================================
   Round 12: Tsuku-chan flies in
   ===================================================================== */
.hero .flight{position:absolute;inset:0;z-index:3;pointer-events:none}
.js-motion .hero.landed .art-full{opacity:1;transition:opacity .28s ease-out}
/* laptop and desktop: his flare is about 1.4 times the painting's width, mostly to the right of him.
   Size the painting so the whole flare fits between the screen's left edge and the words:
   painting left = 0.162 of its width + 8 px, words start 1.243 of its width after that + 16 px. */
@media (min-width:901px) and (min-aspect-ratio:1/1){
  .hero{--artW:clamp(440px,min(calc(94svh * .90909),calc((100vw - 590px) / 1.405)),1000px);--artH:calc(var(--artW) * 1.1)}
  .art{left:calc(var(--artW) * .162 + 8px);top:calc(var(--artH) * -.02)}
  .hero-copy{padding-left:calc(var(--artW) * 1.405 + 24px);max-width:calc(var(--artW) * 1.405 + 24px + 640px)}
  .hero,.hero-copy{min-height:max(620px,calc(var(--artH) * .92))}
}

/* round 12: the bloom tints only paper and wash; its mask is the painting's own owl silhouette
   (made by .qa/bloom_mask.py), so the owl's head, ink and body are never tinted */
:root{--owl-safe:url("data:image/webp;base64,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")}
.bloom-box{position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--owl-safe) 0 0 / 100% 100% no-repeat;mask:var(--owl-safe) 0 0 / 100% 100% no-repeat}
.art .bloom,.contact-art .c-bloom{-webkit-mask:none;mask:none;left:-8%;top:5%;width:110%;height:auto;aspect-ratio:1}
/* the bloom grows from Tsuku-chan by scale and opacity, no hard circle edge */
.js-motion .hero .bloom{clip-path:none;opacity:0;transform:scale(.55);transform-origin:45% 50%}
.js-motion .hero.bloom-on .bloom{clip-path:none;opacity:.5;transform:none;transition:opacity 1.2s ease,transform 1.5s cubic-bezier(.2,.7,.2,1)}
/* at landing the painting is simply there under the flight canvas (its last frame matches it), no crossfade dip */
.js-motion .hero.landed .art-full{transition:none}

/* ---------- round 12: washes belong to something ---------- */
/* problem: a small wash blooms behind the numeral of the column you are reading, then fades back */
.problems li{position:relative}
.n-wash{position:absolute;z-index:-1;left:-40px;top:-10px;width:220px;height:auto;opacity:0;transform:scale(.4);transform-origin:40px 30px;mix-blend-mode:multiply;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);transition:opacity .6s ease,transform .9s var(--out)}
.problems li:hover .n-wash,.problems li.is-live .n-wash{opacity:.55;transform:none}
.problems{isolation:isolate}
/* footer: the wash belongs to the logo and blooms only when you point at it */
.foot-logo{position:relative;isolation:isolate}
.foot-logo .foot-wash{position:absolute;z-index:-1;left:40%;top:-60%;width:320px;opacity:0;transform:scale(.5);transition:opacity .6s ease,transform 1s var(--out)}
.foot-logo:hover .foot-wash,.foot-logo:focus-visible .foot-wash{opacity:.3;transform:none}

/* ---------- Easter eggs ---------- */
::selection{background:rgba(138,92,255,.24);color:inherit}
/* the logo's aurora wave ripples like wet ink under the pointer (filter only while it runs) */
.lockup:hover svg path[fill^="url"],.lockup:focus-visible svg path[fill^="url"]{filter:url(#wet)}
/* asleep after a quiet half minute */
.zzz{position:absolute;left:62%;top:30%;z-index:4;pointer-events:none;font-family:var(--serif);font-style:italic;color:var(--ink-2)}
.zzz i{position:absolute;left:0;top:0;opacity:0;font-size:22px}
.hero.asleep .zzz i{animation:zfloat 3s ease-in infinite}
.hero.asleep .zzz i:nth-child(2){animation-delay:1s;font-size:17px}
.hero.asleep .zzz i:nth-child(3){animation-delay:2s;font-size:13px}
@keyframes zfloat{0%{opacity:0;transform:translate(0,0)}20%{opacity:.8}100%{opacity:0;transform:translate(34px,-70px) rotate(8deg)}}
/* an ink drop on empty paper that blooms into a small aurora flower */
.drop{position:absolute;z-index:30;width:90px;height:90px;margin:-45px 0 0 -45px;pointer-events:none}
.drop i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--ink);animation:dropdot .9s ease-out forwards}
.drop img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;mix-blend-mode:multiply;opacity:0;animation:dropbloom 3.2s ease-out .25s forwards;
  -webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);mask-image:radial-gradient(closest-side,#000 35%,transparent 100%)}
@keyframes dropdot{0%{transform:scale(0)}30%{transform:scale(1.2)}100%{transform:scale(.6);opacity:0}}
@keyframes dropbloom{0%{opacity:0;transform:scale(.2) rotate(0deg)}20%{opacity:.6;transform:scale(.8) rotate(16deg)}52%{opacity:.6;transform:scale(.92) rotate(26deg)}100%{opacity:0;transform:scale(1) rotate(40deg)}}
@media (prefers-reduced-motion:reduce){.zzz,.drop{display:none}}
/* 404: Tsuku-chan looking a little lost */
.nf .lost{position:relative;display:block;width:min(300px,70vw);margin:0 auto;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent);mask-image:radial-gradient(closest-side,#000 72%,transparent)}
.nf .lost img{width:100%;-webkit-mask-image:none;mask-image:none;margin:0}
.nf .lost .shut{position:absolute;left:27.78%;top:43.69%;width:24.06%;height:auto;opacity:0}
.nf .lost.look{animation:lookabout 5s ease-in-out infinite;transform-origin:50% 85%}
@keyframes lookabout{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg)}45%{transform:rotate(-4deg)}65%{transform:rotate(3deg)}85%{transform:rotate(3deg)}}

/* =====================================================================
   Round 13: the branch comes from the left edge, the words get their room back,
   the painting's paper matches the page (tone-matched in the images themselves)
   ===================================================================== */
.branch-ext{display:none}
@media (min-width:901px) and (min-aspect-ratio:1/1){
  /* the painting is sized so the words start just under half way across */
  .hero{--artW:clamp(340px,min(calc(94svh * .90909),calc(39.5vw - 7px)),1000px);--artH:calc(var(--artW) * 1.1)}
  .art{left:calc(var(--artW) * .168 + 8px)}
  .hero-copy{padding-left:calc(var(--artW) * 1.19 + 16px);max-width:calc(var(--artW) * 1.19 + 16px + 660px)}
  /* the branch's own strokes carry it from the painting's left edge off the left of the screen */
  .branch-ext{display:block;position:absolute;z-index:0;pointer-events:none;
    left:calc(var(--artW) * .168 + 8px - var(--artW) * .42222);top:calc(var(--artH) * -.02 + var(--artH) * .85354);
    width:calc(var(--artW) * .42222);height:auto}
  /* the flare's far wingtip passes behind the words for a moment instead of pushing them right */
  .hero .flight{z-index:1}
}
/* the painting's paper now matches the page, so its edges only need a short fade; the left edge stays open for the branch */
.art{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 97%,transparent 100%),linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 97%,transparent 100%),linear-gradient(90deg,#000 0,#000 92%,transparent 100%)}

/* Signature badge: top right, a small squircle with an aurora border */
.packs .pack.sig .pick{position:absolute;z-index:3;top:18px;right:18px;margin:0;padding:6px 12px;border-radius:11px;corner-shape:squircle;
  border:1.5px solid transparent;background:linear-gradient(var(--ink),var(--ink)) padding-box,linear-gradient(90deg,#36d7ff,#1a9ee6 30%,#6d52f5 55%,#b44fd6 80%,#e062e6) border-box;
  color:var(--paper);font-size:.72rem;line-height:1.2}
.packs .pack.sig .pick::before{display:none}
.packs .pack.sig h3{padding-right:0}

/* ---------- round 13: mentions play out one source at a time ---------- */
.mentions .src{transition:color .3s}
.mentions .c{stroke:currentColor;opacity:.55}
.mentions .glow{opacity:0}
.mentions .glow rect{filter:blur(6px)}
.mentions .mini path{opacity:0}
.mentions .count tspan{opacity:0;fill:#5b45d8}
.found li:nth-child(3):hover .mentions .ants,.found li:nth-child(3).is-live .mentions .ants{animation:none}
@keyframes m-light{to{color:#5b45d8}}
@keyframes m-draw{from{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:1}to{stroke-dasharray:1 1;stroke-dashoffset:0;opacity:1;stroke:url(#aur-m);stroke-width:2.6}}
@keyframes m-glow{to{opacity:var(--g)}}
@keyframes m-ink{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.mentions .mini path{transform-box:fill-box;transform-origin:center}
@keyframes m-show{0%,100%{opacity:0}10%,90%{opacity:1}}
@keyframes m-last{0%{opacity:0}100%{opacity:1}}
.found li:nth-child(3):is(:hover,.is-live) .mentions .src{animation:m-light .4s ease forwards}
.found li:nth-child(3):is(:hover,.is-live) .mentions .c{animation:m-draw .7s var(--out) forwards}
.found li:nth-child(3):is(:hover,.is-live) .mentions .s1,.found li:nth-child(3):is(:hover,.is-live) .mentions .c1{animation-delay:0s,0s}
.found li:nth-child(3):is(:hover,.is-live) .mentions .c1{animation-delay:.15s}
.found li:nth-child(3):is(:hover,.is-live) .mentions .s2{animation-delay:.6s}.found li:nth-child(3):is(:hover,.is-live) .mentions .c2{animation-delay:.75s}
.found li:nth-child(3):is(:hover,.is-live) .mentions .s3{animation-delay:1.2s}.found li:nth-child(3):is(:hover,.is-live) .mentions .c3{animation-delay:1.35s}
.found li:nth-child(3):is(:hover,.is-live) .mentions .s4{animation-delay:1.8s}.found li:nth-child(3):is(:hover,.is-live) .mentions .c4{animation-delay:1.95s}
.found li:nth-child(3):is(:hover,.is-live) .mentions .mini path{animation:m-ink .35s var(--out) forwards}
.found li:nth-child(3):is(:hover,.is-live) .mentions .mini path:nth-child(1){animation-delay:.85s}
.found li:nth-child(3):is(:hover,.is-live) .mentions .mini path:nth-child(2){animation-delay:.95s}
.found li:nth-child(3):is(:hover,.is-live) .mentions .mini path:nth-child(3){animation-delay:1.05s}
.found li:nth-child(3):is(:hover,.is-live) .mentions .mini path:nth-child(4){animation-delay:1.15s}
.found li:nth-child(3):is(:hover,.is-live) .mentions .mini path:nth-child(5){animation-delay:1.25s}
.found li:nth-child(3):is(:hover,.is-live) .mentions .glow{animation:m-glow 2.6s linear forwards;--g:.45}
.found li:nth-child(3):is(:hover,.is-live) .mentions .n1{animation:m-show .6s .7s both}
.found li:nth-child(3):is(:hover,.is-live) .mentions .n2{animation:m-show .6s 1.3s both}
.found li:nth-child(3):is(:hover,.is-live) .mentions .n3{animation:m-show .6s 1.9s both}
.found li:nth-child(3):is(:hover,.is-live) .mentions .n4{animation:m-last .4s 2.5s both}
.found li:nth-child(3):is(:hover,.is-live) .mentions .name{stroke:#5b45d8;transition:stroke .4s 2.4s}
@media (prefers-reduced-motion:reduce){
  .found li:nth-child(3):is(:hover,.is-live) .mentions *{animation-delay:0s!important}
}

/* ---------- round 13: growth keeps going after step 4 ---------- */
.route-line{overflow:visible}
.route-line .rl-grow{fill:none;stroke:url(#aur-grow);stroke-width:5;stroke-linecap:round;stroke-dasharray:0 2;stroke-dashoffset:0;opacity:0;transition:stroke-dasharray .8s var(--out),opacity .4s}
.route:has(li:nth-child(4):hover) .route-line .rl-grow,.route:has(li:nth-child(4).is-live) .route-line .rl-grow{opacity:1;stroke-dasharray:1 2;transition:stroke-dasharray 9s cubic-bezier(.2,.4,.5,1),opacity .4s}
.route:has(li:nth-child(4):hover) .rl-hi,.route:has(li:nth-child(4).is-live) .rl-hi{stroke-dashoffset:.22}

/* ---------- round 13: flutter in place (hero and contact) ---------- */
.flutter-cv{position:absolute;z-index:3;pointer-events:none}
.fluttering .art-full,.fluttering .shut{visibility:hidden}
.hero.fluttering .branch-layer{display:block!important;-webkit-mask:none!important;mask:none!important}
.contact-art .c-branch{display:none}
.contact-art.fluttering .c-branch{display:block}

/* ---------- round 13: the hero fills the first screen, art and words centred in it ---------- */
@media (min-width:901px) and (min-aspect-ratio:1/1){
  .hero{min-height:100svh;--artTop:max(64px,calc((100svh - var(--artH)) / 2 + 36px))}
  .hero-copy{min-height:100svh;padding-top:96px;padding-bottom:48px}
  .art{top:var(--artTop)}
  .branch-ext{top:calc(var(--artTop) + var(--artH) * .85354);width:calc(var(--artW) * .46111)}
  /* the painting is never taller than the space under the header */
  .hero{--artW:clamp(340px,min(calc((100svh - 110px) / 1.1),calc(39.5vw - 7px)),1000px)}
}
/* the painting's bottom melts into the paper under the branch */
.art{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 95%,transparent 100%),linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 95%,transparent 100%),linear-gradient(90deg,#000 0,#000 92%,transparent 100%)}

/* ---------- the day and night button: a small round moon, not a switch ---------- */
.theme-btn{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(28,26,23,.3);transition:box-shadow .3s,color .3s}
.theme-btn:hover,.theme-btn:focus-visible{color:#3d2fa8;box-shadow:inset 0 0 0 1px #6d52f5,0 0 10px rgba(138,92,255,.3)}
.nav .theme-btn{min-height:0;padding:0}
@media (max-width:560px){.nav{gap:10px}}

/* ---------- round 13, second pass ---------- */
.nav a.theme-btn{display:inline-grid}
/* hover: his bloom deepens, nothing is displaced */
.art .bloom{left:3%;width:94%;top:9%}
.js-motion .hero.bloom-on .art:hover .bloom,.hero .art:hover .bloom{opacity:.72;transition:opacity 1.2s ease}
/* more room: a larger painting and headline, the words in a wide column, even margins */
@media (min-width:901px) and (min-aspect-ratio:1/1){
  .hero{--artW:clamp(340px,min(calc((100svh - 110px) / 1.1),calc(41vw - 7px)),1040px)}
  .hero-copy{padding-left:calc(var(--artW) * 1.19 + 24px);padding-right:var(--gut);max-width:none}
  .hero-copy > *{max-width:640px}
  .hero h1{font-size:clamp(2.6rem,.8rem + 3.3vw,4.4rem)}
  .hero .sub{font-size:clamp(1.05rem,.8rem + .5vw,1.28rem);max-width:34em}
}
/* back to top: bottom left, a small round paper button */
.to-top{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--paper-2);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(28,26,23,.28),0 6px 16px -10px rgba(28,26,23,.5);text-decoration:none;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s,transform .45s var(--out),box-shadow .3s}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover,.to-top:focus-visible{outline:none;box-shadow:0 0 0 1.5px transparent;background:linear-gradient(var(--paper-2),var(--paper-2)) padding-box,linear-gradient(90deg,#36d7ff,#1a9ee6 30%,#6d52f5 55%,#b44fd6 80%,#e062e6) border-box;border:1.5px solid transparent}
body.locked .to-top{opacity:0}
/* the moon button never takes the nav's underline, and its crescent sits optically centred */
.nav a.theme-btn::after,.nav a.theme-btn:hover::after,.nav a.theme-btn.is-here::after{content:none;display:none}
.theme-btn{place-items:center;padding:0;line-height:0}
.theme-btn svg{display:block;transform:translate(.5px,.5px)}
/* moon: an ink crescent in a hairline circle; on hover or focus a deep aurora fill and a white moon */
.theme-btn:hover,.theme-btn:focus-visible{outline:none;color:#fff;background:linear-gradient(135deg,#1b2a6b,#3f2d8f 50%,#6a2a7a);box-shadow:0 0 0 1px rgba(63,45,143,.6),0 0 12px rgba(109,82,245,.35)}
.theme-btn:hover svg,.theme-btn:focus-visible svg{filter:drop-shadow(0 0 3px rgba(255,255,255,.7))}
@media (max-width:560px){
  .menu-btn .mb-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .menu-btn{padding:0 4px 0 6px}
  .masthead .wrap{gap:12px}
}
.nav a.theme-btn{padding:0;min-height:0}
.theme-btn svg{transform:translate(-.4px,.2px)}
.nav a.theme-btn{color:var(--ink)}
.nav a.theme-btn:hover,.nav a.theme-btn:focus-visible{color:#fff}
/* moon, final: at rest an ink crescent in a hairline circle on the paper; on hover or focus a deep
   aurora disc, a gentle glow and a white moon, easing in and out over 0.3 s */
.theme-btn,.nav a.theme-btn{color:var(--ink);background:linear-gradient(135deg,rgba(27,42,107,0),rgba(63,45,143,0) 50%,rgba(106,42,122,0));box-shadow:inset 0 0 0 1px rgba(28,26,23,.3);transition:color .3s ease,background-color .3s ease,box-shadow .3s ease,opacity .3s}
.theme-btn::before{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,#1b2a6b,#3f2d8f 50%,#6a2a7a);opacity:0;transition:opacity .3s ease}
.theme-btn{position:relative;isolation:isolate}
.theme-btn svg{position:relative;z-index:1}
.theme-btn:hover::before,.theme-btn:focus-visible::before{opacity:1}
.theme-btn:hover,.theme-btn:focus-visible,.nav a.theme-btn:hover,.nav a.theme-btn:focus-visible{color:#fff;background:none;box-shadow:0 0 0 1px rgba(63,45,143,.55),0 0 12px rgba(109,82,245,.35)}
/* clicking Tsuku-chan shows no ring; keyboard users still get one */
[data-blink][data-pointer]:focus,[data-blink][data-pointer]:focus-visible{outline:none}

/* =====================================================================
   Round 14: a bigger Tsuku-chan nearer the left edge, a shorter and thicker branch run
   ===================================================================== */
@media (min-width:901px) and (min-aspect-ratio:1/1){
  .hero{
    --artW:clamp(360px,min(calc((100svh - 90px) / .76),calc(45vw - 7px)),1100px);--artH:calc(var(--artW) * 1.1);
    /* he brakes a little right of the perch (flareShift .07), so the painting can sit this close to the edge */
    --artLeft:calc(var(--artW) * .098 + 28px);
    /* centre the owl and branch (0.25 to 0.96 of the painting) in the space under the header */
    --artTop:calc(90px + (100svh - 90px - var(--artH) * .71) / 2 - var(--artH) * .25)}
  .art{left:var(--artLeft);top:var(--artTop)}
  .hero-copy{padding-left:calc(var(--artLeft) + var(--artW) * .98 + 16px)}
  .branch-ext{left:calc(var(--artLeft) - var(--artW) * .42222);top:calc(var(--artTop) + var(--artH) * .85354);width:calc(var(--artW) * .47222)}
}

/* rapid taps on Tsuku-chan must not select the painting */
[data-blink],[data-blink] *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}

/* phones: Get a quote lives in a solid strip docked to the bottom (the section judge's pattern). Nothing is ever half-covered:
   the strip is opaque, it slides away while you read down, and comes back when you scroll up or pause. */
@media (max-width:760px){
  .sticky-quote{left:16px;right:16px;bottom:calc(10px + env(safe-area-inset-bottom));justify-content:center;min-height:48px;padding:0 20px;box-shadow:none;transform:translateY(calc(100% + 30px))}
  .sticky-quote::before{content:"";position:absolute;z-index:-1;left:-16px;right:-16px;top:-10px;bottom:calc(-10px - env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid rgba(28,26,23,.12)}
  .sticky-quote.on{transform:none}
  .to-top{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (max-width:760px){.sticky-quote{background:transparent}.sticky-quote::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:99px;background:var(--ink)}}

/* phones: a smaller owl, clear space under the branch, smaller type, so the headline, the sub-line and both buttons
   fit on the first screen (Vish, 27 Sep: the text overlapped the branch and was too big) */
@media (max-width:560px){
  .hero{--artH:min(38svh,400px);--artW:calc(var(--artH) * .90909)}
  .art{margin-bottom:calc(var(--artH) * .02)}
  .hero-copy{padding-bottom:32px}
  .hero .eyebrow{font-size:.68rem;letter-spacing:.14em;margin-bottom:10px}
  .hero h1{font-size:clamp(1.85rem,7.6vw,2.2rem);line-height:1.08}
  .hero .sub{font-size:.95rem;line-height:1.5;margin-top:12px}
  .hero .cta{margin-top:18px;gap:10px 20px}
  .hero .cta .btn{min-height:46px}
}

/* phones, 27 Sep pass: no reserved space at the end, tighter contact and footer */
@media (max-width:760px){
  body{padding-bottom:0}
  .foot{margin-bottom:0;padding-bottom:32px}
  .contact{padding-bottom:24px}
}

/* phones: the packages become a swipeable row of paper cards, Signature first, the next card peeking in */
.pk-hint{display:none}
@media (max-width:640px){
  .pk-hint{display:block;margin-top:14px;font-size:.82rem;color:var(--ink-3)}
  .packs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:18px calc(var(--gut) * -1) 0;padding:8px var(--gut) 18px;scrollbar-width:none;align-items:stretch}
  .packs::-webkit-scrollbar{display:none}
  .packs>.pack{flex:0 0 84%;scroll-snap-align:center;border:1px solid var(--rule);border-top:1px solid var(--rule);border-radius:14px;padding:24px 20px;background:var(--paper);margin:0}
  .packs>.pack.sig{order:-1;background:var(--ink);border-color:transparent}
}

/* phones: Tsuku-chan leads the contact section, centred, then the words and buttons, with less air between them */
@media (max-width:640px){
  .contact-grid{grid-template-areas:"note" "art" "body"}
  .contact-art{justify-self:center;max-width:min(66vw,260px);margin:4px auto 0}
  .contact .sec-head{margin-top:0}
  .contact .ways{margin-top:20px;gap:12px 24px}
  .contact .addr{margin-top:16px}
}

/* phones: a tighter quote intro, and the contact buttons as two matching full-width buttons */
@media (max-width:640px){
  .quote .sec-head{row-gap:10px}
  .q-intro .lede{margin-top:6px}
  .alt{margin-top:12px}
  .q-intro{margin-bottom:16px}
  .contact .ways{flex-direction:column;align-items:stretch;gap:10px}
  .contact .ways > a{justify-content:center;width:100%;min-height:52px;border-radius:99px}
  .contact .ways > a.line{box-shadow:inset 0 0 0 1.5px var(--ink);padding:0 20px}
  .contact .ways > a.line::after{display:none}
}
@media (max-width:640px){.quote > .wrap{row-gap:0}.contact .ways > a.line::before{display:none}}
/* phones: a bigger Tsuku-chan fills the space on the right and below, while the buttons still fit the first screen */
@media (max-width:560px){.hero{--artH:min(calc(100svh - 385px),560px,calc(100vw * 1.25))}.hero{--artW:calc(var(--artH) * .90909)}}
/* phones, contact: the words, buttons and "Based in Dubai" first; Tsuku-chan at the very bottom, centred */
@media (max-width:640px){
  .contact-grid{grid-template-areas:"note" "body" "art"}
  .contact-art{justify-self:center;max-width:min(66vw,260px);margin:28px auto 0}
}

.pk-nav{display:none}
/* phones: one whole package card at a time, in the order Signature, Evidence, Essential, with small arrows to move between them */
@media (max-width:640px){
  .packs{gap:calc(var(--gut) * 2);padding-left:var(--gut);padding-right:var(--gut);scroll-padding:0 var(--gut)}
  .packs>.pack{flex:0 0 100%;scroll-snap-align:center}
  .packs>.pack:nth-child(3){order:1}
  .packs>.pack:nth-child(2){order:2}
  .packs>.pack:nth-child(1){order:3}
  .pk-hint{display:none}
  .pk-nav{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:4px;font-size:.85rem}
  .pk-nav button{width:36px;height:36px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;opacity:.9}
  .pk-nav button:disabled{opacity:.25;cursor:default}
  .pk-nav svg{width:16px;height:16px}
}