/* Kangnam Beauty Center — demo v3. Tokens: Shinhan Beauty design system (light theme, gold).
   Direction: warm ivory + gold, Shinhan-style header and full-width hero, square corners. */
:root {
  color-scheme: light;
  --sb-gold-100:#f3ecdd; --sb-gold-300:#dfbf82; --sb-gold-400:#d4af6a; --sb-gold-500:#c9a15a;
  --sb-gold-600:#9d6f24; --sb-gold-700:#7d5716; --sb-gold-800:#6a4911; --sb-gold-900:#573b0d;
  --sb-gold-glow:173 140 87;
  --sb-blue-300:#7d94d1; --sb-blue-600:#3a589d; --sb-blue-700:#2f4a87;
  --sb-n-0:#ffffff; --sb-n-50:#faf8f4; --sb-n-200:#e6e1d6; --sb-n-300:#b3aca0; --sb-n-400:#8a8478;
  --sb-n-500:#7a7468; --sb-n-600:#6b6558; --sb-n-700:#5c564b; --sb-n-750:#4a443b; --sb-n-800:#2e2a24;
  --sb-n-850:#26221d; --sb-n-875:#1e1b17; --sb-n-900:#141210; --sb-n-950:#000000;

  --sb-bg-canvas:var(--sb-n-50); --sb-bg-surface:var(--sb-n-0); --sb-bg-raised:var(--sb-n-0); --sb-bg-overlay:var(--sb-n-0);
  --sb-bg-hover:rgb(125 87 22 / .07); --sb-bg-selected:var(--sb-gold-100); --sb-scrim:rgb(20 18 16 / .48);
  --sb-text-primary:var(--sb-n-900); --sb-text-secondary:var(--sb-n-700); --sb-text-muted:var(--sb-n-600);
  --sb-text-brand:var(--sb-gold-700); --sb-text-link:var(--sb-blue-700); --sb-text-disabled:#a39d90;
  --sb-border-subtle:var(--sb-n-200); --sb-border-default:var(--sb-n-200); --sb-border-control:var(--sb-n-400);
  --sb-focus-ring:var(--sb-blue-700);
  --sb-action-primary:var(--sb-gold-700); --sb-action-primary-hover:var(--sb-gold-800);
  --sb-action-primary-active:var(--sb-gold-900); --sb-on-action-primary:var(--sb-n-0);
  --sb-success:#166534; --sb-success-bg:rgb(22 101 52 / .08);
  --sb-warning:#92400e; --sb-warning-bg:rgb(146 64 14 / .08);
  --sb-danger:#b91c1c; --sb-danger-bg:rgb(185 28 28 / .08);
  --sb-info:var(--sb-blue-700); --sb-info-bg:rgb(47 74 135 / .08);

  --sb-font-sans:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sb-font-serif:"Newsreader","Be Vietnam Pro",Georgia,serif;
  --sb-text-xs:12px; --sb-text-sm:13px; --sb-text-md:14px; --sb-text-lg:16px; --sb-text-xl:18px;
  --sb-radius-sm:0; --sb-radius-md:0; --sb-radius-lg:0; --sb-radius-xl:0; --sb-radius-pill:0;
  --sb-shadow-md:0 8px 24px 0 rgb(20 18 16 / .14);
  --sb-duration-fast:150ms; --sb-ease:cubic-bezier(.2,0,0,1);
  --sb-control-md:48px; --sb-target-touch:44px; --sb-content-max:1280px;
}
/* Deep-gold band for call-to-action and footer (dark surface, light text) */
[data-theme="gold"] {
  color-scheme: dark;
  --sb-bg-canvas:var(--sb-gold-900); --sb-bg-surface:var(--sb-gold-800);
  --sb-bg-hover:rgb(255 255 255 / .08);
  --sb-text-primary:var(--sb-n-0); --sb-text-secondary:var(--sb-gold-100); --sb-text-muted:var(--sb-gold-300);
  --sb-text-brand:var(--sb-gold-300);
  --sb-border-subtle:rgb(255 255 255 / .2); --sb-border-default:rgb(255 255 255 / .28); --sb-border-control:rgb(255 255 255 / .7);
  --sb-focus-ring:var(--sb-n-0);
  --sb-action-primary:var(--sb-gold-300); --sb-action-primary-hover:var(--sb-gold-100);
  --sb-action-primary-active:var(--sb-gold-400); --sb-on-action-primary:var(--sb-gold-900);
}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:1ms !important; transition-duration:1ms !important; scroll-behavior:auto !important; } }

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--sb-n-50); color:var(--sb-text-primary); font-family:var(--sb-font-sans); font-size:var(--sb-text-lg); line-height:1.65; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure { margin:0; }
h1,h2,h3 { font-family:var(--sb-font-serif); font-weight:400; line-height:1.3; letter-spacing:-.01em; }
h1 { font-size:clamp(38px,5.4vw,76px); }
h2 { font-size:clamp(30px,3.6vw,46px); }
h3 { font-size:24px; }
a { color:inherit; text-underline-offset:4px; }
:focus-visible { outline:2px solid var(--sb-focus-ring); outline-offset:3px; }
.skip { position:absolute; left:16px; top:-100px; background:var(--sb-action-primary); color:var(--sb-on-action-primary); padding:8px 16px; font-weight:600; z-index:500; }
.skip:focus { top:8px; }

