/*
Theme Name: Smart Digital Creations
Theme URI: https://smartdigitalcreations.com
Author: Smart Digital Creations
Author URI: https://smartdigitalcreations.com
Description: Custom theme for Smart Digital Creations — brand strategy, web development and digital marketing. Built to BRAND.md v1.0, with a light aqua-to-peach hero gradient, a built-in enquiry form on every page, and no plugin dependencies.
Version: 1.2.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sdc
Tags: business, one-column, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ==========================================================================
   Smart Digital Creations
   Colour and type values are canonical from BRAND.md v1.0. The hero gradient
   is sampled from the approved reference design.
   ========================================================================== */

:root {
  /* Brand — BRAND.md v1.0 */
  --navy:        #131A42;
  --navy-deep:   #0C1130;
  --orange:      #EC5E2A;
  --orange-tint: #FFDCCC;
  --white:       #FFFFFF;

  /* Small orange text on light grounds. Brand orange only reaches 2.4:1 on the
     hero gradient, which fails AA; this darker tone reaches 4.9:1. Used for
     eyebrows and inline links, never for fills. */
  --orange-deep: #96300B;

  /* Neutrals — BRAND.md v1.0 */
  --slate:       #424F65;
  --muted:       #8C8391;
  --border:      #E7E2DE;

  /* Hero gradient, sampled from the reference design */
  --aqua:        #86ECE9;
  --aqua-soft:   #A4E7E2;
  --sand:        #DADDD1;
  --peach:       #FFD7C8;
  --cream:       #FFF8F3;

  --hero-gradient: linear-gradient(
    180deg,
    #86ECE9   0%,
    #97E9E4  18%,
    #B0E5DE  38%,
    #D0E0D3  62%,
    #F0DACC  85%,
    #FFD7C8 100%);

  /* A translucent copy of the gradient, laid over the plate as extra colour. */
  --hero-veil: linear-gradient(
    180deg,
    rgba(134,236,233,0.42)   0%,
    rgba(151,233,228,0.42)  18%,
    rgba(176,229,222,0.42)  38%,
    rgba(208,224,211,0.42)  62%,
    rgba(240,218,204,0.42)  85%,
    rgba(255,215,200,0.42) 100%);

  /* Lifts the plate before the gradient multiplies over it, so the photograph
     reads open rather than crushed. Multiply only ever darkens. */
  --hero-lift: linear-gradient(rgba(255,255,255,0.36), rgba(255,255,255,0.36));

  --navy-gradient:
    radial-gradient(760px 430px at 22% 8%, rgba(60,168,190,0.24), transparent 62%),
    linear-gradient(168deg, #45455C 0%, #232A48 42%, #131A42 78%, #0F1536 100%);

  /* Hero rotation: total loop for all four slides. Each slide holds for a
     quarter of this, so 12s means 3s each. Change this one value to retime it. */
  --hero-cycle: 12s;

  --surface: var(--cream);

  /* Type */
  --font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --wrap: 1180px;
  --gutter: 24px;
  --band: 96px;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--slate);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: var(--orange-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; color: var(--navy); font-weight: 700; line-height: 1.15; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed; left: 16px; top: 16px; z-index: 999;
  width: auto; height: auto; clip: auto;
  padding: 12px 20px; background: var(--navy); color: var(--white);
}

/* ---------------------------------------------------------------- type -- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.95rem, 4.6vw, 3.3rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); letter-spacing: -0.015em; }
.h3 { font-size: 1.28rem; letter-spacing: -0.01em; }
.h4 { font-size: 1.05rem; letter-spacing: -0.005em; }

/* The eyebrow–heading pair is the brand's signature move. */
.eyebrow {
  display: block;
  margin: 0 0 14px;
  max-width: 34em;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

/* The banner eyebrow carries real sales copy, not a section label — it needs
   to be read at a glance from across the fold. */
.hero .eyebrow,
.pagehead .eyebrow {
  margin-bottom: 20px;
  /* 27px on desktop, 17px on a phone, interpolating between. */
  font-size: clamp(17px, 2.2vw, 27px);
  letter-spacing: 0.08em;
  line-height: 1.25;
}
/* Hero eyebrow only: at 27px this is a sales line, not a label, so it reads
   better at regular weight. Page-head eyebrows stay bold per BRAND.md. */
.hero .eyebrow { font-weight: 400; }

.eyebrow--reverse { color: var(--orange-tint); }

.lede { font-size: 1.09rem; color: var(--slate); }
.caption { font-size: 0.813rem; color: var(--muted); }

/* -------------------------------------------------------------- layout -- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 820px; }
.band { padding: var(--band) 0; }
.band--tight { padding: 64px 0; }
.band--surface { background: var(--surface); }
.band--peach { background: var(--peach); }
.band--navy { background: var(--navy-gradient); color: rgba(255,255,255,0.78); }
.band--navy h1, .band--navy h2, .band--navy h3, .band--navy h4 { color: var(--white); }

.section-head { max-width: 660px; margin-bottom: 48px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: 16px; }

.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border: 2px solid var(--orange);
  border-radius: 0;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--navy); border-color: var(--navy); color: var(--white); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--white); }
.btn--on-navy { background: var(--white); border-color: var(--white); color: var(--navy); }
.btn--on-navy:hover { background: var(--orange); border-color: var(--orange); color: var(--white); }
.btn--ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.45); }
.btn--ghost-light:hover { background: var(--white); border-color: var(--white); color: var(--navy); }
.btn--wide { width: 100%; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.813rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.textlink::after { content: "\2192"; transition: transform .18s ease; }
.textlink:hover { text-decoration: none; }
.textlink:hover::after { transform: translateX(4px); }
.textlink--light { color: var(--orange-tint); }

/* -------------------------------------------------------------- header -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
}
.site-logo { flex: 0 0 auto; }
.site-logo img { width: 210px; }
.site-nav ul { display: flex; align-items: center; gap: 24px; }
.site-nav li { position: relative; }
.site-nav a {
  white-space: nowrap;
  font-size: 0.813rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}
.site-nav a:hover { color: var(--orange-deep); text-decoration: none; }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .current-menu-ancestor > a { color: var(--orange-deep); }
.site-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: -18px;
  z-index: 70;
  display: none;
  min-width: 200px;
  padding: 6px 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--orange);
  box-shadow: 0 18px 34px rgba(19,26,66,0.12);
}
.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu { display: block; }
.site-nav .sub-menu a { display: block; padding: 11px 18px; }
.site-nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.header-cta { flex: 0 0 auto; }
.header-cta .btn { padding: 13px 22px; font-size: 0.75rem; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 20px; height: 2px;
  margin: 0 auto;
  background: var(--navy);
  content: "";
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after  { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 108px 0 190px;
  background: var(--hero-gradient);
}

/* Hero photography — duotone, composited inside each slide.
   The gradient and the plate are background layers on the SAME element, blended
   with background-blend-mode. That matters: mix-blend-mode reaches outside the
   element for its backdrop, so any ancestor that forms an isolated group (a
   transform, a filter, an opacity, a plugin wrapper) silently switches the
   colour off. background-blend-mode cannot be reached by an ancestor, so the
   gradient always renders.

   Layers are painted bottom-up:
     3. the plate
     2. flat grey, blended "color" — takes the plate's luminosity and grey's
        zero saturation, i.e. desaturates it, so colour uploads work too
     1. the gradient, blended "multiply" — white ground x gradient = the
        gradient itself, so the left stays clean for the headline while the
        subjects take on the aqua and peach. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero__slide {
  position: absolute;
  inset: 0;
  background-image:
    var(--hero-veil),
    var(--hero-gradient),
    var(--hero-lift),
    linear-gradient(#808080, #808080),
    var(--sdc-plate, none);
  background-blend-mode: normal, multiply, normal, color, normal;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center, center, center, center, right center;
  opacity: 0;
  animation: heroFade var(--hero-cycle) infinite;
}
.hero__slide--1 { animation-delay: calc(var(--hero-cycle) * 0);    }
.hero__slide--2 { animation-delay: calc(var(--hero-cycle) * 0.25); }
.hero__slide--3 { animation-delay: calc(var(--hero-cycle) * 0.5);  }
.hero__slide--4 { animation-delay: calc(var(--hero-cycle) * 0.75); }
.hero__slide.is-static { animation: none; opacity: 1; }

/* Each slide holds for a quarter of the loop. The fade is kept short so a 3s
   slide is not half spent transitioning. */
@keyframes heroFade {
  0%   { opacity: 0; transform: scale(1.00); }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.04); }
}

/* The headlines share a single grid cell, so the block is as tall as the
   longest one and the paragraph and buttons below never jump as they cycle. */
.hero__copy { display: grid; }
.hero__line {
  grid-area: 1 / 1;
  opacity: 0;
  animation: heroFade var(--hero-cycle) infinite;
}
.hero__line--1 { animation-delay: calc(var(--hero-cycle) * 0);    }
.hero__line--2 { animation-delay: calc(var(--hero-cycle) * 0.25); }
.hero__line--3 { animation-delay: calc(var(--hero-cycle) * 0.5);  }
.hero__line--4 { animation-delay: calc(var(--hero-cycle) * 0.75); }
/* All caps in the hero. The display scale's -0.02em tracking is tuned for
   lowercase and reads cramped in caps, so it is opened back up here. */
.hero__line .display {
  margin: 0;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Per-slide eyebrow sizing. Each line is sized to hold on ONE line in the
   660px copy column. Widths below are measured from Montserrat 400 glyph
   advances plus the 0.08em tracking, not estimated:

     1  Limited Time Only!                          11.8em  fits at any size
     2  Stop Blending In. Start Standing Out.        24.9em  needs 26.5px or under
     3  Take Your Business to the Next Level.        25.0em  needs 26.4px or under
     4  Look Like the Business You Want to Become.   29.4em  needs 22.5px or under

   Set a step under each limit for rendering slack. Re-measure if the copy or
   the font changes; shorten the copy and these overrides can go. */
.hero__line--2 .eyebrow,
.hero__line--3 .eyebrow { font-size: clamp(15px, 2.05vw, 25px); }
.hero__line--4 .eyebrow { font-size: clamp(15px, 1.72vw, 21px); }

/* Only job now is dissolving the foot of the band into the peach, so the
   banner does not end on a hard cut across the photograph. No white wash on
   the left — that was diluting the aqua, and the plates already fade out
   there on their own. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,215,200,0) 54%, rgba(255,215,200,0.88) 87%, #FFD7C8 100%);
}


/* A second pass of the gradient, held to the left where the copy sits. Adds
   colour rather than washing out with white, so the band reads richer AND the
   navy type gains contrast. */
.hero__scrim::before,
.pagehead__scrim::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-gradient);
  opacity: 0.88;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,0.62) 58%, transparent 80%);
          mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,0.62) 58%, transparent 80%);
}

