/* Phone Doctors — site stylesheet. Tokens generated from the design system
   (tokens/*.css). Component classes follow at the bottom. */

/* ===== fonts ===== */
/* Phone Doctors webfonts.
   The supplied source folder contained no font binaries. The logo lockup is a
   heavy gothic display face and a wide, letterspaced geometric sans; the nearest
   Google Fonts matches are used as documented substitutions (see readme.md). */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Figtree:ital,wght@0,300..900;1,300..900&family=Space+Mono:wght@400;700&display=swap");

/* ===== colors ===== */
:root{
  /* ---------------------------------------------------------------
     TRANSITION PALETTE. The client's customers recognise the existing
     insignia — the doctor mark, the blue "PhoneDoctors" wordmark and
     "RELAX .. ITS ONLY BROKEN" — so blue + black stay exactly as they are.
     The only thing that moves toward the newer scheme is the background:
     the old lavender (#E5E6FA) is replaced by canary yellow.
     --------------------------------------------------------------- */

  /* Base ramp — PhoneDoctors blue, sampled from the logo wordmark (#2A90B8) */
  --pd-blue-700:#1B627E;
  --pd-blue-600:#21789A;
  --pd-blue-500:#2A90B8;
  --pd-blue-400:#4FAAD0;
  --pd-blue-200:#B7DCEC;
  --pd-blue-100:#E4F2F9;

  /* Legacy aliases — the ramp used to be named cyan; both names resolve to the logo blue */
  --pd-cyan-600:var(--pd-blue-600);
  --pd-cyan-500:var(--pd-blue-500);
  --pd-cyan-400:var(--pd-blue-400);
  --pd-cyan-300:var(--pd-blue-200);
  --pd-cyan-100:var(--pd-blue-100);

  /* Base ramp — ink. The logo is drawn in true near-black outlines, so ink is
     neutral, not indigo. Pure #000 is still avoided. */
  --pd-ink-900:#0D0D0D;
  --pd-ink-800:#1A1A1A;
  --pd-ink-700:#262626;
  --pd-ink-600:#3D3D3D;
  --pd-ink-500:#5C5C5C;

  /* Base ramp — canary yellow: the new background scheme, and the highlight
     already used behind the phone number in the logo banner. */
  --pd-yellow-50:#FFFDF2;
  --pd-yellow-100:#FEF6D6;
  --pd-yellow-200:#FDEEB8;
  --pd-yellow-300:#FDEA9F;
  --pd-yellow-400:#FDE780;
  --pd-yellow-500:#F9DC5C;
  --pd-yellow-600:#E5C43F;

  /* Base ramp — indigo. Belongs to the mascot / journey illustrations only.
     Reach for it when placing artwork, never for UI chrome. */
  --pd-indigo-800:#1E1535;
  --pd-indigo-700:#2C1B4D;

  /* Base ramp — warm neutrals (paper, borders, muted copy) */
  --pd-white:#FFFFFF;
  --pd-neutral-50:#FAF8F3;
  --pd-neutral-100:#F1EDE3;
  --pd-neutral-200:#DFD8C8;
  --pd-neutral-400:#A79E8B;
  --pd-neutral-600:#6B6455;

  /* Base ramp — alert coral (the cracked-screen red, the mascot's tongue) */
  --pd-coral-500:#E8503A;
  --pd-coral-100:#FCE4DF;

  /* ---- Semantic aliases ---- */
  --surface-canvas:var(--pd-yellow-300);
  --surface-canvas-soft:var(--pd-yellow-100);
  --surface-card:var(--pd-white);
  --surface-card-warm:var(--pd-yellow-400);
  --surface-inverse:var(--pd-ink-800);
  --surface-inverse-soft:var(--pd-ink-700);
  --surface-accent:var(--pd-blue-500);
  --surface-accent-soft:var(--pd-blue-100);

  --text-heading:var(--pd-ink-800);
  --text-body:var(--pd-ink-700);
  --text-muted:var(--pd-neutral-600);
  --text-on-inverse:var(--pd-yellow-100);
  --text-on-accent:var(--pd-white);
  --text-brand:var(--pd-blue-500);
  --text-link:var(--pd-blue-600);
  --text-link-hover:var(--pd-ink-800);

  --border-strong:var(--pd-ink-800);
  --border-subtle:var(--pd-neutral-200);
  --border-accent:var(--pd-blue-500);

  --status-ok:var(--pd-blue-500);
  --status-warn:var(--pd-yellow-600);
  --status-danger:var(--pd-coral-500);
  --status-danger-soft:var(--pd-coral-100);

  --focus-ring:var(--pd-blue-400);
}

