:root{
  --teal:#2f5c64; --teal-deep:#23474e; --teal-soft:#3d6f77;
  --gold:#e3c565; --gold-deep:#c19a34; --khaki:#b3ac86; --cream:#f5f2e9;
  --ink:#23474e; --ink-2:#2f5c64; --paper:#f5f2e9; --paper-2:#ece7d8;
  --white:#ffffff; --amber:#e3c565; --amber-deep:#a9842a;
  --text:#22302f; --muted:#5c6a68; --line:#e3ddca; --line-2:#d6cfb5;
  --line-dark:rgba(255,255,255,.16);
  --sw-1:#2f5c64; --sw-2:#e3c565; --sw-3:#b3ac86; --sw-4:#3d6f77; --sw-5:#8a7d4e;
  --r:14px; --maxw:1160px;
  --sans:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --disp:"Fraunces",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* keep the sticky header from covering a jumped-to section */
[id]{scroll-margin-top:86px}
@media(max-width:620px){[id]{scroll-margin-top:72px}}
body{
  margin:0;font-family:var(--sans);color:var(--text);background:var(--paper);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:600;line-height:1.08;
  letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.5rem,6vw,4.4rem);font-optical-sizing:auto}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
/* page-level H1s outside the hero read at H2 scale — one H1 per page for SEO,
   without shouting */
.section h1{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.sub-h2{font-size:1.3rem;margin-top:1.5rem;color:var(--ink)}
h3{font-size:1.28rem;letter-spacing:0}
p{margin:0 0 .85rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.section{padding:clamp(30px,3.4vw,48px) 0}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}

/* eyebrow: the signature color-chip label */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.7rem}
.eyebrow .chip{width:12px;height:12px;border-radius:3px;background:var(--amber);
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset}
.on-ink .eyebrow{color:#cdd6e6}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;
  font-size:.98rem;padding:.85rem 1.5rem;border-radius:999px;cursor:pointer;
  border:1.5px solid transparent;transition:transform .15s ease,background .2s,color .2s,border-color .2s;
  white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-amber{background:var(--amber);color:#3a2f0a}
.btn-amber:hover{background:#ecd486}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-2)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.on-ink .btn-ghost{color:#fff;border-color:var(--line-dark)}
.on-ink .btn-ghost:hover{border-color:#fff}

/* placeholders */
.ph{color:#8a5a12;background:#fbf1da;border-bottom:1px dashed var(--amber-deep);
  padding:0 .18em;border-radius:3px;font-weight:600;white-space:nowrap}
.on-ink .ph{color:#ffd98a;background:rgba(226,163,46,.14);border-bottom-color:#ffd98a}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(247,244,238,.86);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;position:relative}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--disp);
  font-weight:600;font-size:1.3rem;letter-spacing:-.01em;line-height:1;min-height:44px}
.brand .logo-mark{width:38px;height:38px;flex:none}
.brand .wm{display:flex;flex-direction:column}
.brand .wm b{font-weight:600}
.brand .wm-j{color:var(--teal)}
.brand .wm-p{color:#8a6a1c}
.brand .wm-tag{font-family:var(--sans);font-size:.56rem;font-weight:800;
  letter-spacing:.2em;color:#6e6749;text-transform:uppercase;margin-top:3px;white-space:nowrap}
.on-ink .brand .wm-j,.site-foot .brand .wm-j{color:#fff}
.on-ink .brand .wm-p,.site-foot .brand .wm-p{color:var(--gold)}
.on-ink .brand .wm-tag,.site-foot .brand .wm-tag{color:#bdb693}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none;margin:0;padding:0}
.nav-links a{font-size:.96rem;font-weight:600;color:var(--text);padding:.3rem 0;
  position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;
  height:2px;background:var(--amber);transition:right .22s ease}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav-cta{display:flex;align-items:center;gap:.8rem}
.nav-toggle{display:none;background:none;border:1.5px solid var(--line-2);
  border-radius:10px;width:44px;height:44px;cursor:pointer;align-items:center;
  justify-content:center;flex:none}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:20px;height:2px;background:var(--ink);position:relative}
.nav-toggle span::before{position:absolute;top:-6px}
.nav-toggle span::after{position:absolute;top:6px}

/* hero */
.hero{background:var(--ink);color:#eef2f8;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:8px;
  background:linear-gradient(90deg,var(--sw-5) 0 20%,var(--sw-1) 20% 40%,
    var(--amber) 40% 60%,var(--sw-3) 60% 80%,var(--sw-4) 80% 100%)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,3.4vw,44px);
  align-items:center;padding:clamp(32px,4vw,54px) 0 clamp(36px,4.4vw,60px)}
.hero h1{color:#fff;margin-bottom:.85rem}
.hero .lead{font-size:1.12rem;color:#c7d0e0;max-width:40ch;margin-bottom:1.4rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.3rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;font-size:.86rem;color:#aeb9cc}
.hero-meta span{display:inline-flex;align-items:center;gap:.45rem}
.hero-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
/* hero visual: taped color panel */
.swatch-card{background:#101c30;border:1px solid rgba(255,255,255,.09);
  border-radius:20px;padding:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.swatch-card .tape{height:16px;background:repeating-linear-gradient(45deg,
  #e9d9a6 0 10px,#e0cd93 10px 20px);border-radius:4px;margin-bottom:16px;opacity:.9}
.swatch-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.swatch{aspect-ratio:1;border-radius:12px;display:flex;align-items:flex-end;
  padding:10px;font-size:.66rem;font-weight:700;color:rgba(255,255,255,.92);
  letter-spacing:.04em}
.swatch.dark{color:rgba(20,20,20,.72)}
.imgph{background:linear-gradient(135deg,#1b2b45,#25436b);border:1px dashed rgba(255,255,255,.25);
  border-radius:14px;display:grid;place-items:center;text-align:center;color:#a9b6cc;
  font-size:.82rem;font-weight:600;padding:18px;min-height:120px}

/* trust strip */
.trust{background:var(--white);border-bottom:1px solid var(--line)}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center}
.trust-row div{padding:18px 16px;border-right:1px solid var(--line)}
.trust-row div:last-child{border-right:0}
.trust-row strong{display:block;font-family:var(--disp);font-size:1.05rem;color:var(--ink)}
.trust-link{display:block;min-height:44px}
.trust-link small{text-decoration:underline;text-decoration-color:var(--line-2);
  text-underline-offset:2px}
.trust-link:hover strong{color:var(--teal-soft)}
.trust-link:hover small{color:var(--gold-deep);text-decoration-color:var(--gold-deep)}
.trust-row small{color:var(--muted);font-size:.82rem;letter-spacing:.02em}

/* generic layout helpers */
.lede{max-width:62ch;margin-bottom:0}
.lede .big{font-size:1.2rem;color:var(--text)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,72px);align-items:center}
.center{text-align:center;max-width:48rem;margin:0 auto}
.section.paper2{background:var(--paper-2)}
.section.ink{background:var(--ink);color:#dfe6f1}
.section.ink h2,.section.ink h3{color:#fff}
.section.ink p{color:#c3cddd}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1.7rem}
.cards.four{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 20px;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -26px rgba(22,36,61,.4)}
.card .sw{width:34px;height:34px;border-radius:9px;margin-bottom:16px}
.card h3{margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.96rem;margin:0}

/* numbered process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:1.8rem;
  counter-reset:step}
.step{position:relative;padding-top:10px}
.step .n{font-family:var(--disp);font-size:2.4rem;color:var(--amber);line-height:1;
  margin-bottom:.6rem}
.step h3{font-size:1.12rem;margin-bottom:.4rem}
.step p{color:var(--muted);font-size:.92rem;margin:0}
.section.ink .step p{color:#b7c2d4}

/* values list */
.vlist{display:grid;grid-template-columns:1fr 1fr;gap:20px 36px;margin-top:1.6rem}
.vitem{display:flex;gap:16px}
.vitem .sw{flex:none;width:14px;height:44px;border-radius:4px;margin-top:4px}
.vitem h3{font-size:1.1rem;margin-bottom:.3rem}
.vitem p{color:var(--muted);font-size:.95rem;margin:0}

/* quote / testimonial slot */
.quote{background:var(--white);border:1px solid var(--line);border-left:5px solid var(--amber);
  border-radius:12px;padding:22px 24px;max-width:52rem;margin:1.6rem auto 0}
.quote p{font-family:var(--disp);font-size:1.35rem;line-height:1.4;color:var(--ink);
  margin:0 0 .8rem}
.quote .who{color:var(--muted);font-size:.9rem;font-weight:600}
.note{font-size:.82rem;color:#7d6019;font-weight:600;margin-top:1rem;
  display:inline-flex;align-items:center;gap:.4rem}
.note::before{content:"◦";font-size:1.2rem;line-height:0}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:1.6rem}
.gallery .imgph{min-height:190px;background:linear-gradient(135deg,#eee7d8,#e3d9c3);
  color:#8a7d5f;border-color:#cbbf9e}
/* real photos */
.photo{display:block;width:100%;height:100%;object-fit:cover}
.hero-photo{position:relative;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);background:#0f1d24}
.hero-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.hero-photo .tape{position:absolute;top:0;left:0;right:0;height:14px;z-index:2;
  background:repeating-linear-gradient(45deg,#e9d9a6 0 10px,#e0cd93 10px 20px);opacity:.95}
.hero-photo .cap{position:absolute;left:14px;bottom:14px;z-index:2;background:rgba(35,71,78,.9);
  color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.02em;padding:.44rem .85rem;
  border-radius:999px;backdrop-filter:blur(4px)}
.gtile{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:4/3;background:#eae3d2}
.gtile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.gtile:hover img{transform:scale(1.05)}
.gtile .cap{position:absolute;left:10px;bottom:10px;background:rgba(35,71,78,.88);color:#fff;
  font-size:.78rem;font-weight:700;padding:.34rem .66rem;border-radius:999px}
.about-photo{border-radius:14px;overflow:hidden;border:1px solid var(--line);min-height:220px;background:#eae3d2}
.about-photo img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}

/* Facebook: reviews widget */
.fb-widget{background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:14px;max-width:540px;margin:1rem auto 0}
.fb-widget.wide{max-width:560px}
/* reserve the plugin's declared height so nothing jumps when the SDK loads */
.fb-page{min-height:330px}
.fb-widget.wide .fb-page{min-height:500px}
/* Fallback shown before the SDK renders (and in offline previews). Facebook
   replaces this markup entirely once the real plugin loads. */
.fb-page > blockquote{margin:0;min-height:330px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.65rem;text-align:center;padding:24px;
  background:linear-gradient(165deg,#f8fafb,#eef3f4);border:1px dashed var(--line-2);
  border-radius:10px}
.fb-widget.wide .fb-page > blockquote{min-height:500px}
.fb-page > blockquote svg{color:#1877f2;opacity:.9}
.fb-page > blockquote .fb-fb-t{font-weight:800;color:var(--ink);font-size:.95rem}
.fb-page > blockquote .fb-fb-s{color:var(--muted);font-size:.8rem;max-width:30ch;line-height:1.5}
.fb-page > blockquote a{color:var(--teal);font-weight:700;text-decoration:underline;
  font-size:.86rem;display:inline-flex;align-items:center;min-height:44px;padding:0 .4rem}
.fb-note{color:var(--muted);font-size:.8rem;margin:9px 0 0;text-align:center}
.fb-note a{color:var(--teal);font-weight:700;text-decoration:underline}

/* Facebook: video/reel slots — Reels are 9:16, so cap tile width or they tower */
.fb-video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:1.4rem}
.fb-video-grid.pair{grid-template-columns:repeat(2,1fr);gap:14px}
.work-split{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:1.5rem;align-items:start}
.work-sub{font-family:var(--sans);font-size:.7rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0;text-align:center}
.work-split .fb-widget{margin-top:.7rem}
.work-split .fb-video-grid{margin-top:.7rem}
.fb-video-slot{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,#23474e,#2f5c64);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:270px;margin-inline:auto}
/* Home page video/photo tiles use 16:9 — the poster photos are landscape-ish
   and the tiles sit alongside a text column, so wide reads better than tall.
   Experience-page tiles keep the default 9:16 since they hold vertical Reels. */
.fb-video-grid.pair .fb-video-slot{aspect-ratio:16/9;max-width:none}
.fb-video-slot iframe{width:100%;height:100%;border:0;display:block}
.fb-video-instructions{color:#dcece9;font-size:.78rem;padding:18px;text-align:center}
.fb-video-instructions b{display:block;color:#fff;font-size:.86rem;margin-bottom:8px}
.fb-video-instructions p{margin:0;color:#b9d2ce}
.fb-video-instructions code{background:rgba(255,255,255,.14);border-radius:4px;padding:1px 5px;font-size:.74rem}
.fb-video-cap{color:#eaf3f1;font-size:.86rem;font-weight:600;padding:16px;text-align:center}
.fb-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-64%);
  width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.16);
  border:1.5px solid rgba(255,255,255,.5);color:#fff;display:flex;align-items:center;
  justify-content:center;backdrop-filter:blur(2px)}
.fb-video-slot .fb-video-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.55));margin:0}
.service-video{margin-top:14px}
.service-video .fb-video-slot{aspect-ratio:16/9;max-width:none}
.fb-video-slot-link{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-decoration:none;transition:filter .15s ease}
.fb-video-slot-link:hover{filter:brightness(1.08)}
.fb-video-slot-link:hover .fb-play{background:rgba(255,255,255,.26)}

/* Photo-filled version of a project tile — image fills the slot, caption sits
   over a soft gradient at the bottom for legibility on any color image. */
.fb-video-slot.has-photo{background:none}
.fb-video-slot-photo{display:block;padding:0}
.fb-video-slot-photo img{width:100%;height:100%;object-fit:cover;display:block}
.fb-video-cap-overlay{position:absolute;left:0;right:0;bottom:0;
  padding:1.4rem 1rem .9rem;color:#fff;font-family:var(--disp);font-weight:600;
  font-size:1rem;text-align:center;letter-spacing:.01em;
  background:linear-gradient(to top,rgba(35,71,78,.85) 15%,rgba(35,71,78,0))}
.fb-video-slot-photo:hover .fb-video-cap-overlay{background:linear-gradient(to top,rgba(35,71,78,.95) 15%,rgba(35,71,78,.05))}

/* Real Facebook video embed — iframe fills the tile, no chrome around it.
   The iframe brings its own player UI, so we don't overlay a caption. */
.fb-video-slot.has-embed{background:#000}
.fb-video-slot.has-embed iframe{position:absolute;inset:0;width:100%;height:100%;
  border-radius:14px}

/* Facade for lazy-loaded video — poster + play button. Nothing loads from
   Facebook until the visitor clicks; then the button gets replaced by the
   real iframe. Massive win for page load speed and eliminates the choppy
   playback caused by loading multiple Facebook players at once. */
.fb-video-slot.has-facade{background:#000}
.fb-facade{position:absolute;inset:0;display:block;padding:0;margin:0;
  border:0;background:transparent;cursor:pointer;overflow:hidden;
  border-radius:14px;width:100%;height:100%}
.fb-facade img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s ease, filter .2s ease}
.fb-facade:hover img{transform:scale(1.04);filter:brightness(1.05)}
.fb-facade-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:#e02c30;display:flex;align-items:center;justify-content:center;
  pointer-events:none;transition:transform .2s ease}
.fb-facade:hover .fb-facade-play{transform:translate(-50%,-50%) scale(1.08)}
.fb-facade-cap{position:absolute;left:0;right:0;bottom:0;
  padding:1.4rem 1rem .9rem;color:#fff;font-family:var(--disp);font-weight:600;
  font-size:1rem;text-align:center;letter-spacing:.01em;pointer-events:none;
  background:linear-gradient(to top,rgba(35,71,78,.85) 15%,rgba(35,71,78,0))}
.fb-facade:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Recent from Facebook — live post embeds on the Home page. Posts have
   variable heights (FB decides based on media), so we let them size naturally
   and align them at the top. On mobile they stack. */
.fb-post-grid{display:flex;flex-wrap:wrap;justify-content:center;
  align-items:flex-start;gap:1.2rem;margin:0 auto}
.fb-post-embed{flex:0 1 500px;background:var(--white);border-radius:14px;
  overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.fb-post-embed iframe{display:block}
@media(max-width:1080px){.fb-post-embed{flex:1 1 100%;max-width:500px}}

/* Facebook: footer badge */
.fb-badge{display:inline-flex;align-items:center;gap:.5rem;color:#cdd9e6;font-size:.86rem;
  font-weight:600;padding:.6rem 0;min-height:44px}
.fb-badge:hover{color:#fff}
.fb-badge svg{flex:none;opacity:.9}

/* Sticky mobile action bar */
.actionbar{display:none}
@media(max-width:820px){
  .actionbar{display:grid;grid-template-columns:1.35fr 1fr;gap:8px;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:rgba(35,71,78,.96);backdrop-filter:blur(8px);
    border-top:1px solid rgba(255,255,255,.14)}
  .actionbar a{display:flex;align-items:center;justify-content:center;gap:.45rem;
    min-height:48px;border-radius:10px;font-weight:800;font-size:.92rem;
    white-space:nowrap;padding:0 .6rem}
  .ab-call{background:var(--gold);color:#2f2405}
  .ab-quote{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
  /* keep the bar from covering the last of the page */
  body{padding-bottom:74px}
}

/* Qualifying field pair */
.field2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:480px){.field2{grid-template-columns:1fr}}

/* Consent line under the form */
.consent{margin-top:12px;font-size:.76rem;color:var(--muted);line-height:1.5;max-width:46ch}
.consent a{color:var(--teal);font-weight:700;text-decoration:underline}

/* On touch devices, inline text-links can be too small to tap reliably.
   Bump the tap surface without changing visual size, so we don't disturb
   the typography Home/About/Experience rely on. */
@media (hover:none) and (pointer:coarse){
  .consent a, .form-alt a, .info-row .v a, .prose a,
  .foot-cols a, .contact-lines a{
    display:inline-block;
    padding:6px 4px;
    min-height:44px;
    line-height:1.2;
  }
}

/* Privacy policy prose */
.prose{max-width:60ch;margin-top:1.4rem}
.prose h2{font-size:1.3rem;margin:1.8rem 0 .5rem}
.prose ul{padding-left:18px;color:var(--muted)}
.prose li{margin-bottom:.3rem}
.prose p{color:var(--muted)}
.prose a{color:var(--teal);font-weight:700;text-decoration:underline}
.sm-note{font-size:.8rem;color:var(--muted);margin-top:.4rem}

/* Self-hosted work strip (replaced the Facebook Page Plugin) */
.feed-strip{margin-top:2rem}
/* Full-width project showcase — 4 across desktop, 3 tablet, 2 mobile.
   Tiles are square-ish so mixed portrait/landscape photos all look consistent. */
.feed-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.feed-grid .gtile{aspect-ratio:4/3}
@media(max-width:960px){.feed-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.feed-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
.feed-cta{margin:1.6rem auto 0;display:inline-flex}

/* Reviews call-out card */
.rev-card{background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:26px 24px;max-width:30rem;margin:1.4rem auto 0;text-align:center}
.rev-card svg{margin-bottom:.5rem}
.rev-t{font-family:var(--disp);font-size:1.2rem;font-weight:600;color:var(--ink);margin:0 0 .35rem}
.rev-s{color:var(--muted);font-size:.9rem;margin:0 0 1.1rem}

/* FAQ */
.faq-list{margin-top:1.5rem;max-width:52rem;border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:.85rem 2.2rem .85rem 0;position:relative;
  font-family:var(--disp);font-size:1.08rem;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.5rem;top:50%;width:9px;height:9px;
  border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--teal-soft)}
.faq p{margin:0 0 .9rem;color:var(--muted);max-width:62ch}

/* Service-area chips */
.cities{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-top:1.2rem}
.city{background:var(--white);border:1px solid var(--line-2);border-radius:999px;
  padding:.4rem .9rem;font-size:.84rem;font-weight:600;color:var(--ink)}

/* a11y skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:#2f2405;
  padding:.7rem 1.1rem;font-weight:800;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* cta band */
.ctaband{background:var(--amber);color:#241a05;text-align:center}
.ctaband h2{color:#241a05}
.ctaband p{color:#4a3a12;max-width:40rem;margin:.5rem auto 1.3rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,64px)}
/* Grid items default to min-width:auto, so a long <option> or unbroken string
   can force the track wider than the viewport. Let them shrink. */
.contact-grid>*,.cards>*,.gallery>*,.work-split>*,.steps>*,.fb-video-grid>*{min-width:0}
.field input,.field select,.field textarea{max-width:100%}
.info-row .v{overflow-wrap:anywhere}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:700;font-size:.86rem;margin-bottom:.4rem;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;
  padding:.75rem .9rem;border:1.5px solid var(--line-2);border-radius:10px;
  background:var(--white);color:var(--text);min-height:44px}
.field textarea{min-height:130px;resize:vertical}
.form-status{margin-top:14px;font-size:.88rem;border-radius:10px;padding:0;line-height:1.5}
.form-status.sending{padding:12px 14px;background:var(--panel,#eef4f3);color:var(--muted);
  border:1px solid var(--line)}
.form-status.ok{padding:13px 15px;background:#e8f6ee;border:1px solid #b6e2c8;color:#1c6b3f}
.form-status.ok b{color:#14512f}
.form-status.err{padding:13px 15px;background:#fdecec;border:1px solid #f3c2c2;color:#9c2b2b}
.form-status a{color:inherit;font-weight:700;text-decoration:underline}
.form-alt{margin-top:12px;font-size:.82rem;color:var(--muted)}
.form-alt a{color:var(--teal);font-weight:700;text-decoration:underline}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--amber);outline:none}
.contact-info{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.info-row{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.info-row:last-child{border-bottom:0}
.info-row .sw{flex:none;width:12px;height:38px;border-radius:4px}
.info-row .k{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.info-row .v{font-weight:600;color:var(--ink)}
.info-row .v a{display:inline-flex;align-items:center;min-height:44px}
.mapph{margin-top:18px;min-height:180px;border-radius:12px;
  background:repeating-linear-gradient(45deg,#eef1e9 0 14px,#e8ece3 14px 28px);
  border:1px dashed var(--line-2);display:grid;place-items:center;color:var(--muted);
  font-weight:600;font-size:.86rem;text-align:center;padding:16px}

/* footer */
.site-foot{background:var(--ink);color:#c3cddd;padding:36px 0 0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;padding-bottom:30px}
.site-foot .brand{color:#fff;margin-bottom:1rem}
.site-foot .foot-h{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:#a8bccf;margin:0 0 1rem;font-weight:700}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:.1rem;font-size:.95rem}
.site-foot li a{display:inline-flex;align-items:center;min-height:44px;padding:.2rem 0}
.site-foot a:hover{color:#fff}
.foot-swatch{display:flex;height:8px}
.foot-swatch i{flex:1}
.foot-swatch i:nth-child(1){background:var(--sw-5)}
.foot-swatch i:nth-child(2){background:var(--sw-1)}
.foot-swatch i:nth-child(3){background:var(--amber)}
.foot-swatch i:nth-child(4){background:var(--sw-3)}
.foot-swatch i:nth-child(5){background:var(--sw-4)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px 0;font-size:.82rem;color:#a8bccf}
.foot-bottom .disc{max-width:60ch}

/* responsive */
@media(max-width:900px){
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr}
  .work-split{grid-template-columns:1fr}
  .fb-widget,.fb-widget.wide{max-width:100%}
  .fb-video-grid{grid-template-columns:repeat(2,1fr)}
  .cards,.gallery{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .vlist{grid-template-columns:1fr}
  .trust-row{grid-template-columns:1fr 1fr}
  .trust-row div:nth-child(2){border-right:0}
  .trust-row div{border-bottom:1px solid var(--line)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .swatch-card{max-width:440px;margin:0 auto}
}
/* The full nav (brand + 4 links + CTA) needs ~760px; below that it collides,
   so tablets and phones get the menu button instead. */
@media(max-width:820px){
  .nav-links,.nav-cta .btn{display:none}
  .nav-toggle{display:flex}
  .nav.open .nav-links{display:flex;position:absolute;top:100%;left:calc(-1*clamp(20px,5vw,40px));
    right:calc(-1*clamp(20px,5vw,40px));
    flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);
    padding:4px 0;box-shadow:0 14px 28px -18px rgba(22,36,61,.5);z-index:60}
  .nav.open .nav-links li{padding:0 clamp(20px,5vw,40px)}
  .nav.open .nav-links a{display:flex;align-items:center;min-height:52px;
    border-bottom:1px solid var(--line)}
  .nav.open .nav-links a::after{display:none}
}

@media(max-width:620px){
  body{font-size:16px}
  /* reclaim vertical space on phones: shorter sticky header */
  .nav{height:62px}
  .brand{font-size:1.12rem}
  .brand .logo-mark{width:32px;height:32px}
  .brand .wm-tag{display:none}
  .cards,.cards.four,.gallery,.steps{grid-template-columns:1fr}
  .fb-video-grid,.fb-video-grid.pair{grid-template-columns:1fr}
  .trust-row{grid-template-columns:1fr}
  .trust-row div{border-right:0}
  .foot-grid,.foot-bottom{grid-template-columns:1fr;text-align:left}
  /* full-width CTAs are far easier to hit one-handed */
  .hero-cta{gap:.6rem}
  .hero-cta .btn{width:100%;justify-content:center}
  .btn{padding:.9rem 1.4rem}
  /* respect notches / home indicators */
  .wrap{padding-left:max(20px,env(safe-area-inset-left));
        padding-right:max(20px,env(safe-area-inset-right))}
  .site-foot{padding-bottom:env(safe-area-inset-bottom)}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* ---- preview-only chrome ---- */
.review-banner{background:var(--teal-deep);color:#f0e6c4;font-size:.86rem;text-align:center;
  padding:11px 20px;font-weight:600}
.review-banner b{color:#fff}
.pv-tabs{display:none}
body.preview .site-head .nav-links a{cursor:pointer}