/* ==========================================================================
   Eastbridge Comms — site stylesheet
   Tokens and component rules follow brand-guide.md.
   Navy dominant, sand accent only, flat colour, sentence case, Roboto Slab.
   ========================================================================== */

:root{
  /* Brand */
  --navy:#0a0941;
  --navy-lift:#15134f;      /* flat, slightly lighter navy for panels on navy */
  --sand:#e7c9a5;
  --white:#ffffff;
  --on-navy:#ffffff;        /* text sitting on a navy surface */

  /* Navy-tinted neutrals — never pure grey */
  --navy-02:#fafafc;
  --navy-05:#f4f4f8;
  --navy-10:#e8e8f0;
  --navy-20:#d2d2e0;
  --ink:#0a0941;
  --ink-muted:#5c5c7a;
  --on-navy-muted:#c9c9dd;

  /* Radii */
  --r-card:14px;
  --r-card-sm:10px;
  --r-media:16px;
  --r-tag:6px;
  --r-pill:999px;

  /* Shadows — navy-tinted, low opacity */
  --shadow-card:0 1px 2px rgba(10,9,65,.04), 0 8px 24px rgba(10,9,65,.07);
  --shadow-raised:0 2px 4px rgba(10,9,65,.06), 0 16px 40px rgba(10,9,65,.10);

  /* Motion — functional only, 120–320ms */
  --t-fast:140ms cubic-bezier(.2,0,.2,1);
  --t-base:220ms cubic-bezier(.2,0,.2,1);

  --header-h:78px;
}


/* ---------- Reset & base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Roboto Slab', Georgia, serif;
  font-weight:400;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-weight:300; letter-spacing:-.01em; margin:0; line-height:1.15}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:1.2rem; font-weight:400; line-height:1.3}
h4{font-size:1rem; font-weight:400}
p{margin:0}
a{color:inherit}
ul{margin:0}

.wrap{max-width:1140px; margin:0 auto; padding:0 24px}
.lede{color:var(--ink-muted); font-weight:300; font-size:1.1rem; max-width:60ch}
.on-navy .lede{color:var(--on-navy-muted)}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--sand); color:var(--navy);
  padding:12px 20px; border-radius:0 0 var(--r-card-sm) 0; z-index:100;
}
.skip:focus{left:0}

/* ---------- Eyebrow — the only permitted uppercase ---------- */
.eyebrow{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.12em;
  font-weight:500; color:var(--ink-muted); margin:0 0 12px;
}
.on-navy .eyebrow{color:var(--sand)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:inherit; font-size:.98rem; font-weight:400; line-height:1;
  padding:15px 28px; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:filter var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--navy); outline-offset:3px}
.on-navy .btn:focus-visible{outline-color:var(--sand)}
.btn--primary{background:var(--navy); color:var(--on-navy)}
.btn--accent{background:var(--sand); color:var(--navy)}
.btn--secondary{background:transparent; color:var(--navy); border-color:var(--navy-20)}
.btn--secondary:hover{border-color:var(--navy)}
.btn--ghost{background:transparent; color:var(--navy); padding-left:14px; padding-right:14px}
/* Navy surfaces. `.on-navy` is the marker class, but the navy-backed components
   are listed too — a secondary button on navy without the marker renders navy
   text on navy, which is invisible. Belt and braces. */
.on-navy .btn--secondary,
.calc__out .btn--secondary,
.card--navy .btn--secondary{color:var(--on-navy); border-color:rgba(231,201,165,.45)}
.on-navy .btn--secondary:hover,
.calc__out .btn--secondary:hover,
.card--navy .btn--secondary:hover{border-color:var(--sand)}
.on-navy .btn--ghost,
.calc__out .btn--ghost,
.card--navy .btn--ghost{color:var(--on-navy)}
.btn--sm{padding:11px 20px; font-size:.9rem}
.btn--block{width:100%}

