/* Vouchedly — design system */
:root{
  --text-xs: clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
  --text-sm: clamp(0.875rem,0.8rem + 0.35vw,1rem);
  --text-base: clamp(1rem,0.95rem + 0.25vw,1.125rem);
  --text-lg: clamp(1.125rem,1rem + 0.75vw,1.5rem);
  --text-xl: clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl: clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-3xl: clamp(2.5rem,1rem + 4vw,4.5rem);

  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --space-20:5rem;--space-24:6rem;--space-32:8rem;

  --font-display:'Instrument Serif','Iowan Old Style',serif;
  --font-body:'Satoshi','Helvetica Neue',system-ui,sans-serif;

  --radius:14px;
  --radius-sm:10px;
  --maxw:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
  --color-line:var(--color-border);
}
:root,[data-theme='light']{
  --color-bg:#f6f2ec;
  --color-surface:#fbf8f4;
  --color-surface-2:#ffffff;
  --color-offset:#efe8de;
  --color-border:#ded4c7;
  --color-border-strong:#c3b6a4;
  --color-bg-alt:#efe8de;
  --color-text:#1f1b16;
  --color-text-muted:#6e6357;
  --color-text-faint:#a2988b;
  --color-inverse:#f8f4ee;
  --color-primary:#1f3d33;
  --color-primary-soft:#e4ebe5;
  --color-accent:#b4552b;
  --shadow-sm:0 1px 2px rgba(31,27,22,.06),0 4px 14px rgba(31,27,22,.05);
  --shadow-lg:0 20px 60px -20px rgba(31,27,22,.28);
}
[data-theme='dark']{
  --color-bg:#14120f;
  --color-surface:#1b1815;
  --color-surface-2:#221e1a;
  --color-offset:#262119;
  --color-border:#3a332b;
  --color-border-strong:#544a3f;
  --color-bg-alt:#262119;
  --color-text:#f3ece2;
  --color-text-muted:#a99c8c;
  --color-text-faint:#7a6f62;
  --color-inverse:#14120f;
  --color-primary:#9dc4b2;
  --color-primary-soft:#222a25;
  --color-accent:#e08a5c;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 24px 70px -24px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.1;font-weight:400}
h1,h2.display{font-family:var(--font-display);letter-spacing:-.01em}
p{margin:0}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--space-6)}
section{padding-block:clamp(var(--space-16),8vw,var(--space-32))}
.eyebrow{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.16em;color:var(--color-text-muted);font-weight:600}
.lead{font-size:var(--text-lg);color:var(--color-text-muted);max-width:60ch;line-height:1.5}
.muted{color:var(--color-text-muted)}
.rule{height:1px;background:var(--color-border);border:0;margin:0}

/* buttons */
.btn{
  appearance:none;-webkit-appearance:none;background:transparent;font-family:inherit;
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-sm);font-weight:600;text-decoration:none;cursor:pointer;
  padding:var(--space-3) var(--space-5);border-radius:999px;border:1px solid transparent;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{cursor:not-allowed;opacity:.6;transform:none}
.btn:focus-visible,.addrow input:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
.btn--primary{background:var(--color-primary);color:var(--color-inverse)}
[data-theme='dark'] .btn--primary{color:#14120f}
.btn--ghost{border-color:var(--color-border);color:var(--color-text)}
.btn--ghost:hover{background:var(--color-offset)}
.btn--accent{background:var(--color-accent);color:#fff}

/* header */
.header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:color-mix(in srgb,var(--color-bg) 88%,transparent);border-bottom:1px solid transparent;transition:border-color .3s}
.header.scrolled{border-bottom-color:var(--color-border)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);height:72px}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;font-weight:700;letter-spacing:.02em}
.brand{flex-shrink:0}
.brand svg{color:var(--color-primary)}
.brand .brand-mark{width:50px;height:50px;flex:none;overflow:visible}
.brand span{font-size:18px;text-transform:uppercase;letter-spacing:.17em}
.brand-ring,.brand-check{stroke-dasharray:100;stroke-dashoffset:0}
.header .brand-ring{animation:brand-draw 800ms ease-out both}
.header .brand-check{animation:brand-draw 480ms 480ms ease-out both}
.brand-wave{transform-origin:20px 24px}
.header .brand-wave--near{animation:brand-arrive 700ms 750ms both}
.header .brand-wave--far{animation:brand-arrive 700ms 900ms both}
.brand:hover .brand-wave,.brand:focus-visible .brand-wave{
  animation:brand-ripple 1100ms ease-out 1 both}
