/* ============================================================
   KOSAKRASA — design system v2 ("Warm Light")
   Photography is the material; the interface recedes into a warm neutral.
   ============================================================ */
:root{
  /* — Surfaces — */
  --ink:        #13231B;
  --ink-2:      #0B1811;
  --paper:      #F7F2E9;
  --paper-2:    #EFE7D9;
  --paper-3:    #E5DACA;

  /* — Accents (three, kept in tune; no more) — */
  --amber:      #BC5B2E;
  --amber-soft: #E8C4AC;
  --champagne:  #C9A870;
  --emerald:    #1B5E47;
  --accent:     var(--amber);

  /* — Text — */
  --tx:         #13231B;
  --tx-soft:    #5C6259;
  --tx-faint:   #8C9089;
  --tx-on-dark: #F7F2E9;
  --tx-on-dark-soft: rgba(247,242,233,.62);

  /* — Rules — */
  --line:       rgba(19,35,27,.14);
  --line-dark:  rgba(247,242,233,.16);

  /* — Typography — */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter', system-ui, sans-serif;

  /* — Metrics — */
  --maxw: 1320px;
  --gut:  clamp(18px, 4vw, 56px);
  --sec:  clamp(72px, 9vw, 150px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --r:    2px;
  --r-lg: 4px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; scroll-padding-top:94px; }
body{
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.8;
  background:var(--paper); color:var(--tx);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; width:100%; height:100%; object-fit:cover; color:transparent; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--accent); }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
::selection{ background:var(--accent); color:var(--paper); }

/* ===== Primitives ===== */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sec); position:relative; }
.dark{ background:var(--ink); color:var(--tx-on-dark); }
.darker{ background:var(--ink-2); color:var(--tx-on-dark); }
.tint{ background:var(--paper-2); }

/* overflow-wrap lets a single long word break instead of being clipped.
   Russian compounds are long, and a clipped word does not grow scrollWidth,
   so a horizontal-scroll check never catches it. */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:300; line-height:1.02; letter-spacing:-.02em; overflow-wrap:break-word; }
em{ font-style:italic; color:var(--accent); }
.dark em, .darker em{ color:var(--champagne); }

.eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:14px;
}
.dark .eyebrow, .darker .eyebrow{ color:var(--champagne); }
.hairline{ display:block; width:44px; height:1px; background:currentColor; opacity:.5; }

.lead{ font-size:clamp(15px,1.35vw,19px); line-height:1.75; color:var(--tx-soft); max-width:56ch; }
.dark .lead, .darker .lead{ color:var(--tx-on-dark-soft); }

.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:clamp(34px,4.5vw,64px); }
.sec-head h2{ font-size:clamp(34px,5vw,76px); max-width:22ch; }
.sec-head .lead{ margin-top:20px; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:12px; white-space:nowrap;
  font-family:var(--sans); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  padding:17px 32px; border-radius:var(--r);
  background:var(--accent); color:var(--paper);
  border:1px solid var(--accent);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); transform:translateY(-2px); }
.dark .btn:hover, .darker .btn:hover, .cta-box .btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn--ghost{ background:transparent; color:var(--tx); border-color:var(--line); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.dark .btn--ghost, .darker .btn--ghost{ color:var(--tx-on-dark); border-color:var(--line-dark); }
.dark .btn--ghost:hover, .darker .btn--ghost:hover{ background:var(--paper); color:var(--ink); }
.btn .arrow{ transition:transform .4s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

.tlink{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); border-bottom:1px solid transparent; padding-bottom:3px; transition:border-color .4s var(--ease); }
.tlink:hover{ border-bottom-color:currentColor; }
.tlink .arrow{ transition:transform .4s var(--ease); }
.tlink:hover .arrow{ transform:translateX(4px); }
.dark .tlink, .darker .tlink{ color:var(--champagne); }

/* ===== Photo wrapper (one primitive for every slot) ===== */
.ph{ position:relative; overflow:hidden; background:var(--ink-2); border-radius:var(--r-lg); }
.ph img{ transition:transform 1.1s var(--ease); }
.ph::after{ content:attr(data-cap); position:absolute; inset:auto 0 0 0; padding:14px 16px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.85); background:linear-gradient(transparent, rgba(11,24,17,.75)); opacity:0; transition:opacity .4s var(--ease); }
.ph[data-cap]:hover::after{ opacity:1; }
a:hover .ph img, .ph:hover img{ transform:scale(1.045); }
.r-3-4{ aspect-ratio:3/4; } .r-4-5{ aspect-ratio:4/5; } .r-1-1{ aspect-ratio:1/1; } .r-16-9{ aspect-ratio:16/9; }

/* ===== Reveal ===== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* ============================================================
   HEADER
   ============================================================ */
/* Fixed, never sticky: the state switch must not touch `position`.
   Sticky kept the header in flow (78px), absolute took it out, so crossing
   the threshold shifted every following block by the header height and read
   as a hard jump. Fixed is out of flow in both states, so only colors and
   the background cross-fade. Every content page opens with a full-bleed
   hero whose own top padding clears the header, so nothing needs an offset. */
.hdr{ position:fixed; top:0; left:0; right:0; z-index:60; transition:background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s var(--ease); border-bottom:1px solid transparent; }
.hdr.solid{ background:color-mix(in oklab, var(--paper) 88%, transparent); backdrop-filter:blur(18px) saturate(1.4); border-bottom-color:var(--line); }
.hdr-in{ display:flex; align-items:center; justify-content:space-between; height:78px; gap:32px; }
.brand{ display:inline-flex; align-items:center; }
/* Both logo variants are stacked and cross-faded. Swapping them with
   display:none made the header jump at the transparent -> solid boundary:
   the background faded over .45s while the logo flipped instantly. */
