/* 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}

/* 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)}