/* Tidy Up Services — shared stylesheet
 * Extracted from per-page <style> blocks, deduplicated, with minimal ty-* heading classes added.
 * Edit this file directly; templates link to it via /assets/site.css. */

/* ═══ TYPOGRAPHY — element defaults + minimal ty-* overrides ═══ */
h1 { font-family: var(--hd); font-weight: 800; font-size: clamp(3rem, 6.5vw, 5.8rem); letter-spacing: -2.5px; line-height: .94; color: #005468; margin-bottom: 24px; }
/* Universal heading utilities — reusable on any h1/h2/h3, any client site.
   Rule: an h1's size/weight/spacing/font is fixed and universal. The ONLY
   thing a modifier class may change is color. */
.on-dark{color:#fff}

h2 { font-family: var(--hd); font-weight: 700; font-size: clamp(1.8rem, 3.9vw, 3.5rem); letter-spacing: -1px; line-height: 1.1; color: #005468; }

/* Universal coral highlight — usable anywhere text needs the coral accent,
   not just inside h1/h2 via <em>. A <span class="highlight"> works in any
   context (body text, buttons, labels), any page, any client site — more
   reusable than tying color to a specific semantic tag inside specific
   heading levels. */
.highlight{color:var(--coral)}

h3 { font-family: var(--hd); font-weight: 600; font-size: clamp(1.1rem, 2.3vw, 2.1rem); line-height: 1.3; color: var(--dark); }
p{font-family:var(--body);font-size:clamp(15px,1.15vw,17px);color:var(--dark);line-height:1.75;margin-bottom:1em}
.ty-eyebrow { font-family: var(--hd); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }

/* ═══ COMPONENT CLASSES — replacing inline styles ═══ */
.footer-bg-muted { filter: brightness(0.7) saturate(0.8); }
.modal-overlay{display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;opacity:0;transition:opacity .4s var(--ease)}
.modal-overlay.open{display:flex}
.modal-overlay.visible{opacity:1}
.modal-overlay.visible .modal-card{opacity:1;transform:translateY(0) scale(1)}
.modal-card{position:relative;width:100%;max-width:576px;margin:24px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(20px);
  border-radius:20px;padding:40px;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 32px 80px rgba(0,44,53,.25),0 8px 24px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.5);
  transform:scale(.95) translateY(20px);opacity:0;
  transition:transform .4s var(--ease-av),opacity .4s var(--ease-av);
  overflow-y:auto;max-height:90vh}
.modal-close{position:absolute;top:12px;right:12px;z-index:10;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease-av)}
.modal-close:hover{background:rgba(0,0,0,.3)}
.modal-close svg{width:18px;height:18px;stroke:var(--muted);stroke-width:2}
.modal-card-scroll { max-height: 88vh; overflow-y: auto; }
.modal-grid { display: grid; gap: .6rem; margin-bottom: .75rem; }
.svc-pill-icon svg :is(path, rect, circle, polyline) { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px; }

/* ═══ ANIMATION FALLBACKS — visible by default per brand-guidelines rule ═══ */
.sub-ln { display: inline; opacity: 1; filter: blur(0px); transition: opacity .5s, filter .5s; }
.sub-ln-init { opacity: 0; filter: blur(4px); }

/* ═══ ONE-OFF LINK STYLES ═══ */
.calc-back { color: var(--teal); text-decoration: underline; font-size: 12px; }

/* ═══ BASE — extracted from index.template.html ═══ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  /* Consolidated 2026-07-02 — previously split across this block and
     site-vars.css with conflicting values (--bg was #f8f7f5 there,
     #FFFFFF here; this block always won the cascade since it loads
     second, making site-vars.css's --bg silently dead). This is now
     the single source of truth for all design tokens. */
  --bg:#f8f7f5;--dark:#1A1C1F;--dark2:#2A2C2F;
  --coral:#EB7768;--coral-dim:rgba(235,119,104,.08);
  --teal:#006880;--teal-soft:#E6F3F6;--mint:#54C3BB;
  --muted:#6B6860;--muted-lt:#9A958D;--white:#FFF;
  --hd:'Outfit',sans-serif;--body:'Archivo',sans-serif;
  /* Aventura cubic-bezier — USED AS-IS */
  --ease-av:cubic-bezier(0.4,0,0.2,1);
  --ease:cubic-bezier(0.25,0.46,0.45,0.94);
  /* Was referenced with a silent #999 fallback (var(--mid,#999)) on the
     booking form's Back button but never actually defined anywhere.
     Given a real, intentional value matching the existing muted family. */
  --mid:var(--muted-lt);
  /* Spacing scale — matches the platform admin app's own tokens exactly
     (frontend/src/styles/base.css), so anyone who knows the app's utility
     system already knows this one too. Same values, same names. */
  --sp-xs:4px;--sp-sm:8px;--sp-md:12px;--sp-lg:16px;--sp-xl:24px;--sp-2xl:32px;
}

/* Layout utility system — mirrors the app's stack/cluster/flex/gap classes
   (frontend/src/styles/typography.css) so future work on this site reaches
   for a reusable utility instead of inventing new one-off margin/padding
   values, the exact pattern this whole site was cleaned up to stop doing. */
.flex{display:flex}
.flex-col{display:flex;flex-direction:column}
.flex-row{display:flex;align-items:center;gap:var(--sp-md)}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-end{display:flex;align-items:center;justify-content:flex-end}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1}
.flex-shrink-0{flex-shrink:0}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.items-stretch{align-items:stretch}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-start{justify-content:flex-start}
.justify-end{justify-content:flex-end}
.gap-xs{gap:var(--sp-xs)}
.gap-sm{gap:var(--sp-sm)}
.gap-md{gap:var(--sp-md)}
.gap-lg{gap:var(--sp-lg)}
.gap-xl{gap:var(--sp-xl)}
.cluster-xs{display:flex;align-items:center;gap:var(--sp-xs)}
.cluster-sm{display:flex;align-items:center;gap:var(--sp-sm)}
.cluster-md{display:flex;align-items:center;gap:var(--sp-md)}
.cluster-lg{display:flex;align-items:center;gap:var(--sp-lg)}
.cluster-xl{display:flex;align-items:center;gap:var(--sp-2xl)}
html{-webkit-font-smoothing:antialiased;background:#002c35}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
@keyframes tu-fadein{from{opacity:0}to{opacity:1}}
@keyframes tu-fadeout{to{opacity:0;transform:translateY(-4px)}}
body{font-family:var(--body);color:var(--dark);background:var(--bg);overflow-x:hidden;line-height:1.6;animation:tu-fadein .35s cubic-bezier(.25,1,.5,1) both}
.tu-exiting{animation:tu-fadeout .28s cubic-bezier(.25,1,.5,1) forwards!important}
a{color:inherit;text-decoration:none}

/* ═══ NAV ═══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 clamp(24px,5vw,64px);height:72px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(0,54,68,.15);backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:box-shadow .4s var(--ease-av)}
.nav.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.15)}

.nav-logo img{height:50px;max-width:200px;object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.15))}
.nav-mid{display:flex;gap:32px}
.nav-link{font-family:var(--hd);font-weight:500;font-size:13px;color:#fff;
  transition:color .3s var(--ease-av);letter-spacing:.01em;
  text-shadow:0 1px 4px rgba(0,0,0,.15)}
.nav-link:hover{color:var(--coral)}
.nav-link.active{color:#fff;position:relative;font-weight:600}
.nav-link.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1.5px;background:#fff}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-btn{display:flex;align-items:center;gap:10px;
  padding:8px 20px 8px 10px;border-radius:48px;border:none;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(12px);
  transition:all .3s var(--ease-av);text-decoration:none}
.nav-btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.25);
  transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.15)}
.nav-btn-icon{width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease-av)}
.nav-btn:hover .nav-btn-icon{background:var(--coral)}
.nav-btn-icon svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none}
.nav-btn-text{font-family:var(--hd);font-weight:600;font-size:13px;color:#fff;
  letter-spacing:.01em;white-space:nowrap}
.ham{display:none;background:none;border:none;cursor:pointer;padding:11px}
.ham svg{width:24px;height:24px;stroke:#fff;stroke-width:2}

/* ═══ HERO — full-screen photo background ═══ */
.hero{position:relative;min-height:100vh;display:grid;
  grid-template-columns:1.15fr .85fr;gap:clamp(32px,4vw,64px);
  align-items:center;padding:96px clamp(24px,5vw,64px) 48px;overflow:hidden}

/* Full-screen photo — fills entire hero, soft overlay for readability */
/* inset:-80px 0 extends photo 80px beyond top+bottom so the y:-80 parallax never exposes a gap */
.hero-photo{position:absolute;inset:-80px 0;z-index:0}
.hero-photo img{width:100%;height:100%;object-fit:cover}
/* Softer gradient — let the photo breathe, just enough for text readability */
.hero-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(
    105deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.82) 30%,
    rgba(255,255,255,.55) 55%,
    rgba(255,255,255,.3) 75%,
    rgba(255,255,255,.18) 100%
  )}

/* Noise texture */
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.025;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Left — headline stack */
.hero-left{position:relative;z-index:10}
/* Utopia Tokyo label: 12.8px weight:600 — ADAPTED: 11px, .14em tracking */
.hero-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--hd);font-size:11px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:32px}
/* Universal section-level eyebrow label — replaces about-label, approach-label,
   services-label, hiw-label, step-tag, faq-label, com-hero-tag (which was
   just hero-tag under a different name). .hero-tag stays separate: it's a
   distinct semantic role (pairs with h1, always teal) from .eyebrow (pairs
   with h2/h3 section headlines, coral by default). */
.eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--hd);font-size:11px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:16px}
.hero-tag::before{content:'';width:24px;height:1.5px;background:var(--teal)}

/* Utopia Tokyo h1: 197px weight:600 spacing:-3.95px — ADAPTED: clamp, weight:800, -2.5px */

/* Coral accent word */

/* Sugarman Concreteness: sensory copy */

/* Trust row */
.hero-trust{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.trust-item{gap:6px;font-family:var(--hd);font-size:11px;
  font-weight:500;color:#005468;letter-spacing:.02em;text-transform:uppercase}
.trust-item svg{width:14px;height:14px;opacity:.5}
.trust-sep{width:1px;height:12px;background:rgba(42,44,47,.12)}

/* San Rita flicker — for decorative use */
@keyframes flicker{0%,100%{opacity:1}2%{opacity:.4}4%{opacity:1}8%{opacity:.6}10%{opacity:1}}

/* ═══ FORM CARD ═══ */
.form-card{position:relative;z-index:10;background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:16px;padding:36px;
  box-shadow:0 16px 64px rgba(42,44,47,.1),0 2px 4px rgba(42,44,47,.04);
  border:1px solid rgba(255,255,255,.6);
  opacity:0;perspective:800px}
.form-card.swing-in{animation:swingInRightBck .65s cubic-bezier(.175,.885,.32,1.275) both}

.form-card h3{font-family:var(--hd);font-size:20px;font-weight:600;color:var(--dark);
  letter-spacing:-.3px;margin-bottom:4px}
.form-card .fsub{font-size:13px;color:var(--muted);margin-bottom:20px}

.fopt{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:8px;
  border:1.5px solid rgba(42,44,47,.07);cursor:pointer;
  transition:color .3s var(--ease-av),background-color .3s var(--ease-av),border-color .3s var(--ease-av);
  font-family:var(--hd);font-size:14px;font-weight:500;color:var(--dark)}
.fopt:hover{border-color:var(--teal);background:var(--teal-soft)}
.fopt.sel{border-color:var(--teal);background:var(--teal-soft)}
.fopt svg{width:16px;height:16px;color:var(--teal);flex-shrink:0}
.fopt .pr{margin-left:auto;font-size:12px;color:var(--muted-lt);font-weight:400}

/* Range slider */
input[type=range]{-webkit-appearance:none;width:100%;height:5px;border-radius:4px;
  background:rgba(42,44,47,.08);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--teal);border:3px solid var(--white);
  box-shadow:0 1px 4px rgba(0,104,128,.3);cursor:pointer;transition:box-shadow .2s}
input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 5px rgba(0,104,128,.12)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
  background:var(--teal);border:3px solid var(--white);cursor:pointer}

.finp{width:100%;padding:13px 14px;border-radius:8px;border:1.5px solid rgba(42,44,47,.08);
  font-family:var(--body);font-size:16px;color:var(--dark);background:var(--white);
  transition:border-color .3s var(--ease-av);outline:none}
.finp:focus{border-color:var(--teal)}
.finp::placeholder{color:var(--muted-lt)}

/* Aventura shine-move — USED AS-IS */
@keyframes shineMove{0%{background-position:-200% center}100%{background-position:200% center}}
.fbtn{width:100%;padding:14px 28px;border-radius:4px;border:none;cursor:pointer;
  font-family:var(--hd);font-size:14px;font-weight:600;letter-spacing:.03em;
  background:var(--teal);color:var(--white);text-transform:uppercase;
  transition:transform .25s var(--ease),box-shadow .3s var(--ease-av);margin-top:4px;
  position:relative;overflow:hidden}
.fbtn::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%);
  background-size:200% 100%;opacity:0;transition:opacity .3s}
.fbtn:hover::after{opacity:1;animation:shineMove 1.2s ease-in-out}
.fbtn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,104,128,.2)}
.fbtn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ─── STEP-FORM LAYOUT (sf-*) — used by embedded forms in funnels & blog posts ─── */
.sf-track-wrap{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1)}
.sf-track{width:100%;display:flex;align-items:flex-start;transition:transform .35s cubic-bezier(.4,0,.2,1);will-change:transform}
.sf-step{width:100%;flex-shrink:0;box-sizing:border-box;overflow:hidden}
.sf-fields{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.sf-col-6{grid-column:span 6}.sf-col-4{grid-column:span 4}.sf-col-3{grid-column:span 3}.sf-col-2{grid-column:span 2}
/* Custom address-suggestion dropdown -- server-side proxy approach, not
   Google's own client-side widget (which needs per-domain referrer
   authorization that doesn't scale across this platform's many client
   domains). We build and manage this dropdown ourselves. */
/* position/top/left/width are set via JS (position:fixed, computed from
   the input's real screen coordinates) -- this rule only supplies the
   visual styling, not layout, since the dropdown is appended to <body>
   and positioned relative to the viewport, not this stylesheet. */
.sf-address-suggestions{display:none;
  background:#fff;border:1.5px solid rgba(42,44,47,.08);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:10000;max-height:220px;overflow-y:auto}
.sf-address-suggestions.is-open{display:block}
.sf-address-suggestion{padding:11px 14px;font-size:14px;color:var(--dark);cursor:pointer;
  border-bottom:1px solid rgba(42,44,47,.06)}
.sf-address-suggestion:last-child{border-bottom:none}
.sf-address-suggestion:hover,.sf-address-suggestion.active{background:rgba(0,104,128,.06)}
.sf-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
/* .fbtn's height itself is intentionally left alone here — the form's
   own JS (recalcEstimate) already measures the button's actual rendered
   height on every update and syncs .sf-estimate to match it dynamically.
   A CSS height override was fighting that JS (inline styles always win
   over classes, so it never controlled anything once JS ran, but the two
   competing for the same job caused visible jitter while dragging).
   margin-top:0 is kept, though — .fbtn's base rule has margin-top:4px,
   correct for a standalone button sitting below other fields, but wrong
   in this side-by-side row: without resetting it, the button sits 4px
   lower than .sf-estimate. This doesn't touch height or fight the JS. */
.sf-row .fbtn{margin-top:0}.sf-flex-1{flex:1;min-width:140px}
.sf-dots-row{display:flex;gap:6px;align-items:center;margin-bottom:12px}
.sf-dot{width:8px;height:8px;border-radius:50%;display:inline-block;transition:background .2s;background:rgba(0,0,0,.15)}
.sf-dot-active{background:var(--teal)}
.sf-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.sf-svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sf-svc-card{border:2px solid rgba(0,0,0,.1);border-radius:10px;padding:14px 8px;cursor:pointer;text-align:center;transition:border-color .2s,background .2s;position:relative}
.sf-icon-box{width:32px;height:32px;margin:0 auto 8px;color:var(--teal)}
.sf-card-title{font-size:13px;font-weight:600;line-height:1.3}
.sf-card-price{font-size:11px;opacity:.55;margin-top:3px}
.sf-addon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.sf-addon-card{border:2px solid rgba(0,0,0,.1);border-radius:8px;padding:10px 12px;cursor:pointer;transition:border-color .2s,background .2s;display:block;position:relative}
.sf-addon-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.sf-addon-text{min-width:0}.sf-addon-name{font-size:13px;font-weight:600}
.sf-addon-desc{font-size:11px;opacity:.5;margin-top:2px}
.sf-addon-price{font-size:13px;font-weight:700;color:var(--teal);white-space:nowrap}
.sf-step-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.4;margin-bottom:8px}
.sf-instructions-wrap{grid-column:span 6}.sf-instructions-wrap.sf-narrow{grid-column:span 3}.sf-instructions-wrap .finp{height:88px;resize:none;overflow-y:auto}
.sf-estimate{background:var(--teal);color:#fff;border-radius:10px;padding:14px 16px;text-align:center;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;height:0;opacity:0;transform:translateX(80px);transition:height .05s ease,opacity .28s ease .05s,transform .3s ease .05s;flex-shrink:0;min-width:100px}
.sf-estimate:not(.is-hidden){height:52px;opacity:1;transform:translateX(0)}
.sf-estimate-lbl{font-size:10px;font-weight:700;opacity:.75;text-transform:uppercase;letter-spacing:.06em}
.sf-estimate-val{font-size:26px;font-weight:800;margin:2px 0}
.sf-estimate-note{font-size:11px;opacity:.7}
.sf-success{display:none;text-align:center;padding:24px 0}
.sf-success-icon{font-size:32px;margin-bottom:8px}
.sf-success-msg{margin:0;font-weight:600;color:var(--dark)}
.sqft-slider-wrap{width:100%}
.sqft-slider-label{font-size:13px;color:var(--dark);margin-bottom:6px}
.sqft-slider{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:linear-gradient(to right,var(--teal) 0%,var(--teal) 16%,rgba(42,44,47,.12) 16%);outline:none;cursor:pointer}
.sqft-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--teal);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer}
.sqft-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--teal);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer}
.fbtn.sf-back{background:var(--mid,#999)}

/* San Rita reveal-scroll-content-y — USED AS-IS */
@keyframes revealY{0%{opacity:0;transform:translateY(40px)}100%{opacity:1;transform:translateY(0)}}

/* Animista swing-in-right-bck — USED AS-IS from animista.net */
@keyframes swingInRightBck{
  0%{transform:rotateY(70deg);transform-origin:right;opacity:0}
  100%{transform:rotateY(0);transform-origin:right;opacity:1}
}
/* Opposite: swing-out-right-bck */
@keyframes swingOutRightBck{
  0%{transform:rotateY(0);transform-origin:right;opacity:1}
  100%{transform:rotateY(70deg);transform-origin:right;opacity:0}
}

/* ═══ SECTION 3: HOW IT WORKS — Brand teal split (photo left, editorial right) ═══ */
.hiw{position:relative;overflow:hidden}
.hiw-grid{display:grid;grid-template-columns:1fr;min-height:auto;position:relative}
@media(min-width:768px){
  .hiw-grid{grid-template-columns:1fr 1fr}
}
/* Full-bleed photo behind everything */
.hiw-bg{position:absolute;inset:-60px 0;z-index:0}
.hiw-bg img{width:100%;height:100%;object-fit:cover;object-position:center}

/* Photo side — invisible on desktop, shows on mobile */

/* Gradient overlay on full-bleed photo */
.hiw-grid::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,transparent 0%,rgba(0,104,128,.15) 20%,rgba(0,104,128,.55) 38%,rgba(0,104,128,.82) 50%,rgba(0,104,128,.94) 60%,var(--teal) 72%)}
@media(max-width:767px){
  .hiw-grid::after{background:linear-gradient(180deg,transparent 0%,rgba(0,104,128,.3) 15%,rgba(0,104,128,.7) 35%,var(--teal) 55%)}
}

/* Content side — right column */
.hiw-spacer{display:none}
@media(min-width:768px){.hiw-spacer{display:block}}
.hiw-content{padding:clamp(48px,6vw,96px) clamp(24px,5vw,64px);
  display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;
  max-width:700px}

/* Steps — flowing editorial blocks with white accent bar */
.step-block{position:relative;padding:28px 0 28px 20px;
  border-left:2px solid rgba(255,255,255,.12);
  transition:border-color .4s var(--ease-av)}
.step-block:hover{border-left-color:var(--coral)}
.step-block+.step-block{margin-top:0}

/* ═══ SECTION 4: CTA — Vintage map background with centered overlay ═══ */
.cta-area{position:relative;overflow:hidden;z-index:1;
  padding:5% 0;background:#fff}

/* Full-bleed vintage map background */
.cta-map-bg{position:absolute;top:-20%;left:-15%;width:80%;height:140%;z-index:0;
  transform:rotate(-45deg)}
.cta-map-bg img{width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:.25;filter:grayscale(.2) contrast(.95);image-rendering:auto}

/* Vignette overlay */
.cta-area::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.85) 45%,rgba(255,255,255,.95) 60%,rgba(255,255,255,1) 80%)}

/* Center CTA content */
.cta-inner{position:relative;z-index:2;text-align:center;
  max-width:70%;margin:0 auto;padding:0 clamp(24px,5vw,64px)}

/* CTA buttons — .cta-btn (section hero) and .svc-cta (card-level, smaller) share the same color */
.cta-btn{display:inline-flex;align-items:center;gap:12px;
  font-family:var(--hd);font-weight:700;font-size:16px;letter-spacing:.04em;
  padding:22px 56px;background:#54C3BB;color:#fff;border:none;border-radius:4px;
  cursor:pointer;transition:all .3s cubic-bezier(.215,.61,.355,1);text-decoration:none;text-transform:uppercase;
  box-shadow:0 4px 24px rgba(84,195,187,.3)}
.cta-btn:hover{background:#43AFA7;transform:translateY(-3px);
  box-shadow:0 8px 32px rgba(84,195,187,.45)}
.cta-btn svg{width:16px;height:16px;fill:currentColor;transition:transform .3s var(--ease-av)}
.cta-btn:hover svg{transform:translateX(5px)}
.svc-cta{display:inline-flex;align-items:center;gap:12px;
  padding:16px 32px;background:#54C3BB;color:#fff;border:none;border-radius:4px;
  font-family:var(--hd);font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;text-decoration:none;
  transition:all .3s cubic-bezier(.215,.61,.355,1);box-shadow:0 4px 16px rgba(84,195,187,.25)}
.svc-cta:hover{background:#43AFA7;transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(84,195,187,.4)}
.svc-cta svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;
  transition:transform .3s var(--ease-av)}
.svc-cta:hover svg{transform:translateX(4px)}

/* Location names — animated reveal */
.cta-locations{margin-top:48px;display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px 0;max-width:100%;margin-left:auto;margin-right:auto}
.cta-loc{font-family:var(--hd);font-size:clamp(13px,1.1vw,15px);font-weight:600;
  color:rgba(0,84,104,.55);letter-spacing:.03em;text-transform:uppercase;
  padding:6px 14px;border-radius:100px;border:1.5px solid rgba(0,84,104,.12);
  background:rgba(255,255,255,.7);backdrop-filter:blur(4px);
  transition:all .4s cubic-bezier(.215,.61,.355,1);cursor:default;
  position:relative;overflow:hidden}
.cta-loc::before{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,104,128,.08),rgba(84,195,187,.08));
  opacity:0;transition:opacity .4s}
.cta-loc:hover{color:#005468;border-color:rgba(0,84,104,.3);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,84,104,.1)}
.cta-loc:hover::before{opacity:1}
.cta-loc-sep{display:none}

/* ═══ Section 5: Our Work Gallery ═══ */
.gallery{background:#005468;padding:clamp(80px,10vw,140px) 0;overflow:hidden;position:relative}
.gallery-header{max-width:80%;margin:0 auto;padding:0 clamp(24px,5vw,64px);
  display:grid;grid-template-columns:1.5fr 1fr;align-items:end;gap:40px;margin-bottom:clamp(48px,6vw,50px)}

/* 3-column masonry — each column independent, images at natural size */
.gallery-grid{width:100%;padding:0 clamp(16px,3vw,40px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,20px);align-items:start}

.gallery-item{position:relative;overflow:hidden;border-radius:8px;
  perspective:800px;cursor:pointer}
.gallery-item-inner{position:relative;width:100%;
  transition:transform .5s cubic-bezier(.215,.61,.355,1),box-shadow .5s;
  transform-style:preserve-3d;will-change:transform;border-radius:8px;overflow:hidden}
.gallery-item img{display:block;width:100%;height:auto;
  opacity:0;transition:opacity 1s ease,filter .6s cubic-bezier(.25,.46,.45,.94)}
.gallery-item img.loaded{opacity:1}
.gallery-item:hover img{filter:brightness(1.1) contrast(1.05)}
.gallery-item:hover .gallery-item-inner{box-shadow:0 20px 60px rgba(0,0,0,.4)}

@media(max-width:768px){
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gallery-header{grid-template-columns:1fr;gap:16px}
  
}

@media(prefers-reduced-motion:reduce){
  .cta-btn{transition:none!important}
}

/* ═══ SECTION 3: SERVICES — expandable rows with clip-path reveal (Akaru pattern) ═══ */
.services{padding:clamp(64px,8vw,96px) 0;background:var(--bg);overflow:hidden}
.services-head{padding:0 clamp(24px,5vw,64px);max-width:1200px;margin:0 auto clamp(32px,4vw,48px)}

/* Each service row: full width, image reveals on hover via clip-path */
.svc-row{position:relative;border-top:1px solid rgba(42,44,47,.08);cursor:pointer;
  transition:background-color .4s var(--ease-av);overflow:hidden}
.svc-row:last-child{border-bottom:1px solid rgba(42,44,47,.08)}
.svc-row:hover{background:rgba(0,104,128,.02)}

.svc-row-inner{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,3vw,48px);
  padding:clamp(28px,3.5vw,44px) clamp(24px,5vw,64px);
  max-width:1200px;margin:0 auto;position:relative;z-index:2}

/* Service icon — large, light gray, fills the space */
.svc-icon{width:120px;height:120px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  transition:all .4s var(--ease-av)}
.svc-icon svg{width:96px;height:96px;fill:#D1CEC6;
  transition:all .5s var(--ease-av)}
.svc-row:hover .svc-icon svg{fill:var(--teal)}

/* Text content */

.svc-name{font-family:var(--hd);font-size:clamp(20px,2.2vw,28px);font-weight:700;
  color:var(--dark);letter-spacing:-.5px;transition:color .3s var(--ease-av)}
.svc-row:hover .svc-name{color:var(--teal)}
.svc-desc{font-family:var(--body);font-size:clamp(13px,1.1vw,15px);color:var(--muted);
  line-height:1.65;max-width:500px}

/* Arrow — rotates on hover */
.svc-arrow{width:40px;height:40px;border-radius:50%;border:1px solid rgba(42,44,47,.1);
  transition:all .4s var(--ease-av);flex-shrink:0}
.svc-arrow svg{width:16px;height:16px;stroke:var(--muted);stroke-width:2;
  transition:transform .4s var(--ease-av),stroke .3s}
.svc-row:hover .svc-arrow{background:var(--teal);border-color:var(--teal)}
.svc-row:hover .svc-arrow svg{stroke:var(--white);transform:rotate(-45deg)}

/* Image — reveals via clip-path on hover (Akaru clipPathBgIn pattern — ADAPTED) */
.svc-img{position:absolute;right:0;top:0;bottom:0;width:45%;z-index:1;
  clip-path:inset(100% 0 0 0);transition:clip-path .6s cubic-bezier(.4,0,.2,1)}
.svc-row:hover .svc-img{clip-path:inset(0)}
.svc-img img{width:100%;height:100%;object-fit:cover}
/* Gradient so text stays readable when image reveals */
.svc-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(255,255,255,.3) 30%,transparent 60%)}

/* Nav switches to the hamburger at a WIDER breakpoint (960px) than the
   rest of the mobile overrides below (768px) -- found via a tablet-
   breakpoint audit: at 769-900px the desktop nav's three flex children
   (logo/nav-mid/nav-right) leave zero gap between them under
   justify-content:space-between (not overlapping, but visually cramped,
   touching edge-to-edge with no breathing room). Rather than force a
   min-gap into a layout that genuinely doesn't have room for one, or move
   every other 768px-keyed rule in this file (unrelated -- hero/svc-row/
   cta-area/service-bands/etc), the nav gets its own, separately-scoped
   breakpoint. The already-built, already-tested mobile hamburger menu
   simply takes over 92px earlier than the rest of the mobile layout does. */
@media(max-width:960px){
  .nav-mid,.nav-right{display:none}.ham{display:block}
}

/* ═══ MOBILE ═══ */
@media(max-width:768px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:88px;padding-bottom:32px;gap:32px}
  
  .hero-trust{gap:12px}.trust-sep{display:none}
  .hero-photo::after{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.7) 40%,rgba(255,255,255,.3) 100%)}
  .step-block{padding:20px 0 20px 16px}
  .svc-img{display:none}
  .svc-row-inner{grid-template-columns:auto 1fr auto}
  .svc-icon{width:80px;height:80px}
  .svc-icon svg{width:64px;height:64px}
  .cta-inner{max-width:100%;width:100%}
  .cta-map-bg{display:none}
  .cta-area::after{background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.85) 60%,rgba(255,255,255,.98) 100%)}
  .form-card{padding:24px 20px;border-radius:12px;min-width:0;overflow:hidden}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.mob-menu{display:none;position:fixed;inset:0;z-index:200;background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px);flex-direction:column;gap:24px}
.mob-menu.open{display:flex}
.mob-menu a{font-family:var(--hd);font-size:20px;font-weight:600;color:var(--dark);
  padding:12px 24px;display:flex;align-items:center}
/* 44px is the widely-used comfortable minimum tap target (Apple HIG / WCAG
   2.5.5) -- this menu previously had zero padding on its links (~32px
   clickable height, just the text line-height) and no explicit size on its
   close button (~24x27px, just the raw SVG). Found via a mobile tap-target
   audit; fixed with padding rather than restructuring the markup, since
   there's ample vertical room in a 7-item full-screen menu. */
.mob-menu .x{position:absolute;top:16px;right:16px;background:none;border:none;cursor:pointer;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.mob-menu .x svg{width:24px;height:24px;stroke:var(--dark);stroke-width:2}

/* ═══ UNCOVERING FOOTER — findrealestate.com pattern ═══ */
.page-content{position:relative;z-index:1;background:var(--bg)}
.site-footer{position:sticky;bottom:0;z-index:0;overflow:hidden;background:#002c35;
  min-height:75vh;height:auto;display:flex;flex-direction:column}

/* Full-bleed photo bg with deep teal overlay — bookends with hero */
.footer-bg{position:absolute;inset:0;z-index:0}
.footer-bg img{width:100%;height:120%;object-fit:cover;object-position:center 75%}
.footer-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,44,53,.88) 0%,
    rgba(0,56,68,.82) 40%,
    rgba(0,68,85,.78) 70%,
    rgba(0,84,104,.72) 100%
  )}
.footer-bg::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.04;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.footer-glow{position:absolute;inset:0;z-index:1;pointer-events:none}
.footer-glow::before{content:'';position:absolute;top:15%;left:5%;width:40%;height:60%;
  background:radial-gradient(ellipse,rgba(84,195,187,.08) 0%,transparent 70%);filter:blur(60px)}
.footer-glow::after{content:'';position:absolute;bottom:10%;right:10%;width:35%;height:50%;
  background:radial-gradient(ellipse,rgba(235,119,104,.06) 0%,transparent 70%);filter:blur(70px)}

.footer-content{position:relative;z-index:2;flex:1;display:flex;flex-direction:column}
.footer-inner{width:100%;padding:0 clamp(32px,6vw,80px);margin:auto 0}

.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(40px,5vw,80px);
  align-items:center;margin-bottom:0;margin-top:clamp(48px,6vw,96px)}

.footer-logo-col{display:flex;align-items:center;width:80%}
.footer-logo-col img{width:80%;height:auto;filter:brightness(0) invert(1)}

.footer-nav{display:flex;flex-direction:column;gap:2px;padding-top:4px}
.footer-nav a{font-family:var(--hd);font-size:clamp(12px,9vw,28px);font-weight:400;
  color:rgba(255,255,255,.45);letter-spacing:-.04em;line-height:1.3;
  transition:color .35s var(--ease-av);display:inline-block;width:fit-content}
.footer-nav a:hover{color:#fff}

.footer-col-label{font-family:var(--hd);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:2px}
.footer-col-value{font-family:var(--body);font-size:clamp(14px,1.1vw,16px);color:rgba(255,255,255,.55);line-height:1.5}
.footer-col-value a{color:rgba(255,255,255,.55);transition:color .3s var(--ease-av);
  text-decoration:none;display:inline-block;position:relative}
.footer-col-value a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;
  background:rgba(255,255,255,.4);transition:width .4s var(--ease-av)}
.footer-col-value a:hover{color:#fff}
.footer-col-value a:hover::after{width:100%}
.footer-phone{font-family:var(--hd);font-size:clamp(26px,2.8vw,38px);font-weight:700;
  color:#fff;letter-spacing:-.02em;display:inline-block;
  text-decoration:none;position:relative;transition:color .3s var(--ease-av)}
.footer-phone::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;
  background:var(--coral);transition:width .4s var(--ease-av)}
.footer-phone:hover{color:var(--coral)}
.footer-phone:hover::after{width:100%}
.footer-social{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.footer-social a{font-family:var(--hd);font-size:clamp(18px,1.8vw,24px);font-weight:400;
  text-decoration:none;letter-spacing:-.02em;
  color:rgba(255,255,255,.4);display:inline-block;position:relative;
  transition:color .3s var(--ease-av)}
.footer-social a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;
  background:rgba(255,255,255,.4);transition:width .4s var(--ease-av)}
.footer-social a:hover{color:#fff}
.footer-social a:hover::after{width:100%}

.footer-bottom{position:relative;z-index:2;margin-top:auto;
  border-top:1px solid rgba(255,255,255,.06);
  padding:20px clamp(32px,6vw,80px);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-copy{font-family:var(--body);font-size:12px;color:rgba(255,255,255,.2)}
.footer-legal{display:flex;gap:20px}
.footer-legal a{font-family:var(--body);font-size:12px;color:rgba(255,255,255,.2);
  transition:color .3s var(--ease-av)}
.footer-legal a:hover{color:rgba(255,255,255,.5)}

@media(max-width:768px){
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
  .footer-logo-col{grid-column:1/2;max-width:50%}
  .footer-logo-col img{max-width:100%}
  .footer-nav a{font-size:clamp(28px,9vw,36px)}
    .footer-bottom{flex-direction:column;align-items:flex-start}
}
@media(max-width:575px){
  .footer-top{display:block}
  .footer-logo-col{display:none}
  .footer-contact{margin-top:10px;margin-bottom:10px}
  .footer-nav a{font-size:clamp(14px,4.5vw,18px)}
  .footer-social{flex-direction:row;gap:16px}
  .cta-btn{padding:15px 15px}
  
}
@media(max-width:600px){
  input[type="date"].finp{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239a958d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px 18px;padding-right:40px}
    }
/* ═══ SHARED TYPOGRAPHY — use these when adding new content in the editor ═══ */

.ty-label-dark{font-family:var(--hd);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:16px;display:inline-flex;align-items:center;gap:8px}
.ty-h2{font-family:var(--hd);font-size:clamp(28px,3.5vw,48px);font-weight:700;color:#005468;letter-spacing:-1px;line-height:1.1;margin-bottom:20px}
.ty-h2-dark{font-family:var(--hd);font-size:clamp(28px,3.2vw,44px);font-weight:700;color:#fff;letter-spacing:-1px;line-height:1.1;margin-bottom:20px}
.ty-body{font-family:var(--body);font-size:clamp(15px,1.2vw,17px);color:var(--muted);line-height:1.7}
.ty-body-dark{font-family:var(--body);font-size:clamp(15px,1.2vw,17px);color:rgba(255,255,255,.55);line-height:1.7}
.ty-body-sm{font-family:var(--body);font-size:clamp(13px,1vw,15px);color:var(--muted);line-height:1.65}

p a{color:var(--teal);font-weight:500}

/* ═══ BLOG — index page ═══ */
.blog-hero{padding:120px 24px 64px;text-align:center;background:linear-gradient(180deg,rgba(0,104,128,.06) 0%,transparent 100%)}
.blog-eyebrow{font-family:var(--hd);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.blog-eyebrow::before,.blog-eyebrow::after{content:'';width:20px;height:1.5px;background:var(--teal)}
.blog-heading{font-family:var(--hd);font-size:clamp(2.2rem,5vw,3.5rem);font-weight:800;color:#005468;line-height:1.1;letter-spacing:-1px;margin-bottom:12px}
.blog-sub{font-size:17px;color:var(--muted);max-width:480px;margin:0 auto;line-height:1.6}
.blog-grid-wrap{max-width:1100px;margin:0 auto;padding:8px 24px 80px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.blog-card{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s}
.blog-card:hover{box-shadow:0 12px 40px rgba(0,104,128,.12);transform:translateY(-3px)}
.blog-card-body{padding:28px;flex:1;gap:10px}
.blog-card-date{font-size:12px;color:var(--muted);font-weight:500}
.blog-card-title{font-family:var(--hd);font-size:18px;font-weight:700;color:#005468;line-height:1.3}
.blog-card-excerpt{font-size:14px;color:var(--muted);line-height:1.6;flex:1}
.blog-card-cta{font-size:13px;font-weight:600;color:var(--teal);margin-top:8px}
.blog-card-cta::after{content:'→'}

/* ═══ BLOG POST — reading template ═══ */
.post-hero{padding:100px 24px 48px;background:linear-gradient(180deg,rgba(0,104,128,.05) 0%,transparent 100%);text-align:left;max-width:760px;margin:0 auto}
.post-back-link{display:inline-flex;gap:6px;font-family:var(--hd);font-size:13px;font-weight:600;color:var(--teal);margin-bottom:24px;text-decoration:none;transition:color .2s}
.post-back-link:hover{color:#005468}
.post-eyebrow{font-family:var(--hd);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.post-eyebrow::before{content:'';width:20px;height:1.5px;background:var(--teal)}
.post-date{font-size:13px;color:var(--muted);margin-bottom:16px;font-weight:500}
.post-title{font-family:var(--hd);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;color:#005468;line-height:1.15;letter-spacing:-.5px;margin-bottom:20px}
.post-excerpt-wrap{font-size:18px;color:var(--muted);line-height:1.65;border-left:3px solid var(--teal);padding-left:20px;margin-bottom:0}
.post-body-wrap{max-width:760px;margin:0 auto;padding:40px 24px 80px}
.post-divider{height:1px;background:rgba(0,0,0,.07);margin-bottom:40px}
.post-body{font-family:var(--body);font-size:17px;line-height:1.8;color:#2a2c2f}
.post-body p{margin-bottom:22px}
.post-body h2{font-family:var(--hd);font-size:1.5rem;font-weight:700;color:#005468;margin:40px 0 16px;letter-spacing:-.3px}
.post-body h3{font-family:var(--hd);font-size:1.2rem;font-weight:600;color:#005468;margin:32px 0 12px}
.post-body ul,.post-body ol{padding-left:24px;margin-bottom:22px}
.post-body li{margin-bottom:8px}
.post-tags-wrap{margin-top:48px;padding-top:24px;border-top:1px solid rgba(0,0,0,.07)}
.post-tags-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}
.post-tag{display:inline-block;background:rgba(0,104,128,.07);border:1px solid rgba(0,104,128,.15);border-radius:6px;padding:4px 12px;font-size:12px;color:var(--teal);font-weight:600;margin:0 4px 4px 0}
.post-cta-strip{background:linear-gradient(135deg,#005468,#006880);padding:48px 24px;text-align:center}
.post-cta-strip h2{font-family:var(--hd);font-size:1.8rem;font-weight:800;color:#fff;margin-bottom:10px}
.post-cta-strip p{color:rgba(255,255,255,.75);margin-bottom:24px;font-size:16px}
.post-cta-btn{display:inline-block;background:#fff;color:#005468;font-family:var(--hd);font-weight:700;font-size:15px;padding:14px 32px;border-radius:10px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.post-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
@media(max-width:575px){
  .blog-hero{padding:100px 20px 40px}
  .blog-grid-wrap{padding:0 16px 60px}
  .post-hero,.post-body-wrap{padding-left:20px;padding-right:20px}
}
.gallery-label{font-family:var(--hd);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--coral);margin-bottom:12px}

/* ═══ SERVICE BAND COMPONENT ═══
   Shared pattern across services.html (vacation/deep/move) and
   commercial.html (offices). Each section keeps its own unique class name
   (svc-vacation/svc-deep/svc-move/svc-offices and their -bg-img/-copy/
   -bento children) because GSAP's ScrollTrigger targets each section
   independently by that exact name -- renaming these would break each
   section's own scroll-triggered reveal animation. What was actually
   duplicated was the CSS DECLARATION itself, copy-pasted 4 times with only
   the class name changed; consolidated here as grouped selectors instead,
   with zero HTML/JS changes anywhere.

   Verified 2026-07-05 against the real DOM order, not assumed from class
   names: 3 of 4 sections share one layout direction (bento/photo showing
   through on the left, copy on the right, gradient solid-right/
   transparent-left so the text stays readable and the photo shows behind
   the glass cards); "move" is deliberately mirrored (copy left, bento
   right, gradient solid-left/transparent-right) for visual variety --
   both directions confirmed correct, not a bug.

   Also fixes two genuine, unintentional inconsistencies found during this
   consolidation: "move"'s cards were missing the .1 opacity contrast
   boost the other three sections have (were left at the generic .06), and
   its body copy was .7 opacity instead of .8 -- no design reason for
   "move" to be less readable/prominent than its siblings, standardized to
   match rather than preserved as-is. */

.svc-vacation,.svc-deep,.svc-move,.svc-offices{position:relative;overflow:hidden;background:var(--teal)}
.vac-bg-img,.deep-bg-img,.move-bg-img,.offices-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;z-index:0}
.svc-move::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.04;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Gradient direction: solid color sits behind the copy (readability),
   transparent sits behind the bento/photo (so it shows through). */
.svc-vacation::after,.svc-deep::after,.svc-offices::after{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(to left,var(--teal) 0%,rgba(0,104,128,.85) 35%,rgba(0,104,128,.45) 65%,rgba(0,104,128,0) 100%)}
.svc-move::after{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(to right,var(--teal) 0%,rgba(0,104,128,.85) 35%,rgba(0,104,128,.45) 65%,rgba(0,104,128,0) 100%)}

.vac-layout,.deep-layout,.offices-layout{position:relative;z-index:2;
  display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(32px,4vw,64px);
  align-items:center;max-width:90%;margin:0 auto;
  padding:clamp(80px,10vw,140px) 0}
.move-layout{position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(32px,4vw,64px);
  align-items:center;max-width:90%;margin:0 auto;
  padding:clamp(80px,10vw,140px) 0}

.vac-copy .svc-tag,.deep-copy .svc-tag,.move-copy .svc-tag,.offices-copy .svc-tag{display:inline-flex;align-items:center;gap:12px;
  font-family:var(--hd);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;margin-bottom:16px}
.vac-copy .svc-tag::before,.deep-copy .svc-tag::before,.move-copy .svc-tag::before,.offices-copy .svc-tag::before{content:'';width:32px;height:2px;background:#fff}
.vac-copy h2,.deep-copy h2,.move-copy h2,.offices-copy h2{font-family:var(--hd);font-weight:800;
  font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-1.5px;
  color:#fff;line-height:1.08;margin-bottom:16px}
.vac-copy h2 em,.deep-copy h2 em,.move-copy h2 em,.offices-copy h2 em{font-style:normal;color:var(--coral)}
.vac-copy p,.deep-copy p,.move-copy p,.offices-copy p{font-family:var(--body);font-size:clamp(15px,1.1vw,17px);
  color:rgba(255,255,255,.8);line-height:1.6;margin-bottom:32px}

.vac-bento,.deep-bento,.move-bento,.offices-bento{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vac-bento .mc,.deep-bento .mc,.move-bento .mc,.offices-bento .mc{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15)}
.vac-bento .mc:hover,.deep-bento .mc:hover,.move-bento .mc:hover,.offices-bento .mc:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}
.vac-bento .mc h3,.deep-bento .mc h3,.move-bento .mc h3,.offices-bento .mc h3{color:#fff}
.vac-bento .mc-icon svg,.deep-bento .mc-icon svg,.move-bento .mc-icon svg,.offices-bento .mc-icon svg{stroke:#fff}
.vac-bento .mc-item,.deep-bento .mc-item,.move-bento .mc-item,.offices-bento .mc-item{color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1)}
.vac-bento .mc-item:hover,.deep-bento .mc-item:hover,.move-bento .mc-item:hover,.offices-bento .mc-item:hover{color:#fff;background:rgba(255,255,255,.15);border-color:var(--coral)}

@media(max-width:768px){
  .vac-layout,.deep-layout,.move-layout,.offices-layout{grid-template-columns:1fr}
  .vac-bento,.deep-bento,.move-bento,.offices-bento{grid-template-columns:1fr}
}