/* ==========================================================================
   TPC — The Patient Communicator
   Patient communication solutions — one page, one design system.

   Colour language : navy (dominant) · TPC green (accent) · white / soft neutral
   Voice           : editorial, premium, healthcare, calm
   Structure       : tokens → base → components → sections → responsive
   ========================================================================== */

@font-face {
  font-family: Label;
  src: url('../images/LabelSansVF.woff2') format('woff2');
  font-display: swap;
  font-weight: 100 900;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* brand */
  --navy: #002d62;
  --navy-deep: #001c40;
  --navy-ink: #04182e;
  --green: #08b14d;
  --green-ink: #04703a;          /* accessible green for text on light */

  /* neutrals */
  --paper: #ffffff;
  --soft: #f7f8f5;               /* soft off-white */
  --mist: #eef2f4;               /* cool neutral */
  --ink: #10243a;
  --muted: #566b7d;
  --muted-light: #b9c9d6;        /* body copy on navy */

  /* lines */
  --line: rgba(0, 45, 98, .13);
  --line-light: rgba(255, 255, 255, .16);

  /* layout */
  --container: min(1240px, calc(100% - 72px));
  --header-h: 84px;
  --serif: Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.2, .75, .25, 1);
  --radius: 14px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
html, body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Label, 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
a, button, input, textarea { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.035em; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

.container { width: var(--container); margin-inline: auto; }
.section-pad { padding-block: clamp(88px, 9.5vw, 148px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 1000;
  padding: 12px 20px; color: var(--navy); background: #fff;
  border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 28, 64, .2);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. TYPE SCALE
   -------------------------------------------------------------------------- */

.hero h1 { font-size: clamp(38px, 4vw, 58px); line-height: 1.05; letter-spacing: -.038em; }
h2 { font-size: clamp(33px, 3.9vw, 58px); line-height: 1.06; }
h3 { font-size: clamp(20px, 1.55vw, 25px); line-height: 1.22; }

em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
h1 em, h2 em { color: var(--green-ink); }
.hero h1 em, .flagship h2 em, .contact h2 em { color: var(--green); }

.eyebrow {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 22px;
  color: var(--green-ink);
  text-transform: uppercase; letter-spacing: .13em;
  font-size: 12px; font-weight: 800; line-height: 1.55;
}
.eyebrow > span { flex: none; width: 26px; height: 1px; margin-top: .78em; background: currentColor; }
.eyebrow.light { color: #6fdc9a; }

.mini-label {
  margin: 0;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .13em;
  font-size: 12px; font-weight: 800;
}

.section-heading { max-width: 1000px; margin-bottom: clamp(48px, 5.5vw, 78px); }
.section-heading h2 { max-width: 18ch; }
.section-lede { max-width: 60ch; margin-top: clamp(20px, 2.2vw, 28px); color: var(--muted); font-size: clamp(17px, 1.2vw, 19px); }

.split-heading { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: clamp(36px, 6vw, 96px); max-width: none; }
.split-heading > p { max-width: 46ch; margin-bottom: 4px; color: var(--muted); font-size: clamp(16px, 1.15vw, 18px); }

/* --------------------------------------------------------------------------
   4. BUTTONS & LINKS
   -------------------------------------------------------------------------- */

.button {
  min-height: 54px;
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  padding: 0 26px;
  color: var(--navy-ink); background: var(--green);
  border: 0; border-radius: 999px;
  font-size: 15px; font-weight: 780; letter-spacing: -.005em;
  cursor: pointer;
  transition: transform .3s var(--ease), background .25s, box-shadow .3s;
}
.button:hover { transform: translateY(-2px); background: #0ac257; box-shadow: 0 14px 30px -12px rgba(8, 177, 77, .7); }
.button span { display: inline-block; transition: transform .3s var(--ease); }
.button:hover span { transform: translate(3px, -2px); }
.button:disabled { cursor: wait; opacity: .65; transform: none; box-shadow: none; }
.button-small { min-height: 46px; padding: 0 20px; gap: 10px; font-size: 14px; }
.button-white { width: 100%; min-height: 56px; margin-top: 6px; }
/* The primary action in a section CTA block — same pill, more presence. */
.button-lg { min-height: 62px; padding: 0 34px; font-size: 16px; }
/* Secondary action: the same pill geometry, outlined, so it reads clearly as
   the quieter of the two without inventing a new shape. */
.button-ghost {
  color: var(--navy); background: transparent;
  border: 1.5px solid rgba(0, 45, 98, .28);
  font-weight: 740;
}
.button-ghost:hover { color: var(--navy); background: rgba(0, 45, 98, .05); border-color: var(--navy); box-shadow: none; }
.button-ghost.light { color: #fff; border-color: rgba(255, 255, 255, .42); }
.button-ghost.light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

.button-row { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 34px); flex-wrap: wrap; }

.text-link {
  display: inline-flex; align-items: center; gap: 12px;
  padding-bottom: 8px;
  color: var(--green-ink);
  border-bottom: 1px solid currentColor;
  font-size: 15px; font-weight: 750;
}
.text-link span { display: inline-block; transition: transform .3s var(--ease); }
.text-link:hover span { transform: translate(3px, -2px); }
.text-link.light { color: #fff; border-bottom-color: rgba(255, 255, 255, .45); }
.text-link.light:hover { border-bottom-color: var(--green); }

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid rgba(0, 45, 98, .09);
  backdrop-filter: blur(14px);
  transition: height .3s var(--ease), box-shadow .3s;
}
.site-header.scrolled { height: 72px; box-shadow: 0 10px 34px -22px rgba(0, 28, 64, .5); }
.nav-shell { width: min(1400px, calc(100% - 56px)); margin-inline: auto; display: flex; align-items: center; gap: 32px; }
.brand img { width: 172px; height: auto; transition: width .3s var(--ease); }
.site-header.scrolled .brand img { width: 156px; }

.desktop-nav { margin-inline: auto; display: flex; gap: clamp(20px, 2.4vw, 36px); }
.desktop-nav a {
  position: relative;
  color: #46617a; font-size: 14px; font-weight: 680;
  transition: color .2s;
}
.desktop-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.desktop-nav a:hover { color: var(--navy); }
.desktop-nav a:hover::after { transform: scaleX(1); }

.menu-toggle, .mobile-nav { display: none; }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */

/* One composed scene. The artwork fills the hero and is anchored to the RIGHT edge, so the
   only part that ever leaves the frame is the empty white space on its left — the doctor,
   the folder and both pairs of hands are always whole. Every size below is derived from the
   viewport WIDTH only (no vh, no 100vh), so browser chrome and window height cannot change
   what is shown: Chrome and Brave render the same hero at the same width. */
.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(540px, 42vw, 760px);
  padding-block: clamp(44px, 4.6vw, 76px);
  color: var(--ink);
  background: var(--paper);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media picture { display: block; height: 100%; }
.hero-media img {
  position: absolute; top: 0; right: 0;
  display: block; height: 100%; width: auto; max-width: none;
}
/* Readability + a seamless join where the artwork meets the hero background. Whites out the
   empty left of the scene only and is fully clear well before the doctor and the folder. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    #ffffff 0%, #ffffff 24%,
    rgba(255, 255, 255, .95) 33%,
    rgba(255, 255, 255, .66) 41%,
    rgba(255, 255, 255, .2) 49%,
    transparent 56%);
}

.hero-layout { position: relative; z-index: 2; }
.hero-copy { max-width: min(32rem, 44%); }
.hero h1 { color: var(--navy); text-wrap: balance; }
.hero-lede { max-width: 34ch; margin: clamp(20px, 2.4vw, 30px) 0 clamp(30px, 3.4vw, 44px); color: var(--muted); font-size: clamp(17px, 1.2vw, 19px); line-height: 1.62; }


/* --------------------------------------------------------------------------
   7. PROOF / IMPACT NUMBERS
   -------------------------------------------------------------------------- */

.proof { position: relative; padding-block: clamp(56px, 6vw, 88px) clamp(56px, 6vw, 86px); background: var(--paper); border-top: 1px solid var(--line); }
.proof-inner { position: relative; }
.proof .mini-label { color: var(--green-ink); }
.proof-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(28px, 3vw, 44px);
}
.proof-stat { padding-right: 24px; border-left: 1px solid var(--line); padding-left: clamp(20px, 2.4vw, 38px); }
.proof-stat:first-child { border-left: 0; padding-left: 0; }
.proof-stat strong {
  display: block;
  color: var(--navy);
  font-size: clamp(46px, 5.4vw, 82px); line-height: .92;
  letter-spacing: -.055em; font-weight: 600;
}
.proof-stat sup { top: -.05em; color: var(--green); font-size: .42em; }
.proof-stat span {
  display: block; max-width: 19ch; margin-top: 15px;
  color: var(--muted); font-size: 15px; line-height: 1.45;
}

/* --------------------------------------------------------------------------
   8. PATIENT JOURNEY
   -------------------------------------------------------------------------- */

.journey { position: relative; z-index: 3; background: var(--soft); }
.journey::before {
  content: ''; position: absolute; left: -2%; right: -2%; bottom: 100%;
  height: clamp(34px, 4.6vw, 76px);
  background: var(--soft);
  border-radius: 100% 100% 0 0 / 100% 100% 0 0;
}
.journey > .container { position: relative; }
.journey-body {
  display: grid; grid-template-columns: 1.28fr 1fr;
  align-items: start; gap: clamp(36px, 4.4vw, 70px);
}

/* The visual tracks the four stages instead of leaving a void beside them. The photograph
   keeps its own ratio (width 100% / height auto), so the tabs are never cropped. */
.journey-visual {
  position: sticky; top: calc(var(--header-h) + clamp(24px, 5vh, 60px)); margin: 0;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 32px 74px -46px rgba(0, 22, 50, .45);
}
.journey-visual picture { display: block; }
.journey-visual img { display: block; width: 100%; height: auto; }

.journey-steps { position: relative; padding-left: clamp(42px, 4.4vw, 62px); }
.journey-steps::before {
  content: ''; position: absolute; left: 12px; top: calc(clamp(26px, 2.8vw, 38px) + 15px); bottom: 26px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--green) 0%, rgba(0, 45, 98, .55) 58%, rgba(0, 45, 98, .08) 100%);
}
.journey-steps li { position: relative; padding-block: clamp(26px, 2.8vw, 38px); }
.journey-steps li + li { border-top: 1px solid var(--line); }
.journey-steps li::before {
  content: ''; position: absolute; left: calc(clamp(42px, 4.4vw, 62px) * -1 + 6px);
  top: calc(clamp(26px, 2.8vw, 38px) + 9px);
  width: 14px; height: 14px;
  border: 3px solid var(--soft); border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 1.5px rgba(0, 45, 98, .35);
}
.journey-steps li:first-child::before { background: var(--green); box-shadow: 0 0 0 1.5px rgba(8, 177, 77, .5); }
.journey-no { display: block; margin-bottom: 12px; color: var(--green-ink); text-transform: uppercase; font-size: 12px; font-weight: 820; letter-spacing: .13em; }
/* Each stage is now a label and the survey question itself, so the question is
   the only body copy and carries the full width of the column. */
.journey-steps h3 { max-width: 34ch; margin-bottom: 0; font-size: clamp(20px, 1.62vw, 26px); line-height: 1.28; text-wrap: pretty; }
.journey-steps p { max-width: 46ch; color: var(--muted); font-size: 16px; }

/* Sits between the intro and the four points, in the same rule-and-muted-text
   language the rest of the page already uses. */
.journey-note {
  margin-bottom: clamp(34px, 4vw, 56px);
  padding-bottom: clamp(26px, 3vw, 38px);
  border-bottom: 1px solid var(--line);
}
/* The intro now runs straight into this block, so the heading closes tighter
   than the standalone section headings elsewhere on the page. */
.journey .section-heading { margin-bottom: clamp(30px, 3.4vw, 44px); }
.journey-note b {
  display: block; max-width: 30ch;
  color: var(--navy); font-size: clamp(19px, 1.5vw, 24px); font-weight: 790;
  letter-spacing: -.022em; line-height: 1.24;
}
.journey-note p { max-width: 66ch; margin-top: 12px; color: var(--muted); font-size: clamp(16px, 1.1vw, 17px); }

/* --------------------------------------------------------------------------
   9. FLAGSHIP — ADMIT-DISCHARGE FOLDERS
   -------------------------------------------------------------------------- */

.flagship { position: relative; color: #fff; background: var(--navy); overflow: hidden; }
.flagship::before {
  content: ''; position: absolute; z-index: 0;
  left: 50%; top: -30vw; width: 120vw; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(8, 177, 77, .10) 0%, transparent 55%);
  transform: translateX(-50%);
  pointer-events: none;
}
.flagship-inner { position: relative; z-index: 1; padding-block: clamp(88px, 9.5vw, 148px); }
.flagship h2 { max-width: 16ch; }
.flagship .section-lede { color: var(--muted-light); }

.flagship-showcase {
  display: grid; grid-template-columns: .86fr 1.14fr;
  gap: clamp(40px, 5.5vw, 88px); align-items: center;
}
.flagship-hero { position: relative; margin: 0; }
.flagship-hero picture {
  display: block;
  aspect-ratio: 4 / 5;
  background: #ffffff;
  border-radius: var(--radius);
  overflow: hidden;
}
.flagship-hero img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 48%;
}
.flagship-hero figcaption {
  display: grid; gap: 5px;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line-light);
}
.flagship-hero figcaption b { color: #fff; font-size: 15px; font-weight: 760; letter-spacing: -.012em; }
.flagship-hero figcaption span { max-width: 40ch; color: #93abbf; font-size: 14px; line-height: 1.5; }

.flagship-points article { padding-block: clamp(24px, 2.7vw, 34px); border-top: 1px solid var(--line-light); }
.flagship-points article:first-child { border-top: 0; padding-top: 0; }
.flagship-points h3 { margin-bottom: 8px; color: #fff; }
.flagship-points p { max-width: 48ch; margin-top: 2px; color: var(--muted-light); font-size: 16px; line-height: 1.62; }
.flagship-points .button { margin-top: clamp(26px, 3.2vw, 38px); }
/* The action block closes the list like another entry, so the two CTAs read as
   part of the section rather than as something tacked on the end. */
.flagship-actions {
  gap: 14px clamp(16px, 1.8vw, 22px);
  margin-top: 0; padding-top: clamp(28px, 3.2vw, 40px);
  border-top: 1px solid var(--line-light);
}
.flagship-actions .button { margin-top: 0; }

/* --------------------------------------------------------------------------
   10. BEDSIDE — INTERCHANGEABLE WHITEBOARDS
   -------------------------------------------------------------------------- */

.bedside { background: var(--paper); }
.bedside-grid { display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: clamp(40px, 6vw, 92px); }

.bedside-visual { position: relative; margin: 0; }
.bedside-visual picture {
  position: relative;
  display: grid; place-items: center;
  padding: clamp(18px, 2.2vw, 32px);
  background: var(--mist); border-radius: var(--radius);
}
.bedside-visual picture::after {
  content: ''; position: absolute; inset: clamp(9px, 1.1vw, 16px);
  border: 1px solid rgba(0, 45, 98, .1); border-radius: 6px;
  pointer-events: none;
}
.bedside-visual img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 26px 46px -30px rgba(0, 28, 64, .55); }
.bedside-visual figcaption {
  margin-top: 16px;
  color: var(--muted); text-transform: uppercase; letter-spacing: .12em;
  font-size: 10px; font-weight: 780;
}

.bedside-copy h2 { max-width: 15ch; }
.bedside-copy > p { max-width: 48ch; margin-top: clamp(18px, 2vw, 26px); color: var(--muted); font-size: clamp(16px, 1.15vw, 18px); }
.bedside-points { margin: clamp(26px, 3vw, 38px) 0 clamp(28px, 3.2vw, 40px); }
.bedside-points li { padding-block: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 16px; }
.bedside-points li:last-child { border-bottom: 1px solid var(--line); }
.bedside-points b { color: var(--ink); font-weight: 760; }
/* Matches the flagship block so both product sections close on the same
   primary-plus-secondary pair. */
.bedside-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px clamp(16px, 1.8vw, 22px);
  padding-top: clamp(4px, 0.6vw, 8px);
}
/* Beside the board photo the copy column is only ~550px, too narrow for two
   large pills side by side. Stack them and let them fill it, rather than let
   the pair wrap into two ragged rows. */
@media (min-width: 1101px) {
  .bedside-actions { flex-direction: column; align-items: stretch; gap: 12px; max-width: 390px; }
}

/* --------------------------------------------------------------------------
   11. WHY TPC
   -------------------------------------------------------------------------- */

.why { background: var(--soft); }
/* The list is the last thing in the section now that "How we work" is gone —
   close it with a bottom rule and trim the tail so it does not float in padding. */
.why.section-pad { padding-bottom: clamp(66px, 7vw, 104px); }
.why-list { border-bottom: 1px solid var(--line); }
.why-list article:last-child { padding-bottom: clamp(30px, 3.4vw, 46px); }
.why-list article {
  display: grid; grid-template-columns: clamp(78px, 8.5vw, 148px) minmax(0, 1fr) minmax(0, .3fr);
  gap: clamp(20px, 3vw, 44px); align-items: start;
  padding-block: clamp(34px, 4vw, 58px);
  border-top: 1px solid var(--line);
  transition: background .3s;
}
.why-no {
  color: rgba(0, 45, 98, .52);
  font-size: clamp(42px, 5.2vw, 78px); line-height: .82;
  letter-spacing: -.065em; font-weight: 550;
  transition: color .35s var(--ease);
}
.why-list article:hover .why-no { color: var(--green); }
.why-list h3 { margin-bottom: 12px; font-size: clamp(22px, 2vw, 30px); }
.why-list p { max-width: 56ch; color: var(--muted); font-size: clamp(16px, 1.1vw, 17px); line-height: 1.65; }

/* --------------------------------------------------------------------------
   12. TRUST — HOSPITAL LOGOS
   -------------------------------------------------------------------------- */

.trust { padding-block: clamp(52px, 5.8vw, 86px); background: var(--paper); }
.trust .mini-label { color: var(--muted); }
.client-logos {
  display: grid; grid-template-columns: repeat(6, 1fr);
  /* row gap trimmed, column gap kept — the arrangement is unchanged, only its height. */
  gap: clamp(10px, 1.6vw, 24px) clamp(12px, 2vw, 30px);
  margin-top: clamp(24px, 2.8vw, 39px);
}
.client-logo { display: grid; place-items: center; min-height: 80px; padding: 10px 12px; }
.client-logo img {
  width: auto; height: auto; max-width: 100%; max-height: 62px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05);
  opacity: .74;
  transition: filter .3s, opacity .3s;
}
.client-logo:hover img, .client-logo:focus-within img { filter: grayscale(0); opacity: 1; }

