/*
  Component styles — header/nav, mobile menu, hero, service cards,
  sector cards, contact block, footer, cookie banner, etc.
  Populated starting Task 3. Layout primitives and tokens these
  components build on already live in base.css / tokens.css.
*/

/* =======================================================================
   Header (Task 3) — fixed + condensing, brand lockup, centered nav,
   language toggle, mobile full-screen menu.
========================================================================== */

/* Compensate for the header being taken out of flow (position:fixed). */
body{padding-top:var(--header-h);}

.site-header{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  transition:height .35s var(--ease-out);
}

/* The frosted-glass background lives on ::before, not on .site-header
   itself. backdrop-filter (like transform/filter) creates a new
   containing block for fixed-position descendants — if it sat on
   .site-header directly, the mobile nav overlay (`.site-nav`, itself
   `position:fixed`, nested inside this element) would be confined to
   the header's own box instead of covering the viewport. Keeping the
   filter on a decorative pseudo-element sidesteps that entirely. */
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.site-header.is-scrolled{height:var(--header-h-scrolled);}
.site-header.is-scrolled::before{
  background:rgba(255,255,255,.92);
  border-bottom-color:var(--line);
  box-shadow:var(--shadow-sm);
}

.site-header__inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:var(--space);
  width:100%;
}

/* ---- Brand lockup ---------------------------------------------------- */
.brand{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  text-decoration:none;
  color:var(--ink);
}
/* The mark is the company's real logo (assets/img/logo-mark.png, traced
   from Logo1.jpg) applied as a currentColor mask, so the geometry is exact
   and it still tints via `color` anywhere (gray in header, light/gold on
   dark). Aspect ratio 792:545 comes from the traced artwork. */
.brand__mark{
  flex:none;
  width:44px;
  aspect-ratio:792 / 545;
  color:var(--ink-2);
  background-color:currentColor;
  -webkit-mask:url("../img/logo-mark.png") center / contain no-repeat;
  mask:url("../img/logo-mark.png") center / contain no-repeat;
  transition:color .3s var(--ease-out), width .3s var(--ease-out);
}
.brand:hover .brand__mark,
.brand:focus-visible .brand__mark{color:var(--gold-deep);}

/* Reusable on dark backgrounds (footer, dark sections): same mask filled
   with a different `color`. */
.brand__mark--gold{color:var(--gold);}

.brand__name{
  display:block;
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.14em;
  line-height:1.2;
  color:var(--ink);
  white-space:nowrap;
}
.brand__name-sub{
  display:block;
  margin-block-start:.2em;
  font-family:var(--font-body);
  font-size:.56em;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
}

/* ---- Primary nav (desktop) -------------------------------------------- */
.site-nav{justify-self:center;}

.site-nav__list{
  display:flex;
  align-items:center;
  gap:clamp(1.25rem,2.2vw,2.25rem);
  margin:0;
}