/* ---------- Badge & tag ---------- */
.badge{
  display:inline-block; border-radius:var(--r-pill);
  padding:5px 13px; font-size:.75rem; letter-spacing:.02em;
  background:var(--sand); color:var(--navy);
}
.badge--quiet{background:var(--navy-10); color:var(--ink)}
.tag{
  display:inline-block; border-radius:var(--r-tag);
  padding:4px 10px; font-size:.78rem; color:var(--ink-muted);
  border:1px solid var(--navy-10); background:var(--navy-02);
}
.on-navy .tag{color:var(--on-navy-muted); border-color:rgba(231,201,165,.22); background:transparent}

/* ---------- Header ---------- */
/* Sticky so the nav is reachable from anywhere on a long page. */
.site-header{
  background:var(--navy); color:var(--on-navy);
  position:sticky; top:0; z-index:50;
  transition:box-shadow var(--t-base);
}
.site-header.is-stuck{box-shadow:0 2px 20px rgba(10,9,65,.35)}

/* Stop the sticky bar covering a section when you jump to an anchor. */
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

.nav{display:flex; align-items:center; gap:32px; min-height:78px}
/* Logo. Uses the reversed (white) lockup — header and footer are both navy.
   Sized by height so the lockup's aspect ratio is preserved automatically. */
.logo{display:flex; align-items:center; text-decoration:none; flex:none}
.logo__img{height:40px; width:auto; display:block}
.site-footer .logo__img{height:36px}
@media(max-width:560px){ .logo__img{height:32px} }
.nav__links{display:flex; gap:28px; list-style:none; margin:0 0 0 auto; padding:0}
.nav__links a{
  text-decoration:none; font-size:.95rem; font-weight:300; color:var(--on-navy);
  padding-bottom:4px; border-bottom:1px solid transparent;
  transition:border-color var(--t-fast);
}
.nav__links a:hover,
.nav__links a[aria-current="page"]{border-color:var(--sand)}
.nav__cta{margin-left:8px}
.nav__toggle{
  display:none; margin-left:auto; background:transparent; border:1px solid rgba(231,201,165,.45);
  color:var(--on-navy); border-radius:var(--r-pill); padding:10px 16px;
  font-family:inherit; font-size:.9rem; cursor:pointer;
}
.nav__toggle:focus-visible{outline:2px solid var(--sand); outline-offset:3px}

@media(max-width:900px){
  .nav__links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--navy);
    padding:8px 24px 24px; border-top:1px solid rgba(231,201,165,.18);
  }
  .nav__links.is-open{display:flex}
  .nav__links li{padding:14px 0; border-bottom:1px solid rgba(231,201,165,.12)}
  .nav__toggle{display:block}
  .nav__cta{display:none}
}

/* ---------- Hero ---------- */
.hero{background:var(--navy); color:var(--on-navy); padding:72px 0 88px}
.hero--short{padding:64px 0 68px}
.hero__grid{display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center}
.hero h1{max-width:16ch}
.hero .lede{margin-top:20px}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}
.hero__note{margin-top:22px; font-size:.88rem; color:var(--on-navy-muted); font-weight:300}
.hero--short h1{max-width:22ch}
@media(max-width:900px){ .hero__grid{grid-template-columns:1fr; gap:36px} }

/* ---------- Icons ----------
   Line icons, 48×48, drawn in navy with sand accent strokes (.ia).
   currentColor drives the main stroke so the same icon works on light and navy. */
.icon{width:100%; height:100%; display:block}
.icon .ia{stroke:var(--sand)}      /* sand accent stroke */
.icon .ifill{fill:var(--sand)}     /* sand accent fill, navy outline retained */

/* Small tile — sits at the top of a card */
.icon-tile{
  width:60px; height:60px; padding:12px; margin-bottom:20px;
  border-radius:var(--r-card-sm); background:var(--navy-05);
  color:var(--navy); display:flex; align-items:center; justify-content:center;
}
.band-navy .icon-tile,
.card--navy .icon-tile,
.on-navy .icon-tile{background:rgba(231,201,165,.14); color:var(--on-navy)}