.brand:hover .brand-wave--far,.brand:focus-visible .brand-wave--far{animation-delay:140ms}
.brand:focus-visible{outline:2px solid var(--color-primary);outline-offset:6px;border-radius:4px}
.brand:active .brand-mark{transform:scale(.96)}
@keyframes brand-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes brand-arrive{from{opacity:0;transform:translateX(-2px)}to{transform:translateX(0)}}
@keyframes brand-ripple{0%{transform:translateX(0);opacity:.12}45%{opacity:.65}100%{transform:translateX(2px);opacity:.25}}
@media(prefers-reduced-motion:reduce){
  .brand .brand-mark *{animation:none!important;transform:none!important;stroke-dashoffset:0}
  .brand:active .brand-mark{transform:none}
}
.nav{display:flex;align-items:center;gap:18px}
.nav-more{position:relative}
.nav-more summary{cursor:pointer;font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500;padding:12px 0}
.nav-more__panel{position:absolute;top:100%;right:0;width:220px;padding:12px;background:var(--color-bg,#f6f2ec);border:1px solid var(--color-border);border-radius:12px;box-shadow:0 12px 36px #0002;display:grid;gap:3px}
.nav-more__panel a{padding:9px 12px;border-radius:6px}
.nav-more__panel a:hover{background:var(--color-offset)}
.home-shortcuts{padding-block:48px}
.home-shortcuts h2{font-size:var(--text-xl);margin-top:12px}
.home-shortcuts .section-line{align-items:center;margin-bottom:24px}
.shortcut-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.shortcut{text-decoration:none;padding:24px;border:1px solid var(--color-border);border-radius:12px;transition:transform .2s,border-color .2s}
.shortcut:hover{transform:translateY(-3px);border-color:var(--color-text)}
.shortcut h3{font-size:18px;margin:18px 0 10px}
.shortcut p{font-size:14px;line-height:1.6;color:var(--color-text-muted)}
.home-close{padding-block:32px 56px}
.home-close__inner{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:32px;background:var(--color-offset);border-radius:16px}
.home-close h2{font-size:var(--text-xl);margin-block:10px}
.home-close .btn{flex-shrink:0}
.footer-compact{display:flex;justify-content:space-between;gap:32px;align-items:center}
.footer-compact p{font-size:14px;margin-top:10px}
.footer-compact nav{display:flex;gap:14px 24px;flex-wrap:wrap;max-width:460px}
.footer-compact nav a{font-size:14px;text-decoration:none}
@media(max-width:1100px){.nav-more{width:100%}.nav-more__panel{position:static;box-shadow:none;width:100%;background:transparent}}
@media(max-width:900px){.shortcut-grid{grid-template-columns:repeat(2,1fr)}.home-close__inner{align-items:flex-start;flex-direction:column}.footer-compact{align-items:flex-start;flex-direction:column}}
@media(max-width:480px){.shortcut-grid{gap:10px}.shortcut{padding:16px}.shortcut h3{font-size:16px}.shortcut p{font-size:13px}.home-close__inner{padding:24px}.home-shortcuts .section-line{align-items:flex-start;gap:15px}}
.nav a{font-size:var(--text-sm);text-decoration:none;color:var(--color-text-muted);font-weight:500}
.nav a:hover,.nav a[aria-current]{color:var(--color-text)}
.header__act{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.header__act .btn{white-space:nowrap}
.header__auth{display:flex;align-items:center;gap:8px;flex-shrink:0}
.header__auth a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;border-radius:8px}
.header__auth .auth-signup{border:1px solid var(--color-border);background:var(--color-offset)}
.header__auth a:hover,.auth-switch a:hover{background:var(--color-offset)}
.header__auth a:focus-visible,.auth-switch a:focus-visible{outline:2px solid var(--color-text);outline-offset:3px}
.auth-switch{display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--color-border)}
.auth-switch a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;font-weight:700;font-size:14px;text-decoration:none;border-bottom:2px solid transparent}
.auth-switch a[aria-current=page]{border-bottom-color:var(--color-text)}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;
  border:1px solid var(--color-border);background:transparent;color:var(--color-text);cursor:pointer}
.icon-btn:hover{background:var(--color-offset)}
.burger{display:none}
@media(max-width:1200px){
  .header__in{height:auto;min-height:72px;flex-wrap:wrap;row-gap:0}
  .header__in>.brand,.header__act{min-height:64px}
  .header__auth{order:3;width:100%;justify-content:flex-end;padding:4px 0 8px;border-top:1px solid var(--color-border)}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:var(--space-4);padding:var(--space-6);background:var(--color-surface);border-bottom:1px solid var(--color-border)}
  .burger{display:grid}
  .header__act .btn{display:none}
}
@media(max-width:480px){
  .brand .brand-mark{width:42px;height:42px}
  .brand span{font-size:15px;letter-spacing:.14em}
  .header__in{gap:12px}
  .header__act{gap:8px}
}

/* hero */
.hero{padding-block:clamp(var(--space-16),9vw,var(--space-24)) clamp(var(--space-12),6vw,var(--space-20))}
.hero h1{font-size:var(--text-3xl);max-width:20ch}
.hero .lead{margin-top:var(--space-6)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr}}
.hero__visual{position:relative;min-width:0}

/* ---------- live site showcase (hero) ---------- */
.showcase{min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.4vw,22px);
  height:clamp(460px,52vw,640px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
.showcase__col{overflow:hidden}
.showcase__track{display:grid;gap:clamp(14px,1.4vw,22px);will-change:transform}
.showcase__col--a .showcase__track{animation:scrollup 46s linear infinite}
.showcase__col--b .showcase__track{animation:scrolldown 46s linear infinite}
.showcase__col--b{margin-top:clamp(-70px,-5vw,-30px)}
.showcase:hover .showcase__track{animation-play-state:paused}
@keyframes scrollup{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes scrolldown{from{transform:translateY(-50%)}to{transform:translateY(0)}}

.scard{margin:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface);overflow:hidden;box-shadow:var(--shadow);break-inside:avoid}
.scard__bar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:var(--color-offset);
  border-bottom:1px solid var(--color-border)}
.scard__bar span{width:7px;height:7px;border-radius:50%;background:var(--color-border-strong);flex:none}
.scard__bar em{font-style:normal;font-size:10px;letter-spacing:.02em;color:var(--color-text-muted);
  margin-left:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.scard img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.scard figcaption{display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:10px 12px 12px;border-top:1px solid var(--color-border);min-height:58px}
.scard figcaption strong{font-size:12.5px;font-weight:700;line-height:1.25}
.scard figcaption span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}

/* Phone: one clean, aligned swipe strip instead of two ragged columns. */
@media(max-width:900px){
  .showcase{display:flex;height:auto;gap:var(--space-4);overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    mask-image:none;-webkit-mask-image:none;padding-bottom:var(--space-2);min-width:0;max-width:100%}
  .showcase::-webkit-scrollbar{display:none}
  .showcase__col{display:flex;gap:var(--space-4);overflow:visible;margin-top:0}
  .showcase__track{display:flex;gap:var(--space-4);animation:none!important}
  .showcase__col--b .showcase__track>.scard:nth-child(n+5){display:none}
  .showcase__col--a .showcase__track>.scard:nth-child(n+6){display:none}
  .scard{width:76vw;max-width:340px;flex:none;scroll-snap-align:center}
  .scard figcaption{min-height:auto}
  .scard figcaption strong{font-size:14px}
  .scard figcaption span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .showcase__track{animation:none!important}
  .showcase{height:auto;mask-image:none;-webkit-mask-image:none}
  .showcase__col .scard:nth-child(n+4){display:none}
}

/* ---------- two-way gateway ---------- */
.gates{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
@media(max-width:940px){.gates{grid-template-columns:1fr}}
.gate{display:flex;flex-direction:column;gap:var(--space-3);text-decoration:none;color:inherit;
  border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-8);
  background:var(--color-surface);position:relative;overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.gate::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--color-border-strong);
  transition:background .35s var(--ease)}
.gate--a::before{background:var(--color-primary)}
.gate--b::before{background:var(--color-accent)}
.gate--c::before{background:var(--color-border-strong)}
.gate:hover{transform:translateY(-4px);border-color:var(--color-border-strong);box-shadow:var(--shadow-lg)}
.gate__k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-faint);font-weight:700}
.gate h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400;line-height:1.2;max-width:22ch}
.gate p{font-size:var(--text-sm);color:var(--color-text-muted);margin:0}
.gate__go{margin-top:auto;padding-top:var(--space-4);font-size:var(--text-sm);font-weight:700;color:var(--color-primary)}
html[data-theme="dark"] .gate__go{color:var(--color-accent)}

/* ---------- grouped portfolio ---------- */
.ghead{max-width:64ch;margin-bottom:var(--space-8)}
.ghead p{font-size:var(--text-sm);margin-top:var(--space-3)}


/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);
  border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding-block:var(--space-8)}
@media(max-width:800px){
  .stats{grid-template-columns:repeat(2,1fr);gap:var(--space-6) var(--space-5);align-items:start}
  .stat{display:flex;flex-direction:column;gap:4px}
  .stat span{font-size:11px;letter-spacing:.1em;line-height:1.4}
}
.stat b{display:block;font-family:var(--font-display);font-size:var(--text-xl);font-weight:400}
.stat span{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted)}

/* cards */
.grid{display:grid;gap:var(--space-6)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid--3,.grid--2{grid-template-columns:1fr}}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);
  padding:var(--space-6);box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card h3{font-size:var(--text-lg);font-family:var(--font-body);font-weight:700;margin-bottom:var(--space-2)}
.card p{color:var(--color-text-muted);font-size:var(--text-sm)}
.card ul{margin:var(--space-4) 0 0;padding-left:var(--space-5);color:var(--color-text-muted);font-size:var(--text-sm)}
.card li{margin-block:var(--space-1)}
.card__num{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-accent)}
.tag{display:inline-block;font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-primary);background:var(--color-primary-soft);border-radius:999px;padding:var(--space-1) var(--space-3)}

/* section head */
.shead{max-width:64ch;margin-bottom:clamp(var(--space-8),4vw,var(--space-12))}
.shead h2{font-size:var(--text-xl);margin-block:var(--space-3)}
.shead.display h2{font-family:var(--font-display);font-size:var(--text-2xl)}

/* split / feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.panel{background:var(--color-offset);border-radius:var(--radius);padding:clamp(var(--space-6),4vw,var(--space-12))}

/* work cards */
.work{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8)}
@media(max-width:900px){.work{grid-template-columns:1fr}}
.work__item{border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;background:var(--color-surface)}
.work__shot{aspect-ratio:16/10;background:var(--color-offset);overflow:hidden}
.work__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s var(--ease)}
.work__item:hover .work__shot img{transform:scale(1.03)}
.work__body{padding:var(--space-6)}
.work__body h3{font-size:var(--text-lg);font-family:var(--font-body);font-weight:700}
.work__meta{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.chip{font-size:var(--text-xs);border:1px solid var(--color-border);border-radius:999px;padding:2px var(--space-3);color:var(--color-text-muted)}

/* steps */
.steps{counter-reset:s;display:grid;gap:var(--space-6)}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);align-items:start;
  padding-top:var(--space-6);border-top:1px solid var(--color-border)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-accent)}
.step h3{font-size:var(--text-lg);font-family:var(--font-body);font-weight:700;margin-bottom:var(--space-2)}
.step p{color:var(--color-text-muted);font-size:var(--text-sm);max-width:62ch}

/* pricing */
.tier{display:flex;flex-direction:column;gap:var(--space-4)}
.tier .price{font-family:var(--font-display);font-size:var(--text-xl)}
.tier--feature{background:var(--color-primary);color:var(--color-inverse);border-color:transparent}
.tier--feature p,.tier--feature ul,.tier--feature .muted{color:color-mix(in srgb,var(--color-inverse) 78%,transparent)}
.tier--feature .tag{background:rgba(255,255,255,.16);color:var(--color-inverse)}

/* cta band */
.band{background:var(--color-primary);color:var(--color-inverse);border-radius:var(--radius);
  padding:clamp(var(--space-8),5vw,var(--space-16));display:grid;gap:var(--space-6);justify-items:start}
.band h2{font-family:var(--font-display);font-size:var(--text-2xl);max-width:26ch}
.band p{color:color-mix(in srgb,var(--color-inverse) 80%,transparent);max-width:56ch}
.band .btn--primary{background:var(--color-inverse);color:var(--color-primary)}

/* forms */
.form{display:grid;gap:var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:clamp(var(--space-6),4vw,var(--space-10))}
.field{display:grid;gap:var(--space-2)}
.field label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--color-text-muted)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface-2);
  border:1px solid var(--color-border);border-radius:10px;padding:var(--space-3) var(--space-4);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--color-primary);outline-offset:1px}
.field textarea{min-height:120px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
@media(max-width:700px){.row{grid-template-columns:1fr}}
.form__note{font-size:var(--text-xs);color:var(--color-text-faint)}
.form__status{font-size:var(--text-sm);color:var(--color-accent);min-height:1.2em}

/* faq */
details{border-top:1px solid var(--color-border);padding-block:var(--space-5)}
details summary{cursor:pointer;font-weight:700;font-size:var(--text-base);list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+';float:right;color:var(--color-accent)}
details[open] summary::after{content:'–'}
details p{margin-top:var(--space-3);color:var(--color-text-muted);font-size:var(--text-sm);max-width:70ch}

/* footer */
.footer{border-top:1px solid var(--color-border);padding-block:var(--space-16) var(--space-10);margin-top:var(--space-12)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-8)}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
.footer h4{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--color-text-muted);margin-bottom:var(--space-4)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.footer a{font-size:var(--text-sm);text-decoration:none;color:var(--color-text-muted)}
.footer a:hover{color:var(--color-text)}
.footer__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);
  margin-top:var(--space-12);font-size:var(--text-xs);color:var(--color-text-muted)}

