/* ==========================================================================
   Ahmad Edu Consultant — site.css
   ==========================================================================
   Design language: CITY OF FLOWERS.

   Peshawar's own name for itself, and the source of everything here. The
   palette is the one a student from Saddar sees every day and not the one a
   British prospectus uses: marigold, deep garden green, truck-art crimson and
   tilework peacock, on warm khaddar-coloured paper. The ornament is a phool
   patti border — the scalloped flower chain painted along the side of every
   bus and truck on Islamia Road — drawn originally for this site as a tiny
   repeating SVG.

   THE STRUCTURAL RULE, and the reason the previous version was scrapped:
   sections are FULL-BLEED COLOUR BANDS, not cards. Nothing on this site is
   put in a box unless the box is doing a job a rule cannot do. There is
   exactly one panel on the landing page — the readiness check — because it is
   a form and a form needs an edge. Everything else sits directly on its band,
   separated by colour, by rules, and by photography that bleeds off the page.

   Restraint is what keeps this from becoming kitsch: the petal border appears
   three times, never more, and the four colours are used as GROUNDS rather
   than sprinkled as accents on everything.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* grounds */
  --paper:    #F9F1E2;   /* warm khaddar. The page. */
  --paper-2:  #FDF8EF;   /* the one raised surface */
  --paper-3:  #F2E7D2;   /* a quieter paper, for inset rows */

  /* ink — warm, never a cool grey */
  --ink:    #2A211A;
  --body:   #584C40;
  --muted:  #6F6154;

  /* the four colours. Two values per hue wherever one of them cannot carry
     text, which is the mistake that breaks every warm palette. */
  --green:     #12604A;  /* text on paper 6.2:1, and the primary band */
  --green-d:   #0C4735;
  --green-l:   #1C7D61;
  --green-pale:#E4EFE9;

  --marigold:   #E9A227; /* FILL ONLY on paper — 2.0:1 */
  --marigold-t: #8A5A06; /* the same hue as text on paper — 5.8:1 */
  --marigold-l: #F5C463; /* the same hue as text on green — 4.1:1 */
  --marigold-pale: #FBEFD6;

  --crimson:  #B3323C;   /* text on paper 5.1:1 */
  --crimson-pale: #F9E7E6;

  --peacock:  #186A82;   /* text on paper 5.6:1 */
  --peacock-pale: #E3EFF2;

  --rule:   rgba(42,33,26,.16);
  --rule-2: rgba(42,33,26,.09);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --measure: 66ch;
  --gut: clamp(1.25rem, 5vw, 3rem);
  --sect: clamp(3.5rem, 8vw, 6.5rem);

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --ease:   cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);

  /* The phool patti border. Drawn here rather than loaded, so it costs one
     line of CSS and no request. Marigold arches on green, with a crimson
     seed in each — the simplest reduction of the motif that still reads as
     itself at 14px tall. */
  --petals: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'%3E%3Crect width='48' height='16' fill='%2312604A'/%3E%3Cpath d='M0 16 Q12 -1 24 16 Q36 -1 48 16 Z' fill='%23E9A227'/%3E%3Ccircle cx='12' cy='10.5' r='2' fill='%23B3323C'/%3E%3Ccircle cx='36' cy='10.5' r='2' fill='%23B3323C'/%3E%3C/svg%3E");
}

/* --- 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.375rem, 5.4vw, 4rem); line-height: 1.03; letter-spacing: -.028em; }
h2 { font-size: clamp(1.875rem, 3.6vw, 2.75rem); line-height: 1.12; letter-spacing: -.022em; }
h3 { font-family: var(--sans); font-size: 1.1875rem; font-weight: 600; line-height: 1.35; letter-spacing: -.008em; color: var(--ink); }
h4 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; margin-bottom: .4em; color: var(--ink); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration-color: var(--marigold); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--crimson); }

strong, b { font-weight: 600; color: var(--ink); }
small { font-size: .875rem; }
img, svg { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

:focus-visible { outline: 2.5px solid var(--crimson); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--marigold); color: var(--ink); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--green); color: #fff; padding: .75rem 1.25rem; font-weight: 700; }
.skip:focus { left: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* --- 3. Layout ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sect { padding-block: var(--sect); }
.sect--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.9em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--marigold-t); }

.lead {
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  line-height: 1.6; color: var(--body); max-width: 56ch;
}

.grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }

/* --- 4. The bands -------------------------------------------------------
   The structural device. A section is a colour, edge to edge. */
