/* =============================================================================
   WSH "Tropical Modernism" — shared stylesheet (Lovable redesign, static rebuild)
   Re-expresses the Lovable Tailwind v4 design as hand-coded semantic CSS.
   Tokens + keyframes reproduced verbatim from src/styles.css. Fonts self-hosted.
   ============================================================================= */

/* ---------- Fonts (self-hosted WOFF2; Fraunces + Inter as built) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/inter-400.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/inter-500.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/inter-600.woff2") format("woff2");}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/fraunces-400.woff2") format("woff2");}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/fraunces-400-italic.woff2") format("woff2");}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/fraunces-500.woff2") format("woff2");}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/fraunces-600.woff2") format("woff2");}

/* ---------- Brand tokens (verbatim from src/styles.css) ---------- */
:root{
  --radius:0.75rem;
  --cream:#f6f4ee;
  --ink:#1c1c1a;
  --sage:#8a9d7a;
  --sage-soft:#e6ebde;
  --rule:#e4e0d6;
  --card:#ffffff;
  --muted-foreground:#6b6b66;
  /* rgb triplets for rgba() opacity utilities */
  --ink-rgb:28,28,26;
  --cream-rgb:246,244,238;
  --sage-rgb:138,157,122;
  --font-sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --font-serif:"Fraunces",ui-serif,Georgia,serif;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
*{border-color:var(--rule);}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background-color:var(--cream);
  color:var(--ink);
  font-family:var(--font-sans);
  font-feature-settings:"ss01","ss02";
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:400;letter-spacing:-0.01em;margin:0;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:.6rem 1rem;border-radius:0 0 .5rem 0;z-index:200;}
.skip-link:focus{left:0;}
.italic{font-style:italic;}
.serif{font-family:var(--font-serif);}
.accent{color:var(--sage);}

/* ---------- Layout containers ---------- */
.wrap{margin-inline:auto;padding-inline:1.5rem;}
@media(min-width:1024px){.wrap{padding-inline:2.5rem;}}
.wrap--1400{max-width:1400px;}
.wrap--1200{max-width:1200px;}
.wrap--1100{max-width:1100px;}

/* =============================================================================
   Animations (verbatim keyframes) + reduced-motion guard
   ============================================================================= */
@keyframes turtle-swim{
  0%{transform:translate(0,0) rotate(-3deg);}
  25%{transform:translate(8px,-10px) rotate(-1deg);}
  50%{transform:translate(0,-4px) rotate(2deg);}
  75%{transform:translate(-8px,-12px) rotate(0deg);}
  100%{transform:translate(0,0) rotate(-3deg);}
}
@keyframes logo-float{
  0%{transform:translate(0,0) rotate(-2deg);}
  50%{transform:translate(0,-3px) rotate(2deg);}
  100%{transform:translate(0,0) rotate(-2deg);}
}
@keyframes turtle-flipper{0%,100%{transform:rotate(-2deg);}50%{transform:rotate(3deg);}}
@keyframes marquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.turtle-swim{animation:turtle-swim 7s ease-in-out infinite;transform-origin:center;}
.logo-float{animation:logo-float 5s ease-in-out infinite;transform-origin:center;}

