/*! MD Visual & Construction — Coastal Clean · 2026 */

/* ─────────────────────────────────────────────────────────────
   IMPORTS & TOKENS
───────────────────────────────────────────────────────────────*/
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,900&display=swap');

:root {
  /* ── Coastal Navy + White Palette ── */
  --navy:        #0D2B4E;   /* deep navy — primary dark */
  --navy-mid:    #1A4A7A;   /* mid navy — accents */
  --navy-light:  #2C6FAA;   /* lighter navy — hover states */
  --navy-pale:   #E8F2FA;   /* very light navy tint — section bg */

  --white:       #FFFFFF;
  --off-white:   #F7FAFB;   /* subtle section alternate */
  --grey-100:    #F0F5F9;
  --grey-200:    #D6E5F0;
  --grey-400:    #8AAFC5;
  --grey-600:    #4A7A96;

  /* Semantic aliases */
  --bg:          var(--white);
  --surface:     var(--off-white);
  --text-main:   var(--navy);
  --text-muted:  var(--grey-600);
  --text-light:  var(--grey-400);
  --border:      var(--grey-200);
  --accent:      var(--navy-mid);

  /* Legacy tokens remapped to navy palette */
  --blue-bg:     var(--off-white);
  --blue-accent: var(--navy-mid);
  --blue-muted:  var(--grey-200);
  --blue-medium: var(--navy-light);
  --blue-light:  var(--navy-pale);
  --beige:       var(--off-white);
  --beige-light: var(--white);
  --beige-dark:  var(--grey-600);
  --text-on-beige: var(--navy);
  --border-beige: var(--grey-200);
  --c0: var(--white);
  --c1: var(--off-white);
  --c5: var(--navy-mid);
  --c6: var(--navy);

  /* No gold — replaced with clean navy */
  --gold:        var(--navy-mid);
  --gold-light:  var(--navy-light);
  --gold-dark:   var(--navy);

  --ff-head: 'Playfair Display', Georgia, serif;
  --ff-body: 'Inter Tight', system-ui, sans-serif;
  --nav-h: 72px;
  --gutter: clamp(16px, 4vw, 60px);
  --max: 1440px;
  --ease: cubic-bezier(.25,.46,.45,.94);
  --ease-premium: cubic-bezier(.16,1,.3,1);
  --t: .28s;
  --t-md: .55s;

  /* Shadows — light and clean */
  --shadow-sm: 0 2px 8px rgba(13,43,78,.05);
  --shadow-md: 0 8px 32px rgba(13,43,78,.08);
  --shadow-lg: 0 20px 60px rgba(13,43,78,.10);
  --shadow-xl: 0 32px 80px rgba(13,43,78,.13);
  --shadow-glow: 0 0 40px rgba(26,74,122,.12);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; overflow-x:hidden; }
body {
  font-family: var(--ff-body);
  background: var(--bg);
  color: var(--text-main);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; }

::selection { background: var(--navy); color: var(--white); }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-thumb { background: var(--navy-light); border-radius:4px; }
::-webkit-scrollbar-track { background: var(--grey-100); }

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }


/* ─── SCROLL PROGRESS BAR ────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 10001;
  background: var(--navy);
  transform-origin: left;
  transform: scaleX(0);
}


/* ─── HERO PARTICLES ─────────────────────────────────────── */
.hero-particles { display: none; }


/* ─── BACK TO TOP ────────────────────────────────────────── */
.back-to-top {
  position: fixed; bottom: 28px; left: 28px;
  z-index: 900;
  width: 48px; height: 48px;
  border: 1px solid var(--grey-200); background: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  color: var(--navy);
  opacity: 0; transform: translateY(20px);
  transition: all .4s var(--ease-premium);
}
.back-to-top.visible { opacity: 1; transform: none; }
.back-to-top:hover {
  background: var(--navy); color: var(--white);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--navy);
}
.back-to-top svg:first-child { position: relative; z-index: 1; }
.btt-progress {
  position: absolute; inset: -2px;
  width: calc(100% + 4px); height: calc(100% + 4px);
  transform: rotate(-90deg);
}
.btt-progress circle {
  fill: none; stroke: var(--navy-light);
  stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 100.5;
  stroke-dashoffset: 100.5;
  transition: stroke-dashoffset 0s;
}


/* ─── LOADER ────────────────────────────────────────────── */
.loader-bar-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--navy);
  border-radius: 2px;
  width: 0%;
  transition: width .05s linear;
}

.loader {
  position:fixed; inset:0; z-index:9999;
  background: var(--white);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease-premium), visibility .6s;
}
.loader.done { opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner { text-align:left; }
.loader-count {
  font-family:var(--ff-head);
  font-size:clamp(6rem,18vw,14rem);
  font-weight:900; line-height:1;
  color: var(--navy);
  letter-spacing:-0.04em;
  animation:count-up .9s var(--ease) forwards;
}
.loader-label {
  font-family:var(--ff-body);
  font-size:.65rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  color: var(--grey-400);
  margin-top:12px;
}
.loader-bar {
  width:100%;
  height:2px;
  background: var(--grey-200);
  margin-top:32px;
  position:relative;
  overflow:hidden;
  border-radius:2px;
}
.loader-bar::after {
  content:'';
  position:absolute; top:0; left:0; height:100%;
  background: var(--navy);
  border-radius:2px;
  animation:bar-fill .9s var(--ease) forwards;
}
@keyframes bar-fill { from{width:0} to{width:100%} }
@keyframes count-up {
  0%   { opacity:0; transform:translateY(20px); }
  100% { opacity:1; transform:none; }
}


/* ─────────────────────────────────────────────────────────────
   NAVIGATION — CLEAN WHITE
───────────────────────────────────────────────────────────────*/
.nav {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h); z-index:1000;
  border-bottom:1px solid transparent;
  transition:all var(--t-md) var(--ease);
}
.nav.scrolled {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-color: var(--grey-200);
  box-shadow: 0 1px 24px rgba(13,43,78,.06);
}
.nav-wrap {
  max-width:var(--max); margin:0 auto;
  height:100%; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
}

