:root{
--font-display:'Baskervville',Baskerville,'Libre Baskerville',Georgia,serif;
--font-sans:'Nunito','Helvetica Neue',Arial,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--font-asterisk-alt:'DM Serif Display',Georgia,serif;
--font-body:var(--font-sans);

/* Display — Baskervville only, regular weight. */
--text-display-1:clamp(3rem,6vw,5.5rem);
--text-display-2:clamp(2.75rem,5vw,4.5rem);
--text-display-3:clamp(2.25rem,3.6vw,3.25rem);
--leading-display:1.02;
--tracking-display:-0.01em;

/* Headings — Nunito 600/700, or Baskervville at h3 and below. */
--text-h1:2.5rem;--text-h2:2rem;--text-h3:1.5rem;--text-h4:1.25rem;
--leading-heading:1.18;
--tracking-heading:-0.005em;

/* Body */
--text-lead:1.25rem;--text-body-lg:1.125rem;--text-body:1rem;--text-body-sm:0.9375rem;--text-caption:0.8125rem;
--leading-body:1.6;--leading-relaxed:1.75;--leading-tight:1.3;
--tracking-body:0;

/* Eyebrow / label — Nunito 700, uppercase, wide. */
--text-eyebrow:0.75rem;
--tracking-eyebrow:0.14em;
--weight-eyebrow:700;

--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
--measure-prose:66ch;--measure-lead:48ch;--measure-narrow:38ch;
}
:root{
/* ── Blue — the dominant, taken from the wordmark (#001C8F). ────────── */
--blue-900:#00114F;--blue-800:#001671;--blue-700:#001C8F;--blue-600:#1533B5;--blue-500:#2E52DB;--blue-400:#5C77E8;--blue-300:#8A9BE8;--blue-200:#C2CBF2;--blue-100:#E4E8FB;
/* ── Gold — the primary accent. Marks, rules, one CTA. ──────────────── */
--gold-800:#6B4B00;--gold-700:#8A6100;--gold-600:#B88200;--gold-500:#E0AC00;--gold-400:#FEC309;--gold-300:#FFD75C;--gold-200:#FFE9A8;--gold-100:#FFF7E0;
/* ── Secondary accents — green, sky, yellow. One per surface, never
      all three together. ────────────────────────────────────────────── */
--green-700:#0A9A50;--green-600:#0FB35E;--green-500:#13CE6D;--green-300:#7BE5AC;--green-100:#E0F9EC;
--sky-700:#0079D6;--sky-500:#41B6FF;--sky-300:#8FD3FF;--sky-100:#E3F3FF;
--yellow-500:#FFEF5C;--yellow-300:#FFF6A3;--yellow-100:#FFFCE0;
/* ── Neutrals — cool paper greys and slate. ─────────────────────────── */
--neutral-0:#FFFFFF;--neutral-50:#F8F9FA;--neutral-100:#F0EFEE;--neutral-200:#E6E4E1;--neutral-300:#CFCDC9;
--slate-400:#8A909D;--slate-500:#5B6272;--slate-600:#474D5B;--slate-700:#343945;--ink:#1B1E26;
/* ── Status. ────────────────────────────────────────────────────────── */
--red-600:#D33224;--red-100:#FDE4E1;--amber-600:#B88200;--amber-100:#FFF7E0;--info-600:var(--sky-700);--info-100:var(--sky-100);

/* ── Semantic aliases — use these in components, not the ramps. ─────── */
--surface-page:var(--neutral-50);
--surface-raised:var(--neutral-0);
--surface-sunken:var(--neutral-100);
--surface-card:var(--neutral-0);
--surface-inverse:var(--blue-700);
--surface-inverse-raised:var(--blue-600);
--surface-accent:var(--gold-100);
--surface-scrim:rgba(0,28,143,.72);

--text-body:var(--ink);
--text-heading:var(--blue-700);
--text-muted:var(--slate-500);
--text-subtle:var(--slate-400);
--text-inverse:var(--neutral-50);
--text-inverse-muted:var(--blue-200);
--text-accent:var(--gold-700);
--text-accent-on-dark:var(--gold-400);
--text-link:var(--blue-700);
--text-link-hover:var(--gold-700);

--border-hairline:var(--neutral-300);
--border-strong:var(--blue-700);
--border-muted:var(--neutral-200);
--border-inverse:rgba(248,249,250,.22);
--border-accent:var(--gold-400);

--accent:var(--gold-400);
--accent-strong:var(--gold-600);
--accent-ink:var(--blue-900);

--focus-ring:var(--gold-600);
--focus-ring-inverse:var(--gold-300);
}
:root{
/* 4px base. Named by step, not by t-shirt size. */
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:40px;--space-8:48px;--space-9:64px;--space-10:80px;--space-11:96px;--space-12:128px;--space-13:160px;
/* Rhythm */
--gutter:24px;
--section-y:clamp(40px,6vw,80px); /* @kind spacing */
--container-max:1200px;
--container-prose:720px;
--container-wide:1440px;
/* Radii — restrained. Nothing pill-shaped except tags. */
--radius-0:0;--radius-sm:2px;--radius-md:4px;--radius-lg:8px;--radius-xl:16px;--radius-pill:999px;
/* Borders */
--border-width:1px;--border-width-thick:2px;--rule-width:1px;
}
:root{
/* Shadows are warm and low. Navy-tinted, never black, never more than two. */
--shadow-none:none;
--shadow-sm:0 1px 2px rgba(0,28,143,.06);
--shadow-md:0 2px 4px rgba(0,28,143,.05),0 8px 20px rgba(0,28,143,.07);
--shadow-lg:0 4px 8px rgba(0,28,143,.05),0 18px 44px rgba(0,28,143,.10);
--shadow-inset-hairline:inset 0 0 0 1px var(--border-hairline);
--shadow-focus:0 0 0 3px rgba(254,195,9,.35);

/* Motion — short, eased, no bounce. */
--ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
--ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:180ms; /* @kind other */
--dur-slow:320ms; /* @kind other */
--dur-page:480ms; /* @kind other */
--transition-base:all var(--dur-base) var(--ease-out);
}
/* Minimal global reset + element defaults. Components carry their own styling. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:var(--weight-semibold);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);color:var(--text-heading)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--gold-400);transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover);text-decoration-color:var(--gold-600)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img,svg{display:block;max-width:100%}
hr{border:0;border-top:var(--rule-width) solid var(--border-hairline);margin:var(--space-6) 0}
::selection{background:var(--gold-200);color:var(--blue-900)}
code,kbd{font-family:var(--font-mono);font-size:.9em}

/* ── Responsive layer ─────────────────────────────────────────────────
   The layouts above are authored as fixed-ratio CSS grids (inline
   styles). Below each breakpoint we collapse them to one column and
   neutralise the handful of behaviours (sticky rails, fixed-width
   columns) that only make sense at desktop widths. An external
   stylesheet rule marked !important beats an unmarked inline style
   declaration per the cascade, so these overrides win without having
   to rewrite every component to read from CSS custom properties. */