.brand{ position:relative; }
.brand-logo{ height:42px; width:auto; display:block; transition:opacity .45s var(--ease); }
.brand-logo-white{ position:absolute; top:0; left:0; height:42px; width:auto; opacity:0; }
.hdr-over .brand-logo-dark{ opacity:0; }
.hdr-over .brand-logo-white{ opacity:1; }
.nav{ display:flex; align-items:center; gap:clamp(18px, 2.2vw, 38px); min-width:0; }
.nav-item{ position:relative; }
.nav-link{ font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.5em; padding-block:8px; white-space:nowrap; transition:color .3s var(--ease); }
.nav-link .caret{ width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .3s var(--ease); opacity:.7; }
.nav-item:hover .nav-link .caret{ transform:rotate(225deg) translateY(-1px); }
.hdr .btn{ padding:13px 24px; flex-shrink:0; }
.hdr .brand{ flex-shrink:0; }
.hdr-over{ border-bottom-color:transparent; }
.hdr .brand, .hdr .nav-link, .hdr .burger{ transition:color .45s var(--ease); }
.hdr .btn--ghost{ transition:color .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease); }
.hdr-over .brand, .hdr-over .nav-link, .hdr-over .burger{ color:var(--tx-on-dark); }
.hdr-over .btn--ghost{ color:var(--tx-on-dark); border-color:rgba(247,242,233,.34); }
.hdr-over .btn--ghost:hover{ background:var(--paper); color:var(--ink); }

.dropdown{
  position:absolute; top:calc(100% + 10px); left:-16px;
  min-width:240px; background:rgba(11,24,17,.96);
  backdrop-filter:blur(20px); border:1px solid var(--line-dark);
  padding:10px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav-item:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:block; padding:11px 16px; font-size:13px; letter-spacing:.04em; color:rgba(247,242,233,.7); transition:color .25s var(--ease), background .25s var(--ease); }
.dropdown a:hover{ color:var(--tx-on-dark); background:rgba(255,255,255,.05); }
.dropdown a .ru-sub{ display:block; font-family:var(--serif); font-style:italic; font-size:16px; color:var(--champagne); letter-spacing:0; }
.dd-sep{ height:1px; background:var(--line-dark); margin:6px 0; }
.dropdown--wide{ min-width:520px; display:flex; gap:4px; }
.dropdown--wide .dd-col{ flex:1; min-width:0; }

.burger{ display:none; flex-direction:column; gap:5px; width:30px; height:18px; justify-content:center; flex-shrink:0; }
.burger span{ display:block; height:1px; width:100%; background:currentColor; transition:transform .35s var(--ease), opacity .25s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Mobile CTA pinned to the bottom, which frees the header for the burger.
   Hidden until the page is scrolled past CTA_REVEAL_AT (see main.js): on the
   first screen the hero already has its own button, so a second one just
   covers content. The bottom padding on body stays reserved either way,
   so nothing jumps when the bar slides in. */
.mobile-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:12px clamp(16px,4vw,28px); justify-content:center;
  background:color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter:blur(18px) saturate(1.4); border-top:1px solid var(--line);
  transform:translateY(110%); opacity:0; pointer-events:none;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.mobile-cta.is-visible{ transform:none; opacity:1; pointer-events:auto; }
.mobile-cta .btn{ width:100%; justify-content:center; }

.mobile-menu{
  position:fixed; inset:0; z-index:80; background:var(--ink-2); overflow:hidden;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.mobile-menu.open{ opacity:1; visibility:visible; }
.mobile-menu-x{ position:absolute; top:16px; right:16px; z-index:40; width:44px; height:44px; font-size:18px; color:var(--tx-on-dark); border:1px solid var(--line-dark); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); }
.mobile-menu-x:hover{ background:var(--accent); border-color:var(--accent); transform:rotate(90deg); }

/* Backdrop: dark photo, heavy dim, faint diagonal hatching */
.mm-bg{ position:absolute; inset:0; z-index:0; }
.mm-bg img{ filter:grayscale(.3); }
.mm-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,24,17,.93) 0%, rgba(11,24,17,.86) 45%, rgba(11,24,17,.96) 100%); }
.mm-bg::before{ content:""; position:absolute; inset:0; z-index:1; background-image:repeating-linear-gradient(135deg, rgba(247,242,233,.035) 0 1px, transparent 1px 9px); }

.mm-scroll{ position:relative; z-index:2; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; padding:74px 22px 0; }
.mm-scroll::-webkit-scrollbar{ width:0; }
.mm-eyebrow{ font-size:9.5px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--champagne); display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.mm-eyebrow::before{ content:""; width:32px; height:1px; background:currentColor; opacity:.55; }

/* Rows fade in as the menu opens */
.mobile-menu .stagger{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.mobile-menu.open .stagger{ opacity:1; transform:none; }
.mobile-menu.open .stagger:nth-child(1){ transition-delay:.06s; }
.mobile-menu.open .stagger:nth-child(2){ transition-delay:.11s; }
.mobile-menu.open .stagger:nth-child(3){ transition-delay:.16s; }
.mobile-menu.open .stagger:nth-child(4){ transition-delay:.21s; }
.mobile-menu.open .stagger:nth-child(5){ transition-delay:.26s; }
.mobile-menu.open .stagger:nth-child(6){ transition-delay:.31s; }

/* Accordion */
.mobile-menu .sec{ border-top:1px solid var(--line-dark); }
.mobile-menu .sec-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 0; text-align:left; min-height:56px; }
.mobile-menu .sec-t{ font-family:var(--serif); font-size:31px; line-height:1.06; color:var(--tx-on-dark); }
.mobile-menu .sec-btn .corner{ color:rgba(247,242,233,.4); transform:rotate(135deg); }
.mobile-menu .sec.open .sec-btn .corner{ transform:rotate(-45deg); color:var(--champagne); }
.mobile-menu .sec-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.mobile-menu .sec.open .sec-panel{ grid-template-rows:1fr; }
.mobile-menu .sec-panel > div{ overflow:hidden; }
.mobile-menu .flat{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 0; border-top:1px solid var(--line-dark); min-height:56px; }
.mobile-menu .flat .sec-t{ font-size:31px; }
.mobile-menu .flat .corner{ color:rgba(247,242,233,.4); }
.mobile-menu .flat:hover .corner{ color:var(--champagne); transform:rotate(45deg) translate(2px,-2px); }
.mobile-menu .nav-end{ border-bottom:1px solid var(--line-dark); }

