/* =====================================================================
   HOUSE STYLE — Alex's reusable client-site design system
   Captured from the Designers Wholesale Workroom (DWW) build, which was
   iterated ~22 times until the structure felt right. This is the locked,
   brand-neutral skeleton. For a new client, ONLY swap the brand tokens
   in the block marked "SWAP PER CLIENT" — leave the structure alone.

   Voice: editorial atelier. White-led paper, characterful serif display
   with an italic accent in the brand color, clean sans for everything
   else, one repeated geometric mark from the client's logo (DWW = blue
   corner brackets). Refined, NOT dramatic. Confident restraint.

   Fonts: Fraunces (display, italic axis) + Geist (body/labels).
   NEVER Inter (too generic). NEVER monospace (reads as "code").
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..800,0..100;1,9..144,300..800,0..100&family=Geist:wght@300;400;500;600;700&display=swap');

/* ----------------------------- TOKENS ------------------------------- */
:root{
  /* ============== SWAP PER CLIENT (only these) ============== */
  --brand:#1B7BC8;          /* pull from the client's logo */
  --brand-deep:#125E9B;     /* a darker shade for hovers */
  --brand-pale:#D8E7F4;     /* a very light tint for active chips */
  /* Display + body fonts can swap too, but keep a characterful serif +
     clean sans pairing. Alternates: GT Sectra / Tiempos / Canela (display),
     General Sans / Söhne / Inter Tight (body). NEVER Inter, NEVER mono. */
  /* ========================================================== */

  /* Paper & ink — white-led palette */
  --paper:#FFFFFF;          /* primary background */
  --paper-soft:#F9F8F5;     /* lifted card / alternating band */
  --paper-deep:#F0EDE7;     /* deepest band (rare use) */
  --ink:#0B0B0B;
  --ink-soft:#1F1F1F;
  --ink-mute:#535353;

  /* Warm-tinted neutral gray (labels, meta) */
  --mist:#8E8A82;
  --mist-soft:#BDB8AC;
  --mist-faint:#E2DCCD;

  /* Lines */
  --rule:rgba(11,11,11,0.10);
  --rule-strong:rgba(11,11,11,0.22);

  /* Type scale */
  --display-1:clamp(3.4rem, 7vw + 0.5rem, 7.2rem);   /* hero h1 */
  --display-2:clamp(2.6rem, 4.5vw + 0.5rem, 4.6rem); /* section h1 */
  --h2:clamp(2rem, 2.4vw + 1rem, 3.2rem);
  --h3:clamp(1.35rem, 0.6vw + 1.1rem, 1.65rem);
  --body:1.0625rem;
  --small:0.875rem;
  --micro:0.72rem;

  /* Motion */
  --ease-out:cubic-bezier(0.2, 0.7, 0.15, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:180ms;
  --t-base:360ms;
  --t-slow:720ms;

  /* Layout */
  --shell:1240px;
  --gutter:clamp(20px, 4vw, 56px);
  --section-y:clamp(72px, 9vw, 132px);
}

/* ----------------------------- RESET -------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html,body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,form,button,input,select,textarea{margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

/* ----------------------------- BASE --------------------------------- */
body{
  font-family:'Geist','Söhne','Helvetica Neue',sans-serif;
  font-size:var(--body);line-height:1.65;
  color:var(--ink-soft);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Fraunces','Times New Roman',serif;font-weight:500;
  font-variation-settings:"opsz" 96, "SOFT" 50;
  color:var(--ink);line-height:1.05;letter-spacing:-0.015em;
}
h1{font-size:var(--display-2);}
h2{font-size:var(--h2);}
h3{font-weight:500;font-size:var(--h3);letter-spacing:-0.01em;line-height:1.15;}
h4{font-family:'Geist',sans-serif;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.18em;color:var(--ink);font-weight:600;}
p{max-width:62ch;}
strong{font-weight:600;color:var(--ink);}
::selection{background:var(--brand);color:var(--paper);}

/* ----------------------------- LAYOUT ------------------------------- */
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);width:100%;}
.section{padding:var(--section-y) 0;position:relative;}
.section.band-soft{background:var(--paper-soft);}
.section.band-deep{background:var(--paper-deep);}
.section.band-ink{background:var(--ink);color:var(--paper-soft);}
.section.band-ink h1,.section.band-ink h2,.section.band-ink h3{color:var(--paper-soft);}
.section.band-ink p{color:rgba(245,238,224,0.78);}
.text-center{text-align:center;}
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2vw,32px);}
.col-4{grid-column:span 4;}.col-5{grid-column:span 5;}.col-6{grid-column:span 6;}
.col-7{grid-column:span 7;}.col-8{grid-column:span 8;}.col-12{grid-column:span 12;}

