/* ==========================================================================
   Archline Studio: stylesheet
   1. Tokens          5. Hero                 9. Testimonials
   2. Base            6. Free consultation    10. Video
   3. Layout          7. Packages             11. Enquiry form
   4. Components      8. Section backgrounds  12. FAQ, contact, footer
                                              13. Pop-ups
   Each section keeps its own responsive rules right below it.
   ========================================================================== */

/* ===== 1. Tokens ===== */
:root {
  --ink: #17243a;
  --muted: #5c6879;
  --accent: #c86b42;
  --peach: #f0b497;
  --bg: #f8f6f2;
  --line: #e6e3de;
  --field: #cbd1d8;
  --grad: linear-gradient(120deg, #17243a, #344760);
  --header-h: 81px;
  --font: 'Poppins', system-ui, Roboto, Arial, sans-serif;

  --hero-img: url("../images/hero-bg.webp");
  --lake: url("../images/lake.webp");
  --pkg1: url("../images/demo1.webp");
  --pkg2: url("../images/demo2.webp");
  --pkg3: url("../images/demo3.webp");
}

@media (max-width: 700px) { :root { --header-h: 64px; } }

/* ===== 2. Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { margin: 0; font: 16px/1.65 var(--font); color: var(--ink); background: var(--bg); }
a { color: inherit; }
img { display: block; }
img, svg { max-width: 100%; }
h1, h2, h3 { margin: 0; }
h1, h2, h3, p { overflow-wrap: break-word; }
h2 { font-size: 2.3rem; line-height: 1.2; letter-spacing: -.04em; margin-bottom: 14px; }
h3 { margin: 10px 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ===== 3. Layout helpers ===== */
.container { width: 100%; max-width: 1100px; margin: auto; padding: 75px 24px; }
.muted { color: var(--muted); }
.small { font-size: .83rem; }
.lead { color: var(--muted); max-width: 700px; margin: 0 0 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 700px) { .container { padding-block: 55px; } }
@media (max-width: 380px) { .container { padding-inline: 18px; } }
/* wrappers whose parent section already provides the vertical spacing (must come after the rules above) */
.vbig-wrap, .form-wrap, .stack-wrap { padding-block: 0; }

/* ===== 4. Components ===== */
.card { background: #fff; padding: 28px; border: 1px solid var(--line); border-radius: 12px; }

.btn { display: inline-block; border: 1px solid transparent; border-radius: 8px; padding: 13px 22px;
  font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(.95); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--field); }
@media (max-width: 380px) { .btn { padding-inline: 18px; } }

.notice { font-size: .83rem; color: var(--muted); margin: 0; }
.info { background: #fff1e9; border-left: 4px solid var(--accent); padding: 15px 18px; border-radius: 4px; margin-top: 20px; }
.form-error { background: #fff1e9; border-left: 4px solid var(--accent); padding: 12px 16px; border-radius: 4px; font-size: .9rem; }

/* Fields shared by the pop-up form (the enquiry form restyles them in section 11) */
input, select, textarea { display: block; width: 100%; margin-top: 5px; padding: 12px; border: 1px solid var(--field); border-radius: 7px;
  font: inherit; font-weight: 400; background: #fff; color: var(--ink); }
textarea { min-height: 105px; resize: vertical; }

/* ----- Header: transparent over the hero, solid once scrolled ----- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 10; background: transparent; border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s, backdrop-filter .25s;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px max(24px, calc((100% - 1100px) / 2 + 24px)); }
.nav nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.nav .btn { padding: 9px 18px; font-size: .92rem; }
.logo { font-weight: 800; font-size: 1.35rem; letter-spacing: -.04em; text-decoration: none; }
.nav .logo, .nav nav a:not(.btn) { color: #fff; transition: color .25s; }
.nav nav a:not(.btn) { text-decoration: none; font-size: .92rem; font-weight: 650; }
.nav .logo span { color: var(--peach); }
.nav nav a:not(.btn):hover { color: var(--peach); }

.nav.is-scrolled { background: rgba(255, 255, 255, .94); border-color: var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nav.is-scrolled .logo, .nav.is-scrolled nav a:not(.btn) { color: var(--ink); }
.nav.is-scrolled .logo span, .nav.is-scrolled nav a:not(.btn):hover { color: var(--accent); }

/* menu button: only shown on phones */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer; color: #fff; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav.is-scrolled:not(.is-open) .nav-toggle { color: var(--ink); }

@media (max-width: 700px) {
  .nav { padding: 10px 20px; }
  .nav-toggle { display: inline-flex; }
  .nav nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    gap: 4px; padding: 8px 20px 20px; background: rgba(15, 25, 42, .97); }
  .nav.is-open nav { display: flex; }
  .nav nav a:not(.btn) { color: #fff !important; font-size: 1rem; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .nav nav .btn { margin-top: 10px; text-align: center; padding: 13px 18px; }
  /* open menu: navy bar with white logo and an X, even after scrolling */
  .nav.is-open, .nav.is-open.is-scrolled { background: rgba(15, 25, 42, .97); border-color: transparent; }
  .nav.is-open .logo, .nav.is-open.is-scrolled .logo, .nav.is-open .nav-toggle { color: #fff; }
  .nav.is-open .logo span, .nav.is-open.is-scrolled .logo span { color: var(--peach); }
  .nav.is-open .nav-toggle span { background: transparent; }
  .nav.is-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }
}

/* ===== 5. Hero ===== */
.hero { color: #fff; background:
    linear-gradient(90deg, rgba(15,25,42,.88) 0%, rgba(15,25,42,.55) 40%, rgba(15,25,42,0) 75%),
    var(--hero-img) 70% 50% / cover no-repeat,
    var(--grad); }
.hero-inner { display: flex; align-items: center; min-height: 100vh; min-height: 100svh;
  padding-top: calc(var(--header-h) + 40px); padding-bottom: 64px; }
.hero-copy { max-width: 620px; }

.hero .eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; color: var(--peach);
  font-size: .78rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.hero .eyebrow::before { content: ""; flex: none; width: 36px; height: 2px; background: var(--peach); }
.hero h1 { font-family: var(--font); font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.04;
  letter-spacing: -.045em; font-weight: 700; margin: 0 0 22px; text-wrap: balance; }
.hero h1 strong { display: block; font-weight: 700; color: var(--peach); }
.hero .hero-sub { text-wrap: balance; max-width: 31em; margin: 0 0 34px; color: #dbe2ea; font-size: 1.15rem; line-height: 1.6; }

.hero .actions { margin-top: 0; gap: 14px; }
.hero .actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; font-size: 1rem; }
.hero .btn-light { background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid rgba(255, 255, 255, .7);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.hero .btn-light:hover { background: rgba(255, 255, 255, .22); filter: none; }

.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, .2); }
.hero-facts li { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: #cfd8e3; }
.hero-facts svg { flex: none; color: var(--peach); }

@media (min-width: 701px) { .hero .eyebrow { white-space: nowrap; } }
/* tablets: darker overlay so text stays readable over the photo */
@media (min-width: 701px) and (max-width: 1000px) {
  .hero { background:
    linear-gradient(180deg, rgba(15,25,42,.35) 0%, rgba(15,25,42,.9) 100%),
    var(--hero-img) 68% 40% / cover no-repeat,
    var(--grad); }
}
@media (max-width: 700px) {
  .hero { background:
    linear-gradient(180deg, rgba(15,25,42,.3) 0%, rgba(15,25,42,.88) 100%),
    var(--hero-img) 68% 40% / cover no-repeat,
    var(--grad); }
  .hero-inner { padding-top: calc(var(--header-h) + 32px); padding-bottom: 48px; }
  .hero .eyebrow { font-size: .72rem; letter-spacing: .14em; gap: 10px; margin-bottom: 16px; }
  .hero .eyebrow::before { width: 24px; }
  .hero h1 { margin-bottom: 16px; }
  .hero .hero-sub { font-size: 1.05rem; margin-bottom: 26px; }
  .hero .actions { gap: 10px; }
  .hero .actions .btn { flex: 1 1 150px; gap: 8px; padding: 14px 12px; font-size: .95rem; white-space: nowrap; }
  .hero-facts { flex-direction: column; gap: 10px; margin-top: 30px; padding-top: 18px; }
}
@media (max-width: 380px) { .hero .actions .btn { flex-basis: 100%; } }

/* ===== Shared header pattern: pill + heading on the left, text + button + arrows on the right ===== */
.testi { padding: 75px 0; overflow: hidden; --edge: max(24px, calc((100% - 1100px) / 2 + 24px)); }
.testi-head { padding-block: 0 32px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: end; }
.testi-head h2 { margin: 14px 0 0; }
.testi-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font-size: .85rem; font-weight: 650; }
.testi-side p { margin: 0 0 18px; color: var(--muted); max-width: 440px; }
.testi-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.testi-controls .btn { padding: 10px 18px; font-size: .92rem; border-radius: 8px; }
.testi-arrows { display: inline-flex; gap: 10px; }
.testi-arrows button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #5b5f66; color: #fff; font-size: 1.6rem; line-height: 1;
  padding: 0 0 3px; cursor: pointer; }
.testi-arrows button:disabled { opacity: .35; cursor: default; }
@media (max-width: 860px) { .testi-head { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 700px) { .testi { padding: 55px 0; } }

/* ===== 6. Free consultation: stacked step cards (text and colour overlay sit on the photo) ===== */
.stack { --H: 400px; --peek: 22px; position: relative; height: calc(var(--H) + 4 * var(--peek)); outline-offset: 6px; }
.sc { position: absolute; left: 0; right: 0; bottom: 0; height: var(--H); overflow: hidden; color: #fff;
  background: var(--grad) center / cover no-repeat; border-radius: 14px; box-shadow: 0 10px 34px rgba(23, 36, 58, .18);
  transform: translateY(calc(var(--d, 0) * var(--peek) * -1)); z-index: calc(10 - var(--d, 0));
  transition: transform .6s cubic-bezier(.22, .8, .3, 1), opacity .45s ease; }
/* colour overlay: brand navy fading from the text side into the photo */
/* each card's photo and crop; --mpos is the crop used on phones */
.sc-1 { background-image: var(--pkg1); background-position: 50% 60%; --mpos: 50% 60%; }
.sc-2 { background-image: var(--hero-img); background-size: auto 330%; background-position: 86% 58%; --mpos: 88% 58%; }
.sc-3 { background-image: var(--pkg3); background-position: 50% 68%; --mpos: 50% 68%; }
.sc-4 { background-image: var(--hero-img); background-size: auto 260%; background-position: 0% 62%; --mpos: 72% 62%; }
.sc-5 { background-image: var(--lake); background-size: auto 190%; background-position: 62% 72%; --mpos: 62% 72%; }
.sc::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(23, 36, 58, .92) 0%, rgba(23, 36, 58, .72) 35%, rgba(23, 36, 58, .2) 70%, rgba(23, 36, 58, 0) 100%); }
/* cards stacked behind are dimmed a little for depth */
.sc::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(23, 36, 58, 0); transition: background .45s ease; }
.sc.is-behind::after { background: rgba(23, 36, 58, .3); }
.sc.is-behind { cursor: pointer; }
.sc.is-next { transform: translateY(80px); opacity: 0; pointer-events: none; }
.sc.is-far { opacity: 0; pointer-events: none; }
.sc-num { position: absolute; z-index: 1; top: 28px; left: 44px; font-size: 4.5rem; line-height: 1; font-weight: 300; color: rgba(255, 255, 255, .4); }
.sc-tag { position: absolute; z-index: 1; top: 24px; right: 24px; padding: 7px 14px; border-radius: 999px; font-size: .85rem; font-weight: 650;
  background: rgba(23, 36, 58, .6); border: 1px solid rgba(255, 255, 255, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sc-text { position: absolute; z-index: 1; left: 44px; bottom: 40px; width: min(480px, 52%); }
.sc-text h3 { margin: 0 0 12px; font-size: 1.75rem; line-height: 1.2; letter-spacing: -.03em; }
.sc-text h3 em { font-style: normal; color: var(--peach); }
.sc-text p { margin: 0; font-size: .95rem; color: #e3e8ee; }
.stack-count { align-self: center; margin-right: 6px; font-size: .9rem; font-weight: 650; color: var(--muted); }
@media (max-width: 860px) {
  .sc-num { left: 28px; font-size: 3.6rem; }
  .sc-text { left: 28px; bottom: 30px; width: min(480px, 64%); }
  .sc-text h3 { font-size: 1.45rem; }
}
@media (max-width: 700px) {
  .stack { --H: 400px; --peek: 16px; }
  .sc { background-position: var(--mpos, 50% 50%) !important; }   /* each card sets its phone crop in --mpos */
  .sc::before { background: linear-gradient(to top, rgba(23, 36, 58, .94) 0%, rgba(23, 36, 58, .75) 45%, rgba(23, 36, 58, .15) 80%, rgba(23, 36, 58, 0) 100%); }
  .sc-num { top: 18px; left: 20px; font-size: 2.6rem; }
  .sc-tag { top: 18px; right: 16px; }
  .sc-text { left: 20px; right: 20px; bottom: 22px; width: auto; }
  .sc-text h3 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { .sc { transition: none; } }

/* ===== 7. Packages: photo cards ===== */
.pkg-wrap { position: relative; margin-top: 28px; }
.pkg-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pkg-track::-webkit-scrollbar { display: none; }
.pkg { position: relative; flex: 0 0 calc((100% - 36px) / 3); min-width: 260px; aspect-ratio: 3 / 4; scroll-snap-align: start;
  border-radius: 10px; overflow: hidden; color: #fff; text-decoration: none; background: var(--grad); display: block; }
.pkg-img { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform .5s ease; }
.pkg-img-1 { background-image: var(--pkg1); }
.pkg-img-2 { background-image: var(--pkg2); }
.pkg-img-3 { background-image: var(--pkg3); }
.pkg:hover .pkg-img, .pkg:focus-visible .pkg-img { transform: scale(1.04); }
.pkg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, 0) 40%); pointer-events: none; }
.pkg-pill { position: absolute; z-index: 1; top: 20px; left: 20px; padding: 7px 16px; border-radius: 999px; font-weight: 650; font-size: .95rem;
  background: rgba(23, 36, 58, .9); border: 1px solid rgba(255, 255, 255, .85); }
.pkg-text { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 20px; display: block; }
.pkg-title { display: block; font-size: 1.4rem; font-weight: 750; line-height: 1.2; }
.pkg-sub { display: block; margin-top: 4px; font-size: .88rem; color: #e3e8ee; }
.pkg-next { position: absolute; z-index: 2; top: 50%; right: -14px; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: #fff; color: var(--accent); font-size: 2rem; line-height: 1; padding: 0 0 4px 3px; cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
@media (max-width: 700px) { .pkg { flex-basis: 78%; } .pkg-next { right: 6px; } }

/* ===== 8. Section backgrounds (bands) ===== */
.band, .testi-alt, .contact-band { border-block: 1px solid var(--line); }
/* faint blueprint grid on a cool tint */
.band-grid { background-color: #eef2f6;
  background-image: linear-gradient(rgba(23, 36, 58, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 36, 58, .055) 1px, transparent 1px);
  background-size: 32px 32px; }
/* soft dot texture on a warm tint */
.band-dots { background-color: #f2ede5;
  background-image: radial-gradient(rgba(23, 36, 58, .12) 1px, transparent 1.3px);
  background-size: 20px 20px; }
.testi-alt { background: #fff; }
.contact-band { background: #ecf0f3; }

/* ===== 9. Testimonials: carousel ===== */
.testi-track { display: flex; gap: 18px; overflow-x: auto; padding-inline: var(--edge); scroll-padding-inline: var(--edge);
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.testi-track::-webkit-scrollbar { display: none; }
.tc { position: relative; flex: 0 0 270px; aspect-ratio: 4 / 5; margin: 0; scroll-snap-align: start; border-radius: 12px; overflow: hidden; color: #fff;
  background: linear-gradient(150deg, var(--c1), var(--c2)); }
.tc-avatar { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(15, 25, 42, .42); }
.tc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, 0) 52%); }
.tc blockquote { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 62px; margin: 0; font-size: .92rem; font-weight: 600; line-height: 1.4; }
.tc figcaption { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.tc-tag { font-size: .72rem; font-weight: 800; letter-spacing: .12em; opacity: .9; }
.tc-who { display: flex; flex-direction: column; text-align: right; font-size: .72rem; line-height: 1.35; }
.tc-who strong { font-size: .85rem; }
.tc-who span { opacity: .85; }
.testi-note { padding-block: 22px 0; margin-inline: auto; }
@media (max-width: 700px) { .tc { flex-basis: 74%; } }

/* ===== 10. Video: one big blank card ===== */

.vbig { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; max-height: 80vh;
  border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(150deg, #f4f1ec, #e9e5de); color: var(--muted); font: inherit; cursor: default; }
.vbig[data-video]:not([data-video=""]) { cursor: pointer; }
.vbig-play { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--ink); color: #fff; padding-left: 4px; }
.vbig-label { position: absolute; left: 24px; bottom: 20px; font-size: .95rem; font-weight: 650; }
@media (max-width: 700px) { .vbig { border-radius: 12px; } .vbig-play { width: 64px; height: 64px; } .vbig-label { left: 16px; bottom: 14px; } }

/* ===== 11. Enquiry form: split card, filled fields, service pills ===== */
.form-split { display: grid; grid-template-columns: .8fr 1.5fr; padding: 0; overflow: hidden; border-radius: 14px; }
.form-aside { background: var(--grad); color: #fff; padding: 40px 32px; }
.form-aside h3 { margin: 0 0 28px; font-size: 1.3rem; letter-spacing: -.02em; }
.steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; counter-reset: step; }
.steps-list li { position: relative; padding-left: 50px; counter-increment: step; }
.steps-list li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); display: grid; place-items: center; font-weight: 800; }
.steps-list strong { display: block; }
.steps-list span { display: block; margin-top: 2px; font-size: .9rem; color: #d8dfe8; }

.form { padding: 40px; }
.form .btn { margin: 22px 0 16px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.field-wide { grid-column: 1 / -1; }
.form label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.form input:not([type="radio"]), .form textarea { margin-top: 8px; padding: 14px 16px; background: #f6f4f0; border: 1.5px solid transparent; border-radius: 10px;
  color: var(--ink); font-weight: 500; letter-spacing: 0; text-transform: none; transition: background .15s, border-color .15s, box-shadow .15s; }
.form input::placeholder, .form textarea::placeholder { color: #9aa3af; font-weight: 400; }
.form input:not([type="radio"]):focus, .form textarea:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(200, 107, 66, .16); }

.pills { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; min-width: 0; }
.pills legend { padding: 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.form .pill { position: relative; display: inline-block; font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pill span { display: inline-block; padding: 11px 20px; border-radius: 999px; background: #f6f4f0; border: 1.5px solid transparent; font-weight: 650; transition: background .15s, color .15s; }
.pill:hover span { background: #ebe6dd; }
.pill input:checked + span { background: var(--ink); color: #fff; }
.pill input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (max-width: 860px) { .form-split { grid-template-columns: 1fr; } .form-aside { padding: 28px 24px; } .form-aside h3 { margin-bottom: 20px; } }
@media (max-width: 700px) { .form { padding: 24px 20px; } .fields { grid-template-columns: 1fr; } }

/* ===== 12. FAQ, contact, footer, thank-you page ===== */
.faq { max-width: 760px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 24px; margin-top: 14px; }
.faq summary { cursor: pointer; font-weight: 750; padding: 10px 0; margin: -10px 0; }   /* bigger tap area */
.faq p { margin: 12px 0 0; color: var(--muted); }

.contact-band .actions { margin: 24px 0 18px; }
.contact-band .btn { padding: 12px 18px; font-weight: 700; }
.contact-band .btn-outline { border-color: #bac5ce; }
.contact-band .small { margin: 0; }

.footer { background: var(--ink); color: #d4dce6; font-size: .9rem; }
.footer .container { padding-block: 25px; }
.thanks { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; }

/* ===== 13. Pop-ups ===== */
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(8, 14, 25, .88); animation: lb-fade .2s ease; }
.lightbox-body { width: min(960px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lightbox-body video, .lightbox-body iframe { display: block; width: 100%; height: 100%; border: 0; }
.lightbox-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.lightbox-close:hover { background: rgba(255, 255, 255, .28); }
body.lightbox-open { overflow: hidden; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lightbox { animation: none; } }

/* brochure form */
.modal-card { position: relative; width: min(440px, 100%); max-height: 100%; overflow-y: auto; background: #fff; border-radius: 14px; padding: 32px 28px 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.modal-card h2 { font-size: 1.6rem; margin-bottom: 8px; }
.modal-card > div > .muted { margin: 0 0 20px; }
.modal-card form label { display: block; font-size: .9rem; font-weight: 700; margin-bottom: 14px; }
.modal-card .btn { width: 100%; text-align: center; margin-top: 4px; }
.modal-card .notice { margin-top: 14px; }
.modal-card .form-error { margin: 0 0 12px; }
.modal-close { top: 10px; right: 10px; background: rgba(23, 36, 58, .08); color: var(--ink); }
.modal-close:hover { background: rgba(23, 36, 58, .16); }