/* ─────────────────────────────────────────────
   TOKENS
   ───────────────────────────────────────────── */
:root{
  --ground:oklch(96.1% 0.012 85);
  --surface:oklch(93.5% 0.014 80);
  --ink:oklch(19.0% 0.014 40);
  --muted:oklch(43.5% 0.018 45);
  --faint:oklch(51.5% 0.016 55);
  --seal:oklch(51.6% 0.202 26);
  --seal-hot:oklch(46.2% 0.196 26);
  --rule:oklch(84.5% 0.012 75);
  --border-strong:oklch(62.0% 0.016 55);

  --f-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-jp:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;

  --ease:cubic-bezier(0.16,1,0.3,1);      /* ease-out-expo */
  --ease-q:cubic-bezier(0.22,1,0.36,1);   /* ease-out-quint */

  --shell:1280px;
  --gutter:clamp(1.25rem,4vw,3.5rem);
}

/* Zen Kaku Gothic New, subset to exactly the 12 glyphs this site uses:
   傑, 作 and the digits 0-9 for the section numerals. 1.5KB embedded, versus
   roughly 71KB to request the family from a CDN (44KB of stylesheet covering
   121 Japanese subsets, plus the subset files themselves). Keeping the real
   family name means per-glyph fallback still works for anything outside it.
   SIL Open Font License 1.1. */
@font-face{
  font-family:'Zen Kaku Gothic New';
  font-style:normal;font-weight:700;font-display:swap;
  src:url(data:font/woff2;base64,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) format('woff2');
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Anchor targets must clear the sticky header, or the heading lands under it.
   --hdr-h is measured in JS, so this stays correct when the header wraps to
   two rows on small screens. The clamp is the no-JS fallback. */
:where(#services,#why,#process,#contact,#top){
  scroll-margin-top:calc(var(--hdr-h,clamp(4.5rem,7vw,6rem)) + 1.5rem);
}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--f-body);font-size:clamp(1rem,0.97rem + 0.15vw,1.0625rem);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  /* clip, not hidden: `overflow-x:hidden` makes body a scroll container and
     breaks `position:sticky` on the header in several engines. */
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--seal);color:var(--ground)}

:focus-visible{outline:2px solid var(--seal);outline-offset:3px}
:focus:not(:focus-visible){outline:none}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.rule{height:1px;background:var(--rule);border:0}

.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:200;
  background:var(--ink);color:var(--ground);padding:.75rem 1.25rem;
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  transition:top .25s var(--ease);
}
.skip:focus{top:1rem}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* mono metadata label — Direction B's contribution, metadata only */
.meta{
  font-family:var(--f-mono);font-size:clamp(.625rem,.6rem + .1vw,.6875rem);
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
}

/* ─────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:100;background:var(--ground);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease),padding .4s var(--ease);
}
.hdr[data-stuck]{border-bottom-color:var(--rule)}
.hdr__in{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:clamp(.875rem,1.6vw,1.375rem);
  transition:padding-block .4s var(--ease);
}
.hdr[data-stuck] .hdr__in{padding-block:.75rem}

.brand{display:flex;align-items:center;gap:.75rem}
.brand__mark{
  width:34px;height:34px;background:var(--seal);color:var(--ground);
  display:grid;place-items:center;
  transition:transform .5s var(--ease);
}
/* The mark is drawn, not typeset: as live text it silently fell back to
   Hiragino or Yu Gothic wherever the webfont failed, so the logo changed
   shape by operating system. */
.brand__mark svg{width:18px;height:auto;fill:currentColor}
.brand:hover .brand__mark{transform:rotate(-4deg) scale(1.06)}
.brand__name{font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:-.01em}

.nav{display:flex;gap:clamp(1rem,2.2vw,1.875rem)}
.nav a{
  position:relative;font-family:var(--f-mono);font-size:.75rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding-block:.375rem;transition:color .3s var(--ease);
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--seal);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.nav a:hover,.nav a:focus-visible{color:var(--ink)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}

.hdr__end{display:flex;align-items:center;gap:clamp(.75rem,1.6vw,1.375rem)}