/* ===================== SIGNATURE MARK: the marker ==================== */
/* Bracketed editorial kicker — use anywhere you'd put a "section label". */
.marker{
  display:inline-flex;align-items:center;gap:0.5em;
  font-family:'Geist',sans-serif;font-weight:500;font-size:var(--micro);
  letter-spacing:0.22em;text-transform:uppercase;color:var(--brand-deep);
}
.marker::before,.marker::after{content:"";width:1.4em;height:1px;background:currentColor;opacity:0.6;}
.marker.solo::after{display:none;}

/* ================= SIGNATURE MARK: bracket frame ==================== */
/* The recurring logo gesture — blue corner brackets that grow on hover.
   Wrap hero images / featured blocks in .frame (add 2 empty
   <span class="frame-c1"></span><span class="frame-c2"></span> children). */
.frame{position:relative;display:block;padding:14px;}
.frame > *{position:relative;z-index:1;display:block;}
.frame::before,.frame::after,.frame > .frame-c1,.frame > .frame-c2{
  content:"";position:absolute;width:34px;height:34px;border:2px solid var(--brand);z-index:0;
  transition:transform var(--t-base) var(--ease-out), width var(--t-base) var(--ease-out), height var(--t-base) var(--ease-out);
}
.frame::before{top:0;left:0;border-right:0;border-bottom:0;}
.frame::after{top:0;right:0;border-left:0;border-bottom:0;}
.frame > .frame-c1{bottom:0;left:0;border-right:0;border-top:0;}
.frame > .frame-c2{bottom:0;right:0;border-left:0;border-top:0;}
.frame:hover::before,.frame:hover::after,.frame:hover > .frame-c1,.frame:hover > .frame-c2{width:46px;height:46px;}
.bracketed{font-family:'Geist',sans-serif;font-weight:500;font-size:0.78em;color:var(--brand);letter-spacing:0.1em;}
.bracketed::before{content:"[";margin-right:0.25em;}
.bracketed::after{content:"]";margin-left:0.25em;}

/* ============================ BUTTONS ================================ */
/* SOLID filled rectangles only. No decorative bracket-corner CTAs. */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:0.8em;
  font-family:'Geist',sans-serif;font-size:0.82rem;text-transform:uppercase;
  letter-spacing:0.18em;font-weight:600;padding:1.05em 1.85em;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  transition:background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.btn:hover{background:var(--brand);border-color:var(--brand);color:var(--paper-soft);}
.btn .arrow{display:inline-block;transition:transform var(--t-base) var(--ease-spring);}
.btn:hover .arrow{transform:translateX(6px);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper-soft);}
.btn-light{background:transparent;color:var(--paper);border:1px solid rgba(245,238,224,0.55);}
.btn-light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
/* Nav CTA — solid brand fill */
.nav-cta-btn{
  background:var(--brand);color:var(--paper-soft);border:1px solid var(--brand);
  padding:0.78em 1.5em;font-family:'Geist',sans-serif;font-size:0.74rem;
  letter-spacing:0.14em;font-weight:600;text-transform:uppercase;line-height:1;
  display:inline-flex;align-items:center;gap:0.6em;
  transition:background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.nav-cta-btn:hover{background:var(--brand-deep);border-color:var(--brand-deep);box-shadow:0 10px 22px -12px rgba(27,123,200,0.6);}
.link-arrow{
  display:inline-flex;align-items:center;gap:0.5em;
  font-family:'Geist',sans-serif;font-weight:500;font-size:0.92rem;
  color:var(--brand-deep);border-bottom:1px solid currentColor;padding-bottom:2px;
  transition:color var(--t-base) var(--ease-out), gap var(--t-base) var(--ease-spring);
}
.link-arrow:hover{color:var(--ink);gap:0.85em;}

/* ============================ HEADER ================================= */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.88);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.site-header.scrolled{border-color:var(--rule);background:rgba(255,255,255,0.97);}
.nav{max-width:var(--shell);margin:0 auto;padding:18px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:14px;}
.brand-mark{width:46px;height:46px;display:block;object-fit:contain;}
.brand-text{display:flex;flex-direction:column;line-height:1;gap:3px;}
.brand-text .b1{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;color:var(--ink);letter-spacing:-0.01em;}
.brand-text .b2{font-family:'Geist',sans-serif;font-weight:500;font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--mist);}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{font-family:'Geist',sans-serif;font-size:0.84rem;font-weight:500;color:var(--ink-soft);position:relative;padding:6px 0;transition:color var(--t-base) var(--ease-out);}
.nav-links a:hover,.nav-links a.is-active{color:var(--brand-deep);}
.nav-links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--brand);}
.nav-toggle{display:none;width:42px;height:42px;border:1px solid var(--rule);position:relative;}
.nav-toggle span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);}
.nav-toggle span:nth-child(1){top:14px;}.nav-toggle span:nth-child(2){top:20px;}.nav-toggle span:nth-child(3){top:26px;}
.nav-toggle.open span:nth-child(1){top:20px;transform:rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){top:20px;transform:rotate(-45deg);}

