/* ============================================================
   BonVoyage — composite design system
   Palette, type and logo: BonVoyage_Brand_Business_Playbook.docx
   Structure: one signature component borrowed from each of the
   eight directions in "BonVoyage Store Directions". Each borrowed
   device owns ONE job so none of them compete. Source is marked
   on every block as [A]…[H].
   ------------------------------------------------------------
   [A] Watercolor Postcard .... wash blobs + category mosaic
   [B] Boarding Pass .......... ticket card: notch, perforation, barcode
   [C] Sky Editorial .......... 88px display type + hairline rules
   [D] Map & Stamp ............ flightpath progress line
   [E] Gallery Catalog ........ colour groups (Core / Limited)
   [F] Flight Kit Story ....... kit list (bundle builder)
   [G] Color Studio ........... tinted section bands + named swatches
   [H] Trip Concierge ......... trip chips + the "ask" panel
   ============================================================ */

:root{
  /* playbook palette — unchanged */
  --tangerine:#FEBE64;
  --tangerine-deep:#F0A93F;
  --tangerine-ink:#6F4408;   /* 5.09:1 on --tangerine; #8F5A10 measured 3.51 */
  --canvas:#FDFEFE;
  --sky:#A4CED7;
  --sky-ink:#1F4854;
  --charcoal:#3D3D3D;
  --ink:#2A2A2A;
  --gray:#F2F2F2;
  --muted:#6B6B6B;            /* 4.76:1 at worst; #7A7A7A measured 3.83 on --gray */
  --success:#5BA572;
  --success-ink:#2F6B44;
  --warning:#E8A53D;
  --warning-ink:#5E3D00;     /* 4.61:1 on --warning; #8A5A00 measured 2.79 */

  /* [G] the three section tints */
  --tint-tan:#FEF3E2;
  --tint-sky:#EDF6F8;
  --tint-gray:#F4F4F4;

  /* [C] hairline rules replace boxes */
  --hair:#E4E4E4;
  --hair-strong:#C9C9C9;

  /* geometry: [C] near-square base, [G] 10px cards, pills only for navigation */
  --r-0:0px; --r-1:4px; --r-btn:6px; --r-card:10px; --r-pill:999px;
  --shell:1240px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:Outfit,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.7;font-weight:400;
}
img{max-width:100%;display:block}
a{color:var(--sky-ink)}
p{margin:0}
:focus-visible{outline:3px solid var(--sky-ink);outline-offset:2px;border-radius:var(--r-1)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- [C] editorial type spine ----------
   h1-display goes to 88px, which is the playbook's own Heading 1 spec.
   Prose caps at 66ch so long-form copy stays readable. */
h1,h2,h3,h4{color:var(--charcoal);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.015em}
h1{font-size:clamp(34px,7vw,72px);line-height:1.02}
.h1-display{font-size:clamp(40px,8vw,88px);line-height:1.0;letter-spacing:-.025em}
h2{font-size:clamp(26px,4.4vw,44px);line-height:1.08}
h3{font-size:clamp(19px,2.2vw,24px);line-height:1.22}
h4{font-size:17px;line-height:1.34}
.lede{font-size:clamp(17px,1.9vw,21px);line-height:1.6;max-width:62ch}
.prose{max-width:66ch}
.cap{color:var(--muted);font-size:14px}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tangerine-ink)}
.eyebrow-sky{color:var(--sky-ink)}
.rule{height:1px;background:var(--hair);border:0;margin:0}
.rule-strong{height:1px;background:var(--hair-strong);border:0;margin:0}
.link-more{font-weight:600;color:var(--charcoal);text-underline-offset:4px}

/* ---------- shell + [G] tinted bands ----------
   Colour blocking gives section rhythm, so sections need no borders. */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:18px}
.band{padding-block:clamp(40px,5.4vw,76px)}
.band-tight{padding-block:clamp(26px,3.2vw,44px)}
.band-tan{background:var(--tint-tan)}
.band-sky{background:var(--tint-sky)}
.band-gray{background:var(--tint-gray)}
.stack{display:flex;flex-direction:column;gap:14px}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin-bottom:24px}
.row2{display:grid;gap:16px;grid-template-columns:1fr}

