/* ============ MOTION ============
   Each page's head script adds .motion only when JavaScript runs and the visitor has not asked for reduced
   motion, so without it every page is still and complete. The first screen rises in on load, staggered;
   assets/motion.js tags each block below it with data-reveal and adds .is-in as it reaches the screen.
   Movement uses the translate property, so it never replaces a block's own transform (hover lifts). */
@keyframes rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:none}}
.motion .hero-b .hero-copy>*,.motion .hero-b .hero-planner,.motion .legal-wrap>*{animation:rise .75s cubic-bezier(.2,.7,.2,1) both}
.motion .hero-b .hero-copy>:nth-child(2),.motion .legal-wrap>:nth-child(2){animation-delay:.04s}
.motion .hero-b .hero-copy>:nth-child(3),.motion .legal-wrap>:nth-child(3){animation-delay:.08s}
.motion .hero-b .hero-copy>:nth-child(4),.motion .legal-wrap>:nth-child(4){animation-delay:.12s}
.motion .hero-b .hero-copy>:nth-child(n+5),.motion .legal-wrap>:nth-child(n+5){animation-delay:.15s}
.motion .hero-b .hero-planner{animation-delay:.1s}
.motion [data-reveal]{
  opacity:0;translate:0 26px;animation:none;
  transition:opacity .7s ease var(--d,0ms), translate .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms);
}
.motion [data-reveal].is-in{opacity:1;translate:none}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .btn:hover{transform:translateY(-2px)}
}
@media print{
  .motion [data-reveal]{opacity:1 !important;translate:none !important}
  .motion *{animation:none !important}
}
:root{
  --ink:#03081C;
  --ink-2:#0E1729;
  --ink-deep:#01061B;
  --cream:#F4EFE8;
  --paper:#FFFFFF;
  --line:#E6DED1;
  --line-2:#1A2540;
  --muted:#6A7385;
  --muted-light:rgba(255,255,255,.7);
  --orange:#F2542D;
  --orange-2:#E04A24;
  --orange-soft:#FFEFE9;
  --radius:14px;
  --radius-lg:18px;
  --shadow:0 1px 0 rgba(0,0,0,.04), 0 8px 24px rgba(11,18,32,.06);
}

*{box-sizing:border-box}
/* Same-page links glide in script (index.html). No CSS scroll-behavior: it would fight that curve. */
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  font-feature-settings:"ss01","cv11";
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-synthesis:none;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}

/* ============ LINE ENDINGS ============
   Titles balance their lines and running text avoids a short last line. Where text-wrap: pretty isn't
   supported, non-breaking spaces between the last words in the markup do the job. .nowrap keeps
   hyphenated words such as south-east whole. */
h1,h2,h3,h4,h5,h6,.fix-problem,.what-tile strong,.faq-card summary span,.vp-home b,.vp-need b,.vp-jobs span{text-wrap:balance}
p,li,dd,figcaption,.fix-solution,.what-tile-body span{text-wrap:pretty}
.nowrap{white-space:nowrap}

.container{max-width:1200px;margin:0 auto;padding:0 clamp(28px, 5vw, 64px);width:100%}

