/* Components */
@import url('components/mobile-nav.css');

/* ==========================================================================
   SRK Theme – app.css (production)
   ========================================================================== */


/* ===== Global tokens ===== */
:root{
  /* Brand + base */
  --bg: #0b0b0b;
  --fg: #f4f4f4;
  --mint: #ABF0D3;         /* brand mint */

  /* Layout */
  --site-max: 1440px;      /* overall site width (artboard) */
  --site-gutter: 24px;     /* left/right padding inside container */

  /* Spacing scale */
  --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px;

  /* Transitions */
  --theme-transition-duration: 0.4s;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
html, body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--fg);
  font: 400 16px/1.6 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color:var(--mint); text-decoration:none; }

/* Content container (1440px artboard) */
.container{
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
  box-sizing: content-box; /* gutters sit inside without shrinking content width */
}

/* Generic sections (container lives inside each section) */
.section{ padding-block: var(--space-7); }

/* Headings */
.h1{ font-weight:700; font-size: clamp(36px, 4.5vw, 56px); line-height:1.1; margin:0 0 var(--space-4); color:var(--mint); }
.h2{ font-weight:700; font-size: clamp(24px, 3.5vw, 40px); line-height:1.15; margin:0 0 var(--space-3); color:var(--mint); }

/* Utilities */
.richtext p{ margin: 0 0 var(--space-3); }
.richtext ul{ margin: 0 0 var(--space-3) 1.25rem; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===== Buttons ===== */
:root{
  --btn-font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --btn-font-weight: 500;            /* Inter Medium */
  --btn-font-size: 16px;
  --btn-text: #1E1E1E;
  --btn-bg: #ABF0D3;                 /* brand mint */
  --btn-bg-hover: #9FEFD7;           /* subtle hover tint */
  --btn-bg-active: #8FE9CE;          /* subtle active tint */
  --btn-radius: 8px;                 /* slightly rounded corners */
  --btn-min-w: 132px;                /* figma min width */
  --btn-min-h: 47px;                 /* figma height target */
  --btn-pad-x: 20px;                 /* horizontal padding */
  --btn-pad-y: 12px;                 /* vertical padding (works with min-height) */
  --btn-focus: #1E1E1E;              /* focus ring color */
}

.btn{
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--btn-min-w);
  min-height: var(--btn-min-h);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-family: var(--btn-font-family);
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}

/* Primary (mint) */
.btn--primary{
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-bg);
}

/* States */
.btn:hover{ transform: translateY(-1px); }
.btn--primary:hover{ background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn--primary:active{ transform: translateY(0); background: var(--btn-bg-active); border-color: var(--btn-bg-active); }

.btn[disabled], .btn.is-disabled{
  opacity: .6; cursor: not-allowed; pointer-events: none;
}

/* Focus visibility */
.btn:focus-visible{
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

/* Size variants (optional) */
.btn--lg{ padding: calc(var(--btn-pad-y) + 2px) calc(var(--btn-pad-x) + 6px); }
.btn--sm{ min-height: 40px; padding: 8px 14px; font-size: 14px; }



/* Header overlays the hero; doesn’t push layout down */
.site-header{
  position: fixed;          /* stays at top on scroll (change to absolute if you only want it over hero) */
  top: 0;
  left: 0;
  right: 0;
  padding: 16px var(--site-gutter);
  z-index: 1000;
  background: transparent;  /* keep clear over hero */
}

/* If you ever re-enable the admin bar, offset safely */
body.admin-bar .site-header{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .site-header{ top: 46px; }
}

/* Ensure the hero starts at the very top and isn’t pushed by generic section spacing */
.hero{ margin-top: 0 !important; padding-top: 0 !important; }
.section.hero{ padding-top: 0 !important; }  /* if hero also has .section class */

/* Remove any accidental top margin on the first element in main */
main > *:first-child{ margin-top: 0; }

/* ==========================================================================
   HEADER / NAVIGATION 
   ========================================================================== */

   /* ===== HEADER HARD OVERRIDES (force true centering) ===== *
/* Keep the brand column in layout even when visually hidden */

.site-header .brand{
  display: block !important;   /* override any older display:none */
  justify-self: start;
  line-height: 0;
  visibility: hidden;          /* hide on hero */
  opacity: 0;
  pointer-events: none;
  min-width: 140px;            /* reserve space even with no logo image */
}
.brand__img{ height: 40px; width: auto; display: block; }
.brand__img--mobile{ display: none; }

/* Center the desktop menu in the middle column */
.primary-nav{
  justify-self: center !important;
}
.primary-nav .menu{
  display: flex; align-items: center; gap: 28px;
  margin: 0; padding: 0; list-style: none;
}
.primary-nav .menu > li{ list-style: none; }
.primary-nav .menu > li > a{
  display: inline-block; color: var(--mint); font-weight: 700; line-height: 1;
  padding: 8px 2px; text-decoration: none;
}
.primary-nav .menu > li > a:hover{ text-decoration: underline; }

/* Mobile: show brand + toggle, hide desktop menu */
.nav-toggle{
  justify-self: end;
  display: none; appearance: none; background: transparent; border: 0;
  width: 40px; height: 40px; position: relative;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:""; position:absolute; left:50%; width:22px; height:2px; background:var(--mint);
  transform:translateX(-50%);
}
.nav-toggle__bars{ top:50%; transform:translate(-50%,-50%); }
.nav-toggle__bars::before{ top:-7px; }
.nav-toggle__bars::after{  top: 7px; }

@media (max-width:1023px){
  .nav-toggle{ display:inline-flex; }
  .primary-nav{ display:none !important; }
  .site-header .nav-bar{ grid-template-columns: auto 1fr auto !important; }
  .site-header .brand{
    visibility: visible; opacity: 1; pointer-events: auto; min-width: auto;
  }
}

:root{
  --header-blur: 8px;                       /* tweak strength */
  --header-bg: rgba(0,0,0,.38);             /* tint behind blur */
  --header-border: rgba(171,240,211,.16);   /* subtle mint line */
}

/* Smooth transition into/out of blur */
.site-header{
  transition: background .28s ease, backdrop-filter .28s ease, -webkit-backdrop-filter .28s ease, border-color .28s ease;
}

/* When scrolled */
body.has-stuck:not(.is-mobile-nav-open) .site-header{
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(var(--header-blur));
  backdrop-filter: blur(var(--header-blur));
  border-bottom: 1px solid var(--header-border);
}

/* Fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  body.has-stuck:not(.is-mobile-nav-open) .site-header{
    background: rgba(0,0,0,.62);  /* a bit more solid if no blur */
    border-bottom: 1px solid var(--header-border);
  }
}