/* Gary's rule: float animation on ALL Hawaiian engraving imagery, reduced-motion guarded. */
@media(prefers-reduced-motion:reduce){
  .turtle-swim,.logo-float{animation:none !important;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* =============================================================================
   Top utility bar + main nav
   ============================================================================= */
.site-head{border-bottom:1px solid var(--rule);background:var(--cream);}
.topbar{background:var(--ink);color:rgba(var(--cream-rgb),.85);}
.topbar-inner{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.5rem;font-size:12px;}
.topbar-left{display:flex;flex-wrap:nowrap;align-items:center;gap:1.25rem;white-space:nowrap;overflow-x:auto;}
.topbar-left a,.topbar-right a{display:inline-flex;align-items:center;gap:.375rem;color:inherit;transition:color .15s;}
.topbar-left a:hover,.topbar-right a:hover{color:var(--cream);}
.topbar-right{display:flex;align-items:center;gap:.75rem;color:rgba(var(--cream-rgb),.7);}
.topbar .ico{width:14px;height:14px;flex:none;}
.tb-badge{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;}
@media(max-width:860px){.topbar-addr{display:none;}.topbar-right{display:none;}}

.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.25rem;}
.nav-logo{display:block;flex-shrink:0;}
.nav-logo img{height:2.75rem;width:auto;}
@media(min-width:640px){.nav-logo img{height:3.4rem;}}
.nav-menu{display:none;align-items:center;gap:1.75rem;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(var(--ink-rgb),.75);}
@media(min-width:1024px){.nav-menu{display:flex;}}
.nav-item{position:relative;}
.nav-link{display:flex;align-items:center;gap:.25rem;padding-block:.5rem;transition:color .15s;}
.nav-link:hover{color:var(--sage);}
.nav-caret{width:.75rem;height:.75rem;transition:transform .15s;}
.nav-item:hover .nav-caret{transform:rotate(180deg);}
.dropdown{position:absolute;left:50%;top:100%;z-index:50;min-width:230px;transform:translateX(-50%);padding-top:.5rem;visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;}
.nav-item:hover .dropdown{visibility:visible;opacity:1;}
.dropdown-inner{overflow:hidden;border:1px solid var(--rule);border-radius:.75rem;background:var(--cream);box-shadow:0 20px 40px rgba(28,28,26,.12);}
.dropdown a{display:block;white-space:nowrap;padding:.75rem 1.25rem;font-size:12px;font-weight:500;text-transform:none;letter-spacing:normal;color:rgba(var(--ink-rgb),.75);transition:background .15s,color .15s;}
.dropdown a:hover{background:var(--sage-soft);color:var(--ink);}
.nav-cta{display:none;border-radius:9999px;background:var(--sage);padding:.625rem 1.25rem;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--cream);transition:background .15s;}
.nav-cta:hover{background:var(--ink);}
@media(min-width:640px){.nav-cta{display:inline-flex;align-items:center;justify-content:center;}}

/* Mobile nav */
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:0;background:transparent;padding:10px;}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s;}
@media(min-width:1024px){.nav-toggle{display:none;}}
@media(max-width:1023px){
  .nav-menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--cream);border-bottom:1px solid var(--rule);box-shadow:0 20px 40px rgba(28,28,26,.10);padding:.5rem 1.5rem 1.25rem;display:none;z-index:60;}
  .nav-menu.open{display:flex;}
  .site-head .nav{position:relative;}
  .nav-item{border-bottom:1px solid var(--rule);}
  .nav-link{justify-content:space-between;padding-block:.85rem;}
  .dropdown{position:static;transform:none;min-width:0;padding-top:0;visibility:visible;opacity:1;max-height:0;overflow:hidden;transition:max-height .2s ease;}
  .nav-item.is-open .dropdown{max-height:480px;}
  .dropdown-inner{border:0;border-radius:0;background:transparent;box-shadow:none;padding-left:.5rem;}
  .nav-item:hover .dropdown{visibility:visible;}
  .nav-caret{transition:transform .2s;}
  .nav-item.is-open .nav-caret{transform:rotate(180deg);}
}

/* =============================================================================
   Buttons
   ============================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;border-radius:9999px;padding:.75rem 1.5rem;font-size:.875rem;font-weight:500;transition:background .2s,color .2s,border-color .2s,opacity .2s;}
.btn-dark{background:var(--ink);color:var(--cream);}
.btn-dark:hover{background:var(--sage);}
.btn-outline{border:1px solid rgba(var(--ink-rgb),.2);color:var(--ink);}
.btn-outline:hover{border-color:var(--sage);color:var(--sage);}
.btn-sage{background:var(--sage);color:var(--ink);}
.btn-sage:hover{opacity:.9;}
.btn-ghost{border:1px solid rgba(var(--cream-rgb),.3);color:var(--cream);}
.btn-ghost:hover{background:rgba(var(--cream-rgb),.1);}

/* =============================================================================
   Hero
   ============================================================================= */
