/* ===================================================================
   COURSE / APPRENTICESHIP PAGE
   -------------------------------------------------------------------
   The problem this solves: the old page was a title, a wall of imported
   prose in a narrow box, and then some theme furniture bolted on the
   end. It read as an article that happened to be on the site rather
   than a page of the site.

   The fix is to stop treating the page as one column of text. Every
   part of the content gets its own band, the bands alternate, and the
   career-path colour runs through all of them so a Security+ page
   feels visibly different from an AWS page while using the same code.
   =================================================================== */

/* -------------------------------------------------------------------
   1. PATH COLOUR
   One custom property, set once on the page wrapper, drives the hero
   gradient, the rules, the tags and the accents. Change the path and
   the whole page re-tints.
   ---------------------------------------------------------------- */
.course-page{overflow-x:clip}

/* Default path colour. inc/course-page.php prints a <style> in wp_head that
   overrides these three properties on <body> to whatever the course's career
   path is, so one stylesheet re-tints itself per page with no duplication. */
:root{--pc:#1b3e94; --pc-soft:#eef1f9; --pc-ink:#12224f}

/* -------------------------------------------------------------------
   2. HERO
   Full-bleed and dark, so the page opens with weight instead of a
   headline floating on white. The credential card on the right gives
   the certification a physical presence — it is the thing being sold.
   ---------------------------------------------------------------- */
.c-hero{
  position:relative; isolation:isolate; color:#fff;
  background:
    radial-gradient(1100px 520px at 78% -10%, color-mix(in srgb, var(--pc) 55%, transparent), transparent 65%),
    linear-gradient(150deg, #0b1533 0%, #12224f 52%, color-mix(in srgb, var(--pc) 34%, #12224f) 100%);
  padding-block:clamp(38px,5vw,68px) 0;
}
.c-hero::after{ /* faint circuit grid, so the band is not a flat slab */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.55) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.55) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(760px 420px at 22% 18%, #000, transparent 72%);
}
.c-hero .wrap{max-width:var(--content);margin-inline:auto;padding-inline:var(--gutter)}
.c-hero .crumbs{font-size:13px;color:rgba(255,255,255,.78);margin:0 0 18px}
.c-hero .crumbs a{color:rgba(255,255,255,.92);text-decoration:none}
.c-hero .crumbs a:hover{color:#fff;text-decoration:underline}
.c-hero .c-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:clamp(26px,3.4vw,44px);align-items:center;padding-block:6px}
.c-hero .cred{margin-inline:4px}
.c-hero h1{color:#fff;font-size:var(--t-h1);margin:0 0 14px;letter-spacing:-.02em}
.c-hero .lead{color:rgba(255,255,255,.8);font-size:var(--t-lead);max-width:56ch;margin:0 0 26px}
@media(max-width:900px){
  .c-hero .c-top{grid-template-columns:1fr;gap:30px}
  .c-hero .cred{transform:none;max-width:460px}
  .c-hero .c-acts .btn{width:100%;justify-content:center}
}

.c-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.c-tags span{
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
  background:color-mix(in srgb, var(--pc) 82%, #000); color:#fff;
}
.c-tags span.ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22)}

.c-acts{display:flex;flex-wrap:wrap;gap:12px}
.c-hero .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.c-hero .btn-ghost:hover{background:#fff;color:var(--pc-ink);border-color:#fff}

/* The credential card. Slight rotation and a real shadow so it reads as
   an object on the page rather than another rectangle of text. */
.cred{
  background:linear-gradient(160deg,#fff,#eef1f7); color:var(--ink,#101828);
  border-radius:18px; padding:26px 24px; box-shadow:0 30px 60px -28px rgba(0,0,0,.7);
  transform:rotate(-1.6deg); position:relative;
}
.cred::before{content:"";position:absolute;inset:0;border-radius:18px;border:1px solid rgba(255,255,255,.6);pointer-events:none}
.cred .seal{
  width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
  background:var(--pc);color:#fff;font-weight:800;font-size:19px;letter-spacing:-.02em;margin-bottom:16px;
}
.cred h2{font-size:19px;margin:0 0 4px;letter-spacing:-.01em}
.cred .by{font-size:13px;color:#5c6478;margin:0 0 18px}
.cred dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:14px}
.cred dt{color:#5c6478}
.cred dd{margin:0;font-weight:600;text-align:right}

/* Facts rail — straddles the hero boundary so the dark band and the
   white page below are stitched together rather than stacked. */
.c-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:1px;
  background:rgba(255,255,255,.16);border-radius:16px;overflow:hidden;
  margin-top:clamp(30px,4vw,50px);transform:translateY(clamp(22px,3vw,34px));
  box-shadow:0 24px 50px -30px rgba(0,0,0,.8);
}
.c-facts > div{background:#fff;padding:18px 20px}
.c-facts b{display:block;font-family:var(--font-h,inherit);font-size:20px;color:var(--pc-ink);letter-spacing:-.01em}
.c-facts span{display:block;font-size:12.5px;color:#5c6478;margin-top:3px}

/* -------------------------------------------------------------------
   3. STICKY SUB-NAV
   The single change that does most of the "embedded" work: the page
   announces its own shape and stays navigable while you read it.
   ---------------------------------------------------------------- */
.c-jump{
  position:sticky;top:var(--header-h,64px);z-index:40;
  background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line,#e6e8ee);
  margin-top:clamp(34px,4.4vw,52px);
}
.c-jump .wrap{max-width:var(--content);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:16px}
.c-jump .links{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;
  overflow-x:auto;scrollbar-width:none}
.c-jump .links::-webkit-scrollbar{display:none}
.c-jump .links a{
  flex:0 0 auto;padding:18px 14px;font-size:14px;font-weight:600;color:#475062;
  text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;
}
.c-jump .links a:hover{color:var(--pc-ink)}
.c-jump .links a.on{color:var(--pc-ink);border-bottom-color:var(--pc)}
.c-jump .btn{flex:0 0 auto;padding:11px 22px;font-size:13px;align-self:center}
@media(max-width:900px){.c-jump .btn{display:none}}

/* -------------------------------------------------------------------
   4. BANDS
   Sections alternate white / tinted, and every heading carries a short
   path-coloured rule so the eye can find the structure while scrolling.
   ---------------------------------------------------------------- */
.band{padding-block:clamp(44px,5.5vw,78px)}
.band > .wrap{max-width:var(--content);margin-inline:auto;padding-inline:var(--gutter)}
.band.tint{background:var(--pc-soft)}
.band.shell{background:var(--shell,#f5f6f9)}
.band-head{max-width:none;margin:0 0 clamp(26px,3vw,40px)}
/* A band-head carrying only an eyebrow does not need section-heading spacing
   underneath it — that gap reads as something failed to render. */
.band-head:not(:has(h2)){margin-bottom:var(--s-5)}
.band-head .eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--pc-ink);margin:0 0 12px
}
.band-head .eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--pc)}
.band-head h2{margin:0 0 12px;font-size:var(--t-h2)}
.band-head p{margin:0;font-size:var(--t-lead);color:#475062}

/* Overview: asymmetric, so it does not read as two equal columns of
   text — which is exactly the squashed look we are getting away from. */
/* Two columns ONLY when there is genuinely something to put in the second
   one. The previous version was an unconditional two-column grid, so a band
   with a single child pinned its content to 62% of the page and left the
   rest empty — which is what made imported pages look squashed. */
.c-overview{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,60px);align-items:start}
.c-overview:has(> :nth-child(2)){grid-template-columns:minmax(0,1.5fr) minmax(300px,.9fr)}
@media(max-width:1000px){.c-overview:has(> :nth-child(2)){grid-template-columns:1fr}}

/* Prose bands run the full width of the band. The reading measure is applied
   to the text-level children, NOT to the wrapper — otherwise a columns block
   or a gallery is trapped inside the measure and has to shrink to fit, which
   is precisely the squashing we are trying to get rid of. Wide things break
   out to the full band; sentences keep their measure. */
.prose-col{max-width:none}
/* One measure for everything, in px rather than ch. A ch-based measure is
   font-size relative, so headings ended up 1250px wide while the paragraphs
   under them were 820px — the text looked like it was set at two different
   widths, because it was. */
.prose-col > *{max-width:none}
.prose-col > :first-child{margin-top:0}
.prose-col > :last-child{margin-bottom:0}
.prose-col p{font-size:17px;line-height:1.75;color:#3d4657}
.prose-col > p:first-of-type{font-size:19px;line-height:1.65;color:#101828}

/* Anything the author made wide — a gallery, a table, a columns block, a
   full-width image, an embed — takes the whole band. */
.prose-col > .alignwide,
.prose-col > .alignfull,
.prose-col > figure,
.prose-col > .wp-block-image,
.prose-col > .wp-block-gallery,
.prose-col > .wp-block-columns,
.prose-col > .wp-block-media-text,
.prose-col > .wp-block-table,
.prose-col > .wp-block-embed,
.prose-col > .wp-block-video,
.prose-col > table,
.prose-col > iframe{max-width:none;width:100%}

/* Embeds arrive with hard width/height attributes from the old editor. Give
   them a sane aspect ratio — but not the full 1320px band, because a video
   1256px wide is 707px tall and swallows the screen. */
.prose-col > figure.wp-block-embed,
.prose-col > .wp-block-embed,
.prose-col > .wp-block-video{max-width:900px}
.prose-col iframe,
.prose-col video{width:100%;max-width:100%;aspect-ratio:16/9;height:auto;border:0;
  border-radius:var(--r-md,12px);background:var(--shell,#f5f6f9)}

/* Images keep their own size.
   The previous rule forced width:100% on every img, which blew a 200px logo
   up to the full width of the band — the "logo is far too big" report. An
   image is now never scaled UP; it is only ever prevented from being too
   large, and tall images are capped by height so a portrait photograph does
   not fill the screen. */
.prose-col figure{margin-inline:0;margin-block:var(--s-6)}
.prose-col img{
  max-width:100%;
  width:auto;
  height:auto;
  max-height:min(70vh,600px);
  object-fit:contain;
  border-radius:var(--r-md,12px);
}
/* Consistent alignment: images sit left in the text flow unless the author
   explicitly centred or floated them. Imported pages carry a mix of these
   classes, which is why some looked centred and some did not. */
.prose-col figure,
.prose-col .wp-block-image{display:block;margin-inline-start:0;margin-inline-end:auto;text-align:left}
.prose-col .aligncenter,
.prose-col figure.aligncenter{margin-inline:auto;text-align:center}
.prose-col .aligncenter img{margin-inline:auto}
.prose-col figure.alignleft,
.prose-col .alignleft{float:left;max-width:min(420px,45%);margin:4px var(--s-6) var(--s-5) 0}
.prose-col figure.alignright,
.prose-col .alignright{float:right;max-width:min(420px,45%);margin:4px 0 var(--s-5) var(--s-6)}
/* Only something the author deliberately made wide fills the band. */
.prose-col > figure.alignwide img,
.prose-col > figure.alignfull img,
.prose-col > .wp-block-image.alignwide img,
.prose-col > .wp-block-image.alignfull img{width:100%;object-fit:cover;max-height:min(60vh,520px)}
.prose-col figcaption{font-size:13.5px;color:var(--text-mute,#6b7385);margin-top:10px;text-align:left}
@media(max-width:640px){
  .prose-col figure.alignleft,.prose-col .alignleft,
  .prose-col figure.alignright,.prose-col .alignright{float:none;max-width:100%;margin:var(--s-5) 0}
}

/* Imported tables are usually bare <table> with no classes, so they inherited
   nothing and rendered as unaligned text. On a narrow screen they scroll
   rather than crushing their columns to two words per line. */
.prose-col > .wp-block-table,
.prose-col > figure.wp-block-table,
.prose-col .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.prose-col .table-scroll table{min-width:min(560px,100%)}
/* Belt and braces for any table that reaches the page without a wrapper. */
.prose-col > table{display:block;overflow-x:auto;max-width:100%}
.prose-col table{width:100%;border-collapse:collapse;font-size:15.5px;
  border:1px solid var(--line,#e6e8ee);border-radius:var(--r-md,12px);overflow:hidden}
.prose-col th,
.prose-col td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line,#e6e8ee);vertical-align:top}
.prose-col thead th{background:var(--pc-soft);color:var(--pc-ink);font-weight:700;
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.prose-col tbody tr:last-child td{border-bottom:0}
.prose-col tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--pc-soft) 45%,transparent)}

.band .entry-content.lede{max-width:none;margin-bottom:var(--s-6)}

.why-panel{
  background:#fff;border:1px solid var(--line,#e6e8ee);border-radius:16px;padding:26px 24px;
  box-shadow:0 12px 28px -18px rgba(0,0,0,.45);border-top:4px solid var(--pc);
}
.why-panel h3{margin:0 0 16px;font-size:17px}
.why-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.why-panel li{display:grid;grid-template-columns:22px 1fr;gap:11px;font-size:14.5px;line-height:1.55;color:#3d4657}
.why-panel li::before{
  content:"";width:20px;height:20px;border-radius:50%;margin-top:1px;
  background:var(--pc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* -------------------------------------------------------------------
   5. DID YOU KNOW — pulled out as its own dark band with the number
   doing the talking, rather than a tinted box inside the prose.
   ---------------------------------------------------------------- */
.dyk-band{
  background:linear-gradient(135deg,#101c3d,#12224f 60%,color-mix(in srgb,var(--pc) 28%,#12224f));
  color:#fff;padding-block:clamp(40px,5vw,66px)
}
.dyk-band .wrap{max-width:var(--content);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3.4vw,48px);align-items:center}
.dyk-band .fig{
  font-family:var(--font-h,inherit);font-size:clamp(56px,8vw,104px);font-weight:800;line-height:.9;
  letter-spacing:-.04em;color:color-mix(in srgb,var(--pc) 70%,#fff)
}
.dyk-band .eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin:0 0 10px}
.dyk-band p.claim{font-size:clamp(17px,1.7vw,21px);line-height:1.5;margin:0 0 12px;color:#fff;max-width:62ch}
.dyk-band .src{font-size:13px;color:rgba(255,255,255,.6);margin:0}
.dyk-band .src a{color:rgba(255,255,255,.86)}
@media(max-width:820px){.dyk-band .wrap{grid-template-columns:1fr;gap:14px}}

/* -------------------------------------------------------------------
   6. MODULES — numbered cards, not a bullet list. Each carries the
   exam-domain weighting, which is public information and answers the
   question people actually have: how much of the exam is this?
   ---------------------------------------------------------------- */
.mod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px}
/* An imported syllabus is often a list of bare phrases with no explanation.
   Full-size cards for those are four-fifths whitespace, so tighten up. */
.mod-grid.compact{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px}
.mod-grid.compact .mod-card{padding:18px 18px 20px}
.mod-grid.compact .mod-card h3{margin:0;font-size:16px}
.mod-grid.compact .mod-card .n{margin-bottom:7px;font-size:12px}
.mod-card{
  background:#fff;border:1px solid var(--line,#e6e8ee);border-radius:16px;padding:24px 22px;
  position:relative;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease;
}
.mod-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(0,0,0,.5)}
.mod-card .n{
  font-family:var(--font-h,inherit);font-size:13px;font-weight:800;letter-spacing:.04em;
  color:var(--pc);display:block;margin-bottom:10px
}
.mod-card h3{margin:0 0 10px;font-size:17px;line-height:1.3}
.mod-card p{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:#5a6274}
.mod-card .wgt{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#6b7385}
.mod-card .bar{flex:1;height:5px;border-radius:3px;background:var(--pc-soft);overflow:hidden}
.mod-card .bar i{display:block;height:100%;background:var(--pc);border-radius:3px}

/* -------------------------------------------------------------------
   7. WHO IT'S FOR — two honest cards. Saying who it is NOT for is the
   thing that makes the "is for" column believable.
   ---------------------------------------------------------------- */
.fit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:20px}
.fit{background:#fff;border:1px solid var(--line,#e6e8ee);border-radius:16px;padding:28px 26px}
.fit h3{margin:0 0 6px;font-size:18px;display:flex;align-items:center;gap:10px}
.fit .hint{margin:0 0 18px;font-size:13.5px;color:#6b7385}
.fit ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fit li{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:15px;line-height:1.55;color:#3d4657}
.fit li::before{content:"";width:18px;height:18px;border-radius:50%;margin-top:2px;background-size:11px;background-position:center;background-repeat:no-repeat}
.fit.yes{border-top:4px solid #1a7f4b}
.fit.yes li::before{background-color:#1a7f4b;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E")}
.fit.not{border-top:4px solid #f2a900;background:#fffdf7}
.fit.not li::before{background-color:#f2a900;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8 4v5M8 11.6v.4'/%3E%3C/svg%3E")}

/* -------------------------------------------------------------------
   8. CAREERS & SALARY — a dark band so real market data reads as the
   headline feature it is, with the source visible on the page.
   ---------------------------------------------------------------- */
.pay-band{background:#0d1730;color:#fff;padding-block:clamp(44px,5.5vw,78px)}
.pay-band .wrap{max-width:var(--content);margin-inline:auto;padding-inline:var(--gutter)}
.pay-band .band-head .eyebrow{color:color-mix(in srgb,var(--pc) 60%,#fff)}
.pay-band .band-head h2{color:#fff}
.pay-band .band-head p{color:rgba(255,255,255,.7)}
.pay-rows{display:grid;gap:10px}
.pay-row{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;gap:clamp(14px,2.4vw,34px);
  align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:20px 24px;transition:background .18s ease
}
.pay-row:hover{background:rgba(255,255,255,.09)}
.pay-row .pay-role{font-weight:700;font-size:16.5px;color:#fff}
.pay-row .pay-role small{display:block;font-weight:400;font-size:13px;color:rgba(255,255,255,.55);margin-top:3px}
.pay-row .note{font-size:14px;color:rgba(255,255,255,.68);line-height:1.5}
.pay-row .amt{text-align:right}
.pay-row .amt b{display:block;font-family:var(--font-h,inherit);font-size:clamp(22px,2.6vw,30px);
  font-weight:800;letter-spacing:-.02em;color:color-mix(in srgb,var(--pc) 62%,#fff)}
.pay-row .amt span{display:block;font-size:12px;color:rgba(255,255,255,.5);margin-top:2px}
.pay-row .up{color:#4ade80;font-weight:700}
@media(max-width:840px){.pay-row{grid-template-columns:1fr;gap:10px}.pay-row .amt{text-align:left}}
.pay-src{margin:18px 0 0;font-size:12.5px;color:rgba(255,255,255,.5)}
.pay-src a{color:rgba(255,255,255,.75)}

/* -------------------------------------------------------------------
   9. ROUTE LADDER — where this sits in a career, so the page sells the
   next course as well as this one.
   ---------------------------------------------------------------- */
.route{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:14px;counter-reset:r}
.step{
  position:relative;background:#fff;border:1px solid var(--line,#e6e8ee);border-radius:14px;
  padding:22px 20px;text-decoration:none;color:inherit;display:block
}
.step .lvl{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a91a1}
.step b{display:block;margin:8px 0 6px;font-size:15.5px;letter-spacing:-.01em;color:#101828}
.step span{font-size:13px;color:#6b7385;line-height:1.5}
.step.here{background:var(--pc);border-color:var(--pc);box-shadow:0 18px 36px -22px color-mix(in srgb,var(--pc) 80%,#000)}
.step.here .lvl{color:rgba(255,255,255,.72)}
.step.here b,.step.here span{color:#fff}
.step.here span{color:rgba(255,255,255,.85)}
.route a.step:hover{border-color:var(--pc)}

/* -------------------------------------------------------------------
   10. PRACTICALITIES — price, dates, delivery, funding. Concrete
   answers, given their own space rather than buried in prose.
   ---------------------------------------------------------------- */
.prac{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px}
/* Three tiles as two-and-an-orphan looks like something failed to load. */
.prac:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:800px){.prac:has(> :nth-child(3):last-child){grid-template-columns:1fr;gap:18px}}
.prac .tile{background:#fff;border:1px solid var(--line,#e6e8ee);border-radius:16px;padding:26px 24px}
.prac .tile h3{margin:0 0 14px;font-size:16px;display:flex;align-items:center;gap:10px}
.prac .tile h3 .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--pc-soft);color:var(--pc-ink);font-size:15px}
.prac .tile p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:#5a6274}
.prac .tile .big{font-family:var(--font-h,inherit);font-size:26px;font-weight:800;color:var(--pc-ink);letter-spacing:-.02em}
.prac .tile ul{margin:0;padding-left:18px;font-size:14.5px;line-height:1.7;color:#5a6274}

/* Dark mode: the light surfaces above need their counterparts. */
[data-theme="dark"] .band.tint{background:color-mix(in srgb,var(--pc) 12%,#0f1526)}
[data-theme="dark"] .why-panel,
[data-theme="dark"] .mod-card,
[data-theme="dark"] .fit,
[data-theme="dark"] .prac .tile,
[data-theme="dark"] .step{background:#151c2f;border-color:#26304a}
[data-theme="dark"] .fit.not{background:#1d1a12}
[data-theme="dark"] .c-facts > div{background:#151c2f}
[data-theme="dark"] .c-facts b{color:#fff}
[data-theme="dark"] .c-jump{background:rgba(15,21,38,.88);border-bottom-color:#26304a}
[data-theme="dark"] .c-jump .links a{color:#aab2c4}
[data-theme="dark"] .c-jump .links a.on{color:#fff}
[data-theme="dark"] .mod-card h3,[data-theme="dark"] .fit h3,
[data-theme="dark"] .step b,[data-theme="dark"] .band-head h2{color:#f2f4f8}
[data-theme="dark"] .mod-card p,[data-theme="dark"] .fit li,
[data-theme="dark"] .why-panel li,[data-theme="dark"] .prac .tile p,
[data-theme="dark"] .prose-col p{color:#b6bdcc}
[data-theme="dark"] .prose-col table{border-color:#26304a;color:#c6ccd9}
[data-theme="dark"] .prose-col th,
[data-theme="dark"] .prose-col td{border-bottom-color:#26304a}
[data-theme="dark"] .prose-col thead th{background:color-mix(in srgb,var(--pc) 22%,#151c2f);color:#e8ebf2}
[data-theme="dark"] .prose-col tbody tr:nth-child(even) td{background:rgba(255,255,255,.03)}
[data-theme="dark"] .prose-col figcaption{color:#9aa3b5}
[data-theme="dark"] .prose-col iframe,
[data-theme="dark"] .prose-col video{background:#151c2f}
[data-theme="dark"] .prose-col > p:first-of-type{color:#e8ebf2}
[data-theme="dark"] .cred{background:linear-gradient(160deg,#1b2438,#141b2c);color:#e8ebf2}
[data-theme="dark"] .cred h2{color:#fff}
[data-theme="dark"] .cred .by,[data-theme="dark"] .cred dt{color:#9aa3b5}
[data-theme="dark"] .cred dd{color:#e8ebf2}
/* These three inherited a light-mode grey that sat at about 2:1 on a dark
   card — legible on a big screen in a bright room and nowhere else. */
[data-theme="dark"] .prac .tile ul,
[data-theme="dark"] .prac .tile li{color:#b6bdcc}
[data-theme="dark"] .band-head .eyebrow{color:color-mix(in srgb,var(--pc) 45%,#fff)}
[data-theme="dark"] .band-head p{color:#aab2c4}
[data-theme="dark"] .mod-card .n{color:color-mix(in srgb,var(--pc) 50%,#fff)}
[data-theme="dark"] .c-facts span{color:#9aa3b5}
[data-theme="dark"] .prac .tile h3 .ic{background:color-mix(in srgb,var(--pc) 26%,#151c2f);color:#fff}
[data-theme="dark"] .fit .hint{color:#9aa3b5}


/* -------------------------------------------------------------------
   11. IMPORTED SET-PIECES
   Two shapes recur across the migrated pages and both looked accidental:
   a columns block used as a pricing/package comparison, and a run of H3
   question-and-answer pairs. Give them a deliberate form.
   ---------------------------------------------------------------- */

/* Columns inside imported content read as packages or feature comparisons.
   Bare columns of text on a white band look like a layout that failed; as
   cards they look chosen. */
/* A three-column source should stay three columns in a 960px spine, so the
   minimum track has to come down from the global 340px. */
.prose-col .wp-block-columns{gap:18px;align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.prose-col .wp-block-columns:has(> .wp-block-column:nth-child(2):last-child){
  grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.prose-col .wp-block-columns > .wp-block-column{
  background:var(--card-bg,#fff);
  border:1px solid var(--line,#e6e8ee);
  border-radius:var(--r-md,16px);
  padding:26px 24px;
  display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

/* A column holding one short line — an icon and an address, a phone number —
   is a contact strip, not a feature card. Given card padding at a third of
   the content width it had about 200px to fit "69 Newport Road,
   Middlesbrough, TS1 1LA" into, which is where the squashing came from.
   Strip the chrome and let it breathe instead. */
.prose-col .wp-block-columns:not(:has(.wp-block-column h2,.wp-block-column h3,.wp-block-column h4,.wp-block-column ul,.wp-block-column ol)){
  gap:16px;
  /* Three across, not three stacked. The stacked version was a reaction to
     a postcode wrapping at 200px — but the cure left a contact strip
     occupying most of a screen to say three short things, which is what
     "still very poorly laid out" was describing. At 240px minimum they sit
     three across in the 960px spine, wrap to two, then one, and a postcode
     taking two lines inside a card is fine. */
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  align-items:stretch;
}
.prose-col .wp-block-columns:not(:has(.wp-block-column h2,.wp-block-column h3,.wp-block-column h4,.wp-block-column ul,.wp-block-column ol)) > .wp-block-column{
  /* A surface, not the shell tint: on a shell band the tinted version was
     invisible, so three contact details read as three loose lines floating
     in white space. */
  background:var(--surface,#fff);
  border:1px solid var(--line,#e6e8ee);
  padding:20px 22px;
  border-radius:var(--r-md,16px);
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px;
  text-align:left;
}
.prose-col .wp-block-columns:not(:has(.wp-block-column h2,.wp-block-column h3,.wp-block-column h4,.wp-block-column ul,.wp-block-column ol)) > .wp-block-column:hover{
  transform:none;box-shadow:none;border-color:transparent;
}
.prose-col .wp-block-columns:not(:has(.wp-block-column h2,.wp-block-column h3,.wp-block-column h4,.wp-block-column ul,.wp-block-column ol)) > .wp-block-column p{
  margin:0;font-size:16px;line-height:1.5;font-weight:600;overflow-wrap:anywhere;
}
/* The icon beside it keeps a fixed box so the three line up. */
.prose-col .wp-block-columns:not(:has(.wp-block-column h2,.wp-block-column h3,.wp-block-column h4,.wp-block-column ul,.wp-block-column ol)) > .wp-block-column figure,
.prose-col .wp-block-columns:not(:has(.wp-block-column h2,.wp-block-column h3,.wp-block-column h4,.wp-block-column ul,.wp-block-column ol)) > .wp-block-column .wp-block-image{
  flex:0 0 auto;margin:0;width:38px;
}
.prose-col .wp-block-columns:not(:has(.wp-block-column h2,.wp-block-column h3,.wp-block-column h4,.wp-block-column ul,.wp-block-column ol)) > .wp-block-column img{
  width:38px;height:38px;object-fit:contain;border-radius:0;
}
/* Below the point where three of them stop fitting, stack rather than
   letting a postcode wrap onto three lines. */
@media(max-width:600px){
  .prose-col .wp-block-columns:not(:has(.wp-block-column h2,.wp-block-column h3,.wp-block-column h4,.wp-block-column ul,.wp-block-column ol)){
    grid-template-columns:1fr;
  }
}

[data-theme="dark"] .prose-col .wp-block-columns:not(:has(.wp-block-column h2,.wp-block-column h3,.wp-block-column h4,.wp-block-column ul,.wp-block-column ol)) > .wp-block-column{
  background:#151c2f;border-color:#26304a;
}
.prose-col .wp-block-columns > .wp-block-column:hover{
  transform:translateY(-3px);
  border-color:var(--pc);
  box-shadow:0 18px 36px -22px rgba(0,0,0,.45);
}
.prose-col .wp-block-columns > .wp-block-column > :first-child{margin-top:0}
.prose-col .wp-block-columns > .wp-block-column > :last-child{margin-top:auto;margin-bottom:0}
.prose-col .wp-block-columns > .wp-block-column h3{
  font-size:18px;margin:0 0 10px;padding-bottom:12px;
  border-bottom:2px solid var(--pc-soft);
}
.prose-col .wp-block-columns > .wp-block-column p{font-size:15px;line-height:1.65}
.prose-col .wp-block-columns > .wp-block-column ul{margin:0;padding-left:0;list-style:none}
.prose-col .wp-block-columns > .wp-block-column li{
  position:relative;padding-left:24px;margin-bottom:10px;font-size:14.5px;line-height:1.55;
}
.prose-col .wp-block-columns > .wp-block-column li::before{
  content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--pc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center/9px no-repeat;
}
/* A column carrying an image only — a logo, a badge — should not become a
   card with a hover state. */
.prose-col .wp-block-columns > .wp-block-column:has(> figure:only-child),
.prose-col .wp-block-columns > .wp-block-column:has(> .wp-block-image:only-child){
  background:none;border:0;padding:0;box-shadow:none;
}
.prose-col .wp-block-columns > .wp-block-column:has(> figure:only-child):hover,
.prose-col .wp-block-columns > .wp-block-column:has(> .wp-block-image:only-child):hover{
  transform:none;box-shadow:none;
}

/* --- Q&A / process accordion ------------------------------------- */
.qa{border-top:1px solid var(--line,#e6e8ee);max-width:none}
.qa-item{border-bottom:1px solid var(--line,#e6e8ee)}
.qa .acc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 4px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-head,inherit);font-size:17px;font-weight:700;line-height:1.35;
  text-transform:none;letter-spacing:-.01em;border-bottom:0;
  color:var(--text,#101828);transition:color .18s ease;
}
.qa .acc-head:hover{color:var(--pc-ink)}
.qa .acc-head .num{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--pc-soft);color:var(--pc-ink);font-size:13px;font-weight:800;margin-right:14px;
}
.qa .acc-head .label{flex:1 1 auto;min-width:0}
.qa .acc-head .plus{position:relative;width:15px;height:15px;flex:0 0 auto}
.qa .acc-head .plus::before,
.qa .acc-head .plus::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:2.5px;border-radius:2px;
  background:var(--pc);transform-origin:center;transition:transform .3s var(--ease-out,ease);
}
.qa .acc-head .plus::after{transform:rotate(90deg)}
.qa .acc-head[aria-expanded="true"] .plus::after{transform:rotate(0)}
.qa .acc-head[aria-expanded="true"]{color:var(--pc-ink)}
.qa .acc-panel{height:0;overflow:hidden;transition:height .34s var(--ease-out,ease)}
.qa .acc-panel > div{padding:0 4px 22px 44px}
.qa .acc-panel p{margin:0 0 12px;font-size:16px;line-height:1.7;color:var(--text-soft,#475062)}
.qa .acc-panel p:last-child{margin-bottom:0}
.qa .acc-panel ul,.qa .acc-panel ol{margin:0 0 12px;padding-left:20px;color:var(--text-soft,#475062)}
@media(max-width:560px){
  .qa .acc-head{font-size:16px}
  .qa .acc-panel > div{padding-left:0}
}

[data-theme="dark"] .qa,
[data-theme="dark"] .qa-item{border-color:#26304a}
[data-theme="dark"] .qa .acc-head{color:#f2f4f8}
[data-theme="dark"] .qa .acc-panel p,
[data-theme="dark"] .qa .acc-panel li{color:#b6bdcc}
[data-theme="dark"] .prose-col .wp-block-columns > .wp-block-column{background:#151c2f;border-color:#26304a}


/* -------------------------------------------------------------------
   12. FEATURE GRIDS AND CALLOUTS
   Two more shapes recovered from the imported pages. Both were rendering
   as a vertical stack of loose left-aligned images with text under them,
   which is what "images which are left aligned" was describing.
   ---------------------------------------------------------------- */

/* Icon + heading + copy. The icons are real illustrations from the media
   library, so they are given a consistent box rather than being left at
   whatever size the original upload happened to be. */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:18px}
/* Three items sit better as three than as two-and-an-orphan. */
.feat-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.feat{
  background:var(--card-bg,#fff);
  border:1px solid var(--line,#e6e8ee);
  border-radius:var(--r-md,16px);
  padding:26px 24px;
  display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.feat:hover{transform:translateY(-3px);border-color:var(--pc);
  box-shadow:0 18px 36px -22px rgba(0,0,0,.45)}
.feat-ic{
  width:64px;height:64px;border-radius:14px;margin-bottom:18px;
  background:var(--pc-soft);display:grid;place-items:center;overflow:hidden;flex:0 0 auto;
}
.feat-ic img,.feat-ic figure{margin:0;width:100%;height:100%;object-fit:cover;border-radius:0;max-height:none}
.feat-ic figure img{border-radius:0}
.feat h3{margin:0 0 10px;font-size:17px;line-height:1.3;letter-spacing:-.01em}
.feat-body{color:var(--text-soft,#475062)}
.feat-body > :first-child{margin-top:0}
.feat-body > :last-child{margin-bottom:0}
.feat-body p{margin:0 0 10px;font-size:15px;line-height:1.65}
.feat-body p:last-child{margin-bottom:0}
.feat-body img{display:none} /* a stray second image inside the copy */

/* Long sentences used as headings are statements, not headings. Set them as
   callouts so they read as the claims they are. */
.callout-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:18px}
.callout{
  background:var(--pc-soft);
  border-left:4px solid var(--pc);
  border-radius:0 var(--r-md,16px) var(--r-md,16px) 0;
  padding:24px 26px;
}
.callout .stat{
  margin:0;font-family:var(--font-head,inherit);font-size:17.5px;font-weight:700;
  line-height:1.45;letter-spacing:-.01em;color:var(--pc-ink);
}
.callout .feat-body{margin-top:10px}
.callout .feat-body p{font-size:14.5px;color:var(--text-soft,#475062)}

[data-theme="dark"] .feat{background:#151c2f;border-color:#26304a}
[data-theme="dark"] .feat h3{color:#f2f4f8}
[data-theme="dark"] .feat-body p{color:#b6bdcc}
[data-theme="dark"] .feat-ic{background:color-mix(in srgb,var(--pc) 22%,#151c2f)}
[data-theme="dark"] .callout{background:color-mix(in srgb,var(--pc) 14%,#0f1526)}
[data-theme="dark"] .callout .stat{color:#e8ebf2}
[data-theme="dark"] .callout .feat-body p{color:#b6bdcc}


/* -------------------------------------------------------------------
   13. OVERVIEW
   The first version was a lede and body at nearly the same size in one
   column — correct and completely inert, "like a Word document". The
   opening paragraph now carries real weight against a path-coloured rule,
   and the image is paired with a floating card so there is something to
   look at as well as something to read.
   ---------------------------------------------------------------- */
/* Top-aligned, not centred: an overview with six paragraphs is far taller
   than a 4:3 image, and centring left the picture hovering in the middle of
   the column with space above and below it. */
.ov{display:grid;gap:clamp(28px,3.6vw,52px);align-items:start}
.ov.has-image{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)}
@media(max-width:840px){.ov.has-image{grid-template-columns:1fr}}

.ov-text .eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pc-ink);
}
.ov-text .eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--pc)}

/* The lede. Big enough to be read first, held against a rule in the career
   path's colour so the eye starts in the right place. */
.ov-lede{
  position:relative;margin:0 0 22px;padding-left:22px;
  font-family:var(--font-head);font-size:clamp(19px,2vw,23px);font-weight:600;
  line-height:1.45;letter-spacing:-.012em;color:var(--text);
}
.ov-lede::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:3px;
  background:linear-gradient(180deg,var(--pc),color-mix(in srgb,var(--pc) 25%,transparent));
}

.ov-body > p{margin:0 0 14px;font-size:16.5px;line-height:1.75;color:var(--text-soft)}
.ov-body > p:last-child{margin-bottom:0}
/* The first line of the body picks up a little emphasis so the step down
   from the lede is a gradient rather than a cliff. */
.ov-body > p:first-child{font-size:17.5px;color:var(--text)}

/* --- the image, and the card sitting on it --- */
.ov-media{position:relative;isolation:isolate}
.ov-media figure{margin:0;position:relative}
/* A taller crop sits better beside a column of running text than a
   landscape one, which always looks short next to it. */
.ov-media img{
  display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--r-lg,20px);box-shadow:0 30px 60px -34px rgba(0,0,0,.65);
}
/* A tint in the path colour ties the photograph to the page rather than
   leaving it a rectangle that could have come from anywhere. */
.ov-media figure::after{
  content:"";position:absolute;inset:0;border-radius:var(--r-lg,20px);pointer-events:none;
  background:linear-gradient(155deg,color-mix(in srgb,var(--pc) 26%,transparent),transparent 58%);
  mix-blend-mode:multiply;
}
/* A soft shape behind it, offset — the same trick the homepage hero uses. */
.ov-media::before{
  content:"";position:absolute;z-index:-1;inset:auto -18px -18px auto;
  width:58%;height:46%;border-radius:var(--r-lg,20px);
  background:color-mix(in srgb,var(--pc) 16%,transparent);
}
.ov-badge{
  position:absolute;left:-14px;bottom:-18px;z-index:2;
  display:flex;align-items:center;gap:12px;max-width:280px;
  background:var(--card-bg,#fff);border:1px solid var(--line-soft);
  border-radius:var(--r-md,16px);padding:13px 16px;
  box-shadow:0 20px 40px -22px rgba(0,0,0,.55);
}
.ov-badge .dotbig{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--pc);color:#fff;font-family:var(--font-head);font-size:14px;font-weight:800;
  letter-spacing:-.02em;
}
.ov-badge p{margin:0;font-size:12.5px;line-height:1.45;color:var(--text-mute)}
.ov-badge strong{display:block;font-size:13.5px;color:var(--text);margin-bottom:2px}

@media(max-width:840px){
  .ov-media img{aspect-ratio:16/9}
  .ov-media::before{display:none}
  .ov-badge{left:auto;right:10px;bottom:-14px;max-width:240px}
}

/* With no image the lede simply takes the width; it still has the rule and
   the weight, so the band never reverts to a wall of even text. */
.ov:not(.has-image) .ov-lede{max-width:52ch}
.ov:not(.has-image) .ov-body{max-width:70ch}

[data-theme="dark"] .ov-text .eyebrow{color:color-mix(in srgb,var(--pc) 45%,#fff)}
[data-theme="dark"] .ov-lede{color:#f2f4f8}
[data-theme="dark"] .ov-body > p{color:#b6bdcc}
[data-theme="dark"] .ov-body > p:first-child{color:#e8ebf2}
[data-theme="dark"] .ov-badge{background:#151c2f;border-color:#26304a}
[data-theme="dark"] .ov-badge strong{color:#f2f4f8}
[data-theme="dark"] .ov-badge p{color:#9aa3b5}

/* -------------------------------------------------------------------
   14. THE CONTACT BAND
   ------------------------------------------------------------------
   A contact page has been reported as squashed four times, and each
   previous fix widened a column. The width was never the fault: a form
   was being rendered inside a reading measure sized for prose, so
   full-width inputs sat in a 60-character column with the address
   stacked underneath. A form is not prose and now gets its own layout.

   The form takes the wider column because it is what people came to
   use; the ways to reach a human sit beside it rather than below it,
   where they are visible without scrolling past the form. */

.band-contact .contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,.95fr);
  gap:34px;
  align-items:start;
}

.contact-form{
  background:var(--surface,#fff);
  border:1px solid var(--line,#e3e6ee);
  border-radius:16px;
  padding:28px 30px 30px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 34px -22px rgba(16,24,40,.35);
}

.contact-form .lede{margin-bottom:20px}
.contact-form .lede > p:last-child{margin-bottom:0}

/* The form plugin's own markup. It gets the full width of the card and a
   consistent control height, because a contact form with three different
   input sizes is the thing that reads as "not quite finished". */
.contact-form form{max-width:none;width:100%}
.contact-form form p{margin:0 0 16px}
.contact-form label{
  display:block;font-weight:650;font-size:14px;
  color:var(--text,#111827);margin-bottom:6px;
}
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form input[type=url],
.contact-form input[type=number],
.contact-form select,
.contact-form textarea{
  width:100%;
  box-sizing:border-box;
  font:inherit;
  font-size:15.5px;
  line-height:1.45;
  padding:11px 13px;
  color:var(--text,#111827);
  background:var(--surface,#fff);
  border:1px solid var(--line,#cfd4e0);
  border-radius:10px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.contact-form textarea{min-height:132px;resize:vertical}
.contact-form :is(input,select,textarea):focus-visible{
  outline:none;
  border-color:var(--pc,#1d4ed8);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pc,#1d4ed8) 22%,transparent);
}
.contact-form :is(input,select,textarea)::placeholder{color:#98a1b3}

/* Two short fields side by side. A first and last name on separate rows
   makes a five-field form look like a ten-field form. */
@media(min-width:620px){
  .contact-form form :is(.lk-row,.name-row){display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
}

.contact-form :is(input[type=submit],button[type=submit],.wpcf7-submit){
  width:auto;
  font:inherit;
  font-weight:650;
  font-size:15.5px;
  padding:12px 24px;
  border:0;
  border-radius:999px;
  color:#fff;
  background:var(--pc,#1d4ed8);
  cursor:pointer;
  transition:filter .15s ease,transform .15s ease;
}
.contact-form :is(input[type=submit],button[type=submit],.wpcf7-submit):hover{filter:brightness(1.06)}
.contact-form :is(input[type=submit],button[type=submit],.wpcf7-submit):active{transform:translateY(1px)}

/* --- the rail --------------------------------------------------- */

.contact-rail{display:grid;gap:14px}

.contact-card{
  background:var(--surface,#fff);
  border:1px solid var(--line,#e3e6ee);
  border-left:3px solid var(--pc,#1d4ed8);
  border-radius:14px;
  padding:18px 20px;
}

.contact-label{
  margin:0 0 4px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--pc,#1d4ed8) 78%,#000);
}

.contact-value{margin:0 0 6px;font-size:19px;font-weight:650;line-height:1.3}
.contact-value a{color:inherit;text-decoration:none}
.contact-value a:hover{text-decoration:underline}
.contact-address{font-size:16.5px;font-weight:600}
.contact-note{margin:0;font-size:14px;line-height:1.5;color:var(--muted,#5b6577)}

@media(max-width:900px){
  .band-contact .contact-grid{grid-template-columns:1fr;gap:24px}
  .contact-rail{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .contact-form{padding:22px 20px 24px}
}

[data-theme="dark"] .contact-form,
[data-theme="dark"] .contact-card{background:#151c2f;border-color:#26304a}
[data-theme="dark"] .contact-form :is(input,select,textarea){background:#101728;border-color:#2b3550;color:#e8ebf2}
[data-theme="dark"] .contact-form label{color:#e8ebf2}
[data-theme="dark"] .contact-label{color:color-mix(in srgb,var(--pc,#5b8cff) 55%,#fff)}
[data-theme="dark"] .contact-note{color:#9aa3b5}

/* -------------------------------------------------------------------
   15. LABELLED CARDS, STATEMENTS, STORIES, PARTNERS
   ------------------------------------------------------------------
   Four shapes that were previously rendered as running prose or as an
   accordion, and read as "plain, not in line with the rest of the
   site" because they carried none of the structure the course pages
   have. */

/* --- a run of short labels with short explanations ---------------- */
/* Company values, support services. Eleven of these in an accordion is
   eleven things nobody reads; as a grid they are scannable. */
.label-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(266px,100%),1fr));
  gap:16px;
}

.label-card{
  position:relative;
  background:var(--surface,#fff);
  border:1px solid var(--line,#e6e8ee);
  border-radius:var(--r-md,16px);
  padding:22px 22px 20px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.label-card:hover{
  transform:translateY(-3px);
  border-color:var(--pc);
  box-shadow:0 18px 36px -24px rgba(16,24,40,.4);
}

/* The number is ordering, not decoration: it tells you this is item 4 of
   11 rather than a card that floated in from somewhere. */
.label-n{
  display:inline-block;
  font-size:12px;font-weight:800;letter-spacing:.06em;
  color:var(--pc);
  background:var(--pc-soft,#eef2ff);
  border-radius:999px;
  padding:4px 9px;
  margin-bottom:12px;
}
.label-ic{margin-bottom:12px}
.label-ic img{width:42px;height:42px;object-fit:contain}

.label-card h3{
  font-size:17.5px;line-height:1.3;margin:0 0 8px;
}
.label-body{color:var(--muted,#5b6577)}
.label-body p{font-size:15px;line-height:1.6;margin:0 0 8px}
.label-body p:last-child{margin-bottom:0}

[data-theme="dark"] .label-card{background:#151c2f;border-color:#26304a}
[data-theme="dark"] .label-body{color:#9aa3b5}

/* --- a mission, a promise ---------------------------------------- */
/* One sentence the organisation asks to be judged against. In 17px body
   text it read as filler. */
.band-statement{padding-block:clamp(48px,7vw,84px)}

.statement{
  max-width:min(920px,100%);
  margin-inline:auto;
  text-align:center;
  position:relative;
}

.statement-eyebrow{
  font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pc);margin:0 0 18px;
}

.statement-body{
  margin:0;padding:0;border:0;
  position:relative;
}
.statement-body p{
  margin:0;
  font-family:var(--font-display,inherit);
  font-size:clamp(23px,3.1vw,34px);
  line-height:1.32;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--text,#101828);
  text-wrap:balance;
}

/* No quote glyph.
   Two attempts at one: above the text it collided with the eyebrow, behind
   the text it read as a smudge rather than as punctuation. The rest of the
   site says "this is important" with an accent rule and a tinted panel, so
   this does too — consistency beats a decoration that needed three goes. */
.statement{
  isolation:isolate;
  background:var(--pc-soft,#eef2ff);
  border-radius:var(--r-lg,20px);
  padding:clamp(30px,4.4vw,52px) clamp(24px,4vw,58px);
}
.statement::before{
  content:"";
  display:block;
  width:52px;height:4px;border-radius:999px;
  background:var(--pc);
  margin:0 auto 20px;
}

[data-theme="dark"] .statement-body p{color:#f2f4f8}
[data-theme="dark"] .statement{background:color-mix(in srgb,var(--pc) 16%,#101728)}

/* --- what happens after you press send ---------------------------- */
.contact-next{
  list-style:none;
  margin:34px 0 0;padding:26px 0 0;
  border-top:1px solid var(--line,#e6e8ee);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
  gap:20px;
}
.contact-next li{display:flex;gap:13px;align-items:flex-start;margin:0}
.cn-n{
  flex:0 0 auto;
  width:27px;height:27px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--pc);color:#fff;
  font-size:13px;font-weight:800;
}
.contact-next strong{display:block;font-size:15.5px;margin-bottom:3px}
.contact-next span:not(.cn-n){font-size:14px;line-height:1.55;color:var(--muted,#5b6577)}

[data-theme="dark"] .contact-next{border-top-color:#26304a}
[data-theme="dark"] .contact-next span:not(.cn-n){color:#9aa3b5}

/* --- success stories ---------------------------------------------- */
.story-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:20px;
}

.story-card{display:flex}
.story-link{
  display:flex;flex-direction:column;
  width:100%;
  text-decoration:none;color:inherit;
  background:var(--surface,#fff);
  border:1px solid var(--line,#e6e8ee);
  border-radius:var(--r-lg,20px);
  padding:26px 26px 22px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.story-link:hover{
  transform:translateY(-4px);
  border-color:var(--pc);
  box-shadow:0 26px 50px -30px rgba(16,24,40,.5);
}

.story-tag{
  align-self:flex-start;
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--pc);background:var(--pc-soft,#eef2ff);
  border-radius:999px;padding:5px 11px;margin-bottom:16px;
}

.story-quote{margin:0 0 20px;padding:0;border:0}
.story-quote p{
  margin:0;
  font-size:18px;line-height:1.55;font-weight:600;
  color:var(--text,#101828);
}
/* The quote mark sits in the text flow rather than as a decoration, so a
   card with no photograph still reads as somebody talking. */
.story-quote p::before{content:"\201C"}
.story-quote p::after{content:"\201D"}

.story-who{display:flex;align-items:center;gap:12px;margin-top:auto}
.story-av{
  flex:0 0 auto;
  width:46px;height:46px;border-radius:50%;
  overflow:hidden;
  display:grid;place-items:center;
  background:var(--pc-soft,#eef2ff);
  color:var(--pc);font-weight:800;font-size:15px;
}
.story-av img{width:100%;height:100%;object-fit:cover}
.story-name b{display:block;font-size:15.5px;line-height:1.3}
.story-name span{font-size:13.5px;color:var(--muted,#5b6577)}

.story-course{
  margin:14px 0 0;font-size:13.5px;color:var(--muted,#5b6577);
}
.story-more{
  margin-top:16px;font-size:14px;font-weight:700;color:var(--pc);
}
.story-link:hover .story-more{text-decoration:underline}

[data-theme="dark"] .story-link{background:#151c2f;border-color:#26304a}
[data-theme="dark"] .story-quote p{color:#f2f4f8}
[data-theme="dark"] .story-name span,
[data-theme="dark"] .story-course{color:#9aa3b5}

/* An empty listing that says "nothing here yet" reads as abandoned. */
.story-empty{
  max-width:640px;
  text-align:center;
  margin-inline:auto;
}
.story-empty h2{margin:0 0 14px}
.story-empty p{font-size:16.5px;line-height:1.7;color:var(--muted,#5b6577)}
.story-empty-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.story-empty-admin{
  margin-top:26px;padding:14px 16px;
  border:1px dashed var(--line,#d7dbe6);border-radius:12px;
  font-size:13.5px;text-align:left;
}
[data-theme="dark"] .story-empty p{color:#9aa3b5}
[data-theme="dark"] .story-empty-admin{border-color:#2b3550}

/* --- partners and accreditations ---------------------------------- */
/* Two definitions side by side, because "authorised training partner"
   and "awarding organisation" are routinely confused, and the
   difference is the one that matters to an employer. */
.pa-intro{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
  gap:34px;
}
.pa-intro h2{font-size:clamp(21px,2.3vw,27px);margin:0 0 12px;line-height:1.25}
.pa-intro p{font-size:16.5px;line-height:1.7;color:var(--muted,#5b6577);margin:0}
.pa-admin{
  margin-top:16px !important;padding:13px 15px;
  border:1px dashed var(--line,#d7dbe6);border-radius:12px;
  font-size:13.5px !important;
}
[data-theme="dark"] .pa-intro p{color:#9aa3b5}
[data-theme="dark"] .pa-admin{border-color:#2b3550}

/* -------------------------------------------------------------------
   16. DARK MODE FOR THE NEW SET-PIECES
   ------------------------------------------------------------------
   Every small uppercase label on the site is drawn in the path colour.
   In dark mode that sits well under 3:1 against the surface it is
   printed on. The course pages already carried scoped fixes for two of
   them; these are the rest, plus one general rule so the next
   component to use .eyebrow inherits a correct value rather than
   needing its own. */

[data-theme="dark"] .eyebrow{color:color-mix(in srgb,var(--pc) 45%,#fff)}
[data-theme="dark"] .on-ink .eyebrow{color:var(--brand-amber)}

[data-theme="dark"] .statement-eyebrow,
[data-theme="dark"] .story-more,
[data-theme="dark"] .story-tag,
[data-theme="dark"] .label-n,
[data-theme="dark"] .contact-label,
[data-theme="dark"] .acc-wall .eyebrow{color:color-mix(in srgb,var(--pc) 55%,#fff)}

[data-theme="dark"] .story-tag,
[data-theme="dark"] .label-n{background:color-mix(in srgb,var(--pc) 24%,#101728)}
[data-theme="dark"] .story-av{background:color-mix(in srgb,var(--pc) 24%,#101728);color:color-mix(in srgb,var(--pc) 55%,#fff)}
[data-theme="dark"] .cn-n{background:color-mix(in srgb,var(--pc) 62%,#fff);color:#0b1020}

/* -------------------------------------------------------------------
   17. THE THEME'S OWN ENQUIRY FORM
   ------------------------------------------------------------------
   The plugin form was reported disjointed twice. Styling somebody
   else's generated markup from the outside is a guess; this markup is
   ours, so the layout is not negotiable. */

.lk-form{max-width:none;width:100%}

.lk-field{margin:0 0 18px}
.lk-field label{
  display:block;font-weight:650;font-size:14.5px;
  color:var(--text,#111827);margin-bottom:6px;
}
.lk-field .req{color:var(--brand-red,#c8102e);margin-left:2px}
.lk-field .opt{font-weight:500;font-size:13px;color:var(--muted,#6b7385)}

.lk-form input[type=text],
.lk-form input[type=email],
.lk-form input[type=tel],
.lk-form select,
.lk-form textarea{
  width:100%;box-sizing:border-box;
  font:inherit;font-size:15.5px;line-height:1.45;
  padding:11px 13px;
  color:var(--text,#111827);
  background:var(--surface,#fff);
  border:1px solid var(--line,#cfd4e0);
  border-radius:10px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.lk-form textarea{min-height:130px;resize:vertical}
.lk-form :is(input,select,textarea):focus-visible{
  outline:none;border-color:var(--pc,#1d4ed8);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pc,#1d4ed8) 22%,transparent);
}
.lk-form :is(input,textarea)::placeholder{color:#98a1b3}
/* :invalid alone would mark every required field red before the visitor
   has typed anything, which is a page that greets you by telling you
   you are wrong. :user-invalid waits until they have interacted. */
.lk-form :is(input,textarea):user-invalid{border-color:var(--brand-red,#c8102e)}

@media(min-width:560px){
  .lk-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
}

.lk-actions{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:24px 0 0;
}
.lk-privacy{font-size:13.5px;line-height:1.5;color:var(--muted,#5b6577);max-width:34ch}

/* The honeypot. Off-screen rather than display:none, which bots check. */
.lk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-note{
  display:block;
  border-radius:14px;padding:18px 20px;margin:0 0 4px;
  border:1px solid var(--line,#e3e6ee);
  background:var(--surface,#fff);
}
.form-note strong{display:block;font-size:17px;margin-bottom:5px}
.form-note span{font-size:15px;line-height:1.6;color:var(--muted,#5b6577)}
.form-note-ok{border-left:4px solid var(--brand-green,#0f8a4d)}
.form-note-bad{border-left:4px solid var(--brand-red,#c8102e)}

[data-theme="dark"] .lk-form :is(input,select,textarea){background:#101728;border-color:#2b3550;color:#e8ebf2}
[data-theme="dark"] .lk-field label{color:#e8ebf2}
[data-theme="dark"] .lk-privacy,
[data-theme="dark"] .lk-field .opt{color:#9aa3b5}
[data-theme="dark"] .form-note{background:#151c2f;border-color:#26304a}
[data-theme="dark"] .form-note span{color:#9aa3b5}

/* -------------------------------------------------------------------
   18. NEWS AND STORY CARDS
   ------------------------------------------------------------------
   These posts are event write-ups and news, not learner testimonials.
   The first version rendered them as pull-quote cards with an avatar,
   which is the right card for a testimonial and the wrong one for a
   report of a partner day with six photographs in it. */

.story-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));
  gap:22px;
}

.story-card{display:flex}
.story-link{
  display:flex;flex-direction:column;width:100%;
  text-decoration:none;color:inherit;
  background:var(--surface,#fff);
  border:1px solid var(--line,#e6e8ee);
  border-radius:var(--r-lg,20px);
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.story-link:hover{
  transform:translateY(-4px);
  border-color:var(--pc);
  box-shadow:0 26px 50px -30px rgba(16,24,40,.5);
}

.story-media{
  display:block;aspect-ratio:16/10;overflow:hidden;
  background:var(--shell,#f5f6f9);
}
.story-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s var(--ease-out,ease)}
.story-link:hover .story-media img{transform:scale(1.03)}
.story-media-fallback{
  display:grid;place-items:center;width:100%;height:100%;
  font-family:var(--font-head,inherit);font-size:32px;font-weight:800;
  color:var(--pc);background:var(--pc-soft,#eef2ff);
}

.story-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.story-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.story-meta time{font-size:13px;color:var(--muted,#5b6577)}

.story-tag{
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--pc);background:var(--pc-soft,#eef2ff);
  border-radius:999px;padding:5px 11px;
}

.story-title{font-size:19px;line-height:1.3;margin:0 0 10px}
.story-blurb{font-size:15px;line-height:1.6;color:var(--muted,#5b6577);margin:0 0 16px}
.story-more{margin-top:auto;font-size:14px;font-weight:700;color:var(--pc)}
.story-link:hover .story-more{text-decoration:underline}

.story-grid-compact .story-body{padding:16px 18px 18px}
.story-grid-compact .story-title{font-size:17px;margin-bottom:0}

[data-theme="dark"] .story-link{background:#151c2f;border-color:#26304a}
[data-theme="dark"] .story-blurb,
[data-theme="dark"] .story-meta time{color:#9aa3b5}
[data-theme="dark"] .story-media{background:#101728}

/* --- a single story, as an article ------------------------------- */
.story-hero{
  padding-block:clamp(30px,4vw,52px) 0;
  background:
    radial-gradient(900px 380px at 82% -20%,var(--pc-soft,#eef2ff),transparent 60%),
    var(--paper,#fff);
}
.story-hero .wrap{max-width:var(--content,960px)}
.story-hero .crumbs{font-size:13.5px;color:var(--muted,#5b6577);margin:0 0 18px}
.story-hero .crumbs a{color:inherit;text-decoration:none}
.story-hero .crumbs a:hover{text-decoration:underline}
.story-hero .crumbs span{margin:0 7px;opacity:.6}

.story-hero-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.story-hero-head time{font-size:13.5px;color:var(--muted,#5b6577)}

.story-hero h1{
  font-size:clamp(29px,4.4vw,46px);line-height:1.14;margin:0 0 18px;
  letter-spacing:-.02em;text-wrap:balance;
}
.story-standfirst{
  font-size:clamp(17px,2vw,20px);line-height:1.6;
  color:var(--text-soft,#3d4657);max-width:62ch;margin:0 0 30px;
}

.story-lead-image{margin:0;border-radius:var(--r-lg,20px);overflow:hidden}
.story-lead-image img{width:100%;height:auto;display:block;max-height:min(58vh,520px);object-fit:cover}

/* The article body. Images inside a story post are photographs from an
   event, and they were arriving at whatever width the editor left them,
   some floated, some not. One width, one edge. */
.story-layout{display:block}
.story-content{max-width:var(--content,960px);margin-inline:auto}
.story-content :is(figure,.wp-block-image,.wp-block-embed){
  margin-block:var(--s-6,28px);
}
.story-content :is(figure,.wp-block-image) img{
  width:100%;height:auto;border-radius:var(--r-md,16px);
}
/* A run of screenshots reads as a gallery rather than as a column of
   loose pictures. */
.story-content .wp-block-gallery{gap:14px}
.story-content .wp-block-embed iframe{width:100%;border-radius:var(--r-md,16px)}
.story-aside{display:none}

[data-theme="dark"] .story-hero{background:
  radial-gradient(900px 380px at 82% -20%,color-mix(in srgb,var(--pc) 16%,#0b1020),transparent 60%),
  var(--paper,#0b1020)}
[data-theme="dark"] .story-standfirst{color:#b6bdcc}
[data-theme="dark"] .story-hero .crumbs,
[data-theme="dark"] .story-hero-head time{color:#9aa3b5}