/* ===== typography ===== */
:root{
  --font-display:"Archivo Black","Arial Black",system-ui,sans-serif;
  --font-body:"Figtree",system-ui,-apple-system,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;

  /* Display — always uppercase, tight tracking, set in ink */
  --type-display-1:800 clamp(38px,4.4vw,64px)/1.0 var(--font-display);
  --type-display-2:800 clamp(28px,3.2vw,44px)/1.02 var(--font-display);
  --type-display-3:800 clamp(24px,2.6vw,34px)/1.05 var(--font-display);
  --tracking-display:-0.02em;

  /* Body */
  --type-lede:400 clamp(17px,1.4vw,21px)/1.55 var(--font-body);
  --type-body:400 16px/1.6 var(--font-body);
  --type-body-sm:400 14px/1.55 var(--font-body);
  --type-label:700 13px/1.2 var(--font-body);

  /* Eyebrow / kicker — wide letterspaced caps, lifted from the logo subline */
  --type-eyebrow:700 12px/1.2 var(--font-body);
  --tracking-eyebrow:0.22em;

  /* Mono — ticket numbers, repair status codes, prices */
  --type-mono:700 13px/1.3 var(--font-mono);
  --tracking-mono:0.04em;
}

/* ===== spacing ===== */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  --gutter:var(--space-5);
  --section-y:var(--space-9);
  --card-pad:var(--space-5);
  --card-pad-lg:var(--space-6);
  --container-max:1180px;
  --measure:62ch;
}

/* ===== radius ===== */
:root{
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:32px;
  --radius-pill:999px;
  --radius-card:var(--radius-lg);
  --radius-control:var(--radius-pill);
  /* the mascot's phone body: a soft superellipse-ish corner */
  --radius-device:34px;
}

/* ===== elevation ===== */
:root{
  /* Everything is drawn with a hard offset shadow in ink or blue, matching the
     flat sticker look of the logo. No blurred grey drop shadows. */
  --shadow-sticker:6px 6px 0 var(--pd-ink-800);
  --shadow-sticker-sm:3px 3px 0 var(--pd-ink-800);
  --shadow-sticker-blue:6px 6px 0 var(--pd-blue-500);
  --shadow-sticker-cyan:var(--shadow-sticker-blue); /* legacy alias */
  --shadow-lift:0 10px 24px -12px rgba(26,26,26,.35);
  --shadow-inset-press:inset 0 3px 0 rgba(26,26,26,.18);

  --stroke:2px;
  --stroke-bold:3px;
  --border-hairline:1px solid var(--border-subtle);
  --border-drawn:var(--stroke) solid var(--border-strong);
}

/* ===== motion ===== */
:root{
  --ease-standard:cubic-bezier(.2,.7,.3,1); /* @kind other */
  --ease-out-soft:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-bounce:cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
  --hover-lift:translateY(-2px); /* @kind other */
  --press-shift:translate(2px,2px); /* @kind other */
}

/* ===== texture ===== */
:root{
  /* The signature background: a fine engineer's grid on canary yellow,
     straight off the brand illustration. */
  --grid-line:rgba(230,196,73,.55);
  --grid-size:34px;
  --texture-grid:repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px var(--grid-size)),repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px var(--grid-size));
}
.pd-grid-bg{background-color:var(--surface-canvas);background-image:var(--texture-grid)}
.pd-grid-bg-soft{background-color:var(--surface-canvas-soft);background-image:var(--texture-grid)}

/* ===== base ===== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-canvas-soft);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3{font:var(--type-display-3);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--text-heading);margin:0}
h1{font:var(--type-display-1)}
h2{font:var(--type-display-2)}
p{margin:0}
a{color:var(--text-link);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}


/* ============================================================
   COMPONENT CLASSES
   Class equivalents of the design system's React components.
   ============================================================ */

noscript{display:none!important}
html{scroll-behavior:smooth}
body{background-color:var(--surface-canvas);background-image:var(--texture-grid);overflow-x:hidden}
img{max-width:100%}