/* --------------------------------------------------------------------------
   13. CONTACT
   -------------------------------------------------------------------------- */

.contact { position: relative; color: #fff; background: var(--navy); overflow: hidden; }
.contact-band { position: relative; margin: 0; }
.contact-band img { width: 100%; height: clamp(240px, 30vw, 440px); object-fit: cover; object-position: center 53%; }
.contact-band::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 45, 98, .10) 0%,
    rgba(0, 45, 98, .32) 46%,
    rgba(0, 40, 88, .84) 82%,
    var(--navy) 100%);
}

.contact-shell {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: .88fr 1.12fr;
  gap: clamp(44px, 6vw, 96px);
  padding-block: clamp(56px, 6vw, 92px) clamp(80px, 9vw, 130px);
}
.contact-copy h2 { max-width: 15ch; }
.contact-copy > p { max-width: 46ch; margin-top: clamp(18px, 2vw, 26px); color: var(--muted-light); font-size: clamp(16px, 1.15vw, 18px); }
.direct-contact { display: grid; gap: 6px; margin-top: clamp(30px, 3.4vw, 44px); }
.direct-contact a { font-size: clamp(18px, 1.4vw, 21px); font-weight: 720; transition: color .2s; }
.direct-contact a:hover { color: #7ee6a8; }

.contact-form { padding: clamp(28px, 3.4vw, 46px); color: var(--ink); background: var(--paper); border-radius: var(--radius); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: grid; margin-bottom: 22px; }
.field label { margin-bottom: 8px; color: #4a6377; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 800; }
.field label span:not(.required-marker) { font-weight: 500; text-transform: none; letter-spacing: 0; }
.field input, .field textarea {
  min-height: 48px; padding: 12px 14px;
  border: 1px solid #ccd8e0; border-radius: 8px;
  background: #fbfcfc; outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px rgba(8, 177, 77, .14); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #b42318; background: #fff5f3; }

.required-marker { color: var(--green-ink); font-size: 1.15em; }
.form-status { min-height: 22px; margin: -4px 0 10px; color: #556c7d; font-size: 14px; line-height: 1.45; }
.contact-form.has-error .form-status { color: #9b1c1c; font-weight: 700; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */

.footer { padding-block: clamp(56px, 6vw, 82px); color: #9fb4c4; background: var(--navy-deep); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr .9fr; align-items: start; gap: clamp(32px, 5vw, 64px); }
.footer-brand img { width: 178px; margin-bottom: 18px; filter: brightness(0) invert(1); }
.footer-brand p { max-width: 42ch; font-size: 14px; line-height: 1.6; }
.footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; font-size: 14px; }
.footer a { transition: color .2s; }
.footer a:hover { color: #7ee6a8; }
.footer-meta { display: grid; gap: 6px; font-size: 14px; text-align: right; }
.footer-meta a:first-child { color: #fff; font-size: 18px; font-weight: 740; }

/* --------------------------------------------------------------------------
   15. REVEAL MOTION
   -------------------------------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   16. RESPONSIVE — TABLET / SMALL LAPTOP
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --container: min(1240px, calc(100% - 56px)); }

  /* Below the full-scene hero: same direction, stacked — copy and CTA first, then the
     folder-led crop of the same artwork at full container width. Nothing is cropped: the
     picture takes the crop's own ratio and the image simply fills it. */
  .hero {
    display: grid; grid-template-columns: minmax(0, 1fr);
    min-height: 0; overflow: visible;
    padding-block: clamp(44px, 6vw, 72px) clamp(56px, 7vw, 88px);
  }
  /* explicit rows: copy and CTA first, artwork second — never source order */
  .hero-layout { grid-row: 1; }
  .hero-media {
    grid-row: 2; position: static; z-index: auto;
    width: var(--container); max-width: 760px;
    margin: clamp(28px, 4.5vw, 44px) auto 0;
  }
  .hero-media picture {
    display: block; height: auto;
    border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 34px 78px -44px rgba(0, 22, 50, .5);
  }
  .hero-media img { position: static; width: 100%; height: auto; }
  .hero-scrim { display: none; }
  .hero-copy { max-width: 38rem; }
  .hero-lede { max-width: 46ch; }
  .split-heading { grid-template-columns: 1fr; align-items: start; gap: 26px; }
  .split-heading > p { max-width: 60ch; }
  .journey-body { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 52px); }
  .journey-visual { position: static; max-width: 720px; margin-inline: auto; }
  .flagship-showcase { grid-template-columns: 1fr; gap: clamp(34px, 5vw, 56px); }
  .flagship-hero { max-width: 480px; }
  .bedside-grid { grid-template-columns: 1fr; gap: clamp(34px, 5vw, 52px); }
  .contact-shell { grid-template-columns: 1fr; }
  .client-logos { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.3fr 1fr; }
  .footer-meta { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 1024px) {

  .desktop-nav, .header-cta { display: none; }
  .menu-toggle {
    display: grid; place-content: center; gap: 5px;
    width: 46px; height: 46px; margin-left: auto;
    color: var(--navy); background: transparent;
    border: 1px solid rgba(0, 45, 98, .22); border-radius: 50%;
    cursor: pointer;
  }
  .menu-toggle span:not(.sr-only) {
    display: block; width: 19px; height: 1.6px; background: var(--navy);
    transition: transform .24s ease;
  }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.3px) rotate(-45deg); }

  .mobile-nav {
    position: absolute; top: 100%; left: 20px; right: 20px; z-index: 20;
    display: grid;
    max-height: calc(100vh - 110px); padding: 14px;
    overflow-y: auto;
    color: var(--ink); background: var(--paper);
    border-top: 3px solid var(--green); border-radius: 0 0 12px 12px;
    box-shadow: 0 26px 55px -20px rgba(0, 28, 64, .4);
    visibility: hidden; opacity: 0; transform: translateY(-10px); pointer-events: none;
    transition: opacity .24s ease, transform .24s var(--ease), visibility 0s linear .24s;
  }
  .mobile-nav.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
  .mobile-nav a { min-height: 48px; display: flex; align-items: center; padding-inline: 12px; font-weight: 680; }
  .mobile-nav a + a { border-top: 1px solid var(--line); }
  .mobile-nav .button { justify-content: center; margin-top: 12px; border-top: 0; }

}

/* --------------------------------------------------------------------------
   17. RESPONSIVE — MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  :root { --container: min(1240px, calc(100% - 36px)); --header-h: 70px; }
  body { font-size: 16px; }

  .nav-shell { width: calc(100% - 36px); gap: 16px; }
  .brand img, .site-header.scrolled .brand img { width: 146px; }
  .mobile-nav { left: 16px; right: 16px; }

  .section-pad { padding-block: clamp(68px, 13vw, 92px); }
  .section-heading { margin-bottom: 36px; }
  .section-heading h2, .split-heading h2 { max-width: none; }
  h2 { font-size: clamp(31px, 8.4vw, 40px); line-height: 1.08; }
  h3 { font-size: 21px; }

  /* Mobile hero: one layered campaign frame — artwork on top, a navy gradient sweeping up
     through its lower half, copy and CTA sitting on that gradient. Phone widths only; the
     tablet/desktop hero above is untouched. Every measurement is in vw, so the composition
     holds its proportions on every phone and in every browser. */
  .hero {
    display: block; padding: 0;
    color: #fff; background: var(--navy-ink);
    overflow: hidden;
  }
  .hero-media {
    /* nudged up so the folder sits higher and the copy lands clear of it.
       bottom:auto is required — the desktop rule sets `inset: 0`, and leaving that bottom
       in place would stretch this box to the hero floor and spread the gradient over it. */
    position: absolute; top: -4vw; right: 0; bottom: auto; left: 0; z-index: 0;
    width: auto; max-width: none; margin: 0;
  }
  .hero-media picture { border-radius: 0; box-shadow: none; }
  .hero-media img { width: 100%; height: auto; }
  .hero-scrim {
    display: block; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg,
      rgba(4, 24, 46, 0) 44%,
      rgba(4, 24, 46, .24) 62%,
      rgba(4, 23, 44, .68) 74%,
      rgba(4, 21, 41, .9) 85%,
      var(--navy-ink) 96%);
  }
  .hero-layout {
    position: relative; z-index: 2;
    padding-top: 82vw; padding-bottom: 76px;
  }
  .hero .eyebrow {
    color: #ffffff; font-size: 11px; letter-spacing: .1em;
    line-height: 1.5; margin-bottom: 14px;
  }
  .hero .eyebrow > span { background: #6fdc9a; }
  .hero h1 { color: #fff; font-size: clamp(31px, 8.4vw, 44px); line-height: 1.06; }
  .hero-lede { max-width: 34ch; margin: 16px 0 26px; color: #cfdde8; font-size: 16px; }
  .hero .button-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero .button { width: 100%; }

  .proof { padding-block: 46px 50px; }
  /* Three stats stack rather than pair up: two columns left the third alone
     in a half-empty row. */
  .proof-grid { grid-template-columns: 1fr; gap: 30px 20px; }
  .proof-stat { padding-right: 0; border-left: 0; padding-left: 0; }
  .proof-stat strong { font-size: clamp(38px, 11vw, 50px); }
  .proof-stat span { max-width: none; font-size: 13px; }

  .journey-steps { padding-left: 34px; }
  .journey-steps::before { left: 8px; top: 40px; }
  .journey-steps li { padding-block: 24px; }
  .journey-steps li::before { left: -34px; top: 32px; width: 12px; height: 12px; border-width: 3px; }
  .journey-steps h3 { max-width: none; font-size: 20px; }
  .journey-steps p { font-size: 16px; }

  .flagship-inner { padding-block: 76px; }
  .flagship-hero { max-width: none; }
  .flagship-hero figcaption { gap: 6px; }

  /* Both section CTAs stack full width on phones, like the hero, so the primary
     action is the widest thing on the screen instead of a half-width pill. */
  .flagship-actions, .bedside-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .flagship-actions .button, .bedside-actions .button { width: 100%; }

  .bedside-visual picture { padding: 16px; }
  .bedside-visual picture::after { inset: 8px; }

  .why-list article { grid-template-columns: 1fr; gap: 6px; padding-block: 30px; }
  .why-no { font-size: 40px; }
  .why-list h3 { font-size: 22px; }

  .client-logos { grid-template-columns: repeat(2, 1fr); gap: 8px 10px; }
  .client-logo { min-height: 72px; }
  .client-logo img { max-height: 54px; opacity: .8; }

  .contact-band img { height: clamp(200px, 52vw, 280px); object-position: center 38%; }
  .contact-shell { padding-block: 44px 72px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .field input, .field textarea { font-size: 16px; }
  .direct-contact a { min-height: 44px; display: flex; align-items: center; }

  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer nav { gap: 4px 20px; }
  .footer a { min-height: 40px; display: flex; align-items: center; }
  .footer-meta { text-align: left; }
}

@media (max-width: 390px) {
  :root { --container: min(1240px, calc(100% - 28px)); }
  .nav-shell { width: calc(100% - 28px); }
  .brand img, .site-header.scrolled .brand img { width: 134px; }
  .proof-grid { grid-template-columns: 1fr; }
  /* Two columns down to the narrowest phones: a single 18-row stack made the
     trust band the tallest thing on the page. Same arrangement as 391-700px. */
  .client-logo { min-height: 68px; padding: 8px 6px; }
}

/* --------------------------------------------------------------------------
   18. PORTFOLIO PAGE
   Self-contained: every selector is .pf-* and is used only by portfolio.html,
   so nothing here can reach the approved homepage.
   -------------------------------------------------------------------------- */

.pf-intro { padding-block: clamp(58px, 6.5vw, 96px) clamp(34px, 3.6vw, 52px); background: var(--paper); }
.pf-intro h1 { max-width: 16ch; color: var(--navy); font-size: clamp(38px, 4vw, 58px); line-height: 1.05; letter-spacing: -.038em; }
.pf-intro h1 em { color: var(--green-ink); }
.pf-lede { max-width: 62ch; margin-top: clamp(20px, 2.2vw, 28px); color: var(--muted); font-size: clamp(17px, 1.2vw, 19px); line-height: 1.62; }

/* ---- category tabs ---- */
.pf-gallery { padding-bottom: clamp(72px, 8vw, 116px); background: var(--paper); }

.pf-tabs {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding-bottom: clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(30px, 3.4vw, 48px);
}
.pf-tab {
  min-height: 48px;
  padding: 0 22px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px; font-weight: 720; letter-spacing: -.005em;
  cursor: pointer;
  transition: color .25s, background .25s, border-color .25s;
}
.pf-tab:hover { color: var(--navy); border-color: rgba(0, 45, 98, .32); }
.pf-tab[aria-selected="true"] { color: #fff; background: var(--navy); border-color: var(--navy); }

/* ---- gallery grid ---- */
/* Image-led: four across on large screens, so the work reads as a body of work
   rather than a handful of examples. */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
}

.pf-item { margin: 0; }

/* One square frame for every tile in both categories — folders come portrait and
   landscape, boards come landscape and tall. With object-fit: contain each piece
   sits whole and undistorted, and the grid stays perfectly regular. */
.pf-open {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1 / 1;
  padding: clamp(12px, 1.3vw, 20px);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: zoom-in;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.pf-open img {
  /* max-* rather than 100%: the whole product fits the frame at its own
     proportions, so nothing is cropped and nothing is stretched. */
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  transition: transform .45s var(--ease);
}
.pf-open:hover { border-color: rgba(0, 45, 98, .28); box-shadow: 0 18px 40px -26px rgba(0, 28, 64, .55); transform: translateY(-3px); }
.pf-open:hover img { transform: scale(1.03); }

/* ---- CTA ---- */
.pf-cta { padding-block: clamp(66px, 7vw, 104px); color: #fff; background: var(--navy-ink); }
/* Left-aligned with the intro and the grid above it, like the homepage bands. */
.pf-cta-inner > * { max-width: 720px; }
.pf-cta h2 { color: #fff; max-width: 16ch; }
.pf-cta h2 em { color: var(--green); }
.pf-cta p { max-width: 50ch; margin: clamp(18px, 2vw, 26px) 0 clamp(28px, 3vw, 38px); color: var(--muted-light); font-size: clamp(16px, 1.15vw, 18px); }

/* ---- lightbox ---- */
body.lightbox-open { overflow: hidden; }

.pf-lightbox[hidden] { display: none; }
.pf-lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: clamp(56px, 6vw, 84px) clamp(16px, 6vw, 96px);
  background: rgba(4, 24, 46, .95);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .28s var(--ease);
}
.pf-lightbox.is-open { opacity: 1; }

.pf-lb-figure { display: grid; gap: 18px; justify-items: center; margin: 0; max-width: 100%; }
.pf-lb-img {
  max-width: 100%;
  max-height: calc(100vh - 210px);
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 10px;
  background: var(--soft);
}
/* The gallery is deliberately caption-free; the only text in the viewer is
   where you are in the set. */
.pf-lb-count { color: #9fb6c8; font-size: 12px; font-weight: 780; letter-spacing: .14em; }

.pf-lb-close, .pf-lb-nav {
  position: absolute;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.pf-lb-close:hover, .pf-lb-nav:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .5); }

.pf-lb-close { top: clamp(14px, 2vw, 26px); right: clamp(14px, 2vw, 26px); width: 46px; height: 46px; font-size: 27px; line-height: 1; }
.pf-lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; line-height: 1; }
.pf-lb-nav span { display: block; margin-top: -4px; }
.pf-lb-prev { left: clamp(10px, 2vw, 28px); }
.pf-lb-next { right: clamp(10px, 2vw, 28px); }

/* ---- portfolio responsive ---- */
@media (max-width: 1240px) {
  .pf-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .pf-intro { padding-block: 44px 26px; }
  .pf-intro h1 { max-width: none; font-size: clamp(31px, 8.4vw, 44px); }
  .pf-lede { font-size: 16px; }

  .pf-tabs { gap: 10px; padding-bottom: 22px; margin-bottom: 26px; }
  /* Two tabs, one per line at phone widths — neither label is ever truncated. */
  .pf-tab { flex: 1 1 100%; padding: 0 16px; font-size: 14px; }

  /* Two across down to the narrowest phones — a single column turned 37 tiles
     into a 14,000px scroll, and the lightbox is where a piece is read anyway. */
  .pf-grid { gap: 12px; }
  .pf-open { padding: 10px; border-radius: 10px; }

  .pf-cta { padding-block: 62px; }
  .pf-cta h2 { max-width: none; }
  .pf-cta .button { width: 100%; }

  .pf-lightbox { padding: 74px 12px 92px; }
  .pf-lb-figure { gap: 14px; }
  .pf-lb-img { max-height: calc(100vh - 230px); }
  .pf-lb-close { width: 42px; height: 42px; }
  /* Below the image on phones, where they cannot cover the artwork and stay in thumb reach. */
  .pf-lb-nav { top: auto; bottom: 18px; transform: none; width: 48px; height: 48px; }
  .pf-lb-prev { left: calc(50% - 58px); }
  .pf-lb-next { right: calc(50% - 58px); }
}

/* --------------------------------------------------------------------------
   19. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}