.nav-brand {
  display:flex; align-items:center; gap:0;
  transition: transform var(--t) var(--ease);
}
.nav-brand:hover { transform: scale(1.02); }
.nav-brand-img { height:38px; width:auto; transition: filter var(--t); }
.nav-brand-sep {
  width:1px; height:24px; background:currentColor;
  opacity:.2; margin:0 16px;
}
.nav-brand-name {
  font-family:var(--ff-body);
  font-size:.62rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  line-height:1.3;
  transition:color var(--t);
}
.nav:not(.scrolled) .nav-brand-name { color:rgba(255,255,255,.85); }
.nav.scrolled .nav-brand-name { color:var(--navy); }

.nav-links {
  display:flex; align-items:center; gap:0;
}
.nav-link {
  display:block;
  padding:10px 16px;
  font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  transition:color var(--t);
  position:relative;
}
.nav-link::after {
  content:'';
  position:absolute;
  bottom:4px; left:16px; right:16px;
  height:2px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s var(--ease-premium);
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }
.nav:not(.scrolled) .nav-link { color:rgba(255,255,255,.55); }
.nav.scrolled .nav-link { color:var(--grey-600); }
.nav-link:hover,
.nav-link.active { color:var(--navy) !important; }

.nav-cta {
  font-family:var(--ff-body);
  font-size:.65rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  padding:10px 24px;
  border:1px solid transparent;
  transition:all var(--t) var(--ease);
  position:relative;
  overflow:hidden;
}
.nav-cta::before {
  content:'';
  position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .6s var(--ease);
}
.nav-cta:hover::before { left:100%; }
.nav:not(.scrolled) .nav-cta {
  color:#fff;
  border-color:rgba(255,255,255,.3);
}
.nav:not(.scrolled) .nav-cta:hover {
  background: rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.6);
}
.nav.scrolled .nav-cta {
  background: var(--navy);
  color:#fff;
  border-color: var(--navy);
  box-shadow: 0 4px 16px rgba(13,43,78,.2);
}
.nav.scrolled .nav-cta:hover {
  background: var(--navy-mid);
  box-shadow: 0 6px 24px rgba(13,43,78,.3);
  transform: translateY(-1px);
}

/* Hamburger */
.hamburger {
  display:none; flex-direction:column;
  gap:5px; background:none; border:none; padding:4px;
}
.hamburger span { display:block; width:22px; height:1.5px; transition:var(--t); }
.nav:not(.scrolled) .hamburger span { background:#fff; }
.nav.scrolled .hamburger span { background:var(--navy); }
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }


/* ─────────────────────────────────────────────────────────────
   HERO — FULL-BLEED COASTAL
───────────────────────────────────────────────────────────────*/
.hero {
  min-height:100svh;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr auto;
  background:var(--navy);
  position:relative;
  overflow:hidden;
}
.hero::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: url('../img/lighthouse.jpg') center center / cover no-repeat !important;
  opacity: .35 !important;
}
.hero::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(to bottom, rgba(13,43,78,.55) 0%, rgba(13,43,78,.25) 40%, rgba(13,43,78,.65) 100%) !important;
  pointer-events: none !important;
}
.hero-left {
  position:relative; z-index:2;
  grid-column:1;
}
.hero-right { display:none; }
.hero-bottom { position:relative; z-index:2; grid-column:1; }

.hero-left {
  grid-row:1;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--nav-h) + 48px) 0 80px var(--gutter);
  padding-right:clamp(24px,4vw,72px);
  position:relative; z-index:2;
}

.hero-eyebrow {
  display:flex; align-items:center; gap:12px;
  margin-bottom:36px;
  opacity:0; animation:a-up .6s .2s both;
}
.hero-eyebrow-num {
  font-family:var(--ff-body);
  font-size:.6rem; font-weight:700;
  color:#fff;
  border:1px solid rgba(255,255,255,.4);
  padding:3px 8px;
  letter-spacing:.1em;
}
.hero-eyebrow-text {
  font-size:.6rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

.hero-h1 {
  font-family:var(--ff-head);
  font-size:clamp(3.6rem,7.5vw,9rem);
  font-weight:900;
  line-height:.93;
  letter-spacing:-.03em;
  color:#fff;
  margin-bottom:0;
}
.hero-h1 .line { display:block; overflow:hidden; }
.hero-h1 .line span {
  display:block;
  opacity:0;
  animation:a-slide .7s both;
}
.hero-h1 .line:nth-child(1) span { animation-delay:.3s; }
.hero-h1 .line:nth-child(2) span {
  animation-delay:.45s; font-style:italic; font-weight:400;
  color:rgba(255,255,255,.45); font-size:.72em;
}
.hero-h1 .line:nth-child(3) span {
  animation-delay:.58s;
  color: #fff;
}

.hero-meta {
  margin-top:52px;
  display:grid; grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid rgba(255,255,255,.15);
  width:fit-content;
  opacity:0; animation:a-up .6s .7s both;
}
.hero-meta-item {
  padding:20px 28px;
  border-right:1px solid rgba(255,255,255,.15);
}
.hero-meta-item:last-child { border-right:none; }
.hmi-val {
  font-family:var(--ff-head);
  font-size:1.9rem; font-weight:700;
  color:#fff; line-height:1;
  letter-spacing:-.02em; display:block;
}
.hmi-val sup { font-size:.55em; color:rgba(255,255,255,.6); vertical-align:super; letter-spacing:0; }
.hmi-key {
  font-size:.58rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.35);
  margin-top:6px; display:block;
}

/* right panel */
.hero-right {
  grid-row:1;
  position:relative;
  overflow:hidden;
  opacity:0; animation:a-fade 1s .3s both;
}
.hero-right-svg {
  position:absolute; inset:0;
  width:100%; height:100%;
}

.hero-left::after { display:none; }