.hero__inner { position: relative; z-index: 3; max-width: 660px; }
.hero h1 { color: var(--navy); }
.hero__sub {
  margin: 26px 0 0;
  max-width: 470px;
  font-size: 1.06rem;
  color: var(--slate);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

/* ----------------------------------------------------------- page head -- */
.pagehead {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 92px 0 84px;
  background: var(--hero-gradient);
}
.pagehead__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    var(--hero-veil),
    var(--hero-gradient),
    var(--hero-lift),
    linear-gradient(#808080, #808080),
    var(--sdc-plate, none);
  background-blend-mode: normal, multiply, normal, color, normal;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center, center, center, center, right center;
}
.pagehead__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,215,200,0) 60%, rgba(255,215,200,0.9) 90%, #FFD7C8 100%);
}
.pagehead__inner { position: relative; z-index: 3; max-width: 720px; }
.pagehead h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); letter-spacing: -0.02em; }
.pagehead p { margin-top: 20px; max-width: 560px; color: var(--slate); font-size: 1.06rem; }
.breadcrumb { margin-bottom: 30px; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.breadcrumb a { color: var(--slate); }
.breadcrumb a:hover { color: var(--navy); }

/* --------------------------------------------------------------- cards -- */
.cards--overlap { margin-top: -120px; padding-bottom: var(--band); position: relative; z-index: 5; }

/* The three service cards sit on the peach band with no accent rule — the
   gradient above them is already doing the colour work. */
.band--peach .card { border-top: 1px solid var(--border); }

.card {
  display: flex;
  flex-direction: column;
  padding: 38px 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--orange);
  box-shadow: 0 22px 44px rgba(19,26,66,0.09);
}
.card__icon {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  background: var(--orange-tint);
  color: var(--orange-deep);
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 12px; }
.card p { font-size: 0.95rem; }
.card .textlink { margin-top: auto; padding-top: 24px; align-self: flex-start; }