/* Stuck state: show brand, push nav right */
.has-stuck .site-header .nav-bar{ grid-template-columns: auto 1fr auto !important; }
.has-stuck .site-header .brand{
  visibility: visible; opacity: 1; pointer-events: auto;
}
.has-stuck .primary-nav{ justify-self: end !important; }

/* Keep the page from horizontally bleeding due to 100vw sections */
/*html, body{ overflow-x: hidden; } */

/* Smooth scroll + offset so anchors aren't hidden under header */
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
[id]{ scroll-margin-top: calc(var(--header-h-desktop, 80px) + 12px); }
@media (max-width:1023px){
  [id]{ scroll-margin-top: calc(var(--header-h-mobile, 64px) + 12px); }
}

/* ===== NAV TYPO & MEASUREMENT PATCH (spec) ===== */
:root{
  /* Header height per comp (−10%) */
  --header-h-desktop: calc(116px * .9);  /* ≈ 104px */
  --header-h-mobile:  calc(64px * .9);   /* ≈ 58px; define if not already set */

  /* Tweakable spacing between nav items (acts like “auto” in Figma) */
  --nav-gap: clamp(18px, 4vw, 40px);
}


/* Header bar — canonical base rule */
.site-header .nav-bar{
  max-width: var(--site-max, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 24px);
  padding-block: 0;                     /* avoid inflating the 116px bar */
  min-height: var(--header-h-desktop);  /* H = 116 */
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important; /* center nav */
  align-items: center;
  column-gap: 16px;
}

/* Primary menu: Helvetica Regular 16, mint, –0.5% letterspacing ≈ –0.08px */
.primary-nav .menu{
  display: flex; align-items: center;
  gap: var(--nav-gap);
  margin: 0; padding: 0; list-style: none;
}
.primary-nav .menu > li{ list-style: none; }
.primary-nav .menu > li > a{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;              /* Regular */
  font-size: 16px;
  letter-spacing: -0.08px;       /* ≈ -0.5% at 16px */
  line-height: 1;                /* tight, per comp */
  color: #ABF0D3;                /* mint */
  text-decoration: none;
  padding: 8px 2px;              /* small click padding */
}
.primary-nav .menu > li > a:hover{ text-decoration: underline; }

/* Desktop: keep nav truly centered on load (grid version already applied) */
.site-header .nav-bar{ display: grid; grid-template-columns: 1fr auto 1fr; }
.primary-nav{ justify-self: center; }

/* Stuck state: logo shows left, nav shifts right */
.has-stuck .site-header .nav-bar{ grid-template-columns: auto 1fr auto; }
.has-stuck .primary-nav{ justify-self: end; }

/* Mobile keeps earlier behavior */
@media (max-width:1023px){
  .site-header .nav-bar{ min-height: var(--header-h-mobile, 64px); grid-template-columns: auto 1fr auto; }
  .primary-nav{ display: none; }
}