/* bottom bar */
.hero-bottom {
  grid-column:1/3;
  grid-row:2;
  display:flex; align-items:stretch;
  border-top:1px solid rgba(255,255,255,.1);
  z-index:2; position:relative;
  background: rgba(13,43,78,.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero-bottom-item {
  flex:1; padding:18px 24px;
  font-size:.6rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.3);
  border-right:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:10px;
  transition:color var(--t), background var(--t);
}
.hero-bottom-item:last-child { border-right:none; }
.hero-bottom-item:hover { color:rgba(255,255,255,.85); background:rgba(255,255,255,.06); }
.hero-bottom-item::before {
  content:''; width:4px; height:4px; border-radius:50%;
  background:#fff; flex-shrink:0;
  opacity:0; transition:opacity var(--t);
}
.hero-bottom-item:hover::before { opacity:1; }

/* CTA row */
.hero-ctas {
  display:flex; align-items:center; gap:16px; margin-top:44px; flex-wrap:wrap;
  opacity:0; animation:a-up .6s .62s both;
}
.btn-red {
  font-family:var(--ff-body);
  font-size:.65rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  padding:15px 36px;
  background: var(--white);
  color: var(--navy);
  border:1px solid var(--white);
  cursor:pointer;
  transition:all .4s var(--ease-premium);
  display:inline-flex; align-items:center; gap:14px;
  white-space:nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.btn-red:hover {
  background: transparent;
  color: #fff;
  transform:translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.btn-ghost-w {
  font-family:var(--ff-body);
  font-size:.65rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  padding:14px 36px; background:transparent; color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.3); cursor:pointer;
  transition:all .4s var(--ease-premium);
  display:inline-flex; align-items:center; gap:14px;
  white-space:nowrap;
}
.btn-ghost-w:hover {
  border-color:rgba(255,255,255,.8); color:#fff;
  transform:translateY(-3px);
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}

/* Scroll cue */
.hero-scroll {
  position:absolute; right:var(--gutter); bottom:100px;
  writing-mode:vertical-rl;
  font-size:.58rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.25);
  display:flex; align-items:center; gap:12px;
  z-index:4;
  opacity:0; animation:a-fade 1s 1s both;
}
.hero-scroll::after {
  content:''; width:1px; height:52px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.5));
  animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%,100% { opacity:.4; }
  50% { opacity:1; }
}

@keyframes a-up   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
@keyframes a-fade { from{opacity:0}                            to{opacity:1} }
@keyframes a-slide{ from{opacity:0;transform:translateY(60px)} to{opacity:1;transform:none} }


/* ─────────────────────────────────────────────────────────────
   TICKER / MARQUEE
───────────────────────────────────────────────────────────────*/
.ticker {
  overflow:hidden;
  background: var(--navy);
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.05);
  position:relative;
}
.ticker-track {
  display:flex; width:max-content;
  animation:ticker 22s linear infinite;
  will-change:transform;
}
.ticker-item {
  display:flex; align-items:center; gap:24px;
  padding:0 36px; white-space:nowrap;
  font-family:var(--ff-body);
  font-size:.6rem; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.ticker-sep {
  width:4px; height:4px; border-radius:50%;
  background:rgba(255,255,255,.3); flex-shrink:0;
}
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }


/* ─────────────────────────────────────────────────────────────
   ABOUT / INTRO — CLEAN WHITE
───────────────────────────────────────────────────────────────*/
.intro {
  background: var(--white) !important;
  color: var(--navy) !important;
  padding:clamp(80px,12vw,180px) 0;
  border-bottom: 1px solid var(--grey-200);
  position:relative;
}
.intro::before { display: none; }
.intro-inner {
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:auto 1fr auto;
  gap:clamp(40px,6vw,120px);
  align-items:center;
}

.intro-year {
  font-family:var(--ff-head);
  font-size:clamp(5rem,12vw,14rem);
  font-weight:900; line-height:1;
  letter-spacing:-.04em;
  color:var(--navy);
  user-select:none;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg);
  opacity:.06;
}

.intro-body {}
.intro-label {
  font-size:.6rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--navy-mid); margin-bottom:24px;
  display:flex; align-items:center; gap:12px;
}
.intro-label::before {
  content:''; width:24px; height:2px;
  background: var(--navy);
  flex-shrink:0;
}
.intro-h2 {
  font-family:var(--ff-head);
  font-size:clamp(2.4rem,4.5vw,5.5rem);
  font-weight:700; line-height:1.05;
  letter-spacing:-.025em;
  color:var(--navy); margin-bottom:32px;
}
.intro-h2 em { font-style:italic; font-weight:400; color:var(--navy-mid); }
.intro-text {
  font-size:1.05rem; line-height:1.85;
  color:var(--text-muted); max-width:520px; margin-bottom:40px;
}
.intro-actions { display:flex; gap:14px; flex-wrap:wrap; }

.btn-ink {
  font-family:var(--ff-body);
  font-size:.65rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  padding:15px 36px;
  background: var(--navy);
  color:var(--white);
  border:1px solid var(--navy);
  transition:all .4s var(--ease-premium);
  display:inline-flex; align-items:center; gap:14px; white-space:nowrap;
  box-shadow: 0 4px 16px rgba(13,43,78,.15);
}
.btn-ink:hover {
  background: var(--navy-mid);
  border-color: var(--navy-mid);
  transform:translateY(-3px);
  box-shadow: 0 8px 28px rgba(13,43,78,.2);
}
.btn-ghost-d {
  font-family:var(--ff-body);
  font-size:.65rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  padding:14px 36px; background:transparent; color:var(--navy);
  border:1px solid var(--grey-200);
  transition:all .4s var(--ease-premium);
  display:inline-flex; align-items:center; gap:14px; white-space:nowrap;
}
.btn-ghost-d:hover {
  border-color:var(--navy); color:var(--navy);
  background: var(--navy-pale);
  transform:translateY(-3px);
}

.intro-stats {
  display:grid; grid-template-rows:repeat(4,1fr);
  gap:0; border-left:1px solid var(--grey-200);
}
.intro-stat {
  padding:20px 0 20px 28px;
  border-bottom:1px solid var(--grey-200);
  transition: background .3s var(--ease);
}
.intro-stat:last-child { border-bottom:none; }
.intro-stat:hover { background: var(--navy-pale); }
.is-num {
  font-family:var(--ff-head);
  font-size:2rem; font-weight:700;
  color:var(--navy); line-height:1; letter-spacing:-.02em;
}
.is-num span { font-size:.6em; color:var(--navy-mid); vertical-align:super; letter-spacing:0; }
.is-label {
  font-size:.6rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey-400); margin-top:5px; display:block;
}


