/* TOC Works site. Sketch to finished. Logo navy + paper white. */
:root{
  --paper:#FAF8F3; --ink:#1B2433; --brand:#1E4E8C; --brand-d:#0F2A4F; --pencil:#5B6A7F;
  --mark:#F2C14E; --line:rgba(30,78,140,.22); --sand:#F0EBE0; --wash:#EEF3FA;
  --hh:72px; --pad:5vw; --lw:3;
  --mincho:'Shippori Mincho B1','Hiragino Mincho ProN','Yu Mincho',serif;
  --gothic:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --serif:'Source Serif 4','Times New Roman',serif;
  --hand:'Klee One','Yu Kyokasho','Hiragino Maru Gothic ProN',serif;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;line-break:strict;word-break:auto-phrase;scroll-padding-top:calc(var(--hh) + 8px)}
body{background:var(--paper);color:var(--ink);font-family:var(--gothic);font-weight:500;font-size:16px;line-height:1.9;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2{font-family:var(--mincho);font-weight:800;text-wrap:balance}
.nb{white-space:nowrap}
p{text-wrap:pretty}
ul,ol{list-style:none}
html[data-motion="on"]{scroll-behavior:smooth}

/* ---------- button ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--brand);color:var(--paper);font-weight:700;letter-spacing:.05em;text-decoration:none;padding:16px 28px;border-radius:3px;white-space:nowrap;transition:transform .25s,background .25s}
.btn .ar{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .25s}
.btn:hover{background:var(--brand-d);transform:translateY(-1px)}
.btn:hover .ar{transform:translateX(4px)}
.btn--big{font-size:clamp(16px,1.3vw,19px);padding:clamp(16px,1.5vw,22px) clamp(26px,2.4vw,38px)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--mark);outline-offset:3px}

/* ---------- header (same on every page; the consult button is always pressable) ---------- */
.hd{position:sticky;top:0;z-index:60;height:var(--hh);display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:0 var(--pad);background:var(--paper);border-bottom:1px solid var(--line)}
.hd__logo img{height:26px;width:auto}
.hd__nav{justify-self:end;margin-right:34px}
.hd__nav ul,.hd__chips ul,.ft__n ul{display:flex}
.hd__nav ul{gap:34px}
.hd__nav a{font-weight:700;font-size:15px;text-decoration:none;letter-spacing:.06em;padding:6px 0;border-bottom:2px solid transparent}
.hd__nav a:hover,.hd__nav a[aria-current]{border-color:var(--brand);color:var(--brand)}
.hd__cta .btn{padding:12px 22px;font-size:15px}
.hd__chips{display:none}

/* ---------- home hero (first screen) : copy + a looping scene ---------- */
.hero{position:relative;min-height:calc(100svh - var(--hh));display:grid;align-items:center;overflow-x:clip}
.hero__in{display:grid;grid-template-columns:minmax(0,30vw) minmax(0,1fr);gap:2.4vw;align-items:center;padding:clamp(16px,2.4vh,32px) 2.6vw clamp(16px,2.4vh,32px) var(--pad)}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,2.6vh,30px);position:relative;z-index:2}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(56px,9vw,156px);line-height:.98;letter-spacing:-.025em;color:#2A3446;text-wrap:nowrap}
.hero h1 .w{display:block;width:fit-content}
.hero h1 b{font-weight:700;color:var(--brand)}
.hero h1 .r{display:inline-block}
.eq{display:flex;align-items:center;gap:14px}
.eq svg{width:30px;height:auto;fill:none;stroke:var(--brand);stroke-width:2.6;stroke-linecap:round}
.eq img{height:clamp(26px,2.6vw,38px);width:auto}
.hero__lead{font-size:clamp(16px,1.45vw,21px);line-height:1.8;font-weight:700;color:var(--ink);max-width:24em}
.hero__btn .btn{font-size:clamp(16px,1.3vw,19px);padding:clamp(16px,1.5vw,22px) clamp(26px,2.4vw,38px)}
.cue{position:absolute;left:0;bottom:-6vh;width:18px;height:42px;fill:none;stroke:var(--brand);stroke-width:1.6;opacity:.7;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
html[data-motion="on"] .hero h1 .r{animation:rest 1.1s cubic-bezier(.65,0,.35,1) .9s both}
html[data-motion="on"] .hero .eq{animation:rise .9s 1.9s ease both}
html[data-motion="on"] .hero__lead,html[data-motion="on"] .hero__btn{animation:rise .9s 2.1s ease both}
@keyframes rise{from{opacity:0;translate:0 14px}}
@keyframes rest{from{clip-path:inset(-.2em 100% -.2em 0);opacity:0}to{clip-path:inset(-.2em -.1em -.2em 0);opacity:1}}

/* the loop : talk -> steam -> bubbles -> frame -> sketch -> colour -> photo -> stamp.
   --t (0..1) is driven by script.js; with no motion it stays on the finished state */
.loop{--t:.94;--sw:3;--lw:5.4;--mx:0;--my:0;position:relative;width:104%;margin-left:-4%;aspect-ratio:1000/700;justify-self:start;pointer-events:none}
.loop::before{content:"";position:absolute;inset:-5% -4% -5% 8%;background-image:radial-gradient(rgba(30,78,140,.22) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 58% 50%,#000 35%,transparent 100%);mask-image:radial-gradient(ellipse 60% 55% at 58% 50%,#000 35%,transparent 100%)}
.loop svg{position:relative;width:100%;height:100%;overflow:visible;display:block}
.loop .st{fill:none;stroke:var(--brand);stroke-width:var(--sw);stroke-linecap:round;stroke-linejoin:round}
.loop .dr{stroke-dasharray:1 2}
.scn{opacity:min(clamp(0,calc(var(--t)/.025),1),clamp(0,calc((1 - var(--t))/.035),1))}
.lay-back{translate:calc(var(--mx)*-16px) calc(var(--my)*-12px)}
.lay-mid{translate:calc(var(--mx)*-6px) calc(var(--my)*-4px)}
.lay-front{translate:calc(var(--mx)*12px) calc(var(--my)*9px)}

/* back layer : slow rings and drifting marks */
.ring{fill:none;stroke:var(--brand);stroke-width:1.6;opacity:.2}
.ring.dash{stroke-dasharray:4 9;animation:spin 70s linear infinite;transform-origin:130px 590px}
.ring.dash2{stroke-dasharray:2 7;animation:spin 90s linear infinite reverse;transform-origin:900px 90px}
.ring.pulse{animation:breathe 7s ease-in-out infinite;transform-origin:905px 90px}
.pl{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;opacity:.3;animation:drift 9s ease-in-out infinite alternate}
.dt{fill:var(--mark);opacity:.8;animation:drift 7s ease-in-out infinite alternate}
@keyframes spin{to{rotate:360deg}}
@keyframes breathe{50%{scale:1.12;opacity:.34}}
@keyframes drift{to{translate:10px -14px}}

/* cup + steam */
.cup{--qc:clamp(0,calc((var(--t) - .02)/.11),1);opacity:calc(1 - clamp(0,calc((var(--t) - .34)/.05),1))}
.cup .st{stroke-dashoffset:calc(1 - var(--qc))}
.cup .cf{fill:var(--mark);stroke:none;opacity:calc(.6*var(--qc))}
.steam .st{stroke-dasharray:.2 .16;stroke-dashoffset:calc(var(--t)*-4);stroke-width:calc(var(--sw)*.9);opacity:calc(clamp(0,calc((var(--t) - .07)/.05),1)*(1 - clamp(0,calc((var(--t) - .17)/.08),1)))}

/* bubbles */
.bub{--qb:clamp(0,calc((var(--t) - var(--a))/.07),1);--qv:clamp(0,calc((var(--t) - .35)/.07),1);
  translate:calc((1 - var(--qb))*var(--dx) + var(--qv)*var(--cx)) calc((1 - var(--qb))*var(--dy) + var(--qv)*var(--cy));
  scale:calc((.15 + .85*var(--qb))*(1 - .55*var(--qv)));opacity:calc(var(--qb)*(1 - var(--qv)))}
.bub .fl{animation:bob 4s ease-in-out infinite alternate;animation-delay:var(--bd,0s)}
@keyframes bob{to{translate:0 -7px}}
.bub .sh{fill:#fff;fill-opacity:.94;stroke-dasharray:1 2;stroke-dashoffset:calc(1 - var(--qb))}
.bub .tx{stroke-width:calc(var(--sw)*2.2);opacity:.32;stroke-dasharray:1 2;stroke-dashoffset:calc(1 - clamp(0,calc((var(--t) - var(--a) - .05)/.04),1))}
.bub .dots circle{fill:var(--brand);stroke:none;opacity:calc(clamp(0,calc((var(--t) - var(--a))/.02),1)*(1 - clamp(0,calc((var(--t) - var(--a) - .055)/.012),1)));animation:dotb 1s ease-in-out infinite}
.bub .dots circle:nth-child(2){animation-delay:.15s}
.bub .dots circle:nth-child(3){animation-delay:.3s}
@keyframes dotb{50%{translate:0 -6px}}
.flow .pulse{fill:none;stroke:var(--mark);stroke-width:calc(var(--sw)*1.7);stroke-linecap:round;stroke-dasharray:.28 2;stroke-dashoffset:calc(.28 - 1.28*clamp(0,calc((var(--t) - .35)/.09),1))}

/* browser frame + site sketch */
.frm .st{stroke-dasharray:1 2;stroke-dashoffset:calc(1 - clamp(0,calc((var(--t) - .40)/.07),1))}
.frm .bar,.frm .dot,.frm .pill{stroke-dasharray:1 2;stroke-dashoffset:calc(1 - clamp(0,calc((var(--t) - .44)/.04),1))}
.frm .panel{fill:#F3F6FB;stroke:none;opacity:clamp(0,calc((var(--t) - .43)/.04),1)}
.frm .urlt{font-family:var(--gothic);font-size:11px;fill:var(--pencil);letter-spacing:.04em;opacity:clamp(0,calc((var(--t) - .84)/.04),1)}
.site .ln{stroke-width:var(--lw);stroke-dashoffset:calc(1 - clamp(0,calc((var(--t) - .45 - var(--i)*.0034)/.045),1))}
.site .rg{opacity:calc(1 - .85*clamp(0,calc((var(--t) - .80)/.06),1))}
.site .gd{opacity:calc(.32*clamp(0,calc((var(--t) - .43)/.05),1))}
.site .mk1{opacity:calc(.6*clamp(0,calc((var(--t) - .64)/.04),1))}
.site .col{opacity:clamp(0,calc((var(--t) - .70)/.08),1)}
.site .ph{--qp:clamp(0,calc((var(--t) - .76)/.08),1);opacity:var(--qp);translate:0 calc((1 - var(--qp))*50px)}
.phn{--qh:clamp(0,calc((var(--t) - .84)/.07),1);opacity:var(--qh);translate:0 calc((1 - var(--qh))*70px)}
.stp{--qs:clamp(0,calc((var(--t) - .90)/.045),1);opacity:var(--qs);scale:calc(1.9 - .9*var(--qs));rotate:-10deg}
.stp circle{fill:rgba(250,248,243,.94);stroke:var(--brand);stroke-width:4}
.stp text{font-family:var(--mincho);font-weight:800;font-size:30px;fill:var(--brand);text-anchor:middle;letter-spacing:.04em}

/* ---------- process (scroll-linked): sketch -> finished -> published ---------- */
.proc{
  --p:0;
  --q1:clamp(0,calc((var(--p) - .20)/.18),1);
  --q2:clamp(0,calc((var(--p) - .40)/.24),1);
  --qr:clamp(0,calc((var(--p) - .40)/.14),1);
  --q3:clamp(0,calc((var(--p) - .70)/.18),1);
  --q4:clamp(0,calc((var(--p) - .88)/.08),1);
  --lw:3;
  position:relative;height:calc(100svh - var(--hh) + 260svh);background:var(--wash);border-top:1px solid var(--line)}
.proc__pin{position:sticky;top:var(--hh);height:calc(100svh - var(--hh));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.8vh,20px);padding:0 var(--pad);overflow:clip}
.proc .bro-wrap{width:min(100%,calc((100svh - var(--hh) - 190px)*1.6),1080px)}
.bro-wrap{position:relative;margin-bottom:6%}
.bro{background:#fff;border:1.5px solid rgba(27,36,51,.5);border-radius:10px;overflow:hidden;box-shadow:0 40px 70px -40px rgba(15,42,79,.5)}
.bro__bar{height:clamp(24px,2.4vw,34px);display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1.5px solid rgba(27,36,51,.25);background:#fff}
.bro__bar i{width:8px;height:8px;border-radius:50%;border:1.3px solid var(--pencil)}
.url{margin-left:10px;flex:0 1 52%;height:16px;border-radius:8px;background:#eef1f6;font-family:var(--gothic);font-size:10.5px;line-height:16px;padding:0 10px;color:var(--pencil);letter-spacing:.04em;overflow:hidden;white-space:nowrap}
.bro__body{position:relative;aspect-ratio:1440/900;background-color:var(--wash);background-image:radial-gradient(rgba(30,78,140,.22) 1px,transparent 1.3px);background-size:18px 18px;overflow:hidden}
.bro__body>div,.L-rough svg,.L-color svg{position:absolute;inset:0;width:100%;height:100%}
.L-photo img{width:100%;height:100%;object-fit:cover}
.proc .L-color{opacity:var(--q1)}
.proc .L-photo{clip-path:inset(0 0 calc((1 - var(--q2))*100%) 0)}
.scan{position:absolute;left:0;right:0;top:calc(var(--q2)*100% - 3px);height:3px;background:var(--mark);opacity:min(1,calc(4*var(--q2)*(1 - var(--q2))*1.2));display:none}
.proc .scan{display:block}
.proc .url{opacity:var(--q3)}

/* pencil lines (shared) */
.ln{fill:none;stroke:var(--brand);stroke-width:var(--lw);stroke-linejoin:round;stroke-linecap:butt;stroke-dasharray:1 2;stroke-dashoffset:0;opacity:.88}
.ln.th{stroke-width:calc(var(--lw)*3);opacity:.34}
.ln.th2{stroke-width:calc(var(--lw)*8);opacity:.26;stroke-linecap:round}
.ln.fn{stroke-width:calc(var(--lw)*.55);opacity:.4}
.gd{fill:none;stroke:var(--brand);stroke-width:calc(var(--lw)*.4);stroke-dasharray:.008 .012;opacity:.32}
.mk1{fill:var(--mark);opacity:.6;mix-blend-mode:multiply}
/* in the process section the lines are drawn by scroll */
.proc .ln{stroke-dashoffset:calc(1 - clamp(0,calc((var(--p) - .02 - var(--i)*.0035)/.07),1))}
.proc .gd{opacity:calc(.32*clamp(0,calc((var(--p) - .02)/.08),1))}
.proc .mk1{opacity:calc(.6*clamp(0,calc((var(--p) - .26)/.06),1))}
.proc .L-rough{opacity:calc(1 - var(--qr))}

.phone{position:absolute;right:-3%;bottom:-11%;width:21%;aspect-ratio:390/844;border:clamp(3px,.45vw,6px) solid #1B2230;border-radius:clamp(12px,1.9vw,26px);overflow:hidden;background:#1B2230;box-shadow:0 30px 50px -18px rgba(15,42,79,.55)}
.phone img{width:100%;height:100%;object-fit:cover}
.proc .phone{opacity:var(--q3);transform:translateY(calc((1 - var(--q3))*40%))}
.stamp{position:absolute;left:1%;bottom:-17%;width:clamp(48px,5.2vw,76px);aspect-ratio:1;border:3px solid var(--brand);border-radius:50%;background:rgba(250,248,243,.92);color:var(--brand);display:grid;place-items:center;font-family:var(--mincho);font-weight:800;font-size:clamp(15px,1.6vw,23px);letter-spacing:.04em;transform:rotate(-10deg)}
.proc .stamp{opacity:var(--q4);transform:rotate(-10deg) scale(calc(1.8 - var(--q4)*.8))}

.rail{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:2px;width:min(100%,720px)}
.rail li{font-family:var(--hand);font-weight:600;font-size:clamp(15px,1.3vw,19px);color:var(--pencil);transition:color .3s}
.rail i{display:block;height:3px;background:var(--line);margin-top:6px;overflow:hidden}
.rail b{display:block;height:100%;background:var(--brand);transform-origin:left;transform:scaleX(var(--f,0))}
.rail li:nth-child(1){--f:clamp(0,calc(var(--p)/.3),1)}
.rail li:nth-child(2){--f:clamp(0,calc((var(--p) - .3)/.38),1)}
.rail li:nth-child(3){--f:clamp(0,calc((var(--p) - .68)/.28),1)}
.proc[data-step="1"] .rail li:nth-child(1),.proc[data-step="2"] .rail li:nth-child(2),.proc[data-step="3"] .rail li:nth-child(3){color:var(--brand)}

/* motion off (the stop button) / no JS: the scroll scene becomes three stacked stages; everything visible */
.stack3{display:none;padding:24px var(--pad) 90px;gap:60px;grid-template-columns:minmax(0,1fr);background:var(--wash)}
.s3{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;width:100%;max-width:1040px;margin:0 auto}
.s3 figcaption{font-family:var(--hand);font-weight:600;font-size:22px;color:var(--brand);border-top:2px solid var(--brand);padding-top:8px;align-self:start}
.s3 .bro-wrap{width:100%;margin:0}
.st-img{width:100%;aspect-ratio:1440/900;object-fit:cover}
.s3__b--ph{position:relative;display:flex;justify-content:center;padding:10px 0 30px}
.s3 .phone.st{position:relative;right:auto;bottom:auto;width:min(250px,60%)}
.s3 .stamp.st{left:50%;margin-left:120px;bottom:20px}
html[data-motion="off"] .proc{display:none}
html[data-motion="off"] .stack3{display:grid}
html[data-motion="off"] .cue{display:none}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important}
html:not(.js) .proc{display:none}
html:not(.js) .stack3{display:grid}
html:not(.js) .cue{display:none}

/* ---------- common blocks ---------- */
.first{background:var(--brand);color:var(--paper);padding:clamp(72px,9vw,140px) var(--pad)}
.first__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:6vw;align-items:center}
.first h2{font-size:clamp(34px,5vw,78px);line-height:1.25}
.first p{margin-top:clamp(22px,2.4vw,36px);font-size:clamp(17px,1.5vw,21px);line-height:2.05;max-width:31em}
.talk{width:100%;height:auto;fill:none;stroke:var(--paper);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.talk .dot{fill:var(--mark);stroke:none}
.ents{padding:clamp(20px,3vw,40px) var(--pad) clamp(80px,9vw,130px);background:var(--paper)}
.ent{display:grid;grid-template-columns:88px minmax(0,5fr) minmax(0,6fr);gap:0 3vw;padding:clamp(40px,4.6vw,68px) 0;border-bottom:1px solid var(--line);align-items:start}
.ent:last-child{border-bottom:0}
.ent h2{font-size:clamp(26px,3vw,46px);line-height:1.35;color:var(--brand-d)}
.ent p{font-size:clamp(15.5px,1.2vw,17.5px);line-height:2.05}
.ent p+p{margin-top:1em}
.ico{width:56px;height:56px;fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lk{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font-weight:700;color:var(--brand);text-decoration:none;border-bottom:2px solid var(--brand);padding-bottom:3px;transition:gap .25s}
.lk .ar{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.lk:hover{gap:16px}

/* ---------- samples : sketch becomes finished ---------- */
.samples{background:var(--sand);padding:clamp(80px,10vw,150px) var(--pad)}
.samples__h{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:6vw;align-items:end}
.samples h2{font-size:clamp(40px,6vw,96px);line-height:1.2;color:var(--brand)}
.samples__h p{max-width:30em;font-size:clamp(15.5px,1.2vw,17.5px);line-height:2.05;padding-bottom:1.2vw}
.grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,4.6vw,72px) 3.4vw;margin-top:clamp(44px,5vw,80px)}
.smp{display:block;text-decoration:none;--r:1}
.smp:nth-child(even){margin-top:clamp(0px,4.4vw,64px)}
.smp__fr{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:var(--paper);box-shadow:0 34px 60px -32px rgba(15,42,79,.5),0 0 0 1px rgba(30,78,140,.16)}
.smp__fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.smp__co{clip-path:inset(0 0 calc((1 - var(--r))*100%) 0);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.smp__ln{position:absolute;left:0;right:0;top:calc(var(--r)*100% - 3px);height:3px;background:var(--mark);opacity:min(1,calc(4*var(--r)*(1 - var(--r))*1.2))}
.smp__n{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-family:var(--mincho);font-weight:800;font-size:clamp(19px,1.9vw,27px);color:var(--brand-d);border-bottom:1px solid var(--line);padding-bottom:14px}
.smp__n .ar{width:22px;height:22px;fill:none;stroke:var(--brand);stroke-width:2;transition:transform .25s}
@media (hover:hover){.smp:hover .smp__co{transform:scale(1.03)}.smp:hover .ar{transform:translateX(6px)}}
html[data-motion="on"] .smp{--r:0}

/* ---------- contact (home) ---------- */
.contact{background:var(--brand-d);color:var(--paper);padding:clamp(90px,12vw,180px) var(--pad) clamp(80px,9vw,130px)}
.contact__in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6vw;align-items:end}
.contact h2{position:relative;display:inline-block;white-space:nowrap;font-size:clamp(72px,12vw,190px);line-height:1}
.ul{position:absolute;left:0;bottom:-.06em;width:100%;height:.12em;fill:none;stroke:var(--mark);stroke-width:5;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:0}
.contact__b p{font-size:clamp(17px,1.5vw,21px);line-height:2.05;max-width:30em;margin-bottom:34px}
.contact .btn,.cta .btn,.ft .btn{background:var(--mark);color:var(--ink)}
.contact .btn:hover,.cta .btn:hover,.ft .btn:hover{background:#ffd36e}

/* ---------- footer (same on every page) ---------- */
.ft{background:var(--brand-d);color:var(--paper);border-top:1px solid rgba(250,248,243,.2);padding:clamp(36px,4vw,56px) var(--pad) 28px}
.ft__top{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,4vw,64px);align-items:center}
.ft__logo img{height:clamp(24px,2.2vw,32px);width:auto}
.ft__n ul{gap:clamp(18px,2.4vw,36px);flex-wrap:wrap}
.ft__n a{font-weight:700;font-size:15px;text-decoration:none;letter-spacing:.06em;padding:4px 0;border-bottom:2px solid transparent}
.ft__n a:hover,.ft__n a[aria-current]{color:var(--mark);border-color:var(--mark)}
.ft .btn{padding:14px 24px;font-size:15px}
.ft__bt{margin-top:30px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ft__c{font-size:13px;opacity:.7;letter-spacing:.06em}
.ft__pv{font-size:13px;letter-spacing:.06em;color:var(--paper);opacity:.85;text-underline-offset:3px}
.ft__pv:hover,.ft__pv[aria-current]{color:var(--mark);opacity:1}

/* ---------- reveal & draw (only with motion on) ---------- */
html[data-motion="on"] .rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
html[data-motion="on"] .rv.in{opacity:1;transform:none}
html[data-motion="on"] .draw path,html[data-motion="on"] .draw line,html[data-motion="on"] .draw circle.dr,html[data-motion="on"] .draw rect.dr{stroke-dasharray:1 2;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1) .25s}
html[data-motion="on"] .rv.in .draw path,html[data-motion="on"] .rv.in .draw line,html[data-motion="on"] .rv.in .draw circle.dr,html[data-motion="on"] .rv.in .draw rect.dr{stroke-dashoffset:0}
html[data-motion="on"] .ul{stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .6s}
html[data-motion="on"] .rv.in .ul{stroke-dashoffset:0}
html[data-motion="on"] .talk .dot{opacity:0;transition:opacity .6s 1.4s}
html[data-motion="on"] .rv.in .talk .dot{opacity:1}
.draw path,.draw line{stroke-dasharray:1 2}

/* ---------- sub pages ---------- */
.ph{padding:clamp(48px,6vw,96px) var(--pad) clamp(44px,5vw,80px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:5vw;align-items:center;border-bottom:1px solid var(--line);background:var(--paper)}
.ph h1{font-size:clamp(40px,5.4vw,88px);line-height:1.15;color:var(--brand-d)}
.ph__lead{margin-top:clamp(22px,2.4vw,34px);font-size:clamp(16px,1.35vw,19.5px);line-height:2.05;max-width:33em}
.ph__art{min-width:0}
.ph__art .art{width:100%;height:auto;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sec{padding:clamp(64px,8vw,120px) var(--pad)}
.sec--wash{background:var(--wash)}
.sec--sand{background:var(--sand)}
.sec__h{font-size:clamp(28px,3.6vw,56px);line-height:1.3;color:var(--brand-d)}
.sec__p{margin-top:22px;font-size:clamp(15.5px,1.2vw,17.5px);line-height:2.05;max-width:34em}

/* step list with big numerals */
.flow{counter-reset:s;margin-top:clamp(28px,3.4vw,52px)}
.flow>li{counter-increment:s;display:grid;grid-template-columns:clamp(60px,7vw,110px) minmax(0,1fr) minmax(0,220px);gap:0 3vw;padding:clamp(28px,3vw,44px) 0;border-top:1px solid var(--line);align-items:center}
.flow>li:last-child{border-bottom:1px solid var(--line)}
.flow>li::before{content:counter(s);font-family:var(--serif);font-weight:700;font-size:clamp(44px,5.4vw,84px);line-height:1;color:var(--brand)}
.st__t{display:block;font-family:var(--mincho);font-weight:800;font-size:clamp(22px,2.3vw,34px);line-height:1.4;color:var(--brand-d);margin-bottom:8px}
.st__b{display:block;font-size:clamp(15.5px,1.2vw,17.5px);line-height:2.05;max-width:36em}
.flow .art{width:100%;max-width:200px;height:auto;justify-self:end;fill:none;stroke:var(--brand);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.flow--s>li{grid-template-columns:clamp(60px,7vw,110px) minmax(0,1fr)}
.flow--s .st__t{margin-bottom:0;font-size:clamp(18px,1.7vw,24px);line-height:1.7}

/* price band */
.price{background:var(--brand);color:var(--paper);padding:clamp(64px,8vw,120px) var(--pad)}
.price__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6vw;align-items:start}
.price h2{font-size:clamp(48px,7vw,112px);line-height:1.1}
.price p{font-size:clamp(16px,1.4vw,20px);line-height:2.1;max-width:34em}
.big{font-family:var(--mincho);font-weight:800;font-size:1.9em;line-height:1.2;color:var(--mark);display:inline-block;margin:.1em 0;white-space:nowrap}
.big .bp{font-family:var(--gothic);font-weight:500;font-size:.5em;color:var(--paper);margin-left:.08em}
.price__b p+p{margin-top:1.2em}
.pages5{display:flex;gap:clamp(8px,1vw,14px);align-items:flex-end;margin-top:clamp(28px,3vw,44px)}
.pages5 svg{fill:none;stroke:var(--paper);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;height:auto}
.pages5 .p0{width:clamp(70px,8vw,120px)}
.pages5 .p1{width:clamp(44px,5vw,76px);opacity:.85}

/* automation list */
.can{margin-top:clamp(28px,3.4vw,52px)}
.can li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 clamp(16px,2.4vw,36px);align-items:center;padding:22px 0;border-top:1px solid var(--line);font-size:clamp(17px,1.5vw,21px);line-height:1.8;font-weight:700}
.can li:last-child{border-bottom:1px solid var(--line)}
.can .ico{width:56px;height:56px}
.goal{background:var(--brand);color:var(--paper);padding:clamp(64px,8vw,120px) var(--pad)}
.goal__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:6vw;align-items:center}
.goal h2{font-size:clamp(34px,5vw,78px);line-height:1.25}
.goal p{margin-top:clamp(20px,2.2vw,32px);font-size:clamp(17px,1.5vw,21px);line-height:2.05;max-width:30em}
.goal svg{width:100%;height:auto;fill:none;stroke:var(--paper);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.goal svg .dot{fill:var(--mark);stroke:none}

/* closing band on sub pages */
.cta{background:var(--brand-d);color:var(--paper);padding:clamp(64px,8vw,120px) var(--pad)}
.cta__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:6vw;align-items:center}
.cta h2{font-size:clamp(34px,5vw,78px);line-height:1.25}
.cta p{margin-top:clamp(18px,2vw,28px);font-size:clamp(16px,1.4vw,20px);line-height:2.05;max-width:28em}
.cta__b{justify-self:start}
.cta--solo .cta__in{grid-template-columns:minmax(0,1fr)}

/* name equation (contact) */
.nameeq{display:flex;flex-wrap:wrap;align-items:center;gap:18px clamp(18px,3vw,40px)}
.nameeq__t{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.6vw,56px);line-height:1.05;letter-spacing:-.02em;color:#2A3446}
.nameeq__t span{display:block}
.nameeq__t b{color:var(--brand);font-weight:700}
.nameeq svg{width:34px;fill:none;stroke:var(--brand);stroke-width:2.6;stroke-linecap:round}
.nameeq img{height:clamp(30px,3.4vw,50px);width:auto}

/* sample list page rows */
.srows{padding:clamp(48px,6vw,96px) var(--pad) clamp(72px,9vw,130px);background:var(--sand);display:grid;gap:clamp(56px,7vw,110px)}
.srow{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3.4fr);gap:4vw;align-items:end;text-decoration:none;--r:1}
.srow:nth-child(even){grid-template-columns:minmax(0,3.4fr) minmax(0,8fr)}
.srow:nth-child(even) .srow__fr{order:2}
.srow__fr{position:relative}
.srow__sc{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:var(--paper);box-shadow:0 40px 70px -36px rgba(15,42,79,.55),0 0 0 1px rgba(30,78,140,.16)}
.srow__sc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.srow__ph{position:absolute;right:-4%;bottom:-8%;width:17%;aspect-ratio:390/844;border:clamp(3px,.4vw,5px) solid #1B2230;border-radius:clamp(10px,1.6vw,22px);overflow:hidden;background:#1B2230;box-shadow:0 26px 44px -16px rgba(15,42,79,.55);opacity:clamp(0,calc((var(--r) - .6)*2.5),1);transform:translateY(calc((1 - var(--r))*30px))}
.srow:nth-child(even) .srow__ph{right:auto;left:-4%}
.srow__ph img{width:100%;height:100%;object-fit:cover}
.srow .smp__n{margin-top:0;font-size:clamp(22px,2.6vw,38px);flex-wrap:wrap;gap:12px}
.srow .smp__co{transition:transform .6s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){.srow:hover .smp__co{transform:scale(1.03)}.srow:hover .ar{transform:translateX(6px)}}
html[data-motion="on"] .srow{--r:0}

/* strip of three stages on the web page head */
.strip{--lw:7;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,.55fr);gap:clamp(6px,1vw,14px);align-items:center}
.strip .bro{border-radius:6px}
.strip .bro__bar{height:16px;padding:0 6px;gap:3px}
.strip .bro__bar i{width:5px;height:5px}
.strip .url{display:none}
.strip__a{width:clamp(14px,1.6vw,26px);fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.strip figure{min-width:0}
.strip figcaption{font-family:var(--hand);font-weight:600;font-size:clamp(13px,1.2vw,17px);color:var(--brand);margin-top:8px}
.strip .phone{position:relative;inset:auto;width:100%;right:auto;bottom:auto;opacity:1;transform:none}
.strip .L-rough{opacity:1}
.strip .bro__body>div,.strip .L-rough svg{position:absolute;inset:0;width:100%;height:100%}

/* ---------- phone / narrow ---------- */
@media (max-width:900px){
  :root{--hh:100px;--lw:5;--pad:20px}
  .hd{grid-template-columns:1fr auto;grid-template-rows:56px 44px;grid-template-areas:"logo cta" "chips chips";padding:0 var(--pad)}
  .hd__logo{grid-area:logo}.hd__cta{grid-area:cta}.hd__nav{display:none}
  .hd__logo img{height:22px}
  .hd__cta .btn{padding:10px 16px;font-size:14px;gap:8px}
  .hd__cta .ar{width:16px;height:16px}
  .hd__chips{display:block;grid-area:chips;margin:0 calc(var(--pad)*-1);border-top:1px solid var(--line)}
  .hd__chips ul{width:100%}
  .hd__chips li{flex:1}
  .hd__chips a{display:block;text-align:center;font-weight:700;font-size:14px;letter-spacing:.04em;text-decoration:none;line-height:43px;border-bottom:2px solid transparent}
  .hd__chips a[aria-current]{color:var(--brand);border-bottom-color:var(--brand)}

  .hero__in{grid-template-columns:minmax(0,1fr);gap:clamp(6px,1.4vh,14px);padding:clamp(12px,2vh,22px) var(--pad)}
  .hero__copy{gap:8px}
  .hero h1{font-size:clamp(46px,18vw,92px);line-height:1}
  .hero h1 .w:nth-child(-n+2){display:inline-block;margin-right:.22em}
  .hero h1 .w:nth-child(3){display:block}
  .eq img{height:24px}
  .eq svg{width:24px}
  .hero__lead{font-size:15px;line-height:1.7}
  .cue{display:none}
  .hero__btn{margin-top:4px;width:100%}
  .hero__btn .btn{width:100%;justify-content:center}
  .loop{width:118%;margin-left:-13%;--sw:6;--lw:11}
  .proc{--lw:5}
  .proc .bro-wrap{width:min(100%,calc((100svh - var(--hh) - 260px)*1.6));margin-bottom:7%}
  .bro{border-radius:7px}
  .bro__bar{height:20px;padding:0 8px;gap:4px}
  .bro__bar i{width:6px;height:6px}
  .url{height:12px;line-height:12px;font-size:8px;padding:0 6px}
  .phone{width:23%;right:2%;bottom:-8%}
  .stamp{border-width:2px}
  .rail li{font-size:14.5px}

  .first__in,.goal__in,.cta__in,.price__in{grid-template-columns:minmax(0,1fr);gap:36px}
  .talk{max-width:380px}
  .ent{grid-template-columns:minmax(0,1fr);gap:14px;padding:38px 0}
  .ico{width:46px;height:46px}
  .samples__h{grid-template-columns:minmax(0,1fr);gap:16px}
  .samples__h p{padding-bottom:0}
  .grid4{grid-template-columns:minmax(0,1fr);gap:40px}
  .smp:nth-child(even){margin-top:0}
  .contact__in{grid-template-columns:minmax(0,1fr);gap:34px}
  .ft__top{grid-template-columns:minmax(0,1fr);gap:22px}
  .ft__btn{justify-self:start}
  .s3{grid-template-columns:minmax(0,1fr);gap:12px}
  .stack3{gap:44px}
  .s3 .stamp.st{margin-left:70px}

  .ph{grid-template-columns:minmax(0,1fr);gap:30px}
  .flow>li{grid-template-columns:52px minmax(0,1fr);gap:0 14px;align-items:start}
  .flow>li::before{font-size:44px}
  .flow .art{grid-column:2;justify-self:start;max-width:120px;margin-top:14px}
  .can li{grid-template-columns:50px minmax(0,1fr);padding:18px 0}
  .can .ico{width:42px;height:42px}
  .srow,.srow:nth-child(even){grid-template-columns:minmax(0,1fr);gap:16px}
  .srow:nth-child(even) .srow__fr{order:0}
  .srow__ph,.srow:nth-child(even) .srow__ph{right:3%;left:auto;width:20%;bottom:-6%}
  .strip{--lw:12;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.55fr)}
  .strip__a{display:none}
}
@media (max-width:900px) and (max-height:760px){.hero__btn{display:none}}
@media (max-width:480px){.contact__b,.cta__in>div{min-width:0}.contact__b .nb{white-space:normal}}

/* privacy page: plain reading column */
.pv{max-width:46em;margin:0 auto;padding:clamp(48px,6vw,96px) var(--pad) clamp(72px,8vw,120px)}
.pv h1{font-size:clamp(30px,3.6vw,46px);line-height:1.3;color:var(--brand-d)}
.pv h2{font-size:clamp(20px,1.9vw,26px);line-height:1.5;color:var(--brand-d);margin-top:clamp(36px,4vw,56px);padding-top:18px;border-top:1px solid var(--line)}
.pv p{margin-top:14px;font-size:16px;line-height:2.05}
.pv .xl{color:var(--brand);text-underline-offset:3px;overflow-wrap:anywhere}
.pvlink{margin-top:22px;font-size:14px}
.pvlink a{color:var(--paper);opacity:.85;text-underline-offset:3px}
.pvlink a:hover{color:var(--mark);opacity:1}

/* items to write in the first mail (contact) */
.mailitems{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.mailitems li{position:relative;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.8;font-weight:700;padding:12px 14px 12px 46px;background:var(--wash);border-left:3px solid var(--brand)}
.mailitems li::before{content:"";position:absolute;left:14px;top:1.1em;width:18px;height:18px;border:2px solid var(--brand);border-radius:3px;background:linear-gradient(135deg,transparent 46%,var(--brand) 46% 56%,transparent 56%)}
@media (max-width:900px){.mailitems{grid-template-columns:minmax(0,1fr)}}

/* stop-motion button (first screen, bottom right) */
.mtg{position:absolute;right:var(--pad);bottom:10px;z-index:3;font:inherit;font-size:13px;font-weight:500;line-height:1;letter-spacing:.04em;color:var(--pencil);background:rgba(250,248,243,.88);border:1px solid var(--line);border-radius:999px;padding:8px 14px;min-height:28px;cursor:pointer}
.mtg:hover{color:var(--brand);border-color:var(--brand)}
.mtg:focus-visible{outline:3px solid var(--mark);outline-offset:3px}
html:not(.js) .mtg{display:none}

/* ====================================================================
   sub pages, round 2 (2026-10-24): pictures that move on one clock each.
   .clk gets --t (0..1) from script.js while it is on screen and motion is on.
   No --t set (stop button / no JS) = the default .9 = the finished picture.
   ==================================================================== */
.clk{--t:.9}

/* ---------- small scenes: three panels (automation list, flow, page head) ---------- */
.sc{--fo:calc(1 - clamp(0,calc((var(--t) - .9)/.08),1));
  --s1:clamp(0,calc((var(--t) - .10)/.10),1);
  --s2:clamp(0,calc((var(--t) - .22)/.09),1);
  --s3:clamp(0,calc((var(--t) - .42)/.10),1);
  --s4:clamp(0,calc((var(--t) - .54)/.09),1);
  --s5:clamp(0,calc((var(--t) - .68)/.10),1);
  display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc .a1,.sc .a2{stroke-dasharray:1 2;opacity:var(--fo)}
.sc .a1{stroke-dashoffset:calc(1 - var(--s1))}
.sc .a2{stroke-dashoffset:calc(1 - var(--s3))}
.sc .p2{opacity:calc(var(--s2)*var(--fo));translate:0 calc((1 - var(--s2))*10px)}
.sc .p3{opacity:calc(var(--s4)*var(--fo));translate:0 calc((1 - var(--s4))*10px)}
.sc .fy{fill:var(--mark);stroke:none}
.sc .hl{fill:var(--mark);fill-opacity:.55;stroke:none}
.sc .nr{opacity:clamp(0,calc((var(--t) - .30)/.06),1)}
.sc .p3 .nr{opacity:clamp(0,calc((var(--t) - .64)/.06),1)}
.sc .bd{transform-box:fill-box;transform-origin:center;scale:var(--s5)}
.sc .p2 .bd{scale:clamp(0,calc((var(--t) - .32)/.05),1)}
.sc .pk{fill:var(--mark);stroke:none;opacity:0}
.sc .pk1{translate:calc(clamp(0,calc((var(--t) - .10)/.10),1)*26px) 0;opacity:calc(clamp(0,calc((var(--t) - .09)/.01),1)*(1 - clamp(0,calc((var(--t) - .20)/.01),1)))}
.sc .pk2{translate:calc(clamp(0,calc((var(--t) - .42)/.10),1)*26px) 0;opacity:calc(clamp(0,calc((var(--t) - .41)/.01),1)*(1 - clamp(0,calc((var(--t) - .52)/.01),1)))}
.sc .bar{fill:var(--brand);fill-opacity:.22;transform-box:fill-box;transform-origin:bottom;scale:1 clamp(0,calc((var(--t) - .26 - var(--k)*.05)/.10),1)}
.sc .tt{stroke:var(--mark);stroke-width:5;stroke-dasharray:1 2;stroke-dashoffset:calc(1 - var(--s5))}
.sc .cm{stroke:var(--mark);stroke-width:4;stroke-dasharray:1 2;stroke-dashoffset:calc(1 - clamp(0,calc((var(--t) - .02)/.08),1))}
.sc .hand{rotate:calc(clamp(0,calc((var(--t) - .26)/.22),1)*360deg)}
.sc .gear{rotate:calc(var(--t)*90deg)}
.sc .pp{fill:var(--mark);fill-opacity:clamp(0,calc((var(--t) - .26 - var(--k)*.045)/.04),1)}
.sc .stp2{transform-box:fill-box;transform-origin:center;scale:calc(1.5 - .5*var(--s5));opacity:var(--s5)}
.sc .stp2 path{stroke-width:3.4}
.sc .ol{opacity:calc(1 - var(--s5))}
.sc .nw{stroke:var(--mark);stroke-width:5;opacity:var(--s5)}
.sc .ck{stroke-width:4;stroke-dasharray:1 2;stroke-dashoffset:calc(1 - clamp(0,calc((var(--t) - .34)/.10),1))}
.sc .p3 .ck{stroke-dashoffset:calc(1 - clamp(0,calc((var(--t) - .62)/.10),1))}
.sc .dk{fill:var(--wash)}
.sc .dd{--q:clamp(0,calc((var(--t) - .02 - var(--k)*.08)/.06),1);opacity:calc(var(--q)*var(--fo));translate:calc((1 - var(--q))*-14px) 0}
.sc--docs .p2{opacity:calc(var(--s2)*var(--fo))}
/* bigger drawing at the head of the automation page */
.art.sc .pk1{translate:calc(clamp(0,calc((var(--t) - .10)/.10),1)*64px) 0}
.art.sc .pk2{translate:calc(clamp(0,calc((var(--t) - .42)/.10),1)*60px) 0}
.art.sc .fy{fill:var(--mark)}

/* the automation list: text on the left, a small moving screen on the right */
.can--sc li{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:0 4vw;padding:clamp(16px,1.8vw,26px) 0}
.can__sc{min-width:0}
.flow--s>li{grid-template-columns:clamp(60px,7vw,110px) minmax(0,1fr) minmax(0,380px)}
.flow__sc{min-width:0}

/* the goal staircase: a dot climbs it */
.goalart{display:block;width:100%;height:auto;fill:none;stroke:var(--paper);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.goalart .dot{fill:var(--mark);stroke:none}
.goalart .climb{fill:var(--mark);stroke:none;
  --c1:clamp(0,calc((var(--t) - .05)/.10),1);--c2:clamp(0,calc((var(--t) - .15)/.10),1);--c3:clamp(0,calc((var(--t) - .25)/.10),1);--c4:clamp(0,calc((var(--t) - .35)/.10),1);
  --c5:clamp(0,calc((var(--t) - .45)/.10),1);--c6:clamp(0,calc((var(--t) - .55)/.10),1);--c7:clamp(0,calc((var(--t) - .65)/.10),1);--c8:clamp(0,calc((var(--t) - .75)/.10),1);
  translate:calc(96px*(var(--c2) + var(--c4) + var(--c6) + var(--c8))) calc(-44px*(var(--c1) + var(--c3) + var(--c5) + var(--c7)));
  opacity:calc(1 - clamp(0,calc((var(--t) - .9)/.05),1))}

/* ---------- web page : the four step pictures ---------- */
.flow--pic>li{grid-template-columns:clamp(60px,7vw,110px) minmax(0,1fr) minmax(0,380px)}
.flow__pic{min-width:0;padding-bottom:30px}
.fp{position:relative;--lw:8;--fo4:calc(1 - clamp(0,calc((var(--t) - .92)/.06),1))}
.fp .url{display:none}
.fp .bro{border-radius:6px}
.fp .bro__bar{height:18px;padding:0 7px;gap:4px}
.fp .bro__bar i{width:5px;height:5px}
.fp__tag{position:absolute;left:4px;top:calc(100% + 8px);font-family:var(--hand);font-weight:600;font-size:17px;line-height:1;color:var(--brand)}
.fp1 .ln{stroke-dashoffset:calc(1 - clamp(0,calc((var(--t) - .03 - var(--i)*.0042)/.06),1))}
.fp1 .mk1{opacity:calc(.6*clamp(0,calc((var(--t) - .55)/.06),1))}
.fp1 .L-rough{opacity:var(--fo4)}
.fp2{--q:clamp(0,calc((var(--t) - .08)/.5),1)}
.fp2 .L-color{clip-path:inset(0 calc((1 - var(--q))*100%) 0 0);opacity:var(--fo4)}
.fp__vs{position:absolute;top:0;bottom:0;left:calc(var(--q)*100%);width:3px;background:var(--mark);opacity:min(1,calc(4*var(--q)*(1 - var(--q))*1.2))}
.fp3{--r:clamp(0,calc((var(--t) - .08)/.55),1)}
.fp__sk,.fp__co{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fp__co{clip-path:inset(0 0 calc((1 - var(--r))*100%) 0);opacity:var(--fo4)}
.fp__ln{position:absolute;left:0;right:0;top:calc(var(--r)*100% - 3px);height:3px;background:var(--mark);opacity:min(1,calc(4*var(--r)*(1 - var(--r))*1.2))}
.fp4{margin-bottom:6px}
.fp4 .phone{width:27%;right:-2%;bottom:-16%;--q:clamp(0,calc((var(--t) - .12)/.22),1);opacity:calc(var(--q)*var(--fo4));transform:translateY(calc((1 - var(--q))*40%))}
.fp4 .stamp{left:-1%;bottom:-20%;width:clamp(44px,4vw,60px);font-size:clamp(14px,1.3vw,18px);--q:clamp(0,calc((var(--t) - .42)/.10),1);opacity:calc(var(--q)*var(--fo4));transform:rotate(-10deg) scale(calc(1.8 - var(--q)*.8))}

/* four samples in a row, linking to the sample pages */
.sband{background:var(--sand);padding:clamp(56px,7vw,100px) var(--pad) clamp(64px,8vw,112px)}
.sband__h h2{font-size:clamp(28px,3.6vw,56px);line-height:1.3;color:var(--brand)}
.sband__h a{text-decoration:none;display:inline-flex;align-items:center;gap:18px}
.sband__h .ar{flex:none;width:.7em;height:.7em;fill:none;stroke:currentColor;stroke-width:2;transition:transform .25s}
.sband__h a:hover .ar{transform:translateX(6px)}
.row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,32px);margin-top:clamp(28px,3.4vw,52px)}
.row4 .smp:nth-child(even){margin-top:clamp(0px,2.4vw,34px)}
.row4 .smp__n{font-size:clamp(16px,1.5vw,21px);margin-top:14px;padding-bottom:10px;gap:8px}
.row4 .smp__n .ar{flex:none;width:18px;height:18px}

/* ---------- contact : the form is the main thing ---------- */
.ph .talk{stroke:var(--brand);stroke-width:2.2}
.ph .talk .tk{fill:var(--mark);stroke:none;translate:calc(clamp(0,calc((var(--t) - .10)/.45),1)*82px) 0;
  opacity:calc(clamp(0,calc((var(--t) - .09)/.02),1)*(1 - clamp(0,calc((var(--t) - .56)/.02),1)))}
.ph__art--chk .art{max-width:240px}
.formsec{background:var(--wash);padding:clamp(56px,7vw,110px) var(--pad);border-bottom:1px solid var(--line)}
.formsec__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6.4fr);gap:clamp(32px,5vw,80px);align-items:start}
.formsec__t{position:sticky;top:calc(var(--hh) + 28px)}
.formsec h2{font-size:clamp(30px,3.8vw,60px);line-height:1.3;color:var(--brand-d)}
.formsec__t p{margin-top:clamp(18px,2vw,26px);font-size:clamp(15.5px,1.2vw,17.5px);line-height:2.05}
.formsec .mailitems{grid-template-columns:minmax(0,1fr);margin-top:20px}
.formsec .mailitems li{background:#fff}
.formsec__t .formsec__s{margin-top:22px;font-size:14.5px}
.fmw{box-shadow:0 40px 70px -40px rgba(15,42,79,.5)}
.fm{padding:clamp(22px,3vw,44px);background:#fff}
.fm__f{margin-top:24px}
.fm__f:first-of-type{margin-top:0}
.fm__st+.fm__f{margin-top:20px}
.fm__l{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;line-height:1.6}
.fm__req{font-size:12px;line-height:1;font-weight:700;background:var(--mark);color:var(--ink);padding:4px 8px;border-radius:2px;letter-spacing:.04em}
.fm input,.fm textarea{display:block;width:100%;margin-top:8px;font:inherit;font-size:16px;line-height:1.7;color:var(--ink);background:var(--paper);border:1.5px solid rgba(27,36,51,.42);border-radius:3px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.fm textarea{min-height:190px;resize:vertical}
.fm input:focus,.fm textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--mark)}
.fm__hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin-top:22px;min-height:65px}
.fm__note{margin-top:20px;font-size:14px;line-height:1.95}
.fm__note a{color:var(--brand);text-underline-offset:3px}
.fm__go{margin-top:14px}
.fm__go .btn{border:0;cursor:pointer;font-family:inherit}
.btn:disabled{opacity:.55;cursor:progress;transform:none}
.fm__st{padding:14px 16px;border-left:4px solid #C0392B;background:#FDF1EE;font-weight:700;font-size:15px;line-height:1.85;margin-bottom:6px}
.fm__st a{color:var(--brand);text-underline-offset:3px}
.fm__done{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;padding:clamp(40px,6vw,84px) clamp(20px,3vw,44px);background:#fff;font-size:clamp(17px,1.5vw,21px);font-weight:700;line-height:1.9;outline:none}
.fm__done svg{width:84px;height:84px;fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
html[data-motion="on"] .fm__done svg path{stroke-dasharray:1 2;stroke-dashoffset:1;animation:chk 1.1s cubic-bezier(.65,0,.35,1) .1s forwards}
html[data-motion="on"] .fm__done svg path+path{animation-delay:.7s}
@keyframes chk{to{stroke-dashoffset:0}}
.mini{margin-top:26px;max-width:380px;--lw:8}
.mini .bro{border-radius:6px}
.mini .bro__bar{height:18px;padding:0 7px;gap:4px}
.mini .bro__bar i{width:5px;height:5px}
.mini .url{display:none}
.mini .L-rough{opacity:1}
.mini figcaption{font-family:var(--hand);font-weight:600;font-size:17px;color:var(--brand);margin-top:8px}
.meet{background:var(--sand);padding:clamp(64px,8vw,120px) var(--pad)}
.meet__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:6vw;align-items:center}
.meet h2{font-size:clamp(28px,3.4vw,52px);line-height:1.35;color:var(--brand-d)}
.meet__t p{margin-top:clamp(18px,2vw,26px);font-size:clamp(15.5px,1.2vw,17.5px);line-height:2.05;max-width:36em}
.meet__n{margin-top:30px}
.meet__art{justify-self:center;width:100%;max-width:330px}
.cupart{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cupart .cf{fill:var(--mark);stroke:none;opacity:.6}
.cupart .steam path{stroke-dasharray:.2 .16;stroke-dashoffset:calc(var(--t)*-3.6);stroke-width:2.8}
.mtg--fix{position:fixed;right:14px;bottom:14px;top:auto;z-index:70}
.mtg--fix+.ft{padding-bottom:70px}

@media (max-width:900px){
  .can--sc li,.flow--s>li,.flow--pic>li{align-items:start}
  .can--sc li{grid-template-columns:minmax(0,1fr);gap:14px;padding:22px 0}
  .can__sc{max-width:340px}
  .flow--s>li{grid-template-columns:52px minmax(0,1fr);gap:0 14px}
  .flow--pic>li{grid-template-columns:52px minmax(0,1fr);gap:0 14px}
  .flow__sc,.flow__pic{grid-column:2;margin-top:14px;max-width:340px}
  .flow__pic{padding-bottom:34px}
  .fp{--lw:12}
  .mini{--lw:12}
  .row4{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
  .row4 .smp:nth-child(even){margin-top:0}
  .formsec__in,.meet__in{grid-template-columns:minmax(0,1fr);gap:34px}
  .formsec__t{position:static}
  .meet__art{max-width:250px}
  .ph__art--chk .art{max-width:160px}
}

/* ---------- Talk Over Coffee as a big wordmark (contact head, home contact section) ---------- */
.tocw{font-family:var(--serif);font-weight:600;font-size:clamp(52px,8.4vw,136px);line-height:.98;letter-spacing:-.025em;color:#2A3446;margin-top:clamp(20px,2.6vw,40px)}
.tocw .w{display:block;width:fit-content}
.tocw b{font-weight:700;color:var(--brand)}
.tocw .r{display:inline-block}
.tocw--row{margin-top:0;color:var(--paper);font-size:clamp(46px,8.4vw,136px);line-height:1.02;text-wrap:balance}
.tocw--row .w{display:inline-block;margin-right:.22em}
.tocw--row b{color:var(--mark)}
.contact__toc{margin-bottom:clamp(40px,6vw,90px)}
html[data-motion="on"] .tocw .r{animation:rest 1.1s cubic-bezier(.65,0,.35,1) .5s both}
html[data-motion="on"] .rv:not(.in) .tocw .r{animation:none;opacity:0}
.ph--toc{align-items:center}
@media (max-width:900px){
  .tocw{font-size:clamp(48px,16vw,92px)}
  .tocw--row{font-size:clamp(44px,14vw,92px)}
  .tocw--row .w:nth-child(3){display:block}
}

/* a Japanese main catch (12-20 chars, two lines) in the home first screen */
.hero--catch .hero__in{grid-template-columns:minmax(0,34vw) minmax(0,1fr)}
.hero--catch h1{font-family:var(--mincho);font-weight:800;font-size:clamp(28px,2.7vw,46px);line-height:1.4;letter-spacing:.01em;color:var(--brand-d);text-wrap:balance}
@media (max-width:900px){
  .hero--catch .hero__in{grid-template-columns:minmax(0,1fr)}
  .hero--catch h1{font-size:clamp(26px,7.4vw,40px);line-height:1.4}
}
.ph--toc .tocw{font-size:clamp(56px,9.4vw,150px)}
.cta--solo{padding:clamp(40px,5vw,72px) var(--pad)}
@media (max-width:900px){.ph--toc .tocw{font-size:clamp(52px,17vw,92px)}}
.ph--thanks{min-height:calc(100svh - var(--hh) - 200px)}
/* スマホでは「動きを止める」を本文の上に浮かせない（読む人の確認 2026-10-24: 本文と重なる）。ヘッダーのすぐ下に置き、ページと一緒に流す */
@media (max-width:720px){.mtg--fix{position:absolute;top:calc(var(--hh) + 10px);bottom:auto;right:14px}.mtg--fix+.ft{padding-bottom:0}}
/* 主コピー「あなたの事業に、IT係を」（J-0124。前は J-0118 の「小さな会社に、」6字）: 1画面目の主役として大きく。1行目の8字が左の列（30vw）に収まる大きさ */
.hero--catch h1{font-size:clamp(34px,3.6vw,64px);line-height:1.3;letter-spacing:.02em}
@media (max-width:720px){.hero--catch h1{font-size:clamp(32px,9.6vw,50px)}}
/* 業務の自動化の書き直し（J-0129・会長の決定 A）: 例の6つは PC で2列にして間延びを詰める。進め方の3項目は3列のカード */
.can--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 4vw}
.can--grid li{grid-template-columns:minmax(0,1fr);gap:12px;align-items:start;padding:clamp(22px,2.4vw,34px) 0}
.can--grid li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
.can--grid .can__sc{max-width:360px}
.way{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(28px,3.4vw,52px)}
.way li{border-top:2px solid var(--brand);padding-top:clamp(18px,2vw,26px)}
.way__t{display:block;font-family:var(--mincho);font-weight:800;font-size:clamp(20px,1.9vw,28px);line-height:1.4;color:var(--brand-d);margin-bottom:12px}
.way p{font-size:clamp(15.5px,1.2vw,17.5px);line-height:2.05}
@media (max-width:900px){.can--grid{grid-template-columns:minmax(0,1fr)}.can--grid li:nth-last-child(2){border-bottom:0}.way{grid-template-columns:minmax(0,1fr)}}
/* コーヒーを淹れる札（J-0153）: 1画面目より下の左の余白に生成りの札が sticky でついてくる。script.js が見出しの位置から --s0〜--s3（各手順の進み 0〜1）と取っ手の位置を出す。
   豆を入れる（--s0）→ 挽く（--s1・取っ手が回り粉がたまる）→ 淹れる（--s2・注いでカップが満ちる）→ できあがり（--s3・ソーサーと湯気）。止めたときはできあがりの絵 */
.typezone{position:relative}
.brewrail{display:none}
@media (min-width:1280px){
  .brewrail{display:block;position:absolute;z-index:5;top:0;bottom:0;left:calc(var(--pad)/2 - 31px);width:62px;pointer-events:none;--s0:1;--s1:1;--s2:1;--s3:1}
  .brew{position:sticky;top:calc(50vh - 104px);margin-top:40px;width:62px;padding:6px 3px 7px;border-radius:14px;background:rgba(250,248,243,.95);box-shadow:0 0 0 1.5px var(--brand),0 6px 18px rgba(15,42,79,.18);text-align:center}
  .brew svg{display:block;width:56px;height:140px;overflow:visible;fill:none;stroke:var(--brand-d);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .brew__cap{display:block;margin-top:2px;font-size:10px;line-height:1.3;font-weight:700;letter-spacing:.02em;color:var(--brand-d);white-space:nowrap}
  .bw-gr{opacity:calc(1 - var(--s2) * 4)}
  .bw-br{opacity:clamp(0, calc(var(--s2) * 4 - .4), 1)}
  .bw-body,.bw-cap{fill:#E9EDF3}
  .bw-band{stroke:rgba(15,42,79,.4)}
  .bw-jar{fill:rgba(238,243,250,.9)}
  .bw-grounds{fill:#6B4226;stroke:none;transform-box:fill-box;transform-origin:bottom;scale:1 var(--s1)}
  .bw-knob,.bw-knob-b{fill:#C8955E}
  .bw-axle{fill:var(--brand-d);stroke:none}
  .bw-beans .bn{fill:#7A4A2A;stroke:#4A2C18;stroke-width:1;translate:calc(26px + var(--i) * 4px) calc(-14px + clamp(0, var(--s0) * 1.25 - var(--i) * .08, 1) * 44px);opacity:calc(1 - var(--s1) * 6)}
  .bw-beans .bn path{fill:none;stroke:#4A2C18;stroke-width:.8}
  .bw-kettle,.bw-drip{opacity:calc(1 - var(--s3) * 2)}
  .bw-kettle{stroke-width:2.4}
  .bw-water{stroke:#8FB3D9;stroke-width:1.8;stroke-dasharray:3 2;opacity:calc(clamp(0, var(--s2) * 6 - 1, 1) * (1 - clamp(0, var(--s2) * 3 - 2, 1)));animation:bwflow .5s linear infinite}
  .bw-drip{fill:#FAF8F3}
  .bw-drip-g{stroke:#6B4226;stroke-width:3;opacity:calc(1 - var(--s3) * 2)}
  .bw-dr{fill:#6B4226;stroke:none;opacity:calc(clamp(0, var(--s2) * 5 - 1, 1) * (1 - var(--s3)));animation:bwdrop 1s ease-in infinite}
  .bw-dr.d2{animation-delay:.5s}
  .bw-coffee{fill:#6B4226;stroke:none;transform-box:fill-box;transform-origin:bottom;scale:1 calc(.15 + var(--s2) * .7)}
  .bw-cup{fill:none}
  .bw-saucer{stroke-width:2;translate:calc((1 - var(--s3)) * -70px) 0;opacity:var(--s3)}
  .bw-steam path{stroke:var(--brand);stroke-width:1.4;stroke-dasharray:.3 .2;opacity:clamp(0, calc(var(--s3) * 3 - 1.6), 1);animation:bwsteam 1.8s linear infinite}
  html[data-motion="off"] .brewrail *{animation:none}
}
@keyframes bwdrop{from{translate:0 0;fill-opacity:1}to{translate:0 22px;fill-opacity:.2}}
@keyframes bwflow{to{stroke-dashoffset:-5}}
@keyframes bwsteam{to{stroke-dashoffset:-1}}
/* 活字が落ちて見出しを組む（J-0145）: script.js が .typezone の見出しの字を .ty に分け、スクロールから字ごとの --k（0 落ちる前 → 1 組まれた）を出す。
   落ちている間は活字の小箱（::before の枠）ごと傾いて見え、組まれると枠が消えて字だけ残る。止めたとき（--k なし）はふつうの見出し */
.ty{display:inline-block;position:relative;--k:1;transform:translateY(calc((1 - var(--k)) * -1.4em)) rotate(calc((1 - var(--k)) * var(--rot, 8deg)));opacity:clamp(0, calc(var(--k) * 4), 1);will-change:transform}
.ty::before{content:"";position:absolute;left:-.04em;right:-.04em;top:.06em;bottom:.02em;border:1.5px solid currentColor;border-radius:2px;background:color-mix(in srgb, currentColor 9%, transparent);box-shadow:2px 3px 0 color-mix(in srgb, currentColor 14%, transparent);opacity:calc(clamp(0, (1 - var(--k)) * 5, 1) * .6);pointer-events:none}
html[data-motion="off"] .ty{transform:none;opacity:1}
html[data-motion="off"] .ty::before{opacity:0}
/* ご相談のお見積もりの節の3コマ（J-0168）: カフェで話す→整理→お見積もり */
.mini--sc{max-width:420px}
.mini--sc .sc{display:block;width:100%;height:auto}