.dot{color:var(--orange)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:15px;line-height:1;
  padding:14px 20px;border-radius:10px;
  transition:transform .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn .arrow{display:inline-block;transition:transform .2s ease;font-weight:600}
.btn:hover .arrow{transform:translateX(3px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.btn-primary:hover{background:var(--orange-2)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.25)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.band-light .btn-ghost,.band-cream .btn-ghost{color:var(--ink);border-color:rgba(11,18,32,.18)}

/* ============ SITE NAV ============ */
.site-nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:transparent;
  transition:background .3s ease, box-shadow .3s ease;
}
.site-nav.scrolled{
  background:var(--cream);
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.site-nav .logo{position:relative}
.site-nav .logo-dark,
.site-nav .logo-light{transition:opacity .3s ease}
.site-nav .logo-light{position:absolute;top:0;left:0;opacity:0}
.site-nav.scrolled .logo-dark{opacity:0}
.site-nav.scrolled .logo-light{opacity:1}
.site-nav.scrolled .nav a{color:var(--ink)}
.site-nav.scrolled .nav a:hover{color:var(--orange)}
.site-nav.scrolled .nav-cta{color:#fff;font-weight:800}

/* ============ HERO ============ */
.hero{
  /* matches the dark navy of hero-mountain-wide.png (#000B20) */
  background:#000B20;
  color:#fff;
  position:relative;
  overflow:hidden;
  padding-top:82px;
  padding-bottom:64px;
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:22px;padding-bottom:22px;
  flex-wrap:nowrap;
  position:relative;
  z-index:3;
}
.nav-row > .logo{flex:0 0 auto}
.nav-row > .nav{flex:1 1 auto;justify-content:center}
.logo{display:inline-flex;align-items:flex-end;gap:10px;font-weight:900;letter-spacing:.5px;color:#fff;white-space:nowrap;flex-shrink:0}
.logo-full{
  display:block;
  height:38px;
  width:auto;
}
.nav{display:flex;gap:26px;flex-wrap:nowrap}
.nav a{font-size:14px;color:rgba(255,255,255,.85);font-weight:500;white-space:nowrap}
.nav a:hover{color:#fff}
.nav-cta{padding:12px 18px;font-size:14px}
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}

.hero{
  min-height:90vh;
  padding-bottom: clamp(64px, 14vw, 180px);
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
}
.hero-title{
  /* Tighter clamp + nowrap on the wrapper-less inline content so each
     "More jobs." / "Less work." stays on its own single line. */
  font-size: clamp(44px, 8vw, 108px);
  line-height:.95;
  letter-spacing:-0.03em;
  font-weight:900;
  margin:0 0 22px;
  white-space:nowrap;
}
.hero-rule{width:64px;height:4px;background:var(--orange);border-radius:2px;margin:6px 0 22px}

/* "Forgotten customers cost you everything." is the only line allowed to
   wrap. It splits ONLY between "customers" and "cost" because each phrase
   is wrapped in a non-breaking inline-block. */

.hero-copy{max-width:520px}

.hero-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
  /* prevent any descendant from causing horizontal page overflow */
  contain:paint;
}
.hero-bg img{
  position:absolute;
  /* Lock the hiker to a fixed offset relative to the container's right edge.
     The container max-width is 1280px and centers in viewport, so we use
     calc that pins to (viewport center + half-container - inset).
     Position stays STABLE across resizes — only size scales. */
  left:50%;
  top:50%;
  transform:translate(calc(-50% - 70px), -50%);
  width:93.5vw;
  max-width:none;
  height:auto;
  /* The srcset files are rounded to whole pixels, so hold the original shape exactly. */
  aspect-ratio:1672/941;
  opacity:.95;
  /* Feather all four edges with soft fades so the image blends into the
     hero background instead of showing a hard rectangular boundary. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 150px, #000 calc(100% - 150px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 150px, #000 calc(100% - 150px), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0, #000 150px, #000 calc(100% - 150px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 150px, #000 calc(100% - 150px), transparent 100%);
          mask-composite: intersect;
  /* Blend the image's dark base into the navy hero so only the bright
     wireframe + flag + camp glow survive. This is what kills the
     visible rectangular edge. */
  mix-blend-mode: lighten;
}

/* ===== Campfire flicker overlay =====
   Positioned to sit on top of the fire baked into hero-mountain-wide.png.
   Two layers: a soft outer glow (slow pulse) and a tight bright core
   (quick irregular flicker). Both use mix-blend-mode so they brighten
   the existing flame pixels rather than draw on top. */
.hero-fire{
  position:absolute;
  /* Mirror image positioning EXACTLY so flicker stays glued to the fire pixel. */
  left:50%;
  top:50%;
  transform:translate(calc(-50% - 70px), -50%);
  width:93.5vw;
  /* Image aspect ratio is ~872/458 ≈ 1.904. Use that to match height. */
  aspect-ratio: 872 / 458;
  pointer-events:none;
}
.hero-fire-glow,
.hero-fire-core{
  position:absolute;
  /* Anchored to the actual brightest fire pixel in the artwork (sampled) */
  left:71.3%;
  top:80.5%;
  transform:translate(-50%, -50%);
  border-radius:50%;
  pointer-events:none;
  mix-blend-mode: screen;
  will-change: opacity, transform;
}
.hero-fire-glow{
  width:6.5%;
  aspect-ratio:1;
  background: radial-gradient(circle,
    rgba(255,168,80,.55) 0%,
    rgba(242,84,45,.30) 35%,
    rgba(242,84,45,.10) 60%,
    rgba(242,84,45,0) 80%);
  filter: blur(3px);
  animation: fireGlow 5.2s ease-in-out infinite;
}
.hero-fire-core{
  width:2.4%;
  aspect-ratio:1;
  background: radial-gradient(circle,
    rgba(255,230,170,.85) 0%,
    rgba(255,170,60,.55) 40%,
    rgba(242,84,45,.20) 70%,
    rgba(242,84,45,0) 100%);
  filter: blur(1.2px);
  animation: fireCore 3.7s ease-in-out infinite;
}
@keyframes fireGlow{
  /* irregular stops + irregular scale to feel non-mechanical */
  0%   { opacity:.85; transform:translate(-50%,-50%) scale(1); }
  11%  { opacity:1.0; transform:translate(-50%,-50%) scale(1.10); }
  19%  { opacity:.78; transform:translate(-50%,-50%) scale(.96); }
  31%  { opacity:.95; transform:translate(-50%,-50%) scale(1.06); }
  44%  { opacity:.7;  transform:translate(-50%,-50%) scale(.92); }
  58%  { opacity:1.0; transform:translate(-50%,-50%) scale(1.12); }
  68%  { opacity:.82; transform:translate(-50%,-50%) scale(1.0);  }
  79%  { opacity:.92; transform:translate(-50%,-50%) scale(1.07); }
  91%  { opacity:.74; transform:translate(-50%,-50%) scale(.95); }
  100% { opacity:.85; transform:translate(-50%,-50%) scale(1); }
}
@keyframes fireCore{
  /* slower, irregular flicker — uneven keyframe stops + sub-pixel jitter */
  0%   { opacity:.95; transform:translate(-50%,-50%) scale(1); }
  9%   { opacity:.65; transform:translate(-49.5%,-50.5%) scale(.88); }
  17%  { opacity:1.0; transform:translate(-50.5%,-49.5%) scale(1.08); }
  26%  { opacity:.78; transform:translate(-50%,-50%) scale(.95); }
  37%  { opacity:.55; transform:translate(-49%,-51%) scale(.82); }
  48%  { opacity:.92; transform:translate(-50%,-50%) scale(1.04); }
  56%  { opacity:1.0; transform:translate(-50.5%,-49.5%) scale(1.12); }
  64%  { opacity:.7;  transform:translate(-49.5%,-50.5%) scale(.92); }
  73%  { opacity:.85; transform:translate(-50%,-50%) scale(1.0);  }
  81%  { opacity:.6;  transform:translate(-50.5%,-50%) scale(.86); }
  89%  { opacity:.95; transform:translate(-49.5%,-50%) scale(1.06); }
  100% { opacity:.95; transform:translate(-50%,-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .hero-fire-glow, .hero-fire-core{ animation:none; }
}

.hero-copy{position:relative;z-index:2}

/* ============ BAND BASE ============ */
.band{padding:clamp(96px, 12vw, 200px) 0}
.band-light{background:#fff}
.band-cream{background:var(--cream);position:relative}
.band-dark{background:var(--ink);color:#fff}

/* ============ SECTION BACKGROUNDS ============ */
.section-bg{position:relative;overflow:hidden}
.section-bg::after{
  content:"";position:absolute;inset:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  pointer-events:none;z-index:0;
  opacity:.08;
}
.section-bg > .container{position:relative;z-index:1}
#fix.section-bg::after{background-image:url("assets/backgrounds/what-we-handle-bg-black.png");background-image:image-set(url("assets/backgrounds/what-we-handle-bg-black.webp") type("image/webp"),url("assets/backgrounds/what-we-handle-bg-black.png") type("image/png"))}
#what.section-bg::after{background-image:none}
.backoffice-band.section-bg::after{
  background-image:url("assets/backgrounds/plans-pricing-bg-white.png");background-image:image-set(url("assets/backgrounds/plans-pricing-bg-white.webp") type("image/webp"),url("assets/backgrounds/plans-pricing-bg-white.png") type("image/png"));
  background-size:3600px auto;
  background-position:right bottom -110px;
  opacity:.08;
}
.faq-band.section-bg::after{background-image:url("assets/backgrounds/difference-bg-black.png");background-image:image-set(url("assets/backgrounds/difference-bg-black.webp") type("image/webp"),url("assets/backgrounds/difference-bg-black.png") type("image/png"))}
.faq-band.section-bg::after{background-image:none}
.faq-band{overflow:hidden}
.faq-band .container{overflow:visible}
.faq-band .container::before{
  content:"";position:absolute;
  left:-49.5%;top:-200px;
  width:286%;height:1200px;
  background:url("assets/backgrounds/difference-bg-black.png") no-repeat left top;
  background-image:image-set(url("assets/backgrounds/difference-bg-black.webp") type("image/webp"),url("assets/backgrounds/difference-bg-black.png") type("image/png"));
  background-size:100% auto;
  pointer-events:none;z-index:-1;opacity:.04;
  -webkit-mask-image:
    linear-gradient(to left,transparent,black 250px),
    linear-gradient(to top,transparent,black 250px);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to left,transparent,black 250px),
    linear-gradient(to top,transparent,black 250px);
  mask-composite:intersect;
}
#contact.section-bg::after{background-image:url("assets/backgrounds/contact-cta-bg-black.png");background-image:image-set(url("assets/backgrounds/contact-cta-bg-black.webp") type("image/webp"),url("assets/backgrounds/contact-cta-bg-black.png") type("image/png"));transform:scaleX(-1)}

.highlight-underline{
  font-style:italic;
  text-decoration:underline;
  text-decoration-color:var(--orange);
  text-underline-offset:4px;
  text-decoration-thickness:3px;
}
.highlight-underline-plain{
  text-decoration:underline;
  text-decoration-color:var(--orange);
  text-underline-offset:2px;
  text-decoration-thickness:2px;
}
.eyebrow{
  font-size:12px;font-weight:800;letter-spacing:.16em;
  color:var(--orange);text-transform:uppercase;margin-bottom:14px;
}
.eyebrow.center{text-align:center;margin-bottom:34px}
.eyebrow-light{color:var(--orange)}

.h2{
  font-size: clamp(34px, 3.6vw, 50px);
  line-height:1.05;letter-spacing:-0.02em;font-weight:900;margin:0 0 22px;
}
.h2.center{text-align:center;margin:0 auto 56px;max-width:900px}
.h2.light{color:#fff}
.lead{font-size:17px;line-height:1.55;color:var(--muted);margin:0 0 22px;max-width:520px}
.light-sub{color:rgba(255,255,255,.75);font-size:17px;margin:8px 0 0}
.section-sub{font-size:19px;line-height:1.55;color:var(--muted);margin:-44px auto 48px;max-width:600px}
.section-sub.center{text-align:center}

/* ============ TRUST CARDS ============ */
section.trust-band{padding:140px 0 152px;position:relative;overflow:hidden}
section.trust-band::before{
  content:"";position:absolute;inset:0;
  background-image:url("assets/backgrounds/our-promise-bg-black.png");background-image:image-set(url("assets/backgrounds/our-promise-bg-black.webp") type("image/webp"),url("assets/backgrounds/our-promise-bg-black.png") type("image/png"));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  pointer-events:none;
  opacity:.08;
  z-index:1;
}
.trust-steps{
  max-width:920px;margin:56px auto 0;position:relative;z-index:2;
}
section.trust-band .container{position:relative;z-index:2}
.trust-step-row{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:0 0;
  align-items:center;
  position:relative;
  margin-bottom:18px;
  max-width:920px;margin-left:auto;margin-right:auto;
}
.trust-step-row::before{
  content:'';position:absolute;
  top:50%;left:12%;right:12%;
  border-top:2px dashed rgba(3,8,28,.18);
  z-index:0;
}
.trust-step-num{
  width:36px;height:36px;border-radius:50%;
  background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;
  margin:0 auto;position:relative;z-index:1;
  border:4px solid var(--cream);
}
.trust-step-arrow{
  color:var(--orange);font-size:22px;font-weight:700;
  text-align:center;position:relative;z-index:1;
  line-height:1;
}
.trust-cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.trust-card{
  background:#fff;color:var(--ink);
  border:1px solid var(--line);border-bottom:3px solid var(--orange);
  border-radius:var(--radius);
  padding:28px 20px 24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  box-shadow:0 8px 24px rgba(11,18,32,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.trust-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(11,18,32,.1);
}
.trust-ic{
  width:48px;height:48px;border-radius:12px;
  background:var(--orange-soft);color:var(--orange);
  display:flex;align-items:center;justify-content:center;
}
.trust-card h4{font-size:15px;margin:4px 0 0;font-weight:700;letter-spacing:-.005em}
.trust-card p{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0;text-wrap:balance}

/* ============ WHAT YOU GET ============ */
.what-layout{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
}
.what-stack{
  display:flex;flex-direction:column;gap:14px;
}
.what-devices{display:flex;align-items:center;justify-content:center;order:-1}
.what-devices .device-img{max-width:100%;height:auto}
.what-tile{
  display:flex;align-items:center;gap:24px;
  background:linear-gradient(180deg,#fff 0%,#f9f7f5 100%);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px 32px;
  box-shadow:0 2px 4px rgba(11,18,32,.04),0 8px 24px rgba(11,18,32,.07);
  transition:transform .25s ease,box-shadow .25s ease;
}
.what-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 8px rgba(11,18,32,.06),0 16px 40px rgba(11,18,32,.12);
}
.what-tile-num{
  flex-shrink:0;
  width:56px;height:56px;border-radius:14px;
  background:var(--orange-soft);color:var(--orange);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:900;letter-spacing:-.02em;
  line-height:1;
}
.what-tile-body{display:flex;flex-direction:column;gap:4px}
.what-tile-body strong{font-size:17px;font-weight:700;color:var(--ink)}
.what-tile-body span{font-size:14px;line-height:1.5;color:var(--muted)}

/* ============ PAIN SECTION ============ */
.pain-layout{
  display:grid;grid-template-columns:2fr 3fr;gap:48px;
  align-items:center;max-width:1100px;margin:0 auto;
}
.pain-image{border-radius:var(--radius-lg);overflow:hidden;align-self:stretch}
.pain-image img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1672/941}
.pain-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
}
.pain-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:28px 22px 24px;text-align:left;
  display:flex;flex-direction:column;gap:8px;
  transition:transform .25s ease, background .25s ease;
}
.pain-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.1);
}
.pain-card h4{font-size:17px;font-weight:800;color:#fff;margin:0;letter-spacing:-.01em}
.pain-card p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.6);margin:0;text-wrap:balance}

/* ============ SOLUTION (THE FIX) ============ */
.fix-band{background:#fff;background:radial-gradient(ellipse at 30% 40%,#faf8f6 0%,#fff 60%)}
.fix-band .container{position:relative;z-index:1}
.fix-layout{
  display:grid;grid-template-columns:auto 1fr;gap:32px;
  align-items:center;max-width:1100px;margin:0 auto;
}
.fix-image{border-radius:var(--radius-lg);overflow:hidden;align-self:stretch}
.fix-image img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1672/941}
.fix-grid{
  display:grid;grid-template-columns:1fr;gap:16px;
  max-width:510px;
}
.fix-card{
  background:linear-gradient(180deg,var(--cream) 0%,#ede7de 100%);
  border:1.5px solid rgba(242,84,45,.45);border-radius:18px;
  padding:24px 28px;
  display:grid;grid-template-columns:180px 24px 1fr;gap:12px;align-items:center;
  box-shadow:0 2px 4px rgba(11,18,32,.04),0 8px 24px rgba(11,18,32,.07);
  transition:transform .25s ease, box-shadow .25s ease;
}
.fix-card:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 8px rgba(11,18,32,.06),0 16px 40px rgba(11,18,32,.12);
}
.fix-problem{
  font-size:19px;font-weight:800;color:var(--ink);line-height:1.25;
  text-align:center;
}
.fix-arrow{
  color:var(--orange);font-size:28px;font-weight:700;text-align:left;margin-left:-10px;
  transition:padding-left .2s ease;
}
.fix-solution{
  font-size:16px;line-height:1.55;color:var(--muted);font-weight:600;
}
/* Phones: the answer goes under the problem, with the arrow pointing down. Side by side, the answer
   column shrank to one word per line and pushed the cards past the screen edge. */
@media (max-width:560px){
  .fix-card{grid-template-columns:1fr;gap:6px;text-align:center}
  .fix-arrow{margin:0;text-align:center;line-height:1;rotate:90deg}
}

/* ============ HOW IT WORKS (DARK - ORIGINAL) ============ */
.steps{
  display:grid;grid-template-columns: 1fr 24px 1fr 24px 1fr;
  align-items:start;gap:0 18px;position:relative;
  max-width:1000px;margin:0 auto;
  padding-top:8px;
}
.step{text-align:center;position:relative;z-index:1;padding:0 12px}
.step h4{font-size:18px;font-weight:700;margin:0 0 10px;color:#fff}
.step p{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.65);margin:0;max-width:260px;margin-left:auto;margin-right:auto}

/* ============ ONLINE PRESENCE ============ */
.pres-band{position:relative;overflow:hidden}
.band.pres-band{padding-top:96px;padding-bottom:96px}
.pres-band::before{
  content:"";position:absolute;inset:0;
  background-image:url("assets/presence-bg-1672.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  pointer-events:none;
  mix-blend-mode:multiply;
}

/* device illustration: real artwork showing laptop + phone in 3/4 perspective */

.device-img{
  width:100%;
  height:auto;
  aspect-ratio:1717/916;
  display:block;
  /* image background is light cream matching --cream — blends naturally */
}

/* ============ PLANS (BACK OFFICE - DARK) ============ */
.backoffice-band{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding-bottom:clamp(48px, 6vw, 80px)}
.backoffice-band .h2{color:#fff}
.plans{display:grid;grid-template-columns: repeat(3,1fr);gap:18px;position:relative}
.plan{
  background:#fff;border:1px solid rgba(11,18,32,.08);border-radius:var(--radius-lg);
  padding:28px 18px 22px;display:flex;flex-direction:column;gap:6px;position:relative;
  color:var(--ink);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.plan:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(11,18,32,.18);
  border-color: rgba(11,18,32,.16);
}
.plan-popular:hover{
  box-shadow: 0 22px 48px rgba(242,84,45,.32);
  border-color: var(--orange);
}
.plan-name{font-weight:900;font-size:24px;letter-spacing:-.01em;color:var(--ink);text-align:center}
.plan-price{font-size:48px;font-weight:900;letter-spacing:-.02em;line-height:1.05;margin-top:8px;color:var(--ink);white-space:nowrap}
.plan-price span{font-size:14px;color:var(--muted);font-weight:600;margin-left:4px}
.plan-desc{font-size:14px;color:var(--muted);line-height:1.5;margin:6px 0 10px}
.plan-feats{display:grid;gap:10px;margin:0 0 16px;border-top:1px solid var(--line);padding-top:18px;color:var(--ink)}
.plan-feats li{display:flex;align-items:center;gap:10px;font-size:15.5px;color:var(--ink)}
.plan-popular{
  border:1.5px solid var(--orange);
  box-shadow:0 10px 30px rgba(242,84,45,.18);
}
.plan-tag{
  position:absolute;
  top:0;left:50%;
  transform:translate(-50%,-100%);
  background:var(--orange);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;
  padding:7px 16px;
  border-radius:8px 8px 0 0;
  white-space:nowrap;
  line-height:1;
}
.plan-feats li::before{
  content:"";flex-shrink:0;width:16px;height:16px;border-radius:50%;background:var(--orange);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.5 2.5 4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.plan-btn{justify-content:center;margin-top:auto}

/* ============ FAQ ============ */
.faq-list{
  max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:12px;
}
.faq-card{
  background:#fff;border:1px solid rgba(11,18,32,.08);border-radius:14px;
  box-shadow:0 1px 3px rgba(11,18,32,.04);
  overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.faq-card:hover{border-color:rgba(11,18,32,.14);box-shadow:0 2px 8px rgba(11,18,32,.07)}
.faq-card summary{
  display:flex;align-items:center;gap:16px;
  padding:20px 24px;cursor:pointer;list-style:none;
  font-size:18px;font-weight:700;color:var(--dark);line-height:1.35;
  flex-direction:row-reverse;justify-content:flex-end;
}
.faq-card summary::-webkit-details-marker{display:none}
.faq-card summary::marker{display:none;content:""}
.faq-icon{
  flex-shrink:0;width:28px;height:28px;position:relative;
  border-radius:50%;background:var(--orange);
  transition:transform .25s ease,background .25s ease;
}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;top:50%;left:50%;
  background:#fff;border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .25s ease,opacity .2s ease;
}
.faq-icon::before{width:14px;height:2px}
.faq-icon::after{width:2px;height:14px}
.faq-card[open] .faq-icon::after{opacity:0}
.faq-body{padding:0 24px 20px 64px}
.faq-body p{font-size:15px;color:var(--muted);line-height:1.65;margin:0}

/* ============ FINAL CTA ============ */
.cta-final{
  position:relative;overflow:hidden;
}
/* The band's padding lives on .cta-row, so the section adds none at any size (.band pads the others). */
.band.cta-final{padding:0}
.cta-bg{
  position:absolute;left:50%;top:50%;transform:translate(calc(-50% - 351px),calc(-50% + 20px));
  width:568px;aspect-ratio:1672/941;opacity:.8;pointer-events:none;
  -webkit-mask-image: linear-gradient(to right, transparent 0px, #000 50px, #000 calc(100% - 50px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0px, #000 50px, #000 calc(100% - 50px), transparent 100%);
}
.cta-row{
  display:grid;grid-template-columns: 320px 1fr auto;gap:56px;align-items:center;
  position:relative;z-index:1;
  /* keep container's horizontal padding — only override vertical */
  padding-top:56px;padding-bottom:56px;
}
.cta-row .logo-light{align-self:start;justify-self:start}
.logo-light{color:#fff}
.cta-text .h2{margin:0;font-size: clamp(26px, 2.4vw, 36px)}
.cta-btn{padding:16px 22px;font-size:15px}

/* ============ HAMBURGER + MOBILE NAV ============ */
.nav-burger{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  background:transparent;border:1.5px solid rgba(255,255,255,.22);
  border-radius:10px;cursor:pointer;color:#fff;
  padding:0;
  position:relative;
  z-index:120; /* sit above the mobile menu overlay so the X stays clickable */
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.nav-burger:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.nav-burger:active{transform:scale(.96)}
.nav-burger svg{display:block}
.nav-burger .ic-close{display:none}
body.menu-open .nav-burger{
  /* When the menu is open, lock the burger to the top-right of the viewport
     so it's always reachable. Match the menu's inner padding so the X aligns
     vertically with the BASE CAMP HQ logo inside the drawer. */
  position:fixed;
  top:22px;
  right:clamp(20px, 5vw, 40px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.28);
}
body.menu-open .nav-burger .ic-open{display:none}
body.menu-open .nav-burger .ic-close{display:block}

.mobile-menu{
  position:fixed;inset:0;z-index:100;
  background:#01061B;
  display:none;
  flex-direction:column;
  /* No outer padding — children manage their own insets so the close button
     can sit flush at top-right and the gradient/lines run edge-to-edge. */
  padding:0;
  overflow-y:auto;
  /* Subtle radial glow + soft mountain silhouette in the bg for brand feel */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 110%, rgba(242,84,45,.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(242,84,45,.08), transparent 70%);
}
body.menu-open .mobile-menu{display:flex}
body.menu-open{overflow:hidden}

.mm-head{
  display:flex;align-items:center;
  padding:18px clamp(20px, 5vw, 40px);
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.mm-head .logo{color:#fff}

.mm-nav{
  display:flex;flex-direction:column;
  padding:8px clamp(20px, 5vw, 40px) 8px;
  flex:1 1 auto;
}
.mm-nav a{
  color:#fff;text-decoration:none;
  font-size:18px;font-weight:600;
  padding:18px 4px;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;
  transition: color .15s ease, padding-left .2s ease;
}
.mm-nav a:hover{color:var(--orange);padding-left:8px}
.mm-nav a:last-child{border-bottom:0}
.mm-nav a .arrow{
  color:rgba(255,255,255,.35);
  font-size:18px;font-weight:400;
  transition: transform .2s ease, color .2s ease;
}
.mm-nav a:hover .arrow{color:var(--orange);transform:translateX(4px)}

.mm-actions{
  display:flex;flex-direction:column;gap:10px;
  padding:18px clamp(20px, 5vw, 40px) calc(24px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.015);
  flex-shrink:0;
}
.mm-actions .btn{justify-content:center;width:100%;font-size:15px;padding:15px 22px}
.mm-actions .btn-ghost{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.18);
}
.mm-actions .btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32)}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .faq-list{max-width:720px}
  .nav{display:none}
  .nav-burger{display:inline-flex}
}
@media (max-width:960px){
  .trust-cards{grid-template-columns:repeat(2,1fr)}
  .trust-step-row{display:none}
  .trust-step-arrow{display:none}
  section.trust-band{padding:72px 0 80px}
  .pain-layout{grid-template-columns:1fr;gap:32px}
  .pain-image{max-width:560px;margin:0 auto;aspect-ratio:16/9}
  .pain-image img{max-height:360px}
  .pain-grid{max-width:560px;margin:0 auto}
  .fix-layout{grid-template-columns:1fr;gap:32px}
  .fix-image{max-width:560px;margin:0 auto;aspect-ratio:16/9;order:-1}
  .fix-image img{max-height:360px}
  .fix-grid{max-width:560px;margin:0 auto}
  .what-layout{grid-template-columns:1fr;gap:32px}
  .what-devices{max-width:560px}
  .plans{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:1fr;gap:32px}
  .band{padding:72px 0}

  /* Final CTA: stack in a clean centered column so logo/heading/button line up */
  .cta-row{
    grid-template-columns:1fr;
    text-align:center;
    gap:20px;
    justify-items:center;
  }
  .cta-row .logo-light{justify-self:center}
  .cta-actions{align-items:center;width:auto}
  .cta-bg{display:none}

  /* Admin row: center the heading + body when stacked */

  /* Online presence: copy left, devices below, both flush to container left */

  /* Plans: heading column above, plan cards below in a 3-up that adapts */

}

/* Plans collapse to 1-up only when cards get too narrow */
@media (max-width:720px){
  .plans{grid-template-columns:1fr}
}

@media (max-width:560px){
  .trust-cards{grid-template-columns:repeat(2,1fr);gap:12px}
  .pain-grid{grid-template-columns:1fr;gap:14px}
  .pain-image img{max-height:280px}
  .fix-image img{max-height:280px}
  .faq-card summary{font-size:16px;padding:16px 20px}
  .faq-body{padding:0 20px 16px}
  .nav-cta{display:none}

  /* Hero — scale down padding & give the copy more vertical room */
  .hero{padding-bottom: clamp(48px, 10vw, 90px)}
  .hero-title{
    /* Allow wrapping on the smallest screens so it doesn't get too tiny.
       Each "More jobs." / "Less work." still fits its own line at this size. */
    font-size: clamp(48px, 13vw, 64px);
    margin-bottom:18px;
  }
  .hero-rule{margin:4px 0 18px}

  /* Section bands — tighter top/bottom on mobile */
  .band{padding:56px 0}
  .band.pres-band{padding-top:48px;padding-bottom:48px}

  /* Headings — smaller floor on small screens */
  .h2{font-size: clamp(28px, 8vw, 38px);margin:0 0 18px}
  .h2.center{margin-bottom:36px}
  .lead{font-size:16px}

  /* Admin row — stack icon above heading, tighten gap */

  /* Handle cards — readable text */

  /* Steps */
  .steps{gap:24px}
  .step h4{font-size:17px}
  .step p{font-size:14px}

  /* Online presence price block */

  /* Plans */
  .plans{gap:14px}
  .plan{padding:24px 20px 20px}
  .plan-price{font-size:38px}
  .plan-name{font-size:20px}
  .plan-desc{font-size:13.5px}
  .plan-feats li{font-size:14px}

  /* Difference */

  /* Contact */

  /* Final CTA — reduce overlap with bg image */
  .cta-bg{width:220px;left:-60px;opacity:.45}
  .cta-row{padding:56px 0;gap:20px}
  .cta-row .logo-light{padding-left:0;justify-self:center}
  .cta-text .h2{font-size: clamp(24px, 7vw, 32px)}
  .light-sub{font-size:15px}
  .cta-actions .btn{width:100%;justify-content:center}
}

/* Extra-narrow (≤380px): ensure nothing breaks */
@media (max-width:380px){
  .container{padding:0 22px}
  .nav-row{padding:18px 0}
  .hero-title{font-size:46px}
}
/* Under 360px the logo and the menu button don't both fit, so the logo shrinks (keeping its shape) and the button stays on screen. */
@media (max-width:359px){
  .nav-row > .logo{flex:0 1 auto;min-width:0}
  .site-nav .logo-full{width:291px;height:auto;max-width:100%}
}

/* prevent horizontal overflow at all sizes */
html,body{overflow-x:hidden}

/* ============ CONTACT FORM ============ */

/* Subtle "email instead" link below the hero CTAs */

/* Final-CTA dual buttons */
.cta-actions{
  display:flex;flex-direction:column;gap:10px;
  align-items:flex-end;
}
@media (max-width:960px){
  .cta-actions{align-items:center}
}

/* ============ SITE FOOTER ============ */
.site-foot{
  position:relative;z-index:1;
  color:rgba(255,255,255,.55);
  padding:22px 0 18px;
}
/* The legal line and the two links share one row at desktop, and stack when there isn't room. */
.site-foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px}
.site-foot-copy{
  margin:0;font-size:13px;letter-spacing:.01em;
}
.site-foot-copy a{white-space:nowrap}
.site-foot-links{
  display:flex;align-items:center;gap:14px;
  font-size:13px;
}
.site-foot-links a{
  display:inline-flex;align-items:center;min-height:24px;
  color:rgba(255,255,255,.7);text-decoration:none;
  transition:color .15s ease;
}
.site-foot-links a:hover{color:#fff}
.site-foot-sep{color:rgba(255,255,255,.25)}
@media (max-width:560px){
  .site-foot{padding:18px 0 16px}
  .site-foot-row{flex-direction:column;align-items:flex-start}
  /* 44px to tap, drawn in the space of 24px. */
  .site-foot-links a{min-height:44px;margin:-10px 0}
}

/* ============ LEGAL PAGES ============ */
.legal-band{padding:80px 0 96px;background:var(--cream)}
.legal-wrap{max-width:900px;margin:0 auto}
.legal-wrap h1{
  font-size:clamp(34px,5vw,54px);font-weight:900;letter-spacing:-.02em;
  line-height:1.05;margin:0 0 10px;color:var(--ink);
}
.legal-meta{font-size:13px;color:var(--muted);margin:0 0 36px;letter-spacing:.02em}
.legal-wrap h2{
  font-size:22px;font-weight:800;letter-spacing:-.01em;
  margin:36px 0 12px;color:var(--ink);
}
.legal-wrap p{
  font-size:16px;line-height:1.65;color:var(--ink);margin:0 0 14px;
}
.legal-wrap ul,.legal-wrap ol{padding-left:24px;margin:4px 0 10px}
.legal-wrap ul{list-style:disc}
.legal-wrap ol{list-style:decimal}
.legal-wrap li{font-size:15px;line-height:1.5;color:var(--ink);margin-bottom:3px}
.legal-wrap li:last-child{margin-bottom:0}
.legal-wrap h2{margin:28px 0 8px}
.legal-wrap h2:first-of-type{margin-top:28px}
.legal-wrap p{margin:0 0 8px}
.legal-wrap code{
  font-size:14px;background:rgba(0,0,0,.05);padding:2px 6px;border-radius:4px;
  font-family:'SF Mono',Menlo,monospace;
}
.legal-wrap a{color:var(--orange);text-decoration:none;border-bottom:1px solid rgba(242,84,45,.35)}
.legal-wrap a:hover{border-color:var(--orange)}

/* Slim header on legal pages */
.legal-head{
  background:var(--ink);padding:18px 0;
}
.legal-head .container{
  display:flex;align-items:center;justify-content:space-between;
}
.legal-head .logo{color:#fff}
.legal-head .nav-actions a{color:#fff;font-size:14px;text-decoration:none;opacity:.85}
.legal-head .nav-actions a:hover{opacity:1}

/* Release: legal/contact readability without changing the original visual system. */
#contact p {max-width: 760px; margin: 1.2rem 0; line-height: 1.7;}
.site-foot-copy {line-height: 1.6;}
.plan p {line-height: 1.6; margin: 1rem 0;}
html {scroll-padding-top: 100px;}
/* Sections take focus after a same-page link glides to them; no ring around the whole section. */
[tabindex="-1"]:focus {outline: none;}
.site-nav.scrolled .nav-burger {color:var(--ink); border-color:rgba(11,18,32,.3)}
body > .site-foot {background:var(--ink)}
.legal-head {background:var(--ink); padding:24px 0}
.legal-head .container {display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.legal-head .logo-full {max-width:280px; width:100%}
.legal-head a {color:white}
@media (max-width:560px) {.legal-head .logo-full {max-width:230px}}

/* ============ EXAMPLE DEVICE CAPTION ============ */
figure.what-devices{margin:0;flex-direction:column;gap:10px}
.what-devices figcaption{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ============ PLANS: THREE UP ============ */
.plans-head{text-align:center;max-width:720px;margin:0 auto 64px;position:relative;z-index:1}
.plans-head .h2{margin-bottom:14px}
.plans-sub{font-size:17px;line-height:1.55;color:rgba(255,255,255,.72);margin:0}
.plans-three{grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;max-width:1080px;margin:0 auto;z-index:1}
.plans-three .plan{padding:32px 26px 26px;text-align:left}
.plans-three .plan-name{text-align:left;font-size:22px}
.plans-three .plan p.plan-desc{margin:4px 0 0;font-size:14.5px;line-height:1.5}
.plans-three .plan-price{margin:14px 0 6px;font-size:44px}
.plans-three .plan-feats{text-align:left;margin-bottom:22px}
.plans-three .plan-feats li{align-items:flex-start;font-size:15px;line-height:1.45}
.plans-three .plan-feats li::before{margin-top:2px}
.plan .btn-ghost{color:var(--ink);border-color:rgba(11,18,32,.18)}
.plan .btn-ghost:hover{background:rgba(11,18,32,.04);border-color:rgba(11,18,32,.35)}
@media (max-width:960px){
  .plans-three{grid-template-columns:1fr;max-width:480px;gap:36px}
  .plans-head{margin-bottom:48px}
}

/* ============ CONTACT ============ */
.contact-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
#contact .contact-copy p.lead{max-width:520px;margin:0 0 22px;font-size:18px;line-height:1.6}
.contact-card{
  background:#fff;border:1px solid var(--line);border-bottom:3px solid var(--orange);border-radius:var(--radius-lg);
  padding:34px 30px;box-shadow:0 18px 48px -24px rgba(11,18,32,.28);
  display:flex;flex-direction:column;gap:14px;
}
#contact .contact-card p{margin:0;max-width:none;line-height:1.5}
#contact .contact-card-title{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
#contact .contact-card-note{font-size:14px;color:var(--muted);text-align:center}
.contact-alt{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;
  border-top:1px solid var(--line);padding-top:16px;margin-top:4px;
  font-size:14px;color:var(--muted);text-align:center;
}
.contact-alt a{color:var(--ink);font-weight:600;border-bottom:1px solid rgba(11,18,32,.2)}
.contact-alt a:hover{color:var(--orange);border-color:var(--orange)}
.copy-email{
  font:inherit;font-size:13px;font-weight:600;color:var(--orange);
  background:var(--orange-soft);border:0;border-radius:8px;padding:6px 10px;cursor:pointer;
}
.copy-email:hover{background:#ffe2d8}
@media (max-width:960px){
  .contact-wrap{grid-template-columns:1fr;gap:36px}
}

/* ============ FINAL CTA ART (kept clear of the footer) ============ */
.cta-art{
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, #000 70%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 70%, transparent 100%);
}
.cta-art .cta-bg{transform:translate(calc(-50% - 351px), calc(-50% + 20px))}
@media (max-width:960px){.cta-art{display:none}}

/* ============ 404 ============ */
.notfound{min-height:60vh;display:flex;align-items:center}
.notfound .legal-wrap h1{margin-bottom:16px}
.notfound .legal-wrap p{font-size:18px;max-width:560px}
.notfound-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px !important}
.legal-wrap .btn{border-bottom:0}
.legal-wrap .btn-primary{color:#fff}
.legal-wrap .btn-ghost{color:var(--ink);border:1.5px solid rgba(11,18,32,.18)}
@media (max-width:560px){.section-sub{margin:-22px auto 32px;font-size:17px}}
@media (min-width:961px){.plans-three .plan p.plan-desc{min-height:3em}}
body.page-404{min-height:100vh;display:flex;flex-direction:column}
body.page-404 .notfound{flex:1 0 auto}

/* ============ B: PLAN FINDER HERO (same pattern as the sister sites' quote card) ============ */
.hero-b{min-height:auto;padding-top:112px;padding-bottom:clamp(56px, 7vw, 96px)}
.hero-b .hero-bg img,
.hero-b .hero-fire{transform:translate(calc(-50% + 40px), -50%);opacity:.5}
.hero-b-grid{display:grid;grid-template-columns:minmax(0,1fr) 452px;gap:56px;align-items:center;position:relative;z-index:2}
.hero-b .hero-copy{max-width:560px}
.hero-b .hero-title{font-size:clamp(46px, 6.2vw, 92px)}
.hero-eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin:0 0 18px}
.hero-lede{font-size:clamp(16px, 1.4vw, 19px);line-height:1.6;color:rgba(255,255,255,.82);max-width:480px;margin:0 0 28px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.hero-actions .btn{padding:16px 22px;font-size:16px}
.hero-secondary{color:#fff;font-size:15px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px}
.hero-secondary:hover{border-color:var(--orange)}

.hero-planner{width:100%;max-width:452px;justify-self:end}
.visit-planner{
  background:#fffdf8;color:var(--ink);border-radius:20px;padding:20px 20px 16px;
  box-shadow:0 34px 90px -28px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
  display:flex;flex-direction:column;text-align:left;
}
.visit-planner [hidden]{display:none !important}
.vp-phase{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:.7;margin:2px 0 8px}
.vp-progress{height:3px;background:#ece4d8;border-radius:3px;overflow:hidden;margin:0 0 14px}
.vp-progress span{display:block;height:100%;width:25%;background:var(--orange);transition:width .3s ease}
.vp-stage{flex:1 0 auto}
.vp-step{display:flow-root} /* keeps each step's last margin inside it, so the card can measure it */
.visit-planner h2{font-size:30px;line-height:1.04;letter-spacing:-.04em;font-weight:900;margin:0 0 14px;color:var(--ink)}
.visit-planner h2:focus{outline:none}
.visit-planner fieldset{border:0;padding:0;margin:0 0 16px;min-width:0}
.visit-planner legend{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:0 0 10px;padding:0}
.vp-intro{font-size:15px;line-height:1.5;color:var(--muted);margin:-4px 0 16px}

/* picture tiles */
.vp-homes,.vp-needs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.visit-planner label{position:relative;cursor:pointer}
.vp-home input,.vp-need input{position:absolute;opacity:0;width:1px;height:1px}
.vp-home>span,.vp-need>span{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;
  min-height:98px;padding:6px 2px 9px;border:1px solid #e3dccf;border-radius:11px;background:#fff;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.vp-need>span{min-height:84px}
.vp-home svg{width:100%;height:auto;max-height:62px;aspect-ratio:1.4}
.vp-need svg{width:100%;height:auto;max-height:50px;aspect-ratio:1.4}
.vp-home b,.vp-need b{font-size:12.5px;font-weight:700;letter-spacing:-.015em;line-height:1.15;text-align:center}
.vp-home svg,.vp-need svg{transition:filter .2s ease, transform .2s ease, opacity .2s ease;transform-origin:center bottom}
.vp-home:hover svg,.vp-need:hover svg{transform:translateY(-3px)}
.vp-home input:checked+span,.vp-need input:checked+span{
  background:#fff3ee;border-color:var(--orange);box-shadow:0 4px 12px rgba(242,84,45,.16), inset 0 0 0 1px var(--orange);
}
.vp-homes:has(input:checked) input:not(:checked)+span svg,
.vp-needs-grid:has(input:checked) input:not(:checked)+span svg{filter:grayscale(1);opacity:.48;transform:scale(.92)}
.vp-home input:checked+span svg,.vp-need input:checked+span svg{filter:saturate(1.2) drop-shadow(0 4px 3px rgba(3,8,28,.14));transform:translateY(-3px) scale(1.06);opacity:1}
.visit-planner input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion: reduce){.vp-home svg,.vp-need svg{transition:none}}

/* plan reveal */
.vp-plan-reveal h2{margin-bottom:12px}
.vp-price-panel{display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;border-radius:14px;padding:14px 18px;margin:0 0 14px}
.vp-price-panel strong{font-size:44px;font-weight:900;letter-spacing:-.03em;line-height:1}
.vp-price-panel span{font-size:13px;line-height:1.35;color:rgba(255,255,255,.75);font-weight:600}

/* contact details */

/* done */
.vp-copy{width:100%;min-height:48px;border:0;border-radius:10px;background:var(--ink);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer;margin:4px 0 0}
.vp-copy:hover{background:#131d38}
.vp-done-alt{font-size:13.5px;color:var(--muted);text-align:center;margin:12px 0 10px}
.vp-done-alt a{color:var(--ink);font-weight:700;border-bottom:1px solid rgba(11,18,32,.25)}
.vp-edit{display:block;margin:0 auto;font:inherit;font-size:13.5px;font-weight:700;color:var(--orange);background:none;border:0;cursor:pointer}

/* footer and actions */
.vp-footer{margin-top:4px}
.vp-error{font-size:13px;font-weight:600;color:#b42318;margin:0 0 10px}
.vp-error:empty{display:none}
.vp-actions{display:flex;gap:8px}
#vp-next,#vp-send{
  flex:1;display:flex;justify-content:space-between;align-items:center;min-height:50px;border:0;border-radius:10px;
  background:var(--orange);color:#fff;font:inherit;font-size:16px;font-weight:700;padding:12px 18px;cursor:pointer;
  transition:background .15s ease, opacity .15s ease;
}
#vp-next:not(:disabled):hover,#vp-send:hover{background:var(--orange-2)}
#vp-next:disabled{opacity:.45;cursor:default}
#vp-back{border:0;border-radius:10px;background:#efe7dc;color:var(--ink);font:inherit;font-size:15px;font-weight:700;padding:0 18px;cursor:pointer}
.vp-foot{font-size:11.5px;text-align:center;color:var(--muted);margin:10px 0 0}

/* contact card email link */
.contact-email{font-size:20px;font-weight:800;color:var(--ink);word-break:break-all;border-bottom:2px solid rgba(242,84,45,.35);align-self:flex-start}
.contact-email:hover{color:var(--orange)}
.contact-start{margin-top:6px}
.contact-card .contact-alt{justify-content:flex-start;border-top:0;padding-top:0;margin-top:0}

/* sticky mobile CTA */
.sticky-cta{display:none}
@media (max-width:960px){
  .hero-b-grid{grid-template-columns:1fr;gap:36px}
  .hero-b .hero-copy{max-width:640px}
  .hero-planner{justify-self:start;max-width:520px}
  .sticky-cta{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:90;
    background:var(--orange);color:#fff;border-radius:14px;padding:12px 18px;
    box-shadow:0 12px 30px -8px rgba(3,8,28,.55);
    transform:translateY(140%);transition:transform .3s ease;
  }
  .sticky-cta.is-shown{transform:none}
  .sticky-cta-text{display:flex;flex-direction:column;line-height:1.2}
  .sticky-cta strong{font-size:16px;font-weight:800}
  .sticky-cta small{font-size:12.5px;opacity:.9;font-weight:500}
  .sticky-cta .arrow{font-size:20px;font-weight:700}
  body.menu-open .sticky-cta{display:none}
}
@media (max-width:560px){
  .hero-b{padding-top:100px}
  .hero-b .hero-title{font-size:clamp(46px, 13vw, 64px)}
  .hero-b .hero-bg img,.hero-b .hero-fire{opacity:.3}
  .hero-actions .btn{flex:1 1 auto;justify-content:center}
  .hero-secondary{margin:0 auto}
  .visit-planner{padding:16px 14px 14px;border-radius:18px}
  .visit-planner h2{font-size:27px}
  .vp-homes,.vp-needs-grid{gap:5px}
  .vp-home>span{min-height:88px}
  .vp-need>span{min-height:78px}
  .vp-home b,.vp-need b{font-size:11.5px}
}

/* Desktop: a wider card and bigger artwork. The card's height is set by the plan finder script. */
@media (min-width:961px){
  .hero-b-grid{grid-template-columns:minmax(0,1fr) 472px}
  .hero-planner{max-width:472px}
  .visit-planner{padding:22px 22px 16px}
  .visit-planner .vp-footer{margin-top:0}
  .vp-home>span{min-height:116px}
  .vp-home svg{max-height:76px}
  .vp-need>span{min-height:98px}
  .vp-need svg{max-height:60px}
  .visit-planner h2{font-size:32px}
}

/* Desktop: the nav and hero fill the first screen, leaving a 48px band of the next section in view.
   The finder is centred below the fixed 82px nav, and its tiles shrink on windows shorter than 690px.
   The finder grows upward from its first step (516px) to its tallest (650px), so its top starts at least
   232px down (8px under the nav, which is 88px tall at 961-1080px wide, plus the 134px it grows) wherever
   the first screen still fits it with the 48px band: 577px = 48px band + 518px card (Firefox draws it 2px
   taller than Chrome) + 10px padding + 1px. */
@media (min-width:961px){
  html{overflow-anchor:none}
  .hero-b{
    min-height:calc(100svh - 48px);justify-content:flex-start;
    padding-top:max(102px, min(max(232px, calc(82px + max(20px, (100svh - 650px) / 2))), calc(100svh - 577px)));padding-bottom:10px;
  }
  /* A growing card keeps its buttons on its bottom edge while its top edge rises. */
  .visit-planner{justify-content:flex-end}
  .hero-b .hero-bg{bottom:auto;height:calc(100svh - 48px)}
  .vp-home>span{min-height:clamp(78px, calc(116px - (690px - 100svh) * .55), 116px)}
  .vp-home svg{max-height:clamp(44px, calc(82px - (690px - 100svh) * .55), 76px)}
  .vp-need>span{min-height:clamp(68px, calc(98px - (690px - 100svh) * .45), 98px)}
  .vp-need svg{max-height:clamp(34px, calc(64px - (690px - 100svh) * .45), 60px)}
}
@media (min-width:961px) and (max-height:640px){
  .visit-planner{padding-top:16px}
  .vp-progress{margin-bottom:10px}
  .visit-planner h2{font-size:28px;margin-bottom:10px}
  .visit-planner legend{margin-bottom:6px}
  .visit-planner fieldset{margin-bottom:12px}
  .vp-foot{margin-top:6px}
}

/* ============ B: longer click-through flow inside the same card ============ */
.vp-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* to-do chips, like the sister sites' "What would you like done?" */
.vp-jobs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vp-jobs label{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:8px 10px 8px 12px;border:1px solid #e3dccf;border-radius:9px;background:#fff;transition:background .15s ease, border-color .15s ease}
.vp-jobs input{position:absolute;opacity:0;width:1px;height:1px}
.vp-jobs span{font-size:13.5px;font-weight:600;line-height:1.2}
.vp-jobs b{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:1.5px solid #cfc6b6;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--muted);line-height:1}
.vp-jobs b::before{content:"+"}
.vp-jobs label:has(input:checked){background:#fff3ee;border-color:var(--orange)}
.vp-jobs input:checked ~ b{background:var(--orange);border-color:var(--orange);color:#fff}
.vp-jobs input:checked ~ b::before{content:"✓";font-size:12px}
.vp-jobs label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.vp-todo-step .vp-intro{margin-bottom:12px}

/* plan reveal: the visitor's own list, ticked against the plan */

/* priorities, like Nextleaf's "What should we tackle first?" */

/* how to get back to you */

/* review */

@media (max-width:560px){
  .vp-jobs span{font-size:12.5px}
}
.visit-planner .vp-footer{padding-top:12px}

/* ============ B: the sister sites' later steps, in Basecamp colours ============ */
.visit-planner .vp-label{display:block;font-size:14px;font-weight:700;margin:12px 0 6px;color:var(--ink)}
.visit-planner .vp-label span{font-weight:500;color:var(--muted)}
.visit-planner .vp-hint{font-size:12.5px;line-height:1.4;color:var(--muted);margin:6px 0 0}
.vp-where input,.vp-access input[type=url],.vp-access textarea{
  width:100%;min-height:44px;border:1px solid #cfc6b6;border-radius:9px;background:#fff;padding:10px 12px;
  font:inherit;font-size:16px;font-weight:500;color:var(--ink);
}
.vp-access textarea{min-height:64px;resize:vertical}
.vp-where input:focus,.vp-access input:focus,.vp-access textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(242,84,45,.12)}
.vp-where .vp-label:first-of-type{margin-top:0}

/* team size, like the sister sites' hours tiles */
.visit-planner .vp-team{margin:0 0 14px}
.vp-team>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.vp-team input{position:absolute;opacity:0;width:1px;height:1px}
.vp-team span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:58px;border:1px solid #e3dccf;border-radius:10px;background:#fff;line-height:1.1}
.vp-team b{font-size:20px;font-weight:900;letter-spacing:-.02em}
.vp-team small{font-size:11.5px;font-weight:600;color:var(--muted)}
.vp-team input:checked+span{background:#fff3ee;border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.vp-team input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.vp-todo .vp-hint{margin:-4px 0 10px}

/* your plan, like "Your quote." */
.vp-quote-kicker{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--orange);margin:0 0 4px}
.vp-plan-reveal h2{margin-bottom:10px}
.vp-plan-reveal .vp-price-panel,.vp-payment .vp-price-panel{flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;padding:12px 16px;margin:0}
.vp-plan-reveal .vp-price-panel>span{font-size:12px;font-weight:700;color:rgba(255,255,255,.65)}
.vp-plan-reveal .vp-price-panel strong{font-size:44px}
.vp-plan-reveal .vp-price-panel p,.vp-payment .vp-price-panel p{margin:2px 0 0;font-size:13px;font-weight:600;color:rgba(255,255,255,.78)}
.visit-planner .vp-rate-note{text-align:center;font-size:12px;color:var(--muted);margin:6px 0 10px}
.vp-quote-hours{display:flex;align-items:center;justify-content:center;gap:18px;font-size:14px;font-weight:700}
.vp-quote-hours>div{display:flex;align-items:center;gap:12px}
.vp-quote-hours button{width:36px;height:36px;border:1px solid #cfc6b6;border-radius:50%;background:#fff;color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.vp-quote-hours button:hover:not(:disabled){border-color:var(--orange);color:var(--orange)}
.vp-quote-hours button:disabled{opacity:.3;cursor:default}
.vp-quote-hours output{min-width:92px;text-align:center;font-size:15px;font-weight:800}
.vp-quote-details{margin-top:12px;padding-top:4px;border-top:1px solid #e3dccf}
.vp-quote-details h3{font-size:13.5px;font-weight:800;margin:10px 0 4px}
.vp-quote-details ul{margin:0;padding-left:18px;list-style:disc;font-size:13.5px;line-height:1.5}
.vp-quote-details small{color:var(--muted);font-weight:600}
.vp-quote-details li.is-more{color:var(--muted)}

/* priorities, with a drag handle like the sister sites */

/* book a call, like "Schedule my visit." */
.vp-calendar-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 10px;font-size:14px}
.vp-calendar-nav button{width:32px;height:32px;border:1px solid #cfc6b6;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
.vp-calendar-nav button:disabled{opacity:.3;cursor:default}
.vp-dates{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.vp-dates button{padding:9px 0;border:1px solid #e3dccf;border-radius:10px;background:#fff;color:var(--ink);font:inherit;cursor:pointer}
.vp-dates span{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.vp-dates strong{display:block;font-size:20px;font-weight:800;margin-top:3px}
.vp-slot-heading{font-size:14px;font-weight:800;margin:14px 0 8px}
.vp-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.vp-slots button{padding:10px 4px;border:1px solid #e3dccf;border-radius:9px;background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.vp-dates button[aria-pressed=true],.vp-slots button[aria-pressed=true]{background:#fff3ee;border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.vp-dates button[aria-pressed=true] span{color:var(--orange)}
.vp-any-time{display:block;margin:10px auto 0;font:inherit;font-size:13.5px;font-weight:700;color:var(--orange);background:none;border:0;cursor:pointer;padding:4px}
.vp-any-time[aria-pressed=true]{background:#fff3ee;border-radius:999px;padding:6px 12px;box-shadow:inset 0 0 0 1px var(--orange)}
.visit-planner .vp-schedule-preview{font-size:11.5px;color:var(--muted);text-align:center;margin:8px 0 0}

/* call details, like "Your visit details." */
.visit-planner .vp-access-options{display:grid;gap:5px;margin:0 0 4px}
.vp-access-options label{display:flex;align-items:center;gap:10px;min-height:38px;padding:6px 12px;border:1px solid #e3dccf;border-radius:10px;background:#fff;font-size:14px;font-weight:600}
.vp-access-options input{accent-color:var(--orange);flex-shrink:0;margin:0}
.vp-access-options label:has(input:checked){background:#fff3ee;border-color:var(--orange)}
.vp-access .vp-access-label{margin-top:10px}
.vp-access .vp-access-label:first-of-type{margin-top:0}

/* review, like "Review your enquiry." */
.vp-payment .vp-price-panel strong{font-size:26px;line-height:1.15;white-space:pre-line}
.vp-payment .vp-intro{margin:12px 0}
.vp-booking-review summary{display:flex;justify-content:center;gap:10px;cursor:pointer;list-style:none;padding:10px;border:1px solid #cfc6b6;border-radius:9px;font-size:14px;font-weight:700;background:#fff}
.vp-booking-review summary::-webkit-details-marker{display:none}
.vp-booking-review summary span{transition:transform .3s ease}
.vp-booking-review[open] summary{background:#fff3ee}
.vp-booking-review[open] summary span{transform:rotate(180deg)}
/* The whole list shows, with no scrolling inside the card: each label shares a row with its answer. */
.vp-review-list{margin:8px 0 0;padding:0 4px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:baseline}
.vp-review-list dt{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.vp-review-list dd{margin:0;font-size:13.5px;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere}
/* Desktop: while the list is open it stands in for the summary above it (it repeats the call time and the plan),
   so the card fits the room above it and Send request and Back stay where they are. */
@media (min-width:961px){
  .vp-payment:has(.vp-booking-review[open]) :is(.vp-price-panel,.vp-intro){display:none}
}
.vp-lock{color:var(--orange);margin-right:4px}
@media (max-width:560px){
  .vp-team small{font-size:10.5px}
  .vp-dates strong{font-size:18px}
}
@media (max-width:560px){.vp-payment .vp-price-panel strong{font-size:22px}}

/* ============ Plan finder: online send (functions/api/plan-requests.js), sent state and email fallback ============ */
.vp-status{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 10px}
.vp-status:empty{display:none}
#vp-send[aria-disabled=true]{opacity:.7;cursor:wait}
#vp-back:disabled{opacity:.5;cursor:default}
.vp-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Cloudflare Turnstile: out of sight unless Cloudflare needs a tick (the script then adds .is-interactive). */
.vp-turnstile{margin:0}
.vp-turnstile.is-interactive{margin:12px 0 0;border-radius:9px;overflow:hidden}
/* Cards under 300px wide (phones under about 372px) get Turnstile's compact box, centred. */
.vp-turnstile.is-compact{width:fit-content;margin-left:auto;margin-right:auto}
/* Sent: the review step's panel, with the requested call. */
.vp-done .vp-price-panel{flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;padding:12px 16px;margin:0}
.vp-done .vp-price-panel strong{font-size:26px;line-height:1.15;white-space:pre-line}
.vp-done .vp-price-panel p{margin:2px 0 0;font-size:13px;font-weight:600;color:rgba(255,255,255,.78)}
.vp-done .vp-done-sent .vp-intro{margin:12px 0}
.vp-done .vp-done-sent .vp-done-alt{margin:0}
/* Email fallback: the email is the main button, copying it the second. */
.vp-mail-open{
  display:flex;justify-content:space-between;align-items:center;min-height:50px;border-radius:10px;
  background:var(--orange);color:#fff;font-size:16px;font-weight:700;padding:12px 18px;margin:0 0 8px;
  transition:background .15s ease;
}
.vp-mail-open:hover{background:var(--orange-2)}
.vp-done[data-mode=fallback] .vp-copy{background:#efe7dc;color:var(--ink)}
.vp-done[data-mode=fallback] .vp-copy:hover{background:#e6dccd}
.vp-done-links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px;margin:0}
.vp-done-links .vp-edit{margin:0}
.vp-retry{font:inherit;font-size:13.5px;font-weight:700;color:var(--orange);background:none;border:0;cursor:pointer;padding:0}
@media (max-width:560px){.vp-done .vp-price-panel strong{font-size:22px}}
/* Desktop: the business step's five fields sit a little closer, so an error line under them still fits
   within the to-do step's height (the tallest) and the finder's buttons stay put. */
@media (min-width:961px){
  .vp-where .vp-label{margin:10px 0 4px}
  .vp-where input{min-height:42px}
  .vp-where .vp-hint{margin-top:4px}
}
@media (min-width:961px) and (max-height:640px){.vp-where .vp-label{margin-top:8px}}