/* reveal */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.btn:hover{transform:none}}

/* industry grid */
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1050px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid--4{grid-template-columns:1fr}}
a.card.ind{text-decoration:none;display:flex;flex-direction:column;gap:var(--space-3)}
a.card.ind h3{font-size:var(--text-base);font-weight:700}
a.card.ind p{font-size:var(--text-sm);line-height:1.5}
.ind__go{margin-top:auto;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;color:var(--color-accent)}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-8)}
.chip--btn{background:transparent;cursor:pointer;font-family:inherit;font-size:var(--text-xs);
  padding:var(--space-2) var(--space-4);transition:background .2s,color .2s,border-color .2s}
.chip--btn:hover{border-color:var(--color-text-muted);color:var(--color-text)}
.chip--btn.is-on{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-inverse)}
[data-theme='dark'] .chip--btn.is-on{color:#14120f}
.work__item.is-hidden{display:none}

/* staffing hand-off */
.handoff{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(var(--space-6),4vw,var(--space-12));
  align-items:center;border:1px solid var(--color-border);border-radius:var(--radius);
  background:var(--color-surface);padding:clamp(var(--space-6),4vw,var(--space-12))}
@media(max-width:900px){.handoff{grid-template-columns:1fr}}
.handoff h2{font-family:var(--font-display);font-size:var(--text-xl)}
.handoff p{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-4);max-width:56ch}
.handoff small{display:block;margin-top:var(--space-5);font-size:var(--text-xs);color:var(--color-text-faint)}

/* ---------- utilities added for directory ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.section-title{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.1;letter-spacing:-.01em}
.num{display:inline-block;font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-accent);margin-bottom:var(--space-3)}
.btn--sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}
.hero--slim{padding-top:clamp(var(--space-12),8vw,var(--space-20));padding-bottom:var(--space-10)}
.hero--slim h1{font-family:var(--font-display);font-size:var(--text-3xl);line-height:1.02;letter-spacing:-.02em;margin-top:var(--space-4)}
.hero--slim h1 em{font-style:italic;color:var(--color-accent)}
.hero--slim .lede{margin-top:var(--space-5);max-width:62ch;color:var(--color-text-muted)}
.hero--slim p:last-child{margin-top:var(--space-7)}
.ticks{list-style:none;display:grid;gap:var(--space-3)}
.ticks li{position:relative;padding-left:var(--space-6);font-size:var(--text-sm);color:var(--color-text-muted)}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:50%;
  border:2px solid var(--color-accent)}

/* ---------- directory controls ---------- */
.dir__bar{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--space-4)}
@media(max-width:720px){.dir__bar{grid-template-columns:1fr}}
.field--search input,.field--sel select{width:100%;font-family:inherit;font-size:var(--text-sm);
  padding:var(--space-4) var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface);color:var(--color-text)}
.field--search input:focus,.field--sel select:focus{outline:2px solid var(--color-primary);outline-offset:1px}
.tabs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.tab{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;font-family:inherit;
  font-size:var(--text-xs);letter-spacing:.02em;padding:var(--space-2) var(--space-4);
  border:1px solid var(--color-border);border-radius:100px;background:transparent;color:var(--color-text-muted);
  transition:background .2s,color .2s,border-color .2s}
.tab:hover{border-color:var(--color-text-muted);color:var(--color-text)}
.tab__n{font-size:10px;opacity:.65}
.tab.is-on{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-inverse)}
[data-theme='dark'] .tab.is-on{color:#14120f}
.dir__count{margin-top:var(--space-6);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em}
.dir__empty{margin-top:var(--space-10);border:1px dashed var(--color-border-strong);border-radius:var(--radius);
  padding:clamp(var(--space-8),5vw,var(--space-12));text-align:center}
.dir__empty h3{font-family:var(--font-display);font-size:var(--text-xl)}
.dir__empty p{margin:var(--space-4) auto 0;max-width:52ch;font-size:var(--text-sm)}
.dir__empty p:last-child{margin-top:var(--space-6)}

/* ---------- provider cards ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-6)}
@media(max-width:1050px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius);
  background:var(--color-surface);overflow:hidden;transition:border-color .25s,transform .25s}
.pcard:hover{border-color:var(--color-border-strong);transform:translateY(-2px)}
.pcard.is-hidden{display:none}
.pcard__shot{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--color-bg-alt)}
.pcard__shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.pcard__body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6)}
.pcard__top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.pcard h3{font-size:var(--text-base);font-weight:700;line-height:1.25}
.pcard h3 a{color:inherit;text-decoration:none}
.pcard h3 a:hover{color:var(--color-accent)}
.pcard__cat{font-size:var(--text-xs);color:var(--color-text-faint)}
.pcard__blurb{font-size:var(--text-sm);line-height:1.55;color:var(--color-text-muted)}
.pcard__act{margin-top:auto;padding-top:var(--space-2)}
.badge{display:inline-flex;align-items:center;font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;padding:3px 8px;border-radius:100px;border:1px solid var(--color-border-strong);
  color:var(--color-text-muted)}
.badge--feat{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.stars{display:inline-flex;gap:2px}
.rating{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);
  color:var(--color-text-muted)}
.rating b{font-weight:700;color:var(--color-text)}
.rating--new{color:var(--color-text-faint)}

/* ---------- provider profile ---------- */
.pro{padding-top:clamp(var(--space-16),10vw,var(--space-24))}
.crumb{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-faint)}
.crumb a{color:var(--color-text-muted)}
.pro__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-6),4vw,var(--space-12));
  align-items:center;margin-top:var(--space-6)}