/* ===== Header sticky sizes (spec) ===== */
.has-stuck .brand__img{
  width: 144px;
  height: 56px;       /* exact as requested */
}
.has-stuck .primary-nav .menu > li > a{
  line-height: 23px;  /* target visual height for the nav row */

  /* ===== Header transition polish ===== */

/* Subtle bg when stuck (tweak opacity/blur to taste) */
.site-header{
  transition: background .28s ease, backdrop-filter .28s ease;
}
.has-stuck .site-header{
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(4px);
}

/* Brand fades/slides in; keeps space reserved */
.site-header .brand{
  display: block !important;
  justify-self: start;
  min-width: 144px;                 /* reserve column width */
  height: 56px;                     /* matches your spec */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.has-stuck .site-header .brand{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Let JS animate the nav position smoothly */
.primary-nav{
  will-change: transform;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
}

/* Keep your stuck sizes */
.has-stuck .brand__img{ width:144px; height:56px; }
.has-stuck .primary-nav .menu > li > a{ line-height:23px; }

}

.site-header .brand{
  opacity: 0; transform: translateY(-6px);
  transition: opacity .28s ease, transform .28s ease;
}
.has-stuck .site-header .brand{
  opacity: 1; transform: none;
}

/* ===== Mobile header tweaks ===== */
@media (max-width: 1023px){
  /* Hide site icon on mobile for now */
  .site-header .brand{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Two-column grid: [toggle] [spacer] */
  .site-header .nav-bar{
    grid-template-columns: auto 1fr !important;
  }

  /* Move toggle left + size 36×36 */
  .nav-toggle{
    display: inline-flex;
    grid-column: 1;
    justify-self: start;
    width: 36px; height: 36px;
    padding: 0; border: 0; background: transparent;
  }
  .nav-toggle__icon{
    width: 36px; height: 36px; display: block;
  }

  /* Kill any old hamburger bar visuals */
  .nav-toggle__bars{ display: none !important; }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after{ display: none !important; }

  /* Desktop menu stays hidden on mobile */
  .primary-nav{ display: none !important; }
}

/* ==========================================================================
   HERO (comp 1488 × 931 → clamp height to 931 on desktop)
   ========================================================================== */
.hero {
  --hero-h-desktop: 931px;
  --hero-h-mobile: 560px; /* tweak as needed */
  position: relative;
  padding: 0;
}

.hero > .container { position: relative; }

.hero__media {
  position: relative;
  height: var(--hero-h-desktop);
  overflow: hidden;
  z-index: 0;
}

.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark overlay sits over the image */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Content stack centered over media+overlay */
.hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 64px 20px;
  z-index: 2; /* above overlay */
}

/* ===== HERO LOGO (centered overlay layer) =====
   Full-bleed click-through wrapper so the logo image sits centered */
.hero__inner .hero__logo {
  position: absolute;
  inset: 0;                 /* fill hero bounds */
  display: grid;
  place-items: center;      /* center the child <img> */
  z-index: 2;               /* beneath inline CTA (z-index 3) */
  pointer-events: none;     /* allow clicks to pass through */
}

/* Image sizing: 723×(auto) cap on desktop, fluid downscale on mobile */
.hero__inner .hero__logo-img {
  display: block;
  width: min(723px, 80vw);
  max-width: 100%;
  height: auto;
  aspect-ratio: 723 / 232;
  object-fit: contain;
}

/* ===== CTA INLINE (sits below the logo, scales naturally) ===== */
.hero__cta-inline {
  position: relative;
  z-index: 3; /* above logo wrapper */
  margin-top: clamp(12px, 2.5vw, 24px);
}

/* Headline / subhead */
.hero__headline { font-size: clamp(28px, 4vw, 56px); margin: 0; }
.hero__subhead  { max-width: 780px; margin: 0 auto; }

/* ===== Responsive ===== */
@media (max-width: 1023px) {
  .hero__media { height: var(--hero-h-mobile); }
}

@media (max-width: 767px) {
  .hero__inner .hero__logo-img {
    width: min(560px, 78vw);
  }
}

/* ===== Removals/overrides from older rules ===== */
/* Kill the old absolute CTA block if it exists */
.hero__cta { position: static; left: auto; bottom: auto; transform: none; z-index: auto; }

/* Ensure no legacy width cap fights the logo sizing */
.hero__logo { max-width: none; height: auto; }

/* === Fix: place CTA below logo by making logo part of normal flow === */
.hero__inner .hero__logo {
  position: static;     /* was absolute */
  inset: auto;          /* undo fill */
  display: block;       /* no grid overlay */
  pointer-events: auto; /* normal behavior */
  z-index: auto;        /* let stacking be natural */
}

/* Keep the image sizing as-is */
.hero__inner .hero__logo-img {
  display: block;
  width: min(723px, 80vw);
  max-width: 100%;
  height: auto;
  aspect-ratio: 723 / 232;
  object-fit: contain;
}

/* Optional: a little breathing room between logo and button */
.hero__cta-inline {
  margin-top: clamp(12px, 2.5vw, 24px);
  z-index: auto; /* no need to float above the logo now */
}



/* ==========================================================================
   ABOUT (content area 1204 × 492 inside container, 2-col)
   ========================================================================== */
.about{ background:#0f0f0f; }
.about > .container{
  /* inner frame 1204px wide centered */
  max-width: 1204px;
  margin-inline:auto;
}
.about__grid{
  display:grid; gap: var(--space-6);
  grid-template-columns: 1fr; align-items:center;
  min-height: 492px;            /* comp height */
}

/* About: two-column spec */
.about{
  background: #0f0f0f;
  color: #D9D9D9;
}
.about .about__wrap{
  /* match comp container: 1204px wide inside your site frame */
  max-width: 1204px;
  margin-inline: auto;
  padding-inline: var(--site-gutter, 24px);
}
.about .about__grid{
  display: grid;
  grid-template-columns: 1fr 1fr; /* left = title, right = body */
  align-items: center;
  column-gap: clamp(24px, 4vw, 64px);
}

/* Left column: "About ⏎ SRK" — Helvetica Bold 128, mint, left aligned */
.about__title{
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 128px;
  line-height: 1.15;
  color: #ABF0D3;
  text-align: left;
}

/* Right column: body — Helvetica Regular 36, muted, center aligned */
.about__body{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.6;
  color: #D9D9D9;
  text-align: left;
}
.about__body p{ margin: 0 0 1rem; 
}

/* === ABOUT: mobile tuning (scoped + consolidated) === */

.about{
  /* knobs you can tweak (inline per-page if needed) */
  --about-gap-m: 8px;     /* row gap between title & body on mobile */
  --about-pad-m: 20px;    /* section vertical padding on mobile */
  --about-body-mt: 2px;   /* extra top margin on body on mobile */
}

@media (max-width: 900px){
  .about .about__grid{
    grid-template-columns: 1fr;     /* collapse to single column */
    gap: 0;                         /* reset any global gap */
    row-gap: var(--about-gap-m);    /* controlled spacing */
    min-height: auto;               /* remove desktop constraint */
    align-items: start;             /* avoid vertical stretching */
  }

  .about .about__wrap{
    padding-block: var(--about-pad-m); /* mobile vertical padding */
  }

  .about__title{
    font-size: clamp(32px, 9vw, 128px); /* fluid title */
    line-height: 1.12;
    margin: 0;
    text-align: center;                 /* center title on mobile */
  }

  .about__body{
    font-size: clamp(16px, 3.4vw, 36px); /* fluid body */
    line-height: 1.5;
    margin-top: var(--about-body-mt);    /* micro-nudge */
    text-align: left;                    /* keep left or change to center if desired */
  }

  .about__body p{ margin: 0 0 .8rem; }
}

/* Ultra-small phones */
@media (max-width: 380px){
  .about .about__grid{ row-gap: calc(var(--about-gap-m) - 2px); }
  .about__body p{ margin-bottom: .6rem; }
}


/* ==========================================================================
   QUOTE BLOCK (comp 1440 × 500)
   ========================================================================== */
.quote-band{ position:relative; padding:0; }
.quote-band > .container{
  max-width: var(--site-max);
}
.quote-band__media{
  position:relative; overflow:hidden;
  height: 500px;               /* comp height */
}
.quote-band__media::before{
  /* Optional parallax background hook; replace var(--quote-bg) as needed */
  content:""; position:absolute; inset:0;
  background: var(--quote-bg, none);
  background-size: cover; background-position: center;
  will-change: transform; transform: translateY(var(--p, 0));
}
.quote-band__overlay{ position:absolute; inset:0; }
.quote-band__inner{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:0 20px;
}
.quote-band__inner-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.quote-band__inner-wrap .quote {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: var(--theme-transition-duration);
}

.quote-band__inner-wrap .quote.active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

.quote{ max-width: 960px; margin:0 auto; color: var(--mint); }
.quote__text{ font-size:clamp(22px,3.2vw,48px); line-height:1.3; margin:0 0 12px; }
.quote__by{
  color: #fff;                                /* byline is white */
  font-size: clamp(14px, 2.5vw, 24px);        /* fluid, smaller than quote text */
  line-height: 1.25;
  text-wrap: balance;                          /* nicer wrapping where supported */
}

@media (prefers-reduced-motion: reduce){
  .quote-band__media::before{ transform:none !important; }
}

/* ==========================================================================
   SERVICES (content frame 1295 × 807 centered)
   ========================================================================== */
.services { color: var(--mint); padding-block: 140px; }
.services + section.vibe { margin-top: 0; }

.services > .container{
  max-width: 1295px;           /* comp width */
  min-height: 407px;           /* comp height old value 807px */
  margin-inline:auto;
}

.services .h2{
  text-align: center;
  margin-bottom: 44px;
  font-size: clamp(36px, 9vw, 128pt);
  font-weight: 700;
  line-height: 1.05;
  color: var(--mint);
  letter-spacing: -0.01em;
}

/* Grid: 2 rows × 5 columns, divider system */
.services__grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 185px;       /* item box height from comp */
  align-content: center;
  justify-items: center;
  row-gap: 40px;
  margin: 0 auto;
  padding: 10px 0;
  list-style: none;
}
.services__grid > li{ list-style:none; margin:0; padding:0; }
.services__grid > li::marker{ content:none; }

/* 4 vertical dividers spanning both rows (20/40/60/80%) */
.services__grid::before{
  content: "";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(171,240,211,.35), rgba(171,240,211,.35)) 20% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(171,240,211,.35), rgba(171,240,211,.35)) 40% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(171,240,211,.35), rgba(171,240,211,.35)) 60% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(171,240,211,.35), rgba(171,240,211,.35)) 80% 0 / 1px 100% no-repeat;
}
/* Single horizontal divider between rows */
.services__grid::after{
  content:none;
  position:absolute; left:0; right:0; top:50%;
  height:1px; transform: translateY(-.5px);
  background: rgba(171,240,211,.35);
  pointer-events:none;
}