.mobile-menu .sub{ padding-bottom:8px; }
.mobile-menu .sub a{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0 12px 18px; min-height:46px; position:relative; color:var(--tx-on-dark-soft); font-size:14.5px; letter-spacing:.01em; transition:color .3s var(--ease), padding-left .3s var(--ease); }
.mobile-menu .sub a::before{ content:""; position:absolute; left:0; top:50%; width:9px; height:1px; background:var(--champagne); opacity:.5; }
.mobile-menu .sub a:hover{ color:var(--tx-on-dark); padding-left:24px; }
.mobile-menu .sub a:hover .corner{ opacity:1; transform:rotate(45deg) translate(2px,-2px); }
.mobile-menu .sub .corner{ opacity:.25; }
.mobile-menu .sub .kind{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:rgba(247,242,233,.4); margin-left:auto; margin-right:12px; }

/* Footer: contacts */
.mm-foot{ position:relative; z-index:2; padding:24px 22px 26px; border-top:1px solid var(--line-dark); background:rgba(11,24,17,.5); backdrop-filter:blur(6px); }
.mm-foot .k{ font-size:9.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--tx-on-dark-soft); margin-bottom:10px; }
.mm-foot .tel{ font-family:var(--serif); font-size:28px; color:var(--tx-on-dark); display:inline-block; }
.mm-soc{ display:flex; gap:8px; margin-top:16px; }
.mm-soc a{ flex:1; min-height:46px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line-dark); border-radius:99px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-on-dark); transition:background .35s var(--ease), border-color .35s var(--ease); }
.mm-soc a:hover{ background:var(--accent); border-color:var(--accent); }
.mm-soc svg{ width:15px; height:15px; }
.mm-addr{ margin-top:16px; font-size:11.5px; line-height:1.6; color:rgba(247,242,233,.4); }

/* ============================================================
   HERO — home
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink-2); }
.hero-media{ position:absolute; inset:-8% 0; will-change:transform; }
.hero-media::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(11,24,17,.9) 0%, rgba(11,24,17,.74) 28%, rgba(11,24,17,.56) 55%, rgba(11,24,17,.46) 78%, rgba(11,24,17,.46) 100%); }
.hero-media::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(11,24,17,.62) 0%, rgba(11,24,17,.22) 34%, rgba(11,24,17,.72) 76%, rgba(11,24,17,.95) 100%); }
.hero-in{ position:relative; z-index:2; width:100%; padding-bottom:clamp(40px,9vh,120px); padding-top:clamp(96px,14vh,150px); color:var(--tx-on-dark); }
.hero-in .eyebrow{ color:#EBD9B4; text-shadow:0 1px 14px rgba(11,24,17,.7); }
/* Size by the smaller side: a wide but short window has no room for a
   width-driven headline, and the lead and button get pushed off screen. */
.hero h1{ font-size:clamp(33px,min(9.5vw,12vh),168px); line-height:.94; margin-top:clamp(12px,2.2vh,24px); text-shadow:0 2px 40px rgba(11,24,17,.5); }
.hero h1 em{ color:var(--champagne); }
.hero-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(16px,3vh,40px); flex-wrap:wrap; margin-top:clamp(16px,3vh,54px); }
.hero-foot .lead{ color:rgba(247,242,233,.9); max-width:46ch; text-shadow:0 1px 20px rgba(11,24,17,.75); }

/* ============================================================
   SERVICE SPLIT
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--paper-3); }
/* Width comes from the grid (half the screen), height is the screen itself.
   An aspect-ratio here would drive height from width and, once capped by
   max-height, would shrink the card sideways too — leaving empty gutters. */
.split-card{ position:relative; display:block; height:100svh; overflow:hidden; background:var(--ink-2); }
.split-card img{ transition:transform 1.2s var(--ease); }
.split-card:hover img{ transform:scale(1.05); }
.split-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,24,17,.2) 30%, rgba(11,24,17,.62) 62%, rgba(11,24,17,.93)); }
.sc-in{ position:absolute; inset:auto 0 0 0; z-index:2; padding:clamp(24px,3.2vw,52px); color:var(--tx-on-dark); text-shadow:0 1px 20px rgba(11,24,17,.6); }
.sc-num{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--champagne); }
.sc-in h3{ font-size:clamp(30px,4.4vw,66px); font-style:italic; margin:14px 0 20px; }

/* ============================================================
   CATEGORY RAIL (horizontal visual guide)
   ============================================================ */
.rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); gap:14px; overflow-x:auto; padding-bottom:12px; scrollbar-width:thin; }
.rail-card{ display:block; }
.rail-card .ph{ aspect-ratio:3/4; margin-bottom:16px; }
div.rail-card{ cursor:pointer; }
div.rail-card:hover .ph img{ transform:scale(1.05); }
.rail-card h4{ font-size:22px; font-style:italic; }
.rail-card .meta{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-faint); margin-top:6px; }
.dark .rail-card .meta{ color:var(--tx-on-dark-soft); }

/* ============================================================
   FOUNDER
   ============================================================ */
.founder{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,6vw,90px); align-items:center; }
.founder-photo{ position:relative; aspect-ratio:4/5; }
.badge{ position:absolute; right:-14px; bottom:38px; background:var(--accent); color:var(--paper); padding:16px 22px; font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.15; border-radius:var(--r); }
.quote{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(26px,3.2vw,50px); line-height:1.28; max-width:22ch; margin-top:26px; }
.quote .mk{ color:var(--accent); }
.dark .quote .mk{ color:var(--champagne); }
.sign{ margin-top:34px; }
.sign .nm{ font-family:var(--serif); font-size:26px; }
.sign .rl{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-faint); margin-top:4px; }
.dark .sign .rl{ color:var(--tx-on-dark-soft); }

/* ============================================================
   NUMBERS
   ============================================================ */
.numbers{ display:grid; grid-template-columns:repeat(3,1fr); }
.num-cell{ background:transparent; padding:clamp(30px,4vw,64px) clamp(20px,2.5vw,40px); text-align:center; border-left:1px solid var(--line-dark); }
.num-cell:first-child{ border-left:0; }
.num-big{ font-family:var(--serif); font-size:clamp(50px,7vw,110px); line-height:1; font-weight:300; }
.num-big em{ color:var(--champagne); }
.num-label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--tx-on-dark-soft); margin-top:14px; }

/* ============================================================
   PHOTO WALL
   ============================================================ */
.wall-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(120px,15vw,220px); gap:10px; }
.wall-cell{ overflow:hidden; border-radius:var(--r-lg); background:var(--ink-2); cursor:pointer; }
.wall-cell img{ transition:transform 1.1s var(--ease); }
.wall-cell:hover img{ transform:scale(1.06); }
.c-a{ grid-column:span 2; grid-row:span 2; }
.c-c{ grid-row:span 2; }
.c-f{ grid-column:span 2; }

/* ============================================================
   PAGE HERO WITH PHOTO (service / hub / article / contacts / reviews / about)
   ============================================================ */
.svc-hero{ position:relative; min-height:74svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink-2); }
.svc-hero .hero-media{ position:absolute; inset:-8% 0; }
.svc-hero .hero-media::after{ background:linear-gradient(180deg, rgba(11,24,17,.66) 0%, rgba(11,24,17,.28) 36%, rgba(11,24,17,.8) 78%, rgba(11,24,17,.96) 100%); }
.svc-hero .hero-media::before{ background:linear-gradient(100deg, rgba(11,24,17,.88) 0%, rgba(11,24,17,.7) 30%, rgba(11,24,17,.54) 58%, rgba(11,24,17,.46) 82%, rgba(11,24,17,.46) 100%); }
.svc-hero h1, .svc-hero .crumb, .svc-hero .lead{ text-shadow:0 1px 22px rgba(11,24,17,.7); }
.svc-hero-in{ position:relative; z-index:2; width:100%; padding-block:clamp(92px,13vh,150px) clamp(32px,6vh,96px); color:var(--tx-on-dark); }
.crumb{ display:flex; gap:10px; flex-wrap:wrap; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-on-dark-soft); margin-bottom:26px; }
.crumb a:hover{ color:var(--champagne); }
.crumb .sep{ opacity:.4; }
.svc-hero h1{ font-size:clamp(32px,min(7.5vw,10vh),120px); font-style:italic; line-height:.96; }
.svc-meta{ display:flex; gap:32px; flex-wrap:wrap; margin-top:28px; padding-top:24px; border-top:1px solid var(--line-dark); }
.svc-meta div{ font-size:12px; letter-spacing:.1em; color:var(--tx-on-dark-soft); }
.svc-meta b{ display:block; font-family:var(--serif); font-size:26px; font-weight:400; letter-spacing:0; color:var(--tx-on-dark); text-transform:none; }

/* ============================================================
   TWO COLUMNS / TEXT + PHOTO
   ============================================================ */
.two-col{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5.5vw,86px); align-items:center; }
.two-col h2{ font-size:clamp(30px,4vw,60px); margin:18px 0 22px; }
.two-col p + p{ margin-top:18px; }
.body-copy{ color:var(--tx-soft); line-height:1.85; }
.dark .body-copy{ color:var(--tx-on-dark-soft); }

/* ============================================================
   FEATURES — cards with photos
   ============================================================ */
.feat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:12px; }
.feat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.feat:hover{ transform:translateY(-6px); box-shadow:0 26px 60px -34px rgba(19,35,27,.5); }
.dark .feat{ background:var(--ink); border-color:var(--line-dark); }
.feat .ph{ aspect-ratio:4/3; border-radius:0; cursor:pointer; }
.feat .ph:hover img{ transform:scale(1.05); }
.feat-body{ padding:24px 22px 28px; }
.feat .n{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--accent); }
.dark .feat .n{ color:var(--champagne); }
.feat h4{ font-size:21px; margin:10px 0 10px; color:var(--tx); }
.feat p{ font-size:14px; line-height:1.75; color:var(--tx-soft); }
.dark .feat h4{ color:var(--tx-on-dark); }
.dark .feat p{ color:var(--tx-on-dark-soft); }

/* ============================================================
   PRICING
   ============================================================ */
.price-row{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:20px 0; border-top:1px solid var(--line); }
.price-row:last-child{ border-bottom:1px solid var(--line); }
.dark .price-row{ border-color:var(--line-dark); }
.price-row .nm{ font-family:var(--serif); font-size:clamp(20px,2vw,28px); }
.price-row .dsc{ font-size:13px; color:var(--tx-faint); }
.price-row .val{ font-family:var(--serif); font-size:clamp(20px,2vw,28px); color:var(--accent); white-space:nowrap; }
.dark .price-row .val{ color:var(--champagne); }

/* ============================================================
   GALLERY
   ============================================================ */
.filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.filter{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:10px 20px; border:1px solid var(--line); border-radius:99px; color:var(--tx-soft); transition:all .35s var(--ease); }
.dark .filter{ border-color:var(--line-dark); color:var(--tx-on-dark-soft); }
.filter:hover{ border-color:var(--accent); color:var(--accent); }
.filter.active{ background:var(--accent); border-color:var(--accent); color:var(--paper); }
.masonry{ columns:4; column-gap:12px; }
.m-item{ position:relative; break-inside:avoid; margin-bottom:12px; overflow:hidden; border-radius:var(--r-lg); background:var(--ink-2); cursor:pointer; }
.m-item img{ height:auto; transition:transform 1.1s var(--ease); }
.m-item:hover img{ transform:scale(1.05); }
.m-over{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; color:#fff; background:linear-gradient(transparent 45%, rgba(11,24,17,.85)); opacity:0; transition:opacity .4s var(--ease); }
.m-item:hover .m-over{ opacity:1; }
.m-over .tag{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--champagne); }
.m-over .ttl{ font-family:var(--serif); font-style:italic; font-size:22px; margin-top:4px; }

/* Lightbox */
.lb{ position:fixed; inset:0; z-index:200; background:rgba(9,18,13,.94); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:4vw; opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; }
.lb.open{ opacity:1; visibility:visible; }
.lb img{ max-width:100%; max-height:86vh; width:auto; height:auto; object-fit:contain; border-radius:var(--r-lg); }
.lb-x{ position:absolute; top:20px; right:24px; width:46px; height:46px; font-size:24px; color:var(--paper); border:1px solid var(--line-dark); border-radius:50%; }
.lb-x:hover{ background:var(--accent); border-color:var(--accent); }

/* ============================================================
   SEASONAL BLOCK — back to school (temporary, remove after the season)
   Overlapping collage on a dark ground, direction B from Claude Design
   ============================================================ */
.season-collage{ padding:clamp(42px,5.4vw,80px) 0; overflow:hidden; position:relative; }
.season-collage::before{ content:""; position:absolute; inset:0; background:radial-gradient(90% 70% at 84% 0%, rgba(201,168,112,.14), transparent 60%); }
.season-collage .wrap{ position:relative; z-index:2; }
.season-collage-grid{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(28px,4.4vw,72px); align-items:center; }
.season-collage h2{ font-size:clamp(30px,4.2vw,62px); margin:16px 0 16px; max-width:16ch; }
.season-collage .btn{ margin-top:26px; }

