/* ──────────────────────────────────────────────────────────────────
   page-legacy.css — chrome only, for pages ported from castle-theme.

   whatsapp, amazon-marketing, crypto-marketing and design-subscription
   bring their own design and their own stylesheet (castle-theme's
   app.css). They still need castle-light's header and footer to lay out,
   though, and those rules live in the page stylesheets rather than in
   shell.css — so with no page CSS at all the bar collapsed and the nav
   disappeared.

   This is page-privacy.css with the document typography removed: the
   tokens, the reset, the fixed header and the footer, and nothing that
   sets a colour on headings or body copy. Those belong to the old design
   here, and page-privacy.css was repainting them dark on a dark hero.

   The heading, paragraph and link rules are stripped too: they set a font,
   a size and an ink colour, and castle-theme's Tailwind build already
   styles this content. Left in, they rendered the WhatsApp hero as a
   dark serif over its own dark artwork.

   Extracted from page-privacy.css — keep in step if the chrome changes.
   ────────────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────────
   Castle Light - the shared chrome.
   Castle navy on white paper, Castle blue as the single accent,
   Fraunces / Hanken / Jost. These pages mock up live castle.co.uk
   pages, so they commit to the light world and paint every colour
   explicitly rather than inheriting a host theme.
   ──────────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;

  --paper:      #FFFFFF;
  --paper-2:    #F2F5F8;
  --ink:        #06243C;   /* Castle navy */
  --ink-2:      #0B3453;
  --muted:      #5C7488;
  --muted-2:    #93A5B4;
  --line:       #DEE6ED;
  --line-2:     #EDF1F5;
  --accent:     #1C70EE;   /* Castle blue */
  --accent-dk:  #0F55C4;
  --night:      #050506;
  --night-ink:  #F4F7FA;
  --night-mute: #97A3AD;

  --f-display: "Fraunces", "Juana", Georgia, serif;
  --f-body:    "Hanken Grotesk", "Avenir", "Segoe UI", system-ui, sans-serif;
  --f-util:    "Jost", "Avenir", system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1180px;
  --measure: 68ch;
  --barh: 72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;background:var(--paper)}
body{
  margin:0;background:var(--paper);
  font-family:var(--f-body);font-weight:300;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
img{max-width:100%;display:block}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.eyebrow{
  font-family:var(--f-util);font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);margin:0;
}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-util);font-size:.84rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:1em 1.9em;border:1px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;background:none;color:var(--ink);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dk);border-color:var(--accent-dk)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{border-color:rgba(244,247,250,.32);color:var(--night-ink)}
.btn-light:hover{border-color:var(--night-ink);background:rgba(244,247,250,.08)}

/* ── header ─────────────────────────────────────────────────── */
header{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px}
.logo{display:block;height:100%;width:100%}
.mark{display:block;text-decoration:none;color:var(--ink);width:clamp(100px,10.5vw,128px);aspect-ratio:69.94/12.45}
nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
nav a{font-family:var(--f-util);font-size:.82rem;letter-spacing:.06em;text-decoration:none;color:var(--muted);transition:color .2s ease}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink)}
nav a[aria-current="page"]::after{content:"";display:block;height:1px;background:var(--accent);margin-top:5px}
.bar .btn{padding:.72em 1.3em;font-size:.74rem}
/* the site shell adds the hamburger below this width */
@media (max-width:900px){ .bar nav{display:none} }

/* ── footer ─────────────────────────────────────────────────── */
footer{background:var(--night);color:var(--night-mute);border-top:1px solid #14181C}
footer .wrap{padding-block:clamp(44px,5vw,68px) 30px}
/* brand block plus four link columns, the last of which is Legal */
.fgrid{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:clamp(22px,2.6vw,38px)}
@media (max-width:1040px){ .fgrid{grid-template-columns:1fr 1fr 1fr} }
footer .mark{color:var(--night-ink)}
footer h4{font-family:var(--f-util);font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--night-ink);margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a{color:var(--night-mute);text-decoration:none;font-size:.92rem;transition:color .2s ease}
footer a:hover{color:var(--night-ink)}
.fnote{font-size:.92rem;display:grid;gap:6px;margin-top:18px}
/* the social row - present on every footer */
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{
  width:38px;height:38px;border:1px solid #1B2027;border-radius:999px;
  display:grid;place-items:center;color:var(--night-mute);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.socials a:hover{color:#fff;border-color:var(--night-mute);background:#12161B}
.socials svg{width:16px;height:16px;display:block;fill:currentColor}
.legal{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;margin-top:clamp(34px,4vw,52px);
  padding-top:22px;border-top:1px solid #16191D;
  font-family:var(--f-util);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#6C7A85;
}
/* the four policies: one canonical group, pushed to the end of the strip on
   wide screens and wrapping underneath on narrow ones */
.legal-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-left:auto}
.legal-links a{color:#6C7A85;text-decoration:none;transition:color .2s ease}
.legal-links a:hover{color:var(--night-ink)}
/* on a phone the strip stacks, and the links get enough vertical padding to
   be a real tap target rather than a 24px sliver */
@media (max-width:760px){
  .legal-links{margin-left:0;gap:0 18px}
  .legal-links a{padding-block:9px}
}
@media (max-width:760px){ .fgrid{grid-template-columns:1fr 1fr} }

/* ── one motion device, shared across the site ──────────────── */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){ .rise{opacity:1;transform:none;transition:none} }