/* ==========================================================================
   Raytics — redesign (design preview)
   Art direction: "Light through a prism" — ivory paper, deep ink, vermillion signal.
   Type: Shippori Mincho (JP display) / Zen Kaku Gothic New (JP text) / Instrument Serif (Latin)
   ========================================================================== */

:root {
  --paper: #f4f0e8;
  --paper-2: #ebe5d8;
  --card: #fbf9f4;
  --ink: #13202f;
  --ink-2: #0d1622;
  --muted: #56606b;
  --line: #d9d2c3;
  --line-dark: #2a3a4e;
  --accent: #e04a2a;
  --accent-ink: #b23a1e;
  --accent-soft: #f3c3b1;
  --on-dark: #f4f0e8;
  --on-dark-muted: #b4bcc6;
  --on-dark-accent: #ff8a6a;

  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", sans-serif;
  --latin: "Instrument Serif", "Times New Roman", serif;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(20px, 5vw, 56px);
  --max: 1240px;
  --radius: 22px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .02em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* paper grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

h1, h2, h3, p, dd, dt { word-break: auto-phrase; line-break: strict; }
h1, h2, h3 { font-feature-settings: "palt"; text-wrap: balance; }

a { color: inherit; text-decoration: none; }
svg { display: block; overflow: visible; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 4px; }
.intro :focus-visible, .contact :focus-visible, .site-footer :focus-visible { outline-color: var(--on-dark-accent); }

/* SVG paint helpers ------------------------------------------------------ */
.f-ink { fill: var(--ink); }
.f-accent { fill: var(--accent); }
.f-accent-soft { fill: var(--accent-soft); }
.f-paper { fill: var(--paper); }
.f-paper2 { fill: var(--paper-2); }
.f-card { fill: var(--card); }
.f-muted { fill: var(--muted); }
.f-none { fill: none; }
.s-ink { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s-accent { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; }
.s-muted { stroke: var(--muted); stroke-width: 1; fill: none; }
.s-line { stroke: var(--line); stroke-width: 1.2; fill: none; }
.f-card.s-ink, .f-accent-soft.s-ink, .f-paper2.s-ink, .f-ink.s-ink { stroke-width: 1.6; }
.f-card.s-ink { fill: var(--card); }
.f-accent-soft.s-ink { fill: var(--accent-soft); }
.f-paper2.s-ink { fill: var(--paper-2); }
.f-ink.s-ink { fill: var(--ink); }
.thin { stroke-width: 1; }
.thick { stroke-width: 6; stroke-linecap: round; }
.dashed { stroke-dasharray: 4 6; }
.o5 { opacity: .5; }
.o6 { opacity: .6; }
.o9 { opacity: .9; }

/* Skip link ------------------------------------------------------------- */
.skip {
  position: fixed; left: 16px; top: -120px; z-index: 300;
  background: var(--ink); color: var(--on-dark);
  padding: 12px 18px; border-radius: 10px; font-size: 14px;
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

/* Draft banner ----------------------------------------------------------- */
.draft {
  position: relative;
  background: var(--ink-2);
  color: #e6e1d6;
  text-align: center;
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.7;
  padding: 8px var(--gutter);
}

/* Header ------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244, 240, 232, .9);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  transition: box-shadow .3s, background .3s;
}
.site-header.is-scrolled { background: rgba(244, 240, 232, .97); box-shadow: 0 12px 32px -26px rgba(19, 32, 47, .5); }
.nav {
  max-width: var(--max); margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px 28px;
  transition: padding .3s var(--ease);
}
.site-header.is-scrolled .nav { padding-top: 12px; padding-bottom: 12px; }
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: .09em; line-height: 1.3;
}
.mark { display: inline-block; flex: none; width: 34px; height: 34px; }
.mark svg { width: 100%; height: 100%; }
.mk-bg { fill: var(--ink); }
.mk-a { fill: var(--paper); transition: transform .5s var(--ease-out); }
.mk-b { fill: var(--accent); transition: transform .5s var(--ease-out); }
.mk-c { fill: var(--accent); transition: transform .5s var(--ease-out); transform-origin: 27.5px 8.6px; }
.brand:hover .mk-a { transform: translateY(-1.5px); }
.brand:hover .mk-b { transform: translateY(1.5px); }
.brand:hover .mk-c { transform: scale(1.35); }

.site-nav { display: flex; gap: 34px; font-size: 13px; font-weight: 500; letter-spacing: .1em; }
.site-nav a { padding: 6px 0; transition: color .3s; }
.site-nav a:hover { color: var(--accent-ink); }

/* Layout ------------------------------------------------------------------ */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--latin), var(--serif); font-weight: 400;
  font-size: 17px; letter-spacing: .12em; line-height: 1.5;
  color: var(--accent-ink);
}

.lead { font-size: 15px; line-height: 2.2; color: var(--muted); margin: 0; }

/* Buttons ----------------------------------------------------------------- */
.button {
  display: inline-flex; align-items: center; gap: 40px;
  margin-top: 40px;
  padding: 18px 24px 18px 28px;
  background: var(--ink); color: var(--on-dark);
  border-radius: 2px;
  font-size: 14px; font-weight: 500; letter-spacing: .1em; line-height: 1.4;
  transition: background .35s var(--ease);
}
.button:hover, .button:focus-visible { background: var(--accent-ink); }
.btn-arrow { display: inline-block; font-size: 16px; line-height: 1; transition: transform .45s var(--ease-out); }
.button:hover .btn-arrow, .button:focus-visible .btn-arrow { transform: translate(3px, -3px); }

/* Reveal motion -------------------------------------------------------------- */
html.js [data-reveal] {
  opacity: 0; translate: 0 34px;
  transition: opacity 1s var(--ease-out), translate 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 110ms);
}
html.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