@media (max-width:900px){
  .sb-grid{grid-template-columns:1fr!important;gap:var(--space-8)!important}
  .sb-sticky{position:static!important;top:auto!important}
}
@media (max-width:640px){
  .sb-grid{gap:var(--space-7)!important}
  :root{
    --text-display-1:clamp(2.1rem,10vw,3rem);
    --text-display-2:clamp(2rem,10vw,2.75rem);
    --text-display-3:clamp(1.75rem,9vw,2.25rem);
    --section-y:clamp(32px,10vw,64px);
  }
}
@media (max-width:560px){
  .sb-footer-grid{grid-template-columns:1fr!important;gap:var(--space-7)!important}
}
@media (max-width:420px){
  .sb-row-title{font-size:22px!important}
}

.sb-nav-toggle{display:none!important}
@media (max-width:760px){
  header .sb-nav-toggle{display:inline-flex!important}
  header nav.sb-nav{display:none!important}
  header nav.sb-nav.open{
    display:flex!important;flex-direction:column;align-items:flex-start;gap:20px;
    position:absolute;top:100%;left:0;right:0;
    background:var(--blue-800);padding:28px 32px 36px;
    max-height:calc(100vh - 64px);overflow-y:auto;
    border-top:1px solid rgba(248,249,250,.14);
  }
  header nav.sb-nav.open a{color:var(--neutral-50)!important}
  header nav.sb-nav.open .sb-nav-cta{width:100%}
}

/* Portfolio image gallery + lightbox
   The aspect-ratio + cropping lives on the wrapper .sb-gallery-thumb (a
   plain div), not on the <img> itself — replaced elements like <img> don't
   reliably honour `aspect-ratio` when a CSS Grid row auto-sizes around
   them, which stretched thumbnails to their native height in some
   browsers. A block-level wrapper sidesteps that entirely. */
.sb-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.sb-gallery-thumb{aspect-ratio:8/5;overflow:hidden;border-radius:var(--radius-md);border:1px solid var(--border-hairline);cursor:pointer}
.sb-gallery-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.sb-gallery-thumb:hover img{opacity:.85;transform:translateY(-2px)}
.sb-lightbox{position:fixed;inset:0;z-index:70;background:rgba(240,239,238,.45);backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);display:flex;align-items:center;justify-content:center;padding:var(--space-6)}
.sb-lightbox[hidden]{display:none}
.sb-lightbox-img{max-width:min(1100px,92vw);max-height:82vh;width:auto;height:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}
.sb-lightbox-btn{position:absolute;background:var(--blue-800);border:1px solid var(--blue-800);color:var(--neutral-50);border-radius:var(--radius-pill);width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md)}
.sb-lightbox-btn[hidden]{display:none}
.sb-lightbox-btn:hover{background:var(--blue-700)}
.sb-lightbox-close{top:var(--space-5);right:var(--space-5)}
.sb-lightbox-prev{left:var(--space-5);top:50%;transform:translateY(-50%)}
.sb-lightbox-next{right:var(--space-5);top:50%;transform:translateY(-50%)}
.sb-lightbox-count{position:absolute;bottom:var(--space-5);left:50%;transform:translateX(-50%);color:var(--text-muted);font-family:var(--font-mono);font-size:12px}
@media (max-width:560px){
  .sb-lightbox-prev{left:var(--space-3)}
  .sb-lightbox-next{right:var(--space-3)}
  .sb-lightbox-btn{width:38px;height:38px}
}

/* ── Skip link — first focusable element, visually hidden until focused. ── */
.sb-skip-link{position:absolute;left:12px;top:-48px;background:var(--blue-900);color:var(--neutral-50);padding:12px 18px;border-radius:var(--radius-md);z-index:100;transition:top var(--dur-fast) var(--ease-out);text-decoration:none}
.sb-skip-link:focus{top:12px}

/* ── Layout shell ─────────────────────────────────────────────────────── */
.sb-band{padding:var(--section-y) 32px}
.sb-band--sunken{background:var(--surface-sunken)}
.sb-band--inverse{background:var(--blue-700);color:var(--neutral-50);position:relative;overflow:hidden}
/* Headings keep their own explicit color (see the h1-h6 reset) rather than
   inheriting, so an inverse band needs to say so directly. .sb-about__* is
   only ever used inside the About section, so scoping it under
   .sb-band--inverse (rather than a card-specific class) still only
   matches there — but stays correct if About ever moves bands. */
.sb-band--inverse h2{color:var(--neutral-50)}
.sb-band--inverse .sb-about__copy,
.sb-band--inverse .sb-about__links,
.sb-band--inverse .sb-about__note{color:var(--blue-200)}
.sb-band--inverse .sb-about__links a{color:var(--gold-400);text-decoration-color:var(--gold-600)}
.sb-band--inverse .sb-about__links a:hover{color:var(--gold-300)}
.sb-band--inverse .sb-about__portrait{background:var(--blue-700)}
.sb-band--inverse .sb-star-divider__rule{background:var(--border-inverse)}
/* Deeper variant — same navy family as the contact form card, for bands
   that want to read as a touch richer/darker than the standard inverse. */
.sb-band--inverse-deep{background:linear-gradient(to bottom,var(--blue-800) 0%,var(--blue-800) 70%,var(--blue-700) 100%)}
.sb-band--inverse-brown{background:var(--gold-700)}
.sb-band--inverse-brown .sb-expertise__copy{color:var(--gold-100)}
/* Services, Portfolio and About now share one continuous background (see
   the "narrow" comment above), so the full section-y padding at their
   shared edges just reads as a big gap for no visual reason. Trim it. */
.sb-band--tight-top{padding-top:clamp(24px,3vw,40px)}
.sb-band--tight-bottom{padding-bottom:clamp(24px,3vw,40px)}
.sb-band__inner{max-width:var(--container-max);margin:0 auto;position:relative}

/* A "card" is the same overall width as every other section (so its edges
   line up with the rest of the page), but generous internal padding keeps
   the single-column content inside it from stretching edge to edge. */
