@charset "UTF-8";
/* ==========================================================================
   Pest Control King — stylesheet
   --------------------------------------------------------------------------
   Structure:
     1. Tokens          fluid type + space scales, colour, layout
     2. Base            reset, typography primitives
     3. Layout          container, sections, grids
     4. Components      header, hero, cards, forms, footer…
     5. Motion          reveals, hover, ambient animation
     6. Responsive      breakpoints, container queries, orientation
     7. Preferences     reduced motion, touch, high contrast, print

   Sizing is fluid by default: type and space interpolate with the viewport via
   clamp(), so the design holds between breakpoints instead of snapping at
   them. Breakpoints exist only where the *layout* has to change shape.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* Colour */
  --bg:#0c0c0e; --bg-alt:#101014; --surface:#16161a; --surface-2:#17171c; --footer:#08080a;
  --red:#e5231d; --red-dark:#c11712; --red-soft:rgba(229,35,29,.16);
  --gold:#e6b955; --gold-soft:rgba(230,185,85,.12); --gold-line:rgba(230,185,85,.3);
  --text:#f3f1ec; --text-dim:#c8c4bc; --muted:#a7a29b; --muted-2:#b3aea6;
  --line:rgba(255,255,255,.07);
  --paper:#fbfaf7; --ink:#1a1a1d; --ink-dim:#5c574f; --field:#e2ded5;

  /* Fluid type scale — 320px … 1440px viewport */
  --step--1:clamp(0.78rem, 0.75rem + 0.14vw, 0.86rem);
  --step-0: clamp(0.94rem, 0.90rem + 0.20vw, 1.06rem);
  --step-1: clamp(1.05rem, 0.98rem + 0.34vw, 1.25rem);
  --step-2: clamp(1.20rem, 1.06rem + 0.66vw, 1.60rem);
  --step-3: clamp(1.45rem, 1.16rem + 1.42vw, 2.30rem);
  --step-4: clamp(1.70rem, 1.20rem + 2.45vw, 3.15rem);
  --step-5: clamp(2.00rem, 1.28rem + 3.55vw, 3.50rem);

  /* Fluid space scale */
  --space-3xs:clamp(0.25rem, 0.24rem + 0.05vw, 0.3rem);
  --space-2xs:clamp(0.5rem, 0.47rem + 0.15vw, 0.6rem);
  --space-xs: clamp(0.65rem, 0.58rem + 0.35vw, 0.9rem);
  --space-s:  clamp(0.9rem, 0.80rem + 0.5vw, 1.25rem);
  --space-m:  clamp(1.25rem, 1.05rem + 1vw, 1.9rem);
  --space-l:  clamp(1.8rem, 1.45rem + 1.7vw, 3rem);
  --space-xl: clamp(2.6rem, 2rem + 3vw, 4.5rem);
  --space-2xl:clamp(3.5rem, 2.6rem + 4.4vw, 6.5rem);

  /* Layout */
  --shell:1220px;
  --gutter:clamp(1rem, 0.6rem + 2vw, 1.5rem);
  --radius:18px;
  --radius-lg:22px;
  --header-h:72px;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 1rem);
}