/* Layout ---------------------------------------------------- */
.shell{max-width:var(--container-max);margin:0 auto;padding:var(--space-5) var(--space-5) var(--space-8);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
.shell>*{min-width:0}
.section{display:grid;gap:var(--space-6);min-width:0}
.panel{display:grid;gap:var(--space-6);padding:var(--space-7);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-xl);background:var(--surface-card);min-width:0}
.panel--warm{background:var(--surface-card-warm)}
.panel--ink{background:var(--surface-inverse);color:var(--text-on-inverse)}
.panel--ink h2{color:var(--pd-yellow-300)}
.panel--ink .lede{color:rgba(254,246,214,.75)}
.panel--ink .kicker{color:var(--pd-blue-200)}

/* Header ---------------------------------------------------- */
.topbar{display:flex;align-items:center;gap:var(--space-4);justify-content:space-between;flex-wrap:wrap;row-gap:10px;padding:10px 20px;max-width:100%;min-width:0;background:var(--surface-card);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-pill);box-shadow:var(--shadow-sticker-sm)}
.topbar__brand{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;min-width:0}
.topbar__brand img:first-child{height:54px;width:auto;flex-shrink:0}
.topbar__brand img:last-child{height:30px;width:auto;object-fit:contain;min-width:0}
.topbar__nav{display:flex;align-items:center;gap:var(--space-1);min-width:0}
.topbar__nav a{font:var(--type-label);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;padding:9px 12px;border-radius:var(--radius-pill);white-space:nowrap;color:var(--text-heading)}
.topbar__nav a:hover{background:var(--pd-yellow-200);color:var(--text-heading)}
.topbar__nav a[aria-current="page"]{background:var(--surface-inverse);color:var(--pd-yellow-300)}

/* Footer ---------------------------------------------------- */
.footer{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);padding:var(--space-7) var(--space-6);background:var(--surface-inverse);color:var(--text-on-inverse);border-radius:var(--radius-xl);min-width:0}
.footer__top{display:flex flex-wrap;display:flex;flex-wrap:wrap;gap:var(--space-5);justify-content:space-between;align-items:center;min-width:0}
.footer__lockup{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;background:var(--surface-card);padding:14px 26px 14px 18px;border-radius:var(--radius-pill);max-width:100%;min-width:0}
.footer__lockup img:first-child{height:96px;width:auto;max-width:100%}
.footer__lockup img:last-child{height:62px;width:auto;max-width:100%;object-fit:contain}
.footer__lockup .brandmark img{height:62px;width:auto;max-width:100%;object-fit:contain}
.footer__nav{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.footer__nav a{font:var(--type-body-sm);font-weight:700;color:var(--pd-yellow-100);text-decoration:none}
.footer__nav a:hover{color:#fff}
.footer p{font:var(--type-body-sm);color:rgba(254,246,214,.7)}

/* Type ------------------------------------------------------ */
.kicker{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--pd-blue-600)}
.lede{font:var(--type-lede);color:var(--text-muted);max-width:var(--measure)}
.heading{display:grid;gap:var(--space-3);max-width:760px;justify-items:start}
.heading>*{max-width:100%;min-width:0}
.small{font:var(--type-body-sm);color:var(--text-muted)}
.mono{font:var(--type-mono);letter-spacing:var(--tracking-mono)}

/* Buttons --------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-body);font-weight:800;font-size:15px;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;white-space:nowrap;padding:13px 24px;border-radius:var(--radius-control);border:var(--stroke) solid var(--border-strong);cursor:pointer;box-shadow:var(--shadow-sticker-sm);transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),background var(--dur-base) var(--ease-standard)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sticker)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--pd-ink-800)}
.btn--primary{background:var(--surface-inverse);color:var(--pd-yellow-300)}
.btn--primary:hover{color:var(--pd-yellow-300)}
.btn--secondary{background:var(--surface-card);color:var(--text-heading)}
.btn--secondary:hover{color:var(--text-heading)}
.btn--accent{background:var(--surface-accent);color:#fff}
.btn--accent:hover{color:#fff}
.btn--lg{font-size:17px;padding:17px 32px}
.btn--sm{font-size:13px;padding:8px 16px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sticker-sm)}
.btnrow{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}

/* Badges, pills --------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:var(--space-2);font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;padding:6px 12px;border-radius:var(--radius-xs);border:var(--stroke) solid var(--border-strong);background:var(--surface-card);color:var(--text-heading)}
.badge--ink{background:var(--surface-inverse);color:var(--pd-yellow-300);border-color:transparent}
.badge--yellow{background:var(--pd-yellow-400)}
.badge--blue{background:var(--surface-accent);color:#fff;border-color:transparent}
.pill{display:inline-flex;align-items:center;gap:var(--space-2);font:var(--type-body-sm);font-weight:700;color:var(--text-heading);background:var(--surface-card);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-pill);padding:9px 14px;font-size:13px}
.pill--yellow{background:var(--pd-yellow-200)}
.trust{display:flex;gap:var(--space-2);flex-wrap:nowrap;white-space:nowrap}

/* Grids ----------------------------------------------------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}

/* Hero ------------------------------------------------------ */
.hero{display:grid;grid-template-columns:1.32fr 1fr;gap:var(--space-7);align-items:center;padding:var(--space-6) 0}
.hero__copy{display:grid;gap:var(--space-5);justify-items:start}
.hero__copy>*{max-width:100%;min-width:0}
.hero__art{max-width:100%;display:block;margin:0 auto}
.coverage{display:flex;align-items:center;gap:var(--space-3);background:var(--surface-card);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-sticker-sm);padding:14px 20px;max-width:var(--measure)}
.coverage strong{font:var(--type-body);font-weight:800;font-size:17px;color:var(--text-heading)}
.coverage svg{flex-shrink:0;color:var(--pd-blue-500)}

