/* ==========================================================================
   BRIXVIA HARMONY SOLUTIONS — Design System
   Deep Teal + Refined Gold, editorial luxury
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Archivo:wght@400;500;600&display=swap');

:root{
  /* color */
  --teal-950:#012B30;
  --teal-900:#013C44;
  --teal-800:#014B55;
  --teal-700:#026371;
  --gold-600:#AD8636;
  --gold-500:#C6A050;
  --gold-300:#E3CD93;
  --ivory:#F6F1E6;
  --paper:#FBF8F1;
  --ink:#151F1B;
  --ink-soft:#4C5A54;
  --line:rgba(21,31,27,0.12);
  --line-on-dark:rgba(246,241,230,0.16);

  /* type */
  --serif: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* layout */
  --edge: clamp(20px, 6vw, 88px);
  --maxw: 1440px;
  --dur: 0.9s;
  --ease: cubic-bezier(.22,.61,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--gold-300); color:var(--teal-950); }

:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
}

/* ---------- type scale ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; margin:0; letter-spacing:-0.01em; }
.display-1{ font-size:clamp(2.6rem, 6vw, 5.4rem); line-height:1.02; font-weight:500; }
.display-2{ font-size:clamp(2.1rem, 4.4vw, 3.8rem); line-height:1.06; font-weight:500; }
.display-3{ font-size:clamp(1.7rem, 3vw, 2.6rem); line-height:1.12; font-weight:500; }
.eyebrow{
  font-family:var(--sans);
  font-size:0.78rem;
  letter-spacing:0.04em;
  color:var(--gold-600);
  font-weight:600;
}
.lede{ font-size:clamp(1.05rem,1.6vw,1.28rem); line-height:1.55; color:var(--ink-soft); max-width:38em; }
.story-manifesto p{ margin-bottom:1.3em; }
.story-manifesto em{ font-style:italic; color:var(--ink); }
.story-manifesto .sw{ opacity:0.22; transition:opacity .15s linear; }
@media (prefers-reduced-motion: reduce){
  .story-manifesto .sw{ opacity:1 !important; transition:none; }
}
p{ margin:0 0 1em; }
.max-measure{ max-width:60ch; }

.serif-italic{ font-style:italic; }

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--edge); padding-right:var(--edge); }
.section{ padding-top:clamp(64px,10vw,140px); padding-bottom:clamp(64px,10vw,140px); }
.section-tight{ padding-top:clamp(48px,6vw,88px); padding-bottom:clamp(48px,6vw,88px); }
.bg-teal{ background-color:var(--teal-900); color:var(--ivory); }
.bg-teal-950{ background-color:var(--teal-950); color:var(--ivory); }
.bg-ivory{ background-color:var(--ivory); color:var(--ink); }
.bg-paper{ background-color:var(--paper); color:var(--ink); }
.bg-teal .ink-soft, .bg-teal-950 .ink-soft{ color:rgba(246,241,230,0.68); }
.ink-soft{ color:var(--ink-soft); }

.grid-12{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(16px,2.4vw,32px); }
@media (max-width:900px){ .grid-12{ grid-template-columns:repeat(6,1fr); } }
@media (max-width:900px){
  /* Mission/Vision image + text columns (span 5 / span 7) don't divide evenly into
     the 6-column mobile grid, so pin both to full width once they stack. */
  #mission-section .grid-12 > div, #vision-section .grid-12 > div{ grid-column:1/-1 !important; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px;
  border-radius:2px;
  font-family:var(--sans); font-weight:600; font-size:0.92rem;
  border:1px solid transparent;
  transition:background var(--ease) .35s, color var(--ease) .35s, border-color var(--ease) .35s, transform var(--ease) .35s;
  white-space:nowrap;
}
.btn-gold{ background:var(--gold-500); color:var(--teal-950); }
.btn-gold:hover{ background:var(--gold-300); transform:translateY(-1px); }
.btn-line{ border-color:currentColor; color:inherit; background:transparent; }
.btn-line:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.bg-teal .btn-line, .bg-teal-950 .btn-line{ border-color:rgba(246,241,230,0.5); }
.bg-teal .btn-line:hover, .bg-teal-950 .btn-line:hover{ background:var(--ivory); color:var(--teal-950); border-color:var(--ivory); }
.btn-ghost{ color:inherit; font-weight:600; border-bottom:1px solid currentColor; padding:2px 0; border-radius:0; }
.btn-ghost:hover{ color:var(--gold-500); }