body{
  margin:0;
  font-family:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Images are fluid by default; `picture` must not create a layout box or it
   breaks the flex/grid parents its <img> is expected to fill. */
img,svg,video{max-width:100%;height:auto;display:block}
picture{display:contents}

a{color:var(--gold);text-decoration:none}
a:hover{color:#f0cd7d}
input,select,textarea,button{font:inherit;color:inherit}
::selection{background:var(--red);color:#fff}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* Long unbroken strings (URLs, numbers) must never force a horizontal scroll. */
h1,h2,h3,h4,p,li,span,a,figcaption{overflow-wrap:break-word}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Hidden by transform rather than a huge negative offset — an off-screen
   left:-9999px box still participates in layout and can widen the page. */
.skip-link{
  position:absolute;top:0;left:0;z-index:400;
  background:var(--red);color:#fff;font-weight:700;
  padding:.75rem 1.1rem;border-radius:0 0 10px 0;
  transform:translateY(-200%);transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0);color:#fff}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:var(--space-2xl)}
.band{
  background:var(--bg-alt);
  border-block:1px solid rgba(255,255,255,.06);
}

/* Intrinsic grid: items decide the column count from the space available, so
   the layout adapts inside any container, not just at viewport breakpoints. */
.grid{display:grid;gap:var(--space-s)}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.split{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap:var(--space-l);
  align-items:center;
}

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* --- Type primitives ---------------------------------------------------- */
.eyebrow{
  font-weight:700;color:var(--red);font-size:var(--step--1);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--space-2xs);
}
.h1,.h2,.h3,.display{font-family:'Space Grotesk','Manrope',sans-serif;letter-spacing:-.02em}
.h1{font-size:var(--step-5);font-weight:700;line-height:1.05;color:#fff;text-wrap:balance;margin-bottom:var(--space-s)}
.h2{font-size:var(--step-4);font-weight:700;line-height:1.12;color:#fff;text-wrap:balance}
.h3{font-size:var(--step-2);font-weight:600;line-height:1.25;color:#fff}
.lede{font-size:var(--step-1);line-height:1.6;color:var(--muted-2);text-wrap:pretty}
.head-center{text-align:center;margin-inline:auto;margin-bottom:var(--space-l);max-width:42ch}
.head-center .lede{margin-top:var(--space-xs)}

/* --- Buttons ------------------------------------------------------------ */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:48px;                      /* comfortable touch target */
  padding:.85em 1.5em;
  font-size:var(--step-0);font-weight:800;line-height:1.2;text-align:center;
  border:none;border-radius:13px;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn-red{background:var(--red);color:#fff;box-shadow:0 12px 30px rgba(229,35,29,.45)}
.btn-red:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 36px rgba(229,35,29,.6)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(230,185,85,.5);font-weight:700}
.btn-ghost:hover{color:#fff;border-color:var(--gold);background:rgba(230,185,85,.12);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid rgba(230,185,85,.5);font-weight:700}
.btn-outline:hover{color:#fff;border-color:var(--gold);background:rgba(230,185,85,.1);transform:translateY(-2px)}
.btn-block{width:100%}
.btn-sm{min-height:42px;padding:.6em 1.1em;font-size:var(--step--1);border-radius:11px;font-weight:700}
.btn-lg{font-size:var(--step-1);padding:.95em 1.6em}

/* --- Announcement strip -------------------------------------------------- */
.strip{
  display:flex;align-items:center;justify-content:center;gap:.5em;flex-wrap:wrap;
  background:linear-gradient(90deg,var(--red-dark),var(--red));
  color:#fff;font-weight:700;font-size:var(--step--1);
  padding:.6rem var(--gutter);text-align:center;
}
.strip a{color:#fff;text-decoration:underline;font-weight:800;display:inline-flex;align-items:center;min-height:24px}
.dot{flex:none;width:8px;height:8px;border-radius:50%;background:#fff}
.progress-track{position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:200;pointer-events:none}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--gold));box-shadow:0 0 12px rgba(229,35,29,.6)}

/* --- Header -------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(12,12,14,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(230,185,85,.18);
}
.header-inner{
  display:flex;align-items:center;gap:var(--space-s);
  min-height:var(--header-h);padding-block:.6rem;
}
/* The logo's wordmark is dark navy — drawn for light backgrounds. On the near
   black header it needs a light plate to stay legible. Cream matches the form
   cards so it reads as part of the design rather than a pasted-on box. */
.brand{
  display:flex;align-items:center;flex:none;
  background:var(--paper);border-radius:10px;
  padding:5px 10px;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}
.brand img{height:40px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.8rem,1.6vw,1.5rem);font-weight:600;font-size:var(--step--1)}
.nav a{color:#cfccc5;white-space:nowrap;padding-block:7px}
.nav a:hover{color:var(--gold)}
.header-phone{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;color:var(--text);font-size:var(--step--1);flex:none}
.header-phone:hover{color:#fff}
.phone-ico{
  display:grid;place-items:center;flex:none;
  width:38px;height:38px;border-radius:50%;
  background:var(--red-soft);color:#ff6a5f;font-size:15px;
}
.header-phone span:last-child{white-space:nowrap}

.burger{
  display:none;margin-left:auto;flex:none;
  width:46px;height:46px;border-radius:12px;padding:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(230,185,85,.28);
  /* Flex, not grid: auto grid rows stretch to fill the 46px button, which
     spread the three bars ~15px apart instead of 7px — so the ±7px close
     transform below left them crossing off-centre as a lopsided arrow.
     A centred flex column with an explicit gap pins the spacing at 7px. */
  cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{display:none;border-top:1px solid var(--line);background:rgba(12,12,14,.98);max-height:calc(100dvh - var(--header-h));overflow-y:auto}
.mobile-nav.open{display:block}
.mobile-nav ul{padding:.5rem 0 1rem;display:flex;flex-direction:column}
.mobile-nav a{
  display:block;color:#e2dfd8;font-weight:600;font-size:var(--step-1);
  padding:.8rem .25rem;border-bottom:1px solid rgba(255,255,255,.05);
}
.mobile-actions{display:flex;flex-direction:column;gap:.6rem;padding-bottom:1rem}

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;max-width:none;
  /* The source is a tall portrait shot, so a wide hero can only show a slice
     of it. Frame that slice at 60% down, and pivot the Ken Burns zoom on the
     same point so the framing holds for the whole loop. */
  object-position:center 60%;
  transform-origin:center 60%;
}
.hero-veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(12,12,14,.96) 0%,rgba(12,12,14,.9) 42%,rgba(12,12,14,.55) 100%)}
.hero-glow{position:absolute;inset:0;background:radial-gradient(1000px 500px at 15% 10%,rgba(229,35,29,.16),transparent 60%)}
.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:var(--space-l);align-items:center;
  padding-block:var(--space-xl);
}
.hero-copy .lede{color:var(--text-dim);max-width:52ch;margin-bottom:var(--space-m)}
.badge{
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--gold-soft);border:1px solid rgba(230,185,85,.35);
  color:var(--gold);font-weight:700;font-size:var(--step--1);
  padding:.45em .9em;border-radius:999px;margin-bottom:var(--space-s);
}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.hero-cta{display:flex;gap:var(--space-xs);flex-wrap:wrap;align-items:center}

.stats{display:flex;gap:var(--space-m);margin-top:var(--space-m);flex-wrap:wrap;align-items:center}
.stat{min-width:0}
.stat-num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--step-3);color:var(--gold);line-height:1.1}
.stat-lbl{font-size:var(--step--1);color:var(--muted);font-weight:600}
.stat-rule{width:1px;align-self:stretch;background:rgba(255,255,255,.15)}

/* --- Forms --------------------------------------------------------------- */
.form-card{
  position:relative;
  background:var(--paper);border:1px solid rgba(230,185,85,.4);
  border-radius:var(--radius-lg);padding:var(--space-m);
  box-shadow:0 30px 70px rgba(0,0,0,.55);color:var(--ink);
}
.form-card .flag{
  position:absolute;top:-16px;left:24px;
  background:var(--red);color:#fff;font-weight:700;font-size:var(--step--1);
  letter-spacing:.04em;text-transform:uppercase;padding:.35em .8em;border-radius:8px;
}
.field-stack{display:flex;flex-direction:column;gap:.7rem}
.field-row{display:flex;gap:.7rem}
.field-row>*{flex:1 1 0;min-width:0}

.pck-form input,.pck-form select,.pck-form textarea{
  width:100%;padding:.8rem .85rem;
  border:1.5px solid var(--field);border-radius:11px;
  /* 16px minimum: anything smaller makes iOS Safari zoom on focus. */
  font-size:max(16px,var(--step-0));
  background:#fff;color:var(--ink);outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
  -webkit-appearance:none;appearance:none;
}
.pck-form select{
  color:#33302b;padding-right:2.4rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235c574f' stroke-width='1.6'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:12px;
}
.pck-form textarea{resize:vertical;min-height:5.25rem}
.pck-form input:focus,.pck-form select:focus,.pck-form textarea:focus{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(229,35,29,.12);
}
.form-note{text-align:center;font-size:var(--step--1);color:#8a857c}
.form-error{
  display:none;background:rgba(229,35,29,.1);border:1px solid rgba(229,35,29,.35);
  color:#a51610;font-size:var(--step--1);font-weight:600;padding:.6rem .75rem;border-radius:10px;
}
.form-error.show{display:block}
.form-done{display:none;padding:1.6rem .4rem;text-align:center}
.form-done.show{display:block}
.form-done .tick{
  width:60px;height:60px;border-radius:50%;
  background:rgba(229,35,29,.12);color:var(--red);
  display:grid;place-items:center;font-size:30px;margin:0 auto 1rem;
}
.form-done h3{font-family:'Space Grotesk',sans-serif;font-size:var(--step-2);margin-bottom:.5rem;color:var(--ink)}
.form-done p{color:var(--ink-dim);font-size:var(--step-0);margin-bottom:1rem}
.form-done a{font-weight:800;color:var(--red);display:inline-flex;align-items:center;min-height:26px}
.is-sent .pck-form{display:none}

/* --- Marquee ------------------------------------------------------------- */
.marquee{
  background:var(--gold);color:#1a1408;padding:.8rem 0;overflow:hidden;
  border-top:1px solid rgba(0,0,0,.1);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{
  display:flex;gap:var(--space-l);width:max-content;
  font-weight:700;font-size:var(--step--1);white-space:nowrap;
}

/* --- Service cards ------------------------------------------------------- */
.card{
  position:relative;
  container-type:inline-size;      /* card responds to its own width */
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease;
}
.card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(0,0,0,.55);border-color:rgba(230,185,85,.5)}
/* All six service photos are 3:4 portrait. A 16/10 box cropped away over half
   of each one — heads and feet included — so the box is square: it keeps 75%
   of the frame while the card stays a sensible height. */
.card-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#0e0e11}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .6s}
.card:hover .card-media img{transform:scale(1.09);filter:saturate(1.15)}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(22,22,26,.9) 100%)}
.card-tag{
  position:absolute;top:14px;left:14px;z-index:1;
  background:rgba(229,35,29,.92);color:#fff;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--step--1);
  letter-spacing:.03em;padding:.3em .8em;border-radius:8px;
}
.card-body{padding:var(--space-s) var(--space-s) var(--space-m);display:flex;flex-direction:column;gap:.55rem;flex:1}
.card-body p{color:var(--muted);font-size:var(--step-0);line-height:1.55;flex:1}
/* min-height keeps standalone links at the 24px WCAG 2.5.8 target size. */
.card-link{
  font-weight:700;font-size:var(--step--1);color:var(--gold);
  display:inline-flex;align-items:center;gap:.4em;
  min-height:24px;align-self:flex-start;
}