.site-nav__list a{
  position:relative;
  display:inline-block;
  padding-block:.4em;
  font-family:var(--font-body);
  font-size:.94rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink-2);
  text-decoration:none;
  transition:color .3s var(--ease-out);
}
.site-nav__list a::after{
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:0;
  height:2px;
  border-radius:2px;
  background:var(--gold-grad);
  transition:left .35s var(--ease-out), right .35s var(--ease-out);
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible{color:var(--ink);}
.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after{left:0;right:0;}

/* ---- Header actions: language toggle + mobile menu button ------------ */
.header-actions{
  display:flex;
  align-items:center;
  gap:clamp(1rem,2.5vw,1.75rem);
  justify-self:end;
}

.lang-toggle{
  display:flex;
  align-items:center;
  gap:.4em;
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.04em;
}
.lang-toggle span{color:var(--line);}
.lang-toggle button{
  position:relative;
  padding:.2em .1em;
  color:var(--ink-2);
  transition:color .25s var(--ease-out);
}
/* Invisible hit-slop (Task 14): the "TH / EN" glyphs stay small and
   inline by design (a restrained type-based toggle, not a button pill),
   but the actual clickable/tappable area is expanded via this
   absolutely-positioned ::before so it clears a touch-friendly height
   without inflating the toggle visually. Uses ::before (not ::after,
   which .is-active already owns for the gold underline below). */
.lang-toggle button::before{
  content:"";
  position:absolute;
  /* -15px horizontal widens the tap target past 44px (the ~20px glyph box
     + 2×15px) to meet the touch-size audit, without changing the visual. */
  inset:-14px -15px;
}
.lang-toggle button:hover{color:var(--ink);}
.lang-toggle button.is-active{
  color:var(--ink);
  position:relative;
}
.lang-toggle button.is-active::after{
  content:"";
  display:block;
  height:2px;
  margin-block-start:2px;
  border-radius:2px;
  background:var(--gold-grad);
}

/* Hamburger — hidden on desktop, shown under the 900px breakpoint.
   44x44 (Task 14, up from 40x40) to clear the touch-target minimum; the
   bars stay the same 22px visual size, centered via the absolute
   top/left/transform on .menu-btn__bars below, so the icon itself
   doesn't look any bigger. */
.menu-btn{
  display:none;
  position:relative;
  width:44px;
  height:44px;
  flex:none;
  align-items:center;
  justify-content:center;
}
.menu-btn__bars,
.menu-btn__bars::before,
.menu-btn__bars::after{
  content:"";
  position:absolute;
  width:22px;
  height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform .3s var(--ease-out), opacity .2s var(--ease-out), top .3s var(--ease-out);
}
.menu-btn__bars{top:50%;left:50%;transform:translate(-50%,-50%);}
.menu-btn__bars::before{top:-7px;left:0;}
.menu-btn__bars::after{top:7px;left:0;}
.menu-btn[aria-expanded="true"] .menu-btn__bars{background:transparent;}
.menu-btn[aria-expanded="true"] .menu-btn__bars::before{top:0;transform:rotate(45deg);}
.menu-btn[aria-expanded="true"] .menu-btn__bars::after{top:0;transform:rotate(-45deg);}

/* ---- Mobile (<900px): hide inline nav, hamburger + full-screen overlay */
@media (max-width:899.98px){
  .menu-btn{display:inline-flex;}

  .site-nav{
    justify-self:auto;
    position:fixed;
    inset-block-start:var(--header-h);
    inset-block-end:0;
    inset-inline:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--night);
    opacity:0;
    visibility:hidden;
    transform:translateY(-12px);
    transition:opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility 0s linear .4s, inset-block-start .35s var(--ease-out);
  }
  .site-header.is-scrolled .site-nav{inset-block-start:var(--header-h-scrolled);}
  .site-nav.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition:opacity .4s var(--ease-out), transform .4s var(--ease-out), inset-block-start .35s var(--ease-out);
  }

  .site-nav__list{
    flex-direction:column;
    gap:clamp(1.5rem,7vw,2.5rem);
  }
  .site-nav__list a{
    font-family:var(--font-head);
    font-size:clamp(1.4rem,6vw,2.1rem);
    font-weight:500;
    color:#EDECE8;
  }
  .site-nav__list a:hover,
  .site-nav__list a:focus-visible{color:var(--gold-bright);}
}

/* Locks background scroll while the mobile overlay is open. */
body.no-scroll{overflow:hidden;}

/* =======================================================================
   Hero (Task 5) — fills the first viewport under the fixed header. The
   right side carries a decorative geometric line-art motif in the brand's
   thin-line, triangular idiom (see .brand__mark / assets/img/logo-mark.png).
   Motion (line-draw, float loop, shine, entrance) lives
   in motion.css; this file only sets static geometry/paint.
========================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:calc(100dvh - var(--header-h));
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-soft) 100%);
}

/* ---- Decorative line-art layer --------------------------------------- */
.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.hero__bg svg{width:100%;height:100%;display:block;}

.hero-line--ghost{stroke:var(--ink-2);stroke-opacity:.14;stroke-width:1.1;}
.hero-line--mid{stroke:var(--gold);stroke-opacity:.45;stroke-width:1.4;}
.hero-line--float{stroke:var(--gold-bright);stroke-opacity:.45;stroke-width:1.7;}
.hero__node{fill:var(--gold);opacity:.8;}