/* Large panel — stands in for a photo alongside a block of copy */
.icon-panel{
  border:1px solid var(--navy-10); border-radius:var(--r-media);
  background:var(--navy-02); padding:44px 36px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px; min-height:260px; text-align:center;
}
.icon-panel__mark{width:76px; height:76px; color:var(--navy)}
.icon-panel__cap{
  font-size:.92rem; font-weight:300; color:var(--ink-muted); max-width:30ch;
}
.on-navy .icon-panel{background:var(--navy-lift); border-color:rgba(231,201,165,.22)}
.on-navy .icon-panel__mark{color:var(--on-navy)}
.on-navy .icon-panel__cap{color:var(--on-navy-muted)}

/* Grid of small icons — used where a montage would otherwise sit */
.icon-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  border:1px solid var(--navy-10); border-radius:var(--r-media);
  background:var(--navy-02); padding:26px;
}
.icon-grid__cell{
  aspect-ratio:1/1; border-radius:var(--r-card-sm); background:var(--white);
  border:1px solid var(--navy-10); color:var(--navy);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
@media(max-width:520px){ .icon-grid{grid-template-columns:repeat(2,1fr)} }

/* ---------- Image placeholder slots ---------- */
.media{
  border-radius:var(--r-media); overflow:hidden; background:var(--navy-05);
  border:1px dashed var(--navy-20);
  aspect-ratio:4/3; display:flex; align-items:flex-end; padding:20px;
}
.media__caption{font-size:.82rem; color:var(--ink-muted); font-weight:300}
.on-navy .media{background:var(--navy-lift); border-color:rgba(231,201,165,.28)}
.on-navy .media__caption{color:var(--on-navy-muted)}
.media--wide{aspect-ratio:16/7}
.media--square{aspect-ratio:1/1}
.media--tall{aspect-ratio:3/4}

/* A slot with a real photo in it — drop the dashed placeholder treatment
   and let the image fill the frame. */
.media--filled{padding:0; border:0; background:var(--navy-lift)}
.media--filled picture,
.media--filled img{width:100%; height:100%; object-fit:cover; display:block}

/* ---------- Stats strip ---------- */
.stats{background:var(--navy-05); border-bottom:1px solid var(--navy-10)}
.stats__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:32px; padding:42px 0}
.stat b{display:block; font-weight:300; font-size:2rem; line-height:1.1}
.stat span{font-size:.9rem; color:var(--ink-muted); font-weight:300}
@media(max-width:760px){ .stats__grid{grid-template-columns:repeat(2,1fr); gap:26px} }

/* ---------- Sections ---------- */
section{padding:88px 0}
section.tight{padding:64px 0}
.section-head{max-width:62ch; margin-bottom:44px}
.section-head h2{margin-top:0}
.section-head .lede{margin-top:16px}
.section-head--center{margin-left:auto; margin-right:auto; text-align:center}
.section-head--center .lede{margin-left:auto; margin-right:auto}
.band-quiet{background:var(--navy-02); border-top:1px solid var(--navy-10); border-bottom:1px solid var(--navy-10)}
.band-navy{background:var(--navy); color:var(--on-navy)}