/* Service item (fixed 134 × 185 visual box) */
.service{
  width: 134px; height: 185px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 12px; text-align:center;
}

@media (hover) and (pointer: fine) {
  .service:hover .service__icon,
  .service:hover .service__icon-svg {
    transform: scale(0.9);
  }
}

.service__icon{
  width: 100%; height: 90px;
  transition: transform var(--theme-transition-duration);
}
.service__icon-img,
.service__icon svg{
  width: 100%;
  width:auto; height: inherit;
  object-fit: contain; display:block; object-position: center;
}
.service__icon svg{ color: var(--mint); fill: currentColor; stroke: currentColor; }

.service__title{
  width: 134px; max-width: 134px;
  font-weight:700; font-size:16px; line-height:1.25; color: var(--mint);
  white-space: normal; overflow-wrap: break-word; word-break: normal; text-wrap: balance;
}

/* Responsive collapse */

@media (max-width: 760px){
  .services { padding-block: 84px; }

  .services__grid{
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
    position: relative;                 /* anchor the divider */
  }

  /* kill desktop multi-line background */
  .services__grid::before{
    content: none !important;
    background: none !important;
    display: none !important;
  }

  /* single centered vertical divider */
  .services__grid::after{
    content: "" !important;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);        /* center between the two columns */
    height: 100%;                       /* <-- give it height */
    width: 0;                           /* we'll use a border for the line */
    border-left: .5px solid var(--mint); /* crisp 1px vertical line */
    z-index: 1;
    pointer-events: none;
  }

  .service__icon {
    width: 100%;
    max-width: 100px;
    position: relative;
    overflow: hidden;
  }

  .service__icon img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
}

/* ==========================================================================
   VIBE BLOCK 1 (comp 1440 × 400, parallax-ready)
   ========================================================================== */
.vibe{
  --vibe-h-desktop: 400px;   /* comp height */
  --vibe-h-mobile: 280px;    /* tweak if needed */
  --vibe-overlay-a: 0;       /* 0–1 black wash */
  --vibe-shift: 0px;         /* set by JS for parallax */

  position:relative;
  width:100%;                /* follow the 1440 container */
  height: var(--vibe-h-desktop);
  overflow:hidden;
  margin: 48px 0;
}
.vibe > .container{ position:relative; height:100%; }

@media (max-width: 1023px){
  .vibe{ height: var(--vibe-h-mobile); }
}

.vibe__media{
  position:absolute; 
  inset: -200px 0; 
  z-index: 0;
  overflow: hidden;
  transform: translateY(calc(0px - var(--vibe-shift)));
  will-change: transform;
  transition: transform .18s ease; /* mild smoothing */
}
.vibe__img{ width:100%; height: 100%; object-fit: cover; display:block; }
.vibe__overlay{ position:absolute; inset:0; background: rgba(0,0,0,var(--vibe-overlay-a)); pointer-events:none; }

.vibe__headline{
  position:relative; z-index:1; margin:0; color: var(--mint);
  font-weight:700; font-size: clamp(22px, 4vw, 40px); line-height:1.15;
  text-align:center; padding:24px 16px;
}

@media (prefers-reduced-motion: reduce){
  .vibe__media{ transform:none !important; transition:none !important; }
}

/* ==========================================================================
   WORK / FEATURED STORIES (unchanged from prior build; kept here for completeness)
   ========================================================================== */