/* ---- Content ----------------------------------------------------------- */
.hero__inner{
  position:relative;
  z-index:1;
  width:100%;
  padding-block:clamp(3rem,9vw,6.5rem);
}

.hero__content{max-width:38rem;}

.hero__title{margin-block-end:.5em;}

.hero__lead{
  max-width:34rem;
  margin-block-end:2.1em;
  font-size:var(--step-1);
  color:var(--ink-2);
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:1em;
}

/* ---- Scroll cue --------------------------------------------------------
   Purely decorative (aria-hidden): a short gradient thread under the
   fold hint. No text content, so it needs no i18n key of its own. */
.hero__scroll{
  position:absolute;
  left:var(--gutter);
  bottom:clamp(1.5rem,4vw,2.75rem);
  z-index:1;
  width:1px;
  height:52px;
}
.hero__scroll-line{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(180deg,var(--gold-deep),transparent);
}

@media (max-width:700px){
  .hero{min-height:auto;padding-block-start:1rem;}
  .hero__bg{opacity:.55;}
  .hero__scroll{display:none;}
}

/* =======================================================================
   About (Task 7) — light section (paper-soft) immediately after the
   hero: two-column layout (copy + animated stat card), stacking under
   820px. The stat card's decorative mark reuses the hero's thin-line
   triangular motif at a smaller scale, but draws in on scroll reveal
   (tied to the shared [data-reveal].is-visible class from main.js)
   rather than automatically on page load like the hero's does.
========================================================================== */
.about{background:var(--paper-soft);}

.about__inner{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:clamp(2.5rem,6vw,5rem);
}

.about__copy .section-title{margin-block-end:.6em;}

.about__body{
  max-width:36rem;
  font-size:var(--step-1);
  color:var(--ink-2);
}

/* ---- Stat card --------------------------------------------------------- */
.about__stat-card{
  position:relative;
  overflow:hidden;
  padding:clamp(2rem,4vw,3rem);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--paper);
  box-shadow:var(--shadow-sm);
}

.about__stat-mark{
  position:absolute;
  inset-block-start:-10%;
  inset-inline-end:-14%;
  width:60%;
  pointer-events:none;
}
.about__stat-mark path{
  fill:none;
  stroke:var(--gold);
  stroke-opacity:.5;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.3s var(--ease-out) .25s;
}
.about__stat-mark circle{fill:var(--gold);opacity:.7;}
/* Lines stay undrawn until main.js's IntersectionObserver adds
   .is-visible to this same element (the [data-reveal] host). */
.about__stat-card.is-visible .about__stat-mark path{stroke-dashoffset:0;}

.about__stat-figure{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.9em;
}

/* Gold gradient reuses --gold-shine (tokens.css), the same AA-safe sweep
   as the hero's .shine headline — both stops clear >=3:1 against
   --paper, which is sufficient for this step-4-sized (large) text.
   --gold-grad/--gold-bright are NOT used here: --gold-bright on white
   is only ~1.57:1 and fails AA even for large text. */
.about__stat-number{
  display:block;
  font-size:var(--step-4);
  font-weight:600;
  line-height:1;
  background:var(--gold-shine);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.about__stat-label{
  padding-block-start:.9em;
  border-block-start:1px solid var(--line);
  font-size:var(--step-0);
  color:var(--ink-2);
}

@media (max-width:820px){
  .about__inner{grid-template-columns:1fr;}
  .about__stat-card{max-width:26rem;margin-inline:auto;}
}

/* =======================================================================
   Services (Task 8) — first DARK section, for light/dark/dark section
   rhythm after the hero (light) and about (paper-soft). Five cards on a
   --night-2 surface float slightly above the --night section background;
   gold is reserved for the hover/focus state so it reads as an active
   accent rather than decoration. Cards are plain <article>s (not links)
   — the only focusable element per card is the small circular "→"
   affordance, so :focus-within lets keyboard users trigger the identical
   hover state by tabbing to it, without making the whole card a giant
   ambiguous hit target.
========================================================================== */
.services__head{
  max-width:44rem;
  margin-inline:auto;
  margin-block-end:clamp(2.5rem,6vw,4rem);
  text-align:center;
}
.services__head .eyebrow{justify-content:center;}
.services__head .section-title{margin-block-end:.6em;}

.services__intro{
  font-size:var(--step-1);
  color:rgba(237,236,232,.74);
}

.services__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(1.25rem,3vw,2rem);
}

