/* ===========================================================================
   African Queen Beach Holidays
   Ported verbatim from prototype/index.html, which is the approved design.
   Additions for the multi-page site are grouped at the end of the file.
   =========================================================================== */

/* ---------- Brand tokens (from the AQ logo) ---------- */
:root{
  --ink:#16140F;        /* logo black */
  --gold:#D0AF3C;       /* logo gold: buttons, rules, icons on dark */
  --gold-deep:#8A6A12;  /* gold for text on white (accessible contrast) */
  --ocean:#0E5E66;      /* Zanzibar sea */
  --lagoon:#9ED9D1;
  --mist:#F3F6F4;
  --line:#E7E2D4;
  --muted:#5C574C;
  --serif:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans:"Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --wrap:1220px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.01em}
h2{font-size:clamp(2.1rem,4.4vw,3.4rem)}
h3{font-size:1.45rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.section{padding:clamp(72px,9vw,120px) 0}
.section-lede{max-width:56ch;margin-top:16px;color:var(--muted);font-size:1.12rem}

/* ---------- Buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:inherit;font-weight:500;font-size:1rem;letter-spacing:.01em;padding:.85em 1.6em;border-radius:2px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:#DDBF55}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:#fff}
.on-dark .btn-line{border-color:#fff;color:#fff}
.on-dark .btn-line:hover{background:#fff;color:var(--ink)}
.link{font-weight:500;color:var(--gold-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.link:hover{color:var(--ink)}
.on-dark .link{color:var(--gold)}
.on-dark .link:hover{color:#fff}

/* ---------- Utility bar ---------- */
.utility{background:var(--ink);color:#D8D2C2;font-size:.88rem}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:42px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.utility a{color:#fff;text-decoration:none}
.utility a:hover{color:var(--gold)}
.utility-links{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{height:60px;width:auto}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{font-family:var(--serif);font-weight:600;font-size:1.3rem}
.brand-text span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav{display:flex;align-items:center;gap:6px}
.nav-list{display:flex;list-style:none;margin:0;padding:0;gap:2px}
.nav-list > li{position:relative}
.nav-list > li > a,.nav-list > li > button{display:flex;align-items:center;gap:6px;font:inherit;font-size:.98rem;color:var(--ink);background:none;border:0;padding:10px 11px;cursor:pointer;text-decoration:none;white-space:nowrap;border-bottom:1.5px solid transparent}
.nav-list > li > a:hover,.nav-list > li > button:hover{border-bottom-color:var(--gold)}
.caret{width:10px;height:10px;transition:transform .2s}
.dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:240px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--gold);padding:8px;list-style:none;margin:0;box-shadow:0 20px 40px -24px rgba(22,20,15,.4);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s}
.dropdown a{display:block;padding:9px 12px;text-decoration:none;font-size:.96rem}
.dropdown a:hover{background:var(--mist);color:var(--gold-deep)}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown,.has-dropdown.open .dropdown{opacity:1;visibility:visible;transform:none}
.has-dropdown:hover .caret,.has-dropdown.open .caret{transform:rotate(180deg)}
.nav > .btn-gold{margin-left:10px;white-space:nowrap}
.menu-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink);flex:none}
.menu-toggle svg{width:28px;height:28px}

/* ---------- Hero: the logo's circle becomes a window onto Zanzibar ---------- */
.hero{padding:clamp(48px,6vw,88px) 0 clamp(64px,8vw,104px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(3.1rem,6.6vw,6.2rem);font-weight:500;line-height:.98;letter-spacing:-.02em}
.hero-lede{margin-top:24px;max-width:40ch;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.55;color:var(--muted)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 36px;margin:44px 0 0;padding:0;list-style:none}
.hero-facts li{border-top:1.5px solid var(--gold);padding-top:10px;font-size:.98rem;font-weight:500}
.porthole{width:100%;max-width:600px;margin-left:auto;overflow:visible}
.porthole .arc{stroke-dasharray:1310;stroke-dashoffset:1310;animation:draw 1.8s cubic-bezier(.3,.7,.2,1) .2s forwards}
.porthole .slash{stroke-dasharray:640;stroke-dashoffset:640;animation:draw .9s ease-out 1.5s forwards}
.porthole .arc-label{opacity:0;animation:fade .8s ease 1.7s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

/* ---------- Intro ---------- */
.intro{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.intro .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,6vw,96px);align-items:start}
.intro-body p{font-size:1.15rem;line-height:1.75;max-width:60ch;color:var(--muted)}
.intro-body p + p{margin-top:18px}
.intro-body p:first-child{color:var(--ink)}
.vision{margin-top:32px;padding-left:22px;border-left:2px solid var(--gold)}
.vision p{font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.45;color:var(--ink)}

/* ---------- Holidays (porthole tiles) ---------- */
.holiday-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin-top:56px}
.holiday{text-align:center}
.holiday .port{position:relative;width:min(100%,250px);margin:0 auto;aspect-ratio:1}
.holiday .port svg,.holiday .port img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.holiday .port::after{content:"";position:absolute;inset:-9px;border:1.5px solid var(--gold);border-radius:50%;clip-path:polygon(0 0,100% 0,100% 38%,62% 100%,0 100%)}
.holiday h3{margin-top:28px}
.holiday p{margin:10px auto 0;max-width:30ch;color:var(--muted);font-size:1rem}
.holiday .link{margin-top:16px;display:inline-block}

