/* ────────────────────────────────────────────────────────────────
   Castle, under light. The same sequence as the homepage — a black
   room, a white page, a navy close — carrying the AI SEO service.
   Every colour is painted explicitly; nothing inherits a host theme.
   ──────────────────────────────────────────────────────────────── */
:root{
  /* This page commits to one look on purpose: it is Castle's brand sequence,
     not a themeable document. Declaring the scheme stops a dark-mode viewer
     (or Chrome's auto-darkening) from inverting a palette that is already
     half dark by design. Every surface below is painted explicitly. */
  color-scheme: light;

  /* the room */
  --night:      #050506;
  --night-2:    #0C0E10;
  --night-ink:  #F4F7FA;
  --night-mute: #97A3AD;

  /* the page */
  --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;
  --gold:       #E2B266;   /* the reception sign */

  --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;

  --hdr: 0;     /* nav ink: 0 = in the room, 1 = on the page */
  --hdrbg: 0;   /* the white plate, held back until the frame is white */
}
@property --hdr{ syntax:'<number>'; inherits:true; initial-value:0 }
@property --hdrbg{ syntax:'<number>'; inherits:true; initial-value:0 }

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;background:var(--ink)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  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)}

h1,h2,h3{font-family:var(--f-display);font-weight:300;text-wrap:balance;margin:0;letter-spacing:-0.015em}
h1{font-size:clamp(2.15rem,4.4vw,3.7rem);line-height:1.06}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.1}
h3{font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.25}
p{margin:0}
a{color:inherit}

.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.02rem,1.5vw,1.2rem);color:var(--muted);max-width:46ch}
.prose{display:grid;gap:1.05em;color:var(--muted);max-width:64ch}
.prose b{font-weight:500;color:var(--ink)}

/* ── buttons ─────────────────────────────────────────────────── */
.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 svg{width:1.5em;height:.72em;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.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)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── header: rides the dark room, then inverts onto the page ──── */
header{position:fixed;top:0;left:0;right:0;z-index:60}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px}
.logo{display:block;height:100%;width:100%}
.mark{
  display:block;text-decoration:none;
  width:clamp(100px,10.5vw,128px);aspect-ratio:69.94/12.45;
  color:var(--night-ink);
  color:color-mix(in oklab, var(--night-ink), var(--ink) calc(var(--hdr) * 100%));
}
nav ul{display:flex;align-items:center;gap:clamp(16px,2vw,30px);list-style:none;margin:0;padding:0}
nav a{
  font-family:var(--f-util);font-size:clamp(.92rem,1.1vw,1.02rem);
  letter-spacing:.015em;text-decoration:none;
  color:var(--night-mute);
  color:color-mix(in oklab, var(--night-mute), var(--muted) calc(var(--hdr) * 100%));
  transition:color .2s ease;
}
nav a:hover,nav a[aria-current]{
  color:var(--night-ink);
  color:color-mix(in oklab, var(--night-ink), var(--ink) calc(var(--hdr) * 100%));
}
.bar .btn{padding:.72em 1.3em;font-size:.74rem}
header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--paper);border-bottom:1px solid var(--line);
  opacity:var(--hdrbg);transition:opacity .45s ease;
}
body{transition:--hdr .45s ease}
body.lit{--hdr:1;--hdrbg:1}
@media (max-width:1060px){ nav{display:none} }
@media (max-width:560px){ .bar .btn{display:none} }