/* ============================ MARQUEE =============================== */
/* Continuously scrolling brand strip — sits just below the header.
   Content = credentials line: year founded · brand · partner status ·
   location · services. Pauses on hover, respects reduced-motion. */
.marquee{background:var(--brand);color:var(--paper);overflow:hidden;border-bottom:1px solid rgba(0,0,0,0.06);position:relative;}
.marquee-track{display:flex;white-space:nowrap;width:max-content;animation:marquee-scroll 45s linear infinite;padding:11px 0;}
.marquee-track:hover{animation-play-state:paused;}
.marquee-track span{font-family:'Geist',sans-serif;font-weight:500;font-size:0.78rem;letter-spacing:0.22em;text-transform:uppercase;padding:0 1.5em;display:inline-flex;align-items:center;gap:1.5em;}
.marquee-track .dot{width:6px;height:6px;background:currentColor;border-radius:50%;opacity:0.7;flex-shrink:0;}
@keyframes marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;}}

/* ============================ HERO (HOME) ============================ */
/* Stacked: full-width framed banner image on top, 2-col headline below. */
.hero{position:relative;padding:clamp(40px,5vw,80px) 0 clamp(80px,10vw,140px);}
.hero-banner{position:relative;margin-bottom:clamp(48px,6vw,96px);}
.hero-image{width:100%;height:clamp(360px,52vw,620px);object-fit:cover;filter:saturate(1.05) contrast(1.02);display:block;}
.hero-head{display:grid;grid-template-columns:1.15fr 0.85fr;gap:clamp(28px,4vw,72px);align-items:end;}
.hero-head .marker{margin-bottom:24px;}
.hero h1{font-size:var(--display-1);font-weight:400;font-variation-settings:"opsz" 144, "SOFT" 30;line-height:0.95;letter-spacing:-0.025em;margin:0;}
.hero h1 em{font-style:italic;font-weight:400;color:var(--brand);font-variation-settings:"opsz" 144, "SOFT" 100;}
.hero-sub{font-size:1.125rem;color:var(--ink-mute);max-width:46ch;}
.hero-meta{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;}
@media(max-width:820px){.hero-head{grid-template-columns:1fr;gap:24px;}}

/* CREDENTIAL RAIL — sits INLINE in the hero-head right column above the
   lede. NEVER floats over the hero photo (it competes with the image). */
.cred-rail{display:inline-flex;align-items:center;gap:14px;background:var(--paper-soft);border:1px solid var(--rule);border-left:3px solid var(--brand);padding:12px 16px;margin-bottom:24px;max-width:max-content;}
.cred-rail img{width:96px;height:auto;display:block;flex-shrink:0;}
.cred-rail .since{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-variation-settings:"opsz" 96, "SOFT" 90;font-size:1rem;color:var(--ink);line-height:1.1;display:block;}
.cred-rail .where{font-family:'Geist',sans-serif;font-weight:500;font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--mist);display:block;margin-top:4px;}