/* ---------- Excursions ---------- */
.excursions{background:#fff;border-top:1px solid var(--line)}
.ex-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{font:inherit;font-size:.95rem;padding:.5em 1.1em;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.chips button:hover{border-color:var(--gold)}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,72px);margin-top:44px}
.ex{display:grid;grid-template-columns:60px 1fr;gap:20px;padding:28px 0;border-top:1px solid var(--line)}
.ex[hidden]{display:none}
.ex-icon{width:60px;height:60px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;color:var(--gold-deep)}
.ex-icon svg{width:32px;height:32px}
.ex h3{font-size:1.35rem}
.ex-when{margin-top:6px;font-size:.93rem;color:var(--gold-deep);font-weight:500}
.ex-desc{margin-top:8px;color:var(--muted);font-size:1rem}
.ex details{margin-top:12px;font-size:.96rem}
.ex summary{cursor:pointer;font-weight:500;width:max-content;list-style:none;display:flex;align-items:center;gap:6px}
.ex summary::-webkit-details-marker{display:none}
.ex summary::before{content:"+";display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid currentColor;border-radius:50%;font-size:.8rem;line-height:1}
.ex details[open] summary::before{content:"–"}
.ex details p{margin-top:8px;color:var(--muted)}
.ex-book{margin-top:12px}
.ex-foot{margin-top:40px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;color:var(--muted)}
.ex-foot[hidden]{display:none}