/* --- Photo blocks -------------------------------------------------------- */
.photo{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.5);border:1px solid rgba(230,185,85,.25);
}
.photo img{width:100%;height:auto}
.photo-tag{
  position:absolute;bottom:14px;left:14px;max-width:calc(100% - 28px);
  background:rgba(12,12,14,.82);backdrop-filter:blur(6px);
  border:1px solid var(--gold-line);padding:.5em .9em;border-radius:12px;
  font-weight:700;font-size:var(--step--1);color:var(--gold);
}
.photo-tag.light{color:#fff}

/* --- Reasons ------------------------------------------------------------- */
.reasons{display:flex;flex-direction:column;gap:var(--space-s)}
.reason{display:flex;gap:.9rem;align-items:flex-start}
.reason .mark{
  flex:none;display:grid;place-items:center;
  width:40px;height:40px;border-radius:11px;
  background:var(--red);color:#fff;font-weight:700;font-size:18px;
}
.reason p{color:var(--muted);font-size:var(--step-0);line-height:1.5;margin-top:.25rem}

/* --- Gallery ------------------------------------------------------------- */
/* Every source photo is portrait (3:4), so the tiles are portrait too —
   a landscape tile would crop most of each picture away. 8 tiles divide
   evenly into both column counts, so the grid never ends on a hole. */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-2xs);
}
.tile{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .6s}
.tile:hover img{transform:scale(1.09);filter:saturate(1.15)}
.tile-cap{
  position:absolute;inset:0;display:flex;align-items:flex-end;padding:.9rem;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.78) 100%);
  color:#fff;font-weight:700;font-size:var(--step--1);
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}