/* ---------- Cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--white); border:1px solid var(--navy-10);
  border-radius:var(--r-card); padding:28px;
  transition:box-shadow var(--t-base), transform var(--t-base);
  display:flex; flex-direction:column;
}
.card:hover{box-shadow:var(--shadow-card); transform:translateY(-2px)}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-muted); font-weight:300; font-size:.98rem}
.card__tags{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap}
.card__icon{
  width:46px; height:46px; border-radius:var(--r-card-sm);
  background:var(--navy-05); margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  color:var(--navy);
}
.card__link{
  margin-top:auto; padding-top:18px; font-size:.92rem;
  text-decoration:none; color:var(--navy); border-bottom:0;
}
.card__link:hover{text-decoration:underline}
.card--navy{background:var(--navy-lift); border-color:rgba(231,201,165,.22); color:var(--on-navy)}
.card--navy p{color:var(--on-navy-muted)}
.card--navy .card__icon{background:rgba(231,201,165,.14); color:var(--sand)}
@media(max-width:960px){ .cards--4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:900px){ .cards, .cards--2{grid-template-columns:1fr} }
@media(max-width:560px){ .cards--4{grid-template-columns:1fr} }

/* ---------- Split content rows ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.split--media-first .split__media{order:-1}
.split + .split{margin-top:72px}
.split__body h2{margin-bottom:16px}
@media(max-width:900px){
  .split{grid-template-columns:1fr; gap:32px}
  .split--media-first .split__media{order:0}
  .split + .split{margin-top:48px}
}

/* ---------- Ticked list ---------- */
.ticks{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:11px}
.ticks li{font-size:.96rem; font-weight:300; padding-left:24px; position:relative}
.ticks li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:9px; height:9px; border-radius:var(--r-pill); background:var(--sand);
}
.ticks--2{grid-template-columns:1fr 1fr; gap:11px 28px}
@media(max-width:640px){ .ticks--2{grid-template-columns:1fr} }

/* Three across, for a list running the full width of the page */
.ticks--3{grid-template-columns:repeat(3,1fr); gap:14px 36px; margin-top:0}
@media(max-width:900px){ .ticks--3{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .ticks--3{grid-template-columns:1fr} }

/* ---------- Solution detail blocks ---------- */
.solution{
  border-top:1px solid var(--navy-10); padding-top:44px; margin-top:44px;
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start;
}
.solution:first-of-type{border-top:0; padding-top:0; margin-top:0}
.solution__num{
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-muted); padding-top:6px; min-width:3ch;
}
.solution__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:start}
.solution h3{font-size:1.5rem; font-weight:300; margin-bottom:14px}
.solution p{color:var(--ink-muted); font-weight:300}
.solution__aside{
  background:var(--navy-02); border:1px solid var(--navy-10);
  border-radius:var(--r-card); padding:24px;
}
.solution__aside h4{margin-bottom:12px}
@media(max-width:900px){
  .solution{grid-template-columns:1fr; gap:14px}
  .solution__grid{grid-template-columns:1fr; gap:26px}
}

/* ---------- Industry cards ---------- */
.industry{
  background:var(--white); border:1px solid var(--navy-10);
  border-radius:var(--r-card); overflow:hidden;
  transition:box-shadow var(--t-base), transform var(--t-base);
  display:flex; flex-direction:column;
}
.industry:hover{box-shadow:var(--shadow-card); transform:translateY(-2px)}
.industry .media{border-radius:0; border:0; border-bottom:1px solid var(--navy-10); aspect-ratio:16/9}
.industry__body{padding:26px}
.industry__body h3{margin-bottom:10px}
.industry__body p{color:var(--ink-muted); font-weight:300; font-size:.96rem}

/* ---------- Steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step}
.step{padding-top:22px; border-top:2px solid var(--sand)}
.step b{display:block; font-weight:400; font-size:1.05rem; margin-bottom:8px}
.step p{font-size:.94rem; font-weight:300; color:var(--ink-muted)}
.band-navy .step p{color:var(--on-navy-muted)}
@media(max-width:820px){ .steps{grid-template-columns:repeat(2,1fr); gap:26px} }
@media(max-width:520px){ .steps{grid-template-columns:1fr} }

/* ---------- Network partner logos ----------
   Sits on a white surface: network brand guidelines generally require the
   full-colour logo on white, and it keeps all three visually consistent. */
.partners{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch;
}
.partner{
  background:var(--white); border:1px solid var(--navy-10); border-radius:var(--r-card);
  min-height:120px; padding:26px 32px;
  display:flex; align-items:center; justify-content:center;
}
/* The three marks have very different proportions — EE is a tall tile (0.57:1),
   O2 is square (1.03:1), Vodafone is wide (1.76:1). Sizing them all to one height
   would leave EE looking tiny and Vodafone dominant, so each is set individually
   to give them comparable visual weight. */