.service-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:clamp(1.75rem,3vw,2.25rem);
  background:var(--night-2);
  border:1px solid rgba(237,236,232,.09);
  border-radius:var(--radius-lg);
  transition:transform .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
/* :focus-within (not :focus) because the focusable element is the
   __link affordance nested inside this non-interactive <article>. */
.service-card:hover,
.service-card:focus-within{
  transform:translateY(-6px);
  border-color:rgba(198,164,92,.5);
  box-shadow:0 0 0 1px rgba(198,164,92,.22), 0 24px 44px rgba(0,0,0,.32), 0 0 34px rgba(198,164,92,.16);
}

.service-card__icon{
  width:2.5rem;
  height:2.5rem;
  margin-block-end:1.25rem;
  color:#EDECE8;
  opacity:.82;
  transition:color .35s var(--ease-out), opacity .35s var(--ease-out);
}
.service-card:hover .service-card__icon,
.service-card:focus-within .service-card__icon{
  color:var(--gold-bright);
  opacity:1;
}

.service-card__title{
  margin-block-end:.5em;
  font-size:var(--step-1);
  font-weight:600;
  color:#EDECE8;
}

.service-card__desc{
  flex:1;
  margin-block-end:1.5em;
  color:rgba(237,236,232,.72);
}

/* Circular affordance: the card's only focusable element. Sits at the
   bottom of the flex column (flex:1 on __desc above pushes it there
   regardless of how long each card's blurb is), so all five affordances
   line up on a shared baseline across the grid. */
.service-card__link{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.75rem;
  height:2.75rem;
  border:1px solid rgba(237,236,232,.2);
  border-radius:999px;
  color:#EDECE8;
  text-decoration:none;
  transition:border-color .35s var(--ease-out), background-color .35s var(--ease-out), color .35s var(--ease-out);
}
/* Solid --gold-bright (not --gold-grad): the gradient's dark stop only
   clears ~4.53:1 against --night for this small glyph, leaving little
   margin. --gold-bright is a flat ~11.6:1 against --night, giving the
   arrow a comfortable AA cushion while keeping the same hover lift/glow. */
.service-card:hover .service-card__link,
.service-card:focus-within .service-card__link{
  background:var(--gold-bright);
  border-color:transparent;
  color:var(--night);
}
.service-card__arrow{
  display:inline-block;
  transition:transform .35s var(--ease-out);
}
.service-card:hover .service-card__arrow,
.service-card:focus-within .service-card__arrow{
  transform:translateX(3px);
}

/* =======================================================================
   Why Trinity (Task 9) — light (paper) band directly after the dark
   Services section, restoring the light/dark/light rhythm (Contact,
   Task 10, goes dark again). Four value props read as a quiet feature
   band rather than boxed cards: each is marked by a short gold accent
   segment sitting on a full-width hairline, echoing .eyebrow::before
   so the same brand motif repeats instead of introducing a new one.
========================================================================== */
.why{background:var(--paper);}

.why__head{
  max-width:44rem;
  margin-inline:auto;
  margin-block-end:clamp(2.5rem,6vw,4rem);
  text-align:center;
}
.why__head .eyebrow{justify-content:center;}
.why__head .section-title{margin-block-end:.6em;}

.why__intro{
  font-size:var(--step-1);
  color:var(--ink-2);
}

.why__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(2rem,4vw,2.75rem);
}

.why-card{
  position:relative;
  padding-block-start:1.6rem;
  border-block-start:1px solid var(--line);
}
.why-card::before{
  content:"";
  position:absolute;
  inset-block-start:-1px;
  inset-inline-start:0;
  width:2.5rem;
  height:2px;
  border-radius:2px;
  background:var(--gold-grad);
}

.why-card__icon{
  width:2.25rem;
  height:2.25rem;
  margin-block:1.1rem .9rem;
  color:var(--gold-deep);
}