/* Generic page hero (non-home) */
.page-hero{padding:clamp(60px,8vw,120px) 0 clamp(40px,5vw,80px);border-bottom:1px solid var(--rule);}
.page-hero .marker{margin-bottom:24px;}
.page-hero h1{font-size:var(--display-2);font-weight:400;font-variation-settings:"opsz" 144, "SOFT" 30;letter-spacing:-0.022em;line-height:1;}
.page-hero h1 em{font-style:italic;color:var(--brand);font-variation-settings:"opsz" 144, "SOFT" 100;}
.page-hero .lede{margin-top:24px;font-size:1.125rem;color:var(--ink-mute);max-width:64ch;}
.page-hero-crumb{font-family:'Geist',sans-serif;font-weight:500;font-size:var(--micro);letter-spacing:0.2em;text-transform:uppercase;color:var(--mist);margin-top:18px;}
.page-hero-crumb a:hover{color:var(--brand);}

/* ============================ STATS STRIP ============================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.stat{padding:36px 24px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:8px;}
.stat:last-child{border-right:0;}
.stat-num{font-family:'Fraunces',serif;font-weight:400;font-variation-settings:"opsz" 144, "SOFT" 60;font-size:clamp(2rem,3vw,3rem);line-height:1;color:var(--ink);}
.stat-num em{font-style:italic;color:var(--brand);}
.stat-label{font-family:'Geist',sans-serif;font-weight:500;font-size:var(--micro);letter-spacing:0.18em;text-transform:uppercase;color:var(--mist);}
@media(max-width:820px){.stats{grid-template-columns:1fr 1fr;}.stat{border-right:0;border-bottom:1px solid var(--rule);}.stat:last-child,.stat:nth-last-child(2){border-bottom:0;}}
@media(max-width:540px){.stats{grid-template-columns:1fr;}.stat{border-right:0;border-bottom:1px solid var(--rule);}.stat:last-child{border-bottom:0;}}

/* ============================ SECTION HEAD =========================== */
.section-head{margin-bottom:clamp(48px,5vw,76px);}
.section-head h2{max-width:18ch;}
.section-head h2 em{font-style:italic;color:var(--brand);font-weight:400;font-variation-settings:"opsz" 144, "SOFT" 100;}
.section-head .marker{margin-bottom:24px;}
.section-head .head-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;}
.section-head .head-grid p{color:var(--ink-mute);font-size:1.04rem;}

/* ============================ SERVICE GRID =========================== */
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2vw,28px);}
.svc-card{grid-column:span 4;background:var(--paper-soft);border:1px solid var(--rule);display:flex;flex-direction:column;position:relative;transition:transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);}
.svc-card::after{content:"";position:absolute;top:0;left:0;width:0;height:2px;background:var(--brand);transition:width var(--t-base) var(--ease-out);}
.svc-card:hover{transform:translateY(-6px);border-color:var(--rule-strong);box-shadow:0 24px 50px -28px rgba(11,11,11,0.22);}
.svc-card:hover::after{width:100%;}
.svc-card .svc-num{font-family:'Geist',sans-serif;font-weight:500;font-size:var(--micro);letter-spacing:0.22em;text-transform:uppercase;color:var(--mist);padding:22px 24px 0;}
.svc-card img{width:100%;height:280px;object-fit:cover;}
.svc-body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:14px;flex:1;}
.svc-body h3{color:var(--ink);}
.svc-body p{color:var(--ink-mute);font-size:0.96rem;flex:1;}
.svc-body .link-arrow{margin-top:6px;}
.svc-card.feat{grid-column:span 8;}
.svc-card.feat img{height:380px;}
@media(max-width:1100px){.svc-card,.svc-card.feat{grid-column:span 6;}}
@media(max-width:720px){.svc-card,.svc-card.feat{grid-column:span 12;}}