.s { background:var(--sb-bg-canvas); color:var(--sb-text-primary); padding-block:clamp(64px,8vw,112px); }
.s--tint { background:var(--sb-gold-100); --sb-border-default:color-mix(in srgb, var(--sb-gold-600) 28%, var(--sb-gold-100)); }
.s--after-quick { padding-top:calc(clamp(64px,8vw,112px) + 64px); }
.s[data-theme="gold"] { background:linear-gradient(110deg,var(--sb-gold-900),var(--sb-gold-800)); }
.wrap { width:100%; max-width:var(--sb-content-max); margin-inline:auto; padding-inline:20px; }
@media (min-width:768px){ .wrap{ padding-inline:40px; } }
.lead { color:var(--sb-text-secondary); font-size:var(--sb-text-xl); line-height:1.7; max-width:56ch; }
.muted { color:var(--sb-text-muted); }
.price { color:var(--sb-text-brand); font-variant-numeric:tabular-nums; font-weight:500; }
.head { display:grid; gap:20px; margin-bottom:clamp(32px,5vw,64px); }
.head--split { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px 40px; }
.link { color:var(--sb-text-brand); font-weight:500; text-decoration:underline; text-decoration-thickness:1px; }
.link:hover { text-decoration-thickness:2px; }
.gold-text { background:linear-gradient(180deg,var(--sb-gold-600),var(--sb-gold-800)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:var(--sb-control-md); padding:0 28px; border:1px solid transparent; background:transparent; color:inherit; font:inherit; font-size:var(--sb-text-md); font-weight:600; letter-spacing:.01em; line-height:1.4; text-decoration:none; cursor:pointer; transition-property:background-color,color,border-color; transition-duration:var(--sb-duration-fast); transition-timing-function:var(--sb-ease); }
.btn--primary { background:var(--sb-action-primary); color:var(--sb-on-action-primary); }
.btn--primary:active { background:var(--sb-action-primary-active); }
.btn--line { border-color:var(--sb-action-primary); color:var(--sb-action-primary); }
[data-theme="gold"] .btn--line { border-color:var(--sb-n-0); color:var(--sb-n-0); }
.btn[aria-busy="true"] { cursor:progress; }
.btn[disabled] { color:var(--sb-text-disabled); cursor:not-allowed; }
@media (hover:hover){ .btn--primary:hover{ background:var(--sb-action-primary-hover); } .btn--line:hover{ background:var(--sb-action-primary); color:var(--sb-on-action-primary); } [data-theme="gold"] .btn--line:hover{ background:var(--sb-n-0); color:var(--sb-gold-900); } }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; }
.icon { width:22px; height:22px; flex:none; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:square; stroke-linejoin:miter; }