.why-card__title{
  margin-block-end:.5em;
  font-size:var(--step-1);
  font-weight:600;
  color:var(--ink);
}

.why-card__desc{color:var(--ink-2);}

/* =======================================================================
   Customers by sector (Task 9) — paper-soft band, one shade softer than
   Why's plain paper, before Contact (Task 10) returns to dark. Three
   sector cards reuse the About stat-card treatment (a paper card
   floating on a paper-soft section, with the brand's thin-line
   triangular mark bleeding off one corner) but read as a duotone
   gray→gold hairline rather than solid gold, since here the mark is
   background texture behind three distinct external sectors, not a
   single internal stat.
========================================================================== */
.customers{background:var(--paper-soft);}

.customers__head{
  max-width:46rem;
  margin-inline:auto;
  margin-block-end:clamp(2.5rem,6vw,4rem);
  text-align:center;
}
.customers__head .eyebrow{justify-content:center;}
.customers__head .section-title{margin-block-end:.6em;}

.customers__intro{
  font-size:var(--step-1);
  color:var(--ink-2);
}

.customers__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(1.5rem,3vw,2.25rem);
}

.sector-card{
  position:relative;
  overflow:hidden;
  padding:clamp(1.75rem,3vw,2.25rem);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
/* :hover only — sector cards have no focusable child (plain <article>
   with no link/button inside), so a :focus-within pairing here would be
   dead CSS implying a keyboard-parity affordance that doesn't exist. */
.sector-card:hover{
  transform:translateY(-6px);
  border-color:rgba(198,164,92,.45);
  box-shadow:var(--shadow-lg);
}

.sector-card__mark{
  position:absolute;
  inset-block-start:-12%;
  inset-inline-end:-18%;
  width:58%;
  pointer-events:none;
}
.sector-card__mark-line{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.sector-card__mark-line--gray{stroke:var(--ink-2);stroke-opacity:.12;}
.sector-card__mark-line--gold{stroke:var(--gold);stroke-opacity:.4;}

.sector-card__icon{
  position:relative;
  width:2.5rem;
  height:2.5rem;
  margin-block-end:1.25rem;
  color:var(--gold-deep);
}

.sector-card__title{
  position:relative;
  margin-block-end:.5em;
  font-size:var(--step-1);
  font-weight:600;
  color:var(--ink);
}

.sector-card__desc{
  position:relative;
  color:var(--ink-2);
}

/* =======================================================================
   Visual band (Task 13) — a single royalty-free (Unsplash-license) photo
   used purely as a decorative transition between the paper-soft Customers
   band and the dark Contact section below. No text is ever overlaid on
   this element (it's aria-hidden with an alt="" image), so it carries
   zero AA-contrast risk by construction. Grayscale + a dark/gold diagonal
   wash keep it reading as brand duotone rather than a stock photo.
========================================================================== */
.visual-band{
  position:relative;
  overflow:hidden;
  height:clamp(200px,26vw,340px);
  border-block:1px solid rgba(198,164,92,.25);
}
.visual-band__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
  filter:grayscale(1) contrast(1.08) brightness(.62);
}
.visual-band::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,rgba(22,24,28,.82) 0%,rgba(22,24,28,.5) 48%,rgba(198,164,92,.22) 100%);
}

/* =======================================================================
   Contact / closing CTA (Task 10) — back to dark after the paper-soft
   Customers band, completing the light/dark/light/light/dark rhythm.
   The faint triangular mark in the background bookends the hero's
   opening motif (same geometry, ghost opacity) so the page visually
   closes the loop it opened with. The contact card floats on --night-2
   like the Services cards, with two click targets big enough for
   thumbs: the whole label+value pair is the tap/click area, not just
   the number/address text.
========================================================================== */
.contact{position:relative;overflow:hidden;}

.contact__bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.contact__bg svg{width:100%;height:100%;display:block;}
.contact__bg-line{fill:none;stroke:var(--gold);stroke-opacity:.14;stroke-width:1.2;}