/* ─────────────────────────────────────────────────────────────
   SERVICES — NAVY SECTION
───────────────────────────────────────────────────────────────*/
.services {
  background: var(--navy);
  padding:clamp(80px,10vw,160px) 0;
  position:relative;
}
.services::before { display: none; }

.services-head {
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter);
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:64px; flex-wrap:wrap; gap:24px;
}
.services-head-left .s-label {
  font-size:.6rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(255,255,255,.4); margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
}
.services-head-left .s-label::before {
  content:''; width:20px; height:2px;
  background: rgba(255,255,255,.3);
  flex-shrink:0;
}
.services-head-left h2 {
  font-family:var(--ff-head);
  font-size:clamp(2rem,4vw,4.5rem);
  font-weight:700; line-height:1.05; letter-spacing:-.025em;
  color:#fff !important;
}
.services-head-left h2 em {
  font-style:italic;
  font-weight:400;
  color:rgba(255,255,255,.55) !important;
  display:block;
  font-size:1.15em;
  letter-spacing:-.03em;
}
.services-head-right {
  font-size:.88rem; line-height:1.8;
  color:rgba(255,255,255,.4);
  max-width:320px;
}

.svc-list { max-width:var(--max); margin:0 auto; }

.svc-item {
  display:grid;
  grid-template-columns:72px 1fr auto;
  align-items:stretch;
  border-top:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  transition:background .4s var(--ease-premium);
  position:relative;
  overflow:hidden;
}
.svc-item:last-child { border-bottom:1px solid rgba(255,255,255,.08); }
.svc-item::after {
  content:''; position:absolute;
  bottom:0; left:0; width:100%; height:2px;
  background: #fff;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-md) var(--ease-premium);
}
.svc-item:hover { background:rgba(255,255,255,.04); }
.svc-item:hover::after { transform:scaleX(1); }

.svc-n {
  display:flex; align-items:flex-start; justify-content:center;
  padding:40px 0 40px 0;
  font-family:var(--ff-body);
  font-size:.62rem; font-weight:700;
  color:rgba(255,255,255,.3);
  letter-spacing:.1em;
  border-right:1px solid rgba(255,255,255,.08);
}
.svc-body { padding:36px var(--gutter); }
.svc-body h3 {
  font-family:var(--ff-head);
  font-size:clamp(1.4rem,2.2vw,2rem);
  font-weight:700; color:#fff;
  margin-bottom:10px;
  transition:color .4s var(--ease);
}
.svc-item:hover .svc-body h3 { color:rgba(255,255,255,.75); }
.svc-body p {
  font-size:.9rem; line-height:1.8;
  color:rgba(255,255,255,.4); max-width:600px;
}
.svc-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.svc-tag {
  font-size:.58rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.12);
  padding:4px 12px;
  transition:all .3s var(--ease);
}
.svc-item:hover .svc-tag {
  border-color:rgba(255,255,255,.4);
  color:rgba(255,255,255,.7);
}
.svc-arrow {
  padding:40px 40px 40px var(--gutter);
  display:flex; align-items:flex-start;
  color:rgba(255,255,255,.2);
  transition:all .4s var(--ease-premium);
  flex-shrink:0;
}
.svc-item:hover .svc-arrow {
  color:rgba(255,255,255,.7);
  transform:translate(4px,-4px);
}


/* ─────────────────────────────────────────────────────────────
   PROJECTS — BENTO GRID
───────────────────────────────────────────────────────────────*/
.projects {
  background: var(--off-white);
  padding:clamp(80px,10vw,160px) 0;
  position:relative;
}
.projects-head {
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter);
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:48px; flex-wrap:wrap; gap:20px;
}
.projects-head h2 {
  font-family:var(--ff-head);
  font-size:clamp(2rem,4vw,4.5rem);
  font-weight:700; line-height:1; letter-spacing:-.025em;
  color:var(--navy);
}
.projects-head h2 em { font-style:italic; font-weight:400; color:var(--navy-mid); }
.proj-count {
  font-size:.6rem; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--navy-mid);
  border:1px solid var(--grey-200);
  padding:8px 18px;
}

.proj-filter {
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter);
  display:flex; gap:0;
  width:fit-content;
  border:1px solid var(--grey-200);
  margin-bottom:40px;
  overflow:hidden;
}
.pf-btn {
  font-size:.62rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  padding:10px 28px; background:transparent;
  border:none; border-right:1px solid var(--grey-200);
  color:var(--text-muted);
  transition:all .35s var(--ease-premium);
}
.pf-btn:last-child { border-right:none; }
.pf-btn.active,.pf-btn:hover {
  background: var(--navy);
  color:var(--white);
}

/* Bento layout */
.bento {
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-auto-rows:300px;
  gap:4px;
}
.bento-card {
  background:var(--white);
  overflow:hidden; position:relative;
  cursor:pointer;
  display:flex; flex-direction:column;
  transition:all .5s var(--ease-premium);
  box-shadow: var(--shadow-sm);
}
.bento-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.bento-card--a { grid-column:span 7; grid-row:span 2; }
.bento-card--b { grid-column:span 5; grid-row:span 1; }
.bento-card--c { grid-column:span 5; grid-row:span 1; }
.bento-card--d { grid-column:span 4; grid-row:span 1; }
.bento-card--e { grid-column:span 4; grid-row:span 1; }
.bento-card--f { grid-column:span 4; grid-row:span 1; }

.bento-img {
  width:100%; overflow:hidden;
  position:relative;
  flex:1; min-height:0;
}
.bento-img img {
  width:100%; height:100%;
  display:block;
  object-fit:cover;
  transition:transform .8s var(--ease-premium);
}
.bento-card:hover .bento-img img { transform:scale(1.06); }

.bento-cat {
  position:absolute; top:0; right:0;
  background: var(--navy);
  color:#fff;
  font-size:.55rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  padding:6px 14px;
}