@media(max-width:900px){.pro__head{grid-template-columns:1fr}}
.pro__head h1{font-family:var(--font-display);font-size:var(--text-3xl);line-height:1.05;letter-spacing:-.02em}
.pro__meta{margin:var(--space-3) 0 var(--space-4);font-size:var(--text-sm);color:var(--color-text-faint)}
.pro__shot{border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;
  aspect-ratio:16/10;background:var(--color-bg-alt)}
.pro__shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.pro__cols{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(var(--space-8),5vw,var(--space-16))}
@media(max-width:900px){.pro__cols{grid-template-columns:1fr}}
.disclose{margin-top:var(--space-6);font-size:var(--text-xs);color:var(--color-text-faint);
  border-left:2px solid var(--color-border-strong);padding-left:var(--space-4);max-width:50ch}
.rev__list{display:grid;gap:var(--space-4)}
.rev{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-5);
  background:var(--color-surface)}
.rev__top{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs)}
.rev p{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted)}
.form--tight{display:grid;gap:var(--space-4)}
.form--tight select,.form--tight input,.form--tight textarea{width:100%;font-family:inherit;
  font-size:var(--text-sm);padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);
  border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text)}


/* ---------- operator console ---------- */
.studio{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(var(--space-8),4vw,var(--space-16));align-items:start}
@media(max-width:900px){.studio{grid-template-columns:1fr}}
.studio__side{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);
  padding:var(--space-6)}
.studio__list{margin-top:var(--space-4);display:grid;gap:var(--space-2);max-height:340px;overflow:auto}
.srow{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);
  background:var(--color-bg);font-size:var(--text-xs)}
.srow b{font-size:13px;font-weight:700}
.srow small{display:block;color:var(--color-text-faint);margin-top:2px}
.srow button{cursor:pointer;font-family:inherit;font-size:11px;border:1px solid var(--color-border-strong);
  background:transparent;color:var(--color-text);border-radius:99px;padding:4px 10px}
.srow button:hover{border-color:var(--color-primary)}
.gradepill{font-family:var(--font-display);font-size:18px;line-height:1;padding:4px 10px;border-radius:99px;
  background:var(--color-offset);color:var(--color-text)}