.work{
  --work-card-w: 1100px;
  --work-card-h: 545px;
  --work-gap: 32px;
  --work-peek: 170px;         /* amount of next slide visible */
  --overlay-a: .25;            /* 25% mint overlay */
}
.work__container{ max-width: var(--site-max); margin-inline:auto; padding-inline: var(--site-gutter); }

.work__heading{
  color: var(--mint);
  margin: 0 0 20px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-size: clamp(36px, 9vw, 128pt);   /* fluid → caps at 128pt */
  text-align: left;                      /* desktop */
}

@media (max-width: 1023px){
  .work__heading{
    text-align: center;                  /* tablet/mobile center */
  }
}

.work__carousel{ overflow: visible; }
.work__viewport{
  width: calc(var(--work-card-w) + var(--work-gap) + var(--work-peek));
  height: var(--work-card-h);
  overflow-x: auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  border-radius:0; scrollbar-width:none;
}
.work__viewport::-webkit-scrollbar{ display:none; }
.work__track{ display:flex; gap:var(--work-gap); width:max-content; margin:0; padding-left:0; list-style:none; }
.work__track > li::marker{ content:none; }
.work__slide{ flex:0 0 auto; width:var(--work-card-w); scroll-snap-align:start; }
.work__card{ position:relative; width:var(--work-card-w); height:var(--work-card-h); }
.work__thumb{ position:relative; display:block; width:100%; height:100%; overflow:hidden; border-radius:0; }
.work__img{ width:100%; height:100%; object-fit:cover; display:block; }
.work__hover{ position:absolute; inset:0; background:transparent; transition:background .18s ease; }
.work__thumb:hover .work__hover{ background: rgba(171,240,211,var(--overlay-a)); }
.work__slide.is-active .work__hover{ background: rgba(171,240,211,var(--overlay-a)); }
.work__slide-title{
  position:absolute; top: var(--title-top,32px); left: var(--title-left,32px);
  margin:0; color: #fff; font-weight:700; font-size:clamp(20px,2.6vw,32px); line-height:1.2; text-transform:uppercase; text-wrap:balance;
}
.work__slide-excerpt{
  position:absolute; left:32px; right:32px; bottom:24px; margin:0;
  color:white; font-weight:400; font-size:32px; line-height:1.25;
}
.work__slide-title, .work__slide-excerpt{
  opacity:0; transform: translateY(6px); pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.work__slide.is-active .work__slide-title,
.work__slide.is-active .work__slide-excerpt{
  opacity:1; transform:none; pointer-events:auto;
}
.work__dots{
  display:flex; gap:10px; align-items:center; justify-content:flex-start;
  margin-top:14px; position:relative; z-index:10; min-height:22px;
}
.work__dot{
  appearance:none; -webkit-appearance:none;
  border:0; background:transparent; padding:0; margin:0;
  width:22px; height:22px; position:relative; cursor:pointer; line-height:0;
}
.work__dot::before{
  content:""; position:absolute; left:50%; top:50%;
  width:14.9px; height:14.9px; transform:translate(-50%,-50%);
  border-radius:9999px; background:#D9D9D9; opacity:.85;
}
.work__dot.is-active::before{ background: var(--mint); opacity:1; }
.work__dot:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }

/* tweakable offset for the Work section */
:root{
  --work-offset: 5%;
}

/* shift the title and the carousel together */
.work__heading{
  margin-left: var(--work-offset);
}


.work__carousel{
  margin-left: var(--work-offset);
  max-width: calc(100% - var(--work-offset)); /* avoid overflow */
}

/* mobile/tablet: reset to full-width */
@media (max-width: 1023px){
  .work__heading,
  .work__carousel{
    margin-left: 0;
    max-width: 100%;
  }
}

@media (max-width: 760px){
  :root{
    --work-card-w-m: 400px;
  --work-card-h-m: 400px; /* keeps same ratio */
  }

    .work {
    padding-block: 40px;  /* Reduce section padding */
  }

    .work__heading {
    margin-bottom: 16px;  /* Tighter headline spacing */
  }  

  /* Center the featured image frame on mobile */
  .work__viewport{
    width: var(--work-card-w-m);
    height: var(--work-card-h-m);
    margin-inline: auto;              /* <-- centers the frame */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }

  /* One card per view, fixed frame */
  .work__slide,
  .work__card{
    width: var(--work-card-w-m);
    height: var(--work-card-h-m);
    flex: 0 0 var(--work-card-w-m);
    scroll-snap-align: start;
  }

  /* Crop the image inside the frame */
  .work__thumb{
    width: 100%; height: 100%;
    overflow: hidden; position: relative;
  }
  .work__img{
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }

  /* Dots sit under the centered frame, left-aligned to the frame itself */
  .work__dots{
    width: var(--work-card-w-m);
    margin-top: 8px;  /* Closer to cards */
    margin: 10px auto 0;             /* centers the dots block under the frame */
    justify-content: flex-start;      /* dots align to the frame’s left edge */
  }

  .work__slide-excerpt {
    max-width: calc(90vw - 32px - 24px);
  }
}

/* =========================================
   Work — responsive typography adjustments
   ========================================= */

/* Default desktop (unchanged) */
.work__slide-excerpt{
  font-size: clamp(16px, 2.5vw, 32px);  /* scales smoothly from mobile to desktop */
  line-height: 1.3;
  color: white;
}

/* Optional: tighten spacing on smaller screens */
@media (max-width: 760px){
  .work__slide-excerpt{
    font-size: clamp(14px, 3.5vw, 24px);  /* a touch smaller for phones */
    line-height: 1.35;
  }
}

/* Space tweaks around Vibe 2 */
#vibe-2{ margin-top: 12px; margin-bottom: 1px; }
@media (max-width: 1023px){
  #vibe-2{ margin-top: 16px; margin-bottom: 36px; }
}

/* ==========================================================================
   TEAM (2 rows × 4 columns, 1295px frame)
   ========================================================================== */
.team > .container{
  max-width: 1295px;          /* match Services content frame */
  margin-inline: auto;
}