/* language switcher */
.lang{position:relative}
.lang__btn{
  display:flex;align-items:center;gap:.5rem;background:none;cursor:pointer;
  border:1px solid var(--border-strong);color:var(--ink);
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.1em;padding:.4rem .625rem;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.lang__btn:hover{border-color:var(--ink)}
.lang__chev{font-size:.5rem;transition:transform .4s var(--ease)}
.lang__btn[aria-expanded="true"] .lang__chev{transform:rotate(180deg)}
.lang__menu{
  position:absolute;top:calc(100% + .5rem);right:0;width:170px;z-index:40;
  background:var(--ground);border:1px solid var(--ink);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;
  pointer-events:none;transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.lang__menu[data-open]{opacity:1;transform:none;pointer-events:auto}
.lang__menu ul{list-style:none}
.lang__menu li+li{border-top:1px solid var(--rule)}
.lang__opt{
  display:flex;justify-content:space-between;gap:1rem;width:100%;cursor:pointer;
  background:none;border:0;color:var(--ink);text-align:left;
  font-family:var(--f-mono);font-size:.75rem;padding:.625rem .75rem;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.lang__opt:hover,.lang__opt:focus-visible{background:var(--ink);color:var(--ground)}
.lang__opt[aria-current="true"]::after{content:'●';color:var(--seal);font-size:.5rem;align-self:center}
.lang__opt[aria-current="true"]:hover::after{color:var(--ground)}

/* ─────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;
  padding:1rem 2rem;cursor:pointer;border:1px solid transparent;overflow:hidden;
  isolation:isolate;transition:color .35s var(--ease);
}
.btn>span{position:relative;z-index:2}
.btn::before{
  content:'';position:absolute;inset:0;z-index:1;
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn--primary{background:var(--seal);color:var(--ground)}
.btn--primary::before{background:var(--seal-hot)}
.btn--ghost{border-color:var(--ink);color:var(--ink)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--ground)}
.btn--sm{padding:.75rem 1.25rem;font-size:.75rem}
.btn:active{transform:translateY(1px)}

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
.hero{padding-block:clamp(3.5rem,9vw,7.5rem) clamp(3rem,7vw,6rem)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,5vw,5rem);align-items:start}
.hero__eyebrow{color:var(--seal);letter-spacing:.22em;margin-bottom:clamp(1.25rem,3vw,2.125rem)}
.hero h1{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.5rem,1.4rem + 5.4vw,5.75rem);
  line-height:.96;letter-spacing:-.035em;max-width:16ch;
  margin-bottom:clamp(1.25rem,2.4vw,1.875rem);
  text-wrap:balance;
}
.hero__lede{
  font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);line-height:1.62;color:var(--muted);
  max-width:62ch;margin-bottom:clamp(1.75rem,3.4vw,2.75rem);text-wrap:pretty;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.875rem}

/* the seal */
.seal{
  width:100%;aspect-ratio:1;max-width:240px;background:var(--seal);
  display:grid;place-items:center;position:relative;margin-inline:auto;
}
.seal__glyph{
  display:block;color:var(--ground);
  width:clamp(6.86rem,17.63vw,10.29rem);
}
.seal__glyph svg{display:block;width:100%;height:auto;fill:currentColor}
.seal__ring{
  position:absolute;inset:0;border:1px solid var(--seal);opacity:0;pointer-events:none;
}
.seal__cap{display:block;text-align:center;margin-top:1rem}

/* spec strip — Direction B metadata language */
.spec{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--rule)}
.spec__cell{padding:clamp(1rem,2.2vw,1.5rem) 0}
.spec__cell+.spec__cell{border-left:1px solid var(--rule);padding-left:clamp(1rem,2.2vw,1.5rem)}
.spec__k{display:block;margin-bottom:.375rem}
.spec__v{font-family:var(--f-display);font-weight:700;font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem);letter-spacing:-.01em}

/* marquee */
.marquee{overflow:hidden;border-bottom:1px solid var(--rule);padding-block:1.125rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee__set{display:flex;list-style:none}
.marquee__item{
  display:flex;align-items:center;gap:clamp(1.75rem,4vw,3rem);padding-right:clamp(1.75rem,4vw,3rem);
  font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}
.marquee__item::after{content:'';width:5px;height:5px;background:var(--seal);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ─────────────────────────────────────────────
   SECTIONS
   ───────────────────────────────────────────── */
.sec{padding-block:clamp(3.5rem,9vw,10rem)}
.sec--tight{padding-block:clamp(3rem,7vw,7.5rem)}
.sec--wide{padding-block:clamp(4rem,11vw,12.5rem)}
.sec__head{display:flex;align-items:baseline;gap:1.25rem;margin-bottom:clamp(2rem,4.5vw,3.75rem)}
.sec__num{font-family:var(--f-jp);font-weight:700;color:var(--seal);font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1}
.sec h2{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(1.875rem,1.2rem + 2.6vw,3.25rem);
}
.sec__lede{max-width:60ch;color:var(--muted);margin-top:.875rem}

/* services — numbered rows on rules, no cards */
.svc{border-top:1px solid var(--rule)}
.svc__row{
  display:grid;grid-template-columns:auto minmax(0,22ch) minmax(0,1fr);
  gap:clamp(1rem,3.5vw,3rem);align-items:start;
  padding-block:clamp(1.5rem,3vw,2.25rem);border-bottom:1px solid var(--rule);
  position:relative;transition:transform .5s var(--ease);
}
.svc__row::before{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--seal);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.svc__row:hover{transform:translateX(clamp(4px,.7vw,10px))}
.svc__row:hover::before{transform:scaleX(1)}
.svc__n{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;color:var(--faint);padding-top:.4rem;transition:color .35s var(--ease)}
.svc__row:hover .svc__n{color:var(--seal)}
.svc__t{font-family:var(--f-display);font-weight:700;font-size:clamp(1.0625rem,1rem + .5vw,1.375rem);letter-spacing:-.015em;line-height:1.22}
.svc__d{color:var(--muted);max-width:60ch;text-wrap:pretty}

/* why — three column text set, no cards */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.75rem,4vw,3.5rem)}
.why__i{border-top:2px solid var(--ink);padding-top:1.25rem}
.why__n{color:var(--seal);display:block;margin-bottom:.75rem}
.why__t{font-family:var(--f-display);font-weight:700;font-size:clamp(1.0625rem,1rem + .45vw,1.3125rem);letter-spacing:-.015em;margin-bottom:.625rem;line-height:1.2}
.why__d{color:var(--muted);font-size:.9375rem;text-wrap:pretty}

/* process — horizontal stepper */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,3vw,2.5rem)}
.proc__s{position:relative;padding-top:2.5rem}
.proc__s::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--rule);
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease);transition-delay:var(--d,0ms);
}
.in .proc__s::before{transform:scaleX(1)}
.proc__s::after{
  content:'';position:absolute;top:-4px;left:0;width:10px;height:10px;background:var(--seal);
  opacity:0;transform:scale(.4);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--d,0ms) + 160ms);
}
.in .proc__s::after{opacity:1;transform:scale(1)}
.proc__k{display:block;margin-bottom:.75rem}
.proc__t{font-family:var(--f-display);font-weight:700;font-size:clamp(1rem,.95rem + .4vw,1.25rem);letter-spacing:-.015em;margin-bottom:.5rem}
.proc__d{color:var(--muted);font-size:.9375rem;text-wrap:pretty}