.studio__out{margin-top:var(--space-10);border-top:1px solid var(--color-border);padding-top:var(--space-8)}
.studio__hd{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.studio__hd h2{font-family:var(--font-display);font-size:var(--text-xl)}
.studio__verdict{margin-top:var(--space-5);font-family:var(--font-display);font-size:var(--text-lg);
  line-height:1.3;max-width:60ch}
.studio__mail{margin-top:var(--space-6);white-space:pre-wrap;font-size:var(--text-sm);color:var(--color-text-muted);
  background:var(--color-surface);border:1px dashed var(--color-border-strong);border-radius:var(--radius-sm);
  padding:var(--space-5)}
.studio__acts{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.miniscores{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.miniscore{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);
  background:var(--color-surface);font-size:var(--text-xs);min-width:130px}
.miniscore b{display:block;font-family:var(--font-display);font-size:22px;margin-top:2px}


/* phone polish: chip rows scroll instead of wrapping ragged */
@media(max-width:700px){
  .filters,.dir__tabs,.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:var(--space-2);
    scrollbar-width:none;padding:2px 0;max-width:100%;min-width:0}
  .filters::-webkit-scrollbar,.dir__tabs::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
  .filters>*,.dir__tabs>*,.tabs>*{flex:none}
  .badges,.pro__badges{display:flex;flex-wrap:wrap;gap:6px}
  .badge{font-size:10px;padding:4px 9px}
  .pcard .badge,.pro .badge{white-space:nowrap}
  .gate{padding:var(--space-6)}
  .ghead{margin-bottom:var(--space-6)}
}

.tag--live{background:var(--color-primary);color:var(--color-inverse);border-color:transparent}
.tag--build{background:color-mix(in srgb,var(--color-accent) 16%,var(--color-bg));color:var(--color-accent);border-color:transparent}

/* accent launch band + industry word cloud */
.band--accent{background:var(--color-accent);color:#fff}
.band--accent h2{max-width:30ch}
.band--accent p{color:color-mix(in srgb,#fff 86%,transparent)}
.band--accent .btn--primary{background:#fff;color:var(--color-accent)}
.band--accent .btn--primary:hover{background:color-mix(in srgb,#fff 90%,var(--color-accent))}
.allind{margin-top:var(--space-8);font-size:var(--text-sm);line-height:2.1;color:var(--color-text-muted);
  max-width:92ch;letter-spacing:.01em}
@media (max-width:700px){.allind{line-height:1.95}}

/* ---------------------------------------------- member dashboard */
.dash__top{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-end;justify-content:space-between}
.dash__act{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.pane{display:none;margin-top:var(--space-10)}
.pane.is-on{display:block}
.tab .cnt{font-size:11px;opacity:.7}
.form--wide{max-width:none}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4);list-style:none;padding:0}
.chip--x{display:inline-flex;align-items:center;gap:var(--space-2)}
.chip--x button{background:none;border:0;cursor:pointer;font-size:15px;line-height:1;color:inherit;opacity:.55;padding:0 2px}
.chip--x button:hover{opacity:1;color:var(--color-accent)}
.chip--empty{opacity:.55}
.addrow{display:flex;gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap}
.addrow input{flex:1 1 260px;min-width:0;min-height:48px;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:16px}
.addrow input::placeholder{color:var(--color-text-muted);opacity:1}
.listedit .form__status{margin-top:var(--space-3);min-height:1.5em}
.listedit .addrow .btn{min-height:48px;justify-content:center}
.tier .price{overflow-wrap:anywhere}
.uploader{margin-top:var(--space-6)}
.uploader input[type=file]{font:inherit;font-size:var(--text-sm)}
.photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.photocard{margin:0;border:1px solid var(--color-line);border-radius:var(--radius-sm);overflow:hidden;background:var(--color-offset)}
.photocard img{display:block;width:100%;height:150px;object-fit:cover}
.photocard button{width:100%;border:0;border-top:1px solid var(--color-line);background:none;cursor:pointer;
  font:inherit;font-size:var(--text-xs);padding:var(--space-2);color:var(--color-text-muted)}
.photocard button:hover{color:var(--color-accent)}
.enq{border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:var(--space-6);margin-bottom:var(--space-4)}
.enq__top{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;font-size:var(--text-sm)}
.form__status.is-bad{color:var(--color-accent)}
@media (max-width:700px){
  .dash__act{width:100%}
  .dash__act .btn{flex:1 1 auto;justify-content:center}
  .photocard img{height:130px}
}
.addrow{align-items:center}
.addrow input{flex:0 1 420px}
.form__status.is-good{color:var(--color-primary)}
[data-theme='dark'] .form__status.is-good{color:#7fb69f}

/* profile picture, radios, checklists */
.avatarrow{display:flex;gap:var(--space-8);align-items:flex-start;flex-wrap:wrap}
.avatar{width:120px;height:120px;flex:0 0 auto;border-radius:var(--radius-sm);overflow:hidden;
  border:1px dashed var(--color-line);background:var(--color-offset);display:grid;place-items:center;
  font-size:var(--text-xs);color:var(--color-text-muted);text-align:center;padding:var(--space-3)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar--lg{width:96px;height:96px;border-style:solid;margin-bottom:var(--space-5)}
.radios{display:grid;gap:var(--space-3);margin-top:var(--space-3)}
.radio,.checks label{display:flex;gap:var(--space-3);align-items:center;font-size:var(--text-sm);cursor:pointer}
.checks{list-style:none;padding:0;margin:var(--space-3) 0 0;display:grid;gap:var(--space-3)}
.dir__shot{aspect-ratio:16/10;overflow:hidden;background:var(--color-offset)}
.dir__shot img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.avatarrow{gap:var(--space-5)}.avatar{width:96px;height:96px}}

.price .per{font-size:var(--text-sm);font-weight:400;opacity:.7;letter-spacing:0}

/* operator tables */
.oppane{display:none;margin-top:var(--space-8)}
.oppane.is-on{display:block}
.optable{overflow-x:auto}
.optbl{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:720px}
.optbl th{text-align:left;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-text-muted);padding:var(--space-3);border-bottom:1px solid var(--color-line);font-weight:600}
.optbl td{padding:var(--space-4) var(--space-3);border-bottom:1px solid var(--color-line);vertical-align:top}
.optbl .chip{margin:2px 2px 2px 0}

/* stars and reviews */
.stars{display:inline-flex;gap:1px;line-height:1}
.star{font-size:15px;color:var(--color-line)}
.star--full{color:#c8892f}
.star--half{background:linear-gradient(90deg,#c8892f 50%,var(--color-line) 50%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.revtop{display:flex;gap:var(--space-10);flex-wrap:wrap;align-items:flex-start}
.revscore{display:grid;gap:var(--space-2);justify-items:center;padding:var(--space-6) var(--space-8);
  border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-offset);min-width:150px}
.revscore__n{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1}
.revscore .muted{font-size:var(--text-xs);text-align:center}
.copyrow{display:flex;gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap}
.copyrow input{flex:1 1 320px;min-width:0;padding:var(--space-3) var(--space-4);border:1px solid var(--color-line);
  border-radius:var(--radius-sm);background:var(--color-offset);color:var(--color-text);font:inherit;font-size:var(--text-sm)}
.rev{border-bottom:1px solid var(--color-line);padding:var(--space-6) 0}
.rev__top{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;align-items:center}
.rev__meta{font-size:var(--text-xs);color:var(--color-text-muted)}
.ratepick{display:grid;gap:var(--space-2);margin-top:var(--space-3)}
.ratebtn{display:flex;align-items:center;gap:var(--space-3);cursor:pointer;padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-line);border-radius:var(--radius-sm)}
.ratebtn span{color:#c8892f;letter-spacing:2px}
.ratebtn:has(input:checked){border-color:var(--color-primary);background:var(--color-offset)}
.ratingline{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);margin-top:var(--space-3)}
.ratingline .muted{font-size:var(--text-xs)}
@media (max-width:700px){.revtop{gap:var(--space-6)}}

/* offers */
.offer{border:1px solid var(--color-line);border-radius:var(--radius-sm);overflow:hidden;
  background:var(--color-surface);display:flex;flex-direction:column}
.offer__img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--color-offset)}
.offer__img img{width:100%;height:100%;object-fit:cover}
.offer__body{padding:var(--space-6);display:flex;flex-direction:column;flex:1}
.offer__body .btn{margin-top:auto;align-self:flex-start}
.offer__meta{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-3)}
.deal{display:inline-block;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);
  background:var(--color-primary);color:var(--color-surface)}
.offerbar{display:flex;gap:var(--space-5);align-items:center;flex-wrap:wrap;margin-top:var(--space-8);
  padding:var(--space-5) var(--space-6);border:1px solid var(--color-primary);border-radius:var(--radius-sm);
  background:var(--color-offset)}
.offerbar p{font-size:var(--text-sm);margin:0}
.offpop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--space-6);
  background:rgba(20,20,18,.55);backdrop-filter:blur(3px)}
.offpop__card{background:var(--color-surface);border-radius:var(--radius-md);max-width:440px;width:100%;
  overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.28);max-height:90vh;overflow-y:auto}
.offpop__card img{width:100%;display:block}
.offpop__in{padding:var(--space-7)}
.offpop__x{position:absolute;top:var(--space-6);right:var(--space-6);background:var(--color-surface);
  border:1px solid var(--color-line);border-radius:999px;width:34px;height:34px;cursor:pointer;
  color:var(--color-text);font-size:18px;line-height:1}
.posterrow{display:flex;gap:var(--space-5);align-items:flex-start;margin-top:var(--space-3);flex-wrap:wrap}
.posterrow img{width:150px;border-radius:var(--radius-sm);border:1px solid var(--color-line)}
.offedit{margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--color-line)}
.offrow{display:flex;gap:var(--space-5);align-items:flex-start;padding:var(--space-5) 0;
  border-bottom:1px solid var(--color-line);flex-wrap:wrap}