/* --- Steps --------------------------------------------------------------- */
.step{
  position:relative;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--space-m) var(--space-s);text-align:center;
  transition:transform .3s var(--ease),border-color .3s ease,box-shadow .3s ease;
}
.step .n{
  width:64px;height:64px;margin:0 auto var(--space-s);
  border-radius:50%;background:var(--red);color:#fff;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--step-3);
  display:grid;place-items:center;box-shadow:0 12px 26px rgba(229,35,29,.4);
}
.step p{color:var(--muted);font-size:var(--step-0);line-height:1.55;margin-top:.6rem}

/* --- Pricing ------------------------------------------------------------- */
.plan{
  position:relative;
  background:var(--surface);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:var(--space-m);
  display:flex;flex-direction:column;
}
.plan.featured{background:#1c1a15;border:2px solid var(--gold);box-shadow:0 24px 54px rgba(230,185,85,.14)}
.plan .pill{
  position:absolute;top:18px;right:18px;
  background:var(--gold);color:#1a1408;font-weight:800;font-size:var(--step--1);
  letter-spacing:.05em;text-transform:uppercase;padding:.3em .8em;border-radius:999px;
}
.plan-head{padding-right:7rem}
.plan .tag{font-size:var(--step--1);color:var(--muted);margin:.35rem 0 var(--space-s)}
.plan .price{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--step-3);margin-bottom:var(--space-s);color:var(--gold)}
.plan ul{display:flex;flex-direction:column;gap:.65rem;margin-bottom:var(--space-m)}
.plan li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--step-0);color:#d9d5cd}
.plan li::before{content:"✓";color:var(--gold);font-weight:700;flex:none}
.plan .btn{margin-top:auto;width:100%}

/* --- Certificates -------------------------------------------------------- */
.cert{
  position:relative;border-radius:16px;overflow:hidden;
  /* The award photos are landscape (3:2) and near-square. A 4/5 portrait box
     cropped half the width off each one and then upscaled what was left —
     which is what made them look soft. 4/3 keeps ~90% of the frame. */
  aspect-ratio:4/3;border:1px solid rgba(230,185,85,.25);background:#0e0e11;
}
.cert img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cert:hover img{transform:scale(1.08)}

/* --- Licence register ----------------------------------------------------
   The two government licences, quoted verbatim so a visitor can verify them. */
.licences{
  list-style:none;margin-top:var(--space-m);
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-xs);
}
.licence{
  display:flex;flex-direction:column;gap:.3rem;
  background:var(--surface-2);border:1px solid rgba(230,185,85,.25);
  border-radius:var(--radius);padding:var(--space-s);
}
.licence strong{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:var(--step-0);color:var(--gold);
}
.licence-issuer{color:var(--muted);font-size:var(--step--1);line-height:1.5}
.licence-note{color:var(--muted);font-size:var(--step--1);opacity:.8;line-height:1.5}
@media (max-width:762px){
  .licences{grid-template-columns:1fr}
}