/* Cards ----------------------------------------------------- */
.card{display:grid;gap:var(--space-3);align-content:start;padding:var(--card-pad);background:var(--surface-card);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-card);box-shadow:var(--shadow-sticker-sm);min-width:0;text-decoration:none}
.card h3{font:var(--type-display-3);font-size:20px;letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--text-heading)}
.card p{font:var(--type-body);color:var(--text-muted)}
.card__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-sm);background:var(--surface-accent-soft);border:var(--stroke) solid var(--border-strong);color:var(--pd-blue-600)}
.feature{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);align-items:start;padding:var(--card-pad);background:var(--surface-card);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-md);min-width:0}
.feature__icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-pill);background:var(--surface-accent);color:#fff;border:var(--stroke) solid var(--border-strong);flex-shrink:0}
.feature strong{font:var(--type-label);font-size:16px;text-transform:uppercase;color:var(--text-heading);display:block;margin-bottom:var(--space-2)}
.feature p{font:var(--type-body-sm);color:var(--text-muted)}

/* Symptom tiles --------------------------------------------- */
.chip{display:flex;align-items:center;gap:var(--space-3);font:var(--type-body);font-weight:700;text-decoration:none;color:var(--text-heading);background:var(--surface-card);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-md);padding:16px 18px;box-shadow:var(--shadow-sticker-sm);min-width:0;transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-sticker);color:var(--text-heading)}
.chip svg{flex-shrink:0;color:var(--pd-blue-500)}
.chip--selected{background:var(--surface-inverse);color:var(--pd-yellow-300)}
.chip--selected svg{color:var(--pd-blue-400)}

/* Journey --------------------------------------------------- */
.journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.stage{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);align-content:start;justify-items:stretch;padding:var(--card-pad);background:var(--surface-card);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-card);min-width:0;overflow:hidden}
.stage--active{background:var(--surface-card-warm);box-shadow:var(--shadow-sticker)}
.stage--future{opacity:.5}
.stage img{width:100%;max-width:100%;height:auto;aspect-ratio:9 / 10;object-fit:cover;object-position:center center;display:block;margin:0 auto;border-radius:var(--radius-md);border:var(--stroke) solid var(--border-strong);background:var(--surface-canvas)}
.stage__n{font:var(--type-mono);font-size:14px;letter-spacing:var(--tracking-mono);color:var(--pd-blue-600)}
.stage h3{font:var(--type-display-3);font-size:clamp(15px,2.05vw,22px);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--text-heading);min-width:0;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.stage p{font:var(--type-body-sm);color:var(--text-muted)}