.offrow img{width:92px;border-radius:var(--radius-sm);border:1px solid var(--color-line)}
.offrow__b{flex:1 1 260px;min-width:0}
.offrow__s{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-2)}
.filters{display:flex;gap:var(--space-4);flex-wrap:wrap}
.filters input,.filters select{padding:var(--space-4);border:1px solid var(--color-line);
  border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font:inherit;
  font-size:var(--text-sm)}
.filters input{flex:1 1 320px;min-width:0}
@media (max-width:700px){.offpop__in{padding:var(--space-6)}.offrow img{width:64px}}

.optbl tr.is-pending td{background:var(--color-offset)}
.opacts{display:flex;flex-wrap:wrap;gap:var(--space-2);min-width:220px}
.opacts .btn{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}

/* ---------------------------------------------------------------- journal */
.post{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .25s ease,transform .25s ease}
.post:hover{border-color:var(--color-accent);transform:translateY(-3px)}
.post h3{font-size:var(--text-lg);line-height:1.25;letter-spacing:-.01em}
.post__meta{margin-top:auto;padding-top:var(--space-6);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}
.prose{max-width:70ch}
.prose p{margin-top:var(--space-5);line-height:1.72;color:var(--color-text)}
.prose p:first-child{margin-top:0;font-size:var(--text-lg);line-height:1.6}
.prose h2{margin-top:var(--space-10);font-size:var(--text-xl);letter-spacing:-.015em;line-height:1.2}
.prose ul{margin-top:var(--space-5);padding-left:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.prose li{line-height:1.66}
.prose strong{color:var(--color-text)}
.prose em{font-style:italic;color:var(--color-text-muted)}
.post .tag{align-self:flex-start}

/* Focused discovery and editorial details. Preserve the approved hero and mark. */
[hidden]{display:none!important}
html{scroll-padding-top:100px}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:5px}
.finder-section{padding-bottom:var(--space-6)}
.finder-shell{border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-8);background:var(--color-surface)}
.finder-shell h2{font-size:var(--text-xl);margin:var(--space-3) 0}
.finder-shell p{font-size:var(--text-sm)}
.finder{display:grid;grid-template-columns:1.3fr 1fr auto;align-items:end;gap:var(--space-4);margin-top:var(--space-6)}
.finder .field,.dir__bar .field{min-width:0;display:grid;gap:var(--space-2)}
.finder .field>span,.dir__bar .field>span{font-size:var(--text-xs);font-weight:700}
.finder input{width:100%;min-width:0;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font:inherit;font-size:var(--text-sm)}
.finder button{min-height:54px;gap:var(--space-6)}
.finder-examples{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-5);font-size:var(--text-xs)}
.finder-examples a{border:1px solid var(--color-border);border-radius:40px;padding:var(--space-2) var(--space-3);text-decoration:none;transition:background .2s,border-color .2s}
.finder-examples a:hover{background:var(--color-offset);border-color:var(--color-border-strong)}
.finder-note{font-size:var(--text-xs)!important;line-height:1.6;margin-top:var(--space-4)}
.gates--two{grid-template-columns:1fr 1fr}
.gates--two .gate{padding:var(--space-8)}
.gates--two .gate h3{font-size:var(--text-xl)}
.gate__k{font-size:var(--text-xs);color:var(--color-text-muted)}
.guide{margin-top:var(--space-10);padding-top:var(--space-10);border-top:1px solid var(--color-border);display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-8)}
.guide h3.display{font-size:var(--text-xl);margin:var(--space-3) 0}
.guide h3.display,.journal-art .display,.story-takeaway .display{font-family:var(--font-display)}
.guide p{font-size:var(--text-sm)}
.guide__choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.guide__choices button{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);text-align:left;padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:var(--text-sm);cursor:pointer;transition:background .2s,border-color .2s}
.guide__choices button:hover{border-color:var(--color-border-strong);background:var(--color-offset)}
.guide__choices button[aria-pressed=true]{background:var(--color-primary);color:var(--color-inverse);border-color:var(--color-primary)}
.guide__result{grid-column:1/-1;padding:var(--space-8);border:1px solid var(--color-border-strong);border-radius:var(--radius);background:var(--color-offset)}
.guide__result h3{font-size:var(--text-lg);margin:var(--space-3) 0}
.guide__result>p{max-width:80ch}
.guide__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-6)}
.guide__reset{font:inherit;font-size:var(--text-sm);background:transparent;color:var(--color-text);border:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:var(--space-3)}
.dir__bar{grid-template-columns:1.25fr 1fr 1fr}
.dir-summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-top:var(--space-4)}
.dir-summary .dir__count{margin:0}
.pgrid{margin-top:var(--space-6)}
.section-line{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);margin-bottom:var(--space-8)}
.section-line .shead{margin-bottom:0;max-width:65ch}
.text-link{font-size:var(--text-sm);font-weight:700;text-decoration:underline;text-underline-offset:5px}
.section-line>.text-link{flex-shrink:0}
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.story-card{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);overflow:hidden;transition:transform .3s var(--ease),border-color .3s}
.story-card:hover{transform:translateY(-4px);border-color:var(--color-border-strong)}
.story-card__image{padding:var(--space-5);background:var(--color-offset);overflow:hidden}
.story-card__image img{width:100%;height:auto;aspect-ratio:1.6;border-radius:4px;border:1px solid var(--color-border);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease)}
.story-card:hover img{transform:scale(1.025)}
.story-card__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);flex:1}
.story-card h3{font-size:var(--text-lg);line-height:1.3}
.story-card p{font-size:var(--text-sm)}
.story-card .text-link{margin-top:auto}
.story-title{font-size:var(--text-2xl);max-width:25ch;margin-top:var(--space-5)}
.story-meta{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);font-size:var(--text-xs);margin-top:var(--space-8);color:var(--color-text-muted)}
.story-main{padding-top:0}
.story-screen{padding:var(--space-6);background:var(--color-offset);border-radius:var(--radius);border:1px solid var(--color-border)}
.story-screen img{display:block;width:100%;height:auto;max-height:700px;object-fit:contain}
.story-screen figcaption{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-4)}
.story-layout{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-16);margin-top:var(--space-16)}
.story-layout h2{font-size:var(--text-xl);margin-bottom:var(--space-5)}
.story-layout h2:not(:first-child){margin-top:var(--space-10)}
.story-layout p{line-height:1.7}
.story-list{list-style:none;padding:0;margin:var(--space-5) 0 var(--space-8);font-size:var(--text-sm)}
.story-list li{padding-block:var(--space-3);border-bottom:1px solid var(--color-border)}
.story-decision{display:flex;gap:var(--space-5);padding-block:var(--space-6);border-top:1px solid var(--color-border)}
.story-decision h3{font-size:var(--text-base);margin-bottom:var(--space-3)}
.story-decision p{font-size:var(--text-sm);color:var(--color-text-muted)}
.story-takeaway{padding:var(--space-8);margin-top:var(--space-8);background:var(--color-offset);border-radius:var(--radius)}
.story-takeaway .display{font-size:var(--text-xl);line-height:1.25;margin-top:var(--space-4)}
.post,.journal-art{min-width:0}
.journal-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:280px;height:280px;flex-shrink:0;padding:var(--space-6) var(--space-5) var(--space-10);background:var(--color-offset);border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:var(--space-6);color:var(--color-text)}
.journal-art__caption{position:absolute;bottom:var(--space-3);left:var(--space-5);right:var(--space-5);font-size:var(--text-xs);color:var(--color-text-muted)}
.article-art{margin-top:var(--space-8)}
.article-art .journal-art{min-height:320px}
.brand-study{width:100%;max-width:440px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-3);align-items:end}
.brand-study__web{background:var(--color-surface);padding:var(--space-4);border:1px solid var(--color-border);display:grid;gap:var(--space-4);min-height:146px;border-radius:4px}
.brand-study b{font-size:var(--text-xs);letter-spacing:.06em}
.brand-study .display{font-size:var(--text-xl);line-height:1.05}
.brand-study>*{min-width:0}
.brand-study__web i{height:3px;background:var(--color-border);width:80%}
.brand-study__web i:last-child{width:55%}
.brand-study__card{padding:var(--space-4);background:var(--color-primary);color:var(--color-inverse);display:grid;gap:var(--space-5);transform:rotate(-5deg);box-shadow:var(--shadow-sm);min-height:110px;font-size:var(--text-xs)}
.brand-study__swatches{display:flex;gap:var(--space-2)}
.brand-study__swatches i{height:16px;width:32px;background:var(--color-primary);border:1px solid var(--color-border)}
.brand-study__swatches i:nth-child(2){background:var(--color-surface)}
.brand-study__swatches i:nth-child(3){background:var(--color-accent)}
.editorial-steps{width:100%;display:grid;grid-template-columns:1fr auto;gap:var(--space-3);align-items:center}
.editorial-steps span{padding:var(--space-3) var(--space-4);border:1px solid var(--color-border-strong);border-radius:5px;background:var(--color-surface);font-size:var(--text-sm)}
.editorial-steps span:last-child{grid-column:1/-1;background:var(--color-primary);color:var(--color-inverse)}
.editorial-search{width:100%;display:grid;gap:var(--space-3);font-size:var(--text-xs)}
.editorial-query{padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border-strong)}
.editorial-search>div{display:flex;justify-content:space-between;gap:var(--space-3)}
.editorial-search>div span{color:var(--color-text-muted);text-align:right}
.editorial-paths{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);width:100%;max-width:450px}
.editorial-paths div{display:grid;gap:var(--space-4)}
.editorial-paths span{font-size:var(--text-xs)}
.editorial-paths .display{font-size:var(--text-xl);font-weight:400;line-height:1.1}
.editorial-review .display{display:block;font-size:var(--text-xl);line-height:1.2}
.editorial-review>div{font-size:var(--text-xs);margin-top:var(--space-6)}
.offer details{font-size:var(--text-sm);margin-top:var(--space-4)}
.offer{border-color:var(--color-border)}
.offer summary{cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.offer details p{margin-top:var(--space-3);white-space:pre-line;overflow-wrap:anywhere}
.showcase:focus-within .showcase__track{animation-play-state:paused}
@media(max-width:900px){
  .finder{grid-template-columns:1fr 1fr}.finder button{grid-column:1/-1}
  .story-grid{grid-template-columns:1fr}.story-card{display:grid;grid-template-columns:1fr 1fr}
  .story-card__image{display:flex;align-items:center}.story-layout{gap:var(--space-8)}
  .home-journal .grid--3{grid-template-columns:1fr}
  .home-journal .post{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-6)}
  .home-journal .post .journal-art{grid-row:1/5;margin:0}
  .guide{grid-template-columns:1fr}
}
@media(max-width:620px){
  .finder-shell{padding:var(--space-5)}.finder{grid-template-columns:1fr}
  .gates--two,.guide__choices,.dir__bar,.story-layout{grid-template-columns:1fr}
  .gates--two .gate,.guide__result{padding:var(--space-6)}
  .section-line{display:block}.section-line>.text-link{display:inline-block;margin-top:var(--space-5)}
  .story-card,.home-journal .post{display:flex;flex-direction:column}
  .home-journal .post .journal-art{margin-bottom:var(--space-6)}
  .story-screen{padding:var(--space-3)}.story-layout{margin-top:var(--space-8)}
  .journal-art{min-height:235px;padding-inline:var(--space-4)}.article-art .journal-art{min-height:260px}
  .editorial-search>div{display:grid;gap:var(--space-1)}.editorial-search>div span{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .story-card,.story-card img,.guide__choices button,.finder-examples a{transition:none}
  .story-card:hover,.story-card:hover img,.post:hover,.gate:hover{transform:none}
}
@media(max-width:400px){
  .brand-study__web,.brand-study__card{padding:var(--space-2)}
  .brand-study__card{padding-inline:var(--space-1)}
  .brand-study__card b{letter-spacing:0}
  .brand-study .display{font-size:var(--text-xl)}
}