/* =========================================================================
   Paula - Travel Advisor
   Single stylesheet. Organized: tokens → base → layout → components → pages.

   Design intent: an affluent 50+ audience. That means generous type sizes,
   high contrast, wide line-height, large tap targets, and no hover-only
   interactions. Nothing here is smaller than 16px.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Color */
  /* ---- Brand palette --------------------------------------------------
     Warm Ivory     #F7F3EC   main background
     Soft Sand      #E8DED0   secondary background, sections and panels
     Charcoal       #292826   darkest tone - footer and dark bands
     Deep Espresso  #403A35   headings and strong elements
     Champagne      #B59662   luxury accent - buttons, rules, details
     Warm Taupe     #A79A8C   borders, dividers, captions
     Dusty Blue     #77858B   optional accent, used sparingly
     -------------------------------------------------------------------- */
  --ink:        #403a35;   /* headings - deep espresso */
  --ink-soft:   #4a443d;   /* body copy - charcoal, eased for long reading */
  --ink-faint:  #8a8075;   /* captions only - never body copy */
  --cream:      #f7f3ec;   /* warm ivory - page background */
  --sand:       #e8ded0;   /* soft sand - alternating sections */
  --paper:      #fffdf9;   /* cards, a shade above ivory */
  --brass:      #b59662;   /* champagne - the accent */
  --brass-dk:   #766042;   /* champagne darkened for text (passes AA on ivory) */
  --brass-lt:   #d4bc8e;   /* champagne highlight, for dark backgrounds */
  --brass-tint: #f2eadc;
  --taupe:      #a79a8c;   /* warm taupe - borders and dividers */
  --slate:      #77858b;   /* dusty blue-grey - sparingly */
  --deep:       #292826;   /* charcoal - footer and dark bands */
  --line:       rgba(167, 154, 140, 0.55);
  --line-soft:  rgba(167, 154, 140, 0.32);

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing / shape */
  --radius: 4px;
  --radius-lg: 8px;
  /* Three layers each: a contact shadow, a mid lift, and a wide soft ambient.
     One flat shadow is what makes a card read as a printed outline instead of
     an object sitting above the page. */
  --shadow: 0 1px 1px rgba(64, 58, 53, 0.05),
            0 4px 10px -6px rgba(64, 58, 53, 0.12),
            0 20px 40px -22px rgba(64, 58, 53, 0.22);
  --shadow-lg: 0 1px 2px rgba(64, 58, 53, 0.06),
               0 10px 20px -10px rgba(64, 58, 53, 0.15),
               0 36px 64px -28px rgba(64, 58, 53, 0.30);
  --shadow-hover: 0 2px 3px rgba(64, 58, 53, 0.06),
                  0 14px 26px -12px rgba(64, 58, 53, 0.19),
                  0 44px 80px -32px rgba(64, 58, 53, 0.34);
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --header-h: 78px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  /* Global scale. Almost every size in this sheet is in rem, so this one figure
     scales type, padding, gaps and radii together. Kept as a percentage rather
     than a px value so a visitor who has raised their browser's default font
     size still gets it. See the matching steps under section 2b. */
  font-size: 94%;
}