/* Stats ----------------------------------------------------- */
.stat{display:grid;gap:var(--space-2);align-content:start;padding:var(--card-pad);background:var(--surface-canvas-soft);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-md);min-width:0}
.stat__fig{font:var(--type-mono);font-size:34px;letter-spacing:var(--tracking-mono);color:var(--pd-blue-600)}
.stat strong{font:var(--type-label);font-size:15px;text-transform:uppercase;color:var(--text-heading)}
.stat p{font:var(--type-body-sm);color:var(--text-muted)}

/* Work gallery ---------------------------------------------- */
.work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.job{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;background:var(--surface-card);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-card);box-shadow:var(--shadow-sticker-sm);overflow:hidden;min-width:0;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.job:hover{transform:translateY(-2px);box-shadow:var(--shadow-sticker)}
.job>img{width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;display:block;border-bottom:var(--stroke) solid var(--border-strong)}
.job__body{display:grid;gap:var(--space-2);padding:var(--card-pad);min-width:0}
.job h3{font:var(--type-display-3);font-size:20px;letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--text-heading);min-width:0;overflow-wrap:anywhere}
.job p{font:var(--type-body-sm);color:var(--text-muted)}

/* Reviews --------------------------------------------------- */
.review{display:grid;gap:var(--space-4);align-content:space-between;margin:0;padding:var(--card-pad-lg);background:var(--surface-card);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-card);box-shadow:var(--shadow-sticker-blue);max-width:74ch}
.review p{font:var(--type-lede);font-weight:600;color:var(--text-heading);font-size:19px}
.review footer{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}

/* Contact --------------------------------------------------- */
.contact{display:grid;gap:var(--space-1);padding:var(--space-4);background:var(--surface-card);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-md);text-decoration:none;min-width:0}
.contact span:first-child{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.contact strong{font:var(--type-body);font-weight:700;font-size:17px;color:var(--text-heading)}
a.contact strong{color:var(--pd-blue-600)}
a.contact:hover strong{color:var(--text-heading)}
.contact svg{color:var(--pd-blue-500);margin-bottom:4px}

/* Forms ----------------------------------------------------- */
.field{font:var(--type-body);font-family:var(--font-body);padding:13px 16px;border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-body);width:100%}
.field::placeholder{color:var(--pd-neutral-400)}
textarea.field{min-height:84px;resize:vertical}
.fieldset{display:grid;gap:var(--space-3);min-width:0}
.label{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.modes{display:flex;gap:var(--space-2);flex-wrap:wrap}
.mode{font:var(--type-label);text-transform:uppercase;letter-spacing:.06em;padding:10px 16px;cursor:pointer;border-radius:var(--radius-pill);border:var(--stroke) solid var(--border-strong);background:var(--surface-card);color:var(--text-heading)}
.mode[aria-pressed="true"]{background:var(--surface-inverse);color:var(--pd-yellow-300)}
.hidden{display:none!important}

/* Table (status details) ------------------------------------ */
.detail{display:grid;gap:4px;padding:var(--space-4);background:var(--surface-canvas-soft);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-md);min-width:0}
.detail span{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.detail strong{font:var(--type-body);font-weight:700;color:var(--text-heading);overflow-wrap:anywhere}

/* Utility --------------------------------------------------- */
.rule{padding-top:var(--space-4);border-top:1px solid var(--border-subtle);display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap}
.between{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-5);flex-wrap:wrap}
.right{display:grid;gap:var(--space-2);justify-items:end}
.note{display:grid;gap:var(--space-2);padding:var(--card-pad);background:var(--surface-canvas-soft);border:var(--stroke) solid var(--border-strong);border-radius:var(--radius-md)}