/* ---------- Safari extensions (dark band, like the Kilimanjaro feature on the inspiration site) ---------- */
.safari{background:var(--ink);color:#E9E4D6}
.safari .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.safari h2{color:#fff}
.safari .section-lede{color:#BDB5A2}
.safari .btn{margin-top:32px}
.parks{list-style:none;margin:0;padding:0}
.parks li{display:grid;grid-template-columns:minmax(150px,.8fr) 1.4fr;gap:20px;padding:22px 0;border-bottom:1px solid #353127}
.parks li:first-child{border-top:1px solid #353127}
.parks h3{color:var(--gold);font-size:1.6rem}
.parks p{color:#CFC8B6}
.sister{margin-top:28px;font-size:.98rem;color:#BDB5A2}

/* ---------- Why choose us ---------- */
.why{background:var(--mist)}
.why .wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(32px,6vw,96px);align-items:start}
.why-quote{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.18;margin-top:28px}
.why-quote::before{content:"“";display:block;color:var(--gold);font-size:1.8em;line-height:.6;margin-bottom:12px}
.reasons{display:grid;grid-template-columns:1fr 1fr;gap:36px 40px}
.reasons h3{font-size:1.3rem;padding-top:14px;border-top:1.5px solid var(--gold)}
.reasons p{margin-top:8px;color:var(--muted)}

/* ---------- Services ---------- */
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:48px}
.service{padding:36px;border:1px solid var(--line);position:relative}
.service::before{content:"";position:absolute;left:-1px;top:-1px;width:64px;height:3px;background:var(--gold)}
.service h3{font-size:1.7rem}
.service p{margin-top:12px;color:var(--muted)}
.service ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.service li{padding-left:20px;position:relative}
.service li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1.5px;background:var(--gold)}
.service .link{margin-top:22px;display:inline-block}

/* ---------- Community ---------- */
.community{background:var(--ocean);color:#E4F2F0}
.community .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.community h2{color:#fff}
.community p{margin-top:16px;max-width:56ch;color:#CDE7E3;font-size:1.1rem}
.community-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- Travel tips ---------- */
.tips-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:44px}
.tip h3{font-size:1.25rem}
.tip p{margin-top:8px;color:var(--muted);font-size:1rem}

/* ---------- Closing call to action ---------- */
.closing{padding:0 0 clamp(72px,9vw,120px)}
.closing-box{border:1px solid var(--line);padding:clamp(36px,5vw,64px);display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;background:
  radial-gradient(circle at 100% 0,rgba(208,175,60,.16),transparent 45%),#fff}
.closing-box p{margin-top:12px;color:var(--muted);font-size:1.1rem}
.closing-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#BDB5A2;padding:72px 0 32px;font-size:.97rem}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:40px}
.footer-logo{width:190px;height:auto}
.footer-tagline{margin-top:18px;font-family:var(--serif);font-style:italic;color:#E9E4D6;max-width:30ch;font-size:1.08rem;line-height:1.5}
.site-footer h2{color:var(--gold);font-family:var(--serif);font-weight:500;font-size:1.2rem;margin:0 0 14px}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-base{margin-top:56px;padding-top:24px;border-top:1px solid #353127;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.88rem}
.footer-base ul{display:flex;gap:22px}

/* ---------- Enquiry drawer ---------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(22,20,15,.55);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:60}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(540px,100%);background:#fff;z-index:61;transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;padding:36px 32px;border-left:3px solid var(--gold)}
body.drawer-open .drawer{transform:none}
body.drawer-open .drawer-backdrop{opacity:1;visibility:visible}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.drawer-head h2{font-size:2.2rem}
.drawer-head p{margin-top:8px;color:var(--muted)}
.close-btn{background:var(--mist);border:0;width:44px;height:44px;border-radius:50%;cursor:pointer;flex:none;color:var(--ink);font-size:1.5rem;line-height:1}
.enquiry-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:.92rem;font-weight:500}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;padding:.7em .9em;border-radius:2px;border:1px solid #D5CFBF;background:#fff;color:var(--ink)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
.enquiry-form .btn{grid-column:1/-1}
.form-note{grid-column:1/-1;font-size:.9rem;color:var(--muted)}
.sent{display:none;margin-top:32px;padding:28px;background:var(--mist);border-left:3px solid var(--gold)}
.sent h3{font-size:1.6rem}
.sent p{margin-top:8px}
.drawer.is-sent .enquiry-form{display:none}
.drawer.is-sent .sent{display:block}

/* ---------- WhatsApp button ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;align-items:center;gap:8px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:10px 16px 10px 10px;text-decoration:none;font-weight:500;font-size:.95rem;box-shadow:0 10px 30px -12px rgba(22,20,15,.45)}
.wa-float span.dot{width:32px;height:32px;border-radius:50%;background:#25D366;display:grid;place-items:center}
.wa-float:hover{border-color:var(--gold)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav-list{display:none}
  .menu-toggle{display:block}
  .nav.open .nav-list{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:12px 24px 20px;max-height:calc(100vh - 126px);overflow-y:auto}
  .nav.open .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 6px 14px;display:none}
  .nav.open .has-dropdown.open .dropdown{display:block}
  .holiday-grid{grid-template-columns:repeat(2,1fr);row-gap:56px}
  .tips-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero .wrap,.intro .wrap,.safari .wrap,.why .wrap,.community .wrap,.closing-box{grid-template-columns:1fr}
  .porthole{margin:0 auto;max-width:460px}
  .ex-grid,.services-grid{grid-template-columns:1fr}
  .community-actions,.closing-actions{justify-content:flex-start}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .utility-msg,.utility-links a.hide-sm{display:none}
  .utility-links{margin:0 auto}
  .site-header .wrap{padding:0 16px;gap:8px;min-height:72px}
  .brand{gap:8px}
  .brand img{height:46px}
  .brand-text span{display:none}
  .brand-text strong{font-size:1.05rem}
  .nav{gap:0}
  .nav > .btn-gold{margin-left:0;padding:.55em .85em;font-size:.88rem}
  .menu-toggle{padding:6px}
  .hero-facts{grid-template-columns:1fr}
  .holiday-grid,.reasons,.tips-grid,.footer-grid{grid-template-columns:1fr}
  .parks li{grid-template-columns:1fr;gap:6px}
  .enquiry-form{grid-template-columns:1fr}
  .ex{grid-template-columns:48px 1fr;gap:16px}
  .ex-icon{width:48px;height:48px}
  .ex-icon svg{width:26px;height:26px}
  .wa-float .label{display:none}
  .wa-float{padding:8px}
}
@media (max-width:370px){.brand-text{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .porthole .arc,.porthole .slash{animation:none;stroke-dashoffset:0}
  .porthole .arc-label{animation:none;opacity:1}
  .drawer,.drawer-backdrop,.dropdown{transition:none}
}

/* ===========================================================================
   Additions for the multi-page site
   =========================================================================== */

/* ---------- Skip link: hidden until focused (WCAG 2.4.1) ---------- */
.skip-link{position:absolute;left:16px;top:-120px;z-index:100;background:var(--ink);color:#fff;padding:12px 20px;text-decoration:none;font-weight:500;border-radius:2px;transition:top .15s}
.skip-link:focus{top:12px}

/* ---------- Current page ---------- */
.nav-list > li > a[aria-current="page"],
.nav-list > li > button[aria-current="page"]{border-bottom-color:var(--gold)}
.dropdown a[aria-current="page"]{background:var(--mist);color:var(--gold-deep)}

/* ---------- Drawer: unreachable by keyboard while closed ---------- */
.drawer{visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s}
body.drawer-open .drawer{visibility:visible;transition:transform .3s ease,visibility 0s}
.drawer-head h2{font-size:clamp(1.9rem,5vw,2.2rem)}

/* The form and its confirmation swap in place, in the drawer and on the contact page. */
.enquiry-block.is-sent .enquiry-form{display:none}
.enquiry-block.is-sent .sent{display:block}
.sent-actions{margin-top:18px}

/* ---------- Form: honeypot, validation, status ---------- */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.field .opt{font-weight:400;color:var(--muted)}
.field-error{display:none;margin-top:2px;font-size:.86rem;color:#A3231B}
.field.is-invalid .field-error{display:block}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#A3231B}
.form-status{display:none;grid-column:1/-1;padding:12px 16px;border-left:3px solid var(--gold);background:var(--mist);font-size:.95rem}
.form-status.is-shown{display:block}
.form-status.is-error{border-color:#A3231B;background:#FCF2F1;color:#7F1C15}
.btn[disabled]{opacity:.65;cursor:progress}

/* ---------- Excursion filter: keep the count honest for screen readers ---------- */
.ex-count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Inner page hero ---------- */
.page-hero{padding:clamp(44px,6vw,80px) 0 clamp(30px,4vw,48px);border-bottom:1px solid var(--line)}
.page-hero.on-mist{background:var(--mist)}
.page-hero h1{font-size:clamp(2.5rem,5.4vw,4.4rem);font-weight:500;line-height:1.02;letter-spacing:-.02em}
.page-hero .lede{margin-top:20px;max-width:58ch;color:var(--muted);font-size:clamp(1.06rem,1.4vw,1.22rem)}
.page-hero .hero-facts{margin-top:36px}

/* ---------- Simple prose blocks ---------- */
.prose p{max-width:62ch;color:var(--muted);font-size:1.1rem;line-height:1.75}
.prose p + p{margin-top:18px}
.prose p:first-child{color:var(--ink)}
.two-col{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,6vw,96px);align-items:start}

/* ---------- Statement cards (vision and mission) ---------- */
.statements{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:48px}
.statement{padding:36px;border:1px solid var(--line);position:relative}
.statement::before{content:"";position:absolute;left:-1px;top:-1px;width:64px;height:3px;background:var(--gold)}
.statement h3{font-size:1.6rem}
.statement p{margin-top:12px;color:var(--muted)}

/* ---------- Values ---------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 40px;margin-top:48px}
.value h3{font-size:1.25rem;padding-top:14px;border-top:1.5px solid var(--gold)}
.value p{margin-top:8px;color:var(--muted)}

/* ---------- Package rows ---------- */
.package{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--line)}
.package-media .port{position:relative;width:min(100%,300px);margin:0 auto;aspect-ratio:1}
.package-media .port svg,.package-media .port img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.package-media .port::after{content:"";position:absolute;inset:-10px;border:1.5px solid var(--gold);border-radius:50%;clip-path:polygon(0 0,100% 0,100% 38%,62% 100%,0 100%)}
.package h3{font-size:clamp(1.7rem,3vw,2.3rem)}
.package p{margin-top:14px;color:var(--muted);font-size:1.08rem;line-height:1.7;max-width:56ch}
.package .btn{margin-top:26px}
.package.reverse .package-media{order:2}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:start}
.contact-card{border:1px solid var(--line);padding:32px;position:relative}
.contact-card::before{content:"";position:absolute;left:-1px;top:-1px;width:64px;height:3px;background:var(--gold)}
.contact-card h2{font-size:1.7rem}
.contact-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:16px}
.contact-list li{display:grid;gap:2px}
.contact-list .k{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contact-list .v{font-size:1.08rem}
.contact-list a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:4px}
.contact-list a:hover{color:var(--ink)}
.map-frame{margin-top:48px;border:1px solid var(--line);line-height:0}
.map-frame iframe{width:100%;height:380px;border:0}
.map-note{margin-top:10px;font-size:.9rem;color:var(--muted);line-height:1.6}

/* ---------- Missing content notice ---------- */
.todo-note{margin-top:24px;padding:16px 20px;border-left:3px solid var(--gold);background:var(--mist);color:var(--muted);font-size:.96rem}

/* ---------- 404 ---------- */
.error-page{padding:clamp(72px,10vw,140px) 0;text-align:center}
.error-page h1{font-size:clamp(3rem,8vw,5.5rem);line-height:1}
.error-page p{margin:20px auto 0;max-width:48ch;color:var(--muted);font-size:1.12rem}
.error-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ---------- Responsive for the additions ---------- */
@media (max-width:900px){
  .two-col,.statements,.contact-grid{grid-template-columns:1fr}
  .values{grid-template-columns:1fr 1fr}
  .package{grid-template-columns:1fr;gap:28px}
  .package.reverse .package-media{order:0}
  .package-media .port{max-width:240px}
}
@media (max-width:600px){
  .values{grid-template-columns:1fr}
  .statement,.contact-card{padding:26px}
  .map-frame iframe{height:300px}
}

/* The contact details stay in view while the form is scrolled. */
@media (min-width:901px){
  .contact-card{position:sticky;top:104px}
}

/* A full-width tinted band. Same colours as .intro, without its two-column grid. */
.band{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ===========================================================================
   Legibility pass
   =========================================================================== */

/* Bodoni Moda carries an optical-size axis. Browsers set it from the font
   size, so the bigger a heading gets the thinner its hairlines become, which
   reads as faint rather than elegant. Holding the axis near a text size keeps
   the stems solid at display sizes, and a little extra weight finishes it. */
h1, h2, h3,
.why-quote,
.brand-text strong,
.drawer-head h2,
.page-hero h1 {
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 16, 'wght' 600;
}

/* The italic display lines stay lighter, so they still read as a quote. */
.vision p,
.footer-tagline {
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 16, 'wght' 500;
}

/* Form controls need a 3:1 boundary against the page (WCAG 1.4.11).
   The old hairline sat at 1.55:1 and looked washed out. */
.field input,
.field select,
.field textarea {
  border-color: #8A8474;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #6E6858;
}

/* ===========================================================================
   Full-bleed photographic hero
   =========================================================================== */
.hero-photo{position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;background:var(--ink);min-height:clamp(500px,74vh,740px)}
.hero-photo-media{position:absolute;inset:0;z-index:-2;display:block}
.hero-photo-media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero-photo-scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(95deg,rgba(22,20,15,.94) 0%,rgba(22,20,15,.88) 30%,rgba(22,20,15,.58) 60%,rgba(22,20,15,.22) 100%)}
.hero-photo-content{position:relative;padding-top:clamp(56px,7vw,92px);padding-bottom:clamp(56px,7vw,92px);color:#fff}
.hero-photo h1{color:#fff;font-size:clamp(2.9rem,6vw,5.6rem);line-height:1;letter-spacing:-.02em;max-width:15ch;text-wrap:balance}
.hero-photo .hero-lede{color:#EFEADE;max-width:46ch}
.hero-photo .hero-facts li{border-top-color:var(--gold);color:#fff}

@media (max-width:900px){
  /* Text runs the full width on small screens, so the scrim runs top to bottom. */
  .hero-photo{min-height:0}
  .hero-photo-scrim{background:
    linear-gradient(180deg,rgba(22,20,15,.58) 0%,rgba(22,20,15,.74) 45%,rgba(22,20,15,.90) 100%)}
  /* Framed for the current hero: a tall drone shot whose dhow sits right of
     centre. The narrow box crops the sides hard, so pull the focal point
     across rather than letting it centre on empty water. Retune this if the
     hero photograph changes. */
  .hero-photo-media img{object-position:70% 25%}
  .hero-photo h1{max-width:none}
}