body {
  margin: 0;
  background: var(--cream);
  /* A very soft warm bloom at the top so the page isn't one flat wash of cream.
     Fixed, so it stays put while sections scroll over it. */
  background-image: radial-gradient(120% 70% at 50% 0%, #fffdf7 0%, var(--cream) 62%);
  background-attachment: fixed;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 17px;          /* still above the usual 16 - see section 2b */
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fine paper grain, sitting on the page background ONLY - never over content.
   It used to sit on top of everything, which put visible speckle across the
   photographs; the smaller the photo, the worse it looked. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Content sits above the grain. The header and skip link already carry higher
   stacking values of their own. */
main, .site-footer { position: relative; z-index: 1; }

/* ---------- 2b. Global scale steps --------------------------------------- */
/* One place to tune how large the whole site reads. Because the sheet is
   rem-based, changing the root percentage moves type, spacing, gaps and radii
   together - nothing is left behind at its old size.

   Body copy is held separately and never drops below 16px: it is the one size
   that has to stay comfortable for a 50+ reader, and on iOS an input smaller
   than 16px makes Safari zoom the page when it is focused. */
@media (max-width: 1000px) {
  html { font-size: 90%; }
}
@media (max-width: 700px) {
  html { font-size: 83.6%; }   /* 76% + 10% */
  body { font-size: 16.5px; }
  :root { --header-h: 70px; }
}
/* Small phones - one more step down. */
@media (max-width: 430px) {
  html { font-size: 79.2%; }   /* 72% + 10% */
}
/* Form fields are the exception to the step down: below 16px, iOS Safari zooms
   the whole page as soon as a field is focused. That would hit the TravelJoy
   and Flodesk forms, which is exactly where a phone visitor must not be
   fighting the layout. */
@media (max-width: 700px) {
  input, select, textarea,
  .signup-slot input[type="text"],
  .signup-slot input[type="email"] { font-size: 16px !important; }
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.6rem, 5.4vw, 4.2rem); }
h2 { font-size: clamp(2.05rem, 3.6vw, 2.95rem); }
h3 { font-size: clamp(1.4rem, 2vw, 1.7rem); }
h4 { font-size: 1.22rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

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

a { color: var(--brass-dk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

/* Focus: visible and unmistakable. Keyboard users here are common. */
:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: 12px; top: -100px;
  background: var(--ink); color: #fff; padding: 12px 20px;
  border-radius: var(--radius); z-index: 200; font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section--tight { padding: clamp(3rem, 5vw, 4.5rem) 0; }
/* Sand bands get a soft warm wash across them rather than one flat fill, so the
   alternating sections have some depth of their own. */
.section--sand {
  background-color: var(--sand);
  background-image: linear-gradient(160deg, rgba(255, 253, 249, 0.62) 0%, rgba(255, 253, 249, 0) 45%),
                    radial-gradient(90% 60% at 15% 0%, rgba(181, 150, 98, 0.09) 0%, rgba(181, 150, 98, 0) 70%);
  position: relative;
}
/* matching grain for the sand bands, which sit above the page-level texture */
.section--sand::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section--sand > * { position: relative; }
.section--deep { background: var(--deep); color: rgba(255, 255, 255, 0.82); }
.section--deep h2, .section--deep h3 { color: #fff; }
.section--deep .lede { color: rgba(255, 255, 255, 0.88); }
.section--deep .rule { background: var(--brass-lt); }
.section--deep .checklist svg { color: var(--brass-lt); }
.section--deep .eyebrow { color: var(--brass-lt); }
.section--deep p { color: rgba(255, 255, 255, 0.82); }

/* Cards sitting on a charcoal band. */
.section--deep .card {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: none;
}
.section--deep .card:hover {
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(212, 188, 142, 0.45);
  box-shadow: none;
}
.section--deep .card::before {
  background: linear-gradient(90deg, var(--brass-lt), rgba(212, 188, 142, 0.15) 65%, rgba(212, 188, 142, 0));
}

/* Champagne-tinted band - a third light tone between ivory and sand. */
.section--tint {
  background-color: var(--brass-tint);
  background-image: radial-gradient(85% 60% at 85% 0%, rgba(181, 150, 98, 0.13) 0%, rgba(181, 150, 98, 0) 65%);
}

/* The cost banner: a charcoal band carrying the copy, no photograph. */
.cost-banner { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.cost-banner .checklist { margin-top: 2rem; }
.cost-banner .checklist li { color: rgba(255, 255, 255, 0.86); }

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 1.12rem; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dk);
  margin: 0 0 1rem;
}
.section--deep .eyebrow { color: var(--brass-lt); }

.lede { font-size: clamp(1.14rem, 1.6vw, 1.3rem); line-height: 1.65; color: var(--ink-soft); }

.rule {
  width: 56px; height: 2px; background: var(--brass);
  border: 0; margin: 0 0 1.6rem;
}
.section-head--center .rule { margin-inline: auto; }

/* ---------- 4. Buttons --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 54px;                 /* large tap target, on purpose */
  padding: 0.85rem 1.9rem;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 999px;              /* fully rounded */
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease,
              box-shadow 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary: a vertical gradient plus a warm cast shadow, so it sits above the
   page rather than being a flat swatch of colour. */
/* Navy, taken from the logo. The gold stays on rules, icons and detail; the
   buttons carry the second colour so the call to action stands apart from the
   warm background instead of blending into it. */
/* Champagne is the palette's button colour. White would fail on it, so the
   label is charcoal - which is the more expensive-looking pairing anyway. */
.btn--primary {
  background: linear-gradient(180deg, #c2a675 0%, #b59662 100%);
  color: #292826;
  border-color: #a3854f;
  box-shadow: 0 1px 2px rgba(64, 58, 53, 0.16),
              0 10px 22px -10px rgba(120, 98, 60, 0.55);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #b59662 0%, #a3854f 100%);
  border-color: #8f7343;
  color: #292826;
  box-shadow: 0 2px 4px rgba(64, 58, 53, 0.2),
              0 16px 30px -12px rgba(120, 98, 60, 0.6);
}

.btn--dark {
  background: linear-gradient(180deg, #3d3a36 0%, #292826 100%);
  color: #fff;
  border-color: #211f1e;
  box-shadow: 0 1px 2px rgba(41, 40, 38, 0.2),
              0 10px 22px -10px rgba(41, 40, 38, 0.6);
}
.btn--dark:hover { background: linear-gradient(180deg, #332f2c 0%, #1f1e1d 100%); color: #fff; }

/* Secondary: champagne, but tinted rather than filled, so it stays a step below
   .btn--primary where the two sit side by side. */
.btn--ghost {
  background: var(--brass-tint);
  color: #5f4d33;
  border-color: rgba(181, 150, 98, 0.55);
  box-shadow: 0 1px 2px rgba(118, 96, 66, 0.08),
              0 8px 18px -12px rgba(118, 96, 66, 0.45);
}
.btn--ghost:hover {
  background: #ebdfc7;
  border-color: var(--brass);
  color: #4f3f28;
  box-shadow: 0 2px 4px rgba(118, 96, 66, 0.12),
              0 14px 26px -14px rgba(118, 96, 66, 0.5);
}

.btn--light {
  background: #fff; color: var(--ink); border-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 12px 26px -12px rgba(0, 0, 0, 0.5);
}
.btn--light:hover { background: var(--brass-tint); border-color: var(--brass-tint); color: var(--ink); }

.btn--outline-light { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.5); }
.btn--outline-light:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.14); }

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

/* ---------- 5. Header / nav ---------------------------------------------- */
/* Lighter charcoal than the footer, so the two read as a family without the
   header feeling as heavy as the base of the page. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(90, 84, 77, 0.96);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header .brand-name { color: #fff; }
.site-header .brand-tag { color: rgba(255, 255, 255, 0.7); }
.site-header .brand-role { color: rgba(255, 255, 255, 0.52); }
.site-header .nav-links a { color: rgba(255, 255, 255, 0.94); }
.site-header .nav-links a:hover { color: #fff; border-bottom-color: var(--brass-lt); }
.site-header .nav-links a[aria-current="page"] { color: #fff; border-bottom-color: var(--brass-lt); }
/* Menu button. White lettering on the warm-grey header bar washed out badly on a
   phone in daylight. Charcoal text straight onto that grey would be worse still
   (about 2:1), so the button becomes a champagne pill - the same fill as every
   other button on the site - with charcoal lettering on top at about 5.4:1. */
.site-header .nav-toggle {
  color: #292826;
  background: linear-gradient(180deg, #c2a675 0%, #b59662 100%);
  border-color: #a3854f;
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  box-shadow: 0 1px 2px rgba(41, 40, 38, 0.22),
              0 8px 18px -10px rgba(120, 98, 60, 0.55);
}
.site-header .nav-toggle:hover,
.site-header .nav-toggle[aria-expanded="true"] {
  background: linear-gradient(180deg, #b59662 0%, #a3854f 100%);
  color: #292826;
}
.site-header.is-scrolled { box-shadow: 0 1px 20px rgba(64, 58, 53, 0.10); }

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
/* The wordmark logo is near-square with fine internal detail, so it works as a
   mark beside the name rather than replacing it. */
.brand-logo {
  width: auto;
  height: 66px;
  flex: none;
  display: block;
}
.brand-mark {
  width: 44px; height: 44px; flex: none;
  border: 1.5px solid var(--brass);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--brass-dk);
  letter-spacing: 0.02em;
}
.brand-text { line-height: 1.2; }
.brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;   /* "Travels With Paula" must never wrap mid-name */
}
.brand-tag {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
/* Third line in the header lockup. Tighter tracking than .brand-tag because the
   agency line is long, and hidden on narrower screens so it never crowds the nav. */
.brand-role {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 1180px) {
  .brand-role { display: none; }
}

.nav { display: flex; align-items: center; gap: 2rem; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 500;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--brass); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--brass); font-weight: 600; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.5rem 0.9rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* Between the desktop nav and the mobile breakpoint the lockup and five nav
   links compete for width. Tighten both rather than let anything wrap. */
@media (max-width: 1150px) {
  .nav { gap: 1.25rem; }
  .nav-links { gap: 1.35rem; }
  .nav-links a { font-size: 0.98rem; }
  .brand-name { font-size: 1.34rem; }
  .brand-logo { height: 66px; }
  .brand-mark { width: 40px; height: 40px; font-size: 1.2rem; }
  .btn { padding-inline: 1.4rem; }
}

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    /* Closed by default so a no-JS visitor never gets a panel stuck over the
       page. JS flips [hidden] and aria-expanded together; either one opening it
       is enough. Footer navigation covers the no-JS case. */
    display: none;
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: 1rem 1.25rem 2rem;
    box-shadow: 0 24px 40px -20px rgba(64, 58, 53, 0.35);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .site-header:has(.nav-toggle[aria-expanded="true"]) .nav { display: flex; }
  .nav[hidden] { display: none; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a {
    padding: 1rem 0.25rem;
    font-size: 1.14rem;
  }
  /* The dropped panel is cream, not the dark header bar - so these links need
     dark ink. Inheriting the header's white text left them near-invisible.
     No divider rules in the panel: the current page is marked by champagne
     lettering instead, which does the same job without the ruled-list look. */
  .site-header .nav-links a {
    border-bottom: none;
    color: var(--ink);
    font-weight: 600;
  }
  .site-header .nav-links a:hover,
  .site-header .nav-links a[aria-current="page"] {
    border-bottom: none;
    color: var(--brass-dk);
  }
  .nav .btn { margin-top: 1.25rem; width: 100%; }
}

/* ---------- 6. Photo slots ----------------------------------------------- */
/* Each slot layers a real photo over a tinted gradient. Drop the named file
   into assets/img/ and it appears; until then the gradient stands in and the
   page still reads as finished rather than broken. */
.photo {
  background-color: var(--paper);
  background-position: center;
  background-size: contain;      /* fit, never crop */
  background-repeat: no-repeat;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.photo--hero        { background-image: url("../img/hero-alaska.jpg"),        linear-gradient(150deg, #4a5a60, #77858b 45%, #b59662);
                      background-position: center 68%; }
/* Paula's portrait is 3:4. Given a landscape slot it would crop her face, so
   this one keeps a portrait shape and sits the focal point above center. */
.photo--about       { background-image: url("../img/paula-portrait.jpg"),    linear-gradient(160deg, #d9cbb5, #b79a72);
                      background-position: center 12%; }
.split-media.photo--about { aspect-ratio: 4 / 5; }
@media (max-width: 900px) {
  .split-media.photo--about { aspect-ratio: 4 / 5; max-width: 380px; margin-inline: auto; }
}

/* Home page About block: a small circular portrait with the copy set beside it,
   rather than a half-page photograph. */
.about-teaser {
  position: relative;
  display: grid;
  grid-template-columns: 265px 1fr;
  gap: clamp(2rem, 4.5vw, 3.25rem);
  align-items: center;
}
/* A champagne frame offset behind the portrait - the palette doing the work
   rather than the photo having to be large to hold the space. */
/* 3:4, matching the source photograph, and "contain" rather than "cover" so the
   whole frame is always shown - scaled, never cropped. */
.about-portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  background-color: var(--paper);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  border: 5px solid var(--paper);
  box-shadow: var(--shadow-lg);
}
.about-portrait::after {
  content: "";
  position: absolute;
  inset: -22px -22px 22px 22px;
  border: 1.5px solid var(--brass);
  border-radius: 22px;
  z-index: -1;
  opacity: 0.85;
}
.about-teaser h2 { font-size: clamp(1.8rem, 2.7vw, 2.35rem); }
.about-teaser .lede { font-size: 1.12rem; }
.about-teaser p { font-size: 1.02rem; }
@media (max-width: 720px) {
  .about-teaser { grid-template-columns: 1fr; }
  .about-portrait { width: 210px; }
  .about-portrait::after { inset: -16px -16px 16px 16px; }
}
.photo--ocean       { background-image: url("../img/ocean-cruise.jpg"),      linear-gradient(155deg, #16394d, #4a7f96); }
.photo--river       { background-image: url("../img/river-cruise.jpg"),      linear-gradient(155deg, #2f4a34, #7d9a63); }
.photo--extensions  { background-image: url("../img/port-city.jpg"),         linear-gradient(155deg, #5b3f34, #b08b62); }
.photo--islands     { background-image: url("../img/islands.jpg"),           linear-gradient(155deg, #0f6b74, #63c1bd); }
.photo--alaska      { background-image: url("../img/alaska.jpg"),            linear-gradient(155deg, #33495e, #8ba7bd); }
.photo--parks       { background-image: url("../img/disney-universal.jpg"),  linear-gradient(155deg, #3b2c62, #8a6fb5); }
.photo--consult     { background-image: url("../img/consultation.jpg"),      linear-gradient(150deg, #4a5a60, #b59662); }

/* Candid travel snaps on the About page. Different fallback tints so empty
   slots don't look like a repeated block. */
.photo--travel1     { background-image: url("../img/travel-1.jpg"),          linear-gradient(160deg, #2c5566, #7fa8ac); }
.photo--travel2     { background-image: url("../img/travel-2.jpg"),          linear-gradient(160deg, #6b4b33, #c49a63); }
.photo--travel3     { background-image: url("../img/travel-3.jpg"),          linear-gradient(160deg, #3a4f3a, #8fae78); }

/* Contact page. Drop contact.jpg into assets/img/ to fill it. */
.photo--contact     { background-image: url("../img/contact.jpg"),          linear-gradient(155deg, #a79a8c, #d4bc8e); }

/* Two extra slots for the About story. Drop about-2.jpg and about-3.jpg into
   assets/img/ and they appear; until then these tinted panels stand in. */
.photo--about2      { background-image: url("../img/about-2.jpg"),           linear-gradient(155deg, #8a7f72, #c9b79c); }
.photo--about3      { background-image: url("../img/about-3.jpg"),           linear-gradient(155deg, #6f7d84, #a9bcc2); }

.photo-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.photo-row .photo {
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow);
  border: 1px solid rgba(64, 58, 53, 0.08);
}
@media (max-width: 700px) {
  .photo-row { grid-template-columns: repeat(2, 1fr); }
  .photo-row .photo:last-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
}

/* Supplier certification strip. Capped at the artwork's own width so it is
   never upscaled into softness. */
.badge-strip {
  max-width: 880px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
}
.badge-strip img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.badge-strip--inline { max-width: none; margin: 0; }

/* Host-agency card beside the certification strip. */
.creds-layout {
  display: grid;
  grid-template-columns: 1fr 2.25fr;
  gap: clamp(1.5rem, 2.5vw, 2rem);
  align-items: center;
}
@media (max-width: 900px) {
  .creds-layout { grid-template-columns: 1fr; }
}

/* ---------- 7a. Full-bleed hero ------------------------------------------ */
/* Edge to edge, image behind the type. The header sits transparent over it
   until the page scrolls, so the photograph starts at the very top. */
.hero-full {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(84vh, 760px);
  margin-top: calc(var(--header-h) * -1);
  padding: calc(var(--header-h) + 4rem) 0 clamp(3rem, 6vw, 4.5rem);
  background-image: url("../img/hero-wide.jpg");
  background-size: cover;
  background-position: center 58%;
  color: #fff;
}
.hero-full::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 18, 26, 0.55) 0%, rgba(6, 18, 26, 0.12) 32%, rgba(6, 18, 26, 0.62) 72%, rgba(6, 18, 26, 0.88) 100%),
    linear-gradient(90deg, rgba(6, 18, 26, 0.55) 0%, rgba(6, 18, 26, 0) 62%);
}
.hero-full h1 { color: #fff; max-width: 15ch; margin-bottom: 0.85rem; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.hero-full h1 em { color: var(--brass-lt); font-style: italic; }
.hero-full .eyebrow { color: var(--brass-lt); }
.hero-full .lede { color: rgba(255, 255, 255, 0.92); max-width: 44ch; margin-bottom: 2rem; }
.hero-full .hero-kicker { color: var(--brass-lt); margin-bottom: 1.6rem; }
.hero-full .hero-kicker span { color: rgba(255, 255, 255, 0.55); }
.hero-full .hero-kicker::after { background: rgba(255, 255, 255, 0.28); }
.hero-full .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.hero-full .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

/* Slim reassurance bar directly under the hero. */
.hero-bar { background: var(--deep); color: rgba(255, 255, 255, 0.86); padding: 1.1rem 0; }
.hero-bar .wrap { display: flex; align-items: center; gap: 0.75rem; justify-content: center; text-align: center; }
.hero-bar svg { width: 21px; height: 21px; flex: none; color: var(--brass-lt); }
.hero-bar p { margin: 0; font-size: 1.02rem; }

/* Header sits over the hero photo until the user scrolls. */
.has-hero .site-header { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
.has-hero .site-header:not(.is-scrolled) .brand-name { color: #fff; }
.has-hero .site-header:not(.is-scrolled) .brand-tag { color: rgba(255, 255, 255, 0.7); }
.has-hero .site-header:not(.is-scrolled) .brand-role { color: rgba(255, 255, 255, 0.55); }
.has-hero .site-header:not(.is-scrolled) .nav-links a { color: #fff; }
.has-hero .site-header:not(.is-scrolled) .nav-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.has-hero .site-header.is-scrolled {
  background: rgba(247, 243, 236, 0.95);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom-color: var(--line-soft);
}
@media (max-width: 1000px) {
  /* the mobile menu panel needs a solid ground whatever the header is doing */
  .has-hero .nav { background: #5a544d; }
  .has-hero .site-header:not(.is-scrolled) .nav-links a { color: var(--ink); }
}

/* ---------- 7. Hero ------------------------------------------------------ */
.hero { position: relative; padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(3rem, 5vw, 4.5rem); }

.hero-grid {
  display: grid;
  /* Photo column narrowed from 0.98fr so the hero image sits a little smaller;
     the 4:5 aspect-ratio on .hero-photo keeps its proportions as it scales. */
  grid-template-columns: 1.18fr 0.82fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero h1 { margin-bottom: 0.9rem; }

/* Three-word kicker under the headline. Hairline rules either side keep it from
   reading as a stray caption. */
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 1.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-dk);
  white-space: nowrap;
}
.hero-kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.hero-kicker span { color: var(--brass); font-weight: 400; }

/* Same three words, centred with rules either side, used as a closing refrain. */
.tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin: 2.75rem 0 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-dk);
}
.tagline::before,
.tagline::after {
  content: "";
  width: 52px;
  height: 1px;
  background: var(--brass);
  opacity: 0.5;
}
.tagline span { color: var(--brass); font-weight: 400; }
@media (max-width: 520px) {
  .tagline { font-size: 0.74rem; letter-spacing: 0.14em; gap: 0.7rem; }
  .tagline::before, .tagline::after { width: 24px; }
}
@media (max-width: 480px) {
  .hero-kicker { font-size: 0.74rem; letter-spacing: 0.12em; gap: 0.7rem; }
}
.hero h1 em { font-style: italic; color: var(--brass-dk); }
.hero .lede { max-width: 34em; margin-bottom: 2rem; }
.hero .btn-row { margin-bottom: 2rem; }

/* Square rather than 4:5 - the tall frame left the hero photo running well past
   the bottom of the text column. Focal point sits low so the crop comes off the
   hazy sky at the top, keeping the ship and the town. */
.hero-photo { aspect-ratio: 4 / 5; min-height: 0; box-shadow: var(--shadow-lg); }

.hero-note {
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-size: 1rem; color: var(--ink-soft);
  padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.hero-note svg { width: 22px; height: 22px; flex: none; color: var(--brass); margin-top: 2px; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { aspect-ratio: 4 / 5; min-height: 0; order: -1; max-width: 380px; margin-inline: auto; }
}

/* ---------- 8. Trust bar ------------------------------------------------- */
.trustbar { background: var(--paper); border-block: 1px solid var(--line-soft); padding: 1.75rem 0; }
.trustbar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 2rem;
  text-align: center;
}
.trust-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--ink);
  line-height: 1.1;
  font-weight: 600;
}
.trust-item span { font-size: 0.95rem; color: var(--ink-faint); }
@media (max-width: 760px) { .trustbar-inner { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 9. Cards & grids --------------------------------------------- */
.grid { display: grid; gap: clamp(1.5rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  /* Warms from near-white at the top to a faint champagne at the foot, so the
     card has some depth instead of reading as a flat white rectangle. */
  background: linear-gradient(168deg, var(--paper) 0%, #fdf9f1 52%, #f8f1e4 100%);
  border: 1px solid rgba(181, 150, 98, 0.18);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2rem 2.2rem;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
/* A brass hairline across the top, fading out. Reads as a finished edge rather
   than a decorative stripe. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brass), rgba(181, 150, 98, 0.15) 65%, rgba(181, 150, 98, 0));
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(181, 150, 98, 0.38);
  background: linear-gradient(168deg, var(--paper) 0%, #fdf8ef 52%, #f6eedd 100%);
}
.card h3 { margin-bottom: 0.65rem; }
.card p { font-size: 1.02rem; }

.card-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--brass-tint);
  border: 1px solid rgba(181, 150, 98, 0.22);
  color: var(--brass-dk);
  display: grid; place-items: center;
  margin-bottom: 1.35rem;
}
.card-icon svg { width: 25px; height: 25px; }

/* Compact pill list for supplier names inside a card. Wraps to any length. */
.card-list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.5rem;
}
.card-list li {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--brass-dk);
  background: var(--brass-tint);
  border: 1px solid rgba(181, 150, 98, 0.28);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

/* Travel-style cards (photo on top) */
.style-card {
  background: var(--paper);
  border: 1px solid rgba(64, 58, 53, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.style-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(181, 150, 98, 0.3);
}
.style-card .photo { border-radius: 0; aspect-ratio: 16 / 10; }
.style-card-body { padding: 1.8rem 1.7rem 2rem; flex: 1; display: flex; flex-direction: column; }
.style-card-body h3 { font-size: 1.5rem; margin-bottom: 0.55rem; }
.style-card-body p { font-size: 1.01rem; flex: 1; }
.style-card-link {
  margin-top: 1.35rem;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  color: var(--brass-dk);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.style-card-link::after { content: "\2192"; transition: transform 0.18s ease; }
.style-card:hover .style-card-link::after { transform: translateX(4px); }

/* ---------- 10. Steps ---------------------------------------------------- */
/* Each step is a card. Grid stretch makes all four the same height, which is
   what stops an uneven paragraph from leaving the row looking ragged. */
.steps { counter-reset: step; display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps--4 { grid-template-columns: 1fr; } }

.step {
  counter-increment: step;
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(64, 58, 53, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 3.6rem 1.7rem 1.9rem;
  overflow: hidden;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 1.15rem;
  left: 1.7rem;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--brass-dk);
  line-height: 1;
}
/* brass hairline across the top, matching the other cards on the site */
.step::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brass), rgba(181, 150, 98, 0.15) 65%, rgba(181, 150, 98, 0));
}
/* The step title sits in a champagne header band pulled out to the card edges,
   so the four titles read as a row across the section rather than as small text
   floating on paper. The negative margins cancel .step's padding; .step already
   has overflow:hidden, so the band takes the card's rounded corners. */
.step h3 {
  font-size: 1.32rem;
  background: var(--brass-tint);
  border-bottom: 1px solid rgba(181, 150, 98, 0.28);
  margin: -3.6rem -1.7rem 1.25rem;
  padding: 3.5rem 1.7rem 0.85rem;
}
.step p { font-size: 1rem; }

/* ---------- 11. Split feature block -------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.split--flip .split-media { order: 2; }
.split-media { aspect-ratio: 16 / 10; min-height: 0; box-shadow: var(--shadow-lg); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--flip .split-media { order: 0; }
  .split-media { aspect-ratio: 16 / 10; min-height: 0; }
}

.checklist { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.95rem; }
.checklist li { display: flex; gap: 0.85rem; align-items: flex-start; font-size: 1.05rem; }
.checklist--two { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 2.5rem; }
@media (max-width: 760px) { .checklist--two { grid-template-columns: 1fr; } }
.checklist svg { width: 22px; height: 22px; flex: none; color: var(--brass); margin-top: 4px; }
.section--deep .checklist svg { color: var(--brass-lt); }

/* ---------- 12. Testimonials --------------------------------------------- */
.quote {
  background: var(--paper);
  border: 1px solid rgba(64, 58, 53, 0.08);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2.2rem 2.1rem;
  box-shadow: var(--shadow-lg);
}
.quote blockquote {
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1.5;
  color: var(--ink);
}
.quote figcaption { font-size: 0.98rem; color: var(--ink-faint); font-weight: 500; }
.quote figcaption strong { display: block; color: var(--ink); font-weight: 600; font-size: 1.02rem; }

/* Full-bleed photographic band carrying a client quote. The single darkest
   moment on the page - it breaks up the run of cream sections and gives the
   photography somewhere to breathe outside a card. */
/* Deliberately no photograph. Reviews come from different suppliers, so any one
   destination behind them would contradict the others. */
.quote-band {
  position: relative;
  isolation: isolate;
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
  /* Deeper than the footer charcoal, so the band reads as its own space. Two
     champagne glows off opposite corners, a faint centre lift to keep the middle
     from going flat, and a vignette to settle the top and bottom edges. */
  background-color: #232220;
  background-image:
    radial-gradient(78% 62% at 16% -8%, rgba(181, 150, 98, 0.22) 0%, rgba(181, 150, 98, 0) 62%),
    radial-gradient(68% 58% at 88% 108%, rgba(181, 150, 98, 0.16) 0%, rgba(181, 150, 98, 0) 58%),
    radial-gradient(115% 95% at 50% 48%, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 68%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 18%,
                            rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.26) 100%);
  box-shadow: inset 0 1px 0 rgba(212, 188, 142, 0.28),
              inset 0 -1px 0 rgba(212, 188, 142, 0.18);
  color: #fff;
  text-align: center;
}
/* Same paper grain the light sections carry, so the charcoal doesn't read as
   flat digital colour. Sits under the content, as elsewhere on the site. */
.quote-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.quote-band > * { position: relative; }
.quote-band .eyebrow { color: var(--brass-lt); }
.quote-band .rule { background: var(--brass-lt); margin-inline: auto; }
.quote-band blockquote {
  margin: 0 0 1.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.42rem, 2.5vw, 2.05rem);
  line-height: 1.45;
  color: #fff;
}
.quote-band figcaption { font-size: 1rem; color: rgba(255, 255, 255, 0.72); font-weight: 500; }
.quote-band figcaption strong { display: block; color: #fff; font-weight: 600; font-size: 1.08rem; }

/* Two quotes side by side. Left-aligned and a size down from a single centred
   quote, so two columns of serif stay readable. */
.quote-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.25rem, 5vw, 4rem);
  text-align: left;
  margin-top: 2.5rem;
}
.quote-pair figure { margin: 0; }
.quote-band .quote-pair blockquote {
  font-size: clamp(1.12rem, 1.55vw, 1.35rem);
  line-height: 1.55;
  margin-bottom: 1.35rem;
}
.quote-pair figure::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 0.6;
  color: var(--brass-lt);
  margin-bottom: 0.75rem;
}
/* Three across. Drops straight to a single column rather than leaving an
   orphan quote alone on a second row. */
.quote-pair--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
.quote-band .quote-pair--3 blockquote {
  font-size: clamp(1.04rem, 1.2vw, 1.18rem);
  line-height: 1.6;
}
@media (max-width: 1040px) {
  .quote-pair--3 { grid-template-columns: 1fr; gap: 2.75rem; }
}

@media (max-width: 820px) {
  .quote-pair { grid-template-columns: 1fr; gap: 2.75rem; }
}

/* ---------- 13. CTA band ------------------------------------------------- */
.cta-band {
  background: var(--deep);
  color: rgba(255, 255, 255, 0.85);
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
  text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: 1rem; }
.cta-band p { font-size: 1.15rem; max-width: 60ch; margin-inline: auto; margin-bottom: 2rem; }
.cta-band .btn-row { justify-content: center; }

/* ---------- 14. FAQ ------------------------------------------------------ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.55rem 3rem 1.55rem 0;
  font-family: var(--font-body);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ink);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 0.4rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--brass);
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 3rem 1.7rem 0; font-size: 1.05rem; }

/* ---------- 15. Forms ---------------------------------------------------- */
.form-panel {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.9rem, 4vw, 3rem);
  box-shadow: var(--shadow-lg);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.5rem; }
.field--full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.field .hint { display: block; font-weight: 400; font-size: 0.92rem; color: var(--ink-faint); margin-top: 0.15rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 54px;
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: 1.05rem;              /* 16px+ prevents iOS zoom-on-focus */
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346565f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 20px; padding-right: 3rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(181, 150, 98, 0.18);
  outline: none;
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: #b23b2e;
  background: #fdf5f4;
}
.field .error { display: none; color: #97301f; font-size: 0.95rem; font-weight: 500; margin-top: 0.4rem; }
.field .error.is-shown { display: block; }

.fieldset-plain { border: 0; margin: 0; padding: 0; }
.fieldset-plain legend { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 0.7rem; padding: 0; }

.checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 1.2rem; }
@media (max-width: 620px) { .checkbox-grid { grid-template-columns: 1fr; } }
.check {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  cursor: pointer;
  font-size: 1.01rem;
  min-height: 52px;
}
.check:hover { border-color: var(--brass); }
.check input { width: 20px; height: 20px; accent-color: var(--brass); flex: none; margin: 0; }
.check:has(input:checked) { border-color: var(--brass); background: var(--brass-tint); }

.form-footnote { font-size: 0.96rem; color: var(--ink-faint); margin-top: 1.25rem; }

/* Honeypot - hidden from people, tempting to bots */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- 16. Contact aside -------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 920px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-card {
  background: var(--paper);
  border: 1px solid rgba(64, 58, 53, 0.08);
  border-radius: var(--radius-lg);
  padding: 2.1rem 1.9rem;
  box-shadow: var(--shadow);
}
.contact-card + .contact-card { margin-top: 1.5rem; }
.contact-card h3 { font-size: 1.35rem; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.contact-list a { color: var(--ink); font-weight: 600; text-decoration: none; font-size: 1.08rem; }
.contact-list a:hover { color: var(--brass-dk); text-decoration: underline; }
.contact-list span { display: block; font-size: 0.9rem; color: var(--brass-dk); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- 17. Page hero (interior pages) -------------------------------- */
.page-hero { padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.5rem); background: var(--sand); border-bottom: 1px solid var(--line-soft); }
.page-hero h1 { max-width: 16ch; }
.page-hero .lede { max-width: 60ch; }

/* Contact page hero: copy on the left, a portrait slot on the right. The photo
   is kept beside the text rather than above it so the form below doesn't get
   pushed down the page. */
.contact-hero {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: center;
}
.contact-hero h1 { max-width: 22ch; }
/* 3:4 to match the photograph's own shape, so nothing letterboxes. */
.contact-hero .photo {
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(181, 150, 98, 0.18);
}
@media (max-width: 860px) {
  .contact-hero { grid-template-columns: 1fr; gap: 2rem; }
  .contact-hero .photo { max-width: 280px; margin-inline: auto; }
}
.breadcrumb { font-size: 0.95rem; color: #6b5638; margin-bottom: 1.2rem; }
.breadcrumb a { color: #6b5638; text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

/* About page story: a single reading column with photographs floated into it,
   so the copy wraps around them the way it would in a magazine. */
.about-story {
  max-width: 920px;
  margin-inline: auto;
}
.about-story::after { content: ""; display: block; clear: both; }
.about-story h1 { font-size: clamp(2.15rem, 3.6vw, 3.1rem); margin-bottom: 0.6rem; }
.about-story .breadcrumb { margin-bottom: 0.9rem; }
.about-story h2 { font-size: clamp(1.7rem, 2.5vw, 2.2rem); clear: none; }
.about-story p { max-width: none; }

.about-fig { margin: 0.35rem 0 1.4rem; }
.about-fig .photo {
  border-radius: 14px;
  border: 5px solid var(--paper);
  box-shadow: var(--shadow);
}
.about-fig--right {
  float: right;
  width: 250px;
  margin-left: clamp(1.5rem, 3vw, 2.5rem);
}
.about-fig--left {
  float: left;
  width: 230px;
  margin-right: clamp(1.5rem, 3vw, 2.5rem);
}
.about-fig--right .photo { aspect-ratio: 4 / 5; }
.about-fig--left  .photo { aspect-ratio: 4 / 5; }

/* Paula's portrait: 3:4 to match the source exactly, and "contain" so the whole
   frame is shown and scaled - never cropped, whatever the box does. */
.about-fig .photo--about {
  aspect-ratio: 3 / 4;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: var(--paper);
}

@media (max-width: 760px) {
  /* floats stop helping on a narrow screen - stack them instead */
  .about-fig--right,
  .about-fig--left {
    float: none;
    width: 100%;
    max-width: 300px;
    margin: 1.75rem auto;
  }
}

/* ---------- 18. Prose (about / detail pages) ------------------------------ */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.6rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2rem; }
.prose ul { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.6rem; }

.pull {
  border-left: 3px solid var(--brass);
  padding: 0.3rem 0 0.3rem 1.6rem;
  margin: 2.2rem 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--ink);
}

/* ---------- 18b. Newsletter signup --------------------------------------- */
/* Light band, so it separates the charcoal CTA above it from the charcoal
   footer below rather than merging the two into one dark block. */
.signup-band {
  background-color: var(--brass-tint);
  background-image: radial-gradient(80% 60% at 80% 0%, rgba(181, 150, 98, 0.14) 0%, rgba(181, 150, 98, 0) 65%);
  border-top: 1px solid rgba(181, 150, 98, 0.28);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.signup-inner { max-width: 660px; margin-inline: auto; text-align: center; }
.signup-inner h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin-bottom: 0.75rem; }
.signup-inner p { font-size: 1.05rem; margin-inline: auto; max-width: 52ch; }
.signup-slot { margin-top: 1.9rem; }
/* Flodesk sets its own widths; keep it from overflowing on narrow screens. */
.signup-slot iframe,
.signup-slot form { max-width: 100%; }

/* Pull the Flodesk form towards the site's own styling. These are element
   selectors rather than Flodesk's class names on purpose - their classes are
   generated and change between form versions, element names don't.
   NOTE: this only reaches the form if Flodesk renders into the normal DOM. The
   durable place to set colours and fonts is Flodesk's own form builder. */
/* Flodesk renders its own title and subtitle inside the form ("DON'T MISS A
   THING"), which arrives far larger than anything else on the page. Their class
   names are generated per form, so match on the BEM suffix and on plain heading
   elements rather than on an exact class. */
.signup-slot h1,
.signup-slot h2,
.signup-slot h3,
.signup-slot [class*="__title"],
.signup-slot [class*="title"] > h1,
.signup-slot [class*="title"] > h2 {
  font-size: clamp(2.04rem, 3.44vw, 2.74rem) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 0.5rem !important;
}
.signup-slot [class*="__subtitle"],
.signup-slot [class*="subtitle"] {
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
}
@media (max-width: 700px) {
  .signup-slot h1,
  .signup-slot h2,
  .signup-slot h3,
  .signup-slot [class*="__title"] {
    font-size: 1.8rem !important;
    letter-spacing: 0.03em !important;
  }
  .signup-slot [class*="__subtitle"],
  .signup-slot [class*="subtitle"] { font-size: 0.85rem !important; }
}

.signup-slot input[type="text"],
.signup-slot input[type="email"] {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  border: 1px solid rgba(181, 150, 98, 0.45) !important;
  border-radius: 999px !important;
  padding: 0.85rem 1.35rem !important;
  min-height: 52px !important;
  box-shadow: none !important;
}
.signup-slot input[type="text"]:focus,
.signup-slot input[type="email"]:focus {
  outline: none !important;
  border-color: var(--brass) !important;
  box-shadow: 0 0 0 3px rgba(181, 150, 98, 0.22) !important;
}
.signup-slot input::placeholder { color: var(--ink-faint) !important; }

.signup-slot button,
.signup-slot input[type="submit"] {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: #292826 !important;
  background: linear-gradient(180deg, #c2a675 0%, #b59662 100%) !important;
  border: 1px solid #a3854f !important;
  border-radius: 999px !important;
  padding: 0.9rem 1.9rem !important;
  min-height: 54px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(64, 58, 53, 0.18),
              0 12px 26px -12px rgba(120, 98, 60, 0.55) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}
.signup-slot button:hover,
.signup-slot input[type="submit"]:hover {
  background: linear-gradient(180deg, #b59662 0%, #a3854f 100%) !important;
  box-shadow: 0 2px 4px rgba(64, 58, 53, 0.2),
              0 16px 30px -12px rgba(120, 98, 60, 0.6) !important;
}
.signup-note {
  margin-top: 1.1rem;
  font-size: 0.92rem;
  color: var(--ink-faint);
}

/* ---------- 19. Footer --------------------------------------------------- */
.site-footer { background: var(--deep); color: rgba(255, 255, 255, 0.68); padding: clamp(3.5rem, 6vw, 5rem) 0 2rem; font-size: 1rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer h4 { color: #fff; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.1rem; }
.site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.footer-brand .brand-logo { width: auto; height: 92px; }
.footer-brand .brand-mark { border-color: rgba(255,255,255,0.4); color: var(--brass-lt); }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-tag { color: rgba(255,255,255,0.55); }
.footer-blurb { margin-top: 1.4rem; max-width: 42ch; font-size: 0.98rem; line-height: 1.65; }

/* Host agency lockup. The logo is a background image rather than an <img> so a
   missing file leaves clean empty space instead of a broken-image icon. */
.footer-affil { margin-top: 1.75rem; }
.footer-affil > span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.7rem;
}
/* Their mark is dark artwork on white, so it sits on its own light tile rather
   than being recoloured - host agencies generally don't permit altering it. */
.footer-affil-logo {
  width: 76px;
  height: 76px;
  flex: none;
  background-color: #fff;
  background-image: url("../img/breakthrough-logo.png");
  background-size: 88% auto;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 9px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
/* the agency line runs long, so it needs tighter tracking and room to wrap */
.footer-brand .brand-tag {
  letter-spacing: 0.1em;
  line-height: 1.5;
  white-space: normal;
  max-width: 22ch;
}

/* Social icons. Outlined circles rather than filled brand colours, so Facebook
   blue and the Instagram gradient don't fight the palette. */
.social-links {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.6rem;
  padding: 0;
  list-style: none;
}
/* Filled champagne, matching the primary buttons, so they read at a glance
   against the charcoal footer instead of disappearing into it. */
.social-links a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #c2a675 0%, #b59662 100%);
  border: 1px solid rgba(212, 188, 142, 0.5);
  color: var(--deep);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.social-links a:hover,
.social-links a:focus-visible {
  background: linear-gradient(160deg, #d4bc8e 0%, #c2a675 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
  color: var(--deep);
  text-decoration: none;
}
.social-links svg { width: 22px; height: 22px; }

.footer-bottom {
  margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  justify-content: space-between;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- 20. Motion --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 21. Print ---------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle { display: none; }
  body { background: #fff; font-size: 12pt; }
  .photo { display: none; }
}

/* ---------- 22. Fixed-size trims on phones -------------------------------
   The root percentage in section 2b scales everything expressed in rem. These
   few are in px because they are fixed objects rather than type - icons, logos
   and rules - so they need trimming by hand at the small end. Kept here in one
   block rather than scattered through the components, so the phone scale can be
   tuned in a single place. */
@media (max-width: 700px) {
  .rule            { width: 42px; }
  .tagline::after  { width: 40px; }
  .card-icon       { width: 44px; height: 44px; margin-bottom: 1.05rem; }
  .card-icon svg   { width: 21px; height: 21px; }
  .checklist svg   { width: 20px; height: 20px; margin-top: 3px; }
  .social-links a  { width: 48px; height: 48px; }   /* 44 is the tap-target floor */
  .social-links svg{ width: 20px; height: 20px; }
  .footer-affil-logo { width: 59px; height: 59px; }
  .step::before    { font-size: 1.82rem; }
  /* Sections carry a lot of vertical air on desktop; on a phone that turns into
     scrolling past emptiness between every block. */
  .section         { padding-block: clamp(2.25rem, 7vw, 3rem); }
  .cta-band        { padding-block: clamp(2.5rem, 8vw, 3.25rem); }
  .signup-band     { padding-block: clamp(2.25rem, 7vw, 3rem); }
  .quote-band      { padding-block: clamp(2.75rem, 9vw, 3.5rem); }
  .page-hero       { padding-block: clamp(1.75rem, 6vw, 2.5rem) clamp(1.5rem, 5vw, 2rem); }
}