/* Travel family, shared mechanics for the designs built from _src
   (2026-09-22: Mandara Trails, Lobé Waters). Layout plumbing only: every
   look lives in the design's own skin. Coast & Highlands and Red Earth
   Routes keep their own complete stylesheets.

   The brand roles come from travel_pages.brand_style when the business
   chose colours: --accent / --accent-ink (buttons, marks, the closing
   band), --ink (the dark structure colour, always carries white text),
   --on-ink / --on-ink-text (a button that stands out on --ink),
   --accent-text (the brand as text on the page) and --accent-soft (small
   figures on --ink). A skin sets the defaults and reads only these. */
:root{--paper:#f4f5f3;--surface:#fff;--text:#1b2124;--muted:#586166;--line:#cfd5d3;--focus:#ffd45c;--max:1260px;--gutter:28px;--font-display:Georgia,serif;--font-body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--radius:0px;--radius-lg:0px;--radius-btn:0px;--accent:#c84e21;--accent-ink:#fff;--accent-text:#b6471e;--accent-soft:#ffb28f;--ink:#173a34}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{min-height:100%;scroll-behavior:smooth;background:var(--paper)}
body{min-height:100dvh;margin:0;background:var(--paper);color:var(--text);font:400 17px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
main{flex:1 0 auto;width:100%;display:flex;flex-direction:column}
.site-header,.site-footer{flex:none}
a{color:inherit;text-underline-offset:.25em}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--font-display);text-wrap:balance}
p{max-width:68ch}

/* header */
.site-header{background:var(--surface);border-bottom:1px solid var(--line)}
.announcement{min-height:40px;display:flex;align-items:center;justify-content:center;gap:28px;padding:8px 24px;font-size:13px}
.announcement a{font-weight:700}
.nav-shell{max-width:var(--max);min-height:76px;margin:auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:700}
.brand-mark{display:grid;place-items:center;flex:none;width:44px;height:44px;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:700}
.brand-logo{height:44px;width:auto;max-width:150px;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:600}
.nav-links>a{text-decoration:none}
.language{display:flex;gap:7px}
.language i{font-style:normal;opacity:.6}
.menu-toggle{display:none;min-height:44px;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:0 16px;border-radius:var(--radius-btn)}

main>section,main>article{width:100%;max-width:var(--max);margin-inline:auto;flex:none}

/* hero: the photograph fills the section; the words are their own layer
   above any shade the skin draws (::before / ::after at z-index 1), and the
   hero keeps a min-height so the editor never collapses it */
.hero{position:relative;max-width:none;display:flex;flex-direction:column;min-height:clamp(580px,calc(100vh - 116px),900px);overflow:hidden;background:#c9d0cd;isolation:isolate}
.hero-media{position:absolute;inset:0;margin:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus,50% 45%)}
.hero-copy{position:relative;z-index:2}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.eyebrow{margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 22px;border:1px solid var(--ink);border-radius:var(--radius-btn);text-decoration:none;font-weight:700;line-height:1.2;text-align:center;transition:transform .18s ease,background-color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.secondary{background:transparent;color:var(--ink)}

/* story, craft and visit */
.split{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(40px,7vw,100px);padding:108px var(--gutter)}
.split.reverse{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)}
.split.reverse>div{order:2}
.split.reverse>.split-media{order:1}
.split-media{margin:0;min-width:0;overflow:hidden;border-radius:var(--radius-lg)}
.split-media img{width:100%;height:min(560px,55vw);object-fit:cover}
.split p{color:var(--muted);font-size:18px}
.split ul{margin:18px 0 0;padding-left:1.1em}
.split li{margin:10px 0}
.text-link{display:inline-block;margin-top:12px;font-weight:700}

/* tours: as many columns as there are tours (never a hole) */
.popular{padding:12px var(--gutter) 108px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:36px}
.section-heading h2{max-width:720px}
.section-heading a{font-weight:700;white-space:nowrap}
.open-trip{display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--surface);padding:34px;border-radius:var(--radius-lg)}
.open-trip p{margin:0;font-size:19px;color:var(--muted)}
.open-trip .btn{flex:none}
.tour-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px}
.tour-card{display:flex;flex-direction:column;min-width:0;background:var(--surface);overflow:hidden;border-radius:var(--radius-lg)}
.tour-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden}
.tour-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.tour-card:hover .tour-media img{transform:scale(1.03)}
.tour-card-copy{display:flex;flex-direction:column;flex:1;padding:24px}
.tour-facts{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px}
.tour-card h3{margin:12px 0 8px;font-size:clamp(1.35rem,2vw,1.8rem)}
.tour-card p{color:var(--muted);margin:0 0 12px}
.tour-price{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:14px;margin-top:auto}
.tour-price span{font-size:12px;color:var(--muted);text-align:right}
.tour-card p.next-date{font-size:14px;margin:10px 0 0;color:var(--text)}
/* one tour alone lies on its side rather than filling the page */
.tour-grid>.tour-card:only-child{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.tour-grid>.tour-card:only-child .tour-media{aspect-ratio:auto;min-height:380px}

/* how it works */
.process{max-width:none;display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(36px,6vw,80px);padding:96px max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)))}
.process ol{list-style:none;margin:0;padding:0}
.process li{display:grid;grid-template-columns:48px 1fr;gap:4px 16px;padding:22px 0}
.process li .step{grid-row:1/3}
.process li strong{font-size:20px}

/* what the business arranges */
.room{padding:104px var(--gutter);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,6vw,80px);align-items:start}
.room p{color:var(--muted)}
.arrange-list{display:grid}
.arrange-row{display:grid;grid-template-columns:minmax(170px,.75fr) 1.25fr;gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none}
.arrange-row strong{font-family:var(--font-display);font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.1}
.arrange-row span{color:var(--muted)}
.arrange-row:hover strong{color:var(--accent-text)}

.visit{padding-top:80px;padding-bottom:80px}
.contact-slab{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:34px;background:var(--surface);border-radius:var(--radius-lg)}
.contact-slab a{font-weight:700}

.map-section{padding:0 var(--gutter) 104px;display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:center}
.map-copy h2{margin-bottom:16px}
.map-copy p{color:var(--muted);margin:0 0 20px}
.map-copy a{font-weight:700}
.map-canvas{overflow:hidden;background:#d8dedb;min-height:320px;border-radius:var(--radius-lg)}
.map-canvas iframe{display:block;width:100%;height:clamp(320px,34vw,440px);border:0}

.quote{padding:92px var(--gutter)}
.quote blockquote{max-width:920px;margin:0;font-family:var(--font-display);font-size:clamp(2rem,3.8vw,3.6rem);line-height:1.1}
.quote p{margin:22px 0 0;color:var(--muted)}

.closing{max-width:none;display:flex;align-items:center;justify-content:space-between;gap:34px;padding:74px max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)))}
.closing h2{max-width:780px}
.closing p{margin:14px 0 0;max-width:60ch}
.closing .btn{flex:none;white-space:nowrap}