.sb-band__inner--card{padding:72px;border-radius:var(--radius-lg)}
.sb-band__inner--card-light{background:var(--surface-raised);border:1px solid var(--border-hairline);padding-left:130px;padding-right:130px}
@media (max-width:640px){
  .sb-band__inner--card{padding:32px 24px}
}

.sb-ornament{position:absolute;font-family:var(--font-display);line-height:1;pointer-events:none;color:var(--neutral-50);opacity:.07;z-index:0}
.sb-ornament--tr{right:-120px;top:-40px;font-size:720px}
.sb-ornament--bl{left:-80px;bottom:-300px;font-size:620px}
.sb-ornament--bl-lg{left:-80px;bottom:-300px;font-size:660px}


/* ── Type helpers ─────────────────────────────────────────────────────── */
.sb-eyebrow{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-sans);font-size:var(--text-eyebrow);font-weight:var(--weight-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent)}
.sb-eyebrow--inverse{color:var(--gold-300)}
.sb-eyebrow__rule{width:28px;height:1px;background:currentColor;opacity:.6;flex:0 0 auto}

.sb-display-1{font-family:var(--font-display);font-weight:400;font-size:var(--text-display-1);line-height:1.02;letter-spacing:-.01em;color:var(--neutral-50);margin:26px 0 0;max-width:1000px;text-wrap:balance}
.sb-display-2{font-family:var(--font-display);font-weight:400;font-size:var(--text-display-2);line-height:1.02;letter-spacing:-.01em}
.sb-display-3{font-family:var(--font-display);font-weight:400;font-size:var(--text-display-3);line-height:1.05;letter-spacing:-.01em}

/* Asterisk mark — one face (Baskerville), sized/coloured by modifier. The
   glyph sits high in most fonts, so it's nudged down to read as a bullet. */
.sb-star{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:visible;user-select:none;color:var(--blue-700)}
.sb-star::before{content:"*";font-family:var(--font-display);line-height:1}
.sb-star--sm{width:16px;height:16px}
.sb-star--sm::before{font-size:30.4px;transform:translateY(4.8px)}
.sb-star--md{width:20px;height:20px}
.sb-star--md::before{font-size:38px;transform:translateY(6px)}
.sb-star--gold{color:var(--gold-400)}
.sb-star--light{color:var(--neutral-50)}

.sb-star-divider{display:flex;align-items:center;gap:var(--space-5);width:100%}
.sb-star-divider__rule{flex:1;height:1px;background:var(--border-hairline)}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.sb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;font-family:var(--font-sans);font-size:15px;font-weight:600;line-height:1.2;letter-spacing:.005em;white-space:nowrap;border-radius:var(--radius-md);text-decoration:none;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform 80ms var(--ease-out)}
.sb-btn:active{transform:translateY(1px)}
.sb-btn svg{width:1em;height:1em}
/* .sb-btn's own padding/font-size above are already the "md" size, so
   buttons need no size class for the common case — only sm/lg override. */
.sb-btn--sm{padding:8px 14px;font-size:13px;gap:6px}
.sb-btn--lg{padding:16px 30px;font-size:16px;gap:10px}
.sb-btn--primary{background:var(--blue-700);color:var(--neutral-50);border:1px solid var(--blue-700)}
.sb-btn--primary:hover{background:var(--blue-600);border-color:var(--blue-600)}
.sb-btn--accent{background:var(--gold-400);color:var(--blue-900);border:1px solid var(--gold-400)}
.sb-btn--accent:hover{background:var(--gold-300);border-color:var(--gold-300)}
.sb-btn--secondary{background:transparent;color:var(--blue-700);border:1px solid var(--blue-700)}
.sb-btn--secondary:hover{background:var(--blue-700);color:var(--neutral-50)}
.sb-btn--inverse-outline{background:transparent;color:var(--neutral-50);border:1px solid rgba(248,249,250,.4)}
.sb-btn--inverse-outline:hover{background:rgba(248,249,250,.1)}

.sb-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:background var(--dur-fast) var(--ease-out)}
.sb-icon-btn svg{width:22px;height:22px}
.sb-icon-btn--inverse{color:var(--neutral-50);border-color:rgba(248,249,250,.25)}
.sb-icon-btn--inverse:hover{background:rgba(248,249,250,.12)}
.sb-icon-btn--ghost{color:var(--blue-700)}
.sb-icon-btn--ghost:hover{background:var(--neutral-200)}