/* ─────────────────────────────────────────────
   CONTACT
   ───────────────────────────────────────────── */
.contact{background:var(--surface);border-block:1px solid var(--rule)}
.contact__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(2rem,6vw,5.5rem);align-items:start}
.contact__facts{list-style:none;margin-top:clamp(1.5rem,3vw,2.25rem);border-top:1px solid var(--rule)}
.contact__facts li{display:flex;justify-content:space-between;gap:1rem;padding-block:.8125rem;border-bottom:1px solid var(--rule)}
.contact__facts b{font-family:var(--f-display);font-weight:700;font-size:.9375rem}

.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,1.5rem)}
.field{display:flex;flex-direction:column;margin-bottom:clamp(1rem,2.4vw,1.5rem)}
.field--full{grid-column:1/-1}
.field label{margin-bottom:.5rem;transition:color .3s var(--ease)}
.field:focus-within label{color:var(--seal)}
.field input,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--border-strong);
  padding:.6875rem .125rem;width:100%;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.field textarea{resize:vertical;min-height:120px;line-height:1.55}
.field input:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--seal);box-shadow:0 1px 0 0 var(--seal);
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);opacity:.7}
.field[data-invalid] input,.field[data-invalid] textarea{border-bottom-color:var(--seal)}
.err{
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;color:var(--seal);
  margin-top:.4375rem;min-height:1em;opacity:0;transform:translateY(-3px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.field[data-invalid] .err{opacity:1;transform:none}

.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;margin-top:.5rem}
.form__status{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;color:var(--muted);opacity:0;transition:opacity .35s var(--ease)}
.count{
  align-self:flex-end;font-family:var(--f-mono);font-size:.6875rem;color:var(--faint);
  margin-top:.375rem;opacity:0;transform:translateY(-3px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),color .3s var(--ease);
}
.count[data-show]{opacity:1;transform:none}
.count[data-near]{color:var(--seal)}
.form__status[data-show]{opacity:1}
.form__note{margin-top:1.25rem;font-size:.8125rem;color:var(--faint);max-width:52ch}
.form__note a{color:var(--seal);text-decoration:underline;text-underline-offset:3px}
form[data-sent] .form__note{color:var(--muted)}

/* ─────────────────────────────────────────────
   LEGAL / PRIVACY DOCUMENT VIEW
   ───────────────────────────────────────────── */
.doc{padding-block:clamp(2rem,4vw,3.5rem) clamp(4rem,9vw,7.5rem);max-width:82ch}
.doc[hidden]{display:none}
.doc__back{
  display:inline-flex;align-items:center;gap:.5rem;padding-block:.4375rem;
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);transition:color .3s var(--ease),gap .3s var(--ease);
}
.doc__back:hover{color:var(--seal);gap:.75rem}
.doc__h{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(2rem,1.4rem + 2.6vw,3.25rem);margin:clamp(1.5rem,3vw,2.25rem) 0 .75rem;
  max-width:20ch;
}
/* The heading receives focus on route change so the new document is announced.
   The ring is suppressed here only: a crimson outline around a 3rem heading
   reads as a validation error in this palette, and the page change is already
   evident. Focus still moves, so screen readers land in the right place. */