.hero{margin-inline:auto;max-width:1200px;padding:2rem 1.5rem 6rem;}
@media(min-width:1024px){.hero{padding:4rem 2.5rem 8rem;}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:2.5rem;}
/* mobile: force single column even when a page sets an inline 2-col grid-template on the hero (about-us, contact) */
@media(max-width:1023px){.hero-grid{grid-template-columns:minmax(0,1fr)!important;}}
@media(min-width:1024px){.hero-grid{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:4rem;}}
.hero-art{margin-inline:auto;width:100%;max-width:380px;}
@media(min-width:1024px){.hero-art{margin-inline:0;}}
.hero-art img{width:100%;filter:drop-shadow(0 20px 30px rgba(28,28,26,.08));}
.hero-caption{margin-top:1.25rem;text-align:center;font-family:var(--font-serif);font-style:italic;font-size:.875rem;line-height:1.7;color:rgba(var(--ink-rgb),.55);}
@media(min-width:1024px){.hero-caption{text-align:left;}}
.hero-caption .lead{font-style:normal;font-weight:500;letter-spacing:.02em;color:rgba(var(--ink-rgb),.7);}
/* Hero eyebrow — unified to the standard .eyebrow treatment (2026-07-04): these are <h1>s
   so they inherit the serif/mixed-case h1 defaults; force the sitewide eyebrow look
   (Inter sans, .75rem, uppercase, .22em) so all 40 pages share one eyebrow style.
   margin-bottom kept for hero spacing; the F2 start-line anchors the element top, which
   is unaffected by this size change. */
.hero-eyebrow{margin:0 0 1.5rem;font-family:var(--font-sans);font-weight:400;font-size:.75rem;text-transform:uppercase;letter-spacing:.22em;color:rgba(var(--ink-rgb),.55);}
.hero-title{font-family:var(--font-serif);font-size:2.5rem;line-height:1.05;letter-spacing:-0.02em;}
@media(min-width:640px){.hero-title{font-size:3rem;}}
@media(min-width:1024px){.hero-title{font-size:4rem;}}
.hero-sub{margin-top:1.5rem;max-width:36rem;font-size:1.125rem;line-height:1.7;color:rgba(var(--ink-rgb),.7);}
.hero-ctas{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;}
.hero-trust{margin-top:2rem;}

/* =============================================================================
   TrustBar (compact + full)
   ============================================================================= */
.trustbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;white-space:normal;border-top:1px solid var(--rule);padding-block:.625rem;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:rgba(var(--ink-rgb),.55);}
.trustbar a{display:inline-flex;align-items:center;gap:.375rem;transition:color .15s;}
.trustbar a:hover{color:var(--sage);}
.trustbar .sep{height:.625rem;width:1px;background:var(--rule);flex:none;}
.tb-aplus{display:grid;place-items:center;width:1rem;height:1rem;border-radius:9999px;background:rgba(var(--sage-rgb),.15);font-family:var(--font-serif);font-size:9px;font-weight:600;letter-spacing:normal;color:var(--sage);}
.trustbar .stars{color:var(--sage);letter-spacing:normal;}
.trustbar .gscore{color:rgba(var(--ink-rgb),.7);text-transform:none;letter-spacing:normal;}

.trustbar-full{border-block:1px solid var(--rule);background:var(--cream);}
.trustbar-full .inner{margin-inline:auto;max-width:1400px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 2rem;padding:1rem 1.5rem;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--ink-rgb),.55);}
@media(min-width:1024px){.trustbar-full .inner{padding-inline:2.5rem;}}
.trustbar-full a{display:inline-flex;align-items:center;gap:.5rem;transition:color .15s;}
.trustbar-full a:hover{color:var(--sage);}
.trustbar-full .tb-aplus{width:1.5rem;height:1.5rem;font-size:11px;}
.trustbar-full .sep{display:none;height:.75rem;width:1px;background:var(--rule);}
@media(min-width:640px){.trustbar-full .sep{display:inline-block;}}