/* Static pill — used for portfolio project tags. Not interactive. */
.sb-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-pill);border:1px solid var(--gold-700);color:var(--slate-700);font-family:var(--font-sans);font-size:13px;font-weight:500;line-height:1.4}

/* ── Header ───────────────────────────────────────────────────────────── */
.sb-header{position:sticky;top:0;z-index:30;background:transparent;border-bottom:1px solid transparent;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.sb-header.is-scrolled{background:rgba(248,249,250,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom-color:var(--border-hairline)}
.sb-header.is-menu-open{background:var(--blue-700)}
.sb-header__bar{max-width:var(--container-max);margin:0 auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;position:relative}
.sb-header__logo{display:block;text-decoration:none;line-height:0}
.sb-header__logo img{height:28px;width:auto;display:block}

.sb-nav{display:flex;align-items:center;gap:40px}
.sb-nav__link{font-family:var(--font-sans);font-size:14px;font-weight:600;text-decoration:none;padding-bottom:2px;color:rgba(248,249,250,.7);border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease-out)}
.sb-nav__link.is-active{color:var(--neutral-50);border-bottom-color:var(--gold-400)}
.sb-header.is-scrolled .sb-nav__link{color:var(--text-muted)}
.sb-header.is-scrolled .sb-nav__link.is-active{color:var(--blue-700)}
/* The "Get in touch" button is styled inverse-outline (white on transparent)
   for the top-of-page state, over the hero's blue. Once the header goes
   light on scroll, that same white-on-white would disappear, so it swaps
   to a solid button here instead. */
.sb-header.is-scrolled .sb-nav-cta{background:var(--blue-700);color:var(--neutral-50);border-color:var(--blue-700)}
.sb-header.is-scrolled .sb-nav-cta:hover{background:var(--blue-600);border-color:var(--blue-600)}

.sb-progress{height:2px;background:transparent}
.sb-progress__bar{height:100%;width:0;background:var(--gold-400);transition:width 80ms linear}

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* Slides up under the sticky header (whose background is transparent at
   the top of the page) so the header appears solid blue with the hero,
   rather than showing the pale page background through it. -78px matches
   the header bar's rendered height. */
.sb-hero{position:relative;background:var(--blue-700);color:var(--neutral-50);overflow:hidden;margin-top:-78px;padding-top:78px}
.sb-hero__inner{max-width:var(--container-max);margin:0 auto;padding:104px 32px 112px;position:relative}
.sb-hero__lead{font-size:var(--text-lead);line-height:1.6;color:var(--blue-200);max-width:1000px;margin-top:28px}
.sb-hero__actions{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap}

/* ── Approach ─────────────────────────────────────────────────────────── */
.sb-approach__aside{position:sticky;top:116px;display:flex;flex-direction:column;gap:20px}
.sb-approach__beats{display:flex;flex-direction:column;gap:40px}
.sb-beat{display:flex;flex-direction:column;gap:10px}
.sb-beat__head{display:flex;align-items:center;gap:10px}
.sb-beat__label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-accent)}
.sb-beat__body{font-size:var(--text-body-lg);line-height:1.75;color:var(--text-body);max-width:var(--measure-prose)}

/* ── Human expertise band ────────────────────────────────────────────── */
.sb-expertise__copy{font-size:var(--text-body-lg);line-height:1.75;color:var(--blue-200)}

.sb-quote{margin:0;display:flex;flex-direction:column;gap:var(--space-5);border-left:2px solid var(--gold-400);padding-left:var(--space-6);max-width:720px}
.sb-quote__text{margin:0;font-family:var(--font-display);font-size:clamp(1.75rem,2.8vw,2.5rem);line-height:1.2;letter-spacing:-.015em;color:var(--neutral-50);text-wrap:pretty}

