/* =========================================================
   MCHub — refinement layer
   Loaded last. Craft-level polish only: texture, depth,
   type detail, mobile ergonomics. No layout changes.
   ========================================================= */

/* ---------------- 1. section texture ----------------
   A whisper-fine dot grid on the grey sections. Invisible as a
   pattern, but it stops large flat areas from reading as "empty". */
.bg-alt { position: relative; }
.bg-alt::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(29,29,31,.19) .5px, transparent .5px);
  background-size: 22px 22px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000, transparent 78%);
}
.bg-alt > * { position: relative; z-index: 1; }
/* the vision block paints its own aurora — keep it clean */
.vision.bg-alt::before, .vision::before { display: none; }

/* ---------------- 2. type detail ---------------- */
/* every figure aligns on a grid — the mark of typographic care */
.date, .num, .stat .num, time, .wk-metaline, .news-item .date { font-variant-numeric: tabular-nums; }
.display { text-wrap: balance; }
.lead, .svc p, .work .meta h3, .wk-body p { text-wrap: pretty; }
/* japanese text sits better with a hair more breathing room */
.svc p, .cta-lead, .footer-desc { letter-spacing: .015em; }
/* section eyebrows: Japanese-set, not wide-tracked Latin.
   The uppercase + .28em tracking + 01/02 index treatment is a stock
   move; a quiet Japanese label with a brand rule reads as considered. */
.eyebrow {
  font-family: var(--font); font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: none; color: var(--ink-soft);
  margin-bottom: 20px; gap: 11px;
}
.eyebrow::before { width: 20px; height: 2px; }
.eyebrow .no { display: none; }
.page-hero .eyebrow { color: var(--ink-soft); }

/* service rows: a Japanese kicker in place of "01 / Web Design" */
.svc-label {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink-soft);
}
.svc-label::before { content: ""; flex: none; width: 20px; height: 2px; border-radius: 2px; background: var(--grad); }
.svc-row h2 { margin-top: 14px; }

/* ---------------- 2b. stats: glass cards ----------------
   Three light glass panels instead of hairline-divided columns.
   Same grid, same content — just given a surface. */
.stats { gap: clamp(12px, 1.4vw, 18px); }
.stat {
  border-left: 0; padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, rgba(255,255,255,.82), rgba(255,255,255,.52));
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 1px 1px rgba(15,23,42,.04), 0 14px 30px -16px rgba(20,32,68,.18),
              inset 0 1px 0 rgba(255,255,255,.85);
  position: relative; overflow: hidden;
  transition: transform .5s var(--ease-spring), box-shadow .5s;
}
.stat:first-child { padding-left: clamp(24px, 2.6vw, 34px); }
/* a soft brand light in the corner of each panel */
.stat::after {
  content: ""; position: absolute; right: -30%; top: -60%; width: 90%; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(43,107,255,.16), rgba(123,63,242,.08) 45%, transparent 70%);
  pointer-events: none;
}
.stat:nth-child(2)::after { background: radial-gradient(circle at 50% 50%, rgba(123,63,242,.15), rgba(43,107,255,.07) 45%, transparent 70%); }
.stat:nth-child(3)::after { background: radial-gradient(circle at 50% 50%, rgba(33,200,214,.16), rgba(43,107,255,.07) 45%, transparent 70%); }
.stat > * { position: relative; z-index: 1; }
.stat:hover { transform: translateY(-4px); box-shadow: 0 1px 1px rgba(15,23,42,.05), 0 22px 44px -20px rgba(20,32,68,.26), inset 0 1px 0 rgba(255,255,255,.9); }

/* label + caption set as Japanese, not wide-tracked Latin */
.stat .lab {
  font-family: var(--font); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: none; color: var(--ink);
  margin-bottom: 16px;
}
.stat .num { font-size: clamp(40px, 4.6vw, 62px); }
.stat .cap { font-size: 13px; line-height: 1.7; color: var(--ink-soft); margin-top: 12px; }
.stat .cap .lab { display: block; margin-bottom: 0; }
.stat .cap .lab + br { display: none; }
.stat .num .u { font-size: .3em; letter-spacing: .02em; }

