@charset "UTF-8";
/* ==========================================================================
   NSW Book Publishers — base
   Reset, design tokens, typography, layout primitives.
   Load order: base → components → layout → page stylesheet.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Brand — warm ivory ground, deep navy, gold accent and a deep crimson,
     matching the client's supplied theme. Gold is decorative only: at 4.4:1
     on white it is not safe for body text, so it is used for icons, rules and
     pill grounds that carry navy text. */
  --navy-900: #0E1A45;
  --navy-800: #16265C;
  --navy-700: #1B2E63;   /* primary navy */
  --navy-600: #5C6685;   /* muted navy text */
  --navy-500: #1B2E6366;

  --red-700: #6E1723;
  --red-600: #8A2029;    /* hover */
  --red-500: #A32833;    /* primary red */
  --red-100: #F7E7E4;

  /* Gold — decorative accent from the client's theme. */
  --gold-700: #9E7C1E;   /* icon on the pale gold tile: 600 lands at 2.95:1 */
  --gold-600: #A88420;
  --gold-500: #C9A227;
  --gold-400: #D9B84C;
  --gold-100: #F5EBCF;

  /* The two brand gradients, used on pills and dark bands. */
  --red-grad-a:  #7E1A24;
  --red-grad-b:  #A32833;

  /* Surfaces */
  --cream:      #FBF7F0;   /* logo strip / services band */
  --cream-deep: #F5EDE0;
  --lilac:      #F3E7D2;   /* eyebrow pill */
  --lavender:   #F3E7D2;
  --slate:      #F7F3EC;
  --white:      #FFFFFF;

  /* Ink */
  --ink:       #1F1E24;
  /* The reference runs a single body ink rather than a soft/strong pair, so
     --ink-soft resolves to the same value: it is what `body` inherits. */
  --ink-body:  #33313A;
  --ink-soft:  #33313A;
  --muted:     #5C6685;
  --rule:      #E9E2D6;
  --line:      #EDE7DB;
  --line-soft: #F4EFE6;

  /* Type — one pairing sitewide.
       Playfair Display  elegant serif — hero, section titles, book and
                         testimonial headings
       Inter             modern sans  — paragraphs, service copy, nav, buttons
     Cloned folds match the reference layouts, never their typefaces. */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Neutral band + dark-pill gradient, same source. */
  --bg-light:    #FBF7F0;
  --text-dark:   #1F1E24;
  --text-muted:  #33313A;
  --navy-grad-a: #16265C;
  --navy-grad-b: #2A3C78;

  /* ONE type scale for the whole site.
     Every heading and body size resolves to a token below, so an h2 is the
     same size on the homepage, a service page, the blog and the packages
     page. Sections cloned from the reference sites deliberately no longer
     carry that site's individual sizes. */
  --fs-h1:    clamp(36px, 4.4vw, 60px);   /* hero + page titles      */
  --fs-h2:    clamp(28px, 3.2vw, 44px);   /* section titles          */
  --fs-h3:    clamp(22px, 2.2vw, 30px);   /* card + sub headings     */
  --fs-h4:    21px;                       /* small headings          */
  --fs-h5:    18px;                       /* smallest heading / lead-in */
  --fs-lede:  17px;                       /* intro paragraphs        */
  --fs-body:  16px;                       /* paragraphs              */
  --fs-small: 14px;                       /* meta, captions, buttons */
  --fs-micro: 12.5px;                     /* labels                  */
  --fs-nano:  11px;                       /* uppercase micro-labels  */

  --fs-hero:  var(--fs-h1);               /* alias, kept for older rules */

  /* Space — 4px base */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-9: 4rem;    --sp-10: 5rem;   --sp-11: 6.5rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Shape */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* Elevation */
  --sh-sm: 0 1px 2px rgba(14, 26, 69, .06);
  --sh-md: 0 8px 24px -8px rgba(14, 26, 69, .12);
  --sh-lg: 0 24px 60px -20px rgba(14, 26, 69, .22);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .28s;

  /* Layout */
  --container: 1240px;
  --container-narrow: 960px;
  --gutter: clamp(1rem, .5rem + 2.4vw, 2.5rem);
  --header-h: 84px;
}

/* --- Document ------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

::selection { background: var(--red-500); color: #fff; }

:focus-visible {
  outline: 3px solid var(--red-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Typography ----------------------------------------------------------- */
.display,
.h1, .h2, .h3 {
  font-family: var(--font-display);
  color: var(--navy-700);
  line-height: 1.1;
  letter-spacing: -.015em;
  font-weight: 700;
}
.h1 { font-size: var(--fs-hero); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.25; }
.h4 { font-size: var(--fs-h4); font-weight: 700; color: var(--navy-700); line-height: 1.35; }

/* Was a sans-serif heading variant for the AU/QLD-sourced folds. The brief now
   puts every heading in Playfair Display, so it only carries the tighter
   tracking. Kept as a no-op on the font so the six templates using it did not
   all need editing. */
.h2--sans, .h3--sans { font-family: var(--font-display); letter-spacing: -.02em; font-weight: 700; }

.accent   { color: var(--red-500); font-style: italic; }
.accent--upright { color: var(--red-500); font-style: normal; }

.lede { font-size: var(--fs-lede); color: var(--muted); }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-500);
}

/* --- Layout --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--cream    { background: var(--cream); }
.section--cream-deep { background: var(--cream-deep); }
.section--lavender { background: var(--lavender); }
.section--slate    { background: var(--slate); }
.section--navy     { background: var(--navy-800); color: rgba(255,255,255,.82); }
.section--navy .h2, .section--navy .h3, .section--navy .h4 { color: #fff; }
.section--tight { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }

.section-head { max-width: 62ch; margin-inline: auto; text-align: center; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head--left { margin-inline: 0; text-align: left; }
.section-head .h2 + .lede { margin-top: var(--sp-4); }
.section-head .eyebrow + .h2 { margin-top: var(--sp-3); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px)  { .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 720px)  { .grid--2, .grid--4 { grid-template-columns: 1fr; } }

/* `.split` is not a layout utility here — it is the section class for fold 9,
   defined in home.css. Nothing else may claim the name. */

.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--navy-800); color: #fff; padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm); transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }