:root {
    --cream: #F6F0E1;
    --paper: #EEE5D2;
    --char: #242524;
    --char-deep: #1B1C1B;
    --orange: #E16424;
    --orange-ink: #A8460F;
    --muted: rgba(36, 37, 36, .70);
    --line: rgba(36, 37, 36, .12);
    --line-dark: rgba(246, 240, 225, .13);
    --display: "Anton", "Arial Narrow", sans-serif;
    --mark: "Montserrat", sans-serif;
    --body: "IBM Plex Sans", system-ui, sans-serif;
    --gutter: clamp(20px, 4.4vw, 64px);
    --max: 1320px;
    --ease: cubic-bezier(.32, .72, 0, 1);
    --spring: cubic-bezier(.34, 1.36, .64, 1);
    --soft: 0 1px 2px rgba(36, 37, 36, .05), 0 22px 44px -22px rgba(36, 37, 36, .30), 0 60px 100px -60px rgba(36, 37, 36, .35);
    interpolate-size: allow-keywords;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 100px; }
  html.menu-open { overflow: hidden; }
  body { margin: 0; background: var(--cream); color: var(--char); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; }
  :focus-visible { outline: 2.5px solid var(--orange); outline-offset: 3px; }
  .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
  .nw { white-space: nowrap; }

  /* paper grain: fixed, non-interactive */
  body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .065; 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 .2 0 0 0 0 .18 0 0 0 0 .15 0 0 0 1 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>"); }

  /* ---------- type ---------- */
  .tag { display: inline-flex; align-items: center; gap: 10px; padding: 8px 15px 8px 12px; border-radius: 999px; background: rgba(36, 37, 36, .05); box-shadow: inset 0 0 0 1px rgba(36, 37, 36, .08);
    font: 600 11px/1 var(--mark); letter-spacing: .22em; text-transform: uppercase; color: var(--orange-ink); }
  .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(225, 100, 36, .5); animation: ping 2.4s var(--ease) infinite; }
  @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(225, 100, 36, .45); } 70%, 100% { box-shadow: 0 0 0 9px rgba(225, 100, 36, 0); } }
  .dark .tag { background: rgba(246, 240, 225, .06); box-shadow: inset 0 0 0 1px var(--line-dark); color: var(--orange); }
  .h2 { font: 400 clamp(52px, 7.4vw, 112px)/.9 var(--display); text-transform: uppercase; letter-spacing: .004em; margin: 0; }
  .h2 em { font-style: normal; color: var(--orange); }
  .lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--muted); max-width: 40ch; }
  .dark .lede { color: rgba(246, 240, 225, .72); }
  .dot { display: inline-block; width: .22em; height: .22em; background: var(--orange); margin-left: .1em; }

  /* ---------- island buttons ---------- */
  .btn { display: inline-flex; align-items: center; gap: 16px; min-height: 60px; padding: 0 8px 0 26px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer;
    font: 700 13.5px/1 var(--mark); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
    transition: translate .7s var(--ease), scale .35s var(--ease), background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease); }
  .btn:active { scale: .97; }
  .btn .bi { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; transition: translate .7s var(--ease), scale .5s var(--spring), background-color .45s var(--ease); }
  .btn .bi svg { width: 19px; height: 19px; }
  .btn:hover .bi { scale: 1.08; }
  .btn-wa { background: var(--orange); color: var(--char); box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 14px 30px -14px rgba(225, 100, 36, .95); }
  .btn-wa .bi { background: var(--char); color: var(--orange); }
  .btn-wa:hover { background: #EB6E2D; }
  .btn-ghost { background: transparent; color: var(--char); box-shadow: inset 0 0 0 1.5px rgba(36, 37, 36, .85); }
  .btn-ghost .bi { background: rgba(36, 37, 36, .08); }
  .btn-ghost:hover { background: var(--char); color: var(--cream); }
  .btn-ghost:hover .bi { background: rgba(246, 240, 225, .14); color: var(--orange); }
  .btn-dark { background: var(--char); color: var(--cream); }
  .btn-dark .bi { background: var(--orange); color: var(--char); }
  .btn-dark:hover { background: #111; }
  .cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

  /* ---------- floating island nav ---------- */
  .nav-shell { position: fixed; top: 14px; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; padding: 0 14px; pointer-events: none; }
  .island { pointer-events: auto; width: min(1200px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 7px 7px 7px 24px; border-radius: 999px;
    background: rgba(246, 240, 225, .72); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: 0 0 0 1px rgba(36, 37, 36, .08), 0 10px 30px -16px rgba(36, 37, 36, .35);
    animation: drop 1.1s var(--ease) both .1s; transition: box-shadow .5s var(--ease), background-color .5s var(--ease); }
  .scrolled .island { background: rgba(246, 240, 225, .86); box-shadow: 0 0 0 1px rgba(36, 37, 36, .09), 0 18px 40px -18px rgba(36, 37, 36, .45); }
  @keyframes drop { from { translate: 0 -140%; opacity: 0; } to { translate: 0 0; opacity: 1; } }
  .brand { font: 600 14px/1 var(--mark); letter-spacing: .4em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
  .links { display: flex; gap: clamp(20px, 2.6vw, 38px); }
  .links a { font: 600 11.5px/1 var(--mark); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; position: relative; padding: 10px 0; }
  .links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease); }
  .links a:hover::after { transform: scaleX(1); transform-origin: left; }
  .nav-right { display: flex; align-items: center; gap: 8px; }
  .nav-cta { min-height: 48px; padding: 0 5px 0 20px; font-size: 11.5px; gap: 12px; }
  .nav-cta .bi { width: 38px; height: 38px; }
  .nav-cta .bi svg { width: 17px; height: 17px; }
  .burger { display: none; position: relative; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--char); cursor: pointer; }
  .burger span { position: absolute; left: 15px; right: 15px; height: 1.8px; border-radius: 2px; background: var(--cream); transition: transform .6s var(--ease), top .6s var(--ease); }
  .burger span:nth-child(1) { top: 20px; } .burger span:nth-child(2) { top: 27px; }
  .menu-open .burger span:nth-child(1) { top: 23.5px; transform: rotate(45deg); }
  .menu-open .burger span:nth-child(2) { top: 23.5px; transform: rotate(-45deg); }

  .menu { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: center; padding: 120px 28px 140px;
    background: rgba(27, 28, 27, .9); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: var(--cream);
    opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s; }
  .menu-open .menu { opacity: 1; visibility: visible; transition: opacity .6s var(--ease); }
  .menu nav { display: grid; gap: 6px; }
  .menu a.m { display: block; overflow: hidden; text-decoration: none; font: 400 clamp(46px, 13vw, 72px)/1.02 var(--display); text-transform: uppercase; }
  .menu a.m span { display: inline-block; translate: 0 110%; transition: translate .8s var(--ease); }
  .menu-open .menu a.m span { translate: 0 0; transition-delay: calc(var(--i) * 70ms + 120ms); }
  .menu a.m:hover span { color: var(--orange); }
  .menu .mfoot { margin-top: 44px; opacity: 0; translate: 0 20px; transition: opacity .6s var(--ease), translate .8s var(--ease); }
  .menu-open .menu .mfoot { opacity: 1; translate: 0 0; transition-delay: .45s; }
  .menu .mfoot p { font: 500 15px/1.5 var(--body); color: rgba(246, 240, 225, .6); margin: 0 0 16px; }

  /* ---------- hero ---------- */
  .hero { position: relative; padding: 150px 0 clamp(80px, 9vw, 130px); }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
  .hero h1 { font: 400 clamp(64px, 9vw, 120px)/.86 var(--display); text-transform: uppercase; margin: 26px 0 28px; letter-spacing: .002em; }
  .hero h1 .ln { display: block; overflow: hidden; padding-bottom: .04em; white-space: nowrap; }
  .hero h1 .ln > span { display: inline-block; animation: rise 1.15s var(--ease) both; animation-delay: calc(var(--i) * 110ms + 220ms); }
  .hero h1 .or { color: var(--orange); }
  @keyframes rise { from { translate: 0 105%; } to { translate: 0 0; } }
  .fade-up { animation: fadeUp 1.1s var(--ease) both; animation-delay: var(--d, 0ms); }
  @keyframes fadeUp { from { opacity: 0; translate: 0 22px; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
  .hero .lede { margin: 0 0 34px; }
  .micro { margin: 16px 0 0; font: 500 14px/1.45 var(--body); color: var(--muted); }
  .facts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 28px 0 0; padding: 0; list-style: none; font: 500 14px/1.4 var(--body); color: var(--muted); }
  .facts li { display: flex; align-items: center; gap: 10px; }
  .facts li::before { content: ""; width: 7px; height: 7px; background: var(--orange); flex: none; }

  .hero-media { position: relative; perspective: 1400px; }
  .bezel { padding: 8px; border-radius: 34px; background: rgba(36, 37, 36, .045); box-shadow: inset 0 0 0 1px rgba(36, 37, 36, .07), var(--soft); }
  .bezel > .core { position: relative; border-radius: 26px; overflow: hidden; background: var(--char); }
  .bezel > .core::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 1px rgba(255,255,255,.22); }
  .hero .frame { will-change: transform; transform-style: preserve-3d; }
  .hero .frame .core { aspect-ratio: 4 / 4.6; }
  .hero .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; scale: 1.06; animation: settle 1.8s var(--ease) both .15s; }
  @keyframes settle { from { scale: 1.16; opacity: .3; } to { scale: 1.06; opacity: 1; } }
  .hero-cap { position: absolute; right: 8px; top: calc(100% + 18px); width: 46%; margin: 0; font: 500 13.5px/1.45 var(--body); color: var(--muted); text-align: right; }
  .hero-cap b { color: var(--char); font-weight: 600; }

  /* rotating CTA badge */
  .badge { position: absolute; top: -44px; right: -30px; z-index: 5; width: 138px; height: 138px; display: block; border-radius: 50%; text-decoration: none; transition: scale .6s var(--spring); }
  .badge:hover { scale: 1.07; }
  .badge .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
  .badge .core-dot { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--orange); color: var(--char); display: grid; place-items: center; box-shadow: 0 8px 18px -8px rgba(225,100,36,.9); transition: scale .6s var(--spring); }
  .badge .core-dot svg { width: 24px; height: 24px; }
  .badge:hover .core-dot { scale: 1.12; }

  /* ---------- WhatsApp demo ---------- */
  .chat { position: absolute; left: clamp(-92px, -5vw, -24px); bottom: -84px; z-index: 4; width: min(360px, 86vw); padding: 7px; border-radius: 32px;
    background: rgba(252, 250, 245, .9); box-shadow: inset 0 0 0 1px rgba(36, 37, 36, .07), var(--soft); will-change: transform;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
  .chat .screen { border-radius: 25px; overflow: hidden; background: #EFEAE2; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
  .chat-head { display: flex; align-items: center; gap: 11px; padding: 12px 16px; background: #F7F5F3; border-bottom: 1px solid rgba(0,0,0,.06); }
  .chat-av { width: 38px; height: 38px; border-radius: 50%; background: var(--char); display: grid; place-items: center; flex: none; }
  .chat-av i { width: 9px; height: 9px; background: var(--orange); }
  .chat-name { font-weight: 600; font-size: 15.5px; line-height: 1.2; color: #111B21; }
  .chat-status { position: relative; height: 16px; font-size: 12.5px; line-height: 16px; color: #667781; overflow: hidden; }
  .chat-status span { display: block; transition: translate .45s var(--ease), opacity .45s var(--ease); }
  .chat-status .ty { position: absolute; left: 0; top: 0; color: #1DA851; translate: 0 100%; opacity: 0; }
  .chat-status.typing .on { translate: 0 -100%; opacity: 0; }
  .chat-status.typing .ty { translate: 0 0; opacity: 1; }
  .chat-body { position: relative; height: 312px; padding: 12px 12px 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden;
    background-image: radial-gradient(rgba(120, 100, 70, .09) 1px, transparent 1.2px); background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px); mask-image: linear-gradient(to bottom, transparent 0, #000 56px); }
  .chat-body [hidden] { display: none !important; }
  .msg { flex: none; max-width: 84%; padding: 7px 10px 6px; border-radius: 12px; font-size: 14.5px; line-height: 1.35; color: #111B21; box-shadow: 0 1px .5px rgba(11,20,26,.13); will-change: transform, opacity; }
  .msg.out { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 4px; transform-origin: 100% 100%; }
  .msg.in { align-self: flex-start; background: #fff; border-top-left-radius: 4px; transform-origin: 0 100%; }
  .msg .t { display: block; text-align: right; font-size: 11px; color: #667781; margin-top: 2px; }
  .msg .t svg { width: 15px; height: 10px; vertical-align: -1px; margin-left: 3px; }
  .msg .pic { display: block; width: calc(100% + 12px); max-width: 190px; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin: -3px -6px 6px; }
  .typing-dots { flex: none; align-self: flex-start; background: #fff; border-radius: 12px; border-top-left-radius: 4px; padding: 11px 14px; display: inline-flex; gap: 4px; box-shadow: 0 1px .5px rgba(11,20,26,.13); transform-origin: 0 100%; }
  .typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: #9AA5AC; animation: blink 1.1s var(--ease) infinite; }
  .typing-dots span:nth-child(2) { animation-delay: .15s; } .typing-dots span:nth-child(3) { animation-delay: .3s; }
  @keyframes blink { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }
  .chat-replies { padding: 10px 10px 12px; background: #F7F5F3; border-top: 1px solid rgba(0,0,0,.06); }
  .chat-replies p { margin: 0 4px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: #667781; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; color: #111B21; text-decoration: none; font-size: 13px; font-weight: 500;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 1px rgba(0,0,0,.04); transition: translate .5s var(--spring), box-shadow .4s var(--ease), background-color .4s var(--ease); }
  .chip:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1.5px var(--orange), 0 8px 16px -10px rgba(225,100,36,.8); }
  .js .chip { opacity: 0; translate: 0 8px; }
  .chips.in .chip { opacity: 1; translate: 0 0; transition: opacity .6s var(--ease) calc(var(--i) * 80ms + 300ms), translate .7s var(--spring) calc(var(--i) * 80ms + 300ms), box-shadow .4s var(--ease); }
  .chips.in .chip:hover { translate: 0 -2px; transition-delay: 0s; }

  /* ---------- marquee ---------- */
  .ticker { background: var(--char); color: var(--cream); overflow: hidden; }
  .ticker .row { display: flex; width: max-content; animation: slide 46s linear infinite; }
  .ticker:hover .row { animation-play-state: paused; }
  .ticker ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
  .ticker li { font: 400 clamp(30px, 3.6vw, 50px)/1 var(--display); text-transform: uppercase; padding: 26px 0; white-space: nowrap; display: flex; align-items: center; }
  .ticker li::after { content: ""; width: 12px; height: 12px; background: var(--orange); margin: 0 clamp(22px, 2.6vw, 40px); }
  .ticker li.lbl { font: 600 12px/1 var(--mark); letter-spacing: .26em; color: var(--orange); }
  @keyframes slide { to { transform: translateX(-50%); } }

  /* ---------- sections ---------- */
  section { position: relative; }
  .sec { padding: clamp(96px, 12vw, 168px) 0; }
  .sec-head { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px 64px; align-items: end; margin-bottom: clamp(44px, 5.4vw, 80px); }
  .sec-head .tag { grid-column: 1 / -1; justify-self: start; }
  .sec-head .lede { margin: 0; justify-self: end; }

  /* two ways */
  .twoway { background: var(--paper); }
  .ways { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1.5px solid var(--char); }
  .way { padding: 30px clamp(20px, 3vw, 44px) 6px 0; }
  .way + .way { padding-left: clamp(20px, 3vw, 44px); padding-right: 0; border-left: 1px solid var(--line); }
  .way h3 { font: 700 12px/1.3 var(--mark); letter-spacing: .24em; text-transform: uppercase; margin: 0 0 14px; color: var(--muted); }
  .way.us h3 { color: var(--orange-ink); }
  .way ul { list-style: none; margin: 0; padding: 0; }
  .way li { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font: 400 clamp(24px, 2.5vw, 36px)/1.1 var(--display); text-transform: uppercase; }
  .way.us li:last-child { border-bottom: 0; }
  .way.them .t { position: relative; transition: color .9s var(--ease) calc(var(--i) * 170ms + 250ms); }
  .way.them .t::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 3.5px; margin-top: -2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .75s var(--ease) calc(var(--i) * 170ms + 250ms); }
  .ways.in .way.them .t { color: rgba(36, 37, 36, .34); }
  .ways.in .way.them .t::after { transform: scaleX(1); }
  .way.us li::before { content: ""; width: 12px; height: 12px; background: var(--orange); flex: none; scale: 0; transition: scale .7s var(--spring) calc(var(--i) * 150ms + 1150ms); }
  .way.us li .t { opacity: .18; translate: -8px 0; transition: opacity .8s var(--ease) calc(var(--i) * 150ms + 1150ms), translate .9s var(--ease) calc(var(--i) * 150ms + 1150ms); }
  .ways.in .way.us li::before { scale: 1; }
  .ways.in .way.us li .t { opacity: 1; translate: 0 0; }

  /* services bento */
  .svc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
  .svc { position: relative; border-radius: 30px; overflow: hidden; isolation: isolate; background: var(--paper); padding: clamp(28px, 3vw, 42px); display: flex; flex-direction: column; min-height: 300px;
    box-shadow: inset 0 0 0 1px rgba(36, 37, 36, .05); transition: transform 1s var(--ease), box-shadow .6s var(--ease), opacity 1s var(--ease), translate 1.2s var(--ease), filter 1s var(--ease); }
  .svc.hot { transition: transform .25s var(--ease), box-shadow .6s var(--ease), opacity 1s var(--ease), translate 1.2s var(--ease), filter 1s var(--ease); box-shadow: inset 0 0 0 1px rgba(36, 37, 36, .05), var(--soft); }
  .glow { position: absolute; left: 0; top: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; pointer-events: none; z-index: 2; opacity: 0;
    background: radial-gradient(closest-side, rgba(255, 248, 236, .28), rgba(255, 248, 236, 0)); transition: opacity .6s var(--ease); }
  .svc-c .glow { background: radial-gradient(closest-side, rgba(225, 100, 36, .16), rgba(225, 100, 36, 0)); }
  .hot .glow { opacity: 1; }
  .svc h3 { font: 400 clamp(34px, 3.4vw, 50px)/.95 var(--display); text-transform: uppercase; margin: 0 0 14px; }
  .svc p { margin: 0; color: var(--muted); max-width: 36ch; }
  .svc .tags { margin-top: auto; padding-top: 26px; font: 600 11px/1.6 var(--mark); letter-spacing: .2em; text-transform: uppercase; color: var(--orange-ink); }
  .svc .num { position: absolute; top: clamp(24px, 2.6vw, 34px); right: clamp(26px, 2.8vw, 38px); font: 400 15px/1 var(--display); color: rgba(36,37,36,.35); letter-spacing: .06em; z-index: 3; }
  .svc-a { grid-column: span 5; grid-row: span 2; min-height: 640px; color: var(--cream); background: var(--char); justify-content: flex-end; padding: 0; }
  .svc-a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: scale 1.4s var(--ease); z-index: -1; }
  .svc-a:hover img { scale: 1.05; }
  .svc-a .txt { position: relative; padding: clamp(28px, 3vw, 42px); padding-top: 150px; background: linear-gradient(to top, rgba(27,28,27,.96) 32%, rgba(27,28,27,0)); }
  .svc-a p { color: rgba(246,240,225,.8); }
  .svc-a .tags { color: var(--orange); padding-top: 18px; }
  .svc-a .num { color: rgba(246,240,225,.6); }
  .svc-b, .svc-c { grid-column: span 7; }
  .svc-b { background: var(--orange); }
  .svc-b p { color: rgba(27,28,27,.84); }
  .svc-b .tags, .svc-b .num { color: var(--char); }
  .svc-d { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding: 0; background: var(--char); color: var(--cream); min-height: 420px; }
  .svc-d .img { position: relative; min-height: 320px; overflow: hidden; }
  .svc-d .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; transition: scale 1.4s var(--ease); }
  .svc-d:hover .img img { scale: 1.05; }
  .svc-d .txt { padding: clamp(30px, 3.6vw, 58px); display: flex; flex-direction: column; justify-content: center; position: relative; }
  .svc-d p { color: rgba(246,240,225,.76); }
  .svc-d .tags { color: var(--orange); margin-top: 26px; padding-top: 0; }
  .svc-d .num { color: rgba(246,240,225,.5); }

  /* how it works */
  .dark { background: var(--char); color: var(--cream); }
  .weave { position: absolute; inset: 0; pointer-events: none; opacity: .9;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'><g stroke='%232C2D2B' stroke-width='1.6'><path d='M0 0l8 8M4 0l8 8M8 0l8 8M-4 0L4 8M0 8l8 8M4 8l8 8M8 8l8 8M-4 8L4 16'/><path d='M32 0l-8 8M28 0l-8 8M24 0l-8 8M36 0L28 8M32 8l-8 8M28 8l-8 8M24 8l-8 8M36 8L28 16'/></g></svg>");
    background-size: 32px 16px; -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.25)); mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.25)); }
  .dark .wrap { position: relative; }
  /* timeline: per-step connectors, so the line always runs dot-to-dot in any layout */
  .steps-wrap { position: relative; }
  .steps { --pad: clamp(18px, 2.2vw, 34px); --t0: 250ms; --seg: 650ms; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: s; }
  .steps li { --at: calc(var(--t0) + var(--i) * var(--seg)); position: relative; padding: 42px var(--pad) 8px 0; counter-increment: s; }
  .steps li + li { padding-left: var(--pad); }
  .steps li::before { content: counter(s); display: block; font: 400 clamp(84px, 8vw, 124px)/.8 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--orange); margin-bottom: 26px;
    transition: color .6s var(--ease) var(--at); }
  .steps-wrap.in li::before { color: var(--orange); }
  .steps li::after { content: ""; position: absolute; top: -5.5px; left: 0; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: var(--char); box-shadow: inset 0 0 0 2px rgba(246, 240, 225, .3);
    transition: background-color .45s var(--ease) var(--at), box-shadow .6s var(--ease) var(--at); }
  .steps li + li::after { left: var(--pad); }
  .steps-wrap.in li::after { background: var(--orange); box-shadow: 0 0 0 5px rgba(225, 100, 36, .2); }
  .seg { position: absolute; top: -1px; left: 5.5px; width: 100%; height: 2px; background: rgba(246, 240, 225, .14); border-radius: 2px; overflow: hidden; }
  .steps li:first-child .seg { width: calc(100% + var(--pad)); }
  .steps li + li .seg { left: calc(var(--pad) + 5.5px); }
  .seg i { position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--seg) cubic-bezier(.65, 0, .35, 1) var(--at); }
  .steps-wrap.in .seg i { transform: scaleX(1); }
  .steps h3 { font: 700 13.5px/1.3 var(--mark); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 12px; }
  .steps p { margin: 0; color: rgba(246,240,225,.72); font-size: 16px; }
  .promise { margin-top: clamp(60px, 7vw, 100px); padding: 7px; border-radius: 999px; background: rgba(246, 240, 225, .04); box-shadow: inset 0 0 0 1px var(--line-dark); }
  .promise .in-core { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 36px; padding: 8px 8px 8px 34px; border-radius: 999px; background: rgba(246, 240, 225, .04); }
  .promise p { margin: 0; font: 400 clamp(22px, 2.3vw, 32px)/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
  .promise p em { font-style: normal; color: var(--orange); }

  /* four promises */
  .promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
  .pr-shell { padding: 6px; border-radius: 32px; background: rgba(36, 37, 36, .04); box-shadow: inset 0 0 0 1px rgba(36, 37, 36, .06); }
  .pr-shell.in { transition: opacity 1s var(--ease), translate .8s var(--ease), filter 1s var(--ease), box-shadow .6s var(--ease); transition-delay: 0s; }
  .pr-shell.in:hover { translate: 0 -6px; box-shadow: inset 0 0 0 1px rgba(36, 37, 36, .06), var(--soft); }
  .pr { height: 100%; border-radius: 26px; background: var(--paper); padding: clamp(24px, 2.6vw, 34px); box-shadow: inset 0 1px 1px rgba(255,255,255,.6); }
  .pr .ic { width: 52px; height: 52px; border-radius: 16px; background: var(--char); display: grid; place-items: center; transition: rotate .7s var(--spring); }
  .pr-shell:hover .ic { rotate: -8deg; }
  .pr .ic svg { width: 26px; height: 26px; overflow: visible; }
  .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) calc(var(--i, 0) * 160ms + 350ms); }
  .promises.in .draw { stroke-dashoffset: 0; }
  .pr h3 { font: 400 clamp(26px, 2.15vw, 33px)/.95 var(--display); text-transform: uppercase; margin: 24px 0 12px; }
  .pr p { margin: 0; color: var(--muted); font-size: 16px; }
  .fee-note { margin: clamp(30px, 3vw, 42px) 0 0; font: 500 clamp(16px, 1.3vw, 18px)/1.5 var(--body); color: var(--muted); }
  .fee-note b { color: var(--char); font-weight: 600; }

  /* estate */
  .estate { background: var(--paper); }
  .estate .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
  .estate figure { margin: 0; }
  .estate .bezel { transition: transform 1s var(--ease); }
  .estate .bezel.hot { transition: transform .25s var(--ease); }
  .estate figcaption { margin-top: 16px; font: 500 13.5px/1.45 var(--body); color: var(--muted); }
  .estate .h2 { font-size: clamp(46px, 5.6vw, 86px); margin: 22px 0 22px; }
  .estate .lede { margin: 0 0 34px; }

  /* faq */
  .faq .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
  .faq .aside { position: sticky; top: 120px; }
  .faq .aside .h2 { margin-top: 22px; }
  .faq .aside .lede { margin: 22px 0 0; }
  .qa { border-top: 1.5px solid var(--char); }
  .qa details { border-bottom: 1px solid var(--line); }
  .qa details::details-content { block-size: 0; overflow-y: clip; transition: block-size .6s var(--ease), content-visibility .6s allow-discrete; }
  .qa details[open]::details-content { block-size: auto; }
  .qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; font: 600 clamp(17px, 1.5vw, 20px)/1.35 var(--body); }
  .qa summary span { transition: translate .6s var(--ease); }
  .qa summary:hover span { translate: 6px 0; }
  .qa summary::-webkit-details-marker { display: none; }
  .qa summary i { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; background: rgba(36, 37, 36, .06); transition: background-color .4s var(--ease), rotate .6s var(--ease); }
  .qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 11px; top: 17px; width: 14px; height: 2px; background: var(--orange); transition: transform .6s var(--ease); }
  .qa summary i::after { transform: rotate(90deg); }
  .qa details[open] summary i { background: var(--char); rotate: 180deg; }
  .qa details[open] summary i::after { transform: rotate(0); }
  .qa .a { padding: 0 56px 28px 0; color: var(--muted); }
  .qa .a p { margin: 0; }

  /* final */
  .final { background: var(--orange); color: var(--char); overflow: hidden; }
  .final .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px 64px; align-items: end; }
  .final h2 { font: 400 clamp(72px, 12.5vw, 200px)/.84 var(--display); text-transform: uppercase; margin: 0; letter-spacing: .002em; }
  .final h2 .w { display: inline-block; white-space: nowrap; }
  .final h2 .l { display: inline-block; translate: 0 calc(var(--p, 0) * -0.13em); transition: color .35s var(--ease); }
  .final h2 .l.hi { color: var(--cream); }
  .final .sub { font: 500 clamp(17px, 1.4vw, 20px)/1.5 var(--body); margin: 28px 0 34px; max-width: 42ch; }
  .final .btn-ghost { box-shadow: inset 0 0 0 1.5px var(--char); }
  .final .btn-ghost .bi { background: rgba(36, 37, 36, .1); }
  .qr-shell { padding: 8px; border-radius: 30px; background: rgba(36, 37, 36, .12); rotate: 2.5deg; }
  .qr-shell.in { transition: transform 1s var(--ease), opacity 1s var(--ease), translate 1.2s var(--ease), filter 1s var(--ease); }
  .qr-shell.in.hot { transition: transform .25s var(--ease), opacity 1s var(--ease), translate 1.2s var(--ease), filter 1s var(--ease); }
  .qrcard { background: var(--cream); padding: 22px 22px 18px; width: 240px; border-radius: 23px; box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 24px 50px -24px rgba(27,28,27,.55); }
  .qrcard img { width: 100%; aspect-ratio: 1; }
  .qrcard p { margin: 14px 0 0; font: 600 11px/1.5 var(--mark); letter-spacing: .2em; text-transform: uppercase; text-align: center; }

  /* footer */
  .foot { background: var(--char-deep); color: var(--cream); padding: clamp(70px, 8vw, 116px) 0 36px; }
  .foot .grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
  .foot .big { font: 600 clamp(22px, 2.3vw, 32px)/1 var(--mark); letter-spacing: .38em; white-space: nowrap; text-transform: uppercase; margin: 0 0 18px; }
  .foot .tagline { color: rgba(246,240,225,.6); margin: 0; }
  .foot h4 { font: 600 11px/1 var(--mark); letter-spacing: .24em; text-transform: uppercase; color: var(--orange); margin: 6px 0 18px; }
  .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: rgba(246,240,225,.8); font-size: 15.5px; }
  .foot ul a { text-decoration: none; transition: color .4s var(--ease); } .foot ul a:hover { color: var(--orange); }
  .foot .base { margin-top: clamp(56px, 7vw, 90px); padding-top: 24px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13.5px; color: rgba(246,240,225,.5); }

  .actionbar { display: none; }

  /* scroll reveal: heavy fade-up */
  .js .rv { opacity: 0; translate: 0 40px; filter: blur(8px); transition: opacity 1s var(--ease), translate 1.2s var(--ease), filter 1s var(--ease); transition-delay: var(--d, 0ms); }
  .js .rv.in { opacity: 1; translate: 0 0; filter: none; }

  /* ---------- responsive ---------- */
  @media (max-width: 1080px) {
    .svc-a { grid-column: span 12; grid-row: auto; min-height: 520px; }
    .svc-b, .svc-c { grid-column: span 6; }
    .steps { grid-template-columns: minmax(0, 1fr); padding-left: 46px; }
    .steps li, .steps li + li { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 0 0 56px 0; }
    .steps li:last-child { padding-bottom: 0; }
    .steps li::before { grid-row: 1 / span 2; margin: -4px 0 0; font-size: 104px; }
    .steps h3, .steps p { grid-column: 2; max-width: 52ch; }
    .steps h3 { margin-top: 6px; }
    .steps li::after, .steps li + li::after { top: 10px; left: -46px; }
    .seg, .steps li:first-child .seg, .steps li + li .seg { top: 15.5px; left: -41.5px; width: 2px; height: 100%; }
    .seg i { transform: scaleY(0); transform-origin: top; }
    .steps-wrap.in .seg i { transform: scaleY(1); }
    .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) {
    .links { display: none; }
    .burger { display: block; }
    .nav-cta .txt { display: none; }
    .nav-cta { padding: 0 5px; }
    .hero { padding-top: 124px; }
    .hero .wrap, .estate .wrap, .faq .wrap, .final .wrap, .sec-head { grid-template-columns: minmax(0, 1fr); }
    .sec-head .lede { justify-self: start; }
    .hero-media { margin-top: 18px; margin-bottom: 250px; }
    .hero .frame .core { aspect-ratio: 4 / 4.2; }
    .hero-cap { display: none; }
    .chat { left: 10px; bottom: -232px; width: min(360px, calc(100% - 20px)); }
    .chat-body { height: 244px; }
    .badge { width: 108px; height: 108px; top: -30px; right: -6px; }
    .badge .core-dot { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
    .ways { grid-template-columns: minmax(0, 1fr); }
    .way + .way { padding-left: 0; border-left: 0; border-top: 1.5px solid var(--char); margin-top: 26px; }
    .svc-d { grid-template-columns: minmax(0, 1fr); }
    .faq .aside { position: static; }
    .qr-shell { display: none; }
    .foot .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .foot .grid > :first-child { grid-column: 1 / -1; }
  }
  @media (max-width: 640px) {
    body { font-size: 16px; padding-bottom: 84px; }
    .island { padding: 6px 6px 6px 18px; }
    .brand { font-size: 12.5px; letter-spacing: .34em; }
    .nav-cta { display: none; }
    .burger { width: 44px; height: 44px; }
    .burger span { left: 14px; right: 14px; }
    .burger span:nth-child(1) { top: 18px; } .burger span:nth-child(2) { top: 25px; }
    .menu-open .burger span:nth-child(1), .menu-open .burger span:nth-child(2) { top: 21.5px; }
    .hero { padding-top: 108px; }
    .hero h1 { font-size: clamp(58px, 17.5vw, 96px); }
    .cta-row .btn { width: 100%; justify-content: space-between; }
    .svc-b, .svc-c { grid-column: span 12; min-height: 0; }
    .svc { min-height: 0; border-radius: 26px; }
    .svc-a { min-height: 0; }
    .svc-a img { position: relative; height: 300px; object-position: 50% 18%; z-index: 0; }
    .svc-a .txt { padding-top: 26px; background: var(--char); }
    .steps { padding-left: 34px; }
    .steps li, .steps li + li { grid-template-columns: 58px minmax(0, 1fr); column-gap: 16px; padding-bottom: 44px; }
    .steps li:last-child { padding-bottom: 0; }
    .steps li::before { font-size: 66px; }
    .steps h3 { margin-top: 2px; }
    .steps li::after, .steps li + li::after { top: 6px; left: -34px; }
    .seg, .steps li:first-child .seg, .steps li + li .seg { top: 11.5px; left: -29.5px; }
    .promise { border-radius: 28px; }
    .promise .in-core { border-radius: 22px; padding: 22px; }
    .promise .btn { width: 100%; justify-content: space-between; }
    .promises { grid-template-columns: minmax(0, 1fr); }
    .qa .a { padding-right: 0; }
    .foot .grid { grid-template-columns: minmax(0, 1fr); }
    .actionbar { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 50; padding: 6px; border-radius: 999px;
      background: rgba(27, 28, 27, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 16px 34px -14px rgba(0,0,0,.55); }
    .actionbar .btn { min-height: 52px; padding: 0 6px 0 18px; font-size: 12px; gap: 10px; justify-content: space-between; }
    .actionbar .btn .bi { width: 40px; height: 40px; }
    .actionbar .btn-ghost { color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(246,240,225,.35); }
    .actionbar .btn-ghost .bi { background: rgba(246,240,225,.12); color: var(--orange); }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
    .js .rv, .js .chip { opacity: 1; translate: 0 0; filter: none; }
    .ticker .row { animation: none; }
  }

/* ===== service pages ===== */
.links a[aria-current="page"] { color: var(--orange-ink); }
.links a[aria-current="page"]::after { transform: scaleX(1); }
.crumbs { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font: 600 11px/1 var(--mark); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.crumbs a { text-decoration: none; transition: color .4s var(--ease); }
.crumbs a:hover { color: var(--orange-ink); }
.sp-hero { padding-bottom: clamp(20px, 3vw, 48px); }
.sp-hero h1 { font-size: clamp(50px, 6.4vw, 92px); }
.prose .tag { font-size: 11px; line-height: 1; margin: 0; max-width: none; color: var(--orange-ink); }

.sp-visual { position: relative; min-height: 580px; display: grid; place-items: center; perspective: 1400px; }
.sp-panel { position: absolute; inset: 0 0 0 36px; border-radius: 36px; overflow: hidden; background: var(--char); box-shadow: var(--soft); }
.sp-panel.orange { background: var(--orange); }
.sp-panel .weave { opacity: 1; -webkit-mask-image: none; mask-image: none; }
.sp-panel.orange .weave { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'><g stroke='%23D2581C' stroke-width='1.6'><path d='M0 0l8 8M4 0l8 8M8 0l8 8M-4 0L4 8M0 8l8 8M4 8l8 8M8 8l8 8M-4 8L4 16'/><path d='M32 0l-8 8M28 0l-8 8M24 0l-8 8M36 0L28 8M32 8l-8 8M28 8l-8 8M24 8l-8 8M36 8L28 16'/></g></svg>"); }
.listcard { position: relative; z-index: 2; width: min(410px, 82%); margin-left: 36px; padding: 32px 30px 30px 64px; border-radius: 6px; rotate: -3deg;
  background-color: #FFFDF6;
  background-image: linear-gradient(to right, transparent 46px, rgba(225, 100, 36, .55) 46px, rgba(225, 100, 36, .55) 48px, transparent 48px),
                    repeating-linear-gradient(to bottom, transparent 0 37px, rgba(60, 90, 140, .16) 37px 38px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .12), 0 34px 70px -26px rgba(0, 0, 0, .6);
  font: 600 27px/38px "Caveat", cursive; color: #26324A; transition: transform 1s var(--ease); }
.listcard.hot { transition: transform .25s var(--ease); }
.listcard h3 { font: 700 34px/38px "Caveat", cursive; margin: -2px 0 6px; }
.listcard ul { list-style: none; margin: 0; padding: 0; }
.listcard li { display: flex; align-items: center; gap: 13px; height: 38px; white-space: nowrap; }
.listcard .box { position: relative; width: 19px; height: 19px; flex: none; border: 2px solid #26324A; border-radius: 3px; }
.listcard .box svg { position: absolute; left: -2px; top: -9px; width: 30px; height: 30px; overflow: visible; }
.listcard .tick { fill: none; stroke: var(--orange); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .55s var(--ease) calc(var(--i) * 480ms + 600ms); }
.listcard .t { position: relative; }
.listcard .t::after { content: ""; position: absolute; left: -3px; right: -3px; top: 55%; height: 2.5px; border-radius: 2px; background: rgba(38, 50, 74, .75); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease) calc(var(--i) * 480ms + 850ms); }
.sp-visual.in .listcard li.done .tick { stroke-dashoffset: 0; }
.sp-visual.in .listcard li.done .t::after { transform: scaleX(1); }
.sp-bubble { position: absolute; z-index: 3; right: 2%; bottom: 9%; max-width: 262px; padding: 8px 11px 6px; border-radius: 14px; border-top-left-radius: 4px; background: #fff; color: #111B21;
  font: 400 15px/1.36 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: 0 1px .5px rgba(11, 20, 26, .13), 0 22px 44px -18px rgba(0, 0, 0, .5);
  opacity: 0; translate: 0 18px; scale: .9; transform-origin: 0 100%; transition: opacity .6s var(--ease) 2.4s, translate .8s var(--spring) 2.4s, scale .8s var(--spring) 2.4s; }
.sp-visual.in .sp-bubble { opacity: 1; translate: 0 0; scale: 1; }
.sp-bubble .who { display: block; font-size: 12.5px; font-weight: 600; color: var(--orange-ink); margin-bottom: 2px; }
.sp-bubble .tm { display: block; text-align: right; font-size: 11px; color: #667781; margin-top: 2px; }
.sp-bubble img { display: block; width: 100%; aspect-ratio: 1.6; object-fit: cover; border-radius: 8px; margin: 2px 0 6px; }

.tasks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.task { background: var(--paper); border-radius: 30px; padding: clamp(24px, 2.6vw, 34px); box-shadow: inset 0 0 0 1px rgba(36, 37, 36, .05); }
.task.in { transition: opacity 1s var(--ease), translate .8s var(--ease), filter 1s var(--ease); transition-delay: 0s; }
.task.in:hover { translate: 0 -5px; }
.task .ic, .step-ic { width: 52px; height: 52px; border-radius: 16px; background: var(--char); display: grid; place-items: center; transition: rotate .7s var(--spring); }
.task:hover .ic { rotate: -8deg; }
.task .ic svg { width: 26px; height: 26px; fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.task h3 { font: 400 clamp(26px, 2.2vw, 32px)/.95 var(--display); text-transform: uppercase; margin: 22px 0 10px; }
.task p { margin: 0; color: var(--muted); font-size: 16px; }
.task p a, .prose a { color: var(--char); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.split .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.split.flip .wrap > :first-child { order: 2; }
.split .bezel .core img { width: 100%; }
.split .h2 { font-size: clamp(46px, 5.4vw, 84px); margin: 22px 0 22px; }
.prose p { margin: 0 0 18px; color: var(--muted); font-size: clamp(17px, 1.3vw, 19px); max-width: 44ch; }
.prose p:last-of-type { margin-bottom: 30px; }

.minichat { width: min(390px, 100%); margin: 0 auto; padding: 7px; border-radius: 32px; background: rgba(252, 250, 245, .92); box-shadow: inset 0 0 0 1px rgba(36, 37, 36, .07), var(--soft); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.minichat .screen { border-radius: 25px; overflow: hidden; background: #EFEAE2; }
.minichat .mc-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 12px 18px; background-image: radial-gradient(rgba(120, 100, 70, .09) 1px, transparent 1.2px); background-size: 14px 14px; }
.minichat .msg { opacity: 0; translate: 0 14px; scale: .94; transition: opacity .6s var(--ease), translate .8s var(--spring), scale .8s var(--spring); transition-delay: calc(var(--i) * 650ms + 300ms); }
.minichat.in .msg { opacity: 1; translate: 0 0; scale: 1; }

.related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.rel { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 260px; padding: clamp(28px, 3vw, 42px); border-radius: 32px; text-decoration: none; background: var(--char); color: var(--cream); }
.rel.alt { background: var(--orange); color: var(--char); }
.rel h3 { font: 400 clamp(34px, 3.4vw, 50px)/.95 var(--display); text-transform: uppercase; margin: 0 0 12px; }
.rel p { margin: 0; max-width: 34ch; opacity: .8; }
.rel .go { align-self: flex-end; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--char); transition: translate .6s var(--ease), scale .5s var(--spring); }
.rel.alt .go { background: var(--char); color: var(--orange); }
.rel .go svg { width: 22px; height: 22px; }
.rel:hover .go { translate: 4px -4px; scale: 1.08; }
.rel.in { transition: opacity 1s var(--ease), translate .8s var(--ease), filter 1s var(--ease); transition-delay: 0s; }
.rel.in:hover { translate: 0 -5px; }

.svc .more { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; font: 700 11.5px/1 var(--mark); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: inherit; position: relative; z-index: 3; }
.svc .more .ar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(36, 37, 36, .1); transition: translate .5s var(--ease); }
.svc .more .ar svg { width: 15px; height: 15px; }
.svc-a .more .ar, .svc-d .more .ar { background: rgba(246, 240, 225, .14); color: var(--orange); }
.svc .more:hover .ar { translate: 3px -3px; }

@media (max-width: 1080px) {
  .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sp-visual { min-height: 500px; margin-top: 12px; }
  .sp-panel { inset: 0; }
  .listcard { margin-left: 0; }
  .split .wrap { grid-template-columns: minmax(0, 1fr); }
  .split.flip .wrap > :first-child { order: 0; }
  .related { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sp-hero h1 { font-size: clamp(46px, 13.5vw, 80px); }
  .sp-visual { min-height: 440px; }
  .listcard { width: 88%; padding: 26px 18px 24px 56px; font-size: 24px; line-height: 34px; background-image: linear-gradient(to right, transparent 42px, rgba(225, 100, 36, .55) 42px, rgba(225, 100, 36, .55) 44px, transparent 44px), repeating-linear-gradient(to bottom, transparent 0 33px, rgba(60, 90, 140, .16) 33px 34px); }
  .listcard li { height: 34px; }
  .listcard h3 { font-size: 30px; }
  .sp-bubble { right: 3%; bottom: 3%; max-width: 230px; font-size: 14px; }
  .tasks { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .listcard .tick { stroke-dashoffset: 0; }
  .sp-bubble, .minichat .msg { opacity: 1; translate: 0 0; scale: 1; }
}

/* ===== guides ===== */
@media (min-width: 901px) { .foot .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .foot .grid > :first-child { grid-column: 1 / -1; } }
.legal { padding-top: clamp(24px, 3vw, 48px); }
@media (max-width: 380px) { .listcard { width: 84%; font-size: 21px; } .sp-visual { overflow-x: clip; } .promise .btn { max-width: 100%; white-space: normal; line-height: 1.3; } }
.legal .wrap { display: block; }
.legal .article { max-width: 760px; }
.legal .hrs td { color: var(--char); font-weight: 600; }
.sec-head .lede a { color: var(--char); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fee-note a { color: inherit; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.faq .a a { color: var(--char); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.elist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.elist li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.elist li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--orange); }
.elist a { color: var(--char); }
.article > section > .elist li { font-size: clamp(17px, 1.28vw, 19px); color: rgba(36, 37, 36, .86); }
.rel .tt-rel { font: 400 clamp(34px, 3.4vw, 50px)/.95 var(--display); text-transform: uppercase; margin: 0 0 12px; }
.links a { white-space: nowrap; }
@media (max-width: 1120px) { .links { display: none; } .burger { display: block; } }
.gi-hero .wrap { display: block; }
.gi-hero h1 { font-size: clamp(58px, 7.4vw, 110px); margin-bottom: 22px; }
.gi-hero .lede { max-width: 54ch; margin: 0; }
.gi-list { padding: clamp(24px, 3vw, 44px) 0 clamp(80px, 10vw, 140px); }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.post { display: flex; flex-direction: column; gap: 16px; padding: 8px 8px 26px; border-radius: 30px; background: rgba(36, 37, 36, .045); box-shadow: inset 0 0 0 1px rgba(36, 37, 36, .07); text-decoration: none; color: var(--char); transition: translate .8s var(--ease), box-shadow .8s var(--ease); }
.post.in { transition: opacity 1s var(--ease), translate .8s var(--ease), filter 1s var(--ease), box-shadow .8s var(--ease); transition-delay: 0s; }
.post:hover { translate: 0 -5px; box-shadow: inset 0 0 0 1px rgba(36, 37, 36, .07), var(--soft); }
.post .ph { display: block; border-radius: 23px; overflow: hidden; background: var(--char); aspect-ratio: 1200 / 630; }
.post .ph img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.post:hover .ph img { scale: 1.04; }
.post .tx { display: flex; flex-direction: column; gap: 12px; padding: 0 14px; }
.post .tg { font: 700 10.5px/1 var(--mark); letter-spacing: .22em; text-transform: uppercase; color: var(--orange-ink); }
.post .tt { margin: 0; font: 400 clamp(26px, 2.2vw, 32px)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.post .ex { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.post .mt { font: 500 13.5px/1.4 var(--body); color: var(--muted); }
.post .go { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; font: 700 11px/1 var(--mark); letter-spacing: .16em; text-transform: uppercase; color: var(--char); }
.post .go i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); transition: translate .6s var(--ease); }
.post .go svg { width: 14px; height: 14px; }
.post:hover .go i { translate: 3px -3px; }
.post.feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 20px 40px; padding: 8px; }
.post.feature .tx { padding: 20px 28px 20px 0; }
.post.feature .tt { font-size: clamp(38px, 3.8vw, 60px); line-height: .96; }
.post.feature .ex { font-size: 18px; }
.more-guides .sec-head .lede a { color: var(--char); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.read-bar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 70; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
@supports (animation-timeline: scroll()) { .read-bar { animation: readbar linear both; animation-timeline: scroll(root); } }
@keyframes readbar { to { transform: scaleX(1); } }
.g-hero { padding-bottom: clamp(24px, 3vw, 56px); }
.g-hero h1 { font-size: clamp(58px, 6.3vw, 96px); margin-bottom: 0; }
.g-hero h1 .sub { display: block; margin-top: 22px; font: 500 clamp(19px, 1.65vw, 24px)/1.32 var(--body); text-transform: none; letter-spacing: 0; color: var(--char); max-width: 30ch;
  animation: fadeUp 1.1s var(--ease) both .52s; }
.g-hero .lede { margin: 24px 0 0; max-width: 46ch; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 28px 0 0; padding: 0; list-style: none; font: 500 14px/1.4 var(--body); color: var(--muted); }
.byline li { display: flex; align-items: center; gap: 14px; }
.byline li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; }
.byline .by { gap: 10px; color: var(--char); font-weight: 600; }
.byline .av { width: 30px; height: 30px; border-radius: 50%; background: var(--char); display: grid; place-items: center; flex: none; }
.byline .av i { width: 7px; height: 7px; background: var(--orange); }

.g-visual { position: relative; min-height: 640px; display: grid; place-items: center; perspective: 1400px; }
.rcpt-wrap { position: relative; z-index: 2; width: min(430px, 86%); margin: 0 0 0 36px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14)) drop-shadow(0 30px 34px rgba(0, 0, 0, .42)); }
.receipt { position: relative; padding: 30px 30px 26px; background: #FFFDF6; rotate: 2.2deg; transition: transform 1s var(--ease); }
.receipt.hot { transition: transform .25s var(--ease); }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 11px;
  background: linear-gradient(135deg, #FFFDF6 5.5px, transparent 0) 0 0 / 11px 11px repeat-x, linear-gradient(-135deg, #FFFDF6 5.5px, transparent 0) 0 0 / 11px 11px repeat-x; }
.receipt .r-head { margin: 0; font: 400 46px/.9 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.receipt .r-sub { margin: 10px 0 18px; font: 600 10.5px/1.3 var(--mark); letter-spacing: .24em; text-transform: uppercase; color: var(--orange-ink); }
.receipt dl { margin: 0; }
.receipt dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-top: 1.5px dashed rgba(36, 37, 36, .22); }
.receipt dt { font: 700 10.5px/1.5 var(--mark); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.receipt dd { margin: 0; font: 500 15.5px/1.45 var(--body); color: var(--char); }
.receipt dd b { font-weight: 600; }
.receipt .r-foot { margin: 6px 0 0; padding-top: 14px; border-top: 1.5px dashed rgba(36, 37, 36, .22); font: 600 10.5px/1.3 var(--mark); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; }
.receipt .r-foot a { color: var(--orange-ink); text-decoration: none; }
.stamp { position: absolute; z-index: 3; right: -26px; top: -30px; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  border: 2px solid var(--orange); box-shadow: inset 0 0 0 5px #FFFDF6, inset 0 0 0 6.5px rgba(225, 100, 36, .8); background: #FFFDF6; color: var(--orange-ink);
  font: 700 10px/1.25 var(--mark); letter-spacing: .16em; text-transform: uppercase; rotate: -14deg; }
.stamp b { display: block; font: 400 25px/1 var(--display); letter-spacing: .02em; margin: 3px 0 2px; }
.js .g-visual .receipt dl > div, .js .g-visual .r-foot { opacity: 0; translate: 0 10px; transition: opacity .7s var(--ease), translate .9s var(--ease); transition-delay: calc(var(--i, 0) * 130ms + 450ms); }
.js .g-visual .stamp { opacity: 0; scale: 1.5; transition: opacity .35s var(--ease) 1.25s, scale .6s var(--spring) 1.25s; }
.g-visual.in .receipt dl > div, .g-visual.in .r-foot { opacity: 1; translate: 0 0; }
.g-visual.in .stamp { opacity: 1; scale: 1; }

.g-body { padding: clamp(48px, 6vw, 96px) 0 clamp(8px, 2vw, 32px); }
.g-body .wrap { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.toc { position: sticky; top: 112px; }
.toc > p { margin: 0 0 16px; font: 600 11px/1 var(--mark); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1.5px solid var(--line); }
.toc ol a { display: block; margin-left: -1.5px; padding: 9px 0 9px 18px; border-left: 1.5px solid transparent; text-decoration: none; font: 500 15px/1.35 var(--body); color: var(--muted);
  transition: color .45s var(--ease), border-color .45s var(--ease), translate .6s var(--ease); }
.toc ol a:hover { color: var(--char); }
.toc ol a.on { color: var(--char); border-left-color: var(--orange); translate: 4px 0; }
.toc .btn { margin-top: 30px; min-height: 52px; padding-left: 20px; font-size: 11.5px; gap: 12px; }
.toc .btn .bi { width: 38px; height: 38px; }

.article { max-width: 720px; min-width: 0; }
.article > section + section { margin-top: clamp(76px, 8vw, 116px); }
.article h2 { font: 400 clamp(42px, 4.8vw, 68px)/.94 var(--display); text-transform: uppercase; letter-spacing: .004em; margin: 0 0 28px; }
.article h2 em { font-style: normal; color: var(--orange); }
.article h3 { font: 700 12.5px/1.3 var(--mark); letter-spacing: .2em; text-transform: uppercase; color: var(--orange-ink); margin: 42px 0 14px; }
.article p { margin: 0 0 20px; font-size: clamp(17px, 1.28vw, 19px); line-height: 1.66; color: rgba(36, 37, 36, .86); }
.article a { color: var(--char); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.article sup { line-height: 0; }
.article sup a { text-decoration: none; font: 700 10.5px/1 var(--mark); color: var(--orange-ink); padding: 0 1px 0 2px; }
.article sup a:hover { color: var(--orange); }

.tl { list-style: none; margin: 38px 0 0; padding: 0; }
.tl li { position: relative; display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0 44px; padding: 0 0 36px; }
.tl li::before { content: ""; position: absolute; left: 140px; top: 12px; bottom: -12px; width: 1.5px; background: rgba(36, 37, 36, .16); transform-origin: top; }
.tl li:last-child::before { display: none; }
.tl li::after { content: ""; position: absolute; left: 135px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px var(--cream); }
.tl li.next::after { background: var(--cream); box-shadow: inset 0 0 0 2.5px var(--orange), 0 0 0 6px var(--cream); animation: pingdot 2.4s var(--ease) infinite; }
@keyframes pingdot { 0% { box-shadow: inset 0 0 0 2.5px var(--orange), 0 0 0 6px var(--cream), 0 0 0 6px rgba(225, 100, 36, .45); } 70%, 100% { box-shadow: inset 0 0 0 2.5px var(--orange), 0 0 0 6px var(--cream), 0 0 0 16px rgba(225, 100, 36, 0); } }
.tl time { padding-top: 3px; text-align: right; font: 600 12px/1.45 var(--mark); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tl h3 { margin: 0 0 8px; font: 400 27px/1 var(--display); letter-spacing: .01em; text-transform: uppercase; color: var(--char); }
.tl p { margin: 0; font-size: 17px; }
.tl .soon { display: inline-block; margin-left: 10px; padding: 5px 9px; border-radius: 999px; vertical-align: 4px; background: rgba(225, 100, 36, .14); color: var(--orange-ink); font: 700 9.5px/1 var(--mark); letter-spacing: .18em; }
.js .tl li.rv::before { transform: scaleY(0); transition: transform 1.3s var(--ease) .35s; }
.js .tl li.rv.in::before { transform: scaleY(1); }

.callout { margin: 12px 0 0; padding: 8px; border-radius: 32px; background: rgba(36, 37, 36, .045); box-shadow: inset 0 0 0 1px rgba(36, 37, 36, .07), var(--soft); }
.callout .core { position: relative; overflow: hidden; border-radius: 25px; background: var(--char); color: var(--cream); padding: clamp(26px, 3.2vw, 40px); }
.callout .core::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18); }
.callout h3 { margin: 0 0 18px; color: var(--orange); }
.callout ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.callout li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 16px; font-size: 17px; line-height: 1.55; color: rgba(246, 240, 225, .86); }
.callout li::before { content: ""; width: 8px; height: 8px; margin-top: 9px; background: var(--orange); }

.finds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 30px 0 0; }
.find { border-radius: 26px; padding: 26px; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(36, 37, 36, .05); transition: translate .8s var(--ease); }
.find.in { transition: opacity 1s var(--ease), translate .8s var(--ease), filter 1s var(--ease); transition-delay: 0s; }
.find.in:hover { translate: 0 -4px; }
.find .ic { width: 48px; height: 48px; border-radius: 15px; background: var(--char); display: grid; place-items: center; transition: rotate .7s var(--spring); }
.find:hover .ic { rotate: -8deg; }
.find .ic svg { width: 24px; height: 24px; fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.article .find h3 { margin: 18px 0 8px; font: 400 25px/1 var(--display); letter-spacing: .01em; color: var(--char); }
.article .find p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 32px 0 28px; }
.cmp { border-radius: 28px; padding: clamp(24px, 2.6vw, 32px); background: var(--char); color: var(--cream); }
.cmp.alt { background: var(--orange); color: var(--char); }
.cmp .k { margin: 0; font: 700 11px/1 var(--mark); letter-spacing: .22em; text-transform: uppercase; opacity: .72; }
.cmp .big { display: block; margin: 18px 0 4px; font: 400 clamp(42px, 4.4vw, 60px)/.92 var(--display); letter-spacing: .005em; }
.cmp .unit { display: block; font: 500 14px/1.4 var(--body); opacity: .74; }
.article .cmp p { margin: 18px 0 0; font-size: 16px; line-height: 1.55; color: inherit; opacity: .88; }
.article .cmp a { color: inherit; }

.tips { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: tip; border-top: 1.5px solid var(--char); }
.tips li { counter-increment: tip; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.tips li::before { content: counter(tip, decimal-leading-zero); font: 400 38px/1 var(--display); color: var(--orange); }
.article .tips h3 { margin: 3px 0 6px; font: 600 18.5px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--char); }
.article .tips p { margin: 0; font-size: 17px; }

.g-cta { margin: clamp(56px, 6vw, 84px) 0 0; padding: 8px; border-radius: 38px; background: rgba(225, 100, 36, .09); box-shadow: inset 0 0 0 1px rgba(225, 100, 36, .22), var(--soft); }
.g-cta .core { position: relative; overflow: hidden; border-radius: 31px; background: var(--char); color: var(--cream); padding: clamp(30px, 4.2vw, 56px); }
.g-cta .weave { opacity: .55; }
.g-cta .core > * { position: relative; }
.g-cta .kick { margin: 0 0 16px; font: 700 11px/1 var(--mark); letter-spacing: .22em; text-transform: uppercase; color: var(--orange); }
.article .g-cta .cta-h { margin: 0 0 18px; font: 400 clamp(40px, 4.6vw, 64px)/.94 var(--display); text-transform: uppercase; color: var(--cream); }
.g-cta .cta-h em { font-style: normal; color: var(--orange); }
.article .g-cta p { color: rgba(246, 240, 225, .8); max-width: 46ch; }
.g-cta .cta-row { margin-top: 28px; }
.g-cta .btn-ghost { color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(246, 240, 225, .55); }
.g-cta .btn-ghost .bi { background: rgba(246, 240, 225, .1); color: var(--orange); }
.g-cta .btn-ghost:hover { background: var(--cream); color: var(--char); }

.article .sources h2 { font-size: clamp(34px, 3.4vw, 46px); margin-bottom: 22px; }
.sources ol { margin: 0; padding: 0 0 0 24px; display: grid; gap: 10px; }
.article .sources li { font-size: 15px; line-height: 1.5; color: var(--muted); padding: 2px 6px; margin-left: -6px; border-radius: 6px; transition: background-color .6s var(--ease); }
.sources li::marker { font: 700 12px var(--mark); color: var(--orange-ink); }
.sources li:target { background: rgba(225, 100, 36, .14); }
.article .sources a { color: var(--char); }
.article .sources .upd { margin-top: 22px; font-size: 15px; color: var(--muted); }

.week { list-style: none; margin: 34px -14px 12px; padding: 0; }
.week > li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; padding: 20px 14px; border-top: 1px solid var(--line); border-radius: 0; transition: background-color .6s var(--ease); }
.week > li:first-child { border-top: 1.5px solid var(--char); }
.week .d { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font: 400 34px/1 var(--display); text-transform: uppercase; color: var(--char); padding-top: 2px; }
.week ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.week ul li { font-size: 16.5px; line-height: 1.5; color: var(--muted); }
.week ul li b { color: var(--char); font-weight: 600; }
.week ul li.main b { color: var(--orange-ink); }
.week .none { margin: 0 0 6px; font-size: 16.5px; line-height: 1.5; color: var(--muted); }
.week > li.today { background: rgba(225, 100, 36, .09); border-radius: 18px; border-top-color: transparent; }
.week > li.today + li { border-top-color: transparent; }
.week > li.today .d { color: var(--orange-ink); }
.week .chip-today { padding: 5px 9px; border-radius: 999px; background: var(--orange); color: var(--char); font: 700 9.5px/1 var(--mark); letter-spacing: .18em; text-transform: uppercase; }
.week-note { font-size: 15.5px !important; color: var(--muted) !important; }
.hrs { width: 100%; border-collapse: collapse; margin: 26px 0 8px; font-size: 16.5px; }
.hrs th, .hrs td { text-align: left; vertical-align: top; padding: 13px 0; border-bottom: 1px solid var(--line); }
.hrs tr:first-child th, .hrs tr:first-child td { border-top: 1.5px solid var(--char); }
.hrs th { font-weight: 600; color: var(--char); padding-right: 18px; }
.hrs td { color: var(--muted); text-align: right; white-space: nowrap; }
.spots { list-style: none; margin: 28px 0 10px; padding: 0; border-top: 1.5px solid var(--char); }
.spots li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.spots b { font: 400 24px/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--char); }
.spots span { font-size: 16.5px; line-height: 1.55; color: var(--muted); }
.vs-wrap { margin: 30px 0 22px; }
.vs { width: 100%; border-collapse: collapse; font-size: 16px; }
.vs th, .vs td { text-align: left; vertical-align: top; padding: 16px 14px; border-bottom: 1px solid var(--line); }
.vs thead th { font: 700 11px/1.2 var(--mark); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); border-bottom: 1.5px solid var(--char); }
.vs thead th.us { color: var(--orange-ink); }
.vs tbody th { width: 20%; font: 700 11px/1.55 var(--mark); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.vs td { line-height: 1.55; color: rgba(36, 37, 36, .86); }
.vs td.us { background: rgba(225, 100, 36, .07); }
.vs td a { color: var(--char); }
.vs td sup a { color: var(--orange-ink); }
@media (max-width: 1080px) {
  .g-body .wrap { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .article { max-width: 760px; }
}
@media (max-width: 900px) {
  .posts { grid-template-columns: minmax(0, 1fr); }
  .post, .post.feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: center; gap: 16px 22px; padding: 8px; }
  .post .tx, .post.feature .tx { padding: 12px 14px 12px 0; }
  .post.feature .tt { font-size: clamp(30px, 4.2vw, 40px); }
  .g-visual { min-height: 0; padding: 56px 0 40px; margin-top: 12px; overflow-x: clip; }
  .rcpt-wrap { margin: 0; }
}
@media (max-width: 640px) {
  .g-hero h1 { font-size: clamp(44px, 15vw, 88px); }
  .g-long h1 { font-size: clamp(42px, 12.2vw, 72px); }
  .rcpt-wrap { width: 92%; }
  .receipt { padding: 26px 22px 22px; }
  .receipt dl > div { grid-template-columns: 78px minmax(0, 1fr); gap: 10px; }
  .receipt dt { font-size: 9.5px; letter-spacing: .14em; }
  .stamp { right: 2px; top: -44px; width: 92px; height: 92px; font-size: 9px; }
  .stamp b { font-size: 21px; }
  .tl li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-left: 34px; }
  .tl li::before { left: 5px; }
  .tl li::after { left: 0; }
  .tl time { text-align: left; }
  .finds, .compare { grid-template-columns: minmax(0, 1fr); }
  .tips li { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; }
  .tips li::before { font-size: 32px; }
  .byline li + li::before { display: none; }
  .byline { gap: 8px 16px; }
  .week > li { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }
  .week .d { font-size: 25px; }
  .hrs td { white-space: normal; }
  .post, .post.feature { grid-template-columns: minmax(0, 1fr); padding: 8px 8px 26px; }
  .post .tx, .post.feature .tx { padding: 0 14px; }
  .gi-hero h1 { font-size: clamp(38px, 12.6vw, 84px); }
  .spots b { font-size: 21px; }
  .vs thead { display: none; }
  .vs, .vs tbody, .vs tr, .vs th, .vs td { display: block; width: 100%; }
  .vs tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .vs th, .vs td { border: 0; padding: 4px 0; }
  .vs td.us { background: none; }
  .vs td::before { content: attr(data-l); display: block; font: 700 10.5px/1.6 var(--mark); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); }
  .vs td + td::before { color: var(--muted); }
  .g-cta .btn { white-space: normal; line-height: 1.3; min-height: 60px; padding-top: 8px; padding-bottom: 8px; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .g-visual .receipt dl > div, .js .g-visual .r-foot, .js .g-visual .stamp { opacity: 1; translate: 0 0; scale: 1; }
  .js .tl li.rv::before { transform: none; }
  .tl li.next::after { animation: none; }
  .read-bar { display: none; }
}