/* Photographic accent (Task 13), painted under the gold hairline SVG so
   the lines stay the crisp topmost layer. The radial vignette keeps the
   entire centered text column (.contact__head, max-width 40rem, i.e. the
   middle ~53% of the section at most) sitting on 100% solid --night —
   identical to the pre-photo background — so .contact__lead's existing
   AA contrast against --night is mathematically unchanged; the photo
   only becomes visible toward the section's outer edges/corners. */
.contact__photo-wrap{position:absolute;inset:0;overflow:hidden;}
.contact__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.42);
}
.contact__photo-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(65% 90% at 50% 38%,
    var(--night) 0%, var(--night) 58%,
    rgba(22,24,28,.65) 78%,
    rgba(198,164,92,.14) 100%);
}

.contact__inner{position:relative;z-index:1;}

.contact__head{
  position:relative;
  max-width:40rem;
  margin-inline:auto;
  margin-block-end:clamp(2.5rem,6vw,3.5rem);
  text-align:center;
}
/* Guaranteed-solid scrim behind the headline/lead (Task 14). The vignette
   above sizes its opaque zone as a percentage of the whole section, which
   can't guarantee coverage once a long/wrapped headline's box approaches
   the section's full width at narrow viewports (~360px). This scrim is
   sized off .contact__head itself instead, so it always tracks the text
   column exactly; the blurred box-shadow gives it a soft edge that blends
   into the vignette rather than reading as a hard panel. */
.contact__head::before{
  content:"";
  position:absolute;
  inset:-1rem -1.25rem;
  z-index:-1;
  background:var(--night);
  box-shadow:0 0 3rem 2.5rem var(--night);
  border-radius:var(--radius-lg);
}
.contact__head .eyebrow{justify-content:center;}
.contact__head .section-title{margin-block-end:.6em;}

.contact__lead{
  font-size:var(--step-1);
  color:rgba(237,236,232,.78);
}

.contact__card{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center;
  max-width:50rem;
  margin-inline:auto;
  padding:clamp(.5rem,1.5vw,.75rem);
  background:var(--night-2);
  border:1px solid rgba(198,164,92,.22);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 48px rgba(0,0,0,.35);
}

.contact__item{
  display:flex;
  align-items:center;
  gap:1rem;
  flex:1 1 260px;
  padding:clamp(1.1rem,2.5vw,1.5rem);
  border-radius:var(--radius);
  color:#EDECE8;
  text-decoration:none;
  transition:background-color .3s var(--ease-out);
}
.contact__item:hover,
.contact__item:focus-visible{background:rgba(255,255,255,.06);}

.contact__icon{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3rem;
  height:3rem;
  border-radius:999px;
  background:rgba(198,164,92,.14);
  color:var(--gold-bright);
  transition:background-color .3s var(--ease-out);
}
.contact__icon svg{width:1.4rem;height:1.4rem;}
.contact__item:hover .contact__icon,
.contact__item:focus-visible .contact__icon{background:rgba(198,164,92,.26);}

.contact__text{
  display:flex;
  flex-direction:column;
  gap:.25em;
  min-width:0;
}
.contact__label{
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(237,236,232,.62);
}
.contact__value{
  font-family:var(--font-head);
  font-size:var(--step-1);
  font-weight:500;
  overflow-wrap:anywhere;
}

.contact__divider{
  flex:none;
  width:1px;
  align-self:stretch;
  margin-block:.5rem;
  background:rgba(237,236,232,.14);
}

@media (max-width:640px){
  .contact__card{flex-direction:column;}
  .contact__divider{display:none;}
}

/* =======================================================================
   Footer (Task 10) — condensed nav, contact line, and legal links on the
   same --night ground as Contact, separated by a hairline gold border
   rather than a hard color break so the two dark sections still read as
   one confident closing block. Group titles are small-caps <p> labels,
   not headings, so the footer doesn't add a phantom heading level after
   the page's real content outline (h1 hero > h2 per section) has ended.
========================================================================== */
.site-footer{
  background:var(--night);
  color:rgba(237,236,232,.8);
  border-block-start:1px solid rgba(198,164,92,.18);
}

.footer__inner{
  display:grid;
  grid-template-columns:1.3fr repeat(3,1fr);
  gap:clamp(2rem,5vw,3rem);
  padding-block:clamp(3rem,7vw,4.5rem);
}

