/* ============================================================
   FRED'S — fredspt.com v2
   Quiet luxury editorial. Navy, off-white, gold. Playfair + Montserrat.
   ============================================================ */

:root {
  --navy: #001F54;
  --navy-light: #002a6b;
  --navy-dark: #001233;
  --offwhite: #F5F3F0;
  --cream: #EFEAE3;
  --grey: #DDDBD9;
  --gold: #C5A880;
  --gold-deep: #b8986e;
  --ink: #16181d;
  --ink-soft: #46505e;
  --white: #ffffff;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Montserrat', -apple-system, sans-serif;

  --text-xs: clamp(0.68rem, 0.64rem + 0.2vw, 0.78rem);
  --text-sm: clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
  --text-base: clamp(0.98rem, 0.92rem + 0.3vw, 1.08rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);
  --text-3xl: clamp(2.6rem, 2rem + 3.2vw, 4.2rem);

  --wrap: 1160px;
  --wrap-narrow: 780px;
  --radius: 2px;
  --shadow: 0 18px 50px -18px rgba(0, 20, 60, 0.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink);
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; color: var(--navy); }
h1 { font-size: var(--text-3xl); letter-spacing: -0.01em; }
h2 { font-size: var(--text-2xl); letter-spacing: -0.005em; }
h3 { font-size: var(--text-xl); }
h1 em, h2 em { font-style: italic; color: var(--gold-deep); }

.kicker {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.1rem;
}
.lead { font-size: var(--text-lg); font-weight: 300; line-height: 1.65; color: var(--ink-soft); }
.on-navy .kicker { color: var(--gold); }
.on-navy h1, .on-navy h2, .on-navy h3 { color: var(--offwhite); }
.on-navy p { color: rgba(245, 243, 240, 0.82); }

/* ---------- layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
section { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.section-navy { background: var(--navy); }
.section-cream { background: var(--cream); }
.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.split-wide { grid-template-columns: 1.15fr 0.85fr; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(245, 243, 240, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 31, 84, 0.08);
  transition: background 0.3s;
}
.nav-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 0.95rem clamp(1.25rem, 4vw, 2.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nav-logo {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
  color: var(--navy); text-decoration: none; letter-spacing: 0.04em;
}
.nav-logo span { color: inherit; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; list-style: none; }
.nav-links a {
  font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; transition: color 0.2s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--navy); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 0.4rem; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; transition: 0.3s var(--ease); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 1.05rem 2.2rem;
  background: var(--gold); color: var(--navy-dark);
  border: 1px solid var(--gold); border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}
/* Hover belongs to devices that can hover. On a touchscreen :hover sticks
   after a tap until something else is touched, so the lift and the gold
   drop shadow stayed under the button after you pressed it. */
@media (hover: hover) {
  .btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(197, 168, 128, 0.55); }
  .btn-ghost:hover { background: var(--navy); color: var(--offwhite); border-color: var(--navy); box-shadow: none; }
  .on-navy .btn-ghost:hover { background: var(--offwhite); color: var(--navy); border-color: var(--offwhite); }
}
.btn-ghost { background: transparent; color: var(--navy); border-color: rgba(0, 31, 84, 0.35); }

.on-navy .btn-ghost { color: var(--offwhite); border-color: rgba(245, 243, 240, 0.4); }

.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.text-link {
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--gold); padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.text-link:hover { color: var(--gold-deep); }