/* ---------- nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px var(--edge);
  display:flex; align-items:center; justify-content:space-between;
  transition:background var(--ease) .5s, padding var(--ease) .5s, border-color var(--ease) .5s;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(1,43,48,0.92);
  backdrop-filter:blur(10px);
  padding-top:14px; padding-bottom:14px;
  border-bottom:1px solid var(--line-on-dark);
}
.site-header, .site-header a{ color:var(--ivory); }
.wordmark{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.wordmark .wm-main{ font-family:var(--serif); font-size:1.5rem; font-weight:500; letter-spacing:0.01em; }
.wordmark .wm-sub{ font-family:var(--sans); font-size:0.62rem; letter-spacing:0.32em; color:var(--gold-300); }

.nav-desktop{ display:flex; align-items:center; gap:clamp(20px,2.6vw,44px); }
.nav-links{ display:flex; gap:clamp(18px,2.2vw,36px); }
.nav-links a{
  font-size:0.86rem; font-weight:500; position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold-500);
  transition:right var(--ease) .4s;
}
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-links a.active{ color:var(--gold-300); }

.nav-toggle{ display:none; background:none; border:0; color:var(--ivory); width:34px; height:22px; position:relative; }
.nav-toggle span{ position:absolute; left:0; right:0; height:1px; background:currentColor; transition:transform .35s var(--ease), opacity .35s; }
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:50%; transform:translateY(-50%); }
.nav-toggle span:nth-child(3){ bottom:0; }
.nav-toggle.is-open span:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ bottom:50%; transform:translateY(50%) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:99; background:var(--teal-950);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--edge);
  transform:translateY(-100%); transition:transform .55s var(--ease);
}
.mobile-nav.is-open{ transform:translateY(0); }
.mobile-nav a{ font-family:var(--serif); font-size:2.1rem; color:var(--ivory); display:block; padding:12px 0; border-bottom:1px solid var(--line-on-dark); }
.mobile-nav .btn{ margin-top:28px; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-desktop .btn{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:linear-gradient(180deg, var(--teal-950) 0%, var(--teal-900) 55%, var(--teal-800) 100%);
  color:var(--ivory); overflow:hidden;
}
.hero-texture{ position:absolute; inset:0; opacity:0.5; }
/* ---------- subtle scroll parallax on photos outside the Method/Services scroll-stacks ---------- */
.parallax-img{ transform:scale(1.15); will-change:transform; }
.parallax-drift{ will-change:transform; }
@media (prefers-reduced-motion: reduce){
  .parallax-img{ transform:none !important; }
  .parallax-drift{ transform:none !important; }
}
.hero-video, .hero-video-fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-video-fallback{ display:none; }
/* JS decides autoplay is appropriate (desktop, motion not reduced) and adds/removes this class */
.hero.video-disabled .hero-video{ display:none; }
.hero.video-disabled .hero-video-fallback{ display:block; }
.hero-inner{ position:relative; z-index:2; padding:180px var(--edge) 72px; width:100%; }
.hero-kicker{ display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.hero-kicker .rule{ width:44px; height:1px; background:var(--gold-500); }
.hero-kicker .eyebrow{ font-size:1.02rem; letter-spacing:0.06em; text-shadow:0 1px 10px rgba(1,43,48,0.6); }
.hero h1{ max-width:16em; }
.hero h1 em{ font-style:normal; color:var(--gold-300); }
.hero-foot{ display:flex; flex-wrap:wrap; gap:28px; align-items:flex-end; justify-content:space-between; margin-top:44px; }
@media (min-width:901px){ .hero-foot{ padding-right:56px; } } /* clears the vertical "SCROLL TO EXPLORE" cue at the hero's right edge */
.hero-lede{ max-width:30em; color:rgba(246,241,230,0.78); font-size:clamp(1rem,1.4vw,1.15rem); }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
.scroll-cue{ position:absolute; right:var(--edge); bottom:28px; display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2; }
.scroll-cue .stem{ width:1px; height:46px; background:rgba(246,241,230,0.4); overflow:hidden; }
.scroll-cue .stem::after{ content:""; display:block; width:100%; height:40%; background:var(--gold-500); animation:scrollcue 2.2s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ transform:translateY(-100%);} 100%{ transform:translateY(250%);} }
@keyframes heroZoom {
  from { transform:scale(1.08); }
  to { transform:scale(1.04); }
}

