/* ==========================================================================
   North Swell Media - core stylesheet
   Built to Brand Kit v1.1 (April 2026). Colours, type and spacing below are
   taken directly from section 3 (Visual Identity) and 7 (Application Specs).
   ========================================================================== */

:root{
  /* --- Primary palette --- */
  --navy:       #1B3568;  /* Brand Navy  - wordmark, headings, primary buttons */
  --gold:       #C4A47C;  /* Koru Gold   - accents, dividers, pull quotes */
  --white:      #FFFFFF;  /* Crisp White */
  --paper:      #FAF7F2;  /* Warm Paper  - subtle backgrounds, cards */

  /* --- Secondary palette --- */
  --navy-deep:  #0F1F42;  /* Deep Navy   - hero, dark sections, footer */
  --gold-pale:  #F5EDD9;  /* Pale Gold   - tints, alt rows */
  /* Koru Gold reads at only 2.35:1 on white. Meaningful graphics (the review
     stars) need 3:1, so they use this deeper tone of the same hue. */
  --gold-deep:  #9C7A45;
  --charcoal:   #1E1E1E;  /* Body text */
  /* Brand Kit Mid Grey is #7A7A7A, which measures 4.29:1 on white - just under
     the 4.5:1 the kit itself requires (section 3.2). Darkened a step so subtext
     passes WCAG AA. Borders use --line, so nothing else is affected. */
  --grey:       #6E6E6E;  /* Subtext, captions, disabled */

  --line:       rgba(27,53,104,.14);
  --line-dark:  rgba(255,255,255,.16);

  /* --- Type (Brand Kit 3.3) --- */
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* --- Rhythm --- */
  --container: 1200px;           /* Brand Kit 7: max content width */
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(64px, 9vw, 130px);
  --radius: 4px;                 /* Brand Kit 7: button radius */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  color:var(--charcoal);
  font-family:var(--body);
  font-size:clamp(15px,1.02vw,17px);   /* Brand Kit: body 15-17px */
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; color:var(--navy); }
h1,h2{ font-family:var(--display); font-weight:700; line-height:1.08; letter-spacing:-.012em; }
h3,h4{ font-family:var(--body); font-weight:600; line-height:1.3; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
::selection{ background:var(--gold); color:var(--navy-deep); }

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.section--paper{ background:var(--paper); }
.section--navy{ background:var(--navy-deep); color:rgba(255,255,255,.82); }
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{ color:var(--white); }
.section--navy .lede{ color:rgba(255,255,255,.8); }
.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Type scale (Brand Kit 3.3) ---------- */
.h-xl{ font-size:clamp(2.5rem,5.6vw,4.5rem); }   /* Display / hero 48-72px */
.h-lg{ font-size:clamp(2rem,3.6vw,2.9rem); }     /* H1-H2 28-40px+ */
.h-md{ font-size:clamp(1.6rem,2.6vw,2.3rem); }
.h-sm{ font-family:var(--body); font-weight:600; font-size:clamp(1.12rem,1.6vw,1.4rem); } /* H3-H4 18-24px */

/* Eyebrow: small caps label above a heading, with the gold rule.
   Koru Gold on white is only 2.35:1, below the 4.5:1 the brand kit requires,
   so gold stays on the *rule* and the label text takes Brand Navy. On dark
   backgrounds gold clears 6:1, so it is restored there further down. */
.eyebrow{
  font-family:var(--body); font-weight:600; text-transform:uppercase;
  font-size:.72rem; letter-spacing:.18em; color:var(--navy); margin:0 0 16px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:''; width:26px; height:1.5px; background:var(--gold); flex:none; }
.section--navy .eyebrow,.cta .eyebrow,.hero .eyebrow,.footer .eyebrow{ color:var(--gold); }

.lede{ font-size:clamp(1.02rem,1.35vw,1.16rem); color:#48525B; max-width:62ch; }

/* Gold divider rule (Brand Kit: accent dividers #C4A47C 1.5px) */
.rule{ width:64px; height:1.5px; background:var(--gold); border:0; margin:0 0 26px; }

/* ---------- Buttons (Brand Kit 7) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:600;
  font-size:.9rem; letter-spacing:.01em;
  padding:15px 28px; border-radius:var(--radius);
  border:1.5px solid transparent; transition:.3s var(--ease);
  white-space:nowrap; cursor:pointer;
}
.btn--primary{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.btn--primary:hover{ background:var(--navy-deep); border-color:var(--navy-deep); transform:translateY(-2px); }
.btn--secondary{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn--secondary:hover{ background:var(--navy); color:var(--white); transform:translateY(-2px); }
/* On dark backgrounds */
.btn--light{ background:var(--white); color:var(--navy); border-color:var(--white); }
.btn--light:hover{ background:var(--gold); border-color:var(--gold); color:var(--navy-deep); transform:translateY(-2px); }
.btn--outline{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.5); }
.btn--outline:hover{ border-color:var(--white); background:rgba(255,255,255,.1); transform:translateY(-2px); }
.btn__arrow{ transition:transform .3s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

.link-arrow{
  font-family:var(--body); font-weight:600; font-size:.92rem;
  color:var(--navy); display:inline-flex; align-items:center; gap:8px;
  padding-bottom:2px; border-bottom:1.5px solid var(--gold); transition:.3s var(--ease);
}
.link-arrow:hover{ gap:14px; color:var(--navy-deep); border-bottom-width:2px; }
.section--navy .link-arrow,.hero .link-arrow,.door .link-arrow{ color:var(--white); }
.section--navy .link-arrow:hover,.door .link-arrow:hover{ color:var(--gold); }

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:18px; transition:.35s var(--ease);
  border-bottom:1px solid transparent;
}
/* Over a dark hero: transparent with white type */
.header .nav a{ color:rgba(255,255,255,.88); }
.header .burger span{ background:var(--white); }
.header__logo img{ height:46px; width:auto; transition:height .35s var(--ease); }
.header__logo .logo--dark{ display:none; }

/* Scrolled, or any page without a dark hero: solid white */
.header.is-stuck,
.header--solid{
  background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
  border-bottom-color:var(--line); padding-block:12px;
  box-shadow:0 1px 20px rgba(27,53,104,.07);
}
.header.is-stuck .nav a,
.header--solid .nav a{ color:var(--navy); }
.header.is-stuck .burger span,
.header--solid .burger span{ background:var(--navy); }
.header.is-stuck .header__logo .logo--light,
.header--solid .header__logo .logo--light{ display:none; }
.header.is-stuck .header__logo .logo--dark,
.header--solid .header__logo .logo--dark{ display:block; }
.header.is-stuck .header__logo img,
.header--solid .header__logo img{ height:40px; }

.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav{ display:flex; align-items:center; gap:clamp(16px,2vw,30px); }
.nav a{
  font-family:var(--body); font-weight:500; font-size:.92rem;
  transition:color .25s; position:relative; padding-block:4px;
}
.nav a:hover{ color:var(--gold); }
.nav a[aria-current="page"]{ color:var(--gold); }
/* Gold is too pale on the white header state - navy text, gold underline. */
.header.is-stuck .nav a:hover,.header--solid .nav a:hover,
.header.is-stuck .nav a[aria-current="page"],.header--solid .nav a[aria-current="page"]{ color:var(--navy-deep); }
.nav a[aria-current="page"]::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1.5px; background:var(--gold);
}
.nav__cta{ margin-left:6px; }
/* The CTA is a filled navy button in every header state, so its label stays
   white. The `a.nav__cta` part is needed to outrank `.header .nav a` above. */