/* Header — Shinhan-style gold fade */
.header { position:sticky; top:0; z-index:100; padding-block:0; background:linear-gradient(180deg, color-mix(in srgb, var(--sb-gold-300) 78%, var(--sb-n-50)) 0%, var(--sb-n-50) 100%); border-bottom:1px solid color-mix(in srgb, var(--sb-gold-600) 30%, var(--sb-n-50)); }
.header .wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:112px; }
.logo { display:block; flex:none; }
.logo img { height:96px; width:auto; filter:drop-shadow(0 0 1px rgb(106 73 17 / .85)) drop-shadow(0 1px 1px rgb(106 73 17 / .35)); }
.nav { display:none; }
.nav > ul { list-style:none; padding:0; display:flex; gap:clamp(16px,2vw,32px); margin:0; }
.nav > ul > li { position:relative; }
.nav a { display:block; padding:42px 0 38px; text-decoration:none; font-size:var(--sb-text-md); font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--sb-gold-800); border-bottom:2px solid transparent; }
.nav a[aria-current="page"] { color:var(--sb-gold-900); border-bottom-color:var(--sb-gold-700); }
.nav .has-sub > a::after { content:""; display:inline-block; width:6px; height:6px; margin:0 0 3px 8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.sub { display:none; position:absolute; left:-20px; top:100%; min-width:280px; margin:0; padding:8px 0; list-style:none; background:var(--sb-n-0); border:1px solid var(--sb-border-default); border-top:3px solid var(--sb-gold-700); box-shadow:var(--sb-shadow-md); z-index:5; }
.has-sub:hover .sub, .has-sub:focus-within .sub { display:block; }
.nav .sub a { padding:12px 20px; text-transform:none; font-weight:500; letter-spacing:0; color:var(--sb-text-primary); border:0; }
.nav .sub a:hover { background:var(--sb-bg-hover); color:var(--sb-gold-800); }
@media (hover:hover){ .nav > ul > li > a:hover{ color:var(--sb-gold-900); border-bottom-color:var(--sb-gold-500); } }
.header__tools { display:flex; align-items:center; gap:12px; }
.header .btn--primary { display:none; min-height:46px; padding-inline:22px; }
.menu-toggle { display:inline-grid; place-items:center; width:48px; height:48px; border:1px solid var(--sb-gold-700); background:transparent; color:var(--sb-gold-800); cursor:pointer; }
@media (min-width:1100px){ .nav{display:block;} .menu-toggle{display:none;} .header .btn--primary{display:inline-flex;} }
.mobile-nav { display:none; border-top:1px solid var(--sb-border-default); background:var(--sb-n-0); }
.mobile-nav.is-open { display:block; }
.mobile-nav ul { list-style:none; margin:0; padding:8px 20px 20px; }
.mobile-nav a { display:block; padding:14px 0; min-height:48px; text-decoration:none; border-bottom:1px solid var(--sb-border-subtle); font-weight:500; }
.mobile-nav a[aria-current="page"] { color:var(--sb-text-brand); font-weight:600; }
@media (min-width:1100px){ .mobile-nav{ display:none !important; } }

/* Floating action rail (desktop) */
.rail { display:none; position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:90; background:var(--sb-n-0); border:1px solid var(--sb-gold-600); border-right:0; box-shadow:var(--sb-shadow-md); }
.rail a { display:grid; justify-items:center; gap:4px; width:84px; padding:14px 6px; font-size:var(--sb-text-xs); line-height:1.4; font-weight:500; text-decoration:none; color:var(--sb-gold-800); border-bottom:1px solid var(--sb-border-default); }
.rail a:last-child { border-bottom:0; background:var(--sb-gold-700); color:var(--sb-n-0); }
@media (hover:hover){ .rail a:hover{ background:var(--sb-bg-hover); } .rail a:last-child:hover{ background:var(--sb-gold-800); } }
@media (min-width:1100px){ .rail{ display:block; } }

/* Placeholders */
.ph { position:relative; overflow:hidden; background:linear-gradient(var(--ang,135deg), color-mix(in srgb, var(--sb-gold-500) var(--m1,50%), var(--sb-gold-100)), color-mix(in srgb, var(--sb-gold-300) var(--m2,35%), var(--sb-n-50))); aspect-ratio:var(--ratio,4/3); }
.ph::after { content:""; position:absolute; inset:0; border:1px solid rgb(125 87 22 / .25); pointer-events:none; }
.ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ph figcaption { position:absolute; left:0; right:0; bottom:0; padding:28px 14px 12px; font-size:var(--sb-text-xs); line-height:1.5; color:var(--sb-n-0); background:linear-gradient(transparent, rgb(20 18 16 / .72)); }
.ph--video::before { content:""; position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px; background:var(--sb-gold-700); }
.ph--video .tri { position:absolute; left:50%; top:50%; width:0; height:0; margin:-12px 0 0 -7px; border-left:20px solid var(--sb-n-0); border-top:12px solid transparent; border-bottom:12px solid transparent; z-index:1; }

/* Hero — one large image, editable text on top */
.hero { position:relative; overflow:hidden; padding-block:0; min-height:clamp(560px,72vh,820px); display:grid; align-items:center; background:var(--sb-gold-900); color:var(--sb-n-0); --hero-scrim:.6; }
.hero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgb(20 18 16 / var(--hero-scrim)) 0%, rgb(20 18 16 / calc(var(--hero-scrim) * .45)) 55%, rgb(20 18 16 / 0) 100%); }
.hero--right::before { background:linear-gradient(270deg, rgb(20 18 16 / var(--hero-scrim)) 0%, rgb(20 18 16 / calc(var(--hero-scrim) * .45)) 55%, rgb(20 18 16 / 0) 100%); }
.hero--center::before { background:rgb(20 18 16 / calc(var(--hero-scrim) * .75)); }
.hero .wrap { position:relative; z-index:2; }
.hero__content { display:grid; gap:18px; max-width:640px; padding-block:clamp(56px,8vw,104px) clamp(112px,11vw,150px); }
.hero--center .hero__content { margin-inline:auto; text-align:center; justify-items:center; }
.hero--right .hero__content { margin-left:auto; text-align:right; justify-items:end; }
.hero__kicker { font-size:var(--sb-text-xl); color:var(--sb-gold-300); letter-spacing:.04em; }
.hero h1 { font-size:clamp(44px,6vw,88px); line-height:1.25; color:var(--sb-n-0); }
.hero__rule { display:flex; align-items:center; gap:14px; width:min(360px,80%); color:var(--sb-gold-300); }
.hero__rule::before,.hero__rule::after { content:""; flex:1; height:1px; background:currentColor; }
.hero__rule i { width:9px; height:9px; background:currentColor; transform:rotate(45deg); }
.hero__sub { font-family:var(--sb-font-serif); font-size:clamp(24px,2.6vw,34px); line-height:1.4; color:var(--sb-n-0); max-width:24ch; }
.hero__text { color:var(--sb-gold-100); font-size:var(--sb-text-xl); line-height:1.7; max-width:48ch; }
.hero .btn--line { border-color:var(--sb-n-0); color:var(--sb-n-0); }
@media (hover:hover){ .hero .btn--line:hover { background:var(--sb-n-0); color:var(--sb-gold-900); } }
.hero .btn--primary { background:var(--sb-gold-300); color:var(--sb-gold-900); }
@media (hover:hover){ .hero .btn--primary:hover { background:var(--sb-gold-100); } }
/* Ảnh sáng: dùng chữ nâu đậm, không phủ tối */
.hero--dark-text { color:var(--sb-gold-900); }
.hero--dark-text::before { display:none; }
.hero--dark-text .hero__kicker,.hero--dark-text .hero__rule { color:var(--sb-gold-700); }
.hero--dark-text h1,.hero--dark-text .hero__sub { color:var(--sb-gold-900); }
.hero--dark-text .hero__text { color:var(--sb-n-800); }
.hero--dark-text .btn--primary { background:var(--sb-gold-700); color:var(--sb-n-0); }
.hero--dark-text .btn--line { border-color:var(--sb-gold-800); color:var(--sb-gold-800); }
@media (max-width:767px){ .hero::before,.hero--right::before { background:rgb(20 18 16 / calc(var(--hero-scrim) * .9)); } .hero--dark-text::before{ display:none; } .hero--right .hero__content{ text-align:left; justify-items:start; } }
.quickband { position:relative; z-index:2; margin-top:-64px; }
.quick { position:relative; margin:0; background:var(--sb-n-0); color:var(--sb-text-primary); border-top:3px solid var(--sb-gold-700); padding:24px; display:grid; gap:20px; align-items:end; box-shadow:0 16px 40px rgb(125 87 22 / .18); }
@media (min-width:768px){ .quick{ grid-template-columns:1.2fr 1fr auto; padding:28px 32px; } }
.quick label { display:block; font-size:var(--sb-text-sm); font-weight:500; margin-bottom:8px; color:var(--sb-text-secondary); }