.doc__h:focus{outline:none}
.doc__meta{margin-bottom:clamp(2rem,4vw,3rem);padding-bottom:1.25rem;border-bottom:1px solid var(--rule)}
.doc__body h2{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.125rem,1rem + .6vw,1.4375rem);
  margin:clamp(2rem,3.5vw,2.75rem) 0 .75rem;
}
.doc__body h2:first-child{margin-top:0}
.doc__body h2 .doc__n{
  font-family:var(--f-mono);font-size:.6875rem;font-weight:400;letter-spacing:.16em;
  color:var(--seal);display:block;margin-bottom:.5rem;
}
.doc__body p,.doc__body li{color:var(--muted);max-width:68ch;text-wrap:pretty}
.doc__body p+p,.doc__body ul+p,.doc__body dl+p{margin-top:.75rem}
.doc__body ul{list-style:none;margin:.75rem 0 0}
.doc__body li{position:relative;padding-left:1.25rem;margin-top:.5rem}
.doc__body li::before{content:'';position:absolute;left:0;top:.6875em;width:5px;height:5px;background:var(--seal)}
.doc__body a{color:var(--seal);text-decoration:underline;text-underline-offset:3px}
.doc__body dl{margin-top:.75rem;border-top:1px solid var(--rule)}
.doc__body dl>div{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;padding-block:.75rem;border-bottom:1px solid var(--rule)}
.doc__body dt{flex:0 0 16ch;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding-top:.2rem}
.doc__body dd{flex:1 1 20ch;color:var(--muted)}

/* Unfilled placeholders. Deliberately loud: these must not reach production
   unnoticed, and the banner counts whatever is still outstanding. */
.todo{
  background:color-mix(in oklch,var(--seal) 14%,transparent);
  color:var(--seal);padding:.0625rem .375rem;
  font-family:var(--f-mono);font-size:.8125em;letter-spacing:.04em;
  border-bottom:1px dashed var(--seal);
}
.doc__warn{
  display:flex;gap:.75rem;align-items:flex-start;
  border:1px solid var(--seal);padding:1rem 1.125rem;margin-top:1.5rem;
  font-family:var(--f-mono);font-size:.75rem;line-height:1.6;letter-spacing:.02em;color:var(--seal);
}
.doc__warn[hidden]{display:none}

.tel-reveal{
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;
  color:var(--seal);background:none;border:1px dashed var(--border-strong);
  padding:.25rem .625rem;cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.tel-reveal:hover{border-color:var(--seal);background:color-mix(in oklch,var(--seal) 8%,transparent)}
.tel-shown{color:var(--seal);text-decoration:underline;text-underline-offset:3px}
.doc__warn b{font-weight:500}

/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */
.ftr{padding-block:clamp(2rem,4vw,3rem)}
.ftr__in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.25rem}
.ftr__links{display:flex;flex-wrap:wrap;gap:.25rem 1.75rem}
/* padding-block, not bare text: WCAG 2.2 SC 2.5.8 wants a 24px minimum
   target and the mono type alone is only ~18px tall. */
.ftr__links a{position:relative;padding-block:.4375rem;transition:color .3s var(--ease)}
.ftr__links a::after{content:'';position:absolute;left:0;bottom:.25rem;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.ftr__links a:hover{color:var(--ink)}
.ftr__links a:hover::after{transform:scaleX(1)}
.ftr__noscript{margin-top:1.25rem;max-width:80ch;line-height:1.7;letter-spacing:.08em;text-transform:none}

/* ─────────────────────────────────────────────
   MOTION
   ───────────────────────────────────────────── */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}