.header .nav a.nav__cta,
.header.is-stuck .nav a.nav__cta,
.header--solid .nav a.nav__cta{ color:var(--white); }
.header .nav a.nav__cta:hover{ color:var(--white); }

.burger{ display:none; width:42px; height:42px; place-items:center; }
.burger span{ display:block; width:22px; height:2px; transition:.3s var(--ease); }
.burger span+span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:920px){
  .burger{ display:grid; position:relative; z-index:2; }
  .burger[aria-expanded="true"] span{ background:var(--white)!important; }
  .nav{
    position:fixed; inset:0; background:var(--navy-deep);
    flex-direction:column; justify-content:center; gap:10px;
    transform:translateX(100%); transition:transform .4s var(--ease);
  }
  .nav.is-open{ transform:none; }
  .header .nav a,.header.is-stuck .nav a,.header--solid .nav a{
    font-family:var(--display); font-weight:600; font-size:1.7rem; color:var(--white);
  }
  .nav__cta{ margin-top:20px; }
  .header .nav a.nav__cta,.header.is-stuck .nav a.nav__cta,.header--solid .nav a.nav__cta{
    color:var(--white); font-family:var(--body); font-size:.95rem;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; min-height:100svh; display:grid; align-items:end; overflow:hidden; background:var(--navy-deep); }
.hero__media{ position:absolute; inset:0; z-index:0; background:var(--navy-deep); }
/* Poster and video stack: the still shows if the video is absent (mobile),
   blocked by autoplay policy, or still loading. */
.hero__media > *{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(15,31,66,.93) 0%, rgba(15,31,66,.45) 48%, rgba(15,31,66,.62) 100%),
    linear-gradient(to right, rgba(15,31,66,.72), rgba(15,31,66,.1) 62%);
}
.hero__inner{ position:relative; z-index:2; padding-bottom:clamp(64px,9vh,120px); padding-top:150px; }
.hero h1{ color:var(--white); max-width:17ch; margin-bottom:20px; }
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero .lede{ max-width:52ch; color:rgba(255,255,255,.88); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }
.hero__tag{
  font-family:var(--body); font-weight:600; text-transform:uppercase;
  font-size:.72rem; letter-spacing:.2em; color:var(--gold); margin-bottom:20px;
  display:flex; align-items:center; gap:12px;
}
.hero__tag::before{ content:''; width:36px; height:1.5px; background:var(--gold); }