/* ── the room: the hero, lit by one beam ──────────────────────── */
.room{
  position:relative;background:var(--night);color:var(--night-ink);overflow:clip;
  padding:clamp(126px,15vh,168px) 0 clamp(58px,8vw,96px);
}
.room::before{ /* the beam's hotspot, blooming from the top right */
  content:"";position:absolute;left:72%;top:-4%;
  width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;pointer-events:none;
  background:radial-gradient(circle closest-side,
    rgba(150,196,255,.28) 0%, rgba(120,175,235,.15) 26%,
    rgba(80,130,190,.07) 50%, rgba(0,0,0,0) 78%);
}
.room::after{ /* the light spilling onto the floor of the next section */
  content:"";position:absolute;inset:auto 0 0 0;height:34%;pointer-events:none;
  background:linear-gradient(to bottom, rgba(5,5,6,0), rgba(11,32,52,.55));
}
.room-grid{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(34px,5vw,72px);align-items:center;
}
@media (max-width:940px){ .room-grid{grid-template-columns:1fr} }
.room .eyebrow{color:#7E96AC}
.room h1{max-width:17ch;margin-top:16px}
.room .lede{color:#C3CCD4;max-width:44ch;margin-top:20px}
.room-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* the seven things we are, set as a quiet row of marks */
.tags{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.tags li{
  font-family:var(--f-util);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:#A9BACB;border:1px solid rgba(244,247,250,.18);border-radius:99px;
  padding:.5em 1em;transition:border-color .3s ease,color .3s ease;
}
.tags li:hover{border-color:rgba(244,247,250,.42);color:var(--night-ink)}

/* the phone: the only lit thing in the room */
.device{
  position:relative;justify-self:center;width:min(288px,74vw);
  aspect-ratio:720/1280;border-radius:30px;background:#fff;padding:6px;
  box-shadow:0 0 0 1px rgba(255,255,255,.16),
             0 40px 90px -30px rgba(120,175,235,.42),
             0 0 130px -20px rgba(120,175,235,.28);
}
.device video{width:100%;height:100%;display:block;border-radius:24px;object-fit:cover;background:#fff}
@media (max-width:940px){ .device{margin-top:8px} }

.cue{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:clamp(34px,5vw,58px);
  font-family:var(--f-util);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--night-mute);
}
.cue i{display:block;width:1px;height:44px;background:linear-gradient(to bottom,rgba(151,163,173,.9),rgba(151,163,173,0))}
@media (max-width:940px){ .cue{display:none} }

/* the trust marks stay in the room: the Trustpilot lockup ships with a
   white wordmark, so it only reads on the dark ground */
.badges{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,2.6vw,32px)}
.badges img{height:clamp(20px,1.9vw,25px);width:auto;display:block}

/* ── the strip the light lands on: the surfaces we optimise for ─ */
.strip{background:var(--paper);border-bottom:1px solid var(--line-2)}
.strip-in{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(18px,3vw,44px);padding-block:clamp(26px,3.4vw,40px);
}
.strip-label{
  font-family:var(--f-util);font-size:.7rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2);margin:0;
}
.platforms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3.2vw,44px)}
.platforms li{display:flex;align-items:center;gap:11px}
.platforms img{height:clamp(22px,2.2vw,28px);width:auto;display:block}
.platforms span{font-family:var(--f-util);font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){ .platforms span{display:none} }

/* ── sections ─────────────────────────────────────────────────── */
section[id]{scroll-margin-top:104px}
.sec{padding-block:clamp(64px,9vw,124px)}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(32px,5vw,56px);max-width:60ch}
.band{background:var(--paper-2)}

.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} }

/* ── the opening statement ────────────────────────────────────── */
.intro{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){ .intro{grid-template-columns:1fr} }
.intro .prose{font-size:clamp(1rem,1.25vw,1.1rem);max-width:none}