/* ---------- hero ---------- */
.hero {
  min-height: 92vh;
  display: flex; align-items: center;
  padding: clamp(7rem, 14vh, 10rem) 0 clamp(3rem, 7vh, 5rem);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.hero h1 { margin: 0 0 1.4rem; }
.hero .lead { margin-bottom: 2.4rem; max-width: 34rem; }
.hero-note { margin-top: 1.6rem; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- photo placeholders (pre-shoot) ---------- */
.ph {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-light) 55%, #0a3a86 100%);
  border-radius: var(--radius);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.4rem; min-height: 320px;
  box-shadow: var(--shadow);
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 75% 20%, rgba(197, 168, 128, 0.16), transparent 55%),
    radial-gradient(ellipse at 20% 85%, rgba(197, 168, 128, 0.08), transparent 50%);
}
.ph span {
  position: relative; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 0.35rem;
}
.ph em {
  position: relative; font-style: normal; font-weight: 300;
  font-size: var(--text-sm); line-height: 1.55; color: rgba(245, 243, 240, 0.75);
  max-width: 26rem;
}
.ph-portrait { aspect-ratio: 4 / 5; min-height: 420px; }
.photo-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.photo-frame img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.ph-landscape { aspect-ratio: 16 / 10; }
.ph-tall { min-height: 520px; }

/* ---------- trust strip ---------- */
.trust-strip { border-top: 1px solid rgba(0, 31, 84, 0.1); border-bottom: 1px solid rgba(0, 31, 84, 0.1); padding: 2rem 0; background: var(--offwhite); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; }
.trust-grid-4 { grid-template-columns: repeat(4, 1fr); }
.trust-item strong {
  display: block; font-family: var(--font-display); font-size: var(--text-xl);
  color: var(--navy); font-weight: 500; line-height: 1.2;
}
.trust-item small { font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- cards / ladder ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; align-items: stretch; }
.card {
  background: var(--white); border: 1px solid rgba(0, 31, 84, 0.09); border-radius: var(--radius);
  padding: 2.4rem 2rem; display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: 0.9rem; }
.card .card-tag { font-size: var(--text-xs); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; margin-bottom: 1rem; }
.card .card-price { font-family: var(--font-display); font-size: var(--text-lg); color: var(--navy); margin: 0.4rem 0 1.1rem; }
.card .card-price small { font-family: var(--font-body); font-size: var(--text-xs); color: var(--ink-soft); letter-spacing: 0.05em; }
.card p { font-size: var(--text-sm); color: var(--ink-soft); }
.card ul { list-style: none; margin: 1.1rem 0 1.6rem; flex: 1; }
.card ul li { font-size: var(--text-sm); color: var(--ink-soft); padding: 0.42rem 0 0.42rem 1.5rem; position: relative; }
.card ul li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 14px; height: 1px; background: var(--gold); }
.card-flagship { border: 1px solid var(--gold); position: relative; box-shadow: var(--shadow); }
.card-flagship::before {
  content: "Most chosen"; position: absolute; top: -0.8rem; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--navy-dark);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  padding: 0.32rem 1rem; border-radius: var(--radius); white-space: nowrap;
}

/* ---------- pillars / numbered ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 4vw, 3rem); }
.pillar-num {
  font-family: var(--font-display); font-style: italic; font-size: var(--text-xl);
  color: var(--gold-deep); display: block; margin-bottom: 0.7rem;
}
.pillar h3 { margin-bottom: 0.6rem; }
.pillar p { font-size: var(--text-sm); color: var(--ink-soft); }
.on-navy .pillar p { color: rgba(245, 243, 240, 0.78); }

/* ---------- timeline ---------- */
.timeline { display: grid; gap: 0; border-left: 1px solid rgba(0, 31, 84, 0.18); margin-left: 0.4rem; }
.tl-step { position: relative; padding: 0 0 2.6rem 2.2rem; }
.tl-step:last-child { padding-bottom: 0; }
.tl-step::before {
  content: ""; position: absolute; left: -5px; top: 0.55rem;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold); border: 2px solid var(--offwhite);
}
.tl-step h3 { font-size: var(--text-lg); margin-bottom: 0.4rem; }
.tl-step .tl-when { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: 0.5rem; }
.tl-step p { font-size: var(--text-sm); color: var(--ink-soft); max-width: 34rem; }