/* Promise strip under the hero */
.promise{ background:var(--navy); color:var(--white); }
.promise__inner{ display:flex; flex-wrap:wrap; gap:10px 44px; justify-content:space-between; padding-block:18px; }
.promise__item{
  font-family:var(--body); font-weight:500; font-size:.88rem;
  display:flex; align-items:center; gap:9px;
}
.promise__item::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; }

/* ==========================================================================
   Audience doors
   ========================================================================== */
.doors{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; }
@media (max-width:820px){ .doors{ grid-template-columns:1fr; } }
.door{
  position:relative; min-height:clamp(400px,54vh,580px); overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(26px,3.4vw,48px); isolation:isolate; color:var(--white);
}
.door__bg{ position:absolute; inset:0; z-index:-2; }
.door__bg img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.door::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(15,31,66,.94) 10%, rgba(15,31,66,.55) 58%, rgba(15,31,66,.28) 100%);
  transition:background .45s var(--ease);
}
.door:hover .door__bg img,.door:focus-visible .door__bg img{ transform:scale(1.045); }
.door:hover::after{ background:linear-gradient(to top, rgba(15,31,66,.94) 6%, rgba(27,53,104,.72) 66%, rgba(15,31,66,.3) 100%); }
.door__num{
  font-family:var(--body); font-weight:600; text-transform:uppercase;
  font-size:.7rem; letter-spacing:.18em; color:var(--gold); margin-bottom:auto;
}
.door h3{ font-family:var(--display); font-weight:700; color:var(--white); font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.12; margin-bottom:12px; }
.door p{ color:rgba(255,255,255,.84); max-width:42ch; margin-bottom:20px; font-size:.98rem; }