@media (max-width: 680px){
  .stats { grid-template-columns: 1fr; }
  .stat { display: block; padding: 22px 20px; border-top: 0; }
  .stat:first-child { padding-top: 22px; }
  .stat .num { font-size: clamp(38px, 11vw, 48px); }
  .stat .cap { text-align: left; margin-top: 10px; }
  .stat .lab { margin-bottom: 10px; }
}

/* ---------------- 2c. stats section backdrop ----------------
   Glass needs something worth blurring. A soft brand wash + a
   finer dot grid gives the panels something to sit on. */
.section.bg-alt:has(.stats) {
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(43,107,255,.13), transparent 62%),
    radial-gradient(52% 70% at 88% 12%, rgba(123,63,242,.11), transparent 64%),
    radial-gradient(64% 88% at 62% 108%, rgba(33,200,214,.12), transparent 62%),
    linear-gradient(180deg, #f7f8fb 0%, #eef1f7 100%);
  overflow: hidden;
}
.section.bg-alt:has(.stats)::before {
  background-image: radial-gradient(rgba(29,29,31,.15) .5px, transparent .5px);
  background-size: 26px 26px;
  opacity: .42;
  -webkit-mask-image: radial-gradient(ellipse 110% 90% at 50% 50%, #000 30%, transparent 82%);
  mask-image: radial-gradient(ellipse 110% 90% at 50% 50%, #000 30%, transparent 82%);
}
/* a whisper of grain so the wash doesn't band */
.section.bg-alt:has(.stats)::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 160px 160px; opacity: .04; mix-blend-mode: multiply;
}

/* ---------------- hero keyword cycle ---------------- */
.hero-eyebrow .kw { font-variant-numeric: tabular-nums; }

/* ---------------- stat card art ----------------
   A small CSS diagram in the top-right of each glass panel, in the
   same visual language as the service thumbnails. */
.stat { padding-right: clamp(24px, 2.6vw, 34px); }
/* only the figure needs to clear the art — the caption runs full width */
.stat .num { padding-right: clamp(62px, 7.4vw, 88px); }
.stat .num .u { white-space: nowrap; font-size: .26em; }
/* the longest unit gets a touch more room */
.stat:nth-child(3) .num .u { font-size: .22em; }
.stat-art {
  position: absolute; right: clamp(16px, 1.8vw, 24px); top: clamp(18px, 2vw, 26px);
  width: clamp(66px, 7.6vw, 94px); aspect-ratio: 1; z-index: 1; pointer-events: none;
  transition: transform .6s var(--ease-spring);
}
.stat:hover .stat-art { transform: translateY(-3px) scale(1.04); }

/* web: cascading browser windows */
.stat-art--web i { position: absolute; border-radius: 7px; background: #fff;
  border: 1px solid rgba(29,29,31,.1); box-shadow: 0 4px 12px -6px rgba(20,32,68,.3); }
.stat-art--web .w3 { right: 0; top: 0; width: 74%; height: 58%; opacity: .45; }
.stat-art--web .w2 { right: 8%; top: 12%; width: 74%; height: 58%; opacity: .72; }
.stat-art--web .w1 { right: 16%; top: 24%; width: 78%; height: 62%; display: grid;
  grid-template-rows: auto 1fr; gap: 4px; padding: 6px; align-content: start; }
.stat-art--web .w1 b { display: block; height: 3px; border-radius: 2px; background: rgba(29,29,31,.14); }
.stat-art--web .w1 b:first-child { height: 9px; width: 62%; background: var(--grad); opacity: .85; }
.stat-art--web .w1 b:last-child { width: 74%; }

/* sns: follower curve with a live dot at the peak */
.stat-art--sns { display: grid; place-items: end stretch; }
.stat-art--sns svg { width: 100%; height: 76%; overflow: visible; }
.stat-art--sns .dot { position: absolute; right: -2px; top: 12%; width: 9px; height: 9px;
  border-radius: 50%; background: #7b3ff2; box-shadow: 0 0 0 4px rgba(123,63,242,.16); }

/* movie: a screen with a play glyph, over a waveform */
.stat-art--movie .scr { position: absolute; inset: 4% 0 auto 0; height: 60%;
  border-radius: 9px; background: linear-gradient(150deg, #1a1040, #2b2060);
  display: grid; place-items: center; box-shadow: 0 6px 16px -8px rgba(20,32,68,.5); }
.stat-art--movie .play { width: 0; height: 0; margin-left: 3px;
  border-left: 12px solid rgba(255,255,255,.94); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.stat-art--movie .wave { position: absolute; left: 0; right: 0; bottom: 4%; height: 26%;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 3px; }
.stat-art--movie .wave s { flex: 1; text-decoration: none; border-radius: 2px; background: var(--grad); opacity: .55; }
.stat-art--movie .wave s:nth-child(1) { height: 40%; }
.stat-art--movie .wave s:nth-child(2) { height: 72%; }
.stat-art--movie .wave s:nth-child(3) { height: 100%; }
.stat-art--movie .wave s:nth-child(4) { height: 58%; }
.stat-art--movie .wave s:nth-child(5) { height: 88%; }
.stat-art--movie .wave s:nth-child(6) { height: 46%; }
.stat-art--movie .wave s:nth-child(7) { height: 66%; }

@media (max-width: 680px){
  .stat .num { padding-right: 74px; }
  .stat-art { width: 60px; right: 16px; top: 16px; }
}

/* ---------------- 12. mesh gradient ----------------
   A true mesh: overlapping colour nodes on a tinted plane, so the
   field reads as one continuous surface rather than three drifting
   blobs. Applied to the hero/page-hero/vision aurora containers. */
.hero-aurora {
  background:
    radial-gradient(58% 52% at 12% 18%, rgba(43,107,255,.34), transparent 62%),
    radial-gradient(52% 48% at 88% 12%, rgba(123,63,242,.30), transparent 60%),
    radial-gradient(56% 56% at 74% 84%, rgba(33,200,214,.28), transparent 62%),
    radial-gradient(48% 44% at 26% 92%, rgba(91,140,255,.26), transparent 60%),
    radial-gradient(70% 60% at 50% 50%, rgba(255,255,255,.5), transparent 70%);
  animation: mesh-shift 26s ease-in-out infinite alternate;
}
@keyframes mesh-shift {
  0%   { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; }
  50%  { background-position: 6% 4%, -5% 6%, -4% -5%, 5% -4%, 0% 0%; background-size: 112% 108%, 106% 114%, 114% 106%, 108% 112%, 100% 100%; }
  100% { background-position: -4% 6%, 5% -4%, 6% 4%, -5% 5%, 0% 0%; background-size: 106% 112%, 114% 104%, 104% 114%, 112% 106%, 100% 100%; }
}
@media (prefers-reduced-motion: reduce){ .hero-aurora { animation: none; } }

/* the old blobs stay, but quietly — they add the organic drift that a
   static mesh lacks, without reading as separate shapes */
.hero-aurora i { opacity: .55; }

/* grain lives on .hero::after (outside the blurred aurora) — see home.css.
   Putting it inside .hero-aurora would blur it into a flat wash. */

/* mesh on the CTA band — superseded by the grainy version below */

/* mesh on the stat glass panels, replacing the single corner light */
.stat::after {
  inset: 0; right: auto; top: auto; width: auto; aspect-ratio: auto; opacity: .9;
  background:
    radial-gradient(70% 62% at 88% 8%, rgba(43,107,255,.16), transparent 62%),
    radial-gradient(60% 58% at 12% 96%, rgba(123,63,242,.1), transparent 60%);
}
.stat:nth-child(2)::after {
  background:
    radial-gradient(70% 62% at 88% 8%, rgba(123,63,242,.16), transparent 62%),
    radial-gradient(60% 58% at 12% 96%, rgba(33,200,214,.1), transparent 60%);
}
.stat:nth-child(3)::after {
  background:
    radial-gradient(70% 62% at 88% 8%, rgba(33,200,214,.18), transparent 62%),
    radial-gradient(60% 58% at 12% 96%, rgba(43,107,255,.1), transparent 60%);
}

/* mesh wash on the grey sections — layered into the element's own
   background so it can't be hidden behind the opaque base colour */
.bg-alt {
  background-color: var(--bg-alt);
  background-image:
    radial-gradient(48% 52% at 88% 6%, rgba(43,107,255,.07), transparent 60%),
    radial-gradient(44% 48% at 6% 94%, rgba(123,63,242,.055), transparent 58%);
}

/* ---------------- 12b. grainy mesh ----------------
   The reference look: a saturated colour mass dissolving into a
   heavy, fine-grain speckle. That needs (a) much denser colour and
   (b) grain an order of magnitude stronger than film-grain dusting. */
.hero-aurora {
  background:
    radial-gradient(58% 52% at 12% 18%, rgba(43,107,255,.62), transparent 66%),
    radial-gradient(52% 48% at 88% 12%, rgba(123,63,242,.56), transparent 64%),
    radial-gradient(56% 56% at 74% 84%, rgba(33,200,214,.5), transparent 66%),
    radial-gradient(48% 44% at 26% 92%, rgba(91,140,255,.46), transparent 64%),
    radial-gradient(70% 60% at 50% 46%, rgba(255,255,255,.34), transparent 72%);
  opacity: .62;
}
.hero-aurora i { opacity: .4; }

/* heavy speckle over the mesh, outside the blurred container */
.hero::after, .page-hero::after, .vision::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='hg1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23hg1)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 220px 220px; background-repeat: repeat;
  opacity: .34;
}
/* a second, finer pass in multiply gives the speckle its bite */
.hero::before, .page-hero::before, .vision::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='hg2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23hg2)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 150px 150px; background-repeat: repeat;
  opacity: .2;
}
.vision.bg-alt::before, .vision::before { display: block; }

/* stat section: same grainy treatment, dialled for a light panel field */
.section.bg-alt:has(.stats) {
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(43,107,255,.24), transparent 64%),
    radial-gradient(52% 70% at 88% 12%, rgba(123,63,242,.2), transparent 66%),
    radial-gradient(64% 88% at 62% 108%, rgba(33,200,214,.22), transparent 64%),
    linear-gradient(180deg, #f7f8fb 0%, #eef1f7 100%);
}
.section.bg-alt:has(.stats)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='sg1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23sg1)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 220px 220px; background-repeat: repeat; opacity: .2;
}

/* CTA band: mesh nodes over the base panel gradient.
   Nodes are large and overlapping so the whole panel is covered —
   small nodes left the middle of a wide band unpainted. */
.cta-band {
  background-color: #eef1f7;
  background-image:
    radial-gradient(90% 130% at 4% 6%, rgba(43,107,255,.34), transparent 70%),
    radial-gradient(85% 125% at 96% 10%, rgba(123,63,242,.3), transparent 68%),
    radial-gradient(95% 135% at 78% 98%, rgba(33,200,214,.26), transparent 70%),
    radial-gradient(90% 130% at 18% 96%, rgba(91,140,255,.24), transparent 68%),
    radial-gradient(70% 100% at 50% 50%, rgba(123,63,242,.14), transparent 72%),
    linear-gradient(180deg, #f7f8fb 0%, #eaeef6 100%);
}
.cta-band { isolation: isolate; }
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='ctag'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23ctag)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 220px 220px; background-repeat: repeat; opacity: .17;
}
.cta-band > * { position: relative; z-index: 2; }