.card--plain { border-top: 1px solid var(--border); box-shadow: none; padding: 34px 30px; }

.card--surface { background: var(--surface); border-color: transparent; box-shadow: none; }

/* --------------------------------------------------------------- media -- */
.figure {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--peach);
  border-top: 3px solid var(--orange);
}
.figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 78% center;
  /* Lifted to match the banner treatment — multiply only ever darkens. */
  filter: grayscale(1) contrast(0.86) brightness(1.24);
  mix-blend-mode: multiply;
}
.figure--aqua { background: var(--aqua-soft); }
.figure--wide img { aspect-ratio: 16 / 9; }
.figure figcaption {
  padding: 16px 20px;
  background: var(--white);
  font-size: 0.813rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------- step -- */
.step { text-align: center; padding: 0 12px; }
.step + .step { border-left: 1px solid var(--border); }
.step__num {
  width: 76px; height: 76px;
  margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange);
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 700;
}
.step h3 { margin-bottom: 10px; }
.step p { font-size: 0.95rem; }

/* --------------------------------------------------------------- offer -- */
.offer {
  position: relative;
  overflow: hidden;
  padding: 92px 0;
  background: var(--navy-gradient);
  text-align: center;
}
.offer__pill {
  display: inline-block;
  padding: 9px 20px;
  background: var(--orange);
  color: var(--white);
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.offer h2 {
  margin: 26px auto 0;
  max-width: 820px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.offer h2 em { font-style: normal; color: var(--orange-tint); }
.offer__note { margin-top: 18px; font-size: 0.875rem; color: rgba(255,255,255,0.66); }

.offer__includes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  max-width: 940px;
  margin: 48px auto 0;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.16);
}
.offer__includes li {
  padding: 26px 18px;
  background: rgba(255,255,255,0.04);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 700;
}
.offer__includes span {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255,255,255,0.66);
}
.offer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 44px; }