.footer__logo{margin-block-end:1rem;}
.footer__brand .brand__name{color:#EDECE8;}
.footer__brand .brand__name-sub{color:rgba(237,236,232,.6);}

.footer__tagline{
  max-width:22rem;
  color:rgba(237,236,232,.62);
}

.footer__col-title{
  margin-block-end:1.1em;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-bright);
}

.footer__nav ul,
.footer__legal ul{
  display:flex;
  flex-direction:column;
  gap:.75em;
}

.footer__contact p{margin-block-end:.6em;}

.footer__nav a,
.footer__legal a,
.footer__contact a{
  color:rgba(237,236,232,.8);
  text-decoration:none;
  transition:color .25s var(--ease-out);
}
/* The email address is alone in its own <p> with no surrounding words to
   break before it (unlike the legal-prose mentions of the same address),
   so at the narrowest tested width (320px) it's the one footer link that
   can genuinely overflow rather than just wrap. Same overflow-wrap
   treatment as .contact__value (Task 10) fixes it at the source instead
   of leaning on the global overflow-x:clip backstop. */
.footer__contact a{overflow-wrap:anywhere;}
.footer__nav a:hover,.footer__nav a:focus-visible,
.footer__legal a:hover,.footer__legal a:focus-visible,
.footer__contact a:hover,.footer__contact a:focus-visible{color:var(--gold-bright);}

.footer__bottom{border-block-start:1px solid rgba(237,236,232,.1);}
.footer__bottom-inner{
  padding-block:1.5rem;
  font-size:.875rem;
  color:rgba(237,236,232,.55);
}

@media (max-width:820px){
  .footer__inner{grid-template-columns:repeat(2,1fr);}
  .footer__brand{grid-column:1 / -1;}
}
@media (max-width:520px){
  .footer__inner{grid-template-columns:1fr;}
}

/* =======================================================================
   Cookie-consent banner (Task 11) — a small, non-modal fixed bar on
   --night with a hairline gold accent, sitting above everything else
   (z-index higher than the header) but never trapping focus or blocking
   the page: it's a footer-style notice, not a gate. `[hidden]` starts
   it out of the a11y tree and off the render path; JS then flips
   `hidden` off and adds `.is-visible` on the next frame so the
   translateY/opacity transition has somewhere to animate from. Under
   prefers-reduced-motion, base.css §6 collapses transition-duration to
   .01ms globally, so the slide is skipped but `transitionend` still
   fires — the accept flow still hides the banner correctly.
========================================================================== */
.cookie-banner{
  position:fixed;
  inset-inline:0;
  inset-block-end:0;
  z-index:200;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.75rem 2rem;
  padding:1.1rem clamp(1.1rem,4vw,3rem);
  background:var(--night-2);
  color:rgba(237,236,232,.82);
  border-block-start:1px solid rgba(198,164,92,.3);
  box-shadow:0 -12px 30px rgba(0,0,0,.25);
  transform:translateY(100%);
  opacity:0;
  transition:transform .45s var(--ease-out), opacity .4s var(--ease-out);
}
.cookie-banner[hidden]{display:none;}
.cookie-banner.is-visible{
  transform:translateY(0);
  opacity:1;
}

.cookie-banner__text{
  flex:1 1 22rem;
  max-width:52rem;
  margin:0;
  font-size:.9375rem;
}

.cookie-banner__actions{
  display:flex;
  flex:none;
  align-items:center;
  gap:.85rem;
}
/* min-height (Task 14): the smaller font-size/padding here otherwise
   computes to a ~34px box, under the 44px touch-target minimum; .btn's
   own flex centering (display:inline-flex;align-items:center) keeps the
   compact-looking label centered inside the taller hit area. */
.cookie-banner .btn{padding:.7em 1.6em;font-size:.875rem;min-height:44px;}
.cookie-banner .btn--ghost{
  color:#EDECE8;
  border-color:rgba(237,236,232,.35);
}
.cookie-banner .btn--ghost:hover,
.cookie-banner .btn--ghost:focus-visible{
  border-color:var(--gold-bright);
  background:rgba(255,255,255,.06);
}