.collage{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:center; }
.collage .cl{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--ink-2); transition:transform .6s var(--ease); }
.collage img{ transition:transform 1.1s var(--ease); }
.collage .cl:hover img{ transform:scale(1.06); }
.collage .cl:hover{ transform:translateY(0) scale(1.02); z-index:3; }
.cl-1{ aspect-ratio:3/4; transform:translateY(-22px); }
.cl-2{ aspect-ratio:4/5; transform:translateY(16px); }
.cl-3{ aspect-ratio:3/4; transform:translateY(-8px); }
.cl-4{ aspect-ratio:4/5; transform:translateY(26px); }
.cl-5{ aspect-ratio:5/6; transform:translateY(-30px); }
.cl-6{ aspect-ratio:1/1; transform:translateY(4px); }
.cl-7{ aspect-ratio:4/5; transform:translateY(-14px); }
.cl-8{ aspect-ratio:3/4; transform:translateY(20px); }

@media (max-width:1024px){
  .season-collage-grid{ grid-template-columns:1fr; }
  .collage{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(140px,168px); grid-template-columns:none; align-items:center; overflow-x:auto; padding-bottom:16px; scrollbar-width:none; }
  .collage::-webkit-scrollbar{ height:0; }
}
@media (max-width:560px){
  .collage .cl{ transform:none!important; }
}

/* ============================================================
   CTA / FOOTER
   ============================================================ */
.cta-box{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--ink); color:var(--tx-on-dark); text-align:center; padding:clamp(52px,8vw,120px) var(--gut); }
.cta-box .bgimg{ position:absolute; inset:0; opacity:.28; }
.cta-box .bgimg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,35,27,.75), rgba(19,35,27,.92)); }
.cta-box > *:not(.bgimg){ position:relative; z-index:2; }
.cta-box h2{ font-size:clamp(32px,5.4vw,84px); margin:22px 0 30px; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-phone{ font-family:var(--serif); font-size:clamp(22px,2.4vw,34px); color:var(--champagne); align-self:center; }

.ftr{ background:var(--ink-2); color:var(--tx-on-dark); padding-block:clamp(56px,7vw,96px) 60px; }
.ftr-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:clamp(28px,4vw,64px); }
.ftr .brand{ font-size:34px; color:var(--tx-on-dark); }
.ftr-logo{ display:inline-block; width:180px; }
.ftr-logo img{ width:100%; height:auto; display:block; }
.ftr p{ color:var(--tx-on-dark-soft); font-size:14px; margin-top:16px; max-width:32ch; }
.ftr h5{ font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--champagne); margin-bottom:18px; }
.ftr-col a{ display:block; font-size:14px; padding:6px 0; color:var(--tx-on-dark-soft); }
.ftr-col a:hover{ color:var(--tx-on-dark); }
.ftr-social{ display:flex; gap:10px; margin-top:20px; }
.ftr-social a{ width:38px; height:38px; border:1px solid var(--line-dark); border-radius:50%; display:grid; place-items:center; color:var(--tx-on-dark-soft); transition:border-color .3s var(--ease), color .3s var(--ease); }
.ftr-social a:hover{ border-color:var(--champagne); color:var(--champagne); }
.ftr-social svg{ width:18px; height:18px; }
.ftr-bot{ margin-top:clamp(40px,5vw,70px); padding-top:26px; border-top:1px solid var(--line-dark); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--tx-on-dark-soft); }
.ftr-bot .links{ display:flex; gap:26px; }
.ftr-bot a:hover{ color:var(--tx-on-dark); }

/* ============================================================
   HUB PAGE · grid of sections with photos
   ============================================================ */
.hub-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.hub-card{ display:block; position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--ink-2); aspect-ratio:5/6; }
.hub-card img{ transition:transform 1.1s var(--ease); }
.hub-card:hover img{ transform:scale(1.05); }
.hub-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,24,17,.18) 22%, rgba(11,24,17,.66) 58%, rgba(11,24,17,.94)); }
.hub-in{ position:absolute; inset:auto 0 0 0; z-index:2; padding:clamp(20px,2.4vw,32px); color:var(--tx-on-dark); text-shadow:0 1px 18px rgba(11,24,17,.6); }
.hub-in .n{ font-size:11px; letter-spacing:.24em; color:var(--champagne); }
.hub-in h3{ font-size:clamp(22px,2.2vw,32px); font-style:italic; margin:10px 0 8px; }
.hub-in p{ font-size:13.5px; line-height:1.65; color:rgba(247,242,233,.72); max-width:34ch; }
.hub-in .go{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--champagne); margin-top:14px; }
.hub-card:hover .go .arrow{ transform:translateX(4px); }
.hub-in .go .arrow{ transition:transform .4s var(--ease); }
/* Small corner arrow for the secondary tier — must not compete with the showcase .arrow */
.corner{ display:inline-block; width:8px; height:8px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); transition:transform .4s var(--ease), opacity .4s var(--ease); flex-shrink:0; }

/* Training: a highlighted block, since it is a paid course and not a utility link */
.course{ display:grid; grid-template-columns:clamp(200px,28%,330px) minmax(0,1fr); align-items:stretch; background:var(--ink); border-radius:var(--r-lg); overflow:hidden; color:var(--tx-on-dark); transition:transform .5s var(--ease); margin-top:clamp(28px,3.5vw,44px); }
.course:hover{ transform:translateY(-3px); }
.course .media{ position:relative; align-self:stretch; width:100%; background:var(--ink-2); }
.course .media::before{ content:""; display:block; padding-top:125%; }
.course .media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.course-body{ padding:clamp(28px,3.4vw,52px); display:flex; flex-direction:column; }
.course .eyebrow{ color:var(--champagne); }
.course h3{ font-size:clamp(27px,3.4vw,48px); font-style:italic; margin:18px 0 14px; }
.course p{ font-size:14.5px; line-height:1.75; color:var(--tx-on-dark-soft); max-width:46ch; }
.course-facts{ display:flex; gap:clamp(20px,2.6vw,40px); flex-wrap:wrap; margin:26px 0 0; padding-top:20px; border-top:1px solid var(--line-dark); }
.course-facts div{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-on-dark-soft); }
.course-facts b{ display:block; font-family:var(--serif); font-size:23px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--tx-on-dark); margin-top:4px; }
.course-go{ display:inline-flex; align-items:center; gap:11px; font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--champagne); margin-top:26px; align-self:flex-start; border-bottom:1px solid transparent; padding-bottom:4px; }
.course:hover .course-go{ border-bottom-color:currentColor; }
.course:hover .course-go .corner{ transform:rotate(45deg) translate(2px,-2px); }
.course-badge{ position:absolute; top:16px; left:16px; z-index:2; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); background:var(--champagne); padding:6px 12px; border-radius:99px; }