/* --------------------------------------------------------------- lists -- */
.ticks li { position: relative; padding: 0 0 14px 34px; color: var(--slate); }
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 16px; height: 9px;
  border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}
.ticks strong { color: var(--navy); }
.ticks--light li { color: rgba(255,255,255,0.8); }
.ticks--light strong { color: var(--white); }

/* Things that sit outside the headline price. Framed as additions, with a
   plus rather than a dash — same information, not read as a list of refusals. */
.addons li { position: relative; padding: 0 0 12px 24px; font-size: 0.95rem; color: var(--slate); }
.addons li::before,
.addons li::after {
  content: "";
  position: absolute;
  background: var(--orange);
}
.addons li::before { left: 0;   top: 11px; width: 11px; height: 2px; }
.addons li::after  { left: 4.5px; top: 6.5px; width: 2px; height: 11px; }
.addons strong { color: var(--navy); }

/* ---------------------------------------------------------------- misc -- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
.split--top { align-items: start; }

.rule { width: 64px; height: 3px; background: var(--orange); border: 0; margin: 0 0 26px; }
.rule--center { margin-left: auto; margin-right: auto; }

.pricecard {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--orange);
  padding: 40px 34px;
}
.pricecard__price { font-family: var(--font-display); font-size: 3.25rem; font-weight: 700; color: var(--navy); line-height: 1; }
.pricecard__price small { font-size: 0.938rem; font-weight: 400; color: var(--muted); }
.pricecard__from {
  display: block;
  margin-bottom: 6px;
  font-size: 0.813rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.pricecard hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }

.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 40px 24px 0;
  position: relative;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400;
  color: var(--orange-deep);
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding: 0 40px 26px 0; font-size: 0.97rem; }

/* ------------------------------------------------------------ CTA form -- */
/* Appears on every page, after the second section. */
.ctaform {
  position: relative;
  overflow: hidden;
  padding: var(--band) 0;
  background: var(--cream);
  border-top: 3px solid var(--orange);
}
.ctaform__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.ctaform h2 { max-width: 460px; }
.ctaform__pitch p { margin-top: 18px; color: var(--slate); }
.ctaform__points { margin-top: 28px; }
.ctaform__points li {
  position: relative;
  padding: 0 0 12px 30px;
  font-size: 0.95rem;
  color: var(--slate);
}
.ctaform__points li::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}
.ctaform__panel { background: var(--white); padding: 40px 38px; border-top: 3px solid var(--navy); }

.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--navy);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
  border-color: var(--orange);
}
.form__hp { position: absolute; left: -9999px; }