.team .h1{
  text-align: center;
  margin-bottom: 44px;
  color: #ABF0D3;
  font-weight: 700; /* Helvetica Bold look */
}

/* Grid */
.team__grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 columns */
  grid-auto-rows: 220px;                   /* card height */
  align-content: center;
  justify-items: center;
  row-gap: 40px;
  margin: 0 auto;
  padding: 16px 0;
  list-style: none;
}
.team__grid > li{ list-style: none; margin: 0; padding: 0; }
.team__grid > li::marker{ content: none; }

/* Vertical dividers (between 4 columns → 3 lines at 25/50/75%) */
.team__grid::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(171,240,211,.35), rgba(171,240,211,.35)) 25% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(171,240,211,.35), rgba(171,240,211,.35)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(171,240,211,.35), rgba(171,240,211,.35)) 75% 0 / 1px 100% no-repeat;
}

/* Horizontal divider BETWEEN the two rows — SVG only (reuse Services asset) */
.team.has-divider .team__grid::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px; /* bump to your SVG artboard height if >1px */
  background: url("../img/services-divider.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Card (180 × 220), linkable */
.team__card{
  width: 180px;
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 8px;
  color: var(--mint);
}
@media (max-width: 760px) {
  .team__card{
   width: 100%;
  }
}

.team__link-card{ text-decoration: none; }

/* Avatar circle (150 × 150) */
.team__avatar{
  width: 150px;
  min-height: 150px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06); /* subtle backdrop for empty/transparent imgs */
  transition: box-shadow var(--theme-transition-duration);
}

@media (max-width: 760px) {
.team__avatar{
    width: 120px;
    min-height: 120px;
  }
}

.team__img{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crops landscape/portrait into the circle */
  border-radius: 50%;
  display: block;
}
.team__img--placeholder{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, rgba(171,240,211,.25), rgba(171,240,211,.05) 60%),
    rgba(255,255,255,.04);
}

/* Typography */
.team__name{
  margin: 8px 0 0;
  font-weight: 700;
  font-size: 18px;
  line-height: .75;
  color: var(--mint);
}
.team__title{
  margin: 2px 0 0;
  font-weight: 700;
  font-size: 14px;
  line-height: .75;
  color: var(--mint);
  opacity: .95;
}

/* Mobile: 2 columns with a center divider */
@media (max-width: 760px){
  .team__grid{
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
  }
  /* center vertical line only */
  .team__grid::before{
    background:
      linear-gradient(rgba(171,240,211,.35), rgba(171,240,211,.35)) 50% 0 / 1px 100% no-repeat;
  }
  /* keep the horizontal divider subtle or hide if you prefer */
  .team.has-divider .team__grid::after{
    opacity: .45; /* set to 0 to hide on mobile */
  }
}

@media (hover) and (pointer: fine) {
  .team__link-card:hover .team__avatar {
    box-shadow: 0 0 0 4px var(--mint);
  }
}
/* ==========================================================================
   CONTACT CTA (full-width within 1440 container, 500px target height)
   ========================================================================== */
.contact-cta{
  position: relative;
  width: 100%;
  height: var(--contact-h-desktop, 500px);
  overflow: hidden;
  padding-block: 0;            /* no extra section padding */
}
@media (max-width: 1023px){
  .contact-cta{ height: var(--contact-h-mobile, 360px); }
}

/* Media fills the section */
.contact-cta__media{
  position: absolute; inset: 0;
  z-index: 0;
}
.contact-cta__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contact-cta__overlay{
  position: absolute; inset: 0;
  background: rgba(0,0,0,var(--contact-overlay-a, 0));
  pointer-events: none;
}

/* Centered content inside the site container */
.contact-cta__inner{
  position: relative; z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* vertical centering */
  text-align: center;
  gap: 20px;
}

/* Big mint title (target ~128px on desktop) */
.contact-cta__title{
  margin: 0;
  color: var(--mint);
  font-weight: 700;
  /* ~128px ceiling on large screens, scales down responsively */
  font-size: clamp(38px, 8.8vw, 128px);
  line-height: 1.02;
  letter-spacing: 0.01em;
}

/* Button inherits your .btn styles; minor spacing tweak */
.contact-cta__button{
  margin-top: 6px;
}

/* ==========================================================================
   CONTACT (page) — Gravity Forms #1 base reset + spacing
   ========================================================================== */

.section.contact #gform_wrapper_1 {
  /* Keep styles scoped to Contact page only */
  color: var(--mint, #ABF0D3);
  max-width: 713px;
  margin-inline: auto;
}

.section.contact #gform_wrapper_1 .gform_description { color: white; width: auto; margin-inline: -63px; }

/* Placeholder — lighter mint */
.section.contact #gform_wrapper_1 .ginput_container input::placeholder,
.section.contact #gform_wrapper_1 .ginput_container textarea::placeholder {
  color: rgba(171, 240, 211, 0.6);      /* #ABF0D3 at 60% */
}

/* Focus state: visible ring without motion */
.section.contact #gform_wrapper_1 .ginput_container input:focus,
.section.contact #gform_wrapper_1 .ginput_container textarea:focus,
.section.contact #gform_wrapper_1 .ginput_container select:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Row spacing */
.section.contact #gform_wrapper_1 .gform_fields .gfield {
  margin-bottom: 24px;
}

.section.contact #gform_wrapper_1 .gform_validation_errors {
  display: none !important;
}

/* Ensure selects render cleanly across browsers (no extra chrome) */
.section.contact #gform_wrapper_1 .ginput_container select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none; /* keep minimal for now; arrow can be styled later */
}

.section.contact .contact__image {
  margin-block: clamp(20px, 3vw, 50px);
}