/* ============================ GALLERY ================================ */
.gal-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;grid-auto-flow:dense;}
.gal-item{position:relative;overflow:hidden;cursor:pointer;background:var(--paper-deep);}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out), filter var(--t-base) var(--ease-out);}
.gal-item:hover img{transform:scale(1.06);filter:saturate(1.08);}
.gal-item .gal-caption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;background:linear-gradient(0deg,rgba(11,11,11,0.62) 0%,rgba(11,11,11,0) 100%);color:var(--paper-soft);transform:translateY(20%);opacity:0;transition:transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);}
.gal-item:hover .gal-caption{transform:translateY(0);opacity:1;}
.gal-item .gal-caption .ttl{font-family:'Fraunces',serif;font-size:1.1rem;letter-spacing:-0.01em;line-height:1.15;}
.gal-item .gal-caption .meta{font-family:'Geist',sans-serif;font-weight:500;font-size:var(--micro);letter-spacing:0.18em;text-transform:uppercase;opacity:0.85;}
.gal-item::before,.gal-item::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--brand);opacity:0;transition:opacity var(--t-base) var(--ease-out), width var(--t-base) var(--ease-out), height var(--t-base) var(--ease-out);z-index:2;pointer-events:none;}
.gal-item::before{top:10px;left:10px;border-right:0;border-bottom:0;}
.gal-item::after{bottom:10px;right:10px;border-left:0;border-top:0;}
.gal-item:hover::before,.gal-item:hover::after{opacity:1;width:28px;height:28px;}
.gal-item.s4{grid-column:span 4;height:340px;}.gal-item.s5{grid-column:span 5;height:420px;}.gal-item.s6{grid-column:span 6;height:380px;}
.gal-item.s7{grid-column:span 7;height:420px;}.gal-item.s8{grid-column:span 8;height:460px;}.gal-item.tall{height:520px;}
@media(max-width:900px){.gal-item,.gal-item.s4,.gal-item.s5,.gal-item.s6,.gal-item.s7,.gal-item.s8{grid-column:span 6;height:280px;}.gal-item.tall{height:340px;}}
@media(max-width:560px){.gal-item,.gal-item.s4,.gal-item.s5,.gal-item.s6,.gal-item.s7,.gal-item.s8,.gal-item.tall{grid-column:span 12;height:280px;}}

/* ============================ TESTIMONIALS =========================== */
.tst-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3vw,48px);}
.tst-card{position:relative;padding:44px 36px 36px;background:var(--paper-soft);border:1px solid var(--rule);display:flex;flex-direction:column;gap:24px;}
.tst-card::before{content:"\201C";position:absolute;top:-26px;left:24px;font-family:'Fraunces',serif;font-size:7rem;line-height:1;color:var(--brand);font-variation-settings:"opsz" 144, "SOFT" 100;}
.tst-quote{font-family:'Fraunces',serif;font-weight:400;font-style:italic;font-size:clamp(1.25rem,1.4vw + 0.6rem,1.7rem);line-height:1.35;letter-spacing:-0.01em;color:var(--ink);font-variation-settings:"opsz" 96, "SOFT" 70;}
.tst-meta{display:flex;align-items:center;gap:16px;border-top:1px solid var(--rule);padding-top:18px;}
.tst-meta .who{font-family:'Geist',sans-serif;font-weight:600;font-size:0.95rem;color:var(--ink);}
.tst-meta .role{font-family:'Geist',sans-serif;font-weight:500;font-size:var(--micro);letter-spacing:0.18em;text-transform:uppercase;color:var(--mist);}
.section.band-ink .tst-card{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.12);}
.section.band-ink .tst-card .tst-quote,.section.band-ink .tst-meta .who{color:var(--paper-soft);}
.section.band-ink .tst-meta{border-color:rgba(255,255,255,0.14);}
@media(max-width:820px){.tst-grid{grid-template-columns:1fr;}}

/* ============================ TWO-COL SPLIT ========================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;}
.split.right .text{order:2;}.split.right .media{order:1;}
.split .text h2{margin-bottom:24px;max-width:18ch;}
.split .text h2 em{font-style:italic;color:var(--brand);font-weight:400;font-variation-settings:"opsz" 144, "SOFT" 100;}
.split .text p{color:var(--ink-mute);margin-bottom:18px;font-size:1.04rem;}
.split .text .marker{margin-bottom:20px;}
.split .media img{width:100%;height:clamp(360px,42vw,560px);object-fit:cover;}
/* show-full: opt-in for PORTRAIT / group photos — never crop heads/feet. */
.split.show-full .media img{height:auto;max-height:640px;object-fit:contain;}
@media(max-width:820px){.split{grid-template-columns:1fr;}.split.right .text,.split.right .media{order:0;}}

/* ============================ PROCESS STEPS ========================== */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:p;}
.proc-step{padding:32px 26px;border:1px solid var(--rule);background:var(--paper-soft);position:relative;display:flex;flex-direction:column;gap:14px;transition:transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);}
.proc-step::before{counter-increment:p;content:"0" counter(p);font-family:'Geist',sans-serif;font-weight:500;font-size:var(--micro);letter-spacing:0.22em;color:var(--brand);}
.proc-step h3{font-family:'Fraunces',serif;font-size:1.35rem;font-weight:500;color:var(--ink);}
.proc-step p{color:var(--ink-mute);font-size:0.95rem;margin:0;}
.proc-step:hover{transform:translateY(-4px);border-color:var(--brand);}
@media(max-width:900px){.process{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.process{grid-template-columns:1fr;}}

/* ============================ TEAM =================================== */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.team-card{border:1px solid var(--rule);padding:32px 28px;background:var(--paper-soft);transition:border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);}
.team-card:hover{border-color:var(--brand);transform:translateY(-3px);}
.team-card .role{font-family:'Geist',sans-serif;font-weight:500;font-size:var(--micro);letter-spacing:0.2em;text-transform:uppercase;color:var(--brand-deep);margin-bottom:10px;}
.team-card .name{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:500;color:var(--ink);}
.team-card .email{font-size:0.9rem;color:var(--ink-mute);margin-top:12px;display:inline-block;}
.team-card .email:hover{color:var(--brand-deep);}
@media(max-width:820px){.team-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.team-grid{grid-template-columns:1fr;}}

/* ============================ FEATURE PILLARS ======================== */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.pillar{padding:36px 32px;border-top:1px solid var(--brand);}
.pillar h3{font-size:1.5rem;margin:14px 0 12px;}
.pillar p{color:var(--ink-mute);font-size:0.98rem;}
.pillar .pillar-num{font-family:'Geist',sans-serif;font-weight:500;font-size:var(--micro);letter-spacing:0.22em;color:var(--brand-deep);}
@media(max-width:820px){.pillars{grid-template-columns:1fr;}}

/* ============================ STORY / PROSE ========================== */
.prose{max-width:68ch;margin:0 auto;}
.prose .lede{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:clamp(1.4rem,1.5vw + 0.8rem,1.95rem);line-height:1.35;color:var(--ink);margin-bottom:36px;font-variation-settings:"opsz" 96, "SOFT" 80;}
.prose p{margin-bottom:20px;font-size:1.075rem;}
.prose .pullquote{margin:48px 0;padding:0 0 0 32px;border-left:2px solid var(--brand);font-family:'Fraunces',serif;font-style:italic;font-size:1.6rem;line-height:1.35;color:var(--ink);}

/* ============================ FORMS ================================== */
.form{display:flex;flex-direction:column;gap:18px;max-width:760px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-family:'Geist',sans-serif;font-weight:500;font-size:var(--micro);letter-spacing:0.2em;text-transform:uppercase;color:var(--mist);}
.field input,.field select,.field textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);padding:12px 0;transition:border-color var(--t-base) var(--ease-out);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);}
.field textarea{resize:vertical;min-height:140px;}
.thank-you{padding:32px;border:1px solid var(--brand);background:var(--brand-pale);display:none;}
.thank-you.is-on{display:block;}
.thank-you h3{font-family:'Fraunces',serif;color:var(--ink);margin-bottom:8px;}
@media(max-width:640px){.form-row{grid-template-columns:1fr;}}