html.js .hero-in {
  opacity: 0; translate: 0 22px;
  transition: opacity 1s var(--ease-out), translate 1.1s var(--ease-out);
  transition-delay: calc(150ms + var(--d, 0) * 120ms);
}
html.is-loaded .hero-in { opacity: 1; translate: 0 0; }

/* ==========================================================================
   HOME — hero
   ========================================================================== */
.hero { position: relative; overflow: clip; padding: clamp(40px, 7vw, 96px) 0 clamp(72px, 9vw, 128px); }
.hero-glow {
  position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, rgba(243, 195, 177, .55), rgba(243, 195, 177, 0));
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 4vw, 72px); align-items: center;
}
.hero h1 {
  margin: 0 0 30px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 5.3vw, 76px); line-height: 1.42; letter-spacing: .03em;
  text-wrap: nowrap;
}
.hero h1 .line { position: relative; display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .14em 0; }
.hero h1 .line > span { display: inline-block; }
html.js .hero h1 .line > span { transform: translateY(108%); transition: transform 1.25s var(--ease-out); }
html.js .hero h1 .l2 > span { transition-delay: .14s; }
html.is-loaded .hero h1 .line > span { transform: none; }

.hero .lead { max-width: 470px; }

/* hero art */
.art { position: relative; width: 100%; max-width: 580px; justify-self: end; }
.hero-svg { width: 100%; height: auto; }
.plx {
  transform: translate(calc(var(--px, 0) * var(--depth, 0) * 18px), calc(var(--py, 0) * var(--depth, 0) * 18px));
  transition: transform 1.1s var(--ease-out);
}
.spin { animation: spin 60s linear infinite; }
.spin.rev { animation-duration: 80s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.float { animation: float 10s ease-in-out infinite; }
.float.fb { animation-duration: 12s; animation-delay: -4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.edge { stroke: rgba(255, 255, 255, .5); stroke-width: 1.2; }
.sun { animation: sun 9s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes sun { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.beam-in { stroke-width: 2.4; fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ray { stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.3; fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ray.r1 { stroke: var(--accent); stroke-opacity: 1; stroke-width: 2; }
.ray-pulse { stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; fill: none; stroke-dasharray: .06 .94; stroke-dashoffset: 1; opacity: 0; }
.hnode-ring { stroke-width: 1.4; opacity: .7; transform-box: fill-box; transform-origin: center; animation: ring 3.2s var(--ease) infinite 2.4s; }
@keyframes ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }

html.js .beam-in, html.js .ray { stroke-dashoffset: 1; }
html.js .hnode, html.js .hnode-ring { opacity: 0; }
html.is-loaded .beam-in { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-out) .5s; }
html.is-loaded .ray { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease-out); }
html.is-loaded .ray.r0 { transition-delay: 1.0s; } html.is-loaded .ray.r1 { transition-delay: 1.08s; }
html.is-loaded .ray.r2 { transition-delay: 1.16s; } html.is-loaded .ray.r3 { transition-delay: 1.24s; }
html.is-loaded .ray.r4 { transition-delay: 1.32s; }
html.is-loaded .hnode { opacity: 1; transition: opacity .6s 1.9s; }
html.is-loaded .hnode-ring { opacity: .7; }
html.is-loaded .ray-pulse { opacity: 1; animation: pulse-run 3.6s linear infinite 2.2s; }
.ray-pulse.p1 { animation-delay: 2.6s !important; } .ray-pulse.p2 { animation-delay: 3.4s !important; }
.ray-pulse.p3 { animation-delay: 4.1s !important; } .ray-pulse.p4 { animation-delay: 4.9s !important; }
@keyframes pulse-run { from { stroke-dashoffset: 1.06; } to { stroke-dashoffset: 0; } }

.sp { animation: twinkle 4s ease-in-out infinite; }
.sp.s2 { animation-delay: -1.5s; } .sp.s3 { animation-delay: -2.6s; }
@keyframes twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

.art { padding-bottom: 34px; }
.art-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center; white-space: nowrap;
  font-family: var(--latin); font-style: italic;
  font-size: 15px; letter-spacing: .14em; line-height: 1.6; color: var(--muted);
}

/* ==========================================================================
   Intro / Approach (dark band)
   ========================================================================== */
.intro {
  position: relative; overflow: clip;
  background: var(--ink); color: var(--on-dark);
  padding: clamp(84px, 11vw, 150px) 0;
}
.intro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 100% 0%, rgba(224, 74, 42, .16), transparent 60%),
              radial-gradient(50% 60% at 0% 100%, rgba(80, 130, 160, .12), transparent 60%);
}
.intro-rings {
  position: absolute; right: -12%; top: 50%; width: min(720px, 80vw); height: auto;
  transform: translateY(-50%); pointer-events: none; opacity: .9;
}
.intro-rings circle { fill: rgba(244, 240, 232, .022); stroke: none; }
.intro-rings .dashed { fill: none; }
.intro-rings .dot { fill: var(--accent); stroke: none; }
.intro-rings .dot2 { fill: var(--on-dark); stroke: none; opacity: .6; }
.spin-slow { animation: spin 90s linear infinite; }
.spin-slow.rev { animation-duration: 70s; animation-direction: reverse; }