.bento-info {
  padding:20px 22px 22px;
  border-top:2px solid var(--grey-200);
  transition:border-color .4s var(--ease-premium);
}
.bento-card:hover .bento-info { border-color:var(--navy); }
.bento-info h3 {
  font-family:var(--ff-head);
  font-weight:700; color:var(--navy);
  margin-bottom:6px;
  transition:color var(--t);
}
.bento-card--a .bento-info h3 { font-size:1.4rem; }
.bento-card--b .bento-info h3,
.bento-card--c .bento-info h3 { font-size:1.1rem; }
.bento-card--d .bento-info h3,
.bento-card--e .bento-info h3,
.bento-card--f .bento-info h3 { font-size:1rem; }
.bento-card:hover .bento-info h3 { color:var(--navy-mid); }
.bento-info p {
  font-size:.8rem; line-height:1.7; color:var(--text-muted);
  margin-bottom:12px;
}
.bento-meta { display:flex; gap:6px; flex-wrap:wrap; }
.bento-tag {
  font-size:.56rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted); border:1px solid var(--grey-200); padding:3px 10px;
  transition:all .3s var(--ease);
}
.bento-card:hover .bento-tag {
  border-color:var(--navy);
  color:var(--navy);
}

.proj-cta {
  max-width:var(--max); margin:56px auto 0;
  padding:0 var(--gutter);
  display:flex; justify-content:center;
}


/* ─────────────────────────────────────────────────────────────
   PROCESS
───────────────────────────────────────────────────────────────*/
.process {
  background: var(--white);
  border-top:1px solid var(--grey-200);
  padding:clamp(80px,10vw,160px) 0;
  position:relative;
}
.process-head {
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter);
  margin-bottom:72px;
}
.process-label {
  font-size:.6rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--navy-mid); margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
}
.process-label::before {
  content:''; width:24px; height:2px;
  background: var(--navy);
}
.process-head h2 {
  font-family:var(--ff-head);
  font-size:clamp(2rem,4vw,4.5rem);
  font-weight:700; line-height:1; letter-spacing:-.025em;
  color:var(--navy);
}

.process-rail {
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  position:relative;
}
.process-rail::before {
  content:''; position:absolute;
  top:24px; left:calc(var(--gutter) + 24px); right:calc(var(--gutter) + 24px);
  height:1px;
  background: var(--grey-200);
  z-index:0;
}
.pstep { padding:0 24px 0 0; position:relative; z-index:1; }
.pstep-node {
  width:48px; height:48px;
  border:2px solid var(--grey-200);
  background:var(--white);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:28px;
  font-family:var(--ff-head); font-size:.8rem; font-weight:700;
  color:var(--text-muted);
  transition:all .4s var(--ease-premium);
  position:relative; z-index:1;
}
.pstep:hover .pstep-node {
  border-color:var(--navy);
  background: var(--navy);
  color:#fff;
  box-shadow: 0 4px 20px rgba(13,43,78,.2);
  transform: scale(1.1);
}
.pstep h3 {
  font-family:var(--ff-head);
  font-size:1.1rem; font-weight:700;
  color:var(--navy); margin-bottom:10px;
}
.pstep p {
  font-size:.82rem; line-height:1.75; color:var(--text-muted);
}
.pstep-num {
  position:absolute; top:-10px; right:0;
  font-family:var(--ff-body);
  font-size:.55rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  background: var(--navy);
  color:#fff;
  padding:3px 8px;
  opacity:0; transition:opacity var(--t);
}
.pstep:hover .pstep-num { opacity:1; }

/* Process prose */
.process-prose {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.process-lead {
  font-family: var(--ff-head);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.7;
  color: var(--navy);
  letter-spacing: -.01em;
  margin-bottom: 36px;
}
.process-prose-divider {
  width: 60px;
  height: 2px;
  background: var(--navy);
  opacity: .2;
  margin: 0 auto 36px;
}
.process-prose p:not(.process-lead) {
  font-size: 1rem;
  line-height: 1.95;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.process-prose p:last-child { margin-bottom: 0; }


/* ─────────────────────────────────────────────────────────────
   TESTIMONIAL
───────────────────────────────────────────────────────────────*/
.testimonial {
  background: var(--off-white);
  padding:clamp(80px,10vw,160px) 0;
  position:relative;
}
.testimonial::before {
  content:'';
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:60px; height:3px;
  background: var(--navy);
}
.testimonial-inner {
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(40px,6vw,100px); align-items:center;
}
.t-index {
  font-family:var(--ff-head);
  font-size:clamp(8rem,16vw,18rem);
  font-weight:900; line-height:1;
  color: var(--grey-200);
  letter-spacing:-.04em;
  user-select:none;
}
.t-body {}
.t-label {
  font-size:.6rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--navy-mid); margin-bottom:28px;
  display:flex; align-items:center; gap:12px;
}
.t-label::before {
  content:''; width:20px; height:2px;
  background: var(--navy);
}
.t-quote {
  font-family:var(--ff-head);
  font-size:clamp(1.3rem,2.5vw,2.1rem);
  font-style:italic; font-weight:400;
  line-height:1.55; color:var(--navy);
  margin-bottom:40px;
}
.t-author { display:flex; align-items:center; gap:18px; }
.t-avatar {
  width:52px; height:52px;
  border:2px solid var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-head); font-size:.9rem; font-weight:700;
  color:var(--navy); flex-shrink:0;
  background: var(--navy-pale);
}
.t-author-name {
  font-family:var(--ff-head);
  font-size:.95rem; font-weight:700; color:var(--navy); display:block;
}
.t-author-role {
  font-size:.78rem; color:var(--text-muted); display:block; margin-top:2px;
}
.t-stars { margin-left:auto; color:var(--navy-mid); letter-spacing:4px; font-size:.85rem; }
.t-nav { display:flex; gap:10px; margin-top:36px; }
.t-dot {
  width:6px; height:6px; border-radius:100px;
  background:var(--grey-200); border:none;
  cursor:pointer; transition:all .4s var(--ease-premium);
}
.t-dot.active { width:40px; background: var(--navy); }
.t-slide { display:none; animation:a-fade .45s both; }
.t-slide.active { display:block; }