/* ── Services ─────────────────────────────────────────────────────────── */
.sb-services__aside{display:flex;flex-direction:column;gap:20px;position:sticky;top:116px}
.sb-services__lead{font-size:var(--text-body);line-height:1.75;color:var(--text-muted)}
.sb-service-list{border-top:1px solid var(--border-hairline)}
.sb-service{border-bottom:1px solid var(--border-hairline)}
.sb-service__toggle{width:100%;display:flex;align-items:center;gap:18px;background:none;border:0;padding:22px 0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.sb-service__title{flex:1;font-family:var(--font-display);font-size:30px;line-height:1.15;color:var(--text-heading)}
.sb-service.is-open .sb-service__title{color:var(--blue-700)}
.sb-service__toggle:hover .sb-star,.sb-service.is-open .sb-star{color:var(--gold-400)}
.sb-service__chevron{width:9px;height:9px;flex:0 0 auto;border-right:1.5px solid var(--gold-600);border-bottom:1.5px solid var(--gold-600);transform:rotate(45deg);transition:transform var(--dur-base) var(--ease-out)}
.sb-service.is-open .sb-service__chevron{transform:rotate(-135deg) translate(-2px,-2px)}
.sb-service__items{list-style:none;margin:0 0 26px;padding:0 0 0 38px;display:flex;flex-direction:column;gap:10px}
.sb-service__items[hidden]{display:none}
.sb-service__item{display:flex;gap:10px;font-size:15px;line-height:1.6;color:var(--text-muted)}
.sb-service__item::before{content:"\2013";color:var(--gold-500);font-family:var(--font-mono);font-size:12px;margin-top:3px;flex:0 0 auto}

/* ── Portfolio ────────────────────────────────────────────────────────── */
.sb-portfolio__head{display:flex;flex-direction:column;gap:18px}
.sb-portfolio__lead{font-size:var(--text-body);line-height:1.75;color:var(--text-muted)}
.sb-portfolio__sectors{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.6;color:var(--text-muted)}
.sb-portfolio__sectors li{padding-left:18px;position:relative}
.sb-portfolio__sectors li::before{content:"\2013";position:absolute;left:0;color:var(--gold-500);font-family:var(--font-mono);font-size:12px}
.sb-portfolio__sectors strong{color:var(--text-heading);font-weight:600}
.sb-project-list{border-top:1px solid var(--border-hairline);margin-top:20px}
.sb-project{border-bottom:1px solid var(--border-hairline)}
.sb-row-header{width:100%;background:none;border:0;padding:28px 0;cursor:pointer;text-align:left;font:inherit;color:inherit;display:flex;align-items:center;justify-content:space-between;gap:24px}
.sb-row-header:hover .sb-star,.sb-project.is-open .sb-star{color:var(--gold-400)}
.sb-row-header__main{display:flex;flex-direction:column;gap:8px;min-width:0}
.sb-row-header__title-wrap{display:flex;align-items:center;gap:14px}
.sb-row-title{font-family:var(--font-display);font-size:26px;line-height:1.2;letter-spacing:-.01em;color:var(--text-heading)}
.sb-row-meta{font-size:13px;color:var(--text-muted);padding-left:34px}
.sb-row-meta__sector{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--text-accent)}
.sb-row-chevron{flex:0 0 auto;width:10px;height:10px;border-right:1.5px solid var(--gold-600);border-bottom:1.5px solid var(--gold-600);transform:rotate(45deg);transition:transform var(--dur-base) var(--ease-out)}
.sb-project.is-open .sb-row-chevron{transform:rotate(-135deg) translate(-2px,-2px)}
/* 34px = star width (20px) + the gap before the title text (14px), so the
   expanded content lines up with where the row title itself starts. */
.sb-project__detail{display:grid;grid-template-columns:34px 1fr;padding-bottom:36px}
.sb-project__detail[hidden]{display:none}
.sb-project__body{display:flex;flex-direction:column;gap:28px}
.sb-project__text{display:flex;flex-direction:column;gap:20px;max-width:700px}
.sb-detail{display:flex;flex-direction:column;gap:8px}
.sb-detail__label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-subtle)}
.sb-detail__body{font-size:15px;line-height:1.75;color:var(--text-body)}
.sb-project__note{background:var(--gold-100);border-left:2px solid var(--gold-600);border-radius:0 4px 4px 0;padding:16px 20px;font-size:15px;line-height:1.7;color:var(--blue-900);max-width:700px}
.sb-project__tags{display:flex;flex-wrap:wrap;gap:6px}
.sb-project__media{display:flex;flex-direction:column;gap:10px}
.sb-project__gallery-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:12px;display:block}

/* ── About ────────────────────────────────────────────────────────────── */
.sb-about__portrait{width:180px;max-width:100%;aspect-ratio:4/5;background:var(--neutral-200);border-radius:var(--radius-lg);overflow:hidden}
.sb-about__portrait img{width:100%;height:100%;object-fit:cover}
.sb-about__heading{font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1.2;letter-spacing:-.01em}
.sb-about__copy{font-size:var(--text-body-sm);line-height:1.75;color:var(--text-muted)}
.sb-about__links{font-size:var(--text-body-sm);line-height:1.75;color:var(--text-muted)}
.sb-about__note{font-size:var(--text-body-sm);line-height:1.75;color:var(--text-muted)}