/* Tier divider: techniques (showcase) vs reference links */
.tier{ display:flex; align-items:center; gap:18px; margin:clamp(30px,4vw,52px) 0 clamp(18px,2.2vw,28px); }
.tier .lbl{ font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--tx-faint); white-space:nowrap; }
.tier .rule{ flex:1; height:1px; background:var(--line); }

/* Reference links rendered as an editorial index list */
.idx{ border-top:1px solid var(--line); }
.idx-row{ display:grid; grid-template-columns:minmax(0,1fr) auto 20px; gap:clamp(16px,2.4vw,36px); align-items:center; padding:clamp(16px,1.8vw,23px) clamp(14px,1.6vw,22px); border-bottom:1px solid var(--line); transition:background .4s var(--ease), padding-left .4s var(--ease); }
.idx-row:hover{ background:rgba(188,91,46,.05); padding-left:16px; }
.idx-main{ display:flex; align-items:baseline; gap:clamp(10px,1.6vw,22px); flex-wrap:wrap; min-width:0; }
.idx-main .t{ font-family:var(--serif); font-size:clamp(19px,1.9vw,26px); line-height:1.2; }
.idx-main .d{ font-size:13.5px; line-height:1.6; color:var(--tx-faint); }
.idx-kind{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--tx-faint); white-space:nowrap; }
.idx-row .corner{ opacity:.3; justify-self:end; }
.idx-row:hover .corner{ opacity:1; transform:rotate(45deg) translate(2px,-2px); }

/* ============================================================
   ARTICLE
   ============================================================ */