/* generative texture blocks (stand-in for photography) */
.art-block{
  position:relative; overflow:hidden; background:var(--teal-800);
  aspect-ratio: var(--ar, 4/5);
}
.art-block svg{ position:absolute; inset:0; width:100%; height:100%; }
.art-block .art-label{
  position:absolute; left:18px; bottom:16px; font-size:0.68rem; letter-spacing:0.05em;
  color:rgba(246,241,230,0.55); font-family:var(--sans);
}
.art-teal{ background:linear-gradient(160deg,var(--teal-700),var(--teal-950)); }
.art-ivory{ background:linear-gradient(160deg,#EFE7D3,var(--ivory)); }
.art-gold{ background:linear-gradient(160deg,var(--gold-300),var(--gold-600)); }

.founder-card{ overflow:visible; }
.founder-label{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:var(--teal-950); color:var(--ivory);
  font-family:var(--sans); font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  font-size:0.82rem; text-align:center; padding:16px 44px 16px 20px;
}
.founder-accent{
  position:absolute; right:-10px; bottom:-10px; z-index:1;
  width:34px; height:34px; background:var(--gold-500);
}

/* ---------- real photography ---------- */
.art-block img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; color:transparent; }
.art-block .art-label{ z-index:2; }
.hero-slideshow{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0; transition:opacity 1.6s var(--ease); }
.hero-photo.is-active{ opacity:1; z-index:1; animation:heroZoom 7s ease-out forwards; }
@media (prefers-reduced-motion: reduce){ .hero-photo.is-active{ animation:none; } }
.hero-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(1,43,48,0.12) 0%, rgba(1,43,48,0.3) 60%, rgba(1,43,48,0.6) 100%); }
@media (max-width:700px){
  /* a tall, narrow crop reveals more of the photo's ceiling/shadow than desktop does —
     shift the crop down to favor the well-lit room, and ease the scrim's top darkening */
  .hero-photo{ object-position:74% 62%; }
  .hero-scrim{ background:linear-gradient(180deg, rgba(1,43,48,0) 0%, rgba(1,43,48,0.28) 60%, rgba(1,43,48,0.6) 100%); }
}
.hero-inner, .scroll-cue{ z-index:2; }
.logo-icon{ height:56px; width:auto; max-width:180px; display:block; object-fit:contain; }
.wordmark-lockup{ display:flex; align-items:center; gap:12px; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ---------- philosophy ---------- */
.philosophy-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:center; }
@media (max-width:900px){ .philosophy-grid{ grid-template-columns:1fr; } }
.pillar-row{ display:grid; grid-template-columns:auto 1fr; gap:22px; padding:22px 0; border-top:1px solid var(--line); }
.pillar-row:last-child{ border-bottom:1px solid var(--line); }
.pillar-mark{ font-family:var(--serif); font-style:normal; font-size:1rem; color:var(--gold-600); padding-top:2px; }
.pillar-row h3{ font-size:1.25rem; margin-bottom:6px; }
.pillar-row p{ margin:0; color:var(--ink-soft); font-size:0.98rem; max-width:36em; }

/* ---------- reset card: second image reveals on hover, or tap on touch ---------- */
.reset-hover-card{ cursor:pointer; }
/* !important overrides the generic .art-block img.is-loaded{opacity:1} fade-in-on-load
   rule (higher specificity otherwise), so the alt image stays hidden until revealed */
.reset-hover-card .reset-img-alt{ opacity:0 !important; z-index:1; transition:opacity .6s var(--ease); }
/* real hover devices: hover alone controls the reveal, so it always returns to the base
   image the instant the pointer leaves — a stray click never leaves it "stuck" revealed */
@media (hover:hover){
  .reset-hover-card:hover .reset-img-alt{ opacity:1 !important; }
}
/* touch devices: no hover to fall back on, so tap toggles it — tap again returns to the base image */
@media (hover:none){
  .reset-hover-card.is-revealed .reset-img-alt{ opacity:1 !important; }
}