.eyebrow { margin:0 0 12px; font-size:var(--sb-text-sm); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sb-text-brand); }
.stats-grid { display:grid; gap:20px; }
@media (min-width:700px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } }
.stat-card { background:rgba(255,255,255,.84); border:1px solid rgb(125 87 22 / .12); padding:26px 18px; display:grid; gap:12px; align-items:center; justify-items:center; box-shadow:0 10px 24px rgb(20 18 16 / .06); }
.stat-card__value { display:block; font-family:var(--sb-font-serif); font-size:clamp(32px,3vw,52px); line-height:1; color:var(--sb-gold-800); font-variant-numeric:tabular-nums; }
.stat-card__label { display:block; color:var(--sb-text-secondary); font-size:var(--sb-text-md); text-transform:lowercase; text-align:center; }
.feature-grid { display:grid; gap:20px; }
@media (min-width:700px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .feature-grid{ grid-template-columns:repeat(4,1fr); } }
.feature-card { display:grid; gap:16px; padding:26px 22px; background:var(--sb-n-0); border:1px solid var(--sb-border-default); border-top:3px solid var(--sb-gold-700); box-shadow:0 14px 30px rgb(20 18 16 / .04); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.feature-card__icon { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,var(--sb-gold-200),var(--sb-gold-100)); color:var(--sb-gold-800); font-size:var(--sb-text-md); font-weight:700; }
.feature-card h3 { font-size:24px; color:var(--sb-gold-800); }
.feature-card p { color:var(--sb-text-secondary); font-size:var(--sb-text-md); line-height:1.75; }
@media (hover:hover){ .feature-card:hover{ transform:translateY(-4px); box-shadow:0 18px 30px rgb(125 87 22 / .12); border-color:rgb(125 87 22 / .26); } }
.segmented { display:flex; flex-wrap:wrap; gap:8px; }
.segmented__btn { border:1px solid var(--sb-border-control); background:var(--sb-n-0); min-height:40px; padding:0 14px; font:inherit; font-size:var(--sb-text-md); font-weight:600; color:var(--sb-text-secondary); cursor:pointer; transition:background-color .2s ease,color .2s ease,border-color .2s ease; }
.segmented__btn.is-active { background:var(--sb-gold-700); color:var(--sb-n-0); border-color:var(--sb-gold-700); }
.service-filter { display:grid; gap:16px; }
@media (min-width:720px){ .service-filter{ grid-template-columns:repeat(2,1fr); } }
.service-card { display:grid; gap:12px; align-content:start; min-height:200px; padding:22px 20px; background:var(--sb-n-0); border:1px solid var(--sb-border-default); border-top:3px solid var(--sb-gold-700); box-shadow:0 10px 22px rgb(20 18 16 / .04); transition:opacity .25s ease, transform .25s ease; }
.service-card.hidden { display:none; }
.service-card__badge { display:inline-flex; width:max-content; padding:6px 10px; background:var(--sb-gold-100); color:var(--sb-text-brand); font-size:var(--sb-text-sm); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.service-card h3 { font-size:24px; color:var(--sb-gold-800); }
.service-card p { color:var(--sb-text-secondary); font-size:var(--sb-text-md); line-height:1.7; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,0,.2,1), transform .7s cubic-bezier(.2,0,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }

/* Category rows */
.rows { border-top:1px solid var(--sb-border-default); }
.row { position:relative; display:grid; gap:8px 40px; padding:28px 0; border-bottom:1px solid var(--sb-border-default); align-items:baseline; }
@media (min-width:900px){ .row{ grid-template-columns:5fr 5fr 2fr; padding:36px 16px; } }
.row h3 a { text-decoration:none; }
.row h3 a::after { content:""; position:absolute; inset:0; }
.row p { color:var(--sb-text-secondary); }
.row .count { color:var(--sb-text-muted); font-size:var(--sb-text-md); }
@media (min-width:900px){ .row .count{ text-align:right; } }
.row:has(a:focus-visible) { outline:2px solid var(--sb-focus-ring); outline-offset:-2px; }
@media (hover:hover){ .row:hover{ background:var(--sb-bg-hover); } }
.row h3 { font-size:clamp(26px,2.6vw,34px); color:var(--sb-gold-800); }

.two { display:grid; gap:40px; }
@media (min-width:1024px){ .two{ grid-template-columns:4fr 8fr; gap:80px; align-items:start; } .two--even{ grid-template-columns:1fr 1fr; align-items:center; } }

/* Tiles / featured */
.feat { display:grid; gap:40px 24px; }
@media (min-width:700px){ .feat{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .feat{ grid-template-columns:repeat(4,1fr); } .feat > :first-child{ grid-column:span 2; grid-row:span 2; } }
.tile { position:relative; display:grid; gap:14px; align-content:start; }
.tile h3 { font-size:24px; color:var(--sb-gold-800); }
.tile h3 a { text-decoration:none; }
.tile h3 a::after { content:""; position:absolute; inset:0; }
.tile p { color:var(--sb-text-secondary); font-size:var(--sb-text-md); line-height:1.65; }
.tile:has(a:focus-visible) { outline:2px solid var(--sb-focus-ring); outline-offset:6px; }
.tile .ph { transition:filter var(--sb-duration-fast) var(--sb-ease); }
@media (hover:hover){ .tile:hover .ph{ filter:brightness(1.06) saturate(1.1); } .tile:hover h3{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; } }
.feat > :first-child h3 { font-size:clamp(28px,3vw,40px); }
.feat > :first-child .ph { --ratio:4/5 !important; }
.tile .foot { display:flex; justify-content:space-between; gap:16px; font-size:var(--sb-text-md); padding-top:12px; border-top:1px solid var(--sb-border-default); }

/* Flow */
.flow { list-style:none; padding:0; display:grid; gap:0; counter-reset:f; }
@media (min-width:900px){ .flow{ grid-template-columns:repeat(4,1fr); gap:32px; } }
.flow li { counter-increment:f; padding:24px 0 28px; border-top:2px solid var(--sb-gold-700); display:grid; gap:12px; align-content:start; }
@media (max-width:899px){ .flow li{ border-top-width:1px; border-top-color:var(--sb-border-default); } .flow li:first-child{ border-top:2px solid var(--sb-gold-700); } }
.flow li::before { content:counter(f); font-family:var(--sb-font-serif); font-size:44px; line-height:1.3; color:var(--sb-text-brand); }
.flow h3 { font-size:22px; }
.flow p { color:var(--sb-text-secondary); font-size:var(--sb-text-md); line-height:1.7; }

/* Team */
.team { display:grid; gap:40px 24px; }
@media (min-width:600px){ .team{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .team{ grid-template-columns:repeat(4,1fr); } }
.team article { display:grid; gap:14px; align-content:start; }
.team .ph { --ratio:3/4; }
.team h3 { font-size:24px; color:var(--sb-gold-800); }
.team p { color:var(--sb-text-secondary); font-size:var(--sb-text-md); line-height:1.6; }

/* Journal */
.journal { display:grid; gap:48px; }
@media (min-width:1024px){ .journal{ grid-template-columns:7fr 5fr; gap:72px; } }
.lead-post { position:relative; display:grid; gap:18px; align-content:start; }
.lead-post h3 { font-size:clamp(28px,3vw,38px); color:var(--sb-gold-800); }
.lead-post a, .post a { text-decoration:none; }
.lead-post a::after, .post a::after { content:""; position:absolute; inset:0; }
.lead-post p { color:var(--sb-text-secondary); max-width:56ch; }
.post-list { border-top:1px solid var(--sb-border-default); }
.post { position:relative; padding:24px 0; border-bottom:1px solid var(--sb-border-default); display:grid; gap:8px; }
.post h3 { font-size:24px; color:var(--sb-gold-800); }
.post p { color:var(--sb-text-secondary); font-size:var(--sb-text-md); }
.post:has(a:focus-visible),.lead-post:has(a:focus-visible) { outline:2px solid var(--sb-focus-ring); outline-offset:4px; }
@media (hover:hover){ .post:hover h3,.lead-post:hover h3{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; } }
.tag { color:var(--sb-text-brand); font-size:var(--sb-text-sm); font-weight:500; }
.posts3 { display:grid; gap:40px 24px; }
@media (min-width:768px){ .posts3{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1024px){ .posts3{ grid-template-columns:repeat(4,1fr); } }

/* CTA */
.cta { display:grid; gap:32px; align-items:end; }
@media (min-width:900px){ .cta{ grid-template-columns:8fr 4fr; } .cta .btn-row{ justify-content:flex-end; } }
.cta h2 { font-size:clamp(34px,4.6vw,64px); max-width:18ch; }
.cta p { margin-top:20px; }

/* Page head */
.phead { padding-block:clamp(40px,6vw,72px) clamp(40px,5vw,64px); background:linear-gradient(180deg,var(--sb-gold-100),var(--sb-n-50)); border-bottom:1px solid var(--sb-border-default); }
.phead h1 { font-size:clamp(36px,4.6vw,64px); max-width:20ch; margin:20px 0 24px; color:var(--sb-gold-800); }
.crumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 10px; font-size:var(--sb-text-sm); color:var(--sb-text-muted); }
.crumbs li+li::before { content:"/"; margin-right:10px; color:var(--sb-border-control); }
.crumbs a { color:var(--sb-text-secondary); }
.factrow { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid color-mix(in srgb, var(--sb-gold-600) 35%, var(--sb-gold-100)); margin-top:clamp(32px,4vw,56px); }
@media (min-width:800px){ .factrow{ grid-template-columns:repeat(4,1fr); } }
.factrow div { padding:20px 20px 4px 0; }
@media (min-width:800px){ .factrow div+div{ padding-left:24px; border-left:1px solid color-mix(in srgb, var(--sb-gold-600) 35%, var(--sb-gold-100)); } }
.factrow dt { font-size:var(--sb-text-sm); color:var(--sb-text-muted); }
.factrow dd { font-family:var(--sb-font-serif); font-size:24px; line-height:1.4; font-variant-numeric:tabular-nums; color:var(--sb-gold-900); }

/* Catalog */
.catalog { display:grid; gap:40px; }
@media (min-width:1024px){ .catalog{ grid-template-columns:3fr 9fr; gap:72px; } }
.sidenav { position:sticky; top:128px; align-self:start; }
.sidenav ul { list-style:none; margin:0; padding:0; display:flex; overflow-x:auto; border-bottom:1px solid var(--sb-border-default); }
.sidenav a { display:flex; align-items:center; min-height:48px; padding:0 16px; white-space:nowrap; text-decoration:none; color:var(--sb-text-secondary); border-bottom:2px solid transparent; font-size:var(--sb-text-md); }
.sidenav a:hover { color:var(--sb-gold-800); }
@media (min-width:1024px){ .sidenav ul{ display:grid; border-bottom:0; border-left:1px solid var(--sb-border-default); overflow:visible; } .sidenav a{ padding:0 20px; border-bottom:0; margin-left:-1px; border-left:2px solid transparent; } .sidenav a:hover{ border-left-color:var(--sb-gold-700); } }
.cat { padding-bottom:clamp(40px,5vw,72px); scroll-margin-top:128px; }
.cat > h2 { margin-bottom:12px; color:var(--sb-gold-800); }
.cat > p { margin-bottom:28px; }
.item { position:relative; display:grid; gap:16px 28px; padding:24px 0; border-top:1px solid var(--sb-border-default); align-items:start; }
@media (min-width:700px){ .item{ grid-template-columns:200px 1fr auto; } }
.item .ph { --ratio:4/3; }
.item h3 { font-size:26px; color:var(--sb-gold-800); }
.item h3 a { text-decoration:none; }
.item h3 a::after { content:""; position:absolute; inset:0; }
.item p { color:var(--sb-text-secondary); font-size:var(--sb-text-md); margin-top:8px; max-width:52ch; }
.item .meta { display:grid; gap:2px; font-size:var(--sb-text-md); }
@media (min-width:700px){ .item .meta{ text-align:right; } }
.item:has(a:focus-visible) { outline:2px solid var(--sb-focus-ring); outline-offset:-2px; }
@media (hover:hover){ .item:hover{ background:var(--sb-bg-hover); } }

/* Detail */
.detail { display:grid; gap:56px; }
@media (min-width:1024px){ .detail{ grid-template-columns:8fr 4fr; gap:80px; align-items:start; } }
.blocks { display:grid; gap:clamp(48px,6vw,80px); }
.blocks h2 { margin-bottom:24px; color:var(--sb-gold-800); }
.list { list-style:none; padding:0; border-top:1px solid var(--sb-border-default); }
.list li { padding:16px 0; border-bottom:1px solid var(--sb-border-default); color:var(--sb-text-secondary); }
.list--plain li { color:var(--sb-text-primary); }
.stepsv { list-style:none; padding:0; counter-reset:sv; border-top:1px solid var(--sb-border-default); }
.stepsv li { counter-increment:sv; display:grid; grid-template-columns:56px 1fr; gap:8px 16px; padding:24px 0; border-bottom:1px solid var(--sb-border-default); }
.stepsv li::before { content:counter(sv); font-family:var(--sb-font-serif); font-size:36px; line-height:1.3; color:var(--sb-text-brand); grid-row:span 2; }
.stepsv h3 { font-size:22px; }
.stepsv p { color:var(--sb-text-secondary); font-size:var(--sb-text-md); }
.panel { background:var(--sb-n-0); border:1px solid var(--sb-border-default); border-top:3px solid var(--sb-gold-700); padding:28px; display:grid; gap:18px; box-shadow:0 12px 32px rgb(125 87 22 / .12); }
.panel h3 { color:var(--sb-gold-800); }
.panel dl { display:grid; gap:0; }
.panel dl div { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--sb-border-default); font-size:var(--sb-text-md); }
.panel dt { color:var(--sb-text-muted); }
.panel dd { font-weight:500; text-align:right; font-variant-numeric:tabular-nums; }
.sticky { position:sticky; top:136px; }
details.faq { border-bottom:1px solid var(--sb-border-default); }
details.faq:first-of-type { border-top:1px solid var(--sb-border-default); }
details.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:24px; align-items:center; min-height:64px; padding:12px 0; font-weight:500; }
details.faq summary::-webkit-details-marker { display:none; }
details.faq summary::after { content:"+"; font-family:var(--sb-font-serif); font-size:30px; line-height:1; color:var(--sb-text-brand); }
details.faq[open] summary::after { content:"–"; }
details.faq p { padding:0 0 20px; color:var(--sb-text-secondary); max-width:62ch; }

/* Tables */
.tablewrap { overflow-x:auto; margin-bottom:56px; }
table { width:100%; border-collapse:collapse; min-width:620px; }
caption { text-align:left; font-family:var(--sb-font-serif); font-size:30px; line-height:1.4; padding-bottom:16px; color:var(--sb-gold-800); }
th,td { text-align:left; padding:16px 12px 16px 0; border-bottom:1px solid var(--sb-border-default); font-size:var(--sb-text-md); vertical-align:baseline; }
thead th { color:var(--sb-text-muted); font-weight:500; border-bottom:1px solid var(--sb-gold-700); }
.num { text-align:right !important; font-variant-numeric:tabular-nums; padding-right:0 !important; }

/* Form */
.form { display:grid; gap:24px; }
.field { display:grid; gap:8px; }
.field label { font-size:var(--sb-text-md); font-weight:500; }
.field input,.field select,.field textarea { width:100%; min-height:var(--sb-control-md); padding:10px 14px; font:inherit; background:var(--sb-n-0); color:var(--sb-text-primary); border:1px solid var(--sb-border-control); border-radius:0; }
.field textarea { min-height:120px; resize:vertical; }
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible { border-color:var(--sb-focus-ring); }
.field [aria-invalid="true"] { border-color:var(--sb-danger); }
.help { font-size:var(--sb-text-sm); color:var(--sb-text-muted); }
.err { color:var(--sb-danger); font-size:var(--sb-text-sm); }
.err[hidden]{ display:none; }
.row2 { display:grid; gap:24px; } @media (min-width:640px){ .row2{ grid-template-columns:1fr 1fr; } }
.notice { padding:14px 16px; border-left:3px solid var(--sb-info); background:var(--sb-info-bg); font-size:var(--sb-text-md); }
.notice--ok { border-left-color:var(--sb-success); background:var(--sb-success-bg); }
.notice--err { border-left-color:var(--sb-danger); background:var(--sb-danger-bg); }
.notice:empty { display:none; }

.pairs { display:grid; gap:48px 32px; } @media (min-width:900px){ .pairs{ grid-template-columns:1fr 1fr; } }
.ba { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:14px; } .ba .ph{ --ratio:1/1; }
.quotes { display:grid; gap:40px; } @media (min-width:900px){ .quotes{ grid-template-columns:repeat(3,1fr); gap:56px; } }
.quotes blockquote { margin:0; font-family:var(--sb-font-serif); font-size:26px; line-height:1.45; padding-top:20px; border-top:2px solid var(--sb-gold-700); }
.quotes figcaption { margin-top:14px; font-size:var(--sb-text-sm); color:var(--sb-text-muted); }
.prose { max-width:66ch; display:grid; gap:20px; }
.prose h2 { font-size:32px; margin-top:20px; color:var(--sb-gold-800); }
.prose p { color:var(--sb-text-secondary); font-size:var(--sb-text-xl); line-height:1.8; }

/* Footer (deep gold) */
.footer { padding-block:72px 32px; }
.footer__grid { display:grid; gap:40px; } @media (min-width:900px){ .footer__grid{ grid-template-columns:4fr 2fr 3fr 3fr; gap:56px; } }
.footer .logo img { height:120px; filter:none; }
.footer h2 { font-family:var(--sb-font-sans); font-size:var(--sb-text-md); font-weight:600; margin-bottom:16px; letter-spacing:0; }
.footer ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.footer a { color:var(--sb-text-secondary); font-size:var(--sb-text-md); text-decoration:none; }
.footer a:hover { color:var(--sb-n-0); text-decoration:underline; }
.footer .fine { margin-top:56px; padding-top:20px; border-top:1px solid var(--sb-border-default); font-size:var(--sb-text-sm); color:var(--sb-text-muted); display:grid; gap:6px; }
.stickybar { position:fixed; inset-inline:0; bottom:0; z-index:100; display:grid; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--sb-n-0); border-top:1px solid var(--sb-border-default); }
@media (min-width:1100px){ .stickybar{ display:none; } }
@media (max-width:1099px){ body{ padding-bottom:72px; } .header .wrap{ min-height:88px; } .logo img{ height:72px; } }

@media (max-width:767px){
  .wrap { padding-inline:16px; }
  .header .wrap { min-height:78px; gap:10px; }
  .logo img { height:60px; }
  .menu-toggle { width:42px; height:42px; }
  .quick { padding:18px 14px; }
  .quick .btn { width:100%; }
  .quick .muted { font-size:var(--sb-text-md); }
  .hero { min-height:620px; }
  .hero__content { gap:12px; padding-block:42px 72px; }
  .hero__kicker { font-size:15px; }
  .hero h1 { font-size:clamp(35px,12vw,68px); }
  .hero__sub { font-size:clamp(22px,7vw,30px); }
  .hero__text { font-size:17px; }
  .hero .btn-row { width:100%; }
  .hero .btn { flex:1 1 100%; min-height:50px; }
  .btn-row { gap:10px; }
  .quickband { margin-top:-36px; }
  .stats-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .stat-card { padding:18px 12px; }
  .feature-card, .service-card { padding:20px 16px; }
  .feature-card__icon { width:44px; height:44px; }
  .segmented { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); width:100%; }
  .segmented__btn { min-height:44px; }
  .service-filter { grid-template-columns:1fr; }
  .head { margin-bottom:24px; }
  .head--split { display:grid; gap:16px; }
  .head--split h2 { max-width:16ch; }
  .row { padding:20px 0; }
  .row h3 { font-size:1.5rem; }
  .row p { font-size:14px; }
  .tile .foot { display:grid; gap:8px; }
  .team { grid-template-columns:1fr; }
  .journal { gap:28px; }
  .lead-post h3, .post h3 { font-size:1.5rem; }
  .cta { gap:18px; }
  .cta .btn-row { justify-content:stretch; }
  .cta .btn { width:100%; }
  .detail { grid-template-columns:1fr; gap:20px; }
  .sticky { position:static; }
  .panel { padding:18px 16px; gap:14px; }
  .panel dl { gap:6px; }
  .panel dl div { display:grid; gap:4px; border-bottom:1px solid var(--sb-border-default); padding:10px 0; }
  .panel dt, .panel dd { text-align:left; }
  .panel dd { margin:0; }
  .panel .btn { width:100%; }
  .panel .help { font-size:12px; }
  .footer { padding-top:52px; }
  .footer__grid { gap:28px; }
  .footer .fine { margin-top:32px; }
}

@media (max-width:480px){
  .hero { min-height:560px; }
  .hero h1 { font-size:clamp(32px,14vw,54px); }
  .stats-grid { grid-template-columns:1fr; }
  .segmented { grid-template-columns:1fr; }
  .service-card h3, .feature-card h3 { font-size:1.25rem; }
  .cta h2 { font-size:clamp(28px,12vw,40px); }
  .stickybar .btn { min-height:46px; }
}