/* grain on the stat glass panels too, so they match the field */
.stat { background-blend-mode: normal; }
.stat::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='pg1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23pg1)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 200px 200px; background-repeat: repeat; opacity: .16;
}

@media (prefers-reduced-motion: reduce){ .hero-aurora { animation: none; } }

.hero, .page-hero, .vision, .section.bg-alt:has(.stats), .stat { isolation: isolate; }

/* ---------------- 13. service columns: scroll-linked reveal ----------------
   Each column has its own progress window through the section, so the
   three build up one after another as you scroll — the rule draws
   across, the icon assembles, the copy rises. --p is set by JS. */
.svc { --p: 1; }
.svc .num, .svc .en { display: none; }
.svc-kick {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink-soft);
}
.svc-kick::before { content: ""; flex: none; width: 18px; height: 2px; border-radius: 2px; background: var(--grad); }

/* the top rule draws in with progress (raised specificity so it wins
   over the base rule that appears later in this file) */
.svc-grid .svc::before { width: calc(var(--p) * 100%); transition: none; }
.svc-grid .svc:hover::before { width: 100%; transition: width .5s var(--ease-out); }

/* copy rises as the column comes in */
.svc-kick, .svc h3, .svc p, .svc .more {
  opacity: var(--p);
  transform: translateY(calc((1 - var(--p)) * 18px));
  transition: opacity .1s linear, transform .1s linear;
}
.svc h3 { transition-delay: .02s; }
.svc p { transition-delay: .04s; }
.svc .more { transition-delay: .06s; }

/* ---------------- service column icons ---------------- */
.svc-ico {
  position: relative; width: clamp(56px, 6vw, 74px); aspect-ratio: 1;
  margin: 0 0 clamp(24px, 3.4vw, 40px);
  opacity: var(--p); transform: scale(calc(.88 + var(--p) * .12));
  transition: opacity .12s linear, transform .3s var(--ease-out);
}
.svc:hover .svc-ico { transform: scale(1.05); }

/* web: stacked windows */
.svc-ico--web i { position: absolute; border-radius: 6px; background: #fff;
  border: 1px solid rgba(29,29,31,.12); box-shadow: 0 3px 10px -6px rgba(20,32,68,.34); }
.svc-ico--web .b3 { right: 0; top: 0; width: 74%; height: 56%; opacity: .4; }
.svc-ico--web .b2 { right: 9%; top: 13%; width: 74%; height: 56%; opacity: .7; }
.svc-ico--web .b1 { right: 18%; top: 26%; width: 78%; height: 60%;
  display: grid; grid-template-rows: auto auto auto; gap: 4px; padding: 6px; align-content: start; }
.svc-ico--web .b1 b { display: block; height: 3px; border-radius: 2px; background: rgba(29,29,31,.14); }
.svc-ico--web .b1 b:first-child { height: 8px; width: 60%; background: var(--grad); }
.svc-ico--web .b1 b:last-child { width: 72%; }

/* sns: the curve draws itself with progress */
.svc-ico--sns { display: grid; place-items: end stretch; }
.svc-ico--sns svg { width: 100%; height: 74%; overflow: visible; }
.svc-ico--sns .pk { stroke-dasharray: 200; stroke-dashoffset: calc(200 - var(--p) * 200); }
.svc-ico--sns .pt { position: absolute; right: -1px; top: 8%; width: 8px; height: 8px;
  border-radius: 50%; background: #7b3ff2; box-shadow: 0 0 0 4px rgba(123,63,242,.16);
  opacity: calc((var(--p) - .75) * 4); }

/* it: terminal lines type in with progress */
.svc-ico--it .tm { position: absolute; inset: 6% 0 auto 0; height: 66%;
  border-radius: 7px; background: linear-gradient(150deg, #1a1040, #2b2060);
  display: grid; align-content: center; gap: 5px; padding: 0 9px;
  box-shadow: 0 4px 12px -7px rgba(20,32,68,.5); }
.svc-ico--it .tm s { text-decoration: none; height: 3px; border-radius: 2px; background: rgba(255,255,255,.34); }
.svc-ico--it .tm s:nth-child(1) { width: calc(min(1, var(--p) * 3) * 70%); background: var(--grad); }
.svc-ico--it .tm s:nth-child(2) { width: calc(max(0, min(1, var(--p) * 3 - .8)) * 52%); }
.svc-ico--it .tm s:nth-child(3) { width: calc(max(0, min(1, var(--p) * 3 - 1.6)) * 62%); }
.svc-ico--it .cg { position: absolute; right: 4%; bottom: 2%; width: 34%; aspect-ratio: 1;
  border-radius: 50%; border: 2.5px dashed rgba(43,107,255,.5);
  transform: rotate(calc(var(--p) * 180deg)); transition: transform .2s linear; }

@media (max-width: 880px){
  .svc-ico { margin-bottom: 18px; width: 54px; }
}
@media (prefers-reduced-motion: reduce){
  .svc { --p: 1 !important; }
  .svc-ico, .svc-kick, .svc h3, .svc p, .svc .more { opacity: 1; transform: none; }
}

/* the scroll cue and the news ticker collide below ~1100px
   (centred cue vs. bottom-right card) — drop the cue there */
@media (max-width: 1100px){
  .hero-scroll { display: none; }
}

/* ---------------- 3. hairline craft ---------------- */
/* rules that fade at the ends instead of stopping dead */
.sec-head-row { border-top-width: 0; padding-top: clamp(18px, 2.4vw, 28px); position: relative; }
.sec-head-row::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 34%, var(--line-strong) 100%);
}
.svc-grid, .news-list { position: relative; }

/* ---------------- 4. depth ----------------
   Tighter, more layered shadows read as physical; single big blurs
   read as a CSS default. */
:root {
  --shadow-sm: 0 1px 1px rgba(15,23,42,.04), 0 4px 10px -4px rgba(15,23,42,.06);
  --shadow-md: 0 1px 1px rgba(15,23,42,.05), 0 6px 14px -6px rgba(15,23,42,.08), 0 22px 42px -22px rgba(20,32,68,.22);
}
.work { box-shadow: 0 1px 1px rgba(15,23,42,.035), 0 3px 8px -4px rgba(15,23,42,.05); }

/* ---------------- 5. service columns ----------------
   A gradient tick above each column that draws in on hover: the
   column reads as an active object, not a text block. */
.svc::before {
  content: ""; position: absolute; left: 0; top: -2px; height: 2px;
  background: var(--grad); transition: width .5s var(--ease-out);
}
.svc:hover::before { width: 100%; }
.svc .num { font-variant-numeric: tabular-nums; }
@media (max-width: 880px){ .svc::before { top: -1px; } }

/* ---------------- 6. news rows ---------------- */
/* the home list carries category tags too, so give it the same
   four-column rhythm as the news page */
.news-list .news-item:has(.tag) { grid-template-columns: 112px 96px 1fr auto; }
.news-list .news-item .tag { justify-self: start; white-space: nowrap; }
@media (max-width: 680px){
  .news-list .news-item:has(.tag) { grid-template-columns: 1fr auto; }
  .news-list .news-item:has(.tag) .tag { grid-row: 1; grid-column: 1; }
  .news-list .news-item:has(.tag) .date { grid-row: 1; grid-column: 2; justify-self: end; }
  .news-list .news-item:has(.tag) .ttl { grid-column: 1 / -1; grid-row: 2; }
  .news-list .news-item:has(.tag) .ar { display: none; }
}
.news-item .tag { background: rgba(10,108,255,.05); border-color: rgba(10,108,255,.22); }
.news-item[data-cat="holiday"] .tag, .news-item .tag.holiday {
  color: var(--ink-soft); background: rgba(29,29,31,.04); border-color: var(--line-strong);
}

/* ---------------- 7. works cards ---------------- */
.work .meta { border-top: 1px solid var(--line); }
.work .meta .tag { display: inline-flex; align-items: center; gap: 7px; }
.work .meta .tag::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--grad); flex: none;
}

/* ---------------- 8. CTA band ---------------- */
/* the inset hairline frame is gone by request */
.cta-band::before { display: none; }

/* ---------------- 9. links ---------------- */
a { color: inherit; }
.footer ul a { background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: color .2s, background-size .35s var(--ease-out); }
.footer ul a:hover { background-size: 100% 1px; }

/* ---------------- 10. form polish ---------------- */
.field input::placeholder, .field textarea::placeholder { color: #a9abb3; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(10,108,255,.12);
}

/* ---------------- 11. hero news ticker ----------------
   A single latest notice, bottom-right of the hero, on the same
   glass surface as the stat cards. Cycles every few seconds. */