/* ---------- before/after ---------- */
.ba-wrap{ position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; border-radius:2px; cursor:ew-resize; user-select:none; background:var(--teal-950); }
.ba-after, .ba-before{ position:absolute; inset:0; width:100%; height:100%; }
.ba-after > .art-block, .ba-before > .art-block{ width:100%; height:100%; aspect-ratio:auto; }
.ba-before{ clip-path:inset(0 50% 0 0); box-shadow:1px 0 0 var(--gold-500); }
.ba-before > div{ width:100%; height:100%; }
.ba-tag{ position:absolute; top:20px; font-size:0.72rem; letter-spacing:0.08em; font-weight:600; padding:8px 14px; background:rgba(1,43,48,0.55); color:var(--ivory); backdrop-filter:blur(4px); }
.ba-tag.before-tag{ left:20px; }
.ba-tag.after-tag{ right:20px; }
.ba-wrap .art-label{ display:none; } /* ba-tag corner badges already label before/after; the two art-labels stack on top of each other otherwise */
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:0; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
}
.ba-handle::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:1px; background:var(--gold-300); }
.ba-grip{
  width:46px; height:46px; border-radius:50%; background:var(--gold-500); color:var(--teal-950);
  display:flex; align-items:center; justify-content:center; font-size:0.85rem; letter-spacing:0.02em;
  box-shadow:0 6px 24px rgba(0,0,0,0.35);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
  animation:ba-hint 2.6s ease-in-out infinite;
}
.ba-wrap:hover .ba-grip{ transform:scale(1.1); box-shadow:0 8px 30px rgba(0,0,0,0.45); }
.ba-wrap.dragging .ba-grip{ animation:none; transform:scale(1.14); }
.ba-wrap.has-interacted .ba-grip{ animation:none; }
/* auto "toggle" demo — the divider sweeps itself once on first view so it reads as slidable; smooth transition here, instant while actually dragging */
.ba-wrap.auto-demo .ba-before,
.ba-wrap.auto-demo .ba-handle{ transition:left 0.9s var(--ease), clip-path 0.9s var(--ease); }
.ba-wrap.auto-demo .ba-grip{ animation-play-state:paused; transform:scale(1.06); }
@keyframes ba-hint{
  0%, 100%{ transform:translateX(0); }
  22%{ transform:translateX(-9px); }
  44%{ transform:translateX(7px); }
  66%{ transform:translateX(-4px); }
  82%{ transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce){
  .ba-grip{ animation:none; }
}
.ba-caption{ display:flex; justify-content:space-between; gap:20px; margin-top:20px; flex-wrap:wrap; }

/* ---------- method: swipe carousel, one phase per screen ---------- */
.method-carousel{ margin-top:32px; }
.method-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; margin:0 -4px;
  /* tells the browser this element only ever pans horizontally, so a vertical-dominant touch
     gesture starting over it is handed straight to the page instead of being ambiguously
     tested against this element first — fixes the sideways stutter during vertical scroll */
  touch-action: pan-x;
}
.method-track::-webkit-scrollbar{ display:none; }
.method-card{
  flex:0 0 100%; max-width:36em; box-sizing:border-box; padding:0 4px;
  scroll-snap-align:start; min-height:clamp(230px,34vw,300px);
  display:flex; flex-direction:column; justify-content:center;
}
.method-num{ display:block; font-family:var(--serif); font-style:normal; font-size:1.2rem; color:var(--gold-500); margin-bottom:16px; }
.method-card h3{ font-size:clamp(1.9rem,3.4vw,2.7rem); color:var(--ivory); margin-bottom:16px; }
.method-card p{ color:rgba(246,241,230,0.72); font-size:1.1rem; max-width:32em; margin:0; }
.method-controls{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:32px; }
.method-arrow{
  width:44px; height:44px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-on-dark); background:transparent; color:var(--ivory); font-size:1.3rem; line-height:1;
  cursor:pointer; transition:border-color .3s var(--ease), color .3s var(--ease);
}
.method-arrow:hover{ border-color:var(--gold-500); color:var(--gold-500); }
.method-arrow:disabled{ opacity:0.3; cursor:default; pointer-events:none; }
.method-progress{ display:flex; gap:10px; }
.method-progress .dot{ width:30px; height:2px; border:none; padding:0; background:rgba(246,241,230,0.25); cursor:pointer; transition:background .4s var(--ease); }
.method-progress .dot.is-active{ background:var(--gold-500); }
@media (prefers-reduced-motion: reduce){
  .method-track{ scroll-behavior:auto; }
}