.partner__img{width:auto; height:auto; object-fit:contain; display:block}
.partner__img--ee{height:54px}
.partner__img--o2{height:48px}
.partner__img--vodafone{height:48px}   /* stacked lockup — needs height or the wordmark stops being legible */
@media(max-width:720px){
  .partner__img--ee{height:46px}
  .partner__img--o2{height:41px}
  .partner__img--vodafone{height:41px}
}
.partner__slot{
  font-size:.82rem; color:var(--ink-muted); font-weight:300;
  border:1px dashed var(--navy-20); border-radius:var(--r-card-sm);
  padding:16px 26px;
}
.partners__note{
  margin-top:24px; text-align:center; font-size:.88rem;
  font-weight:300; color:var(--ink-muted);
}
@media(max-width:720px){
  .partners{grid-template-columns:1fr; gap:14px}
  .partner{min-height:96px}
}

/* Text-only network chips — kept for use on navy sections where a logo can't go */
.networks{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:26px}
.network-chip{
  border:1px solid rgba(231,201,165,.3); border-radius:var(--r-pill);
  padding:9px 20px; font-size:.9rem; font-weight:300; color:var(--on-navy);
}
.band-quiet .network-chip{border-color:var(--navy-20); color:var(--ink)}

/* ---------- Forms ---------- */
.field{display:grid; gap:7px; margin-bottom:18px}
.field label{font-size:.88rem; color:var(--ink-muted); font-weight:300}
.field .req{color:var(--ink)}
.input, .select, .textarea{
  font-family:inherit; font-size:.98rem; color:var(--ink); width:100%;
  padding:14px 16px; border-radius:var(--r-card-sm);
  border:1px solid var(--navy-20); background:var(--white);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea{resize:vertical; min-height:130px}
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(10,9,65,.08);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:640px){ .field-row{grid-template-columns:1fr} }
.check{display:flex; gap:11px; align-items:flex-start; margin:6px 0 22px}
.check input{margin-top:4px; accent-color:var(--navy); width:17px; height:17px; flex:none}
.check label{font-size:.88rem; font-weight:300; color:var(--ink-muted)}
.form-card{
  background:var(--white); border:1px solid var(--navy-10);
  border-radius:var(--r-card); padding:34px; box-shadow:var(--shadow-card);
}
@media(max-width:560px){ .form-card{padding:24px} }

/* ---------- Contact details list ---------- */
.contact-list{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:22px}
.contact-list dt, .contact-list .label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-muted); margin-bottom:6px;
}
.contact-list a{text-decoration:none; border-bottom:1px solid var(--navy-20)}
.contact-list a:hover{border-color:var(--navy)}
.on-navy .contact-list .label{color:var(--sand)}
.on-navy .contact-list a{border-color:rgba(231,201,165,.4)}
.on-navy .contact-list a:hover{border-color:var(--sand)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--navy-10)}
.faq details{border-bottom:1px solid var(--navy-10)}
.faq summary{
  padding:22px 0; cursor:pointer; font-size:1.05rem; font-weight:400;
  list-style:none; display:flex; justify-content:space-between; gap:20px; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--ink-muted); font-size:1.3rem; line-height:1; flex:none}
.faq details[open] summary::after{content:"−"}
.faq summary:focus-visible{outline:2px solid var(--navy); outline-offset:3px}
.faq p{padding:0 0 24px; color:var(--ink-muted); font-weight:300; max-width:72ch}

/* ---------- Quote / callout ---------- */
.callout{
  background:var(--navy-02); border:1px solid var(--navy-10);
  border-left:3px solid var(--sand); border-radius:var(--r-card);
  padding:28px 30px;
}
.callout p{font-weight:300}
.callout cite{display:block; margin-top:14px; font-size:.88rem; color:var(--ink-muted); font-style:normal}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.85rem; font-weight:300; margin-bottom:18px}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.crumbs li::after{content:"/"; margin-left:8px; opacity:.5}
.crumbs li:last-child::after{content:""}
.crumbs a{text-decoration:none; border-bottom:1px solid transparent}
.crumbs a:hover{border-color:currentColor}
.on-navy .crumbs{color:var(--on-navy-muted)}
.on-navy .crumbs [aria-current]{color:var(--sand)}