.js .word{display:inline-block;overflow:hidden;vertical-align:top}
.js .word>i{display:inline-block;font-style:inherit;transform:translateY(105%)}
/* A keyframe animation, not a transition: the headline is re-split from
   scratch on every language change, and a transition on freshly inserted
   nodes has no start frame to run from, so it hangs at the start value. */
.js .in .word>i{animation:wordUp .95s var(--ease) var(--d,0ms) both}
@keyframes wordUp{from{transform:translateY(105%)}to{transform:none}}

.js .drawline{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.js .drawline.in{transform:scaleX(1)}

/* seal stamp */
.js .seal{opacity:0;transform:scale(1.34) rotate(-7deg)}
.js .seal.in{opacity:1;transform:none;transition:opacity .55s var(--ease-q),transform .95s var(--ease-q)}
.js .seal.in .seal__ring{animation:press 1.1s var(--ease) .18s both}
@keyframes press{
  0%{opacity:.55;transform:scale(1)}
  100%{opacity:0;transform:scale(1.42)}
}

/* language swap flicker */
.swapping [data-i18n],.swapping [data-i18n-ph],.swapping [data-i18n-aria]{
  animation:swap .42s var(--ease) both;
}
@keyframes swap{
  0%{opacity:1}
  38%{opacity:0;filter:blur(3px)}
  100%{opacity:1;filter:blur(0)}
}

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .seal{max-width:180px;margin-inline:0}
  .seal__cap{text-align:left}
  .why{grid-template-columns:1fr 1fr}
  .proc{grid-template-columns:1fr 1fr;gap:2rem}
  .contact__grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  /* The nav wraps to its own scrollable row rather than collapsing into a
     hamburger: four links do not justify a modal, and hiding them outright
     would leave phone visitors with no way to reach a section. */
  .hdr__in{flex-wrap:wrap;row-gap:0}
  .brand{order:1}
  .hdr__end{order:2}
  .nav{
    order:3;width:100%;gap:1.5rem;margin-top:.625rem;padding:.5rem 0 .125rem;
    border-top:1px solid var(--rule);
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;font-size:.6875rem}
  .spec{grid-template-columns:1fr 1fr}
  .spec__cell:nth-child(3),.spec__cell:nth-child(4){border-top:1px solid var(--rule)}
  .spec__cell:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:560px){
  /* Below this the wordmark, language control and CTA cannot share a row, so
     the header wraps to three and eats a fifth of the viewport. The 傑 mark
     carries the brand alone; the link keeps its accessible name either way. */
  .brand__name{display:none}
  .hdr__in{padding-block:.75rem}
  .btn--sm{padding:.6875rem 1rem;font-size:.6875rem}
  .nav{gap:1.125rem;margin-top:.5rem;padding-top:.5rem}
}
@media (max-width:640px){
  .svc__row{grid-template-columns:auto minmax(0,1fr);gap:.75rem 1rem}
  .svc__d{grid-column:2}
  .why{grid-template-columns:1fr}
  .proc{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
  .hdr__end{gap:.625rem}
  .ftr__in{flex-direction:column;align-items:flex-start}
}

/* ─────────────────────────────────────────────
   REDUCED MOTION — everything resolves instantly
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .js .reveal{opacity:1;transform:none}
  .js .word>i,.js .in .word>i{transform:none;animation:none}
  .js .drawline{transform:scaleX(1)}
  .js .seal{opacity:1;transform:none}
  .marquee__track{animation:none;transform:none}
  .seal__ring{display:none}
}

/* print */
@media print{
  .hdr,.marquee,.hero__cta,.form__foot,.skip{display:none}
  body{background:#fff;color:#000}
  .js .reveal,.js .seal{opacity:1;transform:none}
}

/* ─────────────────────────────────────────────
   MULTI-PAGE ADDITIONS
   Everything above this line is the original single-file stylesheet, copied
   byte for byte. Only the rules below were added when the site was split into
   pages, so the original design can still be diffed against its source.

   .svc__row is a three-column grid (number | title | description). On the
   services page a service carries several paragraphs, which as direct
   children would become extra grid items and land in the wrong columns.
   They are wrapped in one .svc__d element instead, so the row still has
   exactly three cells; this only spaces the paragraphs inside that cell.
   ───────────────────────────────────────────── */
.svc__d p + p{margin-top:.75rem}