/* Responsive ------------------------------------------------ */
@media (max-width:1150px){
  .hero{grid-template-columns:1fr;gap:var(--space-5)}
  .hero__art{max-width:420px}
  .right{justify-items:start}
}
@media (max-width:960px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr)}
  .work{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .trust{flex-wrap:wrap;white-space:normal}
  .shell{padding:var(--space-3) var(--space-3) var(--space-6);gap:var(--space-5)}
  .panel{padding:var(--space-4);border-radius:var(--radius-lg);gap:var(--space-5)}
  .footer{padding:var(--space-5) var(--space-4);border-radius:var(--radius-lg)}
  .footer__lockup{flex-direction:column;align-items:flex-start;padding:14px 18px;border-radius:var(--radius-lg)}
  .footer__lockup img:first-child{height:auto;max-height:64px}
  .footer__lockup img:last-child{height:auto;max-height:44px}
  .footer__lockup .brandmark img{height:auto;max-height:44px}
  .topbar{padding:10px 14px;gap:10px}
  .topbar__brand img:first-child{height:44px}
  .topbar__brand img:last-child{height:24px}
  .topbar__nav a{padding:7px 7px;font-size:11.5px;letter-spacing:.05em}
  .journey{grid-template-columns:minmax(0,1fr)}
  .stage{grid-template-columns:80px minmax(0,1fr);column-gap:12px;row-gap:8px;align-content:start}
  .stage img{grid-column:1;grid-row:1 / span 2;aspect-ratio:1 / 1;height:80px;align-self:start;object-position:center 35%}
  .stage__n{grid-column:2;grid-row:1;align-self:end;font-size:13px}
  .stage h3{grid-column:2;grid-row:2;align-self:start;font-size:clamp(15px,4.4vw,20px);letter-spacing:.01em}
  .stage p{grid-column:1 / -1;grid-row:3}
  .work{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:960px){
  .topbar{flex-wrap:nowrap;gap:12px}
  .topbar__brand img:first-child{height:44px}
  .topbar__brand .brandmark img{height:22px}
  .topbar__nav{gap:0;margin-left:auto}
  .topbar__nav a{padding:7px 7px;font-size:11px;letter-spacing:.04em}
  /* Stack the journey one per row here too — 4 across leaves ~105px per heading */
  .journey{grid-template-columns:minmax(0,1fr)}
  .stage{grid-template-columns:96px minmax(0,1fr);column-gap:14px;row-gap:8px;align-content:start}
  .stage img{grid-column:1;grid-row:1 / span 2;aspect-ratio:1 / 1;height:96px;align-self:start;object-position:center 35%}
  .stage__n{grid-column:2;grid-row:1;align-self:end;font-size:13px}
  .stage h3{grid-column:2;grid-row:2;align-self:start;font-size:22px;letter-spacing:.01em}
  .stage p{grid-column:1 / -1;grid-row:3}
}

@media (max-width:560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
  .hero__art{max-width:300px}
  .topbar__brand img:first-child{height:40px}
  .topbar__brand img:last-child{height:24px}
  .topbar{flex-direction:column;justify-content:center;text-align:center}
  .topbar__brand{justify-content:center;margin-left:0}
  .topbar__nav{justify-content:center;flex-wrap:wrap;margin-left:0;margin-right:0}
  .review p{font-size:17px}
}
@media print{
  body{background:#fff}
  .topbar__nav,.btnrow{display:none}
}

/* Icon placeholders (Lucide swaps <i data-lucide> for an <svg>) ---- */
i[data-lucide]{display:inline-flex;width:20px;height:20px;flex-shrink:0}
.chip svg,.chip i[data-lucide]{width:18px;height:18px}
.card__icon svg,.feature__icon svg,.contact svg,.coverage svg{display:block}
.coverage svg,.coverage i[data-lucide]{width:24px;height:24px}

/* Radio-as-chip (booking form) ------------------------------- */
.chip input[type=radio]{width:18px;height:18px;margin:0;flex-shrink:0;accent-color:var(--pd-blue-500)}
label.chip{cursor:pointer}
label.chip:has(input:checked){background:var(--surface-inverse);color:var(--pd-yellow-300)}
label.chip:has(input:checked) svg{color:var(--pd-blue-400)}
label.chip:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
fieldset legend.label{padding:0;margin-bottom:var(--space-3)}

/* Narrow-screen text safety ---------------------------------- */
h1,h2,h3{overflow-wrap:break-word;text-wrap:pretty}
.fieldset>*,.section>*,.panel>*{max-width:100%}
.review{max-width:min(74ch,100%)}
.lede,.small,.card p,.stage p,.job p,.feature p{max-width:100%}
@media (max-width:560px){
  h1{font-size:clamp(30px,8.5vw,44px);line-height:1.04}
  .panel h2{font-size:clamp(24px,6.8vw,32px);line-height:1.08}
  .coverage{padding:12px 14px;gap:var(--space-2)}
  .coverage strong{font-size:15px}
  .btn--lg{font-size:15px;padding:14px 20px}
  .btnrow>.btn{width:100%}
  .modes .mode{flex:1 1 auto;text-align:center}
  .field{font-size:16px}
}

/* Brand lockup: wordmark + the tagline that sits under it in the original artwork */
.brandmark{display:flex;flex-direction:column;align-items:stretch;min-width:0;gap:3px}
.brandmark img{display:block}
.brandmark em{font-family:var(--font-display,inherit);font-style:normal;font-weight:800;font-size:9.5px;line-height:1;letter-spacing:.055em;text-transform:uppercase;color:var(--text-heading);white-space:nowrap;text-align:right;width:0;min-width:100%;box-sizing:border-box;padding-right:3.5%}
.brandmark--lg em{font-size:17px;letter-spacing:.05em}
@media (max-width:960px){.topbar .brandmark em{font-size:8px}}
@media (max-width:560px){.brandmark em{text-align:center}.brandmark--lg em{font-size:13px;text-align:left}}

.contact strong a{color:var(--pd-blue-600);text-decoration:none;cursor:pointer}
.contact strong a:hover{color:var(--text-heading)}

/* Repair receipt ------------------------------------------------- */
.receipt{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sticker);padding:var(--space-6);display:grid;gap:var(--space-5);margin-top:var(--space-6)}
.receipt__head{display:flex;align-items:start;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap}
.receipt__head h2{font:var(--type-display-2);letter-spacing:var(--tracking-display);color:var(--text-heading);margin:2px 0 6px}
.receipt__lockup{display:flex;align-items:center;gap:10px;flex-shrink:0}
.receipt__lockup img:first-child{height:44px;width:auto}
.receipt__lockup .brandmark img{height:20px;width:auto}
.receipt__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-5);margin:0;padding:var(--space-5) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.receipt__grid dt{font:var(--type-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0 0 3px}
.receipt__grid dd{margin:0;font-weight:600;color:var(--text-heading);overflow-wrap:anywhere}
.receipt__terms{margin:0}
@media (max-width:560px){.receipt{padding:var(--space-4)}.receipt__grid{grid-template-columns:minmax(0,1fr)}}
/* Scoped to the booking page only — site.css is shared by all four pages,
   and printing the homepage must not strip its headings and footer. */
@media print{
  .page-book .topbar,.page-book .footer,.page-book .panel--warm,.page-book #bookform,.page-book .receipt__actions,.page-book .heading{display:none!important}
  .page-book,.page-book .shell{background:#fff!important;padding:0!important;margin:0!important;display:block!important}
  .page-book .panel{box-shadow:none!important;border:0!important;padding:0!important;background:#fff!important}
  .page-book .receipt{box-shadow:none!important;border:1px solid #999!important;margin:0!important;break-inside:avoid}
  /* Print sheets are narrower than the screen card, so the head must not
     wrap and the lockup images must keep the sizes CSS gives them rather
     than falling back to their intrinsic width/height attributes. */
  /* Deliberate stack instead of a wrap: lockup first, then the ticket
     number, so a narrow sheet gives a proper letterhead. */
  .page-book .receipt__head{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important;break-inside:avoid}
  .page-book .receipt__head>div:first-child{order:2}
  .page-book .receipt__lockup{order:1;justify-self:start!important;align-items:center!important;padding-bottom:12px;border-bottom:1px solid #ccc;width:100%;break-inside:avoid}
  .page-book .receipt__lockup img:first-child{height:40px!important;width:auto!important;max-width:none!important}
  .page-book .receipt__lockup .brandmark{gap:2px!important}
  .page-book .receipt__lockup .brandmark img{height:18px!important;width:auto!important;max-width:none!important}
  .page-book .receipt__lockup .brandmark em{font-size:8.5px!important;white-space:nowrap!important}
  @page{margin:16mm}
  :root{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

/* Contact numbers in running text: bigger and lighter so they read at a glance */
.footer>p{font-size:15.5px}
.footer>p a{color:var(--pd-grey-300,#c8d2dc);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.footer>p a:hover{color:#fff;border-bottom-color:#fff}
#paywrap .small a{font-size:15.5px;font-weight:700;color:#5c7186;text-decoration:none;border-bottom:1px solid rgba(92,113,134,.4)}
#paywrap .small a:hover{color:var(--text-heading);border-bottom-color:var(--text-heading)}