/* ---------- Prose blocks on service pages ---------- */
.rich{max-width:68ch}
.rich p + p{margin-top:16px}
.rich p{color:var(--ink-muted); font-weight:300}
.rich h3{margin:34px 0 12px}
.rich strong{color:var(--ink); font-weight:400}

/* Honest "when this isn't for you" note — builds more trust than another benefit */
.caveat{
  border-left:3px solid var(--navy-20); padding:4px 0 4px 20px;
  margin-top:26px; font-size:.95rem; font-weight:300; color:var(--ink-muted);
}

/* ---------- Related services ---------- */
.related{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.related a{
  display:block; text-decoration:none; padding:20px 22px;
  border:1px solid var(--navy-10); border-radius:var(--r-card-sm);
  background:var(--white); transition:box-shadow var(--t-base), transform var(--t-base);
}
.related a:hover{box-shadow:var(--shadow-card); transform:translateY(-2px)}
.related b{display:block; font-weight:400; margin-bottom:5px}
.related span{font-size:.9rem; color:var(--ink-muted); font-weight:300}
@media(max-width:820px){ .related{grid-template-columns:1fr} }

/* ---------- Savings calculator ---------- */
.calc{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start}
@media(max-width:900px){ .calc{grid-template-columns:1fr; gap:32px} }

.calc__controls{
  background:var(--white); border:1px solid var(--navy-10);
  border-radius:var(--r-card); padding:32px;
}
@media(max-width:560px){ .calc__controls{padding:24px} }

.calc__field{margin-bottom:30px}
.calc__field:last-child{margin-bottom:0}
.calc__label{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  margin-bottom:12px;
}
.calc__label span{font-size:.94rem; font-weight:300; color:var(--ink-muted)}
.calc__value{
  font-size:1.5rem; font-weight:300; color:var(--ink); font-variant-numeric:tabular-nums;
}
.calc__range{
  -webkit-appearance:none; appearance:none; width:100%; height:4px;
  border-radius:var(--r-pill); background:var(--navy-10); outline:none; cursor:pointer;
}
.calc__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:24px; height:24px;
  border-radius:var(--r-pill); background:var(--navy); border:3px solid var(--white);
  box-shadow:var(--shadow-card); cursor:pointer;
}
.calc__range::-moz-range-thumb{
  width:24px; height:24px; border-radius:var(--r-pill);
  background:var(--navy); border:3px solid var(--white); cursor:pointer;
}
.calc__range:focus-visible{outline:2px solid var(--navy); outline-offset:4px}
.calc__scale{
  display:flex; justify-content:space-between; margin-top:8px;
  font-size:.78rem; color:var(--ink-muted); font-weight:300;
}

/* Results panel — navy, so the numbers carry weight */
.calc__out{
  background:var(--navy); color:var(--on-navy);
  border-radius:var(--r-card); padding:32px;
}
@media(max-width:560px){ .calc__out{padding:24px} }
.calc__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:14px 0; border-bottom:1px solid rgba(231,201,165,.18);
}
.calc__row:last-of-type{border-bottom:0}
.calc__row dt{font-size:.94rem; font-weight:300; color:var(--on-navy-muted)}
.calc__row dd{
  margin:0; font-size:1.25rem; font-weight:300; font-variant-numeric:tabular-nums;
}
.calc__headline{
  margin-top:22px; padding-top:24px; border-top:1px solid rgba(231,201,165,.35);
}
.calc__headline dt{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--sand); margin-bottom:10px;
}
.calc__headline dd{
  margin:0; font-size:clamp(1.9rem,4vw,2.6rem); font-weight:300; line-height:1.1;
  color:var(--sand); font-variant-numeric:tabular-nums;
}
.calc__note{
  margin-top:18px; font-size:.82rem; font-weight:300; color:var(--on-navy-muted);
  line-height:1.5;
}
.calc__actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}