.section.contact .contact__image img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .section.contact #gform_wrapper_1 .gform_description { margin-inline: 0; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background: var(--bg, #0b0b0b);
  color: #D9D9D9;
  min-height: 250px;                 /* provisional height */
  display: flex; align-items: center;
  padding-block: 24px;               /* breathing room; adjust later */
}
.site-footer .footer__inner{
  max-width: var(--site-max, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 24px);

  /* 1) More space above the logo */
  padding-top: 50px;

  text-align: center;
  display: flex; flex-direction: column; align-items: center;

  /* keep your overall row gap via a token */
  --footer-row-gap: 16px;
  gap: var(--footer-row-gap);
}

/* Row 1 — Brand icon */
.footer__brand{ line-height: 0; }
.footer__logo-img{
  width: 300px; max-width: 100%;
  height: auto; max-height: 96px;
  display: block;
}

/* Row 2 — Social icons */
.footer__social{
  display: flex; align-items: center; justify-content: center;
  gap: 20px; padding: 0; margin: 4px 0 0;
  list-style: none;
}
.footer__icon-link{
  display: inline-flex; width: 22px; height: 22px;
  color: var(--mint, #ABF0D3);       /* brand mint */
}
.footer__icon{ width: 22px; height: 22px; display: block; }

/* Row 3 — Legal links with separators */
.footer__links{
  display: inline-flex; flex-wrap: wrap; gap: 12px;
  padding: 0; margin: 0; list-style: none;        /* no extra margin */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;                 /* 145% */
  letter-spacing: -0.08px;           /* ≈ -0.5% at 16px */
  color: #D9D9D9;
}
.footer__links-item{ position: relative; }
.footer__links-item a{ color: #D9D9D9; text-decoration: none; }
.footer__links-item a:hover{ text-decoration: underline; }

/* Inject "|" separators between items via CSS (not before the first) */
.footer__links-item:not(.is-first)::before{
  content: "|";
  margin: 0 6px;
  color: #D9D9D9;
  opacity: .9;
}

/* Row 4 — Copyright + credit */
.footer__copy{
  margin: 0;                          /* no extra margin */
  font-size: 14px;
  color: #D9D9D9;
}
.footer__credit{
  color: #D9D9D9; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.footer__credit:hover{ border-bottom-color: currentColor; }

/* 2) Collapse ONLY the gap between legal links and copyright */
.footer__links + .footer__copy{
  margin-top: calc(-1 * var(--footer-row-gap));
}

/* Mobile polish */
@media (max-width: 640px){
  .footer__logo-img{ width: 220px; max-height: 72px; }
  .footer__links{ gap: 8px; font-size: 15px; }
  .footer__copy{ font-size: 13px; }
}

/*========================================================================== 
CONTACT
 ========================================================================== */
.contact{
  min-height: 60vh;              /* roomy but not a full hero */
  display: flex; align-items: center;
  text-align: center;
}
.contact__wrap{
  max-width: 840px;              /* narrow, readable */
  margin-inline: auto;
  padding-inline: var(--site-gutter, 24px);
}
.contact__title{
  margin: 0 0 12px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;              /* Bold */
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.15;
  color: #ABF0D3;                /* mint */
  text-align: center;
}
.contact__intro{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;              /* Regular */
  font-size: 16px;
  line-height: 1.6;
  color: #D9D9D9;
}
.contact__intro p{ margin: 0 0 1rem; }

/* Reserve space for fixed header on all non-home pages */
/* ================================
   TYPOGRAPHY SYSTEM — Helvetica
   ================================ */

/* Font family + tokens */
:root{
  --font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* Desktop max sizes from spec */
  --fs-hdr-max: 128px;   /* Headers (About, Services, Work, Team, Contact) */
  --fs-body-max: 36px;   /* Paragraph copy */
  --fs-sub-max: 32px;    /* Sub headers (Media Relations, Quote attribution, Featured story desc) */
  --fs-team-name-max: 24px;
  --fs-team-title-max: 20px;
  --fs-footer-max: 16px;

  /* Fluid minimums for small screens (tune if needed) */
  --fs-hdr-min: 42px;
  --fs-body-min: 16px;
  --fs-sub-min: 15px;
  --fs-team-name-min: 15px;
  --fs-team-title-min: 14px;
  --fs-footer-min: 12px;

  /* Line-heights */
  --lh-tight: 1.075;  /* display */
  --lh-title: 1.12;   /* section titles */
  --lh-body: 1.5;     /* paragraphs */
  --lh-sub: 1.35;     /* subheads / attributions */

  /* Tracking (letter-spacing) */
  --trk-tight: -0.01em;
  --trk-normal: 0;
}

/* Base font */
html, body{
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =============== Headers (About, Services, Work, Team, Contact) =============== */
/* Map to your section title selectors */
.about__title,
.services__title,
.work__title,
.team__title,
.contact__title{
  font-weight: 700; /* Bold Helvetica */
  font-size: clamp(var(--fs-hdr-min), 9vw, var(--fs-hdr-max));
  line-height: var(--lh-title);
  letter-spacing: var(--trk-tight);
  margin: 0;
}

/* =============== Paragraph Copy (About, etc) =============== */
.richtext,
.richtext p{
  font-weight: 400; /* Regular Helvetica */
  font-size: clamp(var(--fs-body-min), 2.6vw, var(--fs-body-max));
  line-height: var(--lh-body);
  letter-spacing: var(--trk-normal);
}

.richtext p{ margin: 0 0 1rem; }
.richtext p:last-child{ margin-bottom: 0; }

/* About: tighten title→copy spacing on mobile */
@media (max-width: 767px){
  /* Comment out or remove these conflicting rules:
  .about .about__grid{ row-gap: 8px; }
  .about__col--title{ margin-bottom: 0; }
  .about__col--body .about__body{ margin-top: 4px; }
  */
}

/* Extra-tight for very small phones */
@media (max-width: 380px){
  .about .about__grid{ row-gap: 6px; }
  .about__col--body .about__body{ margin-top: 2px; }
}


/* =============== Sub Header Copy =============== */
/* Use on subheads like media-relations labels, quote attributions, featured story descriptions */
.u-subhead,
.hero__subhead,
.quote__attribution,
.featured__desc{
  font-weight: 400; /* Regular Helvetica */
  font-size: clamp(var(--fs-sub-min), 2.2vw, var(--fs-sub-max));
  line-height: var(--lh-sub);
  letter-spacing: var(--trk-normal);
  margin: 0;
}

/* =============== Team =============== */
.team__name{
  font-weight: 700; /* Bold */
  font-size: clamp(var(--fs-team-name-min), 1.8vw, var(--fs-team-name-max));
  line-height: 1.25;
  letter-spacing: var(--trk-normal);
  margin: 0;
}

.team__title{
  font-weight: 400; /* Regular */
  font-size: clamp(var(--fs-team-title-min), 1.6vw, var(--fs-team-title-max));
  line-height: 1.35;
  letter-spacing: var(--trk-normal);
  margin: 2px 0 0;
  opacity: 0.9; /* subtle hierarchy */
}

/* =============== Footer =============== */
.site-footer,
.site-footer p,
.site-footer a,
.footer__legal{
  font-weight: 400;
  font-size: clamp(var(--fs-footer-min), 1.2vw, var(--fs-footer-max));
  line-height: 1.5;
  letter-spacing: var(--trk-normal);
}

/* Optional: normalize heading tags if any slip through outside the section titles */
h1, h2, h3{
  font-family: var(--font-sans);
  letter-spacing: var(--trk-tight);
}

body:not(.home) main{
  padding-top: var(--header-h-desktop, 116px);
}
@media (max-width:1023px){
  body:not(.home) main{
    padding-top: var(--header-h-mobile, 64px);
  }
}

/* Optional: non-home header gets a subtle bg for readability */
body:not(.home) .site-header{
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

/* If you’re logged in and see the WP admin bar, add this: */
body.admin-bar:not(.home) main{
  padding-top: calc(var(--header-h-desktop, 116px) + 32px);
}
@media (max-width:782px){
  body.admin-bar:not(.home) main{
    padding-top: calc(var(--header-h-mobile, 64px) + 46px); /* mobile admin bar */
  }
}

/*========================================================================== 
------- UPDATES ------
 ========================================================================== */

/*========================================================================== 
## Hot Fixes
 ========================================================================== */

#main {
  width: 100%;
  position: relative;
  overflow: hidden;
}

/*========================================================================== 
## Gravity
 ========================================================================== */

section.section.contact .gform_wrapper .gform-field-label {
  font-size: 14px;
  line-height: 1.1;
  margin: 0 0 5px 0;
  color: var(--mint, #abf0d3);
  text-align-last: left;
}

section.section.contact .gform_wrapper {
  --gf-field-gap-x: 16px;
}

@media (max-width: 639px) {
  section.section.contact .gform_wrapper {
    --gf-form-gap-y: 0;
  }
}

section.section.contact .gform_required_legend {
  display: none;
}

section.section.contact .gform_wrapper .ginput_container input:not([type="checkbox"]):not([type="radio"]),
section.section.contact .gform_wrapper .ginput_container select,
section.section.contact .gform_wrapper .ginput_container textarea {
  width: 100%;
  font-family: inherit;
  font-weight: 400;                     /* Helvetica Light */
  font-size: 14px;                      /* 24pt ≈ 32px */
  line-height: 34px;
  color: var(--mint, #ABF0D3);
  background: transparent;
  border: 1px solid var(--mint, #ABF0D3);  /* 3px mint border */
  border-radius: 6px;
  padding: 0 16px;
  height: 38px;
  box-shadow: none;
  outline: none;
  text-align: left;
  vertical-align: middle;
}

section.section.contact .gform_wrapper .ginput_container select {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23abf0d3%22%2F%3E%3C%2Fsvg%3E') !important;
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  padding-right: 40px !important;
}

section.section.contact .gform_wrapper .ginput_container select option {
  color: var(--bg);
  background-color: var(--btn-bg);
}

section.section.contact .gform_wrapper .ginput_container select option:hover {
  background-color: var(--btn-bg-hover);
}

section.section.contact .gform_wrapper .ginput_container textarea {
  padding-block: 16px;
  line-height: 1.1;
}

section.section.contact .gform_wrapper .validation_message {
  text-align-last: left;
}

section.section.contact .gform_wrapper .button {
  background-color: var(--mint, #abf0d3) !important;
  color: var(--bg) !important;
  min-width: 150px !important;
  transition: opacity var(--theme-transition-duration);
}

@media (hover) and (pointer: fine) {
  section.section.contact .gform_wrapper .button:hover {
    opacity: 0.75 !important;
  }
}

/*========================================================================== 
## Section Intro
 ========================================================================== */

.section-intro {
  width: 100%;
  position: relative;
  overflow: hidden;
  min-height: clamp(250px, 24vw, 450px);
  display: flex;
  align-items: center;
  padding-block: var(--header-h-desktop);
}

@media (max-width: 1023px) {
  .section-intro {
    padding-block: var(--header-h-mobile);
  }
}

.section-intro__background {
  position: absolute;
  inset: 0;
  font-size: 0;
  line-height: 0;
  pointer-events: none;
}

.section-intro__background img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.section-intro .container {
  position: relative;
  z-index: 1;
}

/*========================================================================== 
## Animations
 ========================================================================== */

.about {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.about__col,
.services {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 1s;
}

.about__col--title {
  transform: translateX(-100%);
}

.about__col--body {
  transform: translateX(100%);
}

.about.active .about__col,
.services.active {
  opacity: 1;
}

.about.active .about__col--title,
.about.active .about__col--body {
  transform: translateX(0%);
}

body:not(.home) #menu-main-navigation li.nav-home-page,
body.home #menu-main-navigation li.nav-inner-page {
  display: none;
}

/*========================================================================== 
## Section About
 ========================================================================== */

.section.about .richtext,
.section.about .richtext p {
  --fs-body-max: 22px;
  --fs-body-min: 16px;
}

/*========================================================================== 
## Section Team
 ========================================================================== */

.section.team h1 { font-size: clamp(36px, 9vw, 128pt); }

#wpadminbar { position: fixed; }