/* --- Areas --------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:var(--space-m)}
.chip{
  background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold);
  font-weight:600;font-size:var(--step--1);padding:.5em 1em;border-radius:999px;
}

/* --- Testimonials -------------------------------------------------------- */
.quote{
  position:relative;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--space-m);
  transition:transform .3s var(--ease),border-color .3s ease,box-shadow .3s ease;
}
.quote .stars{color:var(--gold);font-size:var(--step-1);letter-spacing:2px;margin-bottom:.7rem}
.quote p{font-size:var(--step-0);line-height:1.6;color:#ddd9d1;margin-bottom:var(--space-s);text-wrap:pretty}
.who{display:flex;align-items:center;gap:.75rem}
.who .av{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:rgba(229,35,29,.18);color:#ff6a5f;
  display:grid;place-items:center;font-weight:700;font-family:'Space Grotesk',sans-serif;
}
.who b{font-weight:700;font-size:var(--step-0);color:#fff;display:block}
.who small{font-size:var(--step--1);color:var(--muted)}

/* --- FAQ ----------------------------------------------------------------- */
.faq-wrap{max-width:820px}
.faq{display:flex;flex-direction:column;gap:.7rem}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .3s ease,background .3s ease}
.faq-item:hover{border-color:rgba(230,185,85,.28)}
.faq-item.open{border-color:rgba(230,185,85,.45);background:#191920}
.faq-q{
  width:100%;min-height:56px;cursor:pointer;background:none;border:none;text-align:left;
  padding:1rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--step-1);
  color:var(--text);line-height:1.35;
}
.faq-q i{flex:none;font-style:normal;font-size:1.4em;color:var(--gold);transition:transform .25s ease;line-height:1}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 1.1rem 1.1rem;color:var(--muted);font-size:var(--step-0);line-height:1.6}

/* --- Contact ------------------------------------------------------------- */
.contact-box{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1a1a1f 0%,#0e0e11 100%);
  border:1px solid var(--gold-line);border-radius:26px;
  padding:var(--space-l);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
  gap:var(--space-l);align-items:center;
}
.contact-box::before{
  content:"";position:absolute;top:-120px;right:-80px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(229,35,29,.25),transparent 70%);
}
.contact-copy{position:relative;z-index:1}
.contact-copy .lede{color:var(--text-dim);margin:var(--space-s) 0 var(--space-m)}
.contact-copy .after{margin-top:var(--space-s);font-size:var(--step-0);color:var(--muted)}
.contact-form{position:relative;z-index:1;background:var(--paper);border-radius:20px;padding:var(--space-m);color:var(--ink)}
.contact-form h3{font-family:'Space Grotesk',sans-serif;font-size:var(--step-2);color:var(--ink)}

/* --- Footer -------------------------------------------------------------- */
.footer{background:var(--footer);color:var(--muted);padding-block:var(--space-xl) var(--space-m);border-top:1px solid rgba(255,255,255,.06)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--space-l)}
.brand-plate{
  display:inline-block;background:var(--paper);
  border-radius:12px;padding:8px 13px;margin-bottom:1rem;
}
.footer img{height:46px;width:auto}
.footer p{font-size:var(--step-0);line-height:1.6;max-width:40ch}
.footer h4{font-family:'Space Grotesk',sans-serif;color:#fff;font-size:var(--step-0);margin-bottom:.8rem}
.footer-links{display:flex;flex-direction:column;gap:.35rem;font-size:var(--step--1)}
.footer-links a,.footer-links span{display:inline-flex;align-items:center;min-height:26px}
.footer-links a{color:var(--muted);transition:color .25s ease,transform .25s ease}
.footer-links a:hover{color:var(--gold)}
.footer-links a.strong{color:#fff;font-weight:700}
.footer-base{
  margin-top:var(--space-m);padding-top:var(--space-s);
  border-top:1px solid rgba(255,255,255,.08);
  font-size:var(--step--1);color:#6f6a62;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
}
.credit-link{color:var(--gold);font-weight:700;transition:color .25s ease}
.credit-link:hover{color:#fff}

/* --- Sticky calls -------------------------------------------------------- */
.float-call{
  position:fixed;bottom:18px;right:18px;z-index:150;
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--red);color:#fff;font-weight:800;font-size:var(--step-0);
  padding:.85em 1.4em;border-radius:999px;box-shadow:0 12px 34px rgba(229,35,29,.6);
}
.float-call:hover{color:#fff}

/* WhatsApp pill — stacked directly above the call pill. */
.float-wa{
  position:fixed;bottom:78px;right:18px;z-index:150;
  display:inline-flex;align-items:center;gap:.55rem;
  background:#25D366;color:#fff;font-weight:800;font-size:var(--step-0);
  padding:.6em 1.2em .6em .9em;border-radius:999px;
  box-shadow:0 12px 34px rgba(37,211,102,.45);
  transition:transform .2s ease,box-shadow .2s ease;
}
.float-wa:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 40px rgba(37,211,102,.6)}
.float-wa svg{flex:none}
.mobile-bar{display:none}

/* --- Modal --------------------------------------------------------------- */
.modal{
  position:fixed;inset:0;z-index:300;display:none;
  background:rgba(6,6,8,.72);backdrop-filter:blur(5px);
  padding:var(--gutter);overflow-y:auto;
}
.modal.open{display:grid;place-items:center}
.modal-card{
  position:relative;width:100%;max-width:460px;
  max-height:calc(100dvh - 2*var(--gutter));overflow-y:auto;
  background:var(--paper);border-radius:var(--radius-lg);
  padding:var(--space-m);color:var(--ink);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}
.modal-close{
  position:absolute;top:14px;right:14px;
  width:40px;height:40px;border-radius:50%;
  background:#efece5;border:none;cursor:pointer;
  font-size:18px;color:var(--ink-dim);display:grid;place-items:center;
}
.modal-card h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--step-3);color:var(--ink);padding-right:3rem}
.modal-card .sub{color:var(--ink-dim);font-size:var(--step-0);margin:.4rem 0 var(--space-s)}
.modal-alt{display:block;text-align:center;font-weight:700;font-size:var(--step-0);color:var(--red);margin-top:var(--space-s)}