/* ---------- WhatsApp ---------- */
.wa-fab{
  position:fixed; right:20px; bottom:20px; z-index:40;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--navy); color:var(--on-navy); text-decoration:none;
  border-radius:var(--r-pill); padding:14px 20px;
  box-shadow:var(--shadow-raised);
  font-size:.94rem; font-weight:300;
  transition:filter var(--t-fast), transform var(--t-fast);
}
.wa-fab:hover{filter:brightness(1.15)}
.wa-fab:active{transform:scale(.97)}
.wa-fab:focus-visible{outline:2px solid var(--sand); outline-offset:3px}
.wa-fab svg{width:22px; height:22px; flex:none; fill:var(--sand)}
@media(max-width:560px){
  .wa-fab{right:14px; bottom:14px; padding:14px}
  .wa-fab span{display:none}          /* icon only on small screens */
  .wa-fab svg{width:26px; height:26px}
}
@media print{ .wa-fab{display:none} }

/* ---------- CTA band ---------- */
.cta{background:var(--navy); color:var(--on-navy); text-align:center}
.cta h2{max-width:22ch; margin:0 auto}
.cta .lede{margin:18px auto 0}
.cta .hero__actions{justify-content:center}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy); color:var(--on-navy-muted); padding:0 0 44px; font-weight:300; font-size:.92rem}
.foot__grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:36px;
  padding:56px 0 44px;
}
.foot__grid h4{color:var(--on-navy); font-weight:400; font-size:.95rem; margin:0 0 16px}
.foot__grid ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.foot__grid a{text-decoration:none; transition:color var(--t-fast)}
.foot__grid a:hover{color:var(--sand)}
.foot__social{display:flex; gap:12px; margin-top:18px}
.foot__social a{
  width:36px; height:36px; border-radius:var(--r-pill);
  border:1px solid rgba(231,201,165,.32); display:flex; align-items:center; justify-content:center;
  transition:border-color var(--t-fast), color var(--t-fast);
}
.foot__social a:hover{border-color:var(--sand); color:var(--sand)}
.foot__charity{
  margin-top:34px; padding:20px 24px; border-radius:var(--r-card);
  border:1px solid rgba(231,201,165,.22); font-size:.88rem;
}
.foot__charity a{color:var(--sand)}
.foot__base{
  padding-top:26px; border-top:1px solid rgba(231,201,165,.18);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem;
}
.foot__base ul{display:flex; gap:20px; list-style:none; padding:0; margin:0}
.foot__base a{text-decoration:none}
.foot__base a:hover{color:var(--sand)}
@media(max-width:900px){ .foot__grid{grid-template-columns:1fr 1fr; gap:32px} }
@media(max-width:560px){ .foot__grid{grid-template-columns:1fr} }

/* ---------- Pong (404 page only) ----------
   The canvas draws itself in brand colours; these rules only handle the frame,
   the sizing and the scoreboard beneath it. */
.game{max-width:760px; margin:0 auto}
#pong{
  display:block; width:100%; height:auto; aspect-ratio:720/420;
  background:var(--navy); border-radius:var(--r-card);
  box-shadow:0 10px 30px rgba(10,9,65,.18);
  cursor:pointer; touch-action:none;
}
/* Only hide the pointer once play starts — the paddle becomes the cursor.
   Before that you need to see it to know the canvas is clickable. */
#pong.is-playing{cursor:none}
#pong:focus-visible{outline:3px solid var(--sand); outline-offset:3px}
.game__bar{
  margin-top:16px; display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.game__stats{margin:0; font-size:.9rem; color:var(--ink-muted); font-weight:300}
.game__stats b{color:var(--ink); font-weight:500}
.game__sep{margin:0 10px; color:var(--navy-20)}
.game__msg{margin:0; font-size:.9rem; color:var(--ink-muted); font-weight:300}
@media(max-width:560px){
  .game__bar{flex-direction:column; gap:6px}
}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}