/* ============================================================
   Serewebe design system layer — shared by every page.
   Wine / red / brass on warm white. Depth through layered shadow,
   hairlines and a cursor spotlight; glass only where it adds depth.
   ============================================================ */
:root{
  --shadow-1:0 1px 2px rgba(42,7,9,.05), 0 4px 14px -6px rgba(42,7,9,.10);
  --shadow-2:0 2px 4px rgba(42,7,9,.05), 0 18px 40px -16px rgba(42,7,9,.22);
  --hair:rgba(42,7,9,.08);
  --ease-out:cubic-bezier(.22,1,.36,1);
}
body{font-feature-settings:"ss01","cv11"; text-rendering:optimizeLegibility}
h1,h2,h3{letter-spacing:-.028em}
.card,.row-card{border-color:var(--hair); box-shadow:var(--shadow-1); transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s}
.card:hover,.row-card:hover{box-shadow:var(--shadow-2); border-color:rgba(200,16,46,.16)}
@media (hover:hover){ a.card:hover,.row-card:hover{transform:translateY(-3px)} }
.btn,.btn-v2{transition:transform .3s var(--ease-out), background .3s, box-shadow .3s, color .3s}
.btn-primary{box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 8px 22px -8px rgba(200,16,46,.55)}
.btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 12px 28px -8px rgba(200,16,46,.7); transform:translateY(-1px)}
:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:10px}

/* cursor spotlight (class added by ds.js) */
.spot{position:relative}
.spot::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(200,16,46,.10), transparent 70%)}
@media (hover:hover){ .spot:hover::after{opacity:1} }

/* scroll-reveal helper used on sections below the hero */
.rv{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.rv.in{opacity:1; transform:none}
html:not(.js) .rv{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} .card,.row-card{transition:none} }

/* Editorial labels: serif italic, sentence case (replaces the spaced mono capitals) */
.eyebrow,.mono{font-family:'Fraunces',serif; font-style:italic; font-weight:400; text-transform:none; letter-spacing:0}
.eyebrow{font-size:19px; margin-bottom:12px; color:var(--red-dark)}
.mono{font-size:inherit}