/* ---------- services ---------- */
.service-row{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(30px,5vw,80px);
  padding:clamp(40px,6vw,76px) 0; border-top:1px solid var(--line);
  align-items:center;
}
.service-row:last-child{ border-bottom:1px solid var(--line); }
.service-row:nth-child(even){ direction:rtl; }
.service-row:nth-child(even) > *{ direction:ltr; }
@media (max-width:860px){
  .service-row{ grid-template-columns:1fr; }
  .service-row:nth-child(even){ direction:ltr; }
}
.service-index{ font-family:var(--serif); font-style:italic; color:var(--gold-600); font-size:1rem; margin-bottom:14px; display:block; }
.service-row h3{ font-size:clamp(1.5rem,2.4vw,2.1rem); margin-bottom:14px; }
.service-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.service-tags span{ font-size:0.78rem; padding:7px 13px; border:1px solid var(--line); color:var(--ink-soft); }
.service-addl{
  position:relative; overflow:hidden; border-radius:2px;
  border:1px solid var(--teal-900); padding:clamp(28px,4vw,44px); padding-left:clamp(32px,4.6vw,48px); margin-top:20px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;
  box-shadow:0 30px 60px -30px rgba(1,43,48,0.55);
}
.service-addl::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--gold-500); }
.addl-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px 32px; margin-top:22px; max-width:50em; }
.addl-list li{
  position:relative; padding:8px 0 8px 20px; font-size:0.92rem;
  color:rgba(246,241,230,0.78); cursor:default;
}
.addl-list li::before{
  content:""; position:absolute; left:0; top:50%; width:8px; height:1px;
  background:var(--gold-500); transform:translateY(-50%);
}
@media (max-width:560px){ .addl-list{ grid-template-columns:1fr; } }

/* ---------- services stack: image-led, scroll-driven panels ---------- */
.service-stack{ position:relative; height:560vh; margin-top:8px; }
.service-sticky{ position:sticky; top:0; height:100svh; display:grid; align-items:center; overflow:hidden; }
.service-panel{
  grid-area:1/1; width:100%;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(32px,5vw,72px); align-items:center;
  will-change:opacity, transform;
  transition:opacity .15s linear, transform .15s linear;
}
.service-panel-media{ position:relative; overflow:hidden; border-radius:2px; aspect-ratio:4/5; background:var(--teal-800); }
.service-panel-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform; transition:transform .15s linear; }
.service-panel-text{ max-width:28em; }
.service-panel-text .service-index{ margin-bottom:18px; font-size:1.1rem; font-style:normal; }
.service-panel-text h3{ font-size:clamp(1.9rem,3vw,2.5rem); margin-bottom:16px; }
.service-panel-text p{ color:var(--ink-soft); font-size:1.08rem; max-width:26em; margin:0; }
.service-progress{ grid-area:1/1; align-self:end; display:flex; align-items:center; gap:16px; }
.service-progress-rail{ width:min(220px,30vw); height:2px; background:var(--line); position:relative; }
.service-progress-fill{ position:absolute; inset:0; width:0%; background:var(--gold-500); }
.service-progress-label{ font-family:var(--serif); font-style:normal; font-size:0.85rem; color:var(--ink-soft); white-space:nowrap; }
.service-progress-label .cur{ color:var(--gold-600); }
@media (max-width:860px){
  .service-panel{ grid-template-columns:1fr; }
  .service-panel-media{ aspect-ratio:4/3; }
}
@media (prefers-reduced-motion: reduce){
  .service-stack{ height:auto; }
  .service-sticky{ position:static; height:auto; display:block; overflow:visible; }
  .service-panel{ position:static; opacity:1 !important; transform:none !important; margin-bottom:56px; }
  .service-panel-media img{ transform:none !important; }
  .service-progress{ display:none; }
}

/* ---------- testimonial / proof ---------- */
.proof-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:900px){ .proof-grid{ grid-template-columns:1fr; } }
.proof-card{ background:var(--paper); padding:clamp(28px,3.4vw,44px); display:flex; flex-direction:column; justify-content:space-between; min-height:280px; }
.proof-quote{ font-family:var(--serif); font-size:1.2rem; line-height:1.45; font-style:normal; }
.proof-name{ margin-top:26px; font-size:0.85rem; color:var(--ink-soft); }

.stat-row{ display:flex; flex-wrap:wrap; gap:clamp(30px,5vw,80px); }
.stat{ min-width:140px; }
.stat .num{ font-family:var(--serif); font-size:clamp(2.4rem,4vw,3.6rem); color:var(--gold-500); line-height:1; }
.stat .lbl{ margin-top:10px; font-size:0.86rem; color:var(--ink-soft); }
.bg-teal .stat .lbl, .bg-teal-950 .stat .lbl{ color:rgba(246,241,230,0.6); }