.band, .band--green { background: var(--green); color: #D6E5DE; }
.band h1, .band h2, .band h3, .band h4 { color: #fff; }
.band .lead, .band p { color: #D6E5DE; }
.band a { color: var(--marigold-l); text-decoration-color: rgba(245,196,99,.55); }
.band a:hover { color: #fff; }
.band .sec-head { border-bottom-color: rgba(255,255,255,.22); }
.band .sec-head .fact { color: var(--marigold-l); }

.band--marigold { background: var(--marigold); color: #46330E; }
.band--marigold h1, .band--marigold h2, .band--marigold h3 { color: var(--ink); }
.band--marigold a { color: var(--ink); text-decoration-color: rgba(42,33,26,.45); }
.band--marigold a:hover { color: var(--crimson); }
.band--marigold .sec-head { border-bottom-color: rgba(42,33,26,.25); }
.band--marigold .sec-head .fact { color: #6A4A0B; }

.band--sand { background: var(--paper-3); }
.band--sand .sec-head { border-bottom-color: var(--rule); }

/* The phool patti strip. Three appearances on the page, never more. */
.petals { height: 16px; background-image: var(--petals); background-repeat: repeat-x; background-size: auto 16px; }
.petals--flip { transform: scaleY(-1); }

/* --- 5. Ruled section head ---------------------------------------------- */
.sec-head {
  display: flex; align-items: baseline; gap: 1.25rem;
  border-bottom: 1.5px solid var(--rule);
  padding-bottom: .875rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.sec-head h2, .sec-head h3 { margin: 0; }
.sec-head .fact { margin-left: auto; flex-shrink: 0; font-size: .8125rem; font-weight: 700; color: var(--marigold-t); }
@media (max-width: 560px) {
  .sec-head { flex-wrap: wrap; gap: .35rem 1rem; }
  .sec-head .fact { margin-left: 0; width: 100%; }
}

/* --- 6. Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: 1;
  padding: 1.0625rem 1.875rem;
  border: 2px solid transparent; border-radius: var(--r-pill);
  cursor: pointer; text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), box-shadow .25s var(--ease),
              transform .3s var(--spring);
}
.btn:active { transform: translateY(1px); }

/* The primary is marigold on ink type: on a green or paper ground it is the
   single brightest thing in view, which is what a primary is for. */
.btn--primary { background: var(--marigold); color: var(--ink); box-shadow: 0 3px 0 #B87C12; }
.btn--primary:hover { background: #F5B23C; color: var(--ink); transform: translateY(-2px); box-shadow: 0 5px 0 #B87C12; }
.btn--primary:active { box-shadow: 0 1px 0 #B87C12; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.band .btn--ghost:hover { background: #fff; color: var(--green); }

.btn--wa { background: transparent; color: var(--green); border-color: var(--green); }
.btn--wa:hover { background: var(--green); color: #fff; transform: translateY(-2px); }
.band .btn--wa { color: #fff; border-color: rgba(255,255,255,.55); }
.band .btn--wa:hover { background: #fff; color: var(--green); }
.band--marigold .btn--wa { color: var(--ink); border-color: var(--ink); }
.band--marigold .btn--wa:hover { background: var(--ink); color: var(--marigold); }

.btn--brass { background: var(--crimson); color: #fff; box-shadow: 0 3px 0 #85232B; }
.btn--brass:hover { background: #C43F49; color: #fff; transform: translateY(-2px); }

.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; }

@media (max-width: 560px) {
  .btn { padding: 1rem 1.375rem; min-height: 50px; font-size: 1.0625rem; }
  .btn-row { flex-direction: column; align-items: stretch; gap: .75rem; }
  .btn-row .btn { width: 100%; }
  .form .btn[type="submit"] { width: 100%; }
  .mcta { gap: .5rem; }
  .mcta .btn { min-height: 46px; padding: .75rem .875rem; font-size: 1rem; }
}

.lnk {
  font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--marigold);
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
  padding-bottom: 1px;
}
.lnk:hover { color: var(--crimson); border-bottom-color: var(--crimson); }
.band .lnk { color: #fff; border-bottom-color: var(--marigold-l); }
.band .lnk:hover { color: var(--marigold-l); }

/* --- 7. Header ---------------------------------------------------------- */
.site-head { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--rule-2); }
.site-head__in { display: flex; align-items: center; gap: 1.5rem; height: 74px; }

.brand { display: flex; align-items: center; gap: .6875rem; text-decoration: none; flex-shrink: 0; }
.brand__mark {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  background: var(--green); color: var(--marigold-l);
  border: 2px solid var(--marigold);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: .8125rem; font-weight: 700; letter-spacing: -.02em;
  transition: transform .35s var(--spring);
}
.brand:hover .brand__mark { transform: rotate(-8deg); }
.brand__name { font-family: var(--serif); font-size: 1.3125rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1; }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 1.625rem; list-style: none; margin: 0; padding: 0; }
.nav a:not(.btn) {
  font-size: .9375rem; font-weight: 600; color: var(--body); text-decoration: none;
  position: relative; padding-block: .5rem; transition: color .2s var(--ease);
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px;
  background: var(--marigold); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: var(--ink); }
.nav a:not(.btn):hover::after, .nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }

.head-cta { flex-shrink: 0; padding: .75rem 1.25rem; font-size: .9375rem; }
@media (min-width: 1041px) { .nav .nav-cta { display: none; } }

.burger { display: none; margin-left: auto; width: 46px; height: 46px; padding: 0; background: transparent; border: 2px solid var(--ink); border-radius: var(--r-md); cursor: pointer; }
.burger span { display: block; width: 18px; height: 2px; margin: 3.5px auto; background: var(--ink); transition: transform .3s var(--ease), opacity .2s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1040px) {
  .burger { display: block; }
  .head-cta { display: none; }
  .nav {
    position: fixed; inset: 74px 0 auto; margin: 0;
    background: var(--paper); border-bottom: 3px solid var(--marigold);
    max-height: 0; overflow: hidden; transition: max-height .38s var(--ease);
  }
  .nav[data-open="true"] { max-height: 78vh; overflow-y: auto; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gut) 1.5rem; }
  .nav li { border-bottom: 1px solid var(--rule-2); }
  .nav a:not(.btn) { display: block; padding: 1rem 0; font-size: 1.125rem; }
  .nav a::after { display: none; }
  .nav li.nav-cta { border-bottom: 0; }
  .nav .btn { display: flex; width: 100%; margin-top: 1.25rem; padding: 1rem 1.25rem; min-height: 50px; justify-content: center; }
}

/* --- 8. Hero ------------------------------------------------------------
   No box. The headline sits on the paper and the photograph bleeds off the
   right edge of the screen, so the page opens on a person rather than on a
   grid of tiles. */
.hero { position: relative; overflow: hidden; }
.hero__in { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 900px) {
  .hero__in { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(2rem, 4vw, 4rem); }
}
.hero h1 { margin: 0; font-variation-settings: "SOFT" 90, "WONK" 1; }
/* One clause per line. Left to balance itself the headline broke mid-sentence
   ("Choose the right / country. Build / the right file."), which reads as an
   accident rather than as a couplet. */
.hero h1 span { display: block; }
.hero__lead { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.65; color: var(--body); max-width: 42ch; margin: 1.5rem 0 2rem; }
.hero__note { font-size: .875rem; color: var(--muted); margin-top: 1.25rem; max-width: 46ch; }

/* the photograph, bled to the edge of the viewport and given a marigold
   shoulder so it belongs to the page rather than floating on it */
.hero__media { position: relative; }
.hero__media img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: center 30%;
  border-radius: var(--r-lg);
}
@media (min-width: 900px) {
  .hero__media { margin-right: calc(50% - 50vw); isolation: isolate; }
  .hero__media img { position: relative; z-index: 1; aspect-ratio: 4 / 3.4; border-radius: var(--r-lg) 0 0 var(--r-lg); }
  /* a marigold shoulder behind the photograph, offset down and left, so the
     image is set into the page rather than pasted onto it */
  .hero__media::before {
    content: ""; position: absolute; z-index: 0;
    inset: 22px auto -22px -22px; width: 58%;
    background: var(--marigold); border-radius: var(--r-lg) 0 0 var(--r-lg);
  }
}

/* the credential row, as rules rather than chips */
.trustline { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1.5px solid var(--rule); }
.trustline div { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--body); }
.trustline svg { width: 18px; height: 18px; flex: 0 0 18px; stroke: var(--green); stroke-width: 2.6; fill: none; }
.trustline b { color: var(--ink); font-weight: 700; }

/* --- 9. Destination rows ------------------------------------------------
   The old version made these five cards in a grid. They are five entries in
   an index, so they are five full-width rows: the name large enough to be
   scanned from across the room, the figures inline, and the whole row taking
   a colour wash on hover. */
.routes { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--rule); }
.route {
  display: grid; align-items: center; gap: .5rem 2rem;
  grid-template-columns: 1fr;
  padding: clamp(1.25rem, 2.4vw, 1.75rem) 0;
  border-bottom: 1.5px solid var(--rule);
  text-decoration: none; position: relative;
  transition: background-color .3s var(--ease), padding-left .3s var(--ease);
}
@media (min-width: 820px) { .route { grid-template-columns: 17rem 1fr auto; } }
.route::before {
  content: ""; position: absolute; left: calc(var(--gut) * -1); right: calc(var(--gut) * -1); top: 0; bottom: 0;
  background: var(--marigold-pale); opacity: 0; transition: opacity .3s var(--ease); z-index: -1;
}
.route:hover::before { opacity: 1; }
.route:hover { padding-left: .75rem; }
.route__n { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; color: var(--ink); letter-spacing: -.022em; line-height: 1.1; }
.route:hover .route__n { color: var(--green); }
.route__m { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; font-size: .8125rem; color: var(--muted); }
.route__m b { color: var(--body); font-weight: 700; }
.route__go { font-size: .875rem; font-weight: 700; color: var(--marigold-t); white-space: nowrap; transition: transform .3s var(--ease); }
.route:hover .route__go { transform: translateX(5px); }
/* the one a returning visitor reads most gets the marigold edge */
.route.is-lead { background: var(--marigold-pale); }
.route.is-lead::after { content: ""; position: absolute; left: calc(var(--gut) * -1); top: 0; bottom: 0; width: 5px; background: var(--marigold); }

/* --- 10. Big figures ----------------------------------------------------
   Three statistics on the green band, separated by rules. No cards. */
.figs { display: grid; gap: 0; }
@media (min-width: 780px) { .figs { grid-template-columns: repeat(3, 1fr); } }
.fig-i { padding: clamp(1.5rem, 3vw, 2rem) 0; border-top: 1px solid rgba(255,255,255,.2); }
@media (min-width: 780px) {
  .fig-i { padding: 0 clamp(1.25rem, 2.5vw, 2rem); border-top: 0; border-left: 1px solid rgba(255,255,255,.2); }
  .fig-i:first-child { padding-left: 0; border-left: 0; }
  .fig-i:last-child { padding-right: 0; }
}
.fig-n { display: block; font-family: var(--serif); font-size: clamp(2.75rem, 5.4vw, 4rem); font-weight: 700; color: var(--marigold-l); line-height: .95; letter-spacing: -.03em; margin-bottom: .5rem; }
.fig-l { font-size: .9375rem; line-height: 1.55; color: #D6E5DE; margin: 0 0 .5rem; max-width: 32ch; }
.fig-s { font-size: .75rem; color: rgba(214,229,222,.7); margin: 0; }

/* --- 11. Editorial process ---------------------------------------------
   A numbered sequence is a list, not six boxes. Marigold numerals in the
   margin, text flowing beside them. */
.plan { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 0; }
@media (min-width: 900px) { .plan { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); } }
.plan li {
  counter-increment: s;
  display: grid; grid-template-columns: 3.25rem 1fr; gap: 0 1.25rem;
  padding: clamp(1.375rem, 2.6vw, 1.75rem) 0;
  border-top: 1.5px solid var(--rule);
}
.plan li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--serif); font-size: 1.625rem; font-weight: 700;
  color: var(--marigold-t); line-height: 1.1; grid-row: span 2;
}
.plan h3 { margin: 0 0 .3rem; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; }
.plan p { font-size: .9375rem; line-height: 1.65; margin: 0; color: var(--body); }

/* --- 12. The one panel --------------------------------------------------
   The readiness check is a form, and a form needs an edge. It is the only
   bordered object on the landing page, which is exactly why it reads as the
   thing to use. */
.panel {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 10px 10px 0 var(--marigold);
  overflow: hidden;
  max-width: 940px; margin-inline: auto;
}
.panel__head { display: flex; align-items: flex-start; gap: 1.25rem; padding: clamp(1.375rem, 2.8vw, 2rem) clamp(1.375rem, 2.8vw, 2rem) 1.25rem; border-bottom: 1.5px solid var(--rule-2); }
.panel__head h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); margin: 0 0 .35rem; }
.panel__head p { font-size: .9375rem; color: var(--muted); margin: 0; line-height: 1.55; max-width: 44ch; }

.seal {
  flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%;
  border: 2px solid var(--crimson); color: var(--crimson); background: var(--crimson-pale);
  display: grid; place-items: center; text-align: center;
  font-family: var(--serif); font-size: .5rem; font-weight: 700; line-height: 1.15; letter-spacing: .04em;
  transform: rotate(-10deg);
}

.panel__list { list-style: none; margin: 0; padding: .5rem clamp(.875rem, 1.8vw, 1.25rem); }
@media (min-width: 720px) { .panel__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; } }
.panel__list li { border-bottom: 1px solid var(--rule-2); }
@media (min-width: 720px) { .panel__list li:nth-child(3) { border-bottom: 1px solid var(--rule-2); } }
.panel__list li:last-child { border-bottom: 0; }
@media (min-width: 720px) { .panel__list li:nth-child(3n) { border-bottom: 1px solid var(--rule-2); } }

.chk { display: flex; align-items: center; gap: .875rem; padding: .8125rem .625rem; cursor: pointer; border-radius: var(--r-sm); transition: background-color .2s var(--ease); }
.chk:hover { background: var(--marigold-pale); }
.chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.chk__box {
  flex-shrink: 0; width: 22px; height: 22px;
  border: 2px solid var(--ink); border-radius: var(--r-sm); background: #fff;
  display: grid; place-items: center;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.chk__box svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset .3s var(--ease); }
.chk__txt { font-size: .9375rem; color: var(--body); transition: color .2s var(--ease); }
.chk input:checked + .chk__box { background: var(--green); border-color: var(--green); }
.chk input:checked + .chk__box svg { stroke-dashoffset: 0; }
.chk input:checked ~ .chk__txt { color: var(--ink); font-weight: 600; }
.chk input:focus-visible + .chk__box { outline: 2.5px solid var(--crimson); outline-offset: 3px; }

.panel__foot { padding: 1.25rem clamp(1.375rem, 2.8vw, 2rem) clamp(1.375rem, 2.8vw, 2rem); border-top: 1.5px solid var(--rule-2); background: var(--paper-3); }
.meter { height: 8px; background: rgba(42,33,26,.1); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 1rem; }
.meter__fill { display: block; height: 100%; width: 0%; border-radius: var(--r-pill); background: var(--green); transition: width .5s var(--spring); }
.panel__status { font-size: .9375rem; color: var(--body); font-weight: 500; margin: 0 0 1rem; }
.panel__status b { color: var(--ink); font-weight: 700; }
.panel__foot .btn { width: 100%; }
@media (min-width: 720px) {
  .panel__foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; }
  .panel__foot .btn { width: auto; white-space: nowrap; }
  .panel__status { margin-bottom: 0; }
  .meter { grid-column: 1 / -1; }
}

/* --- 13. The adaptive note ---------------------------------------------
   Personalisation, rendered as a marked-up aside rather than a tile: a
   marigold rule down its left edge and nothing else. */
.you { border-left: 5px solid var(--marigold); padding: .25rem 0 .25rem 1.5rem; max-width: 52ch; }
.you__label { font-size: .8125rem; font-weight: 700; color: var(--marigold-t); margin: 0 0 .5rem; }
.you-line { font-size: 1rem; line-height: 1.6; color: var(--body); margin: 0 0 .75rem; }
.you-line:last-child { margin-bottom: 0; }
.you-line b { color: var(--ink); }
.you-opt {
  font: inherit; font-size: .8125rem; font-weight: 600; color: var(--muted);
  background: none; border: 0; padding: 0; margin-top: 1rem;
  text-align: left; cursor: pointer; border-bottom: 2px solid var(--rule);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.you-opt:hover { color: var(--crimson); border-bottom-color: var(--crimson); }
.you-opt[aria-pressed="true"]::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 7px; height: 7px; margin-right: .5rem; border-radius: 50%; background: var(--green);
}
.band .you { border-left-color: var(--marigold-l); }
.band .you__label { color: var(--marigold-l); }
.band .you-line { color: #D6E5DE; }
.band .you-line b { color: #fff; }
.band .you-opt { color: rgba(214,229,222,.8); border-bottom-color: rgba(255,255,255,.3); }
.band .you-opt:hover { color: #fff; border-bottom-color: #fff; }
.band .you-opt[aria-pressed="true"]::before { background: var(--marigold-l); }

/* --- 14. The attestation chain ------------------------------------------ */
.chain { display: flex; align-items: center; flex-wrap: wrap; gap: .625rem .25rem; margin: 0; padding: 0; list-style: none; }
.chain li { display: flex; align-items: center; gap: .25rem; }
.chain b {
  display: inline-block; font-size: .9375rem; font-weight: 700; color: var(--ink);
  padding: .5rem 1rem; border-radius: var(--r-pill);
  background: var(--paper); border: 2px solid var(--ink);
}
.chain li:last-child b { background: var(--green); border-color: var(--green); color: #fff; }
.chain i { display: block; width: 18px; height: 2px; margin-inline: .25rem; background: var(--ink); opacity: .35; }

/* --- 15. Country rows (services page) ---------------------------------- */
.c-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--rule); }
.c-row {
  display: grid; gap: .25rem 1.5rem; align-items: center; grid-template-columns: 1fr;
  padding: 1.5rem 0; border-bottom: 1.5px solid var(--rule);
  text-decoration: none; position: relative; transition: padding-left .3s var(--ease);
}
.c-row::before { content: ""; position: absolute; left: calc(var(--gut) * -1); right: calc(var(--gut) * -1); top: 0; bottom: 0; background: var(--marigold-pale); opacity: 0; transition: opacity .3s var(--ease); z-index: -1; }
.c-row:hover::before { opacity: 1; }
.c-row:hover { padding-left: .75rem; }
.c-row__name { font-family: var(--serif); font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.c-row__meta { display: flex; flex-wrap: wrap; gap: .3rem 1.75rem; font-size: .875rem; color: var(--muted); }
.c-row__meta b { font-weight: 700; color: var(--body); }
.c-row__go { font-size: .875rem; font-weight: 700; color: var(--marigold-t); }
@media (min-width: 760px) { .c-row { grid-template-columns: 15rem 1fr auto; } }

/* --- 16. Process steps on a band (interior pages) ---------------------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 0 clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
.steps li { counter-increment: s; display: grid; grid-template-columns: 3rem 1fr; gap: 0 1.25rem; padding: 1.375rem 0; border-top: 1px solid rgba(255,255,255,.2); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--marigold-l); grid-row: span 2; line-height: 1.15; }
.steps h3 { color: #fff; font-size: 1.125rem; margin: 0 0 .3rem; font-family: var(--serif); font-weight: 600; }
.steps p { font-size: .9375rem; line-height: 1.6; margin: 0; color: #D6E5DE; }

/* --- 17. Data tables ---------------------------------------------------- */
.t-scroll { overflow-x: auto; margin-bottom: 1.5rem; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; min-width: 540px; border-collapse: collapse; font-size: .9375rem; }
table.data caption { text-align: left; font-size: .875rem; color: var(--muted); padding-bottom: .75rem; }
table.data th, table.data td { text-align: left; padding: .875rem 1rem .875rem 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
table.data thead th { font-size: .8125rem; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--ink); white-space: nowrap; }
table.data tbody th { font-weight: 700; color: var(--ink); }
table.data tbody tr { transition: background-color .2s var(--ease); }
table.data tbody tr:hover { background: var(--marigold-pale); }
table.data td:last-child, table.data th:last-child { padding-right: 0; }

/* --- 18. Accordion ------------------------------------------------------ */
.faq { border-top: 1.5px solid var(--rule); }
.faq details { border-bottom: 1.5px solid var(--rule); }
.faq summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; color: var(--ink);
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--crimson); }
.faq summary::after {
  content: ""; margin-left: auto; flex-shrink: 0; width: 11px; height: 11px; margin-top: .45rem;
  border-right: 2.5px solid var(--marigold-t); border-bottom: 2.5px solid var(--marigold-t);
  transform: rotate(45deg); transition: transform .35s var(--spring);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq__a { overflow: hidden; }
.faq__a > div { padding-bottom: 1.5rem; max-width: var(--measure); color: var(--body); }
.faq details[open] .faq__a { animation: unfold .34s var(--ease); }
@keyframes unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- 19. Checklist blocks ---------------------------------------------- */
.check { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.check li { position: relative; padding: .5rem 0 .5rem 1.875rem; border-bottom: 1px solid var(--rule-2); font-size: .9375rem; }
.check li:last-child { border-bottom: 0; }
.check li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 10px; height: 6px; border-left: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green); transform: rotate(-45deg); }
.check b { display: block; color: var(--ink); font-weight: 700; }
.check span { color: var(--muted); font-size: .875rem; }

/* --- 20. Notes / callouts ----------------------------------------------- */
.note { border-left: 5px solid var(--crimson); background: var(--crimson-pale); padding: 1.25rem 1.5rem; margin: 1.75rem 0; font-size: .9375rem; line-height: 1.65; border-radius: 0 var(--r-md) var(--r-md) 0; max-width: var(--measure); }
.note b { color: var(--crimson); }
.stamp { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--crimson); border: 2px solid currentColor; border-radius: 3px; padding: .1875rem .5rem; transform: rotate(-2deg); }

/* --- 21. Tiles & guide cards (interior pages) --------------------------
   Kept, but as ruled blocks rather than boxes: a marigold rule on top and
   air around them does the same job with none of the weight. */
.tile { border-top: 3px solid var(--marigold); padding-top: 1.25rem; }
.tile h3 { margin-bottom: .5rem; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.tile p { font-size: .9375rem; margin-bottom: .875rem; color: var(--body); }

.g-card { display: block; text-decoration: none; border-top: 1.5px solid var(--rule); padding-top: 1.5rem; transition: border-top-color .25s var(--ease); }
.g-card:hover { border-top-color: var(--marigold); }
.g-card__date { font-size: .8125rem; color: var(--muted); margin-bottom: .5rem; }
.g-card h3 { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; color: var(--ink); margin-bottom: .5rem; letter-spacing: -.018em; }
.g-card p { font-size: .9375rem; color: var(--body); margin-bottom: .75rem; }
.g-card:hover h3 { color: var(--crimson); }

/* --- 22. Breadcrumbs / page head --------------------------------------- */
.crumbs { font-size: .8125rem; color: var(--muted); padding-block: 1.25rem 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: .4rem; color: var(--marigold); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--crimson); }

.p-head { padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(2.25rem, 4.5vw, 3.5rem); border-bottom: 1.5px solid var(--rule); }
.p-head h1 { margin-bottom: .5rem; }
.p-head .lead { margin-top: 1.125rem; }
.p-head__meta { font-size: .8125rem; color: var(--muted); margin-top: 1.5rem; }

/* --- 23. Forms ---------------------------------------------------------- */
.form { max-width: 640px; }
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-size: .875rem; font-weight: 700; color: var(--ink); margin-bottom: .4375rem; }
.field .hint { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: .9375rem 1rem; background: #fff;
  border: 2px solid var(--rule); border-radius: var(--r-md);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px var(--green-pale); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--crimson); box-shadow: 0 0 0 4px var(--crimson-pale); }