.intro-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(36px, 7vw, 110px); align-items: end;
}
.intro .eyebrow { color: var(--on-dark-accent); }
.intro h2 {
  margin: 0;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(28px, 3.8vw, 50px); line-height: 1.6; letter-spacing: .05em;
}
.intro-body {
  margin: 0;
  color: var(--on-dark-muted); font-size: 15px; line-height: 2.35;
}

/* ==========================================================================
   Sections / Business
   ========================================================================== */
.section { padding: clamp(84px, 11vw, 150px) 0; }
.section-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  align-items: end; gap: 24px 48px;
  margin-bottom: clamp(56px, 8vw, 112px);
}
.section-head h2, .company h2 {
  margin: 0;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1.25; letter-spacing: .08em;
}
.section-head .eyebrow, .company .eyebrow { margin-bottom: 16px; }
.note { margin: 0; font-size: 13px; line-height: 2.05; color: var(--muted); }

.cards { display: grid; gap: clamp(72px, 10vw, 140px); }

.card { position: relative; }
a.card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-rows: 1fr auto auto auto auto auto 1fr;
  grid-template-areas: "ill ." "ill num" "ill h3" "ill p" "ill tag" "ill link" "ill .";
  column-gap: clamp(36px, 6vw, 96px);
}
a.card:nth-child(even) {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-areas: ". ill" "num ill" "h3 ill" "p ill" "tag ill" "link ill" ". ill";
}
a.card > .card-illust { grid-area: ill; }
a.card > .num { grid-area: num; }
a.card > h3 { grid-area: h3; }
a.card > p { grid-area: p; }
a.card > .tag { grid-area: tag; }
a.card > .card-link { grid-area: link; }
.card-illust {
  display: block; position: relative; overflow: hidden;
  border-radius: 3px;
  background: var(--paper-2);
  aspect-ratio: 4 / 3;
  transition: background .6s var(--ease);
}
.card-illust::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(19, 32, 47, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(19, 32, 47, .045) 1px, transparent 1px);
  background-size: 24px 24px;
}
.card-illust svg { position: absolute; inset: 12% 6%; width: 88%; height: 76%; transition: transform .9s var(--ease-out); }
a.card:hover .card-illust { background: #e6dfd0; }
a.card:hover .card-illust svg { transform: scale(1.04); }

.num { font-family: var(--latin), var(--serif); font-size: 18px; letter-spacing: .1em; line-height: 1.4; color: var(--accent-ink); }
.card h3 {
  margin: 14px 0 18px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(26px, 2.8vw, 38px); line-height: 1.45; letter-spacing: .05em;
  transition: color .35s;
}
a.card:hover h3 { color: var(--accent-ink); }
.card p { margin: 0; font-size: 14.5px; line-height: 2.1; color: var(--muted); max-width: 30em; }
.tag { display: block; margin-top: 20px; font-size: 12.5px; letter-spacing: .08em; color: var(--ink); opacity: .78; }
.card-link {
  display: inline-flex; align-items: center; gap: 14px; justify-self: start;
  margin-top: 36px;
  font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--accent-ink);
}
.link-arrow { display: inline-block; transition: transform .45s var(--ease-out); }
a.card:hover .link-arrow, a.card:focus-visible .link-arrow { transform: translateX(6px); }

/* motif idle + hover choreography */
.wave { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-out), stroke .4s; }
.wave.w4 { stroke-dasharray: .02 .03; opacity: .6; }
.pulse-ring { transform-box: fill-box; transform-origin: center; animation: ring 2.8s var(--ease) infinite; }
.board { transition: transform .6s var(--ease-out); }
a.card:hover .board, .detail-art .board { transform: translate(-3px, 4px) rotate(-3deg); transform-box: fill-box; transform-origin: center; }
a.card:hover .wave.w1 { animation: wave-in .9s var(--ease-out) both; }
a.card:hover .wave.w2 { animation: wave-in .9s var(--ease-out) .08s both; }
a.card:hover .wave.w3 { animation: wave-in .9s var(--ease-out) .16s both; }
@keyframes wave-in { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.node { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease-out); }
a.card:hover .node { transform: scale(1.5); }

.route { stroke-dasharray: 1; stroke-dashoffset: 0; }
.route-alt { stroke-dasharray: .03 .03; opacity: .8; }
a.card:hover .route:not(.route-alt) { animation: wave-in 1.1s var(--ease-out) both; }
.target { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease-out); }
a.card:hover .target { transform: scale(1.18); }
.t2 { animation: spin 30s linear infinite; }

.sh { transform-box: fill-box; transform-origin: center; transition: transform .8s var(--ease-out); }
a.card:hover .sh-c { transform: translate(-8px, -4px); }
a.card:hover .sh-r { transform: translate(8px, 4px) rotate(8deg); }
a.card:hover .sh-t { transform: translateY(-6px); }
.pen { stroke-dasharray: 1; stroke-dashoffset: 0; }
a.card:hover .pen { animation: wave-in 1s var(--ease-out) both; }

.cycle { transform-box: view-box; transform-origin: 120px 100px; transition: transform 1.2s var(--ease-out); }
a.card:hover .cycle { transform: rotate(120deg); }
.orbit-dot { transform-box: view-box; transform-origin: 120px 100px; animation: spin 14s linear infinite; }
.box { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease-out); }
a.card:hover .box { transform: translateY(-5px); }

/* ==========================================================================
   Company
   ========================================================================== */
.company { position: relative; background: var(--paper-2); overflow: clip; }
.company-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.company-head { position: sticky; top: 130px; }
.company-deco { width: min(320px, 100%); height: auto; margin-top: 48px; }
.contour { fill: none; stroke: var(--ink); stroke-opacity: .16; stroke-width: 1; }
.contour:nth-child(odd) { stroke-dasharray: 2 6; stroke-opacity: .28; }
.pin { fill: var(--accent); }
.pin-line { stroke: var(--accent); stroke-width: 1.5; }
.pin-ring { fill: var(--ink); }
.company-deco .pin { animation: bob 4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

dl {
  margin: 0; padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px);
  background: var(--card); border-radius: 3px;
  display: grid; gap: clamp(22px, 2.6vw, 30px);
}
dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 28px; font-size: 15.5px; }
dt { color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: .14em; padding-top: 2px; }
dd { margin: 0; line-height: 1.95; }
dd a { font-family: var(--latin); font-size: 28px; letter-spacing: .03em; line-height: 1.2; color: var(--accent-ink); transition: color .3s; }
dd a:hover { color: var(--ink); }