/* ---------- concierge / cta ---------- */
.cta-band{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
.contact-strip{ display:flex; gap:36px; flex-wrap:wrap; margin-top:36px; }
.contact-strip a{ font-size:0.92rem; border-bottom:1px solid var(--line-on-dark); padding-bottom:4px; }
.contact-strip a:hover{ color:var(--gold-300); border-color:var(--gold-300); }

/* ---------- form ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px 28px; }
@media (max-width:760px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:0.8rem; letter-spacing:0.02em; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:1rem; padding:13px 4px; border:none; border-bottom:1px solid var(--line);
  background:transparent; color:var(--ink); border-radius:0;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold-500); outline:none; }
.field textarea{ resize:vertical; min-height:96px; }
.chip-group{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ border:1px solid var(--line); padding:9px 16px; font-size:0.86rem; cursor:pointer; transition:background .3s,color .3s,border-color .3s; }
.chip.is-active{ background:var(--teal-900); color:var(--ivory); border-color:var(--teal-900); }

.cal-trigger{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  font-family:var(--sans); font-size:1rem; padding:13px 4px; border:none; border-bottom:1px solid var(--line);
  background:transparent; color:var(--ink-soft); border-radius:0; cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.cal-trigger:hover, .cal-trigger:focus, .cal-trigger.is-open{ border-color:var(--gold-500); outline:none; }
.cal-trigger.has-value{ color:var(--ink); }
.cal-icon{ width:18px; height:18px; flex:0 0 auto; color:var(--ink-soft); }
.cal-trigger.has-value .cal-icon{ color:var(--gold-600); }

.cal-popover{ display:none; margin-top:12px; border:1px solid var(--line); padding:16px; max-width:320px; }
.cal-popover.is-open{ display:block; }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-month-label{ font-family:var(--serif); font-size:1rem; }
.cal-nav{
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:transparent; color:var(--ink); font-size:1.1rem; line-height:1;
  cursor:pointer; transition:border-color .3s var(--ease), color .3s var(--ease);
}
.cal-nav:hover{ border-color:var(--gold-500); color:var(--gold-600); }
.cal-nav:disabled{ opacity:0.3; cursor:default; pointer-events:none; }
.cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px; }
.cal-weekdays span{ text-align:center; font-size:0.62rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-cell{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-size:0.85rem;
  border:1px solid transparent; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.cal-cell:hover{ border-color:var(--gold-500); }
.cal-cell.is-active{ background:var(--teal-900); color:var(--ivory); }
.cal-cell.is-today:not(.is-active){ border-color:var(--gold-500); color:var(--gold-600); }
.cal-cell.is-disabled{ color:var(--line); cursor:default; pointer-events:none; }
.cal-cell.is-empty{ visibility:hidden; pointer-events:none; }
.cal-flex-btn{
  display:block; width:100%; margin-top:14px; padding:9px; text-align:center;
  border:1px solid var(--line); background:transparent; color:var(--ink-soft); font-size:0.82rem;
  cursor:pointer; transition:border-color .3s var(--ease), color .3s var(--ease);
}
.cal-flex-btn:hover, .cal-flex-btn.is-active{ border-color:var(--gold-500); color:var(--gold-600); }
.form-submit{ margin-top:36px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.form-note{ font-size:0.82rem; color:var(--ink-soft); }

/* ---------- footer ---------- */
.site-footer{ padding:64px var(--edge) 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:56px; border-bottom:1px solid var(--line-on-dark); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ font-family:var(--sans); font-size:0.78rem; letter-spacing:0.05em; color:var(--gold-300); margin-bottom:16px; font-weight:600; }
.footer-grid a, .footer-grid p{ font-size:0.92rem; color:rgba(246,241,230,0.72); display:block; margin-bottom:16px; }
.footer-grid a:hover{ color:var(--gold-300); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; font-size:0.78rem; color:rgba(246,241,230,0.5); }

/* ---------- misc pages ---------- */
.page-hero{ padding:170px var(--edge) 80px; background:var(--teal-900); color:var(--ivory); }
.crumbs{ font-size:0.8rem; color:var(--gold-300); margin-bottom:18px; display:flex; gap:8px; align-items:center; }
.divider{ height:1px; background:var(--line); width:100%; }
.bg-teal .divider, .bg-teal-950 .divider{ background:var(--line-on-dark); }

.value-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
@media (max-width:860px){ .value-list{ grid-template-columns:1fr; } }
.value-list .v{
  background:var(--paper); padding:34px; border:2px solid var(--teal-900); border-radius:2px;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.value-list .v:hover, .value-list .v:active{
  transform:translateY(-6px) scale(1.04);
  box-shadow:0 22px 44px -18px rgba(1,60,68,0.4);
  border-color:var(--gold-500);
}
.value-list .v:hover h4, .value-list .v:active h4{ color:var(--gold-600); }
.value-list h4{ font-family:var(--serif); font-size:1.2rem; margin-bottom:10px; }
.value-list p{ margin:0; color:var(--ink-soft); font-size:0.95rem; }

.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:860px){ .gallery-grid{ grid-template-columns:1fr; } }

/* ---------- gallery: static side-by-side before/after cards ---------- */
.gallery-item{ display:flex; flex-direction:column; }
.ba-static{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:2px; aspect-ratio:16/10; overflow:hidden; border-radius:2px; background:var(--teal-950); }
.ba-static-half{ position:relative; overflow:hidden; }
.ba-static-half img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s var(--ease); }
.ba-static-half img.is-loaded{ opacity:1; }
.ba-static-half img.img-broken{ display:none; }
.ba-static-tag{
  position:absolute; top:16px; left:16px; z-index:1;
  font-size:0.68rem; letter-spacing:0.08em; font-weight:600; padding:7px 12px;
  background:rgba(1,43,48,0.55); color:var(--ivory); backdrop-filter:blur(4px);
}
.gallery-caption{ margin-top:14px; font-size:0.85rem; color:var(--ink-soft); }