.site-footer{max-width:none;padding:58px max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter))) 26px;display:grid;grid-template-columns:1.4fr .7fr 1fr;gap:40px}
.site-footer>div{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.site-footer strong{font-size:20px}
.site-footer p{margin:0}
.legal{grid-column:1/-1;padding-top:22px!important;font-size:13px}

/* the inner pages */
.page-intro{padding:88px var(--gutter) 56px}
.page-intro h1{max-width:900px}
.page-intro p{font-size:19px;color:var(--muted);margin-top:24px}
.page-intro .btn{margin-top:8px}
.page-intro.editorial{display:grid;grid-template-columns:1fr .75fr;gap:clamp(36px,6vw,80px);align-items:end}

.catalogue{padding:0 var(--gutter) 108px}
.filters{display:grid;grid-template-columns:1.5fr 1fr auto;gap:14px;align-items:end;background:var(--surface);padding:20px;margin-bottom:18px;border-radius:var(--radius-lg)}
label{display:grid;gap:7px;font-size:14px;font-weight:700}
input,select,textarea{width:100%;min-height:48px;border:1px solid #8a9694;background:#fff;color:var(--text);padding:10px 12px;border-radius:var(--radius)}
textarea{min-height:110px}
.filters button{min-height:48px;border:1px solid var(--ink);background:transparent;color:var(--text);padding:8px 18px;font-weight:700;border-radius:var(--radius-btn)}
.result-count{color:var(--muted)}
.empty-state{padding:60px 0}
.pager{display:flex;justify-content:center;gap:8px;margin-top:36px}
.pager button{min-width:44px;height:44px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:var(--radius-btn)}
.pager button[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}

.tour-detail{padding:72px var(--gutter) 108px}
.tour-detail>header{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,6vw,64px);align-items:center}
.tour-detail>header img{width:100%;height:560px;object-fit:cover;border-radius:var(--radius-lg)}
.tour-detail header p{color:var(--muted);font-size:19px}
.back{display:inline-block;margin-bottom:26px;font-weight:700}
.detail-facts{display:flex;flex-wrap:wrap;gap:16px 24px;margin:24px 0}
.detail-facts span,.detail-facts strong{padding-bottom:5px;border-bottom:1px solid var(--line)}
.tour-detail>section{max-width:900px;margin-top:80px}
.itinerary{list-style:none;padding:0}
.itinerary li{display:grid;grid-template-columns:48px 1fr;gap:18px;border-top:1px solid var(--line);padding:22px 0}
.itinerary li span{font-weight:700;color:var(--accent-text)}
.itinerary p{margin:0}
.departures>div{display:flex;gap:10px;flex-wrap:wrap}
.departures>div span{background:var(--surface);padding:10px 14px;border-radius:var(--radius)}
.departures p{color:var(--muted)}

.about-grid,.contact-grid{max-width:var(--max);margin:auto;padding:10px var(--gutter) 108px;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(34px,6vw,64px)}
.about-grid img{width:100%;height:680px;object-fit:cover;border-radius:var(--radius-lg)}
.about-grid h2{font-size:clamp(2rem,3vw,3.1rem);margin:12px 0}
.about-grid p{color:var(--muted);margin-bottom:42px}
.contact-grid{flex:1 0 auto}
.contact-card{display:flex;flex-direction:column;align-items:flex-start;gap:16px;background:var(--surface);padding:36px;align-self:start;border-radius:var(--radius-lg)}
.contact-card p{margin:0}
.contact-card a{font-weight:700}
.contact-map{display:grid;gap:22px;align-content:start}
.contact-map .map-copy h2{font-size:clamp(1.9rem,3vw,2.8rem)}

/* the trip request: what the traveller needs, then only the details of
   what they chose */
.request-layout{padding:82px var(--gutter) 108px;display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(34px,6vw,80px);flex:1 0 auto;align-items:start}
.request-intro>p{color:var(--muted);font-size:19px}
.pending-note{display:flex;flex-direction:column;gap:4px;padding-top:22px;margin-top:30px}
.request-layout form{background:var(--surface);padding:32px;display:grid;gap:24px;border-radius:var(--radius-lg)}
.request-layout fieldset{margin:0;padding:0;border:0;display:grid;gap:16px;min-width:0}
.request-layout legend{padding:0;margin:0 0 6px;font-family:var(--font-display);font-size:clamp(1.3rem,2vw,1.65rem);float:left;width:100%}
.trip-need,.trip-contact{border-top:1px solid var(--line)!important;padding-top:22px!important}
.service-choices{display:flex;flex-wrap:wrap;gap:10px}
.service-choice{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:10px 16px;border:1px solid #8a9694;cursor:pointer;font-size:15px;font-weight:700;background:#fff;border-radius:var(--radius-btn)}
.service-choice input{width:18px;min-height:18px;height:18px;margin:0;padding:0;accent-color:var(--accent)}
.service-choice:has(input:checked){border-color:var(--ink);background:var(--ink);color:#fff}
.service-choice:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.consent{grid-template-columns:auto 1fr;align-items:start}
.consent input{width:20px;min-height:20px}
.form-status{margin:0;min-height:26px}
.form-status.error{color:#a2231d}
.form-status.success{color:#176b3a}

@media(max-width:960px){
  .split,.split.reverse,.process,.room,.page-intro.editorial,.tour-detail>header,.about-grid,.contact-grid,.request-layout,.map-section{grid-template-columns:1fr}
  .split.reverse>div,.split.reverse>.split-media{order:initial}
  .tour-grid>.tour-card:only-child{display:flex}
  .tour-grid>.tour-card:only-child .tour-media{aspect-ratio:4/3;min-height:0}
  .site-footer{grid-template-columns:1fr 1fr}
  .open-trip{flex-direction:column;align-items:flex-start}
}
@media(max-width:680px){
  :root{--gutter:18px}
  body{font-size:16px}
  .announcement{justify-content:space-between;padding:7px 16px;font-size:11px}
  .announcement span{max-width:235px}
  .nav-shell{min-height:64px}
  .brand-mark{width:38px;height:38px}
  .brand>span:last-child{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .menu-toggle{display:block}
  .nav-links{display:none;position:absolute;z-index:20;left:0;right:0;top:104px;background:var(--surface);padding:22px 18px;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:18px}
  .nav-links.open{display:flex}
  .hero{min-height:calc(100svh - 104px)}
  .btn{min-height:46px;padding:10px 14px;font-size:14px}
  .split{padding-top:72px;padding-bottom:72px;gap:28px}
  .split-media img{height:350px}
  .popular{padding-bottom:72px}
  .section-heading{align-items:flex-start;flex-direction:column}
  .process{padding-top:70px;padding-bottom:70px}
  .room{padding-top:72px;padding-bottom:72px}
  .arrange-row{grid-template-columns:1fr;gap:6px}
  .visit{padding-top:58px;padding-bottom:58px}
  .map-section{padding-bottom:72px}
  .map-canvas iframe{height:300px}
  .quote{padding-top:72px;padding-bottom:72px}
  .closing{padding-top:54px;padding-bottom:54px;align-items:flex-start;flex-direction:column}
  .site-footer{grid-template-columns:1fr;padding-top:46px}
  .legal{grid-column:auto}
  .page-intro{padding-top:60px;padding-bottom:38px}
  .filters{grid-template-columns:1fr}
  .tour-detail{padding-top:48px}
  .tour-detail>header img{height:310px}
  .about-grid,.contact-grid{padding-bottom:72px}
  .about-grid img{height:420px}
  .request-layout{padding-top:54px}
  .request-layout form{padding:22px 16px}
  .field-pair{grid-template-columns:1fr}
  .open-trip{padding:26px 20px}
  .contact-card{padding:26px 20px}
}
@media(max-width:380px){
  .announcement{gap:8px}
  .announcement span{max-width:190px}
  .brand>span:last-child{max-width:125px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tour-media img,.btn{transition:none}
}
/* a heading word too long for its line breaks rather than spills (overflow check 2026-09-22) */
h1,h2,h3{overflow-wrap:break-word}

/* Phones (2026-09-24): form fields read at 16px, so an iPhone does not
   zoom into the field a customer taps. :not(#_) lifts the rule over the
   design's own field rules without !important. */
@media (max-width: 960px) {
  input:not([type=checkbox],[type=radio],[type=file],[type=submit],[type=button],[type=reset],[type=image],[type=range],[type=color],[type=hidden]):not(#_),
  select:not(#_),
  textarea:not(#_) { font-size: 16px; }
}

/* Lobé Waters (2026-09-22): calm and coastal. A soft serif display face,
   rounded shapes, deep sea ink and a coral accent, unhurried spacing.
   Hero: morning mist. A pale haze rises from the photograph's foot and the
   words sit in dark ink on it, low and to the left, the sky left clear.
   The haze is the page's own pale ground, so the words stay dark on light
   whatever colours the business chose. */
:root{--paper:#f6f9f9;--surface:#fff;--text:#12303a;--muted:#4b646d;--line:var(--brand-line,#d2e1e3);--accent:#b54a28;--accent-ink:#fff;--accent-text:#a94425;--accent-soft:#f2b29a;--ink:#0e3b46;--mist:246,249,249;--font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;--font-body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--radius:14px;--radius-lg:26px;--radius-btn:999px}
h1,h2,h3{font-weight:600;letter-spacing:-.01em;line-height:1.02}
h1{font-size:clamp(3rem,5.6vw,5.4rem)}
h2{font-size:clamp(2.3rem,4vw,3.8rem)}
h3{font-size:clamp(1.55rem,2.2vw,2.05rem)}

.announcement{background:#e6eff0;background:color-mix(in srgb,var(--ink) 9%,#ffffff);color:var(--ink)}
.announcement a{color:var(--ink);text-decoration:underline}
.site-header{border-bottom:0;box-shadow:0 1px 0 var(--line)}
.brand{font-family:var(--font-display);font-size:24px;font-weight:600}
.brand-mark{border-radius:50%;font-family:var(--font-body)}
.nav-links a{padding:6px 2px}
.menu-toggle{border-color:var(--line);font-weight:700}

.btn{border-width:1.5px;padding-inline:26px}
.btn.secondary{border-color:var(--ink);color:var(--ink)}

/* morning mist */
.hero-mist{justify-content:flex-end;padding:0 max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter))) clamp(40px,6vw,76px)}
.hero-mist::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72%;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(var(--mist),.97) 0%,rgba(var(--mist),.93) 55%,rgba(var(--mist),.7) 78%,rgba(var(--mist),0) 100%)}
.hero-words{max-width:700px;color:var(--text)}
.hero-mist .eyebrow{margin:0 0 16px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.hero-mist h1{color:var(--ink);font-size:clamp(3.2rem,6vw,5.8rem)}
.hero-line{margin:18px 0 28px;max-width:54ch;font-size:clamp(17px,1.35vw,19px)}
.hero-mist .btn.secondary{background:rgba(255,255,255,.55)}

/* story and craft: rounded photographs */
.split h2{margin-bottom:8px}
.split-media{box-shadow:0 24px 50px -30px rgba(14,59,70,.45)}
.split li::marker{color:var(--accent)}
.text-link{color:var(--accent-text)}

/* tours: one wide card each, the photograph swapping sides */
.tour-grid{grid-template-columns:1fr;gap:26px}
.tour-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);box-shadow:0 22px 48px -34px rgba(14,59,70,.5)}
.tour-card:nth-child(even) .tour-media{order:2}
.tour-media{aspect-ratio:auto;min-height:340px}
.tour-card-copy{padding:clamp(24px,3.4vw,44px)}
.tour-card h3{font-size:clamp(1.8rem,2.8vw,2.5rem)}
.tour-price strong{font-size:18px;color:var(--accent-text)}
.tour-card .text-link{align-self:flex-start}
.tour-grid>.tour-card:only-child{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tour-grid>.tour-card:only-child .tour-media{min-height:380px}

/* how it works: three cards on a pale sea band */
.process{background:#e8f1f2;background:color-mix(in srgb,var(--ink) 8%,#ffffff);grid-template-columns:1fr;text-align:center}
.process>div{max-width:720px;margin:0 auto}
.process p{margin:14px auto 0;color:var(--muted)}
.process ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;text-align:left}
.process li{display:flex;flex-direction:column;gap:10px;padding:30px;background:var(--surface);border-radius:var(--radius-lg)}
.process li .step{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:2.6rem;line-height:1;color:var(--accent-text)}
.process li strong{font-family:var(--font-display);font-size:1.7rem;font-weight:600;line-height:1.1}
.process li span{color:var(--muted)}

/* what we arrange: soft cards that share each row */
.arrange-list{display:flex;flex-wrap:wrap;gap:14px}
.arrange-row{flex:1 1 260px;display:flex;flex-direction:column;gap:8px;padding:24px 26px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);transition:border-color .18s ease}
.arrange-row:hover{border-color:var(--accent)}

.contact-slab{box-shadow:0 22px 48px -34px rgba(14,59,70,.5)}
.contact-slab a{color:var(--accent-text)}

.quote{text-align:center}
.quote blockquote{margin:0 auto;font-style:italic;font-weight:500;font-size:clamp(2.2rem,4.2vw,4rem)}
.quote p{letter-spacing:.14em;text-transform:uppercase;font-size:13px;font-weight:700}

.closing{background:var(--ink);color:#fff}
.closing p{color:rgba(255,255,255,.86)}
.closing .btn{background:var(--on-ink,var(--accent));border-color:var(--on-ink,var(--accent));color:var(--on-ink-text,var(--accent-ink))}

.site-footer{background:#e8f1f2;background:color-mix(in srgb,var(--ink) 8%,#ffffff)}
.site-footer strong{font-family:var(--font-display);font-size:26px;font-weight:600}
.site-footer p{color:var(--muted)}
.legal{border-top:1px solid var(--line)}

.filters,.request-layout form,.contact-card{border:1px solid var(--line)}
.pending-note{padding:18px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.itinerary li span{font-family:var(--font-display);font-style:italic;font-size:1.6rem;font-weight:500}
.departures>div span{border:1px solid var(--line);border-radius:999px;padding-inline:16px}
.service-choice:has(input:checked){border-color:var(--ink)}

@media(max-width:960px){
  .process ol{grid-template-columns:1fr}
  .tour-card,.tour-grid>.tour-card:only-child{grid-template-columns:1fr}
  .tour-card:nth-child(even) .tour-media{order:0}
  .tour-media,.tour-grid>.tour-card:only-child .tour-media{min-height:0;aspect-ratio:3/2}
}
@media(max-width:680px){
  .brand{font-size:21px}
  .hero-mist{padding-bottom:30px}
  .hero-mist::after{height:92%;background:linear-gradient(0deg,rgba(var(--mist),.98) 0%,rgba(var(--mist),.94) 60%,rgba(var(--mist),.72) 82%,rgba(var(--mist),0) 100%)}
  .hero-mist .eyebrow{font-size:11px;margin-bottom:12px}
  .hero-mist h1{font-size:clamp(2.6rem,11.5vw,3.5rem)}
  .hero-line{font-size:16px;margin:12px 0 20px}
  .hero-mist .hero-actions{display:grid;grid-template-columns:1fr 1fr}
  .hero-media img{object-position:var(--hero-focus,50% 30%)}
  .process li{padding:24px}
}
@media(max-width:380px){
  .hero-mist .hero-actions{grid-template-columns:1fr}
}

/* >>> w30 look 2026-09-26 */
/* The engines' bands line up with the design's own sections (they started
   18 to 28px left of them on a computer). */
@media(min-width:681px){html:root body .eng-sec > .eng-wrap{width:min(1204px,calc(100% - 56px))}}
/* Headings keep whole words: the balanced wrap cut them where a word may
   break ("Investissemen / t de croissance", "Demande / r un devis"). */
html:root body :is(h1,h2,h3):not(#_){text-wrap:pretty}
/* Wide screens (1920, 2000): the hero is tall enough that at most about 40%
   of the photograph is cropped away, and the photograph is anchored nearer
   its top so heads stay in the frame. */
@media(min-width:1400px){
  html:root body section[data-section="hero"]{min-height:max(clamp(560px,82vh,800px),min(40vw,900px))}
  html:root body section[data-section="hero"] > :is(figure,.hero-media) img{object-position:center 30%}
}
/* Phones: the hero photograph shows its people, not the empty side of the
   scene (the family and the group stand in the right of the photo). */
@media(max-width:699px){html:root body section[data-section="hero"] > :is(figure,.hero-media) img{object-position:85% 45%}}
/* <<< w30 look 2026-09-26 */

/* >>> standard 2026-09-25 */
/* The finished sites' standard (goal 2026-09-25): sections at most 68px a
   side (40px on a phone), the engines' bands in the page's margins, the menu
   on one row, a long footer page list in two columns. */
:root body main > section:not([data-section="hero"]):not(.eng-sec):not(.media-split):not(.map):not([data-paurtal-widget]){padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(40px,5vw,68px)}
:root body main > section.media-split > div{padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(40px,5vw,68px)}
:root body main > section.eng-sec{padding:clamp(40px,4.4vw,60px) 0;margin:0;max-width:none;width:auto}
:root body main > section.eng-sec + section.eng-sec{padding-top:clamp(12px,2vw,24px)}
:root body .eng-sec > .eng-wrap{width:min(1240px,calc(100% - 48px));max-width:none;margin-inline:auto;padding:0}
:root body .eng-sec .eng-head{margin-top:0}
:root body .eng-sec h2{margin-top:0}
:root body .eng-card__body > a:last-child{align-self:flex-start;width:auto;margin-top:auto}
:root body .eng-page-intro{min-height:0;padding-top:clamp(40px,6vw,84px);padding-bottom:clamp(20px,3vw,36px)}
:root body .eng-page-intro + .eng-sec{padding-top:clamp(12px,2vw,24px)}
@media(max-width:760px){
  :root body main > section:not([data-section="hero"]):not(.eng-sec):not(.media-split):not(.map):not([data-paurtal-widget]){padding-top:40px;padding-bottom:40px}
  :root body main > section.media-split > div{padding-top:40px;padding-bottom:40px}
  :root body main > section.eng-sec{padding-top:40px;padding-bottom:40px}
  :root body .eng-sec > .eng-wrap{width:calc(100% - 36px)}
}
:root body :is(footer,.site-footer) :is(div,nav):has(> a:nth-of-type(7)){display:grid;grid-template-columns:repeat(2,minmax(0,max-content));column-gap:28px;row-gap:10px;align-content:start}
:root body :is(footer,.site-footer) :is(div,nav):has(> a:nth-of-type(7)) > :is(h2,h3,p,b,strong){grid-column:1/-1}
/* The editors: every photograph keeps its frame inside the editor's wrapper. */
:root body :is(figure,.eng-card__photo) > [data-paurtal-img-wrap]{display:block !important;width:100%;height:100%}
/* A tap beside the hero's words reaches the photograph (the editors open its
   picker): the words' empty box lets the tap through, the words do not. */
:root body section[data-section="hero"] > div{pointer-events:none}
:root body section[data-section="hero"] > div > *{pointer-events:auto}
/* The hero: the photograph across the whole width, the words on it in white
   over a dark fade from their side (the bottom on a phone, the left on a
   computer); no split panel, no card, no pale haze. */
:root body section[data-section="hero"]{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr;grid-template-rows:none;align-items:end;align-content:end;width:100%;max-width:none;min-height:max(480px,calc(100svh - 250px));margin:0;padding:0;background:#141a19;border:0;border-radius:0;box-shadow:none;overflow:hidden;gap:0;color:#fff}
:root body section[data-section="hero"]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;display:block;width:auto;height:auto;border:0;border-radius:0;transform:none;opacity:1;background:linear-gradient(0deg,rgba(12,16,15,.92) 0%,rgba(12,16,15,.78) 45%,rgba(12,16,15,.5) 80%,rgba(12,16,15,.4) 100%)}
:root body section[data-section="hero"]::after{display:none}
:root body section[data-section="hero"] > :is(figure,.hero-media){position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;min-height:0;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;clip-path:none;-webkit-mask:none;mask:none;transform:none;opacity:1;overflow:hidden;grid-area:auto;background:none;order:0}
:root body section[data-section="hero"] > :is(figure,.hero-media) picture{display:block;width:100%;height:100%}
:root body section[data-section="hero"] > :is(figure,.hero-media) img{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:center 45%;border:0;border-radius:0;clip-path:none;transform:none;filter:none;opacity:1}
:root body section[data-section="hero"] > :is(.hero-copy,.hero-card,.hero-words){position:relative;z-index:1;order:1;width:100%;max-width:none;min-height:0;margin:0;padding:28px 20px 32px;background:none;border:0;border-radius:0;box-shadow:none;clip-path:none;transform:none;grid-area:auto;color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
:root body section[data-section="hero"] > :is(.hero-copy,.hero-card,.hero-words)::before,:root body section[data-section="hero"] > :is(.hero-copy,.hero-card,.hero-words)::after{display:none}
:root body section[data-section="hero"] :is(h1,h1 span,p,p span,.eyebrow,.hero-context,.hero-lede,.lede,.hero-line){color:#fff}
:root body section[data-section="hero"] h1{max-width:15ch;font-size:clamp(38px,5vw,66px);line-height:1.05;text-wrap:balance}
:root body section[data-section="hero"] :is(.hero-copy,.hero-card,.hero-words) > p:not(.eyebrow):not(.hero-context){max-width:46ch;color:#e6ebe8}
:root body section[data-section="hero"] .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
:root body section[data-section="hero"] .hero-actions :is(.secondary,.btn-quiet){background:transparent;border-color:#fff;color:#fff}
:root body section[data-section="hero"] .hero-actions :is(.secondary,.btn-quiet) span{color:#fff}
@media(max-width:699px){:root body section[data-section="hero"] .hero-actions{padding-right:58px}}
@media(min-width:900px){
  :root body section[data-section="hero"]{align-items:center;align-content:center;min-height:clamp(560px,82vh,800px)}
  :root body section[data-section="hero"]::before{background:linear-gradient(90deg,rgba(12,16,15,.9) 0%,rgba(12,16,15,.72) 38%,rgba(12,16,15,.2) 70%,rgba(12,16,15,0) 86%)}
  :root body section[data-section="hero"] > :is(.hero-copy,.hero-card,.hero-words){padding:clamp(48px,8vh,96px) max(24px,calc((100% - 1240px) / 2))}
  :root body section[data-section="hero"] > :is(.hero-copy,.hero-card,.hero-words) > *{max-width:620px}
}
/* The engines take the design's own tokens. */
:root body{--primary:var(--accent);--primary-text:var(--accent-text,var(--accent));--on-primary:var(--accent-ink,#fff);--ink-soft:var(--muted);--ground:var(--surface,var(--white,#fff));--surface-2:var(--paper)}
/* The menu on one row, however many pages. */
@media(min-width:1025px){
  :root body .nav-shell{flex-wrap:nowrap;gap:clamp(14px,1.6vw,28px)}
  :root body .nav-links{flex-wrap:nowrap;gap:clamp(10px,1.05vw,20px)}
  :root body .nav-links > a{flex-shrink:0;white-space:nowrap}
  :root body .nav-links:has(> a:nth-of-type(8)) > a{font-size:12.5px;letter-spacing:0}
  :root body .nav-shell .brand{flex-shrink:0}
}
/* The business's name always shows in full: on two lines, smaller, never cut. */
:root body .brand > span:last-child{white-space:normal;overflow:visible;text-overflow:clip;max-width:17ch;line-height:1.15;overflow-wrap:break-word}
@media(max-width:699px){:root body .brand > span:last-child{max-width:22ch;font-size:13px}}
/* <<< standard 2026-09-25 */