/* ==========================================================================
   Contact (dark finale)
   ========================================================================== */
.contact {
  position: relative; overflow: clip; text-align: center;
  background: var(--ink); color: var(--on-dark);
  padding: clamp(100px, 13vw, 180px) var(--gutter);
}
.contact-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 55% at 50% 50%, rgba(224, 74, 42, .22), transparent 70%);
}
.contact-rays { position: absolute; left: 50%; top: 50%; width: max(900px, 120%); height: auto; transform: translate(-50%, -50%); }
.contact-rays line, .contact-rays .ring.dashed { display: none; }
.contact-rays .ring { fill: rgba(244, 240, 232, .028); stroke: none; }
.contact-inner { position: relative; }
.contact .eyebrow { color: var(--on-dark-accent); }
.contact h2 {
  margin: 0 0 18px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(32px, 4.8vw, 62px); line-height: 1.3; letter-spacing: .1em;
}
.contact p { margin: 0; font-size: 15px; color: var(--on-dark-muted); }
.contact .button-tel {
  margin-top: 28px; padding: 6px 4px; gap: 18px;
  background: none; color: var(--on-dark);
  font-family: var(--latin); font-weight: 400;
  font-size: clamp(44px, 8vw, 96px); letter-spacing: .02em; line-height: 1.1;
  transition: color .35s var(--ease);
}
.contact .button-tel:hover, .contact .button-tel:focus-visible { background: none; color: var(--on-dark-accent); }
.button-tel .btn-arrow { font-family: var(--sans); font-size: .42em; color: var(--on-dark-accent); }

/* Footer ----------------------------------------------------------------- */
.site-footer { background: var(--ink-2); color: var(--on-dark-muted); font-size: 12px; letter-spacing: .06em; }
.footer-inner {
  max-width: var(--max); margin: 0 auto; padding: 30px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap;
}
.footer-brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 14px; color: var(--on-dark); letter-spacing: .1em; }
.footer-brand .mark { width: 28px; height: 28px; }
.site-footer .mk-bg { fill: var(--on-dark); }
.site-footer .mk-a { fill: var(--ink); }
.to-top { color: var(--on-dark); transition: color .3s; }
.to-top:hover { color: var(--on-dark-accent); }

/* ==========================================================================
   Service pages
   ========================================================================== */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding-top: 28px;
  font-size: 12px; letter-spacing: .08em; color: var(--muted);
}
.breadcrumb a { transition: color .3s; }
.breadcrumb a:hover { color: var(--accent-ink); }
.breadcrumb [aria-hidden="true"] { color: #b6ab96; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }

.detail-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
  padding: clamp(40px, 6vw, 84px) 0 clamp(40px, 6vw, 80px);
}
.detail-hero h1 {
  margin: 0 0 22px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(30px, 5.4vw, 72px); line-height: 1.3; letter-spacing: .05em;
}
.detail-hero .detail-catch {
  margin: 0 0 24px;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(19px, 2.2vw, 27px); line-height: 1.7; letter-spacing: .06em;
  color: var(--accent-ink);
}
.detail-hero .lead { max-width: 560px; }
.detail-art { position: relative; width: 100%; max-width: 520px; justify-self: end; }
.detail-svg { width: 100%; height: auto; }
.detail-art .wave.w1 { animation: wave-loop 4s var(--ease-out) infinite; }
.detail-art .wave.w2 { animation: wave-loop 4s var(--ease-out) .2s infinite; }
.detail-art .wave.w3 { animation: wave-loop 4s var(--ease-out) .4s infinite; }
@keyframes wave-loop { 0% { stroke-dashoffset: 1; } 40%, 100% { stroke-dashoffset: 0; } }
.detail-art .route:not(.route-alt) { animation: wave-loop 5s var(--ease-out) infinite; }
.detail-art .pen { animation: wave-loop 5s var(--ease-out) infinite; }
.detail-art .sh-c { animation: drift-a 9s ease-in-out infinite; }
.detail-art .sh-r { animation: drift-b 11s ease-in-out infinite; }
@keyframes drift-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-8px, -5px); } }
@keyframes drift-b { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(6px, 4px) rotate(6deg); } }
.detail-art .cycle { animation: spin 26s linear infinite; }
.detail-art .box { animation: float 7s ease-in-out infinite; }