/* Honeypot: off-screen rather than display:none, because some bots skip
   fields that are explicitly hidden. Never focusable by keyboard. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Field that failed validation. */
.pck-form .invalid{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,35,29,.18)}
/* Once the lead is sent, the intro and fallback link go with the form. */
.is-sent .modal-intro,.is-sent .modal-alt{display:none}
body.no-scroll{overflow:hidden}

/* ==========================================================================
   5. MOTION
   ========================================================================== */

/* --- Scroll reveal -------------------------------------------------------
   Visible by default; JS adds .pending only when it can also guarantee a
   .shown, so a JS failure can never leave the page blank. */
[data-reveal]{opacity:1}
[data-reveal].pending{opacity:0;transform:translateY(30px) scale(.99);filter:blur(5px)}
[data-reveal].shown{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity .75s var(--ease),transform .75s var(--ease),filter .6s ease;
  transition-delay:calc(var(--i,0) * 80ms);
}

/* Photos wipe up behind a mask. The clip lives on the inner image, never on
   the observed container: a clip-path that hides an element also zeroes its
   intersection area, so the IntersectionObserver watching it would never fire
   and the image would stay hidden forever. */
.photo[data-reveal].pending,.tile[data-reveal].pending,.cert[data-reveal].pending{
  opacity:1;transform:none;filter:none;
}
.photo[data-reveal].pending img,
.tile[data-reveal].pending img,
.cert[data-reveal].pending img{clip-path:inset(0 0 100% 0)}
.photo[data-reveal].pending .photo-tag,
.tile[data-reveal].pending .tile-cap,
.cert[data-reveal].pending .tile-cap{opacity:0}
.photo[data-reveal].shown img{
  clip-path:inset(0 0 0 0);
  transition:clip-path .9s var(--ease) calc(var(--i,0) * 80ms);
}
.tile[data-reveal].shown img,.cert[data-reveal].shown img{
  clip-path:inset(0 0 0 0);
  transition:clip-path .9s var(--ease) calc(var(--i,0) * 80ms),
             transform .6s var(--ease),filter .6s;
}
.photo[data-reveal].shown .photo-tag,
.tile[data-reveal].shown .tile-cap,
.cert[data-reveal].shown .tile-cap{opacity:1;transition:opacity .5s ease .35s}

/* --- Cursor spotlight ----------------------------------------------------- */
.card,.plan,.step,.quote{--mx:50%;--my:50%}
.card::before,.plan::before,.step::before,.quote::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(380px circle at var(--mx) var(--my),rgba(230,185,85,.13),transparent 62%);
  opacity:0;transition:opacity .4s ease;
}
.card:hover::before,.step:hover::before,.quote:hover::before,.plan:hover::before{opacity:1}
.step:hover,.quote:hover{transform:translateY(-5px);border-color:rgba(230,185,85,.35);box-shadow:0 18px 40px rgba(0,0,0,.42)}

/* --- Button sweep + ripple ------------------------------------------------ */
.btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.3) 50%,transparent 75%);
  transform:translateX(-130%);transition:transform .75s var(--ease);
}
.btn:hover::after{transform:translateX(130%)}
.btn:active{transform:translateY(1px) scale(.985)}
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.4);
  transform:translate(-50%,-50%) scale(0);animation:pck-ripple .65s var(--ease) forwards;
}