/* =============================================================================
   Trust strip (5 brand logos)
   ============================================================================= */
.truststrip{margin-top:4rem;border-block:1px solid var(--rule);padding-block:2rem;}
.truststrip-label{margin-bottom:1.5rem;text-align:center;font-family:var(--font-serif);font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(var(--ink-rgb),.4);}
.truststrip-grid{display:grid;grid-template-columns:repeat(2,1fr);align-items:center;gap:1.5rem 2rem;}
@media(min-width:640px){.truststrip-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1024px){.truststrip-grid{grid-template-columns:repeat(5,1fr);}}
.truststrip-grid li{display:flex;align-items:center;justify-content:center;}
.truststrip-grid img{height:3rem;width:auto;max-width:160px;object-fit:contain;opacity:.7;filter:grayscale(1);transition:opacity .2s,filter .2s;}
.truststrip-grid img:hover{opacity:1;filter:grayscale(0);}

/* =============================================================================
   Generic section + Pillars
   ============================================================================= */
.section{margin-inline:auto;max-width:1200px;padding:0 1.5rem 6rem;}
@media(min-width:1024px){.section{padding:0 2.5rem 8rem;}}
.section-title{font-family:var(--font-serif);font-size:1.875rem;letter-spacing:-0.01em;color:var(--ink);}
@media(min-width:768px){.section-title{font-size:2.25rem;}}

.pillars-grid{margin-top:2.5rem;display:grid;gap:1rem;}
@media(min-width:768px){.pillars-grid{grid-template-columns:repeat(3,1fr);}}
.pillar{display:flex;flex-direction:column;border-radius:1rem;background:rgba(230,235,222,.7);padding:1.75rem;}
.pillar h3{margin-bottom:.75rem;font-family:var(--font-serif);font-size:1.25rem;letter-spacing:-0.01em;color:var(--ink);}
.pillar p{margin-bottom:1.25rem;font-size:.875rem;line-height:1.7;color:rgba(var(--ink-rgb),.7);}
.pillar a{margin-top:auto;font-size:.875rem;font-weight:500;color:var(--sage);transition:color .15s;}
.pillar a:hover{color:var(--ink);}

/* =============================================================================
   Case studies
   ============================================================================= */
.cases-head{margin-bottom:3rem;display:flex;align-items:flex-end;justify-content:space-between;}
.cases-head h2{font-family:var(--font-serif);font-size:1.875rem;letter-spacing:-0.01em;}
@media(min-width:640px){.cases-head h2{font-size:2.25rem;}}
.cases-head a{display:none;font-size:.875rem;color:rgba(var(--ink-rgb),.6);transition:color .15s;}
.cases-head a:hover{color:var(--sage);text-decoration:underline;text-underline-offset:4px;}
@media(min-width:640px){.cases-head a{display:block;}}
.cases-grid{display:grid;gap:1.25rem;}
@media(min-width:768px){.cases-grid{grid-template-columns:repeat(2,1fr);}}
.case{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:1rem;background:var(--card);padding:1.75rem;transition:border-color .2s;}
.case:hover{border-color:rgba(var(--sage-rgb),.5);}
.case-img{margin-bottom:1.5rem;aspect-ratio:16/10;width:100%;overflow:hidden;border-radius:.75rem;background:rgba(230,235,222,.6);}
.case-img img{height:100%;width:100%;object-fit:cover;object-position:top;transition:transform .5s;}
.case:hover .case-img img{transform:scale(1.02);}
.case-eyebrow{margin-bottom:.5rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--ink-rgb),.45);}
.case h3{margin-bottom:.75rem;font-family:var(--font-serif);font-size:1.25rem;line-height:1.35;letter-spacing:-0.01em;transition:color .15s;}
.case:hover h3{color:var(--sage);}
.case-blurb{margin-bottom:1.25rem;font-size:.875rem;line-height:1.7;color:rgba(var(--ink-rgb),.65);}
.case-tags{margin-top:auto;display:flex;flex-wrap:wrap;gap:.5rem;}
.tag{border-radius:9999px;background:var(--sage-soft);padding:.25rem .75rem;font-size:11px;font-weight:500;color:rgba(var(--ink-rgb),.7);}
.flag-caveat{margin-top:.75rem;font-size:11px;font-style:italic;color:#9a6b2f;}

/* =============================================================================
   Where we're strongest (dark band)
   ============================================================================= */
.strongest{background:var(--ink);color:var(--cream);}
.strongest .inner{margin-inline:auto;max-width:1200px;padding:6rem 1.5rem;}
@media(min-width:1024px){.strongest .inner{padding:8rem 2.5rem;}}
.strongest h2{font-family:var(--font-serif);font-size:2.25rem;letter-spacing:-0.01em;}
@media(min-width:640px){.strongest h2{font-size:3rem;}}
.strongest .lede{margin-top:1.5rem;max-width:56rem;font-size:1rem;line-height:1.7;color:rgba(var(--cream-rgb),.7);}
.strongest-grid{margin-top:4rem;display:grid;gap:2.5rem;}
@media(min-width:768px){.strongest-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.strongest-grid{grid-template-columns:repeat(4,1fr);gap:2rem;}}
.strength .bar{margin-bottom:1.25rem;height:1px;width:2.5rem;background:var(--sage);}
.strength h3{margin-bottom:.75rem;font-family:var(--font-serif);font-size:1.25rem;line-height:1.35;letter-spacing:-0.01em;}
.strength p{font-size:.875rem;line-height:1.7;color:rgba(var(--cream-rgb),.7);}

/* =============================================================================
   Capabilities explorer
   ============================================================================= */
.capabilities{background:var(--cream);padding-block:6rem;}
@media(min-width:1024px){.capabilities{padding-block:8rem;}}
.capabilities h2{font-family:var(--font-serif);font-size:2.25rem;line-height:1.1;letter-spacing:-0.01em;}
@media(min-width:640px){.capabilities h2{font-size:3rem;}}
@media(min-width:1024px){.capabilities h2{font-size:3.75rem;}}
.capabilities .lede{margin-top:1.5rem;max-width:42rem;font-size:1.125rem;line-height:1.7;color:rgba(var(--ink-rgb),.7);}
.cap-grid{margin-top:3.5rem;display:grid;gap:2.5rem;}
@media(min-width:1024px){.cap-grid{grid-template-columns:300px minmax(0,1fr);gap:4rem;}}
.cap-nav{display:flex;flex-direction:column;gap:2rem;}
.cap-group > p{margin-bottom:.75rem;font-size:.875rem;font-weight:600;color:var(--ink);}
.cap-list{display:flex;flex-direction:column;gap:.25rem;}
.cap-tab{position:relative;display:flex;width:100%;align-items:center;gap:1rem;border:0;background:transparent;border-radius:.5rem;padding:.625rem .75rem;text-align:left;font-size:15px;color:rgba(var(--ink-rgb),.7);transition:color .15s,background .15s;}
.cap-tab:hover{color:var(--ink);}
.cap-tab .num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;color:rgba(var(--ink-rgb),.4);}
.cap-tab.active{background:var(--card);color:var(--ink);box-shadow:inset 3px 0 0 var(--sage);}
.cap-tab.active .num{color:var(--sage);}
.cap-panel{position:relative;border-radius:1rem;background:var(--ink);color:var(--cream);padding:2rem;}
@media(min-width:640px){.cap-panel{padding:2.5rem;}}
@media(min-width:1024px){.cap-panel{padding:3rem;}}
.cap-badge{position:absolute;right:1.5rem;top:1.5rem;display:flex;align-items:center;gap:.5rem;border:1px solid rgba(var(--cream-rgb),.15);background:rgba(var(--cream-rgb),.05);border-radius:9999px;padding:.375rem .75rem;font-size:.75rem;color:rgba(var(--cream-rgb),.8);}
.cap-badge button{display:grid;place-items:center;width:1.5rem;height:1.5rem;border:0;background:transparent;color:inherit;border-radius:9999px;transition:background .15s;}
.cap-badge button:hover{background:rgba(var(--cream-rgb),.1);}
.cap-badge .count{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;}
.cap-badge .count .of{color:rgba(var(--cream-rgb),.4);}
.cap-panel h3{font-family:var(--font-serif);font-size:1.5rem;letter-spacing:-0.01em;padding-right:6rem;}
@media(min-width:640px){.cap-panel h3{font-size:1.875rem;}}
.cap-panel h3 .num{color:var(--sage);}
.cap-short{margin-top:1rem;max-width:42rem;font-size:1rem;line-height:1.7;color:rgba(var(--cream-rgb),.75);}
.cap-bullets{margin-top:2rem;display:grid;gap:1rem;}
@media(min-width:640px){.cap-bullets{grid-template-columns:repeat(3,1fr);}}
.cap-bullets li{border:1px solid rgba(var(--cream-rgb),.1);background:rgba(var(--cream-rgb),.03);border-radius:.75rem;padding:1.25rem;}
.cap-bullets .label{font-family:var(--font-serif);font-size:1rem;color:var(--cream);}
.cap-bullets .body{margin-top:.25rem;font-size:.875rem;line-height:1.6;color:rgba(var(--cream-rgb),.65);}
.cap-grounded{margin-top:2rem;border-top:1px solid rgba(var(--cream-rgb),.1);padding-top:1.25rem;}
.cap-grounded .label{font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--cream-rgb),.45);}
.cap-grounded .body{margin-top:.5rem;max-width:42rem;font-size:.875rem;line-height:1.7;color:rgba(var(--cream-rgb),.8);}
.cap-step{display:none;}
.cap-step.active{display:block;}

/* =============================================================================
   Testimonials slider
   ============================================================================= */
.testimonials{border-block:1px solid var(--rule);background:rgba(230,235,222,.3);}
.testimonials .inner{margin-inline:auto;max-width:1100px;padding:5rem 1.5rem;}
@media(min-width:1024px){.testimonials .inner{padding:7rem 2.5rem;}}
.tm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;}
.tm-eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.22em;color:rgba(var(--ink-rgb),.5);}
.tm-source{display:none;font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--ink-rgb),.4);}
@media(min-width:640px){.tm-source{display:block;}}
.tm-stage{position:relative;margin-top:2.5rem;min-height:320px;}
.tm-slide{display:none;}
.tm-slide.active{display:block;animation:fadeIn 500ms ease-out;}
.tm-stars{margin-bottom:1.25rem;display:flex;gap:.25rem;color:var(--sage);}
.tm-stars svg{width:1rem;height:1rem;fill:var(--sage);}
.tm-quote{font-family:var(--font-serif);font-size:1.5rem;line-height:1.3;letter-spacing:-0.01em;color:var(--ink);}
@media(min-width:640px){.tm-quote{font-size:1.875rem;}}
@media(min-width:1024px){.tm-quote{font-size:2.25rem;line-height:1.25;}}
.tm-quote .qm{color:var(--sage);}
.tm-foot{margin-top:2rem;display:flex;align-items:center;gap:1rem;font-size:.875rem;}
.tm-foot .line{height:1px;width:2.5rem;background:rgba(var(--ink-rgb),.3);}
.tm-foot .name{font-weight:500;color:var(--ink);}
.tm-foot .when{color:rgba(var(--ink-rgb),.55);}
.tm-controls{margin-top:2.5rem;display:flex;align-items:center;justify-content:space-between;}
.tm-dots{display:flex;gap:.5rem;}
.tm-dots button{height:6px;width:1rem;border:0;border-radius:9999px;background:rgba(var(--ink-rgb),.2);transition:width .2s,background .2s;}
.tm-dots button:hover{background:rgba(var(--ink-rgb),.4);}
.tm-dots button.active{width:2rem;background:var(--sage);}
.tm-arrows{display:flex;gap:.5rem;}
.tm-arrows button{display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--rule);border-radius:9999px;background:transparent;color:rgba(var(--ink-rgb),.7);transition:border-color .15s,color .15s;}
.tm-arrows button:hover{border-color:var(--sage);color:var(--sage);}
.tm-arrows svg{width:1rem;height:1rem;}

/* =============================================================================
   Contact band (dark CTA)
   ============================================================================= */

/* =============================================================================
   Footer
   ============================================================================= */
.footer{border-top:1px solid var(--rule);background:var(--cream);}
.footer-grid{margin-inline:auto;max-width:1200px;display:grid;gap:2.5rem;padding:3.5rem 1.5rem;}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.footer-grid{grid-template-columns:repeat(4,1fr);padding-inline:2.5rem;}}
.footer-brand .mark{font-family:var(--font-serif);font-size:1.25rem;}
.footer-brand .mark .slash{margin-inline:.25rem;color:var(--sage);}
.footer-brand .mark .em{font-style:italic;color:var(--sage);}
.footer-brand p{margin-top:.75rem;max-width:20rem;font-size:.875rem;color:rgba(var(--ink-rgb),.6);}
.footer-social{margin-top:1.25rem;display:flex;align-items:center;gap:.75rem;color:rgba(var(--ink-rgb),.55);}
.footer-social a{display:grid;place-items:center;height:2.25rem;min-width:2.25rem;border:1px solid var(--rule);border-radius:9999px;transition:border-color .15s,color .15s;}
.footer-social a.text{padding-inline:.75rem;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.footer-social a:hover{border-color:var(--sage);color:var(--sage);}
.footer-social svg{width:1rem;height:1rem;}
.footer-col{font-size:.875rem;color:rgba(var(--ink-rgb),.7);}
.footer-col .label{margin-bottom:.5rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--ink-rgb),.4);}
.footer-col .label.mt{margin-top:.75rem;}
.footer-col a{transition:color .15s;}
.footer-col a:hover{color:var(--sage);}
.footer-col ul{display:flex;flex-direction:column;gap:.375rem;}
.footer-getintouch{margin-top:.75rem;display:inline-block;border-radius:9999px;background:var(--sage);padding:.5rem 1rem;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--cream);transition:background .15s;}
.footer-getintouch:hover{background:var(--ink);}
.footer-bottom{border-top:1px solid var(--rule);}
.footer-bottom .inner{margin-inline:auto;max-width:1200px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:1.5rem;font-size:.75rem;color:rgba(var(--ink-rgb),.45);}
@media(min-width:1024px){.footer-bottom .inner{padding-inline:2.5rem;}}
.footer-bottom .made{font-family:var(--font-serif);font-style:italic;}

/* ==== STREAM F: hero start-height alignment 2026-07-04 ==== */
/* tropical .hero (homepage/about/contact/portfolio) shares the marketing-hero start
   token. Desktop: bump top pad 4rem->7rem to match .svc-hero (112px) and top-anchor
   the grid so contact/portfolio eyebrows stop centering-inflating. Mobile .hero base
   is already 2rem (32px) — no override needed. Homepage Variant A internal stack
   order is untouched; only the block's start offset aligns. */
@media(min-width:1024px){
  .hero{padding-top:7rem;}            /* was 4rem — align to the 112px start token */
  .hero-grid{align-items:flex-start;} /* fixes contact/portfolio eyebrow inflation */
}