/* ── what is included: the navy deck ──────────────────────────── */
.deck{
  position:relative;color:#EAF1F7;
  background:radial-gradient(120% 90% at 50% 36%, #0C2338 0%, #071726 46%, #030B14 100%);
}
.deck::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 40% at 50% 30%, rgba(120,175,225,.11), rgba(0,0,0,0) 70%);
}
.deck > *{position:relative;z-index:1}
.deck .eyebrow{color:#7D91A4}
.deck h2{color:#EAF1F7}
.deck .lede{color:#96AABB;max-width:62ch}

.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
@media (max-width:940px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .cards{grid-template-columns:1fr} }
.card{
  display:grid;gap:14px;align-content:start;
  padding:clamp(24px,2.2vw,34px) clamp(20px,1.9vw,30px);
  border:1px solid rgba(255,255,255,.08);border-radius:5px;
  background:linear-gradient(168deg, #0E2438 0%, #091A2B 100%);
  box-shadow:0 12px 30px -20px rgba(0,0,0,.8);
  transition:border-color .45s ease, background .45s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
.card:hover{border-color:rgba(226,178,102,.42);transform:translateY(-4px)}
.card-ico{
  display:grid;place-items:center;width:42px;height:42px;
  border-radius:11px;background:rgba(120,175,225,.10);color:var(--gold);
  transition:background .45s ease;
}
.card:hover .card-ico{background:rgba(226,178,102,.14)}
.card-ico svg{width:21px;height:21px;display:block}
.card h3{
  font-family:var(--f-util);font-weight:500;
  font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.3;
  letter-spacing:.13em;text-transform:uppercase;color:#C3D2DF;
  transition:color .45s ease;
}
.card:hover h3{color:#EFE0C6}
.card .rule2{height:1px;background:rgba(255,255,255,.13);margin:-2px 0 0}
.card p{font-size:.94rem;color:#8FA2B3;line-height:1.6}

/* ── why AI SEO: the argument left, the proof right ───────────── */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,76px);align-items:start}
@media (max-width:900px){ .split{grid-template-columns:1fr} }
.split-media{display:grid;gap:clamp(18px,2.4vw,28px);position:sticky;top:112px}
@media (max-width:900px){ .split-media{position:static} }
.split-media img{width:100%;height:auto;display:block;border-radius:4px}

.stat{
  display:grid;gap:12px;padding:clamp(24px,3vw,34px);border-radius:4px;color:#EAF1F7;
  background:radial-gradient(120% 120% at 20% 0%, #0E2C46 0%, #06243C 58%, #041828 100%);
  box-shadow:0 20px 50px -30px rgba(6,36,60,.7);
}
.stat b{
  font-family:var(--f-display);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(2.1rem,3.6vw,2.9rem);line-height:1;color:var(--gold);
}
.stat p{color:#A9BFD1;font-size:.94rem;line-height:1.6}
.stat a{color:#8CB8FF;text-decoration:none;border-bottom:1px solid rgba(140,184,255,.4)}
.stat a:hover{color:#B4D0FF}

/* ── the platforms we optimise for ────────────────────────────── */
.plats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media (max-width:940px){ .plats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .plats{grid-template-columns:1fr} }
.plat{
  display:grid;gap:14px;align-content:start;background:var(--paper);
  border:1px solid var(--line);border-radius:4px;padding:clamp(22px,2.4vw,32px);
  transition:border-color .4s ease, box-shadow .4s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.plat:hover{
  border-color:var(--line-2);transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(6,36,60,.06), 0 22px 44px -22px rgba(6,36,60,.28);
}
.plat img{height:38px;width:38px;object-fit:contain;display:block}
.plat h3{font-size:1.14rem}
.plat p{color:var(--muted);font-size:.94rem;line-height:1.6}
.plats-note{
  margin-top:clamp(26px,3.4vw,40px);text-align:center;
  font-family:var(--f-display);font-size:clamp(1.06rem,1.7vw,1.34rem);
  color:var(--ink);max-width:50ch;margin-inline:auto;line-height:1.4;
}

/* ── industries: the beam again, this time as ground ──────────── */
.beam{position:relative;color:#fff;overflow:clip;
  background:linear-gradient(155deg, #041525 0%, #06243C 44%, #030D18 100%)}
.beam::before{
  content:"";position:absolute;left:50%;top:-40%;width:110vmax;height:110vmax;
  margin-left:-55vmax;pointer-events:none;
  background:radial-gradient(circle closest-side,
    rgba(226,178,102,.16) 0%, rgba(226,178,102,.07) 34%, rgba(0,0,0,0) 72%);
}
.beam > *{position:relative;z-index:1}
.beam .eyebrow{color:rgba(233,241,247,.58)}
.beam h2{color:#fff}
.beam .prose{color:rgba(233,241,247,.80);max-width:70ch}
.inds{list-style:none;margin:clamp(28px,3.6vw,42px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media (max-width:900px){ .inds{grid-template-columns:repeat(3,1fr)} }
@media (max-width:540px){ .inds{grid-template-columns:repeat(2,1fr)} }
.inds li{
  display:grid;place-items:center;text-align:center;
  border:1px solid rgba(255,255,255,.22);border-radius:2px;padding:1.05em .6em;
  font-family:var(--f-util);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(233,241,247,.86);
  transition:border-color .4s ease, background-color .4s ease, color .4s ease;
}
.inds li:hover{border-color:rgba(226,178,102,.6);background-color:rgba(226,178,102,.08);color:#fff}

/* ── results: the quotes, still placeholders on the live page ─── */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.6vw,30px);margin-top:clamp(30px,4vw,46px)}
@media (max-width:820px){ .quotes{grid-template-columns:1fr} }
.quote{
  display:grid;gap:20px;align-content:start;background:var(--paper);
  border:1px solid var(--line);border-radius:4px;padding:clamp(26px,3vw,38px);
}
.quote .qm{font-family:var(--f-display);font-size:2.6rem;line-height:.6;color:var(--gold)}
.quote blockquote{margin:0;font-family:var(--f-display);font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.45;color:var(--ink)}
.byline{display:flex;align-items:center;gap:14px;padding-top:6px;border-top:1px solid var(--line-2)}
.avatar{
  width:44px;height:44px;border-radius:99px;flex:none;display:grid;place-items:center;
  background:var(--paper-2);border:1px solid var(--line);
  font-family:var(--f-util);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}
.byline div{display:grid;gap:1px;font-family:var(--f-util);font-size:.86rem;color:var(--muted)}
.byline b{font-weight:500;color:var(--ink)}

/* ── why now: three numbers, held up ──────────────────────────── */
.figs{list-style:none;margin:0 0 clamp(40px,5vw,64px);padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
@media (max-width:700px){ .figs{grid-template-columns:1fr} }
.fig{
  display:grid;gap:8px;padding:clamp(24px,3vw,36px) clamp(20px,2.4vw,30px);
  border:1px solid rgba(255,255,255,.14);border-radius:4px;
  background:linear-gradient(168deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.012) 100%);
}
.fig b{
  font-family:var(--f-display);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(2.4rem,4.6vw,3.5rem);line-height:1;color:#fff;
}
.fig span{
  font-family:var(--f-util);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(233,241,247,.62);line-height:1.5;
}
.pull{font-family:var(--f-display);font-size:clamp(1.18rem,2.1vw,1.62rem);line-height:1.35;color:#fff;max-width:34ch}

/* ── FAQ: pills that open into answers ────────────────────────── */
.faq{background:#F4F7FB}
.faq-head{text-align:center;max-width:none;margin-inline:auto}
.faq-head h2{max-width:20ch;margin-inline:auto}
.faq-list{display:grid;gap:10px;max-width:860px;margin-inline:auto}
.faq-item{
  background:#E9EEF6;border:1px solid transparent;border-radius:40px;
  transition:background .4s ease, border-radius .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.faq-item.open{
  background:#fff;border-radius:22px;border-color:rgba(226,178,102,.42);
  box-shadow:0 18px 44px -26px rgba(6,36,60,.34);
}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,28px);
  font-family:var(--f-body);font-weight:400;
  font-size:clamp(.98rem,1.25vw,1.1rem);line-height:1.4;
  color:var(--ink);transition:color .35s ease;
}
.faq-item.open .faq-q{color:#B07C22}
.faq-q:hover{color:var(--ink-2)}
.faq-item.open .faq-q:hover{color:#B07C22}
.faq-ico{
  position:relative;flex:none;width:clamp(28px,2.6vw,34px);aspect-ratio:1;
  border-radius:99px;background:#fff;color:var(--ink);
  transition:transform .45s cubic-bezier(.3,.8,.35,1), background .35s ease, color .35s ease;
}
.faq-ico::before,.faq-ico::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px}
.faq-ico::before{width:11px;height:1.6px;transform:translate(-50%,-50%)}
.faq-ico::after {width:1.6px;height:11px;transform:translate(-50%,-50%)}
.faq-item.open .faq-ico{transform:rotate(45deg);background:var(--gold);color:#3A2708}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .48s cubic-bezier(.3,.8,.35,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{
  margin:0;padding:0 clamp(18px,2vw,28px) clamp(18px,2vw,24px);
  color:var(--muted);font-size:clamp(.94rem,1.1vw,1.02rem);max-width:70ch;
}
@media (prefers-reduced-motion: reduce){ .faq-item,.faq-ico,.faq-a{transition:none} }

/* ── close: back to navy ──────────────────────────────────────── */
.close{background:var(--ink);color:#EAF1F7}
.close .eyebrow{color:#7E9AB2}
.close .lede{color:#B4C6D4;max-width:52ch}
.contact{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:820px){ .contact{grid-template-columns:1fr} }
.details{display:grid;gap:18px;margin:0}
.detail{display:grid;gap:4px;padding-bottom:18px;border-bottom:1px solid rgba(234,241,247,.16)}
.detail dt{font-family:var(--f-util);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#7E9AB2}
.detail dd{margin:0;font-size:1.02rem}
.detail a{text-decoration:none;transition:color .25s ease}
.detail a:hover{color:#8CB8FF}

footer{background:var(--ink);color:#B4C6D4;padding-bottom:clamp(40px,6vw,64px)}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(24px,4vw,48px);
  padding-top:clamp(44px,6vw,72px);border-top:1px solid rgba(234,241,247,.16)}
@media (max-width:820px){ .fgrid{grid-template-columns:1fr 1fr} }
footer .mark{color:#EAF1F7;width:clamp(112px,12vw,144px)}
.fabout{font-size:.92rem;line-height:1.65;color:#93AABD;margin-top:20px;max-width:40ch}
.fmeta{display:grid;gap:6px;margin-top:20px;font-size:.92rem}
.fmeta a{text-decoration:none;transition:color .2s ease}
.fmeta a:hover{color:#EAF1F7}
.fcol h4{font-family:var(--f-util);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#7E9AB2;margin:0 0 16px}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fcol a{font-size:.94rem;text-decoration:none;color:#B4C6D4;transition:color .2s ease}
.fcol a:hover{color:#EAF1F7}
.legal{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;
  margin-top:clamp(36px,5vw,60px);padding-top:24px;border-top:1px solid rgba(234,241,247,.16);
  font-family:var(--f-util);font-size:.72rem;letter-spacing:.08em;color:#7E9AB2}

/* ── placeholder inspector ────────────────────────────────────── */
.phbtn{
  position:fixed;right:16px;bottom:16px;z-index:70;
  font-family:var(--f-util);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--paper);color:var(--muted);border:1px solid var(--line);border-radius:2px;
  padding:.8em 1.1em;cursor:pointer;box-shadow:0 2px 14px rgba(6,36,60,.10);
  transition:color .2s ease,border-color .2s ease;
}
.phbtn:hover{color:var(--accent);border-color:var(--accent)}
body.show-ph .phbtn{color:var(--accent);border-color:var(--accent)}
body.show-ph .ph{outline:1px dashed var(--accent);outline-offset:6px;position:relative}
body.show-ph .ph::before{
  content:"placeholder on castle.co.uk";position:absolute;top:-20px;left:0;z-index:2;
  font-family:var(--f-util);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
/* ── full-bleed banner masthead ─────────────────────────────────────
   The ecommerce marketing composition, used where a page wants artwork
   behind the copy instead of the dark room and phone. The scrim is
   weighted left so the words land on darkness and the light break stays
   visible on the right. */
.banner{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(560px, 82svh, 780px);
  display:grid;align-items:end;background:var(--night);
}
.banner-bg{position:absolute;inset:0;z-index:-2}
.banner-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block}
.banner-scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(5,5,6,.92) 0%, rgba(5,5,6,.80) 34%, rgba(5,5,6,.42) 58%, rgba(5,5,6,.04) 84%, rgba(5,5,6,0) 100%),
    linear-gradient(to top, rgba(5,5,6,.76) 0%, rgba(5,5,6,0) 50%);
}
.banner-in{padding-block:calc(var(--barh, 76px) + clamp(56px,6vw,86px)) clamp(76px,9vw,124px);display:grid;gap:clamp(20px,2.5vw,31px)}
.banner-in > div{display:grid;gap:clamp(15px,1.9vw,24px);justify-items:start}
.banner .eyebrow{color:rgba(244,247,250,.66)}
.banner h1{color:#fff;max-width:19ch;margin:0;line-height:1.06;text-shadow:0 1px 24px rgba(5,5,6,.45)}
.banner .lede{color:#CFD7DE;max-width:46ch;margin:0;line-height:1.62;text-shadow:0 1px 18px rgba(5,5,6,.5)}
.banner .tags{margin-top:clamp(8px,1.2vw,14px);gap:11px 12px}
.banner .tags li{border-color:rgba(244,247,250,.30);color:rgba(244,247,250,.84)}
.banner .badges{margin-top:clamp(30px,3.6vw,44px)}
.banner .room-actions{margin-top:clamp(12px,1.6vw,20px)}
@media (max-width:700px){
  /* a phone has no room to spare, but the copy still needs air around it */
  .banner{min-height:clamp(520px,78svh,660px)}
  .banner-in{padding-block:calc(var(--barh, 76px) + 44px) 62px;gap:19px}
  .banner-bg img{object-position:62% 46%}
  .banner-scrim{background:linear-gradient(to top, rgba(5,5,6,.88) 0%, rgba(5,5,6,.44) 52%, rgba(5,5,6,.32) 100%)}
}
/* a text-only version of the "optimised for" strip, for pages whose
   channels have no logo in the asset set */
.strip-text{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:0;padding:0}
.strip-text li{
  font-family:var(--f-util);font-size:.8rem;letter-spacing:.06em;color:var(--night-mute);
}
/* platform cards without an image still need to sit on the same grid */
.plat.noimg{padding-top:clamp(20px,2.4vw,28px)}

/* the closing band: copy on the left, the button on its own column, with
   real air between them */
.close-in{
  display:grid;grid-template-columns:minmax(0,1.2fr) auto;
  gap:clamp(28px,4vw,60px);align-items:center;
}
.close-in > div{display:grid;gap:0}
.close h2{margin-top:14px}
.close .lede{margin-top:18px}
.close-in .btn{justify-self:start;white-space:nowrap}
@media (max-width:820px){
  /* stacked, so the button needs its own space above it rather than
     inheriting the column gap */
  .close-in{grid-template-columns:1fr;gap:clamp(26px,4vw,34px)}
}

/* the sibling band: three plain cards, gold on hover like everything else
   that leads somewhere */
.sibs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media (max-width:900px){ .sibs{grid-template-columns:1fr} }
.sib{
  display:grid;gap:9px;align-content:start;text-decoration:none;
  border:1px solid var(--line);border-radius:4px;background:var(--paper);
  padding:clamp(20px,2.4vw,28px);
  transition:border-color .25s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}
.sib:hover{border-color:#E2B266;transform:translateY(-3px)}
.sib h3{font-size:1.18rem;color:var(--ink)}
.sib p{color:var(--muted);font-size:.96rem;line-height:1.6}
.sib-go{
  font-family:var(--f-util);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:#8A5F16;margin-top:4px;
}
/* an inline cross-link inside the running copy */
.prose a{color:#8A5F16;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(138,95,22,.4)}
.prose a:hover{text-decoration-color:#8A5F16}

.split-media img{
  width:auto;height:auto;
  max-width:100%;max-height:clamp(280px,54svh,520px);
  margin-inline:auto;display:block;
}
.device video{max-width:100%;height:auto}