/* ── Contact ──────────────────────────────────────────────────────────── */
.sb-contact__title{font-family:var(--font-display);font-weight:400;font-size:var(--text-display-2);line-height:1.02;letter-spacing:-.01em;color:var(--neutral-50);max-width:16ch}
.sb-contact__links{display:flex;flex-direction:column;gap:10px}
.sb-contact__email{font-family:var(--font-mono);font-size:15px;color:var(--gold-400);text-decoration:none}
.sb-contact__linkedin{font-size:15px;color:var(--blue-200)}
.sb-contact__location{font-size:15px;color:var(--blue-300)}
.sb-contact__card{background:var(--blue-800);border:1px solid var(--border-inverse);border-top:2px solid var(--gold-400);border-radius:var(--radius-lg);padding:var(--space-7);display:flex;flex-direction:column;gap:20px}

.sb-field{display:flex;flex-direction:column;gap:var(--space-2)}
.sb-field__label{font-family:var(--font-sans);font-size:var(--text-eyebrow);font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--blue-200)}
.sb-field__required{color:var(--gold-600)}
.sb-field__hint{font-size:var(--text-caption);line-height:1.5;color:var(--blue-300)}

.sb-input,.sb-textarea{width:100%;font-family:var(--font-sans);font-size:var(--text-body);line-height:1.5;padding:11px 14px;border-radius:var(--radius-md);background:rgba(248,249,250,.06);color:var(--neutral-50);border:1px solid rgba(248,249,250,.28);outline:none;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.sb-textarea{line-height:1.6;resize:vertical}
.sb-input:focus,.sb-textarea:focus,.sb-select select:focus{border-color:var(--gold-500);box-shadow:var(--shadow-focus)}
.sb-input::placeholder,.sb-textarea::placeholder{color:var(--blue-300)}
.sb-select{position:relative;width:100%}
.sb-select select{width:100%;appearance:none;font-family:var(--font-sans);font-size:var(--text-body);padding:11px 38px 11px 14px;border-radius:var(--radius-md);line-height:1.5;background:rgba(248,249,250,.06);color:var(--neutral-50);border:1px solid rgba(248,249,250,.28);outline:none;cursor:pointer}
.sb-select__chevron{position:absolute;right:14px;top:50%;transform:translateY(-60%) rotate(45deg);width:7px;height:7px;border-right:1.5px solid var(--blue-200);border-bottom:1.5px solid var(--blue-200);pointer-events:none}

.sb-toast{display:flex;align-items:flex-start;gap:var(--space-4);background:var(--blue-800);color:var(--neutral-50);border-radius:var(--radius-md);border-left:2px solid var(--green-600);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-lg)}
.sb-toast[hidden]{display:none}
.sb-toast__body{display:flex;flex-direction:column;gap:2px;flex:1}
.sb-toast__title{font-size:var(--text-body-sm);font-weight:600}
.sb-toast__desc{font-size:var(--text-caption);color:var(--blue-200);line-height:1.5}
.sb-toast__close{background:none;border:0;color:var(--blue-300);cursor:pointer;font-size:16px;line-height:1;padding:0}

/* ── Footer ───────────────────────────────────────────────────────────── */
.sb-footer{background:var(--blue-900);color:var(--blue-200);padding:64px 32px 36px}
.sb-footer-grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;align-items:start}
.sb-footer__brand{display:flex;flex-direction:column;gap:18px}
.sb-footer__brand img{height:34px;width:auto;display:block;align-self:flex-start}
.sb-footer__tagline{font-size:14px;line-height:1.7;max-width:340px;color:var(--blue-300)}
.sb-footer__col{display:flex;flex-direction:column;gap:12px}
.sb-footer__col-title{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400)}
.sb-footer__col a{font-size:14px;color:var(--blue-200);text-decoration:none}
.sb-footer__location{font-size:14px;color:var(--blue-300)}
.sb-footer__bottom{max-width:var(--container-max);margin:44px auto 0;padding-top:18px;border-top:1px solid rgba(248,249,250,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--blue-300)}
.sb-footer__year{font-family:var(--font-mono)}