.hero-ticker {
  position: absolute; z-index: 4;
  right: var(--pad); bottom: clamp(20px, 3.5vw, 38px);
  width: min(420px, calc(100vw - var(--pad) * 2));
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 13px 16px 13px 15px;
  border-radius: var(--r-md);
  background: linear-gradient(158deg, rgba(255,255,255,.84), rgba(255,255,255,.58));
  backdrop-filter: saturate(170%) blur(18px); -webkit-backdrop-filter: saturate(170%) blur(18px);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 1px 1px rgba(15,23,42,.04), 0 14px 30px -16px rgba(20,32,68,.2),
              inset 0 1px 0 rgba(255,255,255,.85);
  opacity: 0; transform: translateY(10px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), box-shadow .4s;
}
.hero-ticker.on { opacity: 1; transform: none; }
.hero-ticker:hover { box-shadow: 0 1px 1px rgba(15,23,42,.05), 0 20px 40px -18px rgba(20,32,68,.28), inset 0 1px 0 rgba(255,255,255,.9); }
.hero-ticker .tk-head {
  font-family: var(--font-en); font-size: 9.5px; font-weight: 700; letter-spacing: .18em;
  writing-mode: vertical-rl; text-orientation: mixed;
  color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text;
  padding-right: 13px; border-right: 1px solid var(--line);
}
.hero-ticker .tk-body { display: grid; gap: 5px; min-width: 0;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.hero-ticker.swap .tk-body { opacity: 0; transform: translateY(-6px); }
.hero-ticker .tk-meta { display: flex; align-items: center; gap: 9px; }
.hero-ticker .tk-tag { flex: none; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--accent);
  background: rgba(10,108,255,.06); border: 1px solid rgba(10,108,255,.2);
  border-radius: var(--r-pill); padding: 2px 9px; }
.hero-ticker[data-cat="holiday"] .tk-tag { color: var(--ink-soft); background: rgba(29,29,31,.04); border-color: var(--line-strong); }
.hero-ticker .tk-date { font-family: var(--font-en); font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.hero-ticker .tk-ttl { font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--ink);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-ticker .tk-ar { color: var(--ink-faint); font-size: 14px; transition: transform .3s var(--ease-spring), color .2s; }
.hero-ticker:hover .tk-ar { transform: translateX(4px); color: var(--accent); }
/* the scroll cue is centred — keep clear of it on wide screens */
@media (min-width: 861px){ .hero-ticker { bottom: clamp(18px, 3vw, 34px); } }
@media (max-width: 860px){
  .hero-ticker { position: static; margin: 30px auto 0; right: auto; bottom: auto;
    width: min(460px, calc(100% - var(--pad) * 2)); opacity: 1; transform: none; }
  .hero-ticker .tk-ttl { white-space: normal; }
}
@media (max-width: 640px){
  .hero-ticker { margin-top: 24px; padding: 12px 14px; gap: 12px; }
  .hero-ticker .tk-ttl { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce){
  .hero-ticker { opacity: 1; transform: none; transition: none; }
  .hero-ticker .tk-body { transition: none; }
}

/* =========================================================
   MOBILE ERGONOMICS
   ========================================================= */
@media (max-width: 640px){
  /* texture is heavier relative to a small screen — dial it back */
  .bg-alt::before { background-size: 18px 18px; opacity: .34; }

  /* comfortable optical size for Japanese body copy */
  body { line-height: 1.75; }
  .svc p { font-size: 14.5px; line-height: 1.9; }

  /* news rows: a real tap target, and a genuine margin from the screen edge
     (the desktop row bleeds outward by design — on a phone that ate the
     page gutter, so it sits inside the content column instead) */
  .news-item { padding: 16px 2px; margin-inline: 0; min-height: 62px; align-content: center; }
  .news-item .ttl { font-size: 15px; line-height: 1.6; margin-top: 2px; }
  .news-item .date { font-size: 12px; }

  /* works cards: title has room to breathe */
  .work .meta { padding: 16px 16px 18px; }
  .work .meta h3 { font-size: 16px; line-height: 1.5; }

  /* stats: keep the figure and its caption visually paired */
  .stat .cap { font-size: 13px; }

  /* section heads sit closer to their content on a small screen */
  .sec-head .lead { margin-top: 14px; }

  /* footer: tighter columns, easier taps */
  .footer ul { gap: 14px; }
  .footer ul a, .footer ul span { display: inline-block; padding-block: 2px; }
}

/* filter bar: swipeable with a fade at the edges instead of a
   scrollbar or a cramped wrap */
@media (max-width: 700px){
  .filter {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 94%, transparent);
  }
  .filter::-webkit-scrollbar { display: none; }
  .filter button { flex: none; scroll-snap-align: start; min-height: 40px; padding: 9px 16px; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce){
  .svc::before { transition: none; }
  .footer ul a { transition: none; }
}