/* ==========================================================================
   Logo marquee
   ========================================================================== */
.marquee{ overflow:hidden; padding-block:clamp(36px,4.5vw,58px); background:var(--paper); }
.marquee__label{
  text-align:center; font-family:var(--body); font-weight:600; text-transform:uppercase;
  font-size:.7rem; letter-spacing:.2em; color:var(--grey); margin-bottom:30px;
}
.marquee__track{ display:flex; width:max-content; gap:clamp(36px,4.5vw,72px); animation:slide 110s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1rem,1.5vw,1.3rem); color:var(--navy); opacity:.5;
  white-space:nowrap; transition:opacity .3s; display:flex; align-items:center;
}
.marquee__item:hover{ opacity:1; }
.marquee__item::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--gold); margin-right:clamp(36px,4.5vw,72px); flex:none; }
.marquee__item img{ max-height:38px; width:auto; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ==========================================================================
   Services
   ========================================================================== */
.services{ grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); }
.service{
  border-top:1.5px solid var(--line); padding-top:24px;
  transition:border-color .35s var(--ease);
}
.service:hover{ border-top-color:var(--gold); }
.service__num{
  font-family:var(--body); font-weight:600; font-size:.7rem;
  letter-spacing:.18em; color:var(--navy); margin-bottom:14px; display:block;
}
.section--navy .service__num{ color:var(--gold); }
.service h3{ font-size:1.16rem; margin-bottom:10px; color:var(--navy); }
.service p{ color:#4E5862; font-size:.95rem; }
.service__list{ list-style:none; margin:14px 0 0; padding:0; font-size:.88rem; color:var(--grey); }
.service__list li{ padding-left:16px; position:relative; margin-bottom:5px; }
.service__list li::before{ content:''; position:absolute; left:0; top:.62em; width:5px; height:1.5px; background:var(--gold); }
.section--navy .service{ border-top-color:var(--line-dark); }
/* `.service h3` above sets navy, and it wins on source order over the generic
   `.section--navy h3` rule - so restate it here or headings go navy-on-navy. */
.section--navy .service h3{ color:var(--white); }
.section--navy .service p{ color:rgba(255,255,255,.75); }
.section--navy .service__list{ color:rgba(255,255,255,.6); }

/* ==========================================================================
   Work grid
   ========================================================================== */
.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:clamp(26px,3.5vw,44px); }
.filter{
  font-family:var(--body); font-weight:500; font-size:.88rem;
  padding:10px 20px; border:1.5px solid var(--line); border-radius:var(--radius);
  color:var(--navy); transition:.28s var(--ease);
}
.filter:hover{ border-color:var(--navy); }
.filter.is-active{ background:var(--navy); border-color:var(--navy); color:var(--white); }

/* Multi-column rather than a row grid, so 4:3 stills and 9:16 vertical reels
   can sit together without either being cropped to fit a shared row height.
   Cards flow down each column in turn. Overrides `display:grid` from .grid. */