.ba-static-btn{
  display:block; width:100%; padding:0; margin:0; border:0; background:none; font:inherit; color:inherit;
  text-align:left; cursor:pointer;
}
.ba-static-half img{ transition:opacity .8s var(--ease), transform .65s var(--ease); }
.ba-static-half::after{
  content:""; position:absolute; inset:0; background:var(--gold-500); opacity:0; mix-blend-mode:overlay;
  transition:opacity .65s var(--ease); pointer-events:none;
}
/* hover-driven zoom + gold accent only on devices with real hover (mouse/trackpad) — touch gets tap-to-lightbox instead */
@media (hover:hover){
  .ba-static-btn:hover .ba-static-half img{ transform:scale(1.035); }
  .ba-static-btn:hover .ba-static-half::after{ opacity:0.1; }
}

/* ---------- lightbox: detailed before/after view ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox-backdrop{ position:absolute; inset:0; background:rgba(1,43,48,0.88); backdrop-filter:blur(6px); }
.lightbox-panel{ position:relative; z-index:1; width:100%; max-width:1100px; }
.lightbox-panel .ba-wrap{ aspect-ratio:16/10; }
.lightbox-close{
  position:fixed; top:20px; right:20px; z-index:3;
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(246,241,230,0.4);
  background:rgba(1,43,48,0.4); backdrop-filter:blur(4px); color:var(--ivory); font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.lightbox-close:hover{ background:rgba(1,43,48,0.7); border-color:var(--gold-500); }
.lightbox-caption{ margin-top:18px; color:rgba(246,241,230,0.75); font-size:0.95rem; text-align:center; }
@media (max-width:700px){ .lightbox-panel .ba-wrap{ aspect-ratio:4/5; } }

.timeline{ position:relative; padding-left:40px; }
.timeline::before{ content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:var(--line-on-dark); }
.timeline .t-item{ position:relative; padding-bottom:44px; }
.timeline .t-item::before{ content:""; position:absolute; left:-40px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--gold-500); }

.split-hero{ display:grid; grid-template-columns:1fr 1fr; min-height:80svh; }
@media (max-width:900px){ .split-hero{ grid-template-columns:1fr; } }
.split-hero .copy{ display:flex; flex-direction:column; justify-content:center; padding:120px var(--edge) 60px; }

.faq-item{ border-top:1px solid var(--line); padding:26px 0; }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{ display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer; font-family:var(--serif); font-size:1.15rem; }
.faq-q .plus{ font-size:1.4rem; color:var(--gold-600); transition:transform .35s var(--ease); flex:none; }
.faq-item.is-open .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq-a p{ padding-top:14px; color:var(--ink-soft); max-width:56ch; }

/* ==========================================================================
   MICRO-INTERACTIONS — hover states throughout
   ========================================================================== */

/* logo */
.wordmark-lockup{ transition:opacity .35s var(--ease); }
.wordmark-lockup:hover{ opacity:0.78; }

/* nav */
.mobile-nav a{ transition:color .35s var(--ease), padding-left .35s var(--ease); }
.mobile-nav a:hover{ color:var(--gold-300); padding-left:10px; }
.nav-toggle{ transition:opacity .3s var(--ease); }
.nav-toggle:hover{ opacity:0.7; }