.detail-heading {
  margin: 0 0 clamp(32px, 4vw, 52px);
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.35; letter-spacing: .08em;
}
.service-head .eyebrow, .flow-head .eyebrow { margin-bottom: 14px; }

.detail-grid {
  background: var(--paper-2); border-radius: 3px;
  padding: clamp(32px, 5vw, 72px) clamp(24px, 5vw, 72px);
  display: grid; gap: clamp(36px, 4.5vw, 56px);
}
.detail-grid .card {
  display: grid; grid-template-columns: 64px minmax(0, .9fr) minmax(0, 1.25fr);
  gap: 8px clamp(20px, 3vw, 48px); align-items: baseline;
}
.detail-grid .num { font-family: var(--latin); font-style: italic; font-size: 44px; line-height: 1; letter-spacing: 0; color: var(--accent-ink); }
.detail-grid .card h3 { margin: 0; font-size: clamp(19px, 1.9vw, 24px); }
.detail-grid .card p { max-width: none; }
.detail-note { margin: 30px 0 0; font-size: 12.5px; color: var(--muted); }

.approach h2 { font-size: clamp(26px, 3.4vw, 44px); }

.flow-head { margin-bottom: 8px; }
.steps {
  list-style: none; margin: 0; padding: 0;
  counter-reset: steps;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px);
}
.steps li { counter-increment: steps; display: block; padding: 0; }
.steps li:before {
  content: counter(steps);
  display: block; margin-bottom: 18px;
  font-family: var(--latin); font-style: italic; font-size: 72px; line-height: .9; color: var(--accent);
}
.steps h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: .05em; line-height: 1.6; }
.steps p { margin: 0; font-size: 14px; line-height: 2.05; color: var(--muted); }

.back-link {
  display: inline-block; margin-top: clamp(56px, 7vw, 88px);
  font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--accent-ink);
  transition: color .3s, transform .45s var(--ease-out);
}
.back-link:hover { color: var(--ink); transform: translateX(-4px); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .hero-grid, .detail-hero { grid-template-columns: minmax(0, 1fr); }
  .art { justify-self: center; max-width: 480px; margin-top: 8px; }
  .detail-art { justify-self: center; max-width: 440px; }
  .art-label { letter-spacing: .1em; font-size: 14px; }
  a.card, a.card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "ill" "num" "h3" "p" "tag" "link";
  }
  .card-illust { margin-bottom: 28px; aspect-ratio: 16 / 10; }
  .intro-grid, .company-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .intro-rings { right: -40%; top: 0; transform: none; width: 110vw; opacity: .6; }
  .company-head { position: static; }
  .company-deco { display: none; }
  .section-head { grid-template-columns: minmax(0, 1fr); }
  .detail-grid .card { grid-template-columns: 48px minmax(0, 1fr); }
  .detail-grid .card p { grid-column: 2; }
  .detail-grid .num { font-size: 36px; }
}

@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
  .steps li:before { margin: 0; font-size: 56px; }
}

@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .nav { flex-wrap: wrap; padding-top: 14px; padding-bottom: 12px; }
  .site-header.is-scrolled .nav { padding-top: 10px; padding-bottom: 8px; }
  .brand { font-size: 16.5px; gap: 10px; }
  .mark { width: 30px; height: 30px; }
  .site-nav { width: 100%; gap: 22px; font-size: 12.5px; letter-spacing: .06em; }
  .site-nav a { padding: 2px 0; }
  .hero h1 { font-size: clamp(30px, 9.2vw, 44px); }
  .hero .lead br, .intro-body br { display: inline; }
  .lead, .intro-body { font-size: 14px; }
  .card-illust { aspect-ratio: 16 / 10; }
  dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  dd a { font-size: 24px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .button { gap: 28px; }
  .contact .button-tel { gap: 12px; }
  .draft { font-size: 10.5px; letter-spacing: .06em; }
  .detail-grid .card { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .detail-grid .card p { grid-column: auto; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js [data-reveal], html.js .hero-in { opacity: 1; translate: none; }
  html.js .hero h1 .line > span { transform: none; }
  html.js .beam-in, html.js .ray { stroke-dashoffset: 0; }
  html.js .hnode, html.js .hnode-ring { opacity: 1; }
  .ray-pulse { display: none; }
  .plx { transform: none; }
}