/* ---------- for / not for ---------- */
.forgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.forcol { background: var(--white); border: 1px solid rgba(0, 31, 84, 0.09); border-radius: var(--radius); padding: 2.2rem 2rem; }
.forcol.notfor { background: transparent; border-style: dashed; }
.forcol h3 { font-size: var(--text-lg); margin-bottom: 1.1rem; }
.forcol ul { list-style: none; }
.forcol li { font-size: var(--text-sm); color: var(--ink-soft); padding: 0.45rem 0 0.45rem 1.5rem; position: relative; }
.forcol li::before { content: ""; position: absolute; left: 0; top: 1rem; width: 14px; height: 1px; background: var(--gold); }
.forcol.notfor li::before { background: var(--grey); }

/* ---------- price block ---------- */
.price-block {
  background: var(--white); border: 1px solid var(--gold); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(2.2rem, 5vw, 3.4rem);
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
}
.price-figure { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--navy); line-height: 1; }
.price-figure small { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--ink-soft); letter-spacing: 0.04em; }
.price-meta { font-size: var(--text-sm); color: var(--ink-soft); margin-top: 1rem; }
.price-block ul { list-style: none; }
.price-block ul li { font-size: var(--text-sm); color: var(--ink-soft); padding: 0.5rem 0 0.5rem 1.6rem; position: relative; }
.price-block ul li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 14px; height: 1px; background: var(--gold); }

/* ---------- results gallery ---------- */
.tf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.tf-item {
  border-radius: var(--radius); overflow: hidden; margin: 0;
  background: var(--white); border: 1px solid rgba(0, 31, 84, 0.09);
  padding: 0.6rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.tf-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tf-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--white); }
.tf-item figcaption { padding: 0.8rem 0.4rem 0.2rem; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.tf-more {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  background: var(--navy); border-radius: var(--radius); padding: 2rem;
  text-decoration: none; transition: background 0.25s;
}
.tf-more:hover { background: var(--navy-light); }
.tf-more strong { font-family: var(--font-display); font-size: var(--text-xl); color: var(--offwhite); font-weight: 500; margin-bottom: 0.4rem; }
.tf-more span { font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }

/* ---------- photo strip (swipeable) ---------- */
.tf-strip {
  display: flex; gap: 1.4rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0.2rem 0.2rem 0.9rem;
  -webkit-overflow-scrolling: touch;
}
.tf-strip .tf-item { flex: 0 0 calc((100% - 3rem) / 3.18); scroll-snap-align: start; }
.tf-strip .tf-more { flex: 0 0 calc((100% - 3rem) / 3.18); scroll-snap-align: start; }
.tf-strip { scrollbar-width: none; cursor: grab; }
.tf-strip.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.tf-strip img { -webkit-user-drag: none; }
.tf-strip::-webkit-scrollbar { display: none; }
@media (max-width: 900px) {
  .tf-strip .tf-item, .tf-strip .tf-more { flex-basis: 72%; }
}

/* ---------- reviews ---------- */
.review-card { background: var(--white); border: 1px solid rgba(0, 31, 84, 0.09); border-radius: var(--radius); padding: 2rem; }
.review-stars { color: var(--gold-deep); letter-spacing: 0.2em; font-size: var(--text-sm); margin-bottom: 0.8rem; }
.review-card p { font-size: var(--text-sm); color: var(--ink-soft); font-style: italic; }
.review-card footer { margin-top: 1rem; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.review-placeholder { border-style: dashed; background: transparent; }

/* ---------- faq ---------- */
.faq { max-width: var(--wrap-narrow); margin: 0 auto; }
.faq details { border-bottom: 1px solid rgba(0, 31, 84, 0.12); }
.faq summary {
  list-style: none; cursor: pointer;
  font-family: var(--font-display); font-size: var(--text-lg); color: var(--navy);
  padding: 1.4rem 2.5rem 1.4rem 0; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-weight: 300; font-size: 1.6rem; color: var(--gold-deep);
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .faq-a { padding: 0 0 1.6rem; font-size: var(--text-sm); color: var(--ink-soft); max-width: 40rem; }

/* ---------- forms ---------- */
.form { display: grid; gap: 1.3rem; }
.form label { display: grid; gap: 0.45rem; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy); }
.form input, .form select, .form textarea {
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 300;
  padding: 0.95rem 1.1rem; border: 1px solid rgba(0, 31, 84, 0.2); border-radius: var(--radius);
  background: var(--white); color: var(--ink); width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.form textarea { min-height: 140px; resize: vertical; }
.form .form-hint { font-size: var(--text-xs); color: var(--ink-soft); letter-spacing: 0.02em; text-transform: none; font-weight: 400; }
.pill-group { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.pill-group input { display: none; }
.pill-group label {
  display: inline-block; cursor: pointer;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.75rem 1.3rem; border: 1px solid rgba(0, 31, 84, 0.25); border-radius: var(--radius);
  color: var(--ink-soft); transition: all 0.2s;
}
.pill-group input:checked + label { background: var(--navy); color: var(--offwhite); border-color: var(--navy); }
.inline-form { display: flex; gap: 0.8rem; max-width: 30rem; }
.inline-form input { flex: 1; }

/* ---------- sticky mobile cta ---------- */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: var(--navy); padding: 0.8rem 1.25rem;
  display: none; align-items: center; justify-content: space-between; gap: 1rem;
  transform: translateY(110%); transition: transform 0.4s var(--ease);
  box-shadow: 0 -8px 30px rgba(0, 18, 51, 0.35);
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta strong { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--offwhite); }
.sticky-cta .btn { padding: 0.75rem 1.4rem; }

/* ---------- footer ---------- */
footer.site-footer { background: var(--navy); padding: clamp(3.5rem, 7vw, 5.5rem) 0 2.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.footer-logo { font-family: var(--font-display); font-size: 1.5rem; color: var(--offwhite); text-decoration: none; }
.footer-logo span { color: inherit; }
.footer-tag { font-size: var(--text-sm); font-weight: 300; color: rgba(245, 243, 240, 0.6); margin-top: 0.8rem; max-width: 20rem; }
.footer-col h4 { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; }
.footer-col ul { list-style: none; }
.footer-col a { display: block; font-size: var(--text-sm); font-weight: 300; color: rgba(245, 243, 240, 0.75); text-decoration: none; padding: 0.3rem 0; }
.footer-col a:hover { color: var(--offwhite); }
.footer-base { border-top: 1px solid rgba(245, 243, 240, 0.12); padding-top: 1.8rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-base p { font-size: var(--text-xs); color: rgba(245, 243, 240, 0.45); letter-spacing: 0.06em; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero { min-height: auto; }
  .hero-grid, .split, .split-wide, .price-block { grid-template-columns: 1fr; }
  .cards-3, .pillars, .reviews-grid { grid-template-columns: 1fr; }
  .tf-grid { grid-template-columns: 1fr 1fr; }
  .forgrid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .trust-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .sticky-cta { display: flex; }

  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 0; z-index: -1;
    background: var(--navy); flex-direction: column; justify-content: center;
    gap: 2.2rem; opacity: 0; pointer-events: none; transition: opacity 0.35s;
  }
  .nav-links a { color: var(--offwhite); font-size: var(--text-base); }
  .nav.open .nav-links { opacity: 1; pointer-events: auto; z-index: 99; }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav.open .nav-toggle span { background: var(--offwhite); }
}
@media (max-width: 600px) {
  h2 br { display: none; }
}
@media (min-width: 601px) {
  h2.oneline { white-space: nowrap; }
}
@media (max-width: 560px) {
  .tf-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .inline-form { flex-direction: column; }
}

/* v17: card images, benefit list, phone field, for/not-for on navy */
.card-img { margin: -2.4rem -2rem 1.6rem; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.card-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.benefit-list { list-style: none; margin: 1.8rem 0; }
.benefit-list li { font-size: 1.05rem; color: var(--ink); padding: 0.55rem 0 0.55rem 1.7rem; position: relative; }
.benefit-list li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 16px; height: 1px; background: var(--gold); }
.on-navy .forcol h3 { color: var(--navy); }
.on-navy .forcol.notfor h3 { color: var(--offwhite); }
.on-navy .forcol.notfor { border-color: rgba(245, 243, 240, 0.3); }
.on-navy .forcol.notfor li { color: rgba(245, 243, 240, 0.75); }
.on-navy .forcol.notfor li::before { background: rgba(245, 243, 240, 0.45); }
.phone-row { display: flex; gap: 0.6rem; }
.phone-row select { flex: 0 0 8.5rem; width: auto; }
.phone-row input { flex: 1; }

/* v18: checkout step indicator */
.steps { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 2.6rem; flex-wrap: nowrap; }
.step { white-space: nowrap; }
.steps .step-line { flex: 0 1 24px; min-width: 10px; }
.step { display: flex; align-items: center; gap: 0.55rem; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.step-num { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0, 31, 84, 0.25); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0; line-height: 1; }
.step.active .step-num { background: var(--navy); border-color: var(--navy); color: var(--offwhite); }
.step.active { color: var(--navy); font-weight: 600; }
.step-line { flex: 0 0 26px; height: 1px; background: rgba(0, 31, 84, 0.2); }

/* v21: desktop-only photo/text swap (mobile keeps DOM order) */
@media (min-width: 901px) {
  .split-flip .photo-frame { order: 2; }
}

/* v22: results gallery: 3x3 desktop (one item mobile-only), 2-col mobile */
@media (min-width: 901px) {
  .tf-hide-desktop { display: none; }
}

/* v23: mobile polish - compact reviews, slim sticky bar, tight step bar */
@media (max-width: 600px) {
  .review-card p {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .reviews-full .review-card p {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .sticky-cta strong { display: none; }
  .sticky-cta { justify-content: center; padding: 0.7rem 1rem; }
  .sticky-cta .btn { width: 100%; text-align: center; }
  .steps { gap: 0.5rem; }
  .step { font-size: 0.62rem; letter-spacing: 0.1em; gap: 0.4rem; }
  .step-num { width: 22px; height: 22px; font-size: 0.68rem; }
  .steps .step-line { flex: 0 1 14px; min-width: 8px; }
}

/* v24: phone device frame for app screenshots */
.device-frame {
  background: #0d0f14; border: 10px solid #0d0f14; border-radius: 42px;
  overflow: hidden; box-shadow: 0 24px 50px rgba(0, 18, 51, 0.22);
}
.device-frame img { display: block; width: 100%; border-radius: 32px; }

/* v26: mobile hero photo-overlay, trust 2x2, swipeable reviews */
@media (max-width: 900px) {
  .hero:has(.hero-grid) { padding: 0; min-height: auto; }
  .hero .hero-grid { position: relative; display: block; }
  .hero .hero-grid > div:first-child {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 88vh; padding-top: 6rem; padding-bottom: 3rem;
  }
  .hero .hero-grid .photo-frame {
    position: absolute; inset: 0; z-index: 0; margin: 0;
    border-radius: 0; overflow: hidden;
  }
  .hero .hero-grid .photo-frame img {
    width: 100%; height: 100%; aspect-ratio: auto;
    object-fit: cover; object-position: top center;
  }
  .hero .hero-grid::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 18, 51, 0.30) 0%, rgba(0, 18, 51, 0.48) 45%, rgba(0, 18, 51, 0.94) 100%);
  }
  .hero .hero-grid h1 { color: var(--offwhite); }
  .hero .hero-grid h1 em { color: var(--gold); }
  .hero .hero-grid .lead { color: rgba(245, 243, 240, 0.92); }
  .hero .hero-grid .kicker { color: var(--gold); }
  .hero .hero-grid .hero-note { color: rgba(245, 243, 240, 0.75); }
}
@media (max-width: 600px) {
  .trust-grid-4 { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .reviews-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 0.4rem;
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .reviews-grid .review-card { flex: 0 0 86%; scroll-snap-align: center; }
}

/* v26.1: mobile nav — dropdown sheet (fixed-position menu was trapped by the
   header's backdrop-filter containing block and rendered off-screen) */
@media (max-width: 900px) {
  .nav-links {
    position: absolute; inset: auto; top: 100%; left: 0; right: 0;
    background: var(--navy);
    flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 2.2rem 0 2.6rem; gap: 1.7rem;
    opacity: 0; pointer-events: none; transform: translateY(-10px);
    transition: opacity 0.3s, transform 0.3s var(--ease);
    box-shadow: 0 20px 40px rgba(0, 18, 51, 0.3);
    z-index: 98;
  }
  .nav.open .nav-links { opacity: 1; pointer-events: auto; transform: none; z-index: 98; }
}

/* v28: mobile hero = full-screen, full 9:16 photo (never cropped) fading into
   navy; stacked equal hero buttons; 2-line hero note; 1-line trust labels;
   menu sheet matches the bar so the current page's navy link stays visible */
@media (max-width: 900px) {
  .hero:has(.hero-grid) { background: rgb(0, 18, 51); }
  .hero .hero-grid > div:first-child {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 6rem; padding-bottom: 2.8rem;
  }
  .hero .hero-grid .photo-frame { inset: auto; top: 0; left: 0; right: 0; aspect-ratio: 9 / 16; }
  .hero .hero-grid .photo-frame img { object-position: center; }
  .hero .hero-grid::after { background: none; }
  .hero .hero-grid .photo-frame::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0, 18, 51, 0.12) 0%, rgba(0, 18, 51, 0.30) 52%, rgba(0, 18, 51, 0.88) 84%, rgb(0, 18, 51) 100%);
  }
  .hero .hero-grid .btn-row { flex-direction: column; align-items: stretch; gap: 0.8rem; }
  .hero .hero-grid .btn-row .btn { width: 100%; }
  .hero .hero-grid .btn-ghost { color: var(--offwhite); border-color: rgba(245, 243, 240, 0.7); }
  .hero-note span { display: block; }
  .hero-note .hero-note-sep { display: none; }
  .nav-links {
    background: var(--offwhite);
    border-top: 1px solid rgba(0, 31, 84, 0.08);
    box-shadow: 0 20px 40px rgba(0, 18, 51, 0.12);
  }
  .nav-links a { color: var(--ink-soft); }
  .nav-links a[aria-current="page"] { color: var(--navy); font-weight: 700; }
  .nav.open .nav-toggle span { background: var(--navy); }
}
@media (max-width: 600px) {
  .trust-item small { font-size: 0.68rem; letter-spacing: 0.13em; white-space: nowrap; }
}

/* v29: black hero fade (#1a1a1a), reviews carousel with next-card peek,
   3-col mobile footer, tight results hero */
@media (max-width: 900px) {
  .hero:has(.hero-grid) { background: rgb(26, 26, 26); }
  .hero .hero-grid .photo-frame::after {
    background: linear-gradient(180deg, rgba(26, 26, 26, 0.12) 0%, rgba(26, 26, 26, 0.30) 52%, rgba(26, 26, 26, 0.88) 84%, rgb(26, 26, 26) 100%);
  }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 2.2rem 1rem; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .hero { min-height: auto !important; padding-bottom: clamp(1.5rem, 4vh, 3rem); }
}
@media (max-width: 600px) {
  .reviews-grid {
    margin-left: calc(0rem - clamp(1.25rem, 4vw, 2.5rem));
    margin-right: calc(0rem - clamp(1.25rem, 4vw, 2.5rem));
    padding: 0.2rem clamp(1.25rem, 4vw, 2.5rem) 0.6rem;
    scroll-padding-left: clamp(1.25rem, 4vw, 2.5rem);
    gap: 0.9rem;
  }
  .reviews-grid .review-card { flex: 0 0 82%; scroll-snap-align: start; }
}

/* v30: menu sheet identical to the bar, phrase-break titles on mobile,
   horizontal-only review swiping with all 8 reviews (Simon then Sean first) */
@media (max-width: 900px) {
  .nav.open {
    background: var(--offwhite);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .nav.open .nav-links { border-top: 0; box-shadow: 0 20px 40px rgba(0, 18, 51, 0.12); }
}
@media (max-width: 600px) {
  /* titles break at phrases, never mid-thought (desktop is untouched) */
  h2 { font-size: clamp(1.9rem, 1.2rem + 3.2vw, 2.4rem) !important; }
  h1 .lb, h2 .lb { display: block; }
  /* reviews: sideways only, all eight, Simon then Sean first.
     the reveal animation slides cards up 24px as they enter, which reads as
     vertical drift while swiping, so cards sit still inside the carousel */
  .reviews-grid { overflow-y: hidden; overscroll-behavior-x: contain; align-items: stretch; }
  .reviews-grid .review-card.reveal { opacity: 1; transform: none; transition: none; }
  .reviews-grid .r-1 { order: -2; }
  .reviews-grid .r-2 { order: -1; }
  .reviews-grid .review-m { display: block; }
}
.review-m { display: none; }

/* v31: menu = one surface with the bar, links in the logo's navy */
@media (max-width: 900px) {
  .nav.open { border-bottom-color: transparent; }
  .nav-links { background: #F5F3F0; }
  .nav-links a { color: var(--navy); }
  .nav-links a[aria-current="page"] { color: var(--navy); font-weight: 700; }
}

/* v32: mobile hero anchored to the TOP, not the bottom.
   Bottom-anchoring tied the copy's position to the viewport height, so any
   browser whose chrome resizes while you scroll (the in-app browsers in
   Instagram, Facebook and the like) pushed the first line off the screen and
   then snapped it back mid-scroll. The copy now starts a fixed distance from
   the top of the photo, measured in vw, which no browser toolbar can change:
   nothing is ever cut off and nothing jumps. */
@media (max-width: 900px) {
  .hero .hero-grid > div:first-child {
    justify-content: flex-start;
    padding-top: 70vw;
    padding-bottom: 3rem;
  }
}

/* ── Local currency ────────────────────────────────────────────────────
   The note states the currency rather than asking for one, so it reads as
   an answer. The panel lists currency NAMES and no amounts: one price is
   on screen at a time, so switching takes intent instead of comparison. */
.currency-note {
  margin-top: 1.4rem;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  text-align: center;
}
.currency-note .cur-open {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.currency-note .cur-open:hover { color: var(--navy); }

.cur-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 31, 84, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}
.cur-panel-inner {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  width: min(22rem, 100%);
  max-height: min(28rem, 80vh);
  overflow-y: auto;
}
.cur-panel-head {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--navy);
  margin-bottom: 0.9rem;
}
.cur-panel ul { list-style: none; margin: 0; padding: 0; }
.cur-panel li + li { border-top: 1px solid rgba(0, 31, 84, 0.07); }
.cur-panel button[data-cur] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  background: none;
  border: 0;
  padding: 0.72rem 0.2rem;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.cur-panel button[data-cur] span { color: var(--ink-soft); letter-spacing: 0.04em; }
.cur-panel button[data-cur]:hover { color: var(--navy); }
.cur-panel button[data-cur][aria-current] { color: var(--navy); font-weight: 600; }

/* ── Advertising consent ───────────────────────────────────────────────
   A bar, not a wall: the page stays readable and usable behind it, and it
   only ever appears once. Our own analytics need no consent, so this asks
   about one thing rather than presenting a preference centre. */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  background: var(--navy);
  color: var(--cream);
  box-shadow: 0 -8px 30px rgba(0, 31, 84, 0.18);
}
.consent-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.consent-inner p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: rgba(239, 234, 227, 0.88);
}
.consent-inner a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent-btns {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.consent .btn { padding: 0.72rem 1.7rem; }
.consent-no {
  background: none;
  border: 0;
  padding: 0.72rem 0.2rem;
  font: inherit;
  font-size: var(--text-sm);
  color: rgba(239, 234, 227, 0.72);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.consent-no:hover { color: var(--cream); }

@media (max-width: 700px) {
  .consent-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1.1rem 1.2rem calc(1.1rem + env(safe-area-inset-bottom));
  }
  .consent-btns { justify-content: space-between; }
  .consent .btn { flex: 1; }
}

.consent-copy h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--cream);
  margin: 0 0 0.3rem;
  letter-spacing: 0.01em;
}