/* photography — gentle expansion on hover, never a bounce */
.art-block{ transition:box-shadow .5s var(--ease); }
.art-block img{ transition:transform 1.2s var(--ease), opacity 0.8s var(--ease); will-change:transform; }
.art-block:hover img{ transform:scale(1.055); }
.art-block:hover{ box-shadow:0 30px 70px -30px rgba(1,43,48,0.4); }
.art-block .art-label{ transition:color .4s var(--ease), opacity .4s var(--ease); }
.art-block:hover .art-label{ color:var(--gold-300); }

/* before/after slider */
.ba-grip{ transition:transform .35s var(--ease), background .35s var(--ease); }
.ba-wrap:hover .ba-grip{ transform:scale(1.1); background:var(--gold-300); }

/* philosophy pillars */
.pillar-row{ transition:border-color .4s var(--ease), padding-left .4s var(--ease); cursor:default; }
.pillar-row:hover{ border-color:var(--gold-500); padding-left:10px; }
.pillar-row .pillar-mark{ transition:color .4s var(--ease); }
.pillar-row:hover .pillar-mark{ color:var(--gold-500); }

/* service rows */
.service-row h3, .service-row .service-index{ transition:color .4s var(--ease); }
.service-row:hover h3{ color:var(--gold-600); }
.service-addl{ transition:border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease), opacity 1s var(--ease); }
.service-addl:hover{ border-color:var(--gold-500); box-shadow:0 40px 70px -28px rgba(1,43,48,0.65); transform:translateY(-4px); }
.addl-list li{ transition:color .3s var(--ease), padding-left .3s var(--ease); }
.addl-list li::before{ transition:width .3s var(--ease), background .3s var(--ease); }
.addl-list li:hover, .addl-list li:active{ color:var(--gold-300); padding-left:28px; }
.addl-list li:hover::before, .addl-list li:active::before{ width:16px; background:var(--gold-300); }
@media (prefers-reduced-motion: reduce){
  .service-addl, .service-addl:hover, .addl-list li, .addl-list li::before{ transition:none !important; transform:none !important; }
}

/* proof / stat cards */
.proof-card{ transition:background .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease); border-left:2px solid transparent; }
.proof-card:hover{ background:var(--ivory); transform:translateY(-5px); border-left-color:var(--gold-500); }
.stat{ transition:transform .4s var(--ease); }
.stat .num{ transition:color .4s var(--ease); }
.stat:hover{ transform:translateY(-3px); }
.stat:hover .num{ color:var(--gold-300); }

/* about values */
.value-list .v{ position:relative; overflow:hidden; transition:background .4s var(--ease); cursor:default; }
.value-list .v::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--gold-500); transform:scaleY(0); transform-origin:bottom; transition:transform .45s var(--ease); }
.value-list .v:hover::before{ transform:scaleY(1); transform-origin:top; }
.value-list .v:hover{ background:var(--paper); }

/* reset timeline */
.timeline .t-item::before{ transition:transform .35s var(--ease); }
.timeline .t-item h3{ transition:color .35s var(--ease); }
.timeline .t-item:hover::before{ transform:scale(1.7); }
.timeline .t-item:hover h3{ color:var(--gold-300); }

/* faq */
.faq-q{ transition:color .35s var(--ease); }
.faq-q:hover{ color:var(--gold-600); }
.bg-teal-950 .faq-q:hover, .bg-teal .faq-q:hover{ color:var(--gold-300); }

/* form chips */
.chip{ transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease); }
.chip:hover{ border-color:var(--gold-500); transform:translateY(-2px); }
.chip.is-active:hover{ transform:none; }
.field input, .field select, .field textarea{ transition:border-color .3s var(--ease); }

/* links with directional arrows */
.contact-strip a, .btn-ghost{ display:inline-block; transition:color .35s var(--ease), transform .35s var(--ease); }
.contact-strip a:hover{ transform:translateX(4px); }
.btn-ghost:hover{ transform:translateX(3px); }

/* footer links */
.footer-grid a{ display:block; transition:color .3s var(--ease), transform .3s var(--ease); }
.footer-grid a:hover{ transform:translateX(3px); }


/* ==========================================================================
   VISUAL POLISH — image load-in, graceful fallback, stat counters
   ========================================================================== */

/* photos fade in once loaded rather than popping in */
.art-block img{ opacity:0; }
.art-block img.is-loaded{ opacity:1; }
/* a photo that fails to load (e.g. not yet supplied) disappears cleanly,
   leaving the art-block's gradient background + label as the fallback */
.art-block img.img-broken, .hero-photo.img-broken{ display:none; }

/* stat numbers count up into view rather than appearing static */
.stat .num{ font-variant-numeric:tabular-nums; }