/* ---------- [A] watercolour wash blobs ----------
   The playbook names these an approved motif "used sparingly,
   never as the dominant hero element" — so they sit behind content only. */
.wash{position:absolute;z-index:0;pointer-events:none;filter:blur(3px);opacity:.7}
.wash-t{background:radial-gradient(circle at 38% 36%,rgba(254,190,100,.6),rgba(254,190,100,.02) 70%);
  border-radius:62% 38% 47% 53%/55% 44% 56% 45%}
.wash-s{background:radial-gradient(circle at 58% 42%,rgba(164,206,215,.6),rgba(164,206,215,.02) 72%);
  border-radius:41% 59% 63% 37%/47% 39% 61% 53%}

/* ---------- buttons: [C] crisp geometry, not pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 26px;
  border:1.5px solid transparent;border-radius:var(--r-btn);background:var(--tangerine);color:var(--ink);
  font:inherit;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .18s,border-color .18s}
.btn:hover{background:var(--tangerine-deep)}
.btn-quiet{background:transparent;border-color:var(--charcoal);color:var(--charcoal)}
.btn-quiet:hover{background:var(--gray)}
.btn-sky{background:var(--sky);color:var(--sky-ink)}
.btn-sky:hover{background:#8fc2cd}
.btn-ink{background:var(--charcoal);color:var(--canvas)}
.btn-ink:hover{background:var(--ink)}
.btn-sm{min-height:42px;padding:9px 18px;font-size:15px}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{background:var(--gray);color:var(--muted);cursor:not-allowed}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 10px;border-radius:var(--r-1);background:var(--tangerine);color:var(--tangerine-ink)}
.badge-sky{background:var(--sky);color:var(--sky-ink)}
.badge-soft{background:var(--gray);color:var(--charcoal)}
.badge-sale{background:var(--tint-tan);color:var(--tangerine-ink)}
.badge-out{background:transparent;border:1px solid var(--hair-strong);color:var(--muted)}

/* ---------- [H] trip chips + [C] filter pills ----------
   Pills are reserved for navigation, so they never read as a CTA. */
.chip{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:8px 16px;border-radius:var(--r-pill);
  border:1.5px solid var(--hair);background:var(--canvas);color:var(--charcoal);font:inherit;font-weight:600;
  font-size:15px;cursor:pointer;text-decoration:none;white-space:nowrap}
.chip:hover{border-color:var(--sky-ink);background:var(--tint-sky);color:var(--sky-ink)}
.chip[aria-pressed=true],.chip[aria-current=true],.chip[aria-current=page]{background:var(--sky);border-color:var(--sky-ink);color:var(--sky-ink);font-weight:700}
/* .qlist — when a link label is a whole question it is not a chip. Same
   hairline language as the rest of the system, and it wraps without deforming. */
.qlist{display:flex;flex-direction:column;list-style:none;padding:0;margin:0}
.qlist a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-block:13px;border-top:1px solid var(--hair);text-decoration:none;
  color:var(--charcoal);font-weight:600;font-size:15px;line-height:1.35}
.qlist li:first-child a{border-top:0}
.qlist a:hover{color:var(--sky-ink)}
.qlist svg{flex:none;color:var(--muted)}
.qlist a:hover svg{color:var(--sky-ink)}
.chiprow{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.chiprow>*{flex:none}
.trip-chip{display:flex;flex-direction:column;gap:1px;align-items:flex-start;min-width:170px;
  padding:13px 18px;border-radius:var(--r-card);border:1.5px solid var(--hair);background:var(--canvas);text-decoration:none}
.trip-chip:hover{border-color:var(--sky-ink);background:var(--tint-sky)}
.trip-chip b{color:var(--charcoal);font-size:16px}
.trip-chip span{font-size:13px;color:var(--muted)}

/* ---------- product photo placeholders ---------- */
.ph{position:relative;display:grid;place-items:center;aspect-ratio:1/1;overflow:hidden;
  background:linear-gradient(145deg,var(--tint-sky),var(--tint-gray) 58%,var(--tint-tan));color:var(--sky-ink)}
.ph svg{width:34%;height:34%;opacity:.42}
/* real product photography sits in the same box as the placeholder */
/* The image is pinned to the tile rather than sized in percentages. .ph is a
   centred grid, so a grid item is laid out at its NATURAL size and height:100%
   has no definite row to resolve against — a square photo in a 4/3 tile then
   overflowed and got clipped. Product cards only looked right by luck, being
   square images in square boxes. inset:0 gives the image a definite box at any
   aspect ratio, and object-fit letterboxes inside it. */
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.ph-plain{background:var(--canvas);border:1px solid var(--hair)}
.ph-plain img{padding:8%}
/* only for photography whose edges are scenery, never for a product on white */
.ph-cover img{object-fit:cover;padding:0}
.ph-wide{aspect-ratio:16/10}
.ph-lab{position:absolute;bottom:8px;left:8px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);background:rgba(253,254,254,.88);padding:3px 8px}

/* ---------- product card: [C] no box, hairline under the image ---------- */
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.rail>*{flex:0 0 244px;scroll-snap-align:start;height:auto}
.rail{scroll-padding-inline:2px}
.grid-p{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:26px 18px}
.pcard{display:flex;flex-direction:column;gap:7px;text-decoration:none;color:inherit;height:100%}
.pcard h3{min-height:2.6em}
.pcard .btn{margin-top:auto}
.pcard .ph{margin-bottom:6px}
.pcard .btn{background:var(--tangerine);border-color:var(--tangerine);color:var(--ink);font-weight:600}
.pcard .btn:hover{background:var(--tangerine-deep);border-color:var(--tangerine-deep);color:var(--ink)}
.pcard-flags{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;z-index:2}
.pcard h3{font-size:16px;font-weight:600;color:var(--charcoal);line-height:1.3}
.price{font-weight:700;color:var(--charcoal);font-variant-numeric:tabular-nums}
.was{color:var(--muted);font-weight:500;text-decoration:line-through;margin-left:6px;font-size:14px}
.rate{display:flex;align-items:center;gap:5px;font-size:13.5px;color:var(--muted);font-weight:500}
.rate b{color:var(--charcoal);font-weight:700}
.rate svg{color:var(--warning);flex:none}
.stars{display:inline-flex;gap:1px;color:var(--warning)}

/* ---------- [G] named swatches ----------
   A colour dot plus its name. Unnamed dots are a top driver of
   colour-mismatch returns; naming them costs one line. */
.swatch-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.swatch{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--hair);flex:none;padding:0;cursor:pointer;
  position:relative}
/* 17px of paint, 44px of target. The dot is the design; the reach is not. */
.swatch::after{content:"";position:absolute;inset:-13.5px}
.swatch[aria-pressed=true],.swatch.on{outline:1.5px solid var(--charcoal);outline-offset:2px}
.swatch-lg{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--hair);padding:0;cursor:pointer}
.swatch-lg[aria-pressed=true]{outline:1.5px solid var(--charcoal);outline-offset:3px}
.swatch-name{font-size:13px;color:var(--muted);font-weight:600}

/* ---------- [E] colour groups: Core / Limited ----------
   Splitting permanent from seasonal colours sets the expectation
   that Limited runs out — without a countdown or a pressure banner. */
.cgroup{display:flex;flex-direction:column;gap:9px;padding:13px 15px;border-radius:var(--r-card)}
.cgroup-core{background:var(--tint-gray)}
.cgroup-limited{background:var(--tint-tan)}
.cgroup-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.cgroup-limited .cgroup-top{color:var(--tangerine-ink)}
.colorgroups{display:flex;flex-direction:column;gap:10px}

/* ---------- [B] boarding-pass ticket ----------
   Used ONLY where the page really is a ticket or receipt:
   order summaries, bundle kits. Never on product cards. */
.ticket{position:relative;background:var(--canvas);border:1.5px solid var(--hair);border-radius:var(--r-card);
  --notch:var(--tint-gray)}
.ticket-on-canvas{--notch:var(--canvas)}
.ticket-on-sky{--notch:var(--tint-sky)}
.ticket-hd{padding:18px 20px 14px}
.ticket-bd{padding:16px 20px 20px}
/* the tear line: two punched notches joined by a dashed perforation */
.perf{position:relative;height:0;border-top:1.5px dashed var(--hair);margin-inline:20px}
.perf::before,.perf::after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;
  background:var(--notch);border:1.5px solid var(--hair)}
.perf::before{left:-31px;clip-path:inset(0 0 0 50%)}
.perf::after{right:-31px;clip-path:inset(0 50% 0 0)}
.barcode{height:34px;background-image:repeating-linear-gradient(90deg,
  var(--charcoal) 0 2px, transparent 2px 4px, var(--charcoal) 4px 5px, transparent 5px 9px,
  var(--charcoal) 9px 12px, transparent 12px 14px);opacity:.82}
.barcode-thin{height:22px}
.ticket-code{font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}

/* ---------- [D] flightpath progress ----------
   A dotted route with a plane on it. Does the work of a progress bar
   for checkout steps and the free-shipping threshold. */
.flightpath{position:relative;height:26px;margin-block:6px}
.flightpath::before{content:"";position:absolute;left:0;right:0;top:12px;border-top:2px dotted var(--sky)}
.flightpath-done{position:absolute;left:0;top:12px;border-top:2px solid var(--tangerine-deep)}
.flightpath .plane{position:absolute;top:2px;width:22px;height:22px;color:var(--tangerine-deep);
  transform:translateX(-50%);background:var(--canvas)}
.flightpath .pin{position:absolute;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--canvas);border:2px solid var(--sky);transform:translateX(-50%)}
.flightpath .pin.done{border-color:var(--tangerine-deep);background:var(--tangerine-deep)}
.flightpath-marks{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}

/* [D] steprail — the same route line, used for checkout steps */
.steprail{display:flex;gap:4px;list-style:none;padding:0;margin:0;overflow-x:auto;font-size:13.5px}
.steprail li{flex:none;display:flex;align-items:center;gap:7px;color:var(--muted);font-weight:600;white-space:nowrap}
.steprail li::after{content:"";width:28px;border-top:2px dotted var(--sky);margin-inline:8px}
.steprail li:last-child::after{display:none}
.steprail .step-n{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;background:var(--gray);color:var(--muted)}
.steprail li.done{color:var(--charcoal)}
.steprail li.done .step-n{background:var(--success);color:#fff}
.steprail li.done::after{border-top-style:solid;border-color:var(--tangerine-deep)}
.steprail li.on{color:var(--sky-ink)}
.steprail li.on .step-n{background:var(--sky-ink);color:#fff}

/* ---------- [F] kit list (bundle builder) ----------
   The playbook asks for three named kits. This shows what's inside
   each one as a checklist, not a paragraph. */
.kits{display:grid;gap:18px;grid-template-columns:1fr}
.kit{display:flex;flex-direction:column;gap:12px;background:var(--canvas);
  border:1.5px solid var(--hair);border-radius:var(--r-card);padding:20px}
.kit-lead{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.kit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.kit-item{display:flex;gap:10px;align-items:center;padding-block:9px;border-bottom:1px solid var(--hair);font-size:14.5px}
.kit-item:last-child{border-bottom:0}
.kit-item svg{flex:none;color:var(--success)}
.kit-item span{flex:1}
.kit-item b{color:var(--charcoal);font-weight:600}
.kit-item em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.kit-total{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.kit-total .price{font-size:21px}

/* ---------- [A] category mosaic ----------
   Unequal tiles for unequal categories. Seven categories do not
   divide neatly into a uniform grid, and a mosaic admits that. */
.mosaic{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
.tile{position:relative;display:block;text-decoration:none;color:inherit;overflow:hidden;background:var(--canvas)}
.tile .ph{aspect-ratio:1/1;background:var(--canvas);border:1px solid var(--hair)}
.tile .ph img{object-fit:contain;padding:7%}
.tile-cap{padding:12px 2px 4px}
.tile-cap h3{font-size:17px}
.tile-cap p{font-size:13.5px;color:var(--muted);margin-top:2px}

/* ---------- [H] the "ask" panel ----------
   A concierge block that answers the trip-deadline anxiety the
   playbook names as the top pre-purchase objection. */
.ask{display:flex;flex-direction:column;gap:13px;background:var(--tint-sky);border-radius:var(--r-card);padding:20px 22px}
.ask h3{color:var(--sky-ink)}
.ask-q{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--sky-ink)}
.ask-q svg{flex:none;margin-top:4px}
.ask-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px;color:var(--sky-ink)}

/* ---------- header / footer ---------- */
.ann{background:var(--sky);color:var(--sky-ink);font-size:13.5px;font-weight:600;text-align:center;padding:9px 18px}
.ann a{color:inherit}
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(253,254,254,.97);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.hdr-in{display:flex;align-items:center;gap:10px;min-height:66px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:21px;
  letter-spacing:-.02em;flex:none}
.brand svg{color:var(--tangerine-deep)}
/* The real lockup, from HQ. Sized by height because the artwork is landscape:
   setting a width would let a long viewport stretch it vertically. */
.brand-logo{height:44px;width:auto;display:block}
.ftr .brand-logo{height:54px}
@media (max-width:640px){.brand-logo{height:36px}}
.brand .b1{color:var(--charcoal)}
.brand .b2{color:var(--tangerine-deep)}
.nav{display:none;gap:2px;margin-inline:auto}
.nav a{color:var(--charcoal);text-decoration:none;font-weight:600;font-size:15px;padding:10px 12px;
  border-radius:var(--r-1);display:inline-flex;align-items:center;min-height:44px}
.nav a:hover{background:var(--gray)}
.hdr-act{display:flex;align-items:center;gap:4px;margin-left:auto}
.iconbtn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:0;background:transparent;border-radius:var(--r-1);color:var(--charcoal);font:inherit;font-weight:600;
  cursor:pointer;padding:0 8px;text-decoration:none}
.iconbtn:hover{background:var(--gray)}
.cart-pip{background:var(--tangerine);color:var(--ink);font-size:12px;font-weight:700;min-width:21px;height:21px;
  border-radius:var(--r-pill);display:inline-grid;place-items:center;padding:0 5px}
.crumbs{font-size:13.5px;color:var(--muted);padding-block:12px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--charcoal);font-weight:600}

.ftr{background:var(--charcoal);color:var(--canvas);padding-block:clamp(34px,4vw,56px) 24px}
.ftr h3{color:var(--canvas);font-size:13.5px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:10px}
.ftr a{color:#EDEDED;text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr-grid{display:grid;gap:28px;grid-template-columns:1fr}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ftr li a{display:inline-flex;align-items:center;min-height:38px;font-size:15px}
.pay{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.pay li{border:1px solid #6A6A6A;border-radius:var(--r-1);padding:5px 10px;font-size:11.5px;
  font-weight:700;letter-spacing:.05em;color:#EDEDED}
.ftr-base{border-top:1px solid #565656;margin-top:28px;padding-top:18px;display:flex;flex-wrap:wrap;
  gap:8px 20px;justify-content:space-between;font-size:13.5px;color:#D6D6D6}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-weight:600;font-size:14.5px;color:var(--charcoal)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;
  border:1.5px solid var(--hair);border-radius:var(--r-1);font:inherit;font-size:16px;color:var(--ink);background:var(--canvas)}
.field input::placeholder{color:#A9A9A9}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sky-ink);outline:none;
  box-shadow:0 0 0 3px var(--tint-sky)}
.help{font-size:13px;color:var(--muted)}
.checkrow{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;cursor:pointer}
.checkrow input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--sky-ink)}
.radiocard{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--hair);
  border-radius:var(--r-card);padding:15px;cursor:pointer;background:var(--canvas)}
.radiocard:has(input:checked){border-color:var(--sky-ink);background:var(--tint-sky)}
.radiocard input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--sky-ink)}

/* ---------- panels, trust, accordions ---------- */
.panel{border:1.5px solid var(--hair);border-radius:var(--r-card);padding:20px;background:var(--canvas)}
.panel-quiet{background:var(--tint-gray);border-color:transparent}
.trust{display:grid;gap:16px;grid-template-columns:1fr;list-style:none;padding:0;margin:0}
.trust li{display:flex;gap:11px;align-items:flex-start}
.trust svg{flex:none;margin-top:3px;color:var(--sky-ink)}
.trust b{display:block;color:var(--charcoal);font-weight:600}
.trust span{font-size:14px;color:var(--muted)}
.acc{border-top:1px solid var(--hair)}
.acc:last-of-type{border-bottom:1px solid var(--hair)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:60px;
  padding-block:14px;cursor:pointer;font-weight:600;font-size:17px;color:var(--charcoal);list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:23px;font-weight:400;color:var(--muted);line-height:1}
.acc[open] summary::after{content:"\2013"}
.acc-body{padding-bottom:18px;display:flex;flex-direction:column;gap:12px}
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th,.spec td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
.spec th{color:var(--muted);font-weight:500;width:42%}
.spec td{font-weight:600;color:var(--charcoal);font-variant-numeric:tabular-nums}
.table-scroll{overflow-x:auto}
.note{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-1);padding:13px 15px;font-size:14.5px}
.note svg{flex:none;margin-top:3px}
.note-sky{background:var(--tint-sky);color:var(--sky-ink)}
.note-ok{background:#ECF6EF;color:var(--success-ink)}
.note-warn{background:var(--tint-tan);color:var(--warning-ink)}

/* ---------- totals ---------- */
.totals{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.totals li{display:flex;justify-content:space-between;gap:14px;font-size:15px;font-variant-numeric:tabular-nums}
.totals li span:last-child{font-weight:600;color:var(--charcoal)}
.totals .save span:last-child,.totals .free span:last-child{color:var(--success-ink)}
.totals .grand{border-top:1px solid var(--hair);padding-top:12px;margin-top:3px;font-size:19px;
  font-weight:700;color:var(--charcoal)}
.totals .grand span:last-child{font-size:22px}

/* ---------- provenance ribbon ---------- */
.map{background:var(--ink);color:#F5F5F5;font-size:12.5px;line-height:1.55;padding:10px 18px}
.map b{color:var(--tangerine)}
.src{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;background:var(--tangerine);
  color:var(--ink);padding:1px 6px;border-radius:var(--r-1);vertical-align:middle;margin-left:6px}

/* ---------- responsive ---------- */
@media (min-width:640px){
  .row2{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr 1fr}
  .kits{grid-template-columns:repeat(3,1fr)}
  .mosaic{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  .shell{padding-inline:28px}
  .nav{display:flex}
  .trust{grid-template-columns:repeat(4,1fr)}
  .ftr-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .mosaic{grid-template-columns:repeat(4,1fr)}
}
/* ============================================================
   MOTION — restrained, and tied to the brand's own metaphor.
   Two devices only: a lift on anything pressable, and a
   departure nudge on primary CTAs. Nothing bounces; the voice
   is cheerful, not hyperactive.
   Everything below is progressive: the page is fully visible
   and usable with JS off and with reduced motion on.
   ============================================================ */

/* pressable lift */
.btn{transition:background .18s ease,border-color .18s ease,transform .14s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(42,42,42,.12)}
.btn:active{transform:translateY(0);box-shadow:none}
.chip,.trip-chip,.swatch,.swatch-lg,.size,.iconbtn{transition:background .16s ease,border-color .16s ease,transform .14s ease,outline-color .16s ease}
.trip-chip:hover{transform:translateY(-2px)}
.pcard .ph{transition:transform .35s ease}
.pcard:hover .ph{transform:scale(1.02)}
.tile .ph{transition:transform .4s ease}
.tile:hover .ph{transform:scale(1.03)}

/* [D] departure nudge — the glyph leaves, like the plane does */
.btn .go{display:inline-block;transition:transform .2s ease}
.btn:hover .go{transform:translateX(4px)}

/* scroll reveal — only armed once JS adds .reveal-on to <html> */
.reveal-on [data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.reveal-on [data-reveal].in{opacity:1;transform:none}
.reveal-on [data-reveal][data-delay="1"]{transition-delay:.07s}
.reveal-on [data-reveal][data-delay="2"]{transition-delay:.14s}
.reveal-on [data-reveal][data-delay="3"]{transition-delay:.21s}

/* [D] scroll progress as a flightpath — the plane crosses as you read */
.scrollpath{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.scrollpath-line{position:absolute;inset:0;border-top:2px dotted var(--sky);opacity:.55}
.scrollpath-done{position:absolute;left:0;top:0;height:0;border-top:3px solid var(--tangerine-deep);width:0}
.scrollpath-plane{position:absolute;top:-8px;left:0;width:17px;height:17px;color:var(--tangerine-deep);transform:translateX(-50%)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal-on [data-reveal]{opacity:1!important;transform:none!important}
  .scrollpath{display:none}
}


/* ============================================================
   Layout corrections
   ============================================================ */

/* [A] mosaic — a tile spanning two columns is twice as WIDE, so a
   4:3 image makes it twice as TALL, and the grid row stretches to
   match it. That is what left the hole under the short tiles.
   Twice the width at the same height is 8:3, so the row evens out
   and the seven tiles fill two rows of four exactly. */
@media (min-width:900px){
}

/* [H] trip chips — a picture of the trip reads faster than its name.
   Kept small on purpose: this row qualifies the visitor, it does not
   sell to them. The best-seller row below is where photography wins. */
.trip-chip{flex:0 0 200px;width:200px;min-width:0;padding:10px 10px 14px;gap:0}
.trip-chip img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:calc(var(--r-card) - 4px);margin-bottom:10px;background:var(--tint-gray);
  transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
.trip-chip:hover img{transform:scale(1.04)}
.trip-chip b{padding-inline:4px}
.trip-chip span{padding-inline:4px}
.trip-chip{overflow:hidden}

/* Horizontal rails scroll by swipe, arrow key and autoplay — the native
   scrollbar adds nothing but a grey slab under every row. Hidden, not
   disabled: touch, trackpad and keyboard all still work. */
.rail,.chiprow,.reels,.thumbs{scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar,
.chiprow::-webkit-scrollbar,
.reels::-webkit-scrollbar,
.thumbs::-webkit-scrollbar{display:none;width:0;height:0}

/* ============================================================
   The dotted line becomes the house divider
   ------------------------------------------------------------
   [D]'s flightpath is the most recognisable mark on the site, so
   every deliberate divider now uses the same stroke instead of a
   solid hairline. Structural borders (table rows, accordions,
   filter rails) stay solid on purpose — dotted at that density
   buzzes, and the divider stops meaning anything if everything
   is dotted.
   ============================================================ */
.rule{height:0;background:none;border-top:2px dotted var(--sky);opacity:.65}
.rule-strong{height:0;background:none;border-top:2px dotted var(--sky-ink);opacity:.5}
.ftr-base{border-top:2px dotted rgba(253,254,254,.28)}
.sec-head + .rule{margin-top:4px}

/* ---------- kit thumbnails ----------
   A bundle is a set of objects; showing them beats listing them. */
.kit-item img{
  width:44px;height:44px;flex:none;object-fit:cover;
  border-radius:calc(var(--r-card) - 4px);background:var(--tint-gray);
}
.kit-item{gap:12px}
.kit-item .kit-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.kit-item .kit-name b{font-weight:600;color:var(--charcoal);font-size:14.5px;line-height:1.25}
.kit-item .kit-name small{font-size:12.5px;color:var(--muted)}

/* ---------- footer payment marks ----------
   BUG: `.ftr ul` sets flex-direction:column and outranks `.pay`, so the
   badges stacked into full-width bars down the column. Restored to a row. */
.ftr .pay{flex-direction:row;flex-wrap:wrap;gap:7px;align-items:center}
.ftr .pay li{
  padding:0;border:0;border-radius:4px;overflow:hidden;line-height:0;
  background:none;
}
.ftr .pay svg{display:block;width:40px;height:26px;border-radius:4px}

/* ---------- trip row: show the whole set, don't hide it behind a scroll ----------
   Six chips at a fixed 200px overflow the 1184px content width, so the last
   one was always clipped — which reads as "broken", not as "more this way".
   At desktop they become an even grid and all six are simply visible.
   Below that it still scrolls, now with snap so a swipe lands cleanly. */
@media (min-width:1000px){
  .chiprow{display:grid;grid-template-columns:repeat(6,1fr);overflow:visible;padding-bottom:0}
  .chiprow>*{flex:initial}
  .trip-chip{width:auto;min-width:0}
}
@media (max-width:999.98px){
  .chiprow{scroll-snap-type:x mandatory;scroll-padding-inline:18px}
  .chiprow>*{scroll-snap-align:start}
}

/* ---------- rail arrows (rails.js) ---------- */
.rail-wrap{position:relative}
/* Touch targets. WCAG 2.5.8 asks for 24x24, iOS and Android both ask for
   44x44, and a finger does not care which spec it is failing. These only
   apply to a coarse pointer, so a mouse-driven layout is untouched. */
@media (pointer:coarse){
  .ftr li a{min-height:44px}
  .ftr-base a,.ann a,.link-more{display:inline-flex;align-items:center;min-height:44px}
  .ftr .social a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .brand{display:inline-flex;align-items:center;min-height:44px}
  .checkrow{position:relative}
  .checkrow input[type=checkbox],.checkrow input[type=radio]{position:relative}
  .checkrow input[type=checkbox]::after,.checkrow input[type=radio]::after{
    content:"";position:absolute;inset:-12px}
  .linkbtn{min-height:44px}
}

.rail-arrow{
  position:absolute;top:38%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--hair);background:var(--canvas);color:var(--charcoal);
  display:none;align-items:center;justify-content:center;cursor:pointer;padding:0;
  box-shadow:0 3px 12px rgba(42,42,42,.14);
  transition:opacity .2s ease,border-color .2s ease,transform .2s ease;
}
.rail-wrap.has-arrows .rail-arrow{display:flex}
.rail-arrow:hover{border-color:var(--charcoal)}
.rail-arrow:active{transform:translateY(-50%) scale(.94)}
.rail-arrow[disabled]{opacity:0;pointer-events:none}
.rail-arrow-prev{left:-6px}
.rail-arrow-next{right:-6px}
@media (min-width:900px){
  .rail-arrow-prev{left:-18px}
  .rail-arrow-next{right:-18px}
}
@media (prefers-reduced-motion:reduce){.rail-arrow{transition:none}}

/* ---------- footer social ---------- */
.ftr .social{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.ftr .social li{margin:0}
.ftr .social a{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid #5E5E5E;color:#EDEDED;text-decoration:none;
  transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease;
}
.ftr .social a:hover{
  border-color:var(--tangerine);background:var(--tangerine);color:var(--ink);
  transform:translateY(-2px);text-decoration:none;
}
.ftr .social svg{width:17px;height:17px;display:block}
@media (prefers-reduced-motion:reduce){.ftr .social a{transition:none}.ftr .social a:hover{transform:none}}