/* --- Ambient -------------------------------------------------------------- */
.hero-bg img{animation:pck-kenburns 18s ease-in-out infinite alternate}
.dot,.pulse{animation:pck-pulse 2.4s infinite}
.marquee-track{animation:pck-marquee 28s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.step .n{animation:pck-float 4s ease-in-out infinite}
/* Featured plan glow.
   Deliberately a box-shadow rather than a blurred pseudo-element behind the
   card: a non-inset box-shadow always paints outside the border box, so it
   cannot bleed over the card's text. The earlier conic-gradient halo relied on
   z-index:-1 escaping the card, which silently breaks the moment .plan gains a
   stacking context — and the reveal animation's own opacity/filter/transform
   each create one, so it washed out the plan content while fading in. */
.plan.featured{animation:pck-glow 4s ease-in-out infinite}
.accent{
  background:linear-gradient(100deg,#e5231d 0%,#ff7a6f 25%,#e6b955 50%,#ff7a6f 75%,#e5231d 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:pck-shimmer 7s linear infinite;
}
.pck-word{display:inline-block;animation:pck-word .7s var(--ease) both}
/* Beats the generic .pck-word rule so the accent both flies in and shimmers. */
.accent.pck-word{animation:pck-word .7s var(--ease) both,pck-shimmer 7s linear infinite}
/* Brand name owns the first line of the H1 at every width. */
.h1 .brand-line{display:block;width:fit-content;max-width:100%}

/* --- Heading underline ---------------------------------------------------- */
.head-center .h2::after{
  content:"";display:block;width:0;height:3px;margin:var(--space-s) auto 0;border-radius:3px;
  background:linear-gradient(90deg,var(--red),var(--gold));
  transition:width .9s var(--ease) .25s;
}
.head-center[data-reveal].shown .h2::after{width:78px}

/* --- Nav underline -------------------------------------------------------- */
.nav a{position:relative;transition:color .25s ease}
.nav a::after{
  content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;border-radius:2px;
  background:var(--gold);transform:translateX(-50%);transition:width .3s var(--ease);
}
.nav a:hover::after{width:100%}

/* --- Micro-interactions --------------------------------------------------- */
.tile-cap,.card-tag{transition:padding .35s var(--ease),background .35s ease}
.tile:hover .tile-cap{padding-bottom:1.35rem}
.card:hover .card-tag{background:var(--red)}
.card-link{transition:gap .25s ease,color .25s ease}
.card:hover .card-link{gap:.75em;color:#f0cd7d}
.chip{transition:transform .25s var(--ease),background .25s ease,border-color .25s ease}
.chip:hover{transform:translateY(-3px);background:rgba(230,185,85,.22);border-color:var(--gold)}
.reason .mark{transition:transform .3s var(--ease-back),box-shadow .3s ease}
.reason:hover .mark{transform:scale(1.12) rotate(-6deg);box-shadow:0 8px 20px rgba(229,35,29,.45)}
.footer-links a:hover{transform:translateX(4px)}
.stat-num{transition:transform .3s var(--ease-back)}
.stat:hover .stat-num{transform:scale(1.08)}
.header{transition:background .35s ease,box-shadow .35s ease,border-color .35s ease}
.header-inner{transition:min-height .35s ease}
.brand img{transition:height .35s ease}
.header.scrolled{background:rgba(12,12,14,.95);box-shadow:0 10px 30px rgba(0,0,0,.45);border-bottom-color:rgba(230,185,85,.34)}
.header.scrolled .header-inner{min-height:58px}
.header.scrolled .brand{padding:4px 8px}
.header.scrolled .brand img{height:32px}
.modal.open{animation:pck-fadein .25s ease}
.modal-card{animation:pck-pop .4s var(--ease)}
.mobile-nav.open{animation:pck-fadeup .22s ease}
.mobile-nav.open li{animation:pck-fadeup .4s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}

/* Scroll-driven progress bar runs off the main thread where supported. */
@supports (animation-timeline:scroll()){
  .progress-bar{animation:pck-progress linear;animation-timeline:scroll(root block)}
}

/* --- Keyframes ------------------------------------------------------------ */
@keyframes pck-kenburns{0%{transform:scale(1.08)}100%{transform:scale(1.22) translateX(-2%)}}
@keyframes pck-pulse{0%,100%{box-shadow:0 0 0 0 rgba(229,35,29,.55)}70%{box-shadow:0 0 0 16px rgba(229,35,29,0)}}
@keyframes pck-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes pck-fadeup{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pck-word{0%{opacity:0;transform:translateY(120%) rotate(4deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes pck-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pck-shimmer{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes pck-spin{to{transform:rotate(360deg)}}
@keyframes pck-glow{
  0%,100%{box-shadow:0 24px 54px rgba(230,185,85,.14),0 0 18px 0 rgba(230,185,85,.16)}
  50%    {box-shadow:0 24px 60px rgba(230,185,85,.22),0 0 40px 7px rgba(230,185,85,.34)}
}
@keyframes pck-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
@keyframes pck-fadein{from{opacity:0}to{opacity:1}}
@keyframes pck-pop{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
@keyframes pck-progress{from{width:0}to{width:100%}}

/* ==========================================================================
   6. RESPONSIVE
   Breakpoints only where the layout must change shape. Everything else is
   already fluid via the clamp() scales above.
   ========================================================================== */

/* --- Ultra-wide: stop the shell from drifting apart ---------------------- */
@media (min-width:1600px){
  :root{--shell:1320px}
}

/* --- Laptop -------------------------------------------------------------- */
@media (max-width:1080px){
}

/* --- Tablet landscape: nav collapses into the drawer --------------------- */
@media (max-width:980px){
  .nav{display:none}
  .header-phone{margin-left:auto}
  .header-phone span:last-child{display:none}
  .header .btn{display:none}
  .burger{display:flex}

  .hero-grid{grid-template-columns:1fr;gap:var(--space-l)}
  .hero-copy .lede{max-width:none}
  .form-card{max-width:520px;width:100%;margin-inline:auto}

  .split{grid-template-columns:1fr}
  .split .photo{order:-1}          /* image leads on narrow screens */

  /* Two columns, not three: 8 tiles then fill every row exactly. */
  .gallery{grid-template-columns:repeat(2,1fr)}
}

/* --- Tablet portrait ----------------------------------------------------- */
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>*:first-child{grid-column:1 / -1}
  .footer p{max-width:none}
}

/* --- Phones -------------------------------------------------------------- */
@media (max-width:680px){
  .stats{gap:0;justify-content:space-between;width:100%}
  .stat{flex:1 1 0}
  .stat-rule{margin-inline:.6rem}

  .hero-cta .btn{flex:1 1 100%}

  .plan-head{padding-right:0}
  .plan .pill{position:static;align-self:flex-start;margin-bottom:.8rem}

  .contact-box::before{display:none}
  .field-row{flex-direction:column}

  .footer-base{justify-content:flex-start}

  /* Floating pill becomes a full-width action bar. */
  .float-call{display:none}
  /* Sits above the mobile action bar; icon only to stay out of the way. */
  .float-wa{
    bottom:calc(84px + env(safe-area-inset-bottom));
    right:14px;padding:.7em;border-radius:50%;
  }
  .float-wa-label{display:none}
  .mobile-bar{
    display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
    position:fixed;inset-inline:0;bottom:0;z-index:150;
    padding:.6rem var(--gutter);
    padding-bottom:calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(10,10,12,.94);backdrop-filter:blur(10px);
    border-top:1px solid rgba(230,185,85,.22);
  }
  .mobile-bar .btn{box-shadow:none;padding-inline:.5em}
  /* Reserve room so the bar never covers the footer. */
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* --- Small phones (320–420px) -------------------------------------------- */
@media (max-width:420px){
  .strip{gap:.35em}
  .badge{font-size:.7rem}
  .brand{padding:4px 7px}
  .brand img{height:30px}
  .who .av{width:38px;height:38px}
  .step .n{width:54px;height:54px}
  .modal-card,.contact-form,.form-card{padding:1.1rem}
  .faq-q{padding:.85rem .9rem}
}

/* --- Landscape phones: vertical space is the scarce axis ----------------- */
@media (max-height:520px) and (orientation:landscape){
  .hero-grid{padding-block:var(--space-m);gap:var(--space-m)}
  .section{padding-block:var(--space-l)}
  .mobile-nav{max-height:calc(100dvh - 56px)}
  .modal-card{max-height:calc(100dvh - 1rem)}
  .step .n{width:48px;height:48px;margin-bottom:.6rem}
  .float-call{bottom:10px}
}

/* --- Container queries: components respond to their own box, not the page -
   A service card in a narrow column tightens up even when the viewport is
   wide, which viewport media queries alone cannot express. */
@container (max-width:300px){
  .card-body{padding:var(--space-s)}
  .card-media{aspect-ratio:4/3}   /* a card this narrow can spare the height */
  .card-tag{top:10px;left:10px}
}

/* ==========================================================================
   7. PREFERENCES
   ========================================================================== */

/* Touch: hover effects either never fire or stick after a tap, and the blurred
   halo is a continuous repaint that costs battery. */
@media (hover:none){
  .card::before,.plan::before,.step::before,.quote::before,.btn::after{display:none}
  /* Continuous glow is a repaint every frame — not worth the battery on phones. */
  .plan.featured{animation:none;box-shadow:0 24px 54px rgba(230,185,85,.18),0 0 26px 2px rgba(230,185,85,.22)}
  .card:hover,.step:hover,.quote:hover{transform:none}
  .tile:hover img,.cert:hover img,.card:hover .card-media img{transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;
    scroll-behavior:auto!important;
  }
  [data-reveal],[data-reveal].pending,[data-reveal].shown{opacity:1;transform:none;filter:none}
  [data-reveal] img,[data-reveal] .tile-cap,[data-reveal] .photo-tag{clip-path:none!important;opacity:1!important}
  .btn::after,.card::before,.plan::before,.step::before,.quote::before{display:none}
  .plan.featured{animation:none;box-shadow:0 24px 54px rgba(230,185,85,.18)}
  .accent{animation:none;background-position:0 50%}
}

@media (forced-colors:active){
  .btn,.card,.plan,.faq-item,.form-card{border:1px solid CanvasText}
  .btn::after,.card::before{display:none}
  .plan.featured{animation:none}
}

@media print{
  .header,.mobile-bar,.float-call,.modal,.progress-track,.marquee,.strip{display:none!important}
  body{background:#fff;color:#000;padding:0}
  .band,.section{background:#fff;padding-block:1rem}
  .h1,.h2,.h3{color:#000}
  a{color:#000;text-decoration:underline}
}