/* ─────────────────────────────────────────────────────────────
   TEAM
───────────────────────────────────────────────────────────────*/
.team {
  background: var(--white);
  padding:clamp(80px,10vw,160px) 0;
  border-top:1px solid var(--grey-200);
}
.team-head {
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter);
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:56px; flex-wrap:wrap; gap:20px;
}
.team-head h2 {
  font-family:var(--ff-head);
  font-size:clamp(2rem,4vw,4.5rem);
  font-weight:700; line-height:1; letter-spacing:-.025em;
  color:var(--navy);
}
.team-head h2 em { font-style:italic; font-weight:400; color:var(--navy-mid); }
.team-label {
  font-size:.6rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--navy-mid); margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
}
.team-label::before {
  content:''; width:20px; height:2px;
  background: var(--navy);
}
.team-grid {
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; border:1px solid var(--grey-200);
}
.tcard {
  padding:36px 28px; border-right:1px solid var(--grey-200);
  position:relative; overflow:hidden;
  transition:all .4s var(--ease-premium);
  cursor:default;
  background:var(--white);
}
.tcard:last-child { border-right:none; }
.tcard::before {
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:3px;
  background: var(--navy);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--ease-premium);
}
.tcard:hover { background:var(--navy-pale); box-shadow: var(--shadow-md); }
.tcard:hover::before { transform:scaleY(1); }

.tcard-initials {
  font-family:var(--ff-head);
  font-size:2.2rem; font-weight:900;
  color:var(--grey-200); letter-spacing:-.04em;
  line-height:1; margin-bottom:20px;
  transition:color .4s var(--ease);
}
.tcard:hover .tcard-initials { color:var(--navy); }
.tcard-name {
  font-family:var(--ff-head);
  font-size:1.05rem; font-weight:700;
  color:var(--navy); margin-bottom:4px;
}
.tcard-role {
  font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--navy-mid); display:block; margin-bottom:14px;
}
.tcard-bio {
  font-size:.82rem; line-height:1.75;
  color:var(--text-muted); margin-bottom:20px;
}
.tcard-creds { display:flex; gap:6px; flex-wrap:wrap; }
.tcard-cred {
  font-size:.56rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--grey-200); padding:3px 8px;
  color:var(--text-muted);
  transition:all .3s var(--ease);
}
.tcard:hover .tcard-cred {
  border-color:var(--navy);
  color:var(--navy);
}


/* ─────────────────────────────────────────────────────────────
   FAQ
───────────────────────────────────────────────────────────────*/
.faq {
  background: var(--off-white);
  padding: clamp(80px,10vw,160px) 0;
  border-top: 1px solid var(--grey-200);
  position: relative;
}
.faq-head {
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--gutter);
  margin-bottom: 56px;
}
.faq-label {
  font-size: .6rem; font-weight: 700;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--navy-mid); margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px;
}
.faq-label::before {
  content: ''; width: 24px; height: 2px;
  background: var(--navy);
}
.faq-head h2 {
  font-family: var(--ff-head);
  font-size: clamp(2rem,4vw,4.5rem);
  font-weight: 700; line-height: 1; letter-spacing: -.025em;
  color: var(--navy);
}
.faq-head h2 em { font-style: italic; font-weight: 400; color: var(--navy-mid); }

.faq-list {
  max-width: 860px; margin: 0 auto;
  padding: 0 var(--gutter);
}
.faq-item {
  border-bottom: 1px solid var(--grey-200);
  position: relative;
  overflow: hidden;
  background: var(--white);
  margin-bottom: 2px;
}
.faq-item::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 0;
  background: var(--navy);
  transition: width .4s var(--ease-premium);
}
.faq-item[open]::before { width: 3px; }

.faq-q {
  font-family: var(--ff-head);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 700; color: var(--navy);
  padding: 22px 48px 22px 20px;
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center;
  transition: color .3s var(--ease);
  position: relative;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+';
  position: absolute; right: 20px;
  font-size: 1.4rem; font-weight: 300;
  color: var(--navy-mid);
  transition: transform .35s var(--ease-premium), color .3s;
  font-family: var(--ff-body);
  line-height: 1;
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); color: var(--navy); }
.faq-item[open] .faq-q { color: var(--navy-mid); }
.faq-q:hover { color: var(--navy-mid); }

.faq-a {
  padding: 0 20px 22px 20px;
  animation: a-fade .3s both;
}
.faq-a p {
  font-size: .95rem; line-height: 1.85;
  color: var(--text-muted);
}
.faq-a a { color: var(--navy-mid); text-decoration: underline; }

@media(max-width:768px) {
  .faq-head h2 { font-size: clamp(1.8rem,7vw,2.8rem); }
  .faq-q { font-size: .95rem; padding: 18px 44px 18px 16px; }
  .faq-a { padding: 0 16px 18px; }
}


/* ─────────────────────────────────────────────────────────────
   CONTACT — NAVY DARK
───────────────────────────────────────────────────────────────*/
.contact {
  background: var(--navy);
  padding:clamp(80px,10vw,160px) 0;
  position:relative;
}
.contact::before { display: none; }
.contact-inner {
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr 1.2fr;
  gap:clamp(40px,7vw,120px); align-items:start;
}
.contact-left {}
.contact-label {
  font-size:.6rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase;
  color:rgba(255,255,255,.4); margin-bottom:24px;
  display:flex; align-items:center; gap:12px;
}
.contact-label::before {
  content:''; width:20px; height:2px;
  background: rgba(255,255,255,.3);
}
.contact-left h2 {
  font-family:var(--ff-head);
  font-size:clamp(2.2rem,4.5vw,5rem);
  font-weight:700; line-height:1.0; letter-spacing:-.025em;
  color:#fff; margin-bottom:28px;
}
.contact-left h2 em { font-style:italic; font-weight:400; color:rgba(255,255,255,.4); }
.contact-desc {
  font-size:.95rem; line-height:1.85;
  color:rgba(255,255,255,.35);
  margin-bottom:44px; max-width:440px;
}
.contact-details { margin-bottom:40px; }
.contact-detail {
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 0; border-bottom:1px solid rgba(255,255,255,.07);
  transition: transform .3s var(--ease);
}
.contact-detail:hover { transform: translateX(4px); }
.contact-detail:last-child { border-bottom:none; }
.cd-icon {
  width:32px; height:32px;
  border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.5); flex-shrink:0;
  font-size:.75rem;
}
.cd-strong {
  display:block;
  font-size:.6rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.3); margin-bottom:3px;
}
.cd-val { font-size:.9rem; color:rgba(255,255,255,.6); }
.contact-certs { display:flex; flex-wrap:wrap; gap:8px; }
.cert {
  font-size:.58rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.15);
  padding:5px 14px; color:rgba(255,255,255,.5);
  transition:all .3s var(--ease);
}
.cert:hover {
  border-color:rgba(255,255,255,.4);
  color:#fff;
}