/* ============================ CONTACT CARD =========================== */
.contact-card{background:var(--paper-soft);border:1px solid var(--rule);padding:40px;display:flex;flex-direction:column;gap:24px;}
.ci{display:flex;flex-direction:column;gap:4px;}
.ci .lbl{font-family:'Geist',sans-serif;font-weight:500;font-size:var(--micro);letter-spacing:0.2em;text-transform:uppercase;color:var(--mist);}
.ci a,.ci p{font-family:'Fraunces',serif;font-size:1.15rem;color:var(--ink);}
.ci a{font-family:'Geist',sans-serif;font-weight:500;font-size:1rem;}
.ci a:hover{color:var(--brand-deep);}
/* Social = brand-color icon buttons, NEVER text labels. */
.social-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.social-row a.social-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);transition:color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);}
.social-row a.social-icon svg{width:18px;height:18px;display:block;fill:currentColor;}
.social-row a.social-icon:hover{transform:translateY(-2px);color:var(--paper);}
.social-row a.social-facebook:hover{background:#1877F2;border-color:#1877F2;}
.social-row a.social-instagram:hover{background:linear-gradient(45deg,#FEDA75 0%,#FA7E1E 22%,#D62976 50%,#962FBF 75%,#4F5BD5 100%);border-color:#D62976;}
.social-row a.social-x:hover{background:#000;border-color:#000;}

/* ============================ CTA BAND =============================== */
.cta-band{background:var(--ink);color:var(--paper-soft);padding:clamp(72px,9vw,120px) 0;position:relative;overflow:hidden;}
.cta-band::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:140%;height:140%;background:radial-gradient(circle at center, rgba(27,123,200,0.18) 0%, rgba(27,123,200,0) 60%);pointer-events:none;}
.cta-band .shell{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;}
.cta-band h2{color:var(--paper-soft);font-size:clamp(2.4rem,4vw,4rem);font-weight:400;font-variation-settings:"opsz" 144, "SOFT" 40;line-height:1.0;letter-spacing:-0.022em;}
.cta-band h2 em{font-style:italic;color:var(--brand);font-variation-settings:"opsz" 144, "SOFT" 100;}
.cta-band p{color:rgba(245,238,224,0.7);max-width:42ch;}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;}
@media(max-width:820px){.cta-band .shell{grid-template-columns:1fr;}}

/* ============================ FOOTER ================================= */
.site-footer{background:var(--paper-deep);color:var(--ink);padding:clamp(60px,7vw,90px) 0 24px;border-top:1px solid var(--rule);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;}
.footer-brand{display:flex;flex-direction:column;gap:18px;max-width:320px;}
.footer-brand img{width:64px;height:64px;}
.footer-brand p{color:var(--ink-mute);font-size:0.95rem;}
.footer-col h4{margin-bottom:18px;color:var(--brand-deep);}
.footer-col a,.footer-col p{display:block;font-size:0.95rem;color:var(--ink-soft);margin-bottom:8px;}
.footer-col a:hover{color:var(--brand-deep);}
.footer-bottom{padding-top:24px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:'Geist',sans-serif;font-weight:500;font-size:var(--micro);letter-spacing:0.18em;text-transform:uppercase;color:var(--mist);}
@media(max-width:980px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* ============================ REVEAL / MOTION ======================= */
@keyframes rise{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
@keyframes bracketDraw{from{opacity:0;transform:scale(0.6);}to{opacity:1;transform:scale(1);}}
/* NOTE: gate .reveal behind a .js class on <html> in production so content
   is visible without JS (see SKILL Step 5). These are the base styles. */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 900ms var(--ease-out), transform 900ms var(--ease-out);}
.reveal.is-on{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity 800ms var(--ease-out), transform 800ms var(--ease-out);}
.reveal-stagger.is-on > *{opacity:1;transform:translateY(0);}
.reveal-stagger.is-on > *:nth-child(1){transition-delay:0ms;}
.reveal-stagger.is-on > *:nth-child(2){transition-delay:90ms;}
.reveal-stagger.is-on > *:nth-child(3){transition-delay:180ms;}
.reveal-stagger.is-on > *:nth-child(4){transition-delay:270ms;}
.reveal-stagger.is-on > *:nth-child(5){transition-delay:360ms;}
.reveal-stagger.is-on > *:nth-child(6){transition-delay:450ms;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-delay:0!important;transition-duration:0.01ms!important;}html{scroll-behavior:auto;}}

/* ============================ MOBILE NAV ============================= */
@media(max-width:1000px){
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper-soft);border-bottom:1px solid var(--rule);padding:14px var(--gutter) 24px;transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility var(--t-base);}
  .nav-links.is-open{transform:translateY(0);opacity:1;visibility:visible;}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--rule);font-size:1rem;}
  .nav-links a.is-active::after{display:none;}
  .nav-toggle{display:block;}
}
.muted{color:var(--ink-mute);}
@media(max-width:700px){.hide-mobile{display:none!important;}}