.art-meta{ display:flex; gap:26px; flex-wrap:wrap; margin-top:24px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-on-dark-soft); }
.art-meta b{ color:var(--champagne); font-weight:400; }
.art-wrap{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start; }
.toc{ position:sticky; top:110px; }
.toc h5{ font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--tx-faint); margin-bottom:16px; }
.toc a{ display:block; font-size:13.5px; line-height:1.5; padding:7px 0 7px 14px; border-left:1px solid var(--line); color:var(--tx-soft); transition:all .3s var(--ease); }
.toc a:hover{ border-left-color:var(--accent); color:var(--accent); }
.art-body{ max-width:70ch; }
.art-intro{ font-family:var(--serif); font-size:clamp(21px,2.2vw,30px); line-height:1.45; color:var(--tx); margin-bottom:clamp(32px,4vw,54px); }
.art-body h2{ font-size:clamp(26px,3vw,42px); margin:clamp(40px,5vw,68px) 0 20px; }
.art-body h3{ font-size:clamp(19px,1.8vw,25px); margin-bottom:10px; }
.art-body p{ color:var(--tx-soft); line-height:1.85; }
.art-body p + p{ margin-top:16px; }
.art-body .hub-in h3{ font-size:clamp(22px,2.2vw,32px); font-style:italic; margin:10px 0 8px; color:var(--tx-on-dark); }
.art-body .hub-in p{ font-size:13.5px; line-height:1.65; color:rgba(247,242,233,.72); }
.step{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:24px; padding:26px 0; border-top:1px solid var(--line); align-items:start; }
.step:last-of-type{ border-bottom:1px solid var(--line); }
.step .ph{ aspect-ratio:1; }
.step .sn{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--accent); display:block; margin-bottom:6px; }
.art-figure{ margin:clamp(32px,4vw,52px) 0; }
.art-figure figcaption{ margin-top:12px; font-size:12px; letter-spacing:.06em; color:var(--tx-faint); }
.dd{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:clamp(28px,3.5vw,46px) 0; }
.dd > div{ padding:26px 28px 30px; border-radius:var(--r-lg); }
.dd .do{ background:color-mix(in oklab, var(--emerald) 7%, var(--paper)); border:1px solid color-mix(in oklab, var(--emerald) 24%, transparent); }
.dd .dont{ background:color-mix(in oklab, #B03A2E 6%, var(--paper)); border:1px solid color-mix(in oklab, #B03A2E 22%, transparent); }
.dd h4{ font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; margin-bottom:16px; }
.dd .do h4{ color:var(--emerald); } .dd .dont h4{ color:#B03A2E; }
.dd li{ position:relative; padding:7px 0 7px 20px; font-size:14px; line-height:1.6; color:var(--tx-soft); }
.dd li::before{ content:"—"; position:absolute; left:0; opacity:.5; }
.callout{ border-left:2px solid var(--accent); background:var(--paper-2); padding:26px 30px; border-radius:0 var(--r-lg) var(--r-lg) 0; margin:clamp(28px,3.5vw,46px) 0; }
.callout b{ display:block; font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.callout p{ font-size:15px; }
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; text-align:left; padding:22px 0; font-family:var(--serif); font-size:clamp(18px,1.7vw,24px); color:var(--tx); }
.faq-q .ic{ flex-shrink:0; width:22px; height:22px; position:relative; }
.faq-q .ic::before, .faq-q .ic::after{ content:""; position:absolute; inset:50% 0 auto 0; height:1px; background:var(--accent); transition:transform .4s var(--ease); }
.faq-q .ic::after{ transform:rotate(90deg); }
.faq-item.open .ic::after{ transform:rotate(0); }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.faq-item.open .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ padding-bottom:24px; max-width:64ch; color:var(--tx-soft); }
.rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.rel{ display:block; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper); transition:transform .4s var(--ease), border-color .4s var(--ease); }
.dark .rel{ background:transparent; border-color:var(--line-dark); }
.rel:hover{ transform:translateY(-5px); border-color:var(--accent); }
.rel .ph{ aspect-ratio:16/9; border-radius:0; }
.rel-body{ padding:20px 22px 24px; }
.rel .tag{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.dark .rel .tag{ color:var(--champagne); }
.rel h4{ font-size:19px; margin-top:10px; }

/* ============================================================
   CONTACTS
   ============================================================ */
.contact-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:clamp(30px,4vw,48px); }
.cc{ padding:28px 26px 30px; border:1px solid var(--line-dark); border-radius:var(--r-lg); background:rgba(247,242,233,.04); }
.cc .k{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--champagne); margin-bottom:12px; }
.cc .v{ font-family:var(--serif); font-size:clamp(20px,1.9vw,27px); line-height:1.3; color:var(--tx-on-dark); }
.msg-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.msg{ display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border:1px solid var(--line-dark); border-radius:99px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-on-dark); transition:all .35s var(--ease); }
.msg:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.msg svg{ width:16px; height:16px; }
.form{ display:flex; flex-direction:column; gap:12px; margin-top:30px; }
.field{ width:100%; padding:16px 20px; background:transparent; border:1px solid var(--line); border-radius:var(--r); color:var(--tx); font-family:var(--sans); font-size:14px; outline:none; transition:border-color .3s var(--ease); }
.field::placeholder{ color:var(--tx-faint); }
.field:focus{ border-color:var(--accent); }
select.field{ background:var(--paper); color:var(--tx-soft); }
textarea.field{ resize:vertical; min-height:110px; }
.map-frame{ width:100%; height:clamp(300px,42vw,460px); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper-2); }
.map-frame iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.45) sepia(.12); }
.route{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.route div{ padding:18px 20px; border:1px solid var(--line); border-radius:var(--r-lg); }
.route .k{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.route p{ font-size:13.5px; line-height:1.6; color:var(--tx-soft); }

/* ============================================================
   REVIEWS
   ============================================================ */
.rate{ display:grid; grid-template-columns:auto 1fr; gap:clamp(26px,4vw,60px); align-items:center; }
.rate-score{ text-align:center; }
.rate-score .v{ font-family:var(--serif); font-size:clamp(64px,9vw,132px); line-height:1; color:var(--tx-on-dark); }
.rate-score .v em{ color:var(--champagne); }
.stars{ display:flex; gap:5px; justify-content:center; margin-top:12px; }
.stars i{ width:13px; height:13px; background:var(--champagne); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.rate-score .n{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-on-dark-soft); margin-top:14px; }
.rate-bars{ display:flex; flex-direction:column; gap:10px; max-width:420px; }
.bar{ display:grid; grid-template-columns:22px 1fr 34px; gap:12px; align-items:center; font-size:12px; color:var(--tx-on-dark-soft); }
.bar .track{ height:4px; background:rgba(247,242,233,.14); border-radius:99px; overflow:hidden; }
.bar .fill{ height:100%; background:var(--champagne); border-radius:99px; }

.rev-grid{ columns:3; column-gap:14px; }
.rev{ break-inside:avoid; margin-bottom:14px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); padding:26px 26px 28px; }
.dark .rev, .darker .rev{ background:rgba(247,242,233,.04); border-color:var(--line-dark); }
.rev-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.rev .stars i{ background:var(--accent); width:11px; height:11px; }
.dark .rev .stars i{ background:var(--champagne); }
.rev .src{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-faint); }
.rev p{ font-size:14.5px; line-height:1.75; color:var(--tx-soft); }
.dark .rev p{ color:var(--tx-on-dark-soft); }
.rev .ph{ aspect-ratio:4/3; margin-bottom:18px; }
.rev-who{ display:flex; align-items:center; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.dark .rev-who{ border-color:var(--line-dark); }
.rev-av{ width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:16px; background:var(--accent); color:#fff; }
.rev-who .nm{ font-size:14px; font-weight:500; }
.rev-who .sv{ font-size:11.5px; color:var(--tx-faint); }
.dark .rev-who .sv{ color:var(--tx-on-dark-soft); }

/* ============================================================
   ABOUT · timeline and principles
   ============================================================ */
.big-quote{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(28px,4.4vw,64px); line-height:1.22; max-width:20ch; }
.big-quote .mk{ color:var(--champagne); }
.timeline{ display:grid; gap:0; }
.tl{ display:grid; grid-template-columns:minmax(100px,180px) minmax(0,1fr) .8fr; gap:clamp(20px,3vw,46px); padding:clamp(24px,3vw,40px) 0; border-top:1px solid var(--line-dark); align-items:start; }
.tl:last-child{ border-bottom:1px solid var(--line-dark); }
.tl-year{ font-family:var(--serif); font-size:clamp(20px,2vw,30px); line-height:1.15; color:var(--champagne); }
.tl-body strong{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(19px,1.9vw,26px); margin-bottom:10px; }
.tl-body p{ font-size:14.5px; line-height:1.75; color:var(--tx-on-dark-soft); max-width:52ch; }
.tl .ph{ aspect-ratio:4/5; }
.principles{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
/* Three-up variant. Declared before the media queries below so the
   narrow-screen rules still win by source order — an inline style
   here would beat them and the grid would never collapse. */
.principles--3{ grid-template-columns:repeat(3,1fr); }
.pr{ padding:30px 28px 34px; border:1px solid var(--line-dark); border-radius:var(--r-lg); background:rgba(247,242,233,.03); }
.pr .mark{ width:26px; height:1px; background:var(--champagne); margin-bottom:20px; }
.pr h4{ font-size:22px; margin-bottom:10px; }
.pr p{ font-size:13.5px; line-height:1.7; color:var(--tx-on-dark-soft); }

/* ============================================================
   COOKIE POPUP
   ============================================================ */
.cookie{
  position:fixed; left:clamp(16px,3vw,40px); bottom:clamp(16px,3vw,40px); z-index:95;
  max-width:460px; background:var(--ink); border:1px solid var(--line-dark);
  padding:26px 28px 24px; color:var(--tx-on-dark);
  transform:translateY(140%); opacity:0; transition:transform .5s var(--ease), opacity .5s var(--ease);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.cookie.show{ transform:translateY(0); opacity:1; }
.cookie p{ font-size:13.5px; line-height:1.7; color:var(--tx-on-dark-soft); margin-bottom:18px; }
.cookie .row{ display:flex; align-items:center; gap:22px; }
.cookie .btn{ padding:12px 26px; font-size:11px; }
.cookie .settings{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-on-dark-soft); transition:color .25s; }
.cookie .settings:hover{ color:var(--tx-on-dark); }
.cookie .x{ position:absolute; top:14px; right:16px; width:22px; height:22px; opacity:.5; transition:opacity .25s; }
.cookie .x:hover{ opacity:1; }
.cookie .x::before, .cookie .x::after{ content:""; position:absolute; top:50%; left:0; width:100%; height:1px; background:var(--tx-on-dark); }
.cookie .x::before{ transform:rotate(45deg); }
.cookie .x::after{ transform:rotate(-45deg); }

/* ── Hero on phones: must fit one screen ───────────────────────────────
   Three things kept it from fitting (hero fits one screen):
   1. clamp() floor of 46px held the headline large even at 320px, where
      there is no room for it — the text got clipped, and clipped text does
      not grow scrollWidth, so a scroll check reports a clean page.
   2. The bottom padding reserved 84px for the sticky CTA, but body already
      reserves 78px for it below 1100px — the gap was counted twice.
   3. Top padding of 120px is tuned for a tall desktop hero.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width:620px){
  .hero h1{ font-size:clamp(33px,10.5vw,52px); line-height:.98; margin-top:16px; }
  .hero-in{ padding-top:92px; padding-bottom:clamp(28px,4vh,48px); }
  .hero-foot{ margin-top:20px; gap:20px; }
  .hero-foot .lead{ font-size:14.5px; line-height:1.55; }
  .hero-in .eyebrow{ font-size:10px; letter-spacing:.14em; }
  /* Service-page hero on the shortest phones: the meta row is the last
     thing that keeps it from fitting a single screen. */
  .svc-hero-in{ padding-block:84px clamp(24px,4vh,40px); }
  .svc-meta{ margin-top:18px; padding-top:16px; gap:18px; }
  .svc-meta div{ font-size:11px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .masonry{ columns:3; }
  .feat-grid{ grid-template-columns:repeat(2,1fr); }
  .ftr-grid{ grid-template-columns:1fr 1fr; }
  .nav{ display:none; }
  .burger{ display:flex; }
  .hdr .btn--ghost{ display:none; }
  .mobile-cta{ display:flex; }
  body{ padding-bottom:78px; }
  .cookie{ bottom:calc(78px + clamp(16px,3vw,40px)); }
  .hub-grid{ grid-template-columns:repeat(2,1fr); }
  .art-wrap{ grid-template-columns:1fr; }
  .toc{ position:static; }
  .toc a{ display:inline-block; border-left:0; border-bottom:1px solid var(--line); padding:6px 14px 6px 0; margin-right:10px; }
  .rev-grid{ columns:2; }
  .principles{ grid-template-columns:repeat(2,1fr); }
  .tl{ grid-template-columns:110px minmax(0,1fr); }
  .tl .ph{ display:none; }
  .course{ grid-template-columns:1fr; }
  .course .media::before{ padding-top:56.25%; }
}
@media (max-width:860px){
  .split{ grid-template-columns:1fr; }
  .split-card{ height:50svh; }
  .sc-in h3{ font-size:clamp(26px,6.5vw,40px); margin:8px 0 12px; }
  .sc-in{ padding:clamp(18px,4vw,28px); }
  .founder, .two-col{ grid-template-columns:1fr; }
  .founder-photo{ max-width:440px; }
  .wall-grid{ grid-template-columns:repeat(2,1fr); }
  .c-a{ grid-column:span 2; }
  .c-f{ grid-column:span 2; }
  .masonry{ columns:2; }
  .numbers{ grid-template-columns:1fr; }
  .num-cell{ border-left:0; border-top:1px solid var(--line-dark); }
  .num-cell:first-child{ border-top:0; }
  .contact-cards{ grid-template-columns:1fr; }
  .route{ grid-template-columns:1fr; }
  .rel-grid{ grid-template-columns:1fr; }
  .dd{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; gap:14px; }
  .step .ph{ max-width:120px; }
  .rev-grid{ columns:1; }
  .rate{ grid-template-columns:1fr; }
  .rate-bars{ max-width:none; }
  .tl{ grid-template-columns:1fr; gap:10px; }
  .principles{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .feat-grid{ grid-template-columns:1fr; }
  .ftr-grid{ grid-template-columns:1fr; }
  .hub-grid{ grid-template-columns:1fr; }
  .idx-row{ grid-template-columns:minmax(0,1fr) 18px; gap:14px; }
  .idx-kind{ display:none; }
  .idx-main{ flex-direction:column; gap:4px; }
}

/* ── Scrollbar ───────────────────────────────────────────────────
   The system grey bar with arrows clashes with the warm palette. A thin
   rounded one in the site palette instead. A transparent border plus
   background-clip leaves air around the thumb, so it reads thinner than the track.
   Firefox only understands scrollbar-width/-color, so it gets its own pair. */
/* NOTE: set the standard scrollbar-width/-color ONLY where there is no
   ::-webkit-scrollbar (i.e. Firefox). In Chrome their presence DISABLES
   rendering via ::-webkit-scrollbar-*: the standard properties win,
   and everything custom below is silently ignored. Verified 2026-09-12. */
@supports not selector(::-webkit-scrollbar){
  html{
    scrollbar-width: thin;
    scrollbar-color: var(--champagne) var(--paper-2);
  }
}
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background: var(--paper-2); }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--champagne), var(--amber));
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover{
  background: var(--amber);
  background-clip: padding-box;
  border: 3px solid transparent;
}
::-webkit-scrollbar-corner{ background: var(--paper-2); }

/* The work rails sit on dark sections, where a cream track would read
   like a patch, so they get their own dark one. */
.section.dark ::-webkit-scrollbar-track,
.section.darker ::-webkit-scrollbar-track{ background: rgba(247,242,233,.10); }
.section.dark ::-webkit-scrollbar-thumb,
.section.darker ::-webkit-scrollbar-thumb{
  background: var(--champagne);
  background-clip: padding-box;
  border: 3px solid transparent;
}
@supports not selector(::-webkit-scrollbar){
  .section.dark .rail, .section.darker .rail{ scrollbar-color: var(--champagne) rgba(247,242,233,.10); }
}