/* Form */
.contact-form {
  background:var(--white);
  padding:48px;
  box-shadow: var(--shadow-xl);
  position:relative;
}
.contact-form::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:4px;
  background: var(--navy-mid);
}
.form-title {
  font-family:var(--ff-head);
  font-size:1.4rem; font-weight:700; color:var(--navy);
  margin-bottom:32px; padding-bottom:20px;
  border-bottom:1px solid var(--grey-200);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.form-group label {
  font-size:.58rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-muted);
}
.form-group input,
.form-group select,
.form-group textarea {
  background:var(--off-white); border:1px solid var(--grey-200);
  padding:13px 16px; color:var(--text-main);
  font-family:var(--ff-body); font-size:.9rem;
  outline:none; width:100%;
  transition:all .35s var(--ease-premium);
  border-radius:0;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--grey-400); }
.form-group select option { background:#fff; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(13,43,78,.08);
  background: #fff;
}
.form-group input.error,
.form-group select.error,
.form-group textarea.error { border-color:#c0392b; }
.form-note {
  font-size:.72rem; color:var(--text-muted);
  text-align:center; margin-top:14px;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
/* Override btn-red inside the contact form to be navy */
.contact-form .btn-red {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  box-shadow: 0 4px 20px rgba(13,43,78,.2);
}
.contact-form .btn-red:hover {
  background: var(--navy-mid);
  border-color: var(--navy-mid);
  color: #fff;
  box-shadow: 0 8px 32px rgba(13,43,78,.25);
}


/* ─────────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────────────*/
.footer {
  background: var(--navy);
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-main {
  max-width:var(--max); margin:0 auto;
  padding:clamp(60px,8vw,100px) var(--gutter) 60px;
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:clamp(32px,5vw,72px);
}
.footer-brand-img { height:36px; width:auto; opacity:.5; margin-bottom:20px; }
.footer-brand p {
  font-size:.84rem; line-height:1.8;
  color:rgba(255,255,255,.3); margin-bottom:28px; max-width:240px;
}
.footer-socials { display:flex; gap:8px; }
.fsoc {
  width:34px; height:34px;
  border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:700;
  color:rgba(255,255,255,.3);
  transition:all .35s var(--ease-premium);
}
.fsoc:hover {
  border-color:rgba(255,255,255,.5);
  color:#fff;
  background: rgba(255,255,255,.08);
  transform: translateY(-2px);
}
.footer-col h5 {
  font-size:.58rem; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.4); margin-bottom:20px;
}
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col a {
  font-size:.82rem; color:rgba(255,255,255,.3);
  transition:all .3s var(--ease);
}
.footer-col a:hover { color:#fff; transform: translateX(4px); display:inline-block; }
.footer-col li { font-size:.82rem; color:rgba(255,255,255,.25); }

.footer-bottom {
  max-width:var(--max); margin:0 auto;
  padding:20px var(--gutter);
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.footer-bottom p,
.footer-legal a {
  font-size:.72rem; color:rgba(255,255,255,.25);
}
.footer-legal { display:flex; gap:20px; }
.footer-legal a:hover { color:rgba(255,255,255,.7); }


/* ─────────────────────────────────────────────────────────────
   TOAST
───────────────────────────────────────────────────────────────*/
.toast {
  position:fixed; bottom:28px; right:28px; z-index:9000;
  background:var(--white); border:1px solid var(--grey-200);
  border-left:4px solid var(--navy);
  padding:16px 22px;
  font-family:var(--ff-body); font-size:.85rem; color:var(--text-main);
  display:flex; align-items:center; gap:12px;
  box-shadow: var(--shadow-lg);
  transform:translateX(calc(100% + 40px));
  transition:transform .5s var(--ease-premium);
  max-width:340px;
}
.toast svg { color:var(--navy); flex-shrink:0; }
.toast.show { transform:none; }


/* ─────────────────────────────────────────────────────────────
   REVEAL
───────────────────────────────────────────────────────────────*/
[data-reveal] {
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease-premium), transform .9s var(--ease-premium);
}
[data-reveal].visible { opacity:1; transform:none; }


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────*/

/* ── TABLET (≤1100px) ─────────────────────────────────────── */
@media(max-width:1100px) {
  .hero { grid-template-columns:1fr; }
  .hero-left::after { display:none; }
  .hero-right { display:none; }
  .hero-bottom { grid-column:1; flex-wrap:wrap; }
  .hero-bottom-item { min-width:50%; }
  .hero-scroll { display:none; }

  .intro-inner { grid-template-columns:1fr; gap:40px; }
  .intro::before { display:none; }
  .intro-year { writing-mode:horizontal-tb; transform:none; font-size:4rem; }
  .intro-stats {
    grid-template-rows:auto;
    grid-template-columns:repeat(2,1fr);
    border:1px solid var(--grey-200); border-left:none;
  }
  .intro-stat { border-right:1px solid var(--grey-200); border-bottom:none; padding:16px; }
  .intro-stat:nth-child(2n) { border-right:none; }

  .bento { grid-template-columns:repeat(6,1fr); grid-auto-rows:260px; }
  .bento-card--a { grid-column:span 6; grid-row:span 1; }
  .bento-card--b,.bento-card--c { grid-column:span 3; }
  .bento-card--d,.bento-card--e,.bento-card--f { grid-column:span 2; }

  .team-grid { grid-template-columns:1fr 1fr; }
  .tcard:nth-child(2) { border-right:none; }
  .tcard:nth-child(3) { border-top:1px solid var(--grey-200); border-right:1px solid var(--grey-200); }
  .tcard:nth-child(4) { border-top:1px solid var(--grey-200); }

  .contact-inner { grid-template-columns:1fr; gap:52px; }
  .footer-main { grid-template-columns:1fr 1fr; gap:36px; }

  .process-rail { grid-template-columns:1fr 1fr; gap:0; }
  .process-rail::before { display:none; }
  .pstep { padding:0 24px 40px 0; border-bottom:1px solid var(--grey-200); }
  .pstep:nth-last-child(-n+2) { border-bottom:none; }
}

/* ── MOBILE (≤768px) ──────────────────────────────────────── */
@media(max-width:768px) {
  :root { --nav-h:60px; --gutter:20px; }

  .nav-cta-wrap { display:flex; align-items:center; gap:14px; }
  .nav-links { display:flex; align-items:center; gap:0; }
  .nav-links {
    position:fixed; top:var(--nav-h); left:0; right:0;
    background:rgba(255,255,255,.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom:1px solid var(--grey-200);
    flex-direction:column; padding:20px var(--gutter); gap:0;
    transform:translateY(-110%); opacity:0;
    transition:transform var(--t-md) var(--ease-premium), opacity var(--t-md);
    pointer-events:none; visibility:hidden; z-index:999;
  }
  .nav-links.open { transform:none; opacity:1; pointer-events:auto; visibility:visible; }
  .nav:not(.scrolled) .nav-link,
  .nav.scrolled .nav-link { color:var(--text-muted); }
  .nav-link { padding:13px 0; border-bottom:1px solid var(--grey-200); width:100%; font-size:.75rem; }
  .nav-link::after { display:none; }
  .nav-link:last-child { border-bottom:none; }
  .hamburger { display:flex; }
  .nav-cta-wrap { display:flex; }
  .nav-cta-wrap .nav-cta { display:none; }

  .hero-left {
    padding: calc(var(--nav-h) + 32px) var(--gutter) 52px;
    justify-content:flex-end;
  }
  .hero-eyebrow { margin-bottom:24px; flex-wrap:wrap; }
  .hero-eyebrow-text { font-size:.55rem; letter-spacing:.18em; }
  .hero-h1 { font-size:clamp(2.8rem,11vw,4.5rem); }
  .hero-h1 .line:nth-child(2) span { font-size:.75em; }
  .hero-ctas {
    flex-direction:column; align-items:flex-start;
    gap:12px; margin-top:32px;
  }
  .btn-red, .btn-ghost-w { width:100%; justify-content:center; padding:14px 24px; }
  .hero-meta {
    margin-top:36px; width:100%;
    grid-template-columns:1fr 1fr;
  }
  .hero-meta-item { padding:16px; }
  .hero-bottom { display:none; }

  .intro { padding:60px 0; }
  .intro-inner { grid-template-columns:1fr; gap:36px; padding:0 var(--gutter); }
  .intro-year { display:none; }
  .intro-h2 { font-size:clamp(2rem,8vw,3rem); }
  .intro-text { font-size:.95rem; }
  .intro-actions { flex-direction:column; gap:10px; }
  .btn-ink, .btn-ghost-d { width:100%; justify-content:center; }
  .intro-stats {
    grid-template-columns:1fr 1fr;
    border:1px solid var(--grey-200); border-left:1px solid var(--grey-200);
  }
  .intro-stat { padding:16px; border-right:1px solid var(--grey-200); border-bottom:1px solid var(--grey-200); }
  .intro-stat:nth-child(2n) { border-right:none; }
  .intro-stat:nth-last-child(-n+2) { border-bottom:none; }

  .services { padding:60px 0; }
  .services-head { flex-direction:column; align-items:flex-start; margin-bottom:40px; gap:16px; }
  .services-head-right { max-width:100%; font-size:.82rem; }
  .svc-item { grid-template-columns:44px 1fr; }
  .svc-arrow { display:none; }
  .svc-n { padding:24px 0; font-size:.55rem; }
  .svc-body { padding:24px 16px; }
  .svc-body h3 { font-size:1.15rem; }
  .svc-body p { font-size:.82rem; }

  .projects { padding:60px 0; }
  .projects-head { flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:28px; }
  .bento { grid-template-columns:1fr; gap:2px; grid-auto-rows:260px; }
  .bento-card--a,.bento-card--b,.bento-card--c,
  .bento-card--d,.bento-card--e,.bento-card--f { grid-column:span 1; grid-row:span 1; }
  .bento-card:hover { transform:none; }
  .proj-cta { margin-top:36px; }
  .proj-cta .btn-ink { width:100%; justify-content:center; }

  .process { padding:60px 0; }
  .process-head { margin-bottom:44px; }
  .process-head h2 { font-size:clamp(1.8rem,7vw,2.8rem); }
  .process-rail { grid-template-columns:1fr; }
  .process-rail::before { display:none; }
  .pstep { padding:0 0 32px; border-bottom:1px solid var(--grey-200); border-right:none; }
  .pstep:last-child { padding-bottom:0; border-bottom:none; }

  .testimonial-inner { grid-template-columns:1fr; gap:24px; }
  .t-index { font-size:4rem; writing-mode:horizontal-tb; }
  .t-quote { font-size:clamp(1.1rem,4vw,1.4rem); }
  .t-author { flex-wrap:wrap; gap:12px; }
  .t-stars { margin-left:0; }

  .contact-inner { grid-template-columns:1fr; gap:40px; }
  .contact-form { padding:28px 20px; }
  .form-row { grid-template-columns:1fr; gap:0; }

  .footer-main { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; text-align:center; }
}

/* ── SMALL MOBILE (≤480px) ───────────────────────────────── */
@media(max-width:480px) {
  .hero-h1 { font-size:clamp(2.4rem,10vw,3.5rem); }
  .hero-meta { grid-template-columns:1fr 1fr; }
  .hmi-val { font-size:1.3rem; }
  .hmi-key { font-size:.5rem; }

  .intro-stats { grid-template-columns:1fr 1fr; }
  .is-num { font-size:1.6rem; }

  .team-grid { grid-template-columns:1fr; }

  .footer-main { grid-template-columns:1fr; }
  .footer-col { padding-top:20px; border-top:1px solid rgba(255,255,255,.06); }

  .contact-form { padding:20px 16px; }
  .hero-meta { grid-template-columns:1fr; }
}