.notice { padding: 16px 20px; margin-bottom: 24px; font-size: 0.95rem; border-left: 3px solid; }
.notice--ok   { background: var(--cream);       border-color: var(--orange); color: var(--navy); }
.notice--err  { background: var(--orange-tint); border-color: var(--orange); color: var(--navy); }

/* --------------------------------------------------------------- CTA ---- */
.cta-band { background: var(--surface); border-top: 3px solid var(--orange); }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; }
.cta-band h2 { max-width: 640px; }

/* ------------------------------------------------------------- editor --- */
.entry-content h2 { margin: 44px 0 16px; font-size: 1.6rem; }
.entry-content h3 { margin: 34px 0 12px; font-size: 1.22rem; }
.entry-content ul, .entry-content ol { margin: 0 0 20px; padding-left: 22px; list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { padding-bottom: 8px; }
.entry-content img { margin: 28px 0; }
.entry-content blockquote {
  margin: 28px 0; padding: 4px 0 4px 24px;
  border-left: 3px solid var(--orange);
  color: var(--navy); font-size: 1.1rem;
}
.entry-content table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.entry-content th { background: var(--navy); color: var(--white); text-align: left; padding: 12px 14px; font-size: 0.813rem; text-transform: uppercase; letter-spacing: 0.08em; }
.entry-content td { padding: 12px 14px; border-bottom: 1px solid var(--border); }

/* -------------------------------------------------------------- footer -- */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.66); padding: 76px 0 0; }
.site-footer a { color: rgba(255,255,255,0.66); }
.site-footer a:hover { color: var(--white); text-decoration: none; }
.site-footer h4 { margin-bottom: 18px; color: var(--white); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.site-footer li { padding-bottom: 10px; font-size: 0.938rem; }
.footer-logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.footer-logo .a { color: var(--orange); }
.footer-logo .b { color: var(--white); }
.footer-logo__sub { margin-top: 8px; font-size: 0.688rem; font-weight: 700; letter-spacing: 0.42em; color: rgba(255,255,255,0.55); }
.site-footer__about { margin-top: 22px; font-size: 0.938rem; max-width: 320px; }
.site-footer__bar {
  margin-top: 64px; padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  font-size: 0.813rem; color: rgba(255,255,255,0.5);
}

/* --------------------------------------------------------- responsive -- */
@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .site-nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    display: none;
    padding: 8px var(--gutter) 24px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 30px rgba(19,26,66,0.08);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { border-top: 1px solid var(--border); }
  .site-nav a { display: block; padding: 16px 2px; }
  .site-nav .sub-menu {
    position: static;
    display: block;
    min-width: 0;
    padding: 0 0 8px 16px;
    border: 0;
    box-shadow: none;
  }
  .site-nav .sub-menu a { padding: 12px 2px; font-size: 0.75rem; }
  .site-nav .menu-item-has-children > a::after { display: none; }
  .site-header__inner { position: relative; min-height: 72px; }
}

@media (max-width: 1024px) {
  :root { --band: 76px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .offer__includes { grid-template-columns: repeat(2, 1fr); }
  .split, .split--wide-left, .ctaform__inner { grid-template-columns: 1fr; gap: 40px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .site-logo img { width: 200px; }
}

@media (max-width: 760px) {
  :root { --band: 62px; }
  .figure img { aspect-ratio: 16 / 10; }
  body { font-size: 16px; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .hero { padding: 78px 0 150px; }
  .cards--overlap { margin-top: -100px; padding-bottom: 48px; }
  .step + .step { border-left: 0; border-top: 1px solid var(--border); padding-top: 34px; margin-top: 6px; }
  .offer__includes { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .ctaform__panel { padding: 32px 24px; }
  .btn { width: 100%; }
  .hero__actions .btn, .offer__actions .btn { width: auto; }
  /* Copy sits over the plate at this width — lift the ground under it a little,
     without washing the gradient out. */
  .hero__scrim, .pagehead__scrim {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 46%, rgba(255,255,255,0) 70%),
      linear-gradient(180deg, rgba(255,215,200,0) 60%, rgba(255,215,200,0.88) 90%, #FFD7C8 100%);
  }
  .hero__slide, .pagehead__media { background-position: center, center, center, center, 62% center; }
}

@media (max-width: 480px) {
  .card { padding: 30px 24px; }
}

/* --------------------------------------------------- reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__slide, .hero__line { animation: none; opacity: 0; transform: none; }
  .hero__slide--1, .hero__line--1 { opacity: 1; }
}