.field .err { display: none; font-size: .8125rem; color: var(--crimson); margin-top: .375rem; font-weight: 600; }
.field .err[data-show="true"] { display: block; }
.form__row { display: grid; gap: 0 1rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__consent { font-size: .8125rem; color: var(--muted); margin-top: 1rem; max-width: 52ch; }
.form__ok { display: none; border-left: 5px solid var(--green); background: var(--green-pale); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; font-size: .9375rem; }
.form__ok[data-show="true"] { display: block; }

/* --- 24. Contact detail block ------------------------------------------ */
.nap { list-style: none; margin: 0; padding: 0; }
.nap li { padding: 1.125rem 0; border-bottom: 1px solid var(--rule-2); }
.nap li:first-child { border-top: 1.5px solid var(--rule); }
.nap dt, .nap b { display: block; font-size: .8125rem; font-weight: 700; color: var(--marigold-t); margin-bottom: .25rem; }
.nap a, .nap span { font-size: 1.0625rem; color: var(--ink); }

/* --- 25. CTA ------------------------------------------------------------ */
.cta, .cta--warm { text-align: center; }
.cta h2, .cta--warm h2 { max-width: 20ch; margin-inline: auto; }
.cta p, .cta--warm p { max-width: 54ch; margin-inline: auto; margin-bottom: 1.75rem; }
.cta .btn-row, .cta--warm .btn-row { justify-content: center; }
.cta--warm { background: var(--paper-3); }

/* --- 26. Footer --------------------------------------------------------- */
.site-foot { background: var(--green); color: #C7DBD3; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: .9375rem; }
.site-foot__grid { display: grid; gap: 2.5rem; }
@media (min-width: 720px)  { .site-foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .site-foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.site-foot h2 { font-family: var(--sans); font-size: .8125rem; font-weight: 700; color: var(--marigold-l); margin-bottom: 1rem; letter-spacing: .01em; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .6875rem; }
.site-foot a { color: #C7DBD3; text-decoration: none; transition: color .2s var(--ease); }
.site-foot a:hover { color: var(--marigold-l); }
.site-foot .brand__name { color: #fff; }
.site-foot .brand__mark { background: var(--marigold); color: var(--green); border-color: var(--marigold); }
.site-foot address { font-style: normal; line-height: 1.75; margin: 1rem 0; }
.foot-base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .8125rem; color: rgba(199,219,211,.75); }
.foot-base a { font-size: .8125rem; color: rgba(199,219,211,.75); }

/* The builder credit. Pushed to the far end of the base bar so it reads as a
   signature rather than as a fifth legal line; on a narrow screen the flex row
   wraps and it simply sits last. The studio name is the only thing in this bar
   allowed to be brighter than the rest, because it is a name. */
.foot-built { margin-left: auto; }
.foot-built a { color: rgba(199,219,211,.95); border-bottom: 1px solid rgba(199,219,211,.35); padding-bottom: 1px; }
.foot-built a:hover { color: var(--marigold-l); border-bottom-color: currentColor; }
@media (max-width: 719px) { .foot-built { margin-left: 0; } }

/* --- 27. Sticky mobile CTA --------------------------------------------- */
.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: .625rem; padding: .75rem var(--gut) calc(.75rem + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 3px solid var(--marigold);
  transform: translateY(110%); transition: transform .4s var(--spring);
}
.mcta[data-show="true"] { transform: none; }
.mcta .btn { flex: 1; padding: .8125rem 1rem; font-size: .9375rem; }
@media (max-width: 700px) { .mcta { display: flex; } body { padding-bottom: 4.75rem; } }

/* --- 28. Motion ---------------------------------------------------------
   One load sequence, on the hero, translate-only. The H1 is the Largest
   Contentful Paint element and must paint immediately, so nothing carrying
   content ever starts invisible. */
@keyframes settle { from { transform: translateY(18px); } to { transform: none; } }
.hero__media { animation: settle .8s var(--ease) .1s backwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important; transition-duration: .001ms !important;
  }
}

/* --- 29. Charts --------------------------------------------------------- */
.chart { margin: 0 0 clamp(2rem, 4vw, 3rem); padding: clamp(1.25rem, 3vw, 2rem); background: var(--paper-2); border: 1.5px solid var(--rule); border-radius: var(--r-md); }
.chart__head { margin-bottom: 1.25rem; }
.chart__head h3 { font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 600; color: var(--ink); margin: 0 0 .375rem; letter-spacing: -.02em; }
.chart__head p { font-size: .9375rem; color: var(--body); margin: 0; max-width: 62ch; }
.chart__plot { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart svg { width: 100%; min-width: 480px; height: auto; display: block; }
.chart .cat { font-family: var(--sans); font-size: 12.5px; font-weight: 500; fill: #584C40; }
.chart .val { font-family: var(--sans); font-size: 13px; font-weight: 700; fill: #2A211A; }
.chart .mark { transition: opacity .2s var(--ease); }
.chart .bar:hover .mark { opacity: .78; }
.chart .ref { stroke: #6F6154; stroke-width: 1; stroke-dasharray: 3 3; }
.chart .reflab { font-family: var(--sans); font-size: 11px; font-weight: 700; fill: #6F6154; }
.chart__note { font-size: .875rem; color: var(--body); margin: 1.125rem 0 0; padding-left: 1rem; border-left: 3px solid var(--marigold); max-width: 64ch; }
.chart__data { margin-top: 1.125rem; border-top: 1px solid var(--rule-2); }
.chart__data summary { cursor: pointer; list-style: none; padding: .75rem 0 0; font-size: .8125rem; font-weight: 700; color: var(--body); }
.chart__data summary::-webkit-details-marker { display: none; }
.chart__data summary::before { content: "+ "; color: var(--marigold-t); }
.chart__data[open] summary::before { content: "\2212 "; }
.chart__data summary:hover { color: var(--crimson); }
.chart__data table.data { min-width: 0; }
.chart__src { font-size: .8125rem; color: var(--muted); margin: 1rem 0 0; }
.chart__src a { color: var(--muted); }

/* --- 30. Stat bands (interior pages) ----------------------------------- */
.stats { display: grid; gap: 0; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { padding: 1.5rem 0; border-top: 1.5px solid var(--rule); }
@media (min-width: 640px) { .stat { padding: 0 1.5rem; border-top: 0; border-left: 1.5px solid var(--rule); } .stat:first-child { padding-left: 0; border-left: 0; } }
.stat__n { display: block; font-family: var(--serif); font-size: clamp(2.25rem, 4.5vw, 3.25rem); font-weight: 700; color: var(--green); line-height: 1; letter-spacing: -.03em; margin-bottom: .625rem; }
.stat__l { font-size: .9375rem; color: var(--body); line-height: 1.55; margin: 0 0 .5rem; max-width: 34ch; }
.stat__s { font-size: .75rem; color: var(--muted); margin: 0; }
.stats--stack { display: block; }
.stats--stack .stat { padding: 1.375rem 0; border-top: 1.5px solid var(--rule); border-left: 0; }
.stats--stack .stat:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 560px) { .stats--stack .stat { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.5rem; align-items: baseline; } }
.stats--stack .stat__n { font-size: clamp(1.875rem, 3.4vw, 2.5rem); margin-bottom: .25rem; }

/* --- 31. Photography ----------------------------------------------------
   Photographs are the warmth on this site, so they are large, they bleed,
   and they are never cropped into a small tile. */
.fig { margin: 0 0 1.5rem; }
.fig img, .fig .ph { width: 100%; display: block; border-radius: var(--r-md); background: var(--paper-3); }
.fig figcaption, .photo figcaption { font-size: .8125rem; color: var(--muted); margin-top: .75rem; line-height: 1.55; }
.ph { aspect-ratio: 3 / 2; display: grid; place-items: center; text-align: center; border: 2px dashed var(--rule); padding: 2rem 1.5rem; }
.ph span { font-family: var(--sans); font-size: .8125rem; font-weight: 700; color: var(--marigold-t); max-width: 26ch; line-height: 1.5; }
.ph--tall { aspect-ratio: 4 / 5; }

.photo { position: relative; margin: 0; }
.photo img { width: 100%; height: auto; display: block; border-radius: var(--r-md); background: var(--paper-3); }
.photo--tall img { aspect-ratio: 3 / 4; object-fit: cover; }
.band .photo figcaption { color: rgba(214,229,222,.8); }

/* a photograph bled to the edge of the viewport inside a band */
.bleed-l, .bleed-r { position: relative; }
@media (min-width: 900px) {
  .bleed-l { margin-left: calc(50% - 50vw); }
  .bleed-r { margin-right: calc(50% - 50vw); }
  .bleed-l img { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
  .bleed-r img { border-radius: var(--r-lg) 0 0 var(--r-lg); }
}
.bleed-l img, .bleed-r img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.media { display: grid; gap: clamp(2rem, 4.5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .media { grid-template-columns: 1fr 1fr; } .media--flip .media__txt { order: 2; } }
.media--top { align-items: start; }
.media__txt h2 { margin-bottom: .75rem; }
.media__txt p { max-width: 52ch; }

/* --- 32. Pull quote / answer / sources --------------------------------- */
.quote { margin: 0; padding: 1.75rem 0 0; border-top: 3px solid var(--marigold); }
.quote blockquote { margin: 0 0 1rem; font-family: var(--serif); font-size: clamp(1.1875rem, 2vw, 1.4375rem); line-height: 1.5; color: var(--ink); }
.quote figcaption { font-size: .875rem; color: var(--muted); }
.quote figcaption b { display: block; color: var(--ink); font-weight: 700; font-size: .9375rem; }

.answer { background: var(--green-pale); border-left: 5px solid var(--green); border-radius: 0 var(--r-md) var(--r-md) 0; padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.375rem, 3vw, 2rem); margin: 0 0 2rem; max-width: 72ch; }
.answer h2 { font-family: var(--sans); font-size: .8125rem; font-weight: 700; color: var(--green); margin: 0 0 .5rem; }
.answer p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink); margin: 0 0 .75rem; }
.answer p:last-child { margin-bottom: 0; }
.answer ul { margin: .75rem 0 0; padding-left: 1.15rem; font-size: .9375rem; }
.answer li { margin-bottom: .375rem; }
.answer li::marker { color: var(--green); }

.srcs { list-style: none; margin: 0 0 1.25rem; padding: 0; border-top: 1.5px solid var(--rule); }
.srcs li { padding: .9375rem 0; border-bottom: 1px solid var(--rule-2); }
.srcs a { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--marigold); }
.srcs a:hover { color: var(--crimson); border-bottom-color: var(--crimson); }
.srcs span { display: block; font-size: .875rem; color: var(--muted); margin-top: .25rem; }

/* --- 33. Trust strip ---------------------------------------------------- */
.trust__in { display: grid; gap: 0; }
@media (min-width: 720px) { .trust__in { grid-template-columns: repeat(4, 1fr); } }
.trust__item { padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.2); }
@media (min-width: 720px) { .trust__item { padding: 0 1.5rem; border-top: 0; border-left: 1px solid rgba(255,255,255,.2); } .trust__item:first-child { padding-left: 0; border-left: 0; } }
.trust__item b { display: block; font-family: var(--serif); font-size: 1.375rem; font-weight: 700; color: var(--marigold-l); line-height: 1.15; margin-bottom: .3rem; letter-spacing: -.02em; }
.trust__item span { font-size: .875rem; line-height: 1.5; display: block; color: #D6E5DE; }

/* --- 34. Legacy hooks --------------------------------------------------- */
.warm { background: var(--paper-3); }
.price { font-family: var(--serif); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; color: var(--green); line-height: 1; letter-spacing: -.03em; margin: 0 0 .875rem; }
.price span { display: block; font-family: var(--sans); font-size: .8125rem; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: .375rem; }
.dest { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .dest { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dest { grid-template-columns: repeat(3, 1fr); } }
.dest a { display: block; text-decoration: none; border-top: 3px solid var(--marigold); padding-top: 1.25rem; }
.dest__name { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-family: var(--serif); font-size: 1.375rem; font-weight: 600; color: var(--ink); margin-bottom: 1rem; }
.dest__name span { font-family: var(--sans); font-size: .8125rem; font-weight: 700; color: var(--marigold-t); }
.dest dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .4rem .875rem; font-size: .875rem; }
.dest dt { color: var(--muted); }
.dest dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }

/* --- 35. Print ---------------------------------------------------------- */
@media print {
  .site-head, .mcta, .btn, .petals, .cta, .cta--warm { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band, .band--green, .band--marigold, .site-foot { background: #fff !important; color: #000 !important; }
  .band h2, .band h3, .fig-n, .steps h3, .steps p, .fig-l { color: #000 !important; }
  .panel { box-shadow: none; border: 1px solid #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}