.work-grid{
  display:block;
  columns:330px 3;
  column-gap:clamp(20px,3vw,40px);
}
.work-card{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--navy-deep); display:block; width:100%;
  margin-bottom:clamp(20px,3vw,40px);
  break-inside:avoid; -webkit-column-break-inside:avoid;
}
.work-card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
/* Vertical variant for 1080x1920 social reels */
.work-card--vertical .work-card__media{ aspect-ratio:9/16; }
.work-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.work-card:hover .work-card__media img{ transform:scale(1.05); }
.work-card__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,31,66,.9) 2%, rgba(15,31,66,.25) 52%, transparent 78%);
  transition:opacity .35s;
}
.work-card__body{ position:absolute; left:0; right:0; bottom:0; padding:20px 22px; z-index:2; }
.work-card__cat{
  font-family:var(--body); font-weight:600; text-transform:uppercase;
  font-size:.65rem; letter-spacing:.17em; color:var(--gold); margin-bottom:6px; display:block;
}
.work-card h3{ font-family:var(--display); font-weight:600; font-size:1.1rem; color:var(--white); line-height:1.25; }
.work-card__meta{ font-size:.84rem; color:rgba(255,255,255,.7); margin-top:3px; }
.work-card[hidden]{ display:none; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.quotes{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.quote{
  margin:0; /* <figure> ships with 40px side margins by default */
  background:var(--white); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:var(--radius); padding:clamp(22px,2.6vw,32px);
  display:flex; flex-direction:column; gap:16px; transition:.35s var(--ease);
}
.quote:hover{ box-shadow:0 12px 34px rgba(27,53,104,.1); transform:translateY(-3px); }
.quote__stars{ color:var(--gold-deep); letter-spacing:2px; font-size:.86rem; }
.section--navy .quote__stars{ color:var(--gold); }
.quote blockquote{ margin:0; font-size:.99rem; color:var(--charcoal); }
.quote figcaption{ margin-top:auto; font-size:.85rem; color:var(--grey); }
.quote figcaption strong{ display:block; color:var(--navy); font-weight:600; font-size:.92rem; }
.section--navy .quote{ background:rgba(255,255,255,.05); border-color:var(--line-dark); border-left-color:var(--gold); }
.section--navy .quote blockquote{ color:rgba(255,255,255,.9); }
.section--navy .quote figcaption strong{ color:var(--white); }
.section--navy .quote figcaption{ color:rgba(255,255,255,.7); }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats{ grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); }
.stat__num{ font-family:var(--display); font-weight:700; font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:1; color:var(--navy); }
.section--navy .stat__num{ color:var(--gold); }
.stat__label{ font-size:.85rem; color:var(--grey); margin-top:8px; }
.section--navy .stat__label{ color:rgba(255,255,255,.65); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta{ background:var(--navy-deep); position:relative; overflow:hidden; }
.cta__inner{ position:relative; z-index:2; text-align:center; padding-block:clamp(64px,8vw,116px); }
.cta h2{ color:var(--white); margin-bottom:18px; }
.cta .lede{ margin-inline:auto; color:rgba(255,255,255,.8); }
.cta__actions{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:30px; }

/* ==========================================================================
   Pricing
   ========================================================================== */
.tiers{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); align-items:stretch; }
.tier{
  border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,2.8vw,34px);
  display:flex; flex-direction:column; background:var(--white); transition:.35s var(--ease);
}
.tier:hover{ transform:translateY(-3px); box-shadow:0 14px 36px rgba(27,53,104,.1); }
.tier--featured{ border-color:var(--gold); border-width:1.5px; position:relative; background:var(--gold-pale); }
.tier--featured::before{
  content:'Most booked'; position:absolute; top:-11px; left:clamp(24px,2.8vw,34px);
  background:var(--gold); color:var(--navy-deep); font-family:var(--body); font-weight:600;
  text-transform:uppercase; font-size:.63rem; letter-spacing:.13em; padding:4px 12px; border-radius:2px;
}
.tier h3{ font-family:var(--display); font-weight:600; font-size:1.3rem; margin-bottom:6px; }
.tier__price{ font-family:var(--display); font-weight:700; font-size:2.2rem; line-height:1; margin:16px 0 4px; color:var(--navy); }
.tier__price small{ font-family:var(--body); font-size:.78rem; font-weight:400; color:var(--grey); }
.tier ul{ list-style:none; margin:20px 0; padding:0; display:grid; gap:10px; }
.tier li{ font-size:.92rem; color:#4E5862; padding-left:22px; position:relative; }
.tier li::before{ content:''; position:absolute; left:0; top:.66em; width:9px; height:1.5px; background:var(--gold); }
.tier .btn{ margin-top:auto; justify-content:center; }
.tier__note{ font-size:.82rem; color:var(--grey); }
/* Pale Gold background needs a darker note colour to clear 4.5:1. */
.tier--featured .tier__note{ color:#585858; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form{ display:grid; gap:18px; }
.field{ display:grid; gap:7px; }
@media (min-width:720px){
  .form{ grid-template-columns:repeat(12,1fr); }
  .field--half{ grid-column:span 6; }
  .field--full{ grid-column:span 12; }
}
.field label{
  font-family:var(--body); font-weight:600; font-size:.82rem; color:var(--navy);
}
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; font:inherit; font-size:.95rem;
  background:var(--white); color:var(--charcoal);
  border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .25s, box-shadow .25s;
}
.field textarea{ min-height:148px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(27,53,104,.1);
}
.field input::placeholder,.field textarea::placeholder{ color:#A6ADB4; }
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px,calc(100% - 15px) 20px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.form__note{ font-size:.83rem; color:var(--grey); }

/* ==========================================================================
   Split feature
   ========================================================================== */
.split{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(30px,4.5vw,72px); align-items:center; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; } }
.split__media{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; }
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split--flip .split__media{ order:2; }
@media (max-width:880px){ .split--flip .split__media{ order:0; } }

.signature{ margin-top:26px; }
.signature__name{ font-family:var(--display); font-weight:700; font-size:1.15rem; color:var(--navy); }
.signature__role{ font-size:.85rem; color:var(--grey); margin-top:2px; }

/* ==========================================================================
   Process steps
   ========================================================================== */
.steps{ counter-reset:step; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.step{ position:relative; padding-top:24px; border-top:1.5px solid var(--line); }
.step::before{
  counter-increment:step; content:'0' counter(step);
  font-family:var(--body); font-weight:600; font-size:.72rem; letter-spacing:.17em;
  color:var(--navy); display:block; margin-bottom:12px;
}
.step h3{ font-size:1.02rem; margin-bottom:8px; }
.step p{ font-size:.92rem; color:#4E5862; }
.section--navy .step{ border-top-color:var(--line-dark); }
.section--navy .step::before{ color:var(--gold); }
.section--navy .step p{ color:rgba(255,255,255,.75); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 0; display:flex; gap:20px;
  justify-content:space-between; align-items:center;
  font-family:var(--body); font-weight:600; color:var(--navy);
  font-size:clamp(.96rem,1.3vw,1.05rem); transition:color .25s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--navy-deep); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:4px; }
.faq summary::after{ content:'+'; font-size:1.4rem; color:var(--navy); flex:none; transition:transform .28s var(--ease); line-height:1; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding-bottom:24px; color:#4E5862; max-width:74ch; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background:var(--navy-deep); color:rgba(255,255,255,.7); padding-block:clamp(44px,5.5vw,74px) 28px; }
.footer__grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:clamp(26px,3.6vw,52px); }
@media (max-width:820px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
.footer__brand img{ height:56px; width:auto; }
.footer__brand p{ color:rgba(255,255,255,.62); font-size:.9rem; max-width:34ch; margin-top:16px; }
.footer h4{
  font-family:var(--body); font-size:.7rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px; font-weight:600;
}
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer a{ color:rgba(255,255,255,.72); font-size:.92rem; transition:color .25s; }
.footer a:hover{ color:var(--gold); }
.footer__bottom{
  margin-top:clamp(36px,4.5vw,58px); padding-top:24px; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  font-size:.82rem; color:rgba(255,255,255,.55);
}
.footer__bottom a{ font-size:.82rem; }

/* ==========================================================================
   Interior page header
   ========================================================================== */
.page-head{ padding-top:clamp(128px,14vw,180px); padding-bottom:clamp(40px,5vw,68px); background:var(--paper); }
.page-head h1{ max-width:20ch; margin-bottom:18px; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  .reveal{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
}
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }