/* GENERATED from MOCKUPS/build_v4.py - do not edit by hand. */

/* ==========================================================================
   RIGHTY TIGHTY DESIGN SYSTEM v0.2
   ONE token block. ONE responsive block. Components carry NO media queries.
   To change the site at a breakpoint you change a token here, nowhere else.
   ========================================================================== */
:root{
  /* colour */
  --navy-900:#1d2d52; --navy-800:#18243c; --navy-700:#26375B;
  --cream:#fbf3db;    --cream-2:#f2e9cd;  --white:#fff;
  --gold:#F2C55C;     --orange:#d85a0b;   --orange-dark:#b94708;
  --amber:#f2ab37;    --steel:#84838a;
  --ink:#1d2d52;      --ink-muted:#54607A; --line:#E4D9BF;
  --line-dark:rgba(251,243,224,.18);

  /* type */
  --f-display:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;
  --f-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --fs-display:62px; --fs-h2:46px; --fs-h3:26px; --fs-h4:21px;
  --fs-lead:20px; --fs-body:17px; --fs-small:15px; --fs-micro:13px; --fs-eyebrow:17px;
  --track-micro:.16em;

  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* layout */
  --container:1200px; --gutter:48px; --gap:24px; --section-y:84px;

  /* components */
  --radius:8px; --radius-lg:14px; --btn-h:54px; --header-h:96px;
  --hero-min:700px; --hero-art-w:44%; --hero-art-h:100%; --hero-art-right:0%; --hero-col:640px;
  --badge:210px; --carousel-w:530px; --cards:3;
}
/* ---- THE ONLY RESPONSIVE BLOCK IN THE SYSTEM ----
   Three steps. Tokens only. Injected below as both media queries (real site)
   and .bp-md / .bp-sm classes (so the fixed-width frames in this document
   step exactly the same way). Same source, no second set of rules. */





/* ===== LOCKED: hero C — flat navy field, cog/gear mark ghosted, no photo plate ===== */
.hero{background:radial-gradient(120% 130% at 12% 40%,#24365f 0%,var(--navy-900) 46%,var(--navy-800) 100%)}
.hero .plate,.hero .scrim{display:none}
.hero .ghost{position:absolute;right:-9%;top:50%;transform:translateY(-50%);z-index:0;
  width:860px;height:860px;background:var(--img-mark) center/contain no-repeat;opacity:.13;pointer-events:none}
.hero .art{filter:drop-shadow(-22px 10px 30px rgba(0,0,0,.42))}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:5;
  background:linear-gradient(90deg,var(--gold),rgba(242,197,92,0) 62%)}
*{box-sizing:border-box}
.rt{font-family:var(--f-body);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
.rt img{display:block;max-width:100%}
.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter);width:100%}
.sec{padding-block:var(--section-y)}
.dark{background:var(--navy-900);color:var(--cream)}
.paper{background:var(--cream)}

/* type */
.h2{font-family:var(--f-display);font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.015em;margin:0}
.h3{font-family:var(--f-body);font-weight:800;font-size:var(--fs-h3);line-height:1.15;margin:0}
.h4{font-family:var(--f-body);font-weight:800;font-size:var(--fs-h4);line-height:1.25;margin:0}
.lead{font-size:var(--fs-lead);line-height:1.5;margin:0}
.body{font-size:var(--fs-body);line-height:1.6;margin:0}
.micro{font-size:var(--fs-micro);letter-spacing:var(--track-micro);text-transform:uppercase;font-weight:800;margin:0}

/* wordmark lockup: HANDYMAN sized to match the line above, kerned normally */
.lock{display:block;width:fit-content}
.lock .l1{display:block;font-family:var(--f-display);text-transform:uppercase;white-space:nowrap;line-height:1;letter-spacing:.005em}
.lock .l2{display:flex;justify-content:space-between;width:100%;font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-.005em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--btn-h);padding:0 26px;border-radius:var(--radius);
  font-weight:800;font-size:16px;text-decoration:none;border:2px solid transparent;white-space:nowrap}
.btn--orange{background:var(--orange);color:var(--navy-900);border-color:var(--orange)}
.btn--cream{background:var(--cream);color:var(--navy-900);border-color:var(--cream);box-shadow:inset 0 -4px 0 var(--orange)}
.btn--navy{background:var(--navy-900);color:var(--cream);border-color:var(--cream)}
.btn--outline{background:transparent;color:#fff;border-color:#fff}
.btnrow{display:flex;gap:var(--s4);flex-wrap:wrap}

/* ---------- HEADER ---------- */
.hdr{height:var(--header-h);background:var(--navy-800);border-bottom:3px solid var(--orange);display:flex;align-items:center;position:relative;z-index:20}
.hdr .wrap{display:flex;align-items:center;gap:var(--s6)}
.logo{display:flex;align-items:center;gap:15px;text-decoration:none;color:var(--cream);flex:0 0 auto}
.logo .mk{width:calc(var(--header-h) * .62);height:calc(var(--header-h) * .62);flex:0 0 auto;background:var(--img-mark) center/contain no-repeat}
.logo .l1{font-size:calc(var(--header-h) * .215)}
.logo .l2{font-size:calc(var(--header-h) * .165);color:var(--orange);margin-top:.42em}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{color:var(--cream);text-decoration:none;font-size:15.5px;font-weight:700;padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a.on,.nav a:hover{border-bottom-color:var(--gold)}
.tel{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px;border-radius:var(--radius);
  background:var(--orange-dark);color:#fff;font-weight:800;font-size:15.5px;text-decoration:none;flex:0 0 auto;white-space:nowrap}
.burger{display:none;margin-left:auto;width:46px;height:46px;flex:0 0 auto;border:2px solid rgba(251,243,224,.45);border-radius:var(--radius);
  align-items:center;justify-content:center;background:none;color:var(--cream);cursor:pointer}
.burger b{display:block;width:19px;height:2px;background:currentColor;position:relative}
.burger b::before,.burger b::after{content:"";position:absolute;left:0;width:19px;height:2px;background:currentColor}
.burger b::before{top:-6px}.burger b::after{top:6px}
.tel .ico{display:none}

/* dropdown: in-flow panel, cannot be covered by anything */
.drop{background:var(--navy-800);border-bottom:3px solid var(--orange);position:relative;z-index:19}
.drop ul{list-style:none;margin:0;padding:6px 0 0}
.drop li{border-top:1px solid rgba(251,243,224,.12)}
.drop li:first-child{border-top:0}
.drop ul a{display:flex;align-items:center;justify-content:space-between;color:var(--cream);text-decoration:none;
  font-size:18px;font-weight:700;padding:17px var(--gutter);min-height:60px}
.drop ul a::after{content:"\203A";color:var(--gold);font-size:22px;font-weight:800}
.drop .acts{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px var(--gutter) 22px;border-top:1px solid rgba(251,243,224,.12);margin-top:6px}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:var(--hero-min);display:flex;align-items:center;background:var(--navy-900);overflow:hidden}
/* backdrop: full-bleed, any hero height, never distorts the subject */
.hero .plate{position:absolute;inset:0;z-index:0;background:var(--img-bg) center bottom/cover no-repeat;filter:saturate(.65) brightness(.9)}
/* Dave: pinned to the bottom-right corner at a fixed share of the hero. He does not scale with it. */
.hero .art{position:absolute;right:var(--hero-art-right);bottom:0;height:var(--hero-art-h);width:var(--hero-art-w);z-index:2;
  background:var(--img-dave) right bottom/contain no-repeat}
.hero .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--navy-900) 0%,rgba(19,30,51,.95) 28%,rgba(19,30,51,.72) 42%,rgba(19,30,51,.45) 58%,rgba(19,30,51,.34) 100%)}
.hero .corner{position:absolute;top:0;right:0;width:38%;height:46%;z-index:3;pointer-events:none;
  background:radial-gradient(125% 105% at 100% 0%,rgba(19,30,51,.9) 0%,rgba(19,30,51,.5) 34%,rgba(19,30,51,0) 66%)}
.hero .wrap{position:relative;z-index:4}
.hero .col{max-width:var(--hero-col);padding-block:var(--s8)}
.badge{position:absolute;top:var(--s6);right:var(--s6);z-index:5;width:var(--badge);height:var(--badge);
  background:var(--img-badge) center/contain no-repeat;filter:drop-shadow(0 10px 22px rgba(0,0,0,.35))}
.eyebrow{color:var(--gold);margin:0 0 var(--s5);font-size:var(--fs-eyebrow);letter-spacing:.2em}
.hero h1{font-family:var(--f-display);font-size:var(--fs-display);text-transform:uppercase;line-height:.94;
  letter-spacing:-.02em;margin:0 0 var(--s5);color:var(--cream);width:fit-content;max-width:100%}
.hero h1 .l2{font-size:1.29em;line-height:.94;color:var(--gold);margin-top:.03em}
/* the promise: gold, never a button, so orange keeps meaning "press this" */
.promise{display:table;color:var(--gold);font-weight:800;font-size:20px;letter-spacing:.01em;
  margin:0;padding-bottom:8px;border-bottom:3px solid var(--gold)}
.jobslink{display:flex;width:fit-content;align-items:center;gap:8px;margin:var(--s4) 0 0;
  color:var(--cream);font-weight:800;font-size:15px;text-decoration:none;
  border-bottom:2px solid rgba(251,243,224,.45);padding-bottom:3px}
.jobslink em{font-style:normal;color:var(--gold)}
.pill{display:inline-block;background:var(--orange);color:#fff;font-weight:800;font-size:17px;padding:11px 22px;border-radius:999px;margin:0 0 var(--s5)}
.hero .sub{max-width:46ch;color:rgba(251,243,224,.85);margin:var(--s6) 0 var(--s6)}
.trust{display:flex;gap:var(--s4) var(--s6);flex-wrap:nowrap;white-space:nowrap;margin:var(--s6) 0 0;padding:0;list-style:none;
  color:rgba(251,243,224,.86);font-size:14.5px;font-weight:700}
.trust li::before{content:"\2713";color:var(--gold);margin-right:8px;font-weight:800}

/* hero before/after carousel: anchored in the content column */
.hba{position:relative;width:var(--carousel-w);max-width:100%;margin:0 0 var(--s5)}
.hba .win{position:relative;aspect-ratio:var(--hba-ratio,14/5);border:2px solid var(--cream);border-radius:6px;overflow:hidden;background:#000;
  touch-action:none;user-select:none;cursor:ew-resize}
.hba .slide{position:absolute;inset:0;display:none}
.hba .slide.on{display:block}
/* variant: sequence — 2 or 3 fixed tiles, no dragging. For portrait jobs. */
.hba .slide--seq.on{display:grid;grid-template-columns:repeat(var(--tiles,3),1fr);gap:2px;background:var(--cream)}
.hba .slide--seq .t{position:relative;background-position:center;background-size:cover;overflow:hidden}
.hba .slide--seq .t em{position:absolute;left:8px;bottom:8px;right:auto}
/* one photo is a legitimate job. Most of them will be. */
.hba .slide--seq.on[style*="--tiles:1"]{grid-template-columns:1fr}
.hba .t--empty{background:repeating-linear-gradient(45deg,#22304A 0 8px,#18243c 8px 16px);
  display:flex;align-items:center;justify-content:center;text-align:center}
.hba .t--empty span{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(251,243,224,.6);line-height:1.4}
.hba .b,.hba .a{position:absolute;inset:0;background-position:center;background-size:cover;pointer-events:none}
.hba .b{background-image:var(--b)}
.hba .a{background-image:var(--a);clip-path:inset(0 0 0 var(--x,50%))}
.hba .dv{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--cream);transform:translateX(-50%);pointer-events:none}
.hba .kn{position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
  background:var(--navy-900);border:2px solid var(--cream);color:var(--cream);font-size:12px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.hba em{position:absolute;bottom:9px;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:var(--navy-900);color:var(--cream);padding:4px 8px;border-radius:3px;pointer-events:none}
.hba em.lb{left:9px}.hba em.la{right:9px}
.hba .nv{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;
  background:var(--navy-900);border:2px solid var(--cream);color:var(--cream);font-size:16px;font-weight:800;
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;padding:0}
.hba .prev{left:-18px}
.hba .next{right:-18px;background:var(--orange);border-color:var(--cream);color:var(--navy-900)}

/* ---------- SECTION HEAD ---------- */
.head{max-width:none;margin:0 0 var(--s6)}
.head .h2{max-width:24ch}
.head .micro{color:var(--orange);margin-bottom:var(--s4)}
.head p{margin:var(--s5) 0 0;color:var(--ink-muted);font-size:var(--fs-lead);line-height:1.5;max-width:52ch}
.dark .head .micro{color:var(--gold)}
.dark .head p{color:rgba(251,243,224,.78)}
.dark .h2{color:var(--cream)}

/* ---------- SERVICE CARDS (my card design, GPT content) ---------- */
.cards{display:grid;grid-template-columns:repeat(var(--cards),1fr);gap:var(--gap)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s3);position:relative}
.card .n{position:absolute;top:var(--s5);right:var(--s6);font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--orange)}
.card .ico{width:52px;height:52px;border-radius:12px;background:var(--navy-800);color:var(--gold);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--s2)}
.card .ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card p{color:var(--ink-muted);font-size:var(--fs-body);line-height:1.55;margin:0}

/* mechanic strip */
.strip{background:var(--navy-900);color:var(--cream);border-radius:var(--radius);padding:var(--s6);
  display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s7)}
.strip b{color:var(--gold);font-size:var(--fs-h4)}
.strip span{font-size:var(--fs-h4)}
.strip a{margin-left:auto;color:var(--gold);font-weight:800;font-size:var(--fs-h4);text-decoration:underline;text-underline-offset:5px}

/* ---------- HOW IT WORKS ---------- */
.how{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:start}
.how .steps{margin:0;padding:0;list-style:none}
.how .steps li{display:flex;gap:var(--s5);padding:var(--s6) 0;border-top:1px solid var(--line-dark)}
.how .steps li:first-child{border-top:0;padding-top:0}
.how .steps .n{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--gold);color:var(--navy-900);
  font-family:var(--f-display);font-size:19px;display:flex;align-items:center;justify-content:center}
.how .steps h4{margin:0 0 6px}
.how .steps p{margin:0;color:rgba(251,243,224,.78);font-size:var(--fs-body)}
.textlink{display:inline-block;margin-top:var(--s6);color:var(--gold);font-weight:800;font-size:var(--fs-lead);
  text-decoration:underline;text-underline-offset:6px}

/* ---------- REPUTATION ---------- */
.reps{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:stretch}
.rep{display:flex;flex-direction:column}
.rep cite{margin-top:auto;padding-top:var(--s3)}
.rep .src{margin-top:var(--s2)}
.rep{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s6)}
.rep.tall{background:var(--navy-900);border-color:var(--navy-900);color:var(--cream)}

.rep .stars{color:var(--orange);letter-spacing:.16em;font-size:16px;margin-bottom:var(--s4)}
.rep q{display:block;font-weight:800;font-size:var(--fs-h3);line-height:1.2;quotes:"\201C" "\201D";margin-bottom:var(--s4)}
.rep p{margin:0 0 var(--s4);font-size:var(--fs-body);line-height:1.6;color:var(--ink-muted)}
.rep.tall p{color:rgba(251,243,224,.8)}
.rep cite{display:block;font-style:normal;font-weight:800;color:var(--orange);font-size:var(--fs-body)}
.rep .src{display:inline-block;margin-top:var(--s3);font-size:13.5px;font-weight:800;color:var(--orange);
  text-decoration:underline;text-underline-offset:4px}
/* optional photo slot. A quote without a photo is not a broken card. */
.rep .shot{margin:calc(var(--s6) * -1) calc(var(--s6) * -1) var(--s5);aspect-ratio:4/3;
  background-position:center;background-size:cover;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
/* feature variant: one per section, photo beside the quote, portrait ratio so garden shots read */
.rep--feature{grid-column:1 / -1;display:grid;grid-template-columns:.38fr .62fr;align-items:stretch;gap:0;padding:0;overflow:hidden}
/* E21: grid children default to min-width:auto, so a height-driven image computes a width via
   aspect-ratio and overflows its track under the text. min-width:0 lets the track contain it.
   Matches the override deploy held live, so deleting theirs changes nothing. */
.rep--feature>*{min-width:0}
.rep--feature .shot{max-width:100%}
.rep--feature .shot{margin:0;aspect-ratio:4/5;border-radius:0;height:100%}
/* the review links to the job it is about: person says it, pictures show it */
.shotlink{position:relative;display:block;height:100%;text-decoration:none;overflow:hidden}
.rep--feature-alt .shotlink{order:2}
.seejob{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 16px;color:#fff;font-weight:800;font-size:14.5px;
  background:linear-gradient(180deg,rgba(19,30,51,0) 0%,rgba(19,30,51,.86) 100%)}
.seejob em{font-style:normal;color:var(--gold)}
.rep--feature .side{padding:var(--s7);align-self:center}
.rep--feature q{font-size:calc(var(--fs-h3) * 1.12)}
/* photo on the other side, so two features in a section do not read as the same block twice */
.rep--feature-alt{grid-template-columns:.62fr .38fr}
.rep--feature-alt .shot,.rep--feature-alt .repseq{order:2}
.rep--feature-alt .side{order:1}
/* a job sequence in place of a single photo: same tiles as the hero carousel */
.repseq{display:grid;grid-template-columns:repeat(var(--tiles,3),1fr);gap:2px;background:var(--line);height:100%}
.repseq .t{position:relative;background-position:center;background-size:cover;min-height:100%}
.repseq .t em{position:absolute;left:7px;bottom:7px;font-style:normal;font-size:10px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;background:var(--navy-900);color:var(--cream);padding:4px 7px;border-radius:3px}
/* A feature card carrying a three-photo sequence used to squeeze it into a 38% column. That
   turned three landscape photos into slivers and left the text column half empty at the same
   time - the worst of both. The sequence is the evidence the card exists to show, so it gets the
   full width, with the words above it. Orders are deliberately not set here: the alt card
   already orders side-then-sequence, and the responsive block owns what happens below 1024. */
.rep--feature:has(.repseq){grid-template-columns:1fr}
.rep--feature:has(.repseq) .side{align-self:start;padding:var(--s7) var(--s7) var(--s6)}
.rep--feature:has(.repseq) .repseq{aspect-ratio:16/5;height:auto}
.rep--feature:has(.repseq) q{max-width:26ch}
.rep--feature:has(.repseq) p{max-width:78ch}
.rep--feature:has(.repseq) .repseq .t em{font-size:12px;left:12px;bottom:12px;padding:4px 8px}
.rep--feature .tagline{display:block;margin:0 0 var(--s4);font-size:var(--fs-micro);letter-spacing:var(--track-micro);
  text-transform:uppercase;font-weight:800;color:var(--orange)}
.rep.tall .src,.rep.tall cite{color:var(--orange)}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s8);align-items:start}
.faq details{border-top:1px solid var(--line);padding:var(--s5) 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  font-weight:800;font-size:var(--fs-h4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-size:26px;font-weight:800;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:var(--s4) 0 0;color:var(--ink-muted);font-size:var(--fs-body);line-height:1.6;max-width:60ch}

/* ---------- CONTACT WAYS + FEEDBACK ---------- */
.ctasub{margin:var(--s5) 0 0;font-size:var(--fs-lead);line-height:1.5;color:rgba(255,255,255,.92);max-width:44ch}
.ways{list-style:none;margin:var(--s6) 0 0;padding:0;display:flex;gap:var(--s5);flex-wrap:wrap}
.ways a{display:block;text-decoration:none;color:#fff;background:rgba(19,30,51,.22);border:2px solid rgba(255,255,255,.5);
  border-radius:var(--radius);padding:12px 18px;min-width:150px}
.ways b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.ways span{display:block;font-weight:800;font-size:15.5px;margin-top:3px}
.concession{margin:var(--s5) 0 0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.9);max-width:46ch;
  border-left:3px solid var(--gold);padding-left:14px}
.quotebox{background:#fff;border-radius:var(--radius-lg);padding:var(--s6);color:var(--ink);box-shadow:0 18px 40px rgba(19,30,51,.2)}
.qb-title{font-family:var(--f-display);font-size:19px;text-transform:uppercase;margin:0 0 var(--s5)}
.quotebox label{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 5px}
.quotebox .f{display:block;width:100%;height:44px;border:1px solid var(--line);border-radius:var(--radius);background:#FCFAF4;margin-bottom:var(--s4);padding:0 12px;font:16px var(--f-body);color:var(--ink)}
.quotebox .f:focus{outline:2px solid var(--orange);outline-offset:1px}
.quotebox .f.ta{height:88px;padding:10px 12px;resize:vertical}
.drop-zone{border:2px dashed var(--line);border-radius:var(--radius);padding:14px;text-align:center;font-size:13px;
  font-weight:700;color:var(--ink-muted);margin-bottom:var(--s5)}
.quotebox .btn{width:100%}
.qb-note a{color:var(--orange-dark);font-weight:800}
.qb-note{margin:var(--s4) 0 0;font-size:12.5px;color:var(--ink-muted);text-align:center}
.rep .src--plain{text-decoration:none;border-bottom:0;cursor:default;color:var(--ink-muted)}

/* ==== KSES-SAFE CLASSES ====
   WordPress strips CSS custom properties and var() out of inline style attributes for any
   user without unfiltered_html. Dave is an Editor, so the first time he saved a page every
   style="background-image:var(--img-*)" and every style="--tiles:N" would have been deleted
   from the database and the step photos, the carousel tiles and the compare pairs would have
   silently vanished. Tokens stay authoritative; they are just referenced from a class now.
   Do not reintroduce an inline style carrying var() or a custom property. ==== */
.bg-bali-b{background-image:var(--img-bali-b)}
.bg-bali{background-image:var(--img-bali)}
.bg-s1{background-image:var(--img-s1)}
.bg-s2{background-image:var(--img-s2)}
.bg-s3{background-image:var(--img-s3)}
/* E12: one token per LOCATION. bg-s1/2/3 and bg-bali each fed the hero carousel and a review
   card, so changing a review photo changed the hero. The review cards now have their own
   tokens - and each falls back to the shared one, so an image already uploaded against the old
   key keeps rendering until someone deliberately sets the new one. Renaming the keys instead
   would have silently orphaned those uploads with no error, which is a line in FAILURES.md
   about this exact map. The hero and the component showcase keep the base tokens. */
.bg-rep-bali{background-image:var(--img-rep-bali,var(--img-bali))}
.bg-rep-s1{background-image:var(--img-rep-s1,var(--img-s1))}
.bg-rep-s2{background-image:var(--img-rep-s2,var(--img-s2))}
.bg-rep-s3{background-image:var(--img-rep-s3,var(--img-s3))}
.tiles-2{--tiles:2}
.tiles-3{--tiles:3}
.cmp-1{--b:var(--img-b1);--a:var(--img-a1)}
.cmp-2{--b:var(--img-b2);--a:var(--img-a2)}
.repseq--wide{aspect-ratio:16/7;height:auto}
.lead--onnavy{margin-top:var(--s5);color:rgba(251,243,224,.8);max-width:46ch}
.body--onnavy{color:rgba(251,243,224,.75);max-width:34ch}
.rep-score{color:var(--ink)}
.paper-2{background:var(--cream-2)}
.micro--accent{color:var(--orange);margin-bottom:var(--s4)}
.foot h5.h5--second{margin-top:var(--s6)}
.btn--onorange{color:var(--ink);border-color:var(--ink)}
.qb-note[hidden]{display:none}
/* Shown only after submit. mailto hands off to the OS: if no mail client is configured the
   handoff fails silently and the visitor is left staring at a form that did nothing. This is
   the only thing standing between that and a lost job. */
.qb-done{margin:var(--s4) 0 0;padding:var(--s3);font-size:13px;line-height:1.45;font-weight:700;
  color:var(--navy-900);text-align:center;background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius)}
.qb-done a{color:var(--orange-dark);font-weight:800}
.qb-done[hidden]{display:none}
.feedback{background:var(--navy-800);color:var(--cream);padding-block:var(--s8)}
.fb{display:grid;grid-template-columns:1.4fr .6fr;gap:var(--s8);align-items:center}
.fb .micro{color:var(--gold);margin-bottom:var(--s3)}
.fb .h3{color:var(--cream);margin-bottom:var(--s3)}
.fb .body{color:rgba(251,243,224,.76);max-width:56ch}
.fb .btnrow{flex-direction:column}
.fb .btn{width:100%}

/* ---------- CTA ---------- */
.cta{background:var(--orange);color:#fff}
.cta .row{display:grid;grid-template-columns:1.12fr .88fr;align-items:start;gap:var(--s8);align-items:center}
.cta .h2{color:#fff}
.cta .micro{color:var(--gold);margin-bottom:var(--s5)}


/* ---------- FOOTER (expanded) ---------- */
.foot{background:var(--navy-900);color:rgba(251,243,224,.8);border-top:3px solid var(--orange)}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:var(--s8);padding-block:var(--s8)}
.foot .logo{color:var(--cream);margin-bottom:var(--s5)}
.foot .logo .mk{width:64px;height:64px}
.foot .logo .l1{font-size:22px}
.foot .logo .l2{font-size:15px;color:var(--orange);margin-top:.42em}
.foot h5{font-family:var(--f-display);font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--cream);margin:0 0 var(--s4)}
.foot a{color:rgba(251,243,224,.82);text-decoration:none;display:block;padding:5px 0;font-size:15px}
.foot a:hover{color:var(--gold)}
.social{display:flex;gap:10px;margin-top:var(--s5)}
.social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:8px;
  border:1px solid var(--line-dark);color:rgba(251,243,224,.8)}
.social a:hover{border-color:var(--gold);color:var(--gold)}
.social svg{width:20px;height:20px;fill:currentColor;stroke:none}
.social a[aria-label="Instagram"] svg{fill:none;stroke:currentColor;stroke-width:1.8}
.areas{font-size:14px;line-height:1.9;color:rgba(251,243,224,.6);margin:0}
.foot .base{border-top:1px solid var(--line-dark);padding-block:var(--s5);display:flex;justify-content:flex-start;column-gap:.4em;
  gap:var(--s5);flex-wrap:wrap;font-size:13.5px;color:rgba(251,243,224,.55)}

/* ---- proposal chrome ---- */
body{margin:0;background:#0E1626;color:#E8EDF6;font:16px/1.55 var(--f-body)}
.flab{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#7F8FAC;margin-top:18px}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:12px;margin-top:14px}
.scale{margin-top:14px;border:1px solid #2A3A58;border-radius:10px;overflow:hidden}
.tr{display:grid;grid-template-columns:132px 92px 1fr;align-items:baseline;gap:14px;padding:11px 14px;border-bottom:1px solid #1E2C45}
.tr:last-child{border-bottom:0}
.tr code{color:#8FA3C4;font-size:11.5px}
.tr small{color:#63748F;font-size:11px}
.sp{color:#E8EDF6}
.sp.display{font-family:"Archivo Black","Arial Black",sans-serif;font-size:26px;text-transform:uppercase;line-height:1}
.sp.h2{font-family:"Archivo Black","Arial Black",sans-serif;font-size:19px;text-transform:uppercase}
.sp.h3{font-weight:800;font-size:17px}
.sp.h4{font-weight:800;font-size:15px}
.sp.lead{font-size:15px}
.sp.body{font-size:13.5px;color:#A7B4CA}
.sp.eyebrow{font-size:13px;letter-spacing:.2em;font-weight:800;color:#F2C55C}
.sp.micro{font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--orange)}
.spr{display:flex;align-items:center;gap:12px;padding:7px 14px;border-bottom:1px solid #1E2C45;font-size:11.5px;color:#7F8FAC}
.spr:last-child{border-bottom:0}
.spr i{display:block;height:11px;background:#F2C55C;border-radius:2px;flex:0 0 auto}
table.bp{width:100%;border-collapse:collapse;margin-top:14px;font-size:13px}
table.bp th{text-align:left;color:#7F8FAC;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid #2A3A58}
table.bp td{padding:8px 10px;border-bottom:1px solid #1E2C45;color:#A7B4CA}
table.bp td:first-child{color:#7F8FAC}


/* ==== components appended last so they win on source order ==== */
/* ---- services: three groups + one wide ---- */
.card{display:flex;flex-direction:column}
.card--wide{grid-column:1 / -1;background:var(--navy-800);border-color:var(--navy-800);color:var(--cream);
  display:grid;grid-template-columns:.44fr .56fr;gap:var(--s6);align-items:start}
.card--wide h3,.card--wide p{color:var(--cream)}
.card--wide .n{color:var(--gold);position:static;display:block;margin:0 0 var(--s2)}
.card--wide ul{columns:2;column-gap:var(--s6)}
.flagline{background:linear-gradient(90deg,rgba(242,197,92,.34),rgba(242,197,92,0));
  border-left:3px solid var(--gold);padding:10px 13px;border-radius:0 8px 8px 0;margin:0 0 var(--s3)}
.flagline b{display:block;font-family:var(--f-display);font-size:12.5px;color:var(--ink);letter-spacing:.03em}
.flagline span{font-size:13px;color:var(--ink-muted)}
ul.tick{list-style:none;margin:0 0 var(--s4);padding:0}
ul.tick li{position:relative;padding-left:20px;font-size:var(--fs-small);color:var(--ink-muted);margin:0 0 6px}
ul.tick li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:5px;
  border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg)}
.card--wide ul.tick li{color:var(--cream);break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
.card--wide ul.tick li::before{border-color:var(--gold)}
.asklink{margin-top:auto;font-weight:800;font-size:var(--fs-small);color:var(--orange-dark);
  text-decoration:none;border-bottom:2px solid rgba(185,71,8,.32);padding-bottom:2px;align-self:flex-start}

/* ---- who you are calling ---- */
.who{background:var(--navy-900);color:var(--cream);position:relative;overflow:hidden}
.who .ghost2{position:absolute;left:-7%;bottom:-32%;width:520px;height:520px;
  background:var(--img-mark) center/contain no-repeat;opacity:.07;pointer-events:none}
.who .wrap{position:relative;z-index:1}
.who .eyebrow{color:var(--gold)}
.who .h2{color:var(--white);max-width:30ch}
.whobody{font-size:var(--fs-lead);max-width:66ch;margin-top:var(--s5);color:rgba(251,243,224,.9)}
.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--s5)}
.pills span{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(251,243,224,.1);border:1px solid rgba(251,243,224,.28);border-radius:99px;padding:6px 14px}
.net{border-left:3px solid var(--gold);padding-left:18px;margin-top:var(--s6);color:var(--gold);
  font-size:16.5px;max-width:64ch}

/* ---- commercial band ---- */
.com{background:var(--navy-800);color:var(--cream);padding-block:var(--s8)}
.comrow{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s7);align-items:center}
.com .eyebrow{color:var(--gold)}
.com .h2{color:var(--white);font-size:var(--fs-h3)}
.com p{color:rgba(251,243,224,.9);font-size:var(--fs-small)}
.com ul.tick li{color:var(--cream)}
.com ul.tick li::before{border-color:var(--gold)}
.btn--ghost{background:transparent;color:var(--cream);border:2px solid rgba(251,243,224,.45)}
.btn--ghost:hover{background:var(--cream);color:var(--navy-900)}


/* ==== THE RESPONSIVE BLOCK - EMITTED LAST, ON PURPOSE ====
   Media queries carry no extra specificity. Emitted before the components, every layout-switch
   rule inside them silently lost to the base rule below - the nav never collapsed, the burger
   never appeared, the tel never became an icon. Token changes still worked (nothing redeclares
   :root later), which is exactly what hid it. It goes LAST so the switches actually switch.
   Do not move it. ==== */
@media (max-width:1279px){ :root{--container:1040px; --fs-display:54px; --fs-h2:40px;} .nav{display:none} .burger{display:flex} .hdr .wrap{gap:16px} }
.bp-lg{--container:1040px; --fs-display:54px; --fs-h2:40px;} .bp-lg .nav{display:none} .bp-lg .burger{display:flex} .bp-lg .hdr .bp-lg .wrap{gap:16px}
@media (max-width:1023px){ :root{--gutter:32px; --section-y:72px; --header-h:76px; --fs-display:44px; --fs-h2:34px; --fs-eyebrow:15px; --fs-lead:18px; --hero-min:0px; --hero-art-w:100%; --hero-art-h:100%; --hero-art-right:0%; --hero-col:100%; --badge:134px; --carousel-w:100%; --cards:2;} 
  .nav{display:none}
  .burger{display:flex}
  .hdr .wrap{gap:12px}
  .hero{display:block}
  .hero .plate, .hero .scrim, .hero .corner, .hero .art, .hero>.badge{display:none}
  .hero .col{padding-block:var(--s6) var(--s7)}
  .hero .mart{display:block;position:relative;margin:var(--s5) calc(var(--gutter) * -1);aspect-ratio:5/4;
      overflow:hidden;background:var(--img-bg) center/cover no-repeat,var(--navy-900)}
  .hero .mart .dv2{position:absolute;inset:0;background:var(--img-dave) 88% bottom/contain no-repeat}
  .hero .mart::after{content:"";position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(19,30,51,.14) 0%,rgba(19,30,51,0) 42%,rgba(19,30,51,.62) 86%,var(--navy-900) 100%)}
  .hero .mart .bd{position:absolute;top:var(--s4);right:var(--s4);width:var(--badge);height:var(--badge);z-index:2;
      background:var(--img-badge) center/contain no-repeat;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}
  .how, .faq{grid-template-columns:1fr;gap:var(--s7)}
  .reps{grid-template-columns:1fr}
  .rep--feature, .rep--feature-alt{grid-template-columns:1fr}
  .rep--feature-alt .shot, .rep--feature-alt .repseq, .rep--feature-alt .shotlink{order:1}
  .rep--feature-alt .side{order:2}
  .repseq{aspect-ratio:3/2;height:auto}
  .rep--feature:has(.repseq) .repseq{aspect-ratio:3/2}
  .rep--feature .shot{aspect-ratio:4/3}
  .rep--feature .side{padding:var(--s6)}
  .cta .row{grid-template-columns:1fr;gap:var(--s7)}
  .card--wide, .comrow{grid-template-columns:1fr}
  .who .ghost2{width:340px;left:-16%}
  .hero .ghost{width:460px;right:-26%}
  .fb{grid-template-columns:1fr;gap:var(--s6)}
  .ways a{flex:1 1 100%}
  .foot .cols{grid-template-columns:1fr 1fr;gap:var(--s7)}
  .strip a{margin-left:0}
  .trust{flex-wrap:wrap;white-space:normal}
 }
.bp-md{--gutter:32px; --section-y:72px; --header-h:76px; --fs-display:44px; --fs-h2:34px; --fs-eyebrow:15px; --fs-lead:18px; --hero-min:0px; --hero-art-w:100%; --hero-art-h:100%; --hero-art-right:0%; --hero-col:100%; --badge:134px; --carousel-w:100%; --cards:2;}
 .bp-md .nav{display:none}
 .bp-md .burger{display:flex}
 .bp-md .hdr .wrap{gap:12px}
 .bp-md .hero{display:block}
 .bp-md .hero .plate,.bp-md .hero .scrim,.bp-md .hero .corner,.bp-md .hero .art,.bp-md .hero>.badge{display:none}
 .bp-md .hero .col{padding-block:var(--s6) var(--s7)}
 .bp-md .hero .mart{display:block;position:relative;margin:var(--s5) calc(var(--gutter) * -1);aspect-ratio:5/4;
      overflow:hidden;background:var(--img-bg) center/cover no-repeat,var(--navy-900)}
 .bp-md .hero .mart .dv2{position:absolute;inset:0;background:var(--img-dave) 88% bottom/contain no-repeat}
 .bp-md .hero .mart::after{content:"";position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(19,30,51,.14) 0%,rgba(19,30,51,0) 42%,rgba(19,30,51,.62) 86%,var(--navy-900) 100%)}
 .bp-md .hero .mart .bd{position:absolute;top:var(--s4);right:var(--s4);width:var(--badge);height:var(--badge);z-index:2;
      background:var(--img-badge) center/contain no-repeat;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}
 .bp-md .how,.bp-md .faq{grid-template-columns:1fr;gap:var(--s7)}
 .bp-md .reps{grid-template-columns:1fr}
 .bp-md .rep--feature,.bp-md .rep--feature-alt{grid-template-columns:1fr}
 .bp-md .rep--feature-alt .shot,.bp-md .rep--feature-alt .repseq,.bp-md .rep--feature-alt .shotlink{order:1}
 .bp-md .rep--feature-alt .side{order:2}
 .bp-md .repseq{aspect-ratio:3/2;height:auto}
 .bp-md .rep--feature:has(.repseq) .repseq{aspect-ratio:3/2}
 .bp-md .rep--feature .shot{aspect-ratio:4/3}
 .bp-md .rep--feature .side{padding:var(--s6)}
 .bp-md .cta .row{grid-template-columns:1fr;gap:var(--s7)}
 .bp-md .card--wide,.bp-md .comrow{grid-template-columns:1fr}
 .bp-md .who .ghost2{width:340px;left:-16%}
 .bp-md .hero .ghost{width:460px;right:-26%}
 .bp-md .fb{grid-template-columns:1fr;gap:var(--s6)}
 .bp-md .ways a{flex:1 1 100%}
 .bp-md .foot .cols{grid-template-columns:1fr 1fr;gap:var(--s7)}
 .bp-md .strip a{margin-left:0}
 .bp-md .trust{flex-wrap:wrap;white-space:normal}

@media (max-width:639px){ :root{--gutter:24px; --section-y:52px; --header-h:70px; --btn-h:52px; --fs-display:33px; --fs-h2:28px; --fs-h3:21px; --fs-lead:17px; --fs-eyebrow:13.5px; --badge:114px; --cards:1;} 
  .tel{width:46px;padding:0;font-size:20px}
  .tel .num{display:none}
  .tel .ico{display:flex;align-items:center;line-height:1}
  .btnrow .btn{flex:1 1 100%}
  .foot .cols{grid-template-columns:1fr}
  .trust{flex-direction:column;gap:10px}
  .card--wide ul{columns:1}
  .strip{flex-direction:column;align-items:flex-start;gap:var(--s3)}
 }
.bp-sm{--gutter:24px; --section-y:52px; --header-h:70px; --btn-h:52px; --fs-display:33px; --fs-h2:28px; --fs-h3:21px; --fs-lead:17px; --fs-eyebrow:13.5px; --badge:114px; --cards:1;}
 .bp-sm .tel{width:46px;padding:0;font-size:20px}
 .bp-sm .tel .num{display:none}
 .bp-sm .tel .ico{display:flex;align-items:center;line-height:1}
 .bp-sm .btnrow .btn{flex:1 1 100%}
 .bp-sm .foot .cols{grid-template-columns:1fr}
 .bp-sm .trust{flex-direction:column;gap:10px}
 .bp-sm .card--wide ul{columns:1}
 .bp-sm .strip{flex-direction:column;align-items:flex-start;gap:var(--s3)}