@media (max-width:640px){
  .cookie-banner{justify-content:flex-start;text-align:start;}
  .cookie-banner__actions{width:100%;justify-content:flex-end;}
}

/* =======================================================================
   Legal pages (Task 12) — Terms, Privacy, Cookies. These pages carry no
   new visual identity of their own: they borrow the site's existing
   type scale, spacing, and paper background, and stay quiet on purpose
   so the reading experience — not the chrome — is the focus. The only
   layout decision unique to this template is a single narrow prose
   column (~72ch), sized for comfortable line length rather than the
   wide grids used elsewhere on the site.
========================================================================== */
.legal{background:var(--paper);}

.legal__crumb{
  max-width:72ch;
  margin-inline:auto;
  margin-block-end:clamp(2rem,5vw,3rem);
}
.legal__crumb a{
  display:inline-flex;
  align-items:center;
  font-size:.9375rem;
  font-weight:600;
  color:var(--ink-2);
  text-decoration:none;
  transition:color .25s var(--ease-out);
}
.legal__crumb a:hover,
.legal__crumb a:focus-visible{color:var(--gold-deep);}

.legal__head{
  max-width:72ch;
  margin-inline:auto;
  margin-block-end:clamp(2.5rem,6vw,3.5rem);
}
.legal__head .eyebrow{margin-block-end:1em;}
.legal__head h1{margin-block-end:.5em;}

.legal__updated{
  font-size:.9375rem;
  color:var(--ink-2);
}

.legal__prose{
  max-width:72ch;
  margin-inline:auto;
  color:var(--ink-2);
}
.legal__prose h2{
  margin-block:1.5em .6em;
  font-size:var(--step-2);
  font-weight:600;
  color:var(--ink);
}
.legal__prose > div > h2:first-child{margin-block-start:0;}
.legal__prose p,
.legal__prose ul{margin-block-end:1.1em;}
.legal__prose ul{padding-inline-start:1.3em;}
.legal__prose li{margin-block-end:.5em;}
.legal__prose strong{color:var(--ink);}
/* Defensive at narrow widths: the mailto/tel mentions sit inside longer
   sentences (so the line usually just breaks before the token), but
   overflow-wrap:anywhere guarantees the email specifically can never
   force horizontal overflow even if it lands alone on a line. */
.legal__prose a{overflow-wrap:anywhere;}

.legal__crosslinks{
  max-width:72ch;
  margin-inline:auto;
  margin-block-start:clamp(2.5rem,6vw,3.5rem);
  padding-block-start:1.75rem;
  border-block-start:1px solid var(--line);
}
.legal__crosslinks-label{
  margin-block-end:.85em;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.legal__crosslinks ul{
  display:flex;
  flex-wrap:wrap;
  gap:.5em 1.75em;
}
.legal__crosslinks a{
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  transition:color .25s var(--ease-out);
}
.legal__crosslinks a:hover,
.legal__crosslinks a:focus-visible{color:var(--gold-deep);text-decoration:underline;}

/* =======================================================================
   404 page (Task 14) — reuses the site's header/footer/cookie-banner
   chrome as-is; the only unique content is this centered "page not
   found" panel. No new visual language: paper background plus the same
   eyebrow/h1/button primitives used everywhere else, with one large
   ghost numeral (the same AA-safe --gold-shine text treatment as the
   About section's stat number) to give the page some presence without
   introducing a new motif.
========================================================================== */
.error404{
  background:var(--paper);
  min-height:calc(100dvh - var(--header-h));
  display:flex;
  align-items:center;
}
.error404__inner{
  max-width:38rem;
  margin-inline:auto;
  text-align:center;
}
.error404__code{
  margin-block-end:.25rem;
  font-family:var(--font-head);
  font-size:clamp(4rem,14vw,7rem);
  font-weight:600;
  line-height:1;
  background:var(--gold-shine);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.error404__inner .eyebrow{justify-content:center;}
.error404__inner h1{margin-block-end:.6em;}
.error404__lead{
  max-width:32rem;
  margin-inline:auto;
  margin-block-end:2em;
  font-size:var(--step-1);
  color:var(--ink-2);
}