/* Hilal Stays & Experiences — the site's identity, 2026. */
@font-face{font-family:'Cormorant Garamond';src:url('assets/cormorant-normal-semibold.woff') format('woff');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('assets/cormorant-italic-semibold.woff') format('woff');font-style:italic;font-weight:600;font-display:swap}
:root{
  --gold:#b99860;
  --ink:#101010;
  --white:#ffffff;
  --paper:#f3eee4;
  --muted:#5c5a55;
  --line:#ded7cb;
  --copper:var(--gold);
  --serif:'DM Sans',Arial,sans-serif;
  --sans:'DM Sans',Arial,sans-serif;
}
body{font-size:16px;line-height:1.6}
main{background:var(--paper)}
::selection{background:var(--gold);color:var(--ink)}
button,a,input,select,textarea{outline-color:var(--ink)}
button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
h1,h1>em,.section-title,.section-title em,.experience-card h3,.package-card h3,
.custom-escape h3,.story-bottom b,.stay-caption h3,.map-place strong,
.review-card blockquote,.final-copy>h2,.final-copy>h2 em,.footer-top>p,
.detail-copy h2,.trip-main>h2,.trip-aside-copy>h3,.cars-photo-note>span{
  font-weight:600;letter-spacing:-.025em;
}
h1{font-size:clamp(88px,8.5vw,132px);line-height:.96;letter-spacing:-.035em}
h1>em{letter-spacing:-.035em}
.hero-eyebrow{font-size:11px;letter-spacing:1.9px}
.hero-eyebrow>span:first-child,.video-progress>span{background:var(--gold)}
.hero-description{font-size:16px;line-height:1.8;max-width:480px}
.section-title{line-height:1.04}
.section-kicker{color:var(--ink);font-size:12px;font-weight:600;letter-spacing:1.7px}
.section-copy{font-size:16px;line-height:1.85;color:var(--muted)}
.subtle-note,.section-footnote{font-size:13px;line-height:1.8;color:var(--muted)}
.small-kicker{font-size:11px;color:var(--muted)}
.text-link{font-size:14px;font-weight:600;color:var(--ink);border-color:var(--gold)}
.preview-chip{font-size:10px;font-weight:500}
.primary-button,.find-stay,.enquiry-cta,.mobile-plan-bar>button{
  background:var(--ink);color:var(--white);border-color:var(--ink);font-weight:600;
}
.primary-button:hover,.find-stay:hover,.enquiry-cta:hover,.mobile-plan-bar>button:hover{
  background:var(--gold);color:var(--ink);border-color:var(--gold);
}
.primary-button{min-height:56px;font-size:15px}
.brand{position:relative;width:220px;min-width:220px;display:block;line-height:0}
.brand-logo{display:block;width:220px;height:auto}
.brand-logo-light,.brand-emblem{display:none}
.site-header{gap:24px}
.site-header .nav-link{font-size:14px;font-weight:500}
.site-header .desktop-nav{gap:25px;margin-left:0}
.site-header.is-scrolled{background:#fffffff5;box-shadow:0 1px 0 var(--line)}
.site-header.is-scrolled .brand-logo-light{display:block}
.site-header.is-scrolled .brand-logo-dark{display:none}
.header-book{font-size:13px;font-weight:600;min-height:46px}
.site-header.is-scrolled .header-book{background:var(--ink);border-color:var(--ink);color:white}
.site-header.is-scrolled .header-book:hover,.header-book:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.language-toggle{min-width:44px;min-height:44px;justify-content:center;font-size:12px}
.site-header:has(.mobile-menu:not([hidden])){background:var(--white);color:var(--ink)}
.site-header:has(.mobile-menu:not([hidden])) .brand-logo-light{display:block}
.site-header:has(.mobile-menu:not([hidden])) .brand-logo-dark{display:none}
.mobile-menu{background:var(--white)}
.mobile-menu>a{font-weight:600}
.coastal-note{background:var(--paper);font-size:12px}
.coastal-note>a{font-size:12px;color:var(--ink);min-height:44px}
.booking-form{background:var(--white)}
.field-label{font-size:12px;color:var(--muted)}
.field-value,.field-value.placeholder{font-size:16px;color:var(--ink)}
.field-value{font-weight:600}
.find-stay{font-size:14px}
.field-icon{color:var(--muted)}
.booking-topline>p{font-size:10px}
.booking-bottomline>p,.film-label{font-size:12px}
.arrival-ribbon{background:var(--paper)}
.arrival-ribbon>span{color:var(--ink);font-size:14px}
.arrival-ribbon .icon,.little-sun{color:var(--gold)}
.intro-copy>.section-copy{font-size:16px}
.intro-main-photo figcaption{font-size:11px;color:var(--muted)}
.intro-coordinate{color:var(--ink);font-size:11px}
.intro-coordinate small{font-size:10px;color:var(--muted)}
.experiences-section,.stays-section,.map-section{background:var(--white)}
.experience-filters button{font-size:13px;padding:11px 18px;color:var(--ink)}
.experience-filters button:not(.active){color:var(--ink)}
.experience-filters button:hover:not(.active){background:var(--paper)}
.experience-meta{font-size:11px;line-height:1.7;color:var(--muted);flex-wrap:wrap;letter-spacing:.4px}
.experience-card h3{font-size:33px}
.experience-card>p{font-size:15px;line-height:1.8;color:var(--muted)}
.experience-card>.text-link{font-size:13px}
.packages-section{background:var(--ink);color:var(--white)}
.packages-section .section-kicker{color:var(--gold)}
.packages-section .section-copy,.packages-section .preview-chip{color:var(--paper)}
.package-card{background:var(--white)}
.package-card.signature{outline-color:var(--gold)}
.signature-band{font-size:10px;font-weight:600;letter-spacing:1px;background:var(--white)}
.package-duration{font-size:11px;color:var(--muted);letter-spacing:.9px}
.package-card h3{font-size:39px}
.package-description,.package-includes li{font-size:15px;color:var(--muted)}
.package-description{min-height:54px}
.package-includes .icon{color:var(--gold);stroke-width:2}
.package-price small{font-size:12px;color:var(--muted)}
.package-price>span{font-size:12px;color:var(--muted)}
.package-price strong{font-weight:600}
.package-card .primary-button{font-size:14px;min-height:51px}
.package-detail-link{font-size:13px;line-height:1.6;min-height:34px;color:var(--ink)}
.custom-escape h3{font-size:34px;color:var(--white)}
.custom-escape p{font-size:15px;color:var(--paper)}
.button-outline-light{font-size:14px;font-weight:500;min-height:51px;border-color:var(--gold)}
.stories-section,.cars-section,.guestbook-section{background:var(--paper)}
.story-top,.story-bottom small{font-size:10px;letter-spacing:1px}
.story-bottom b{font-size:30px}
.story-dialog{background:var(--ink)}
.story-dialog>p{font-size:12px;color:var(--paper)}
.image-caption{font-size:10px;font-weight:500;color:var(--ink)}
.stay-location{font-size:12px}
.stay-caption h3{font-size:39px}
.stay-caption p{font-size:15px;line-height:1.8;color:var(--muted)}
.cars-copy>.section-copy{font-size:16px}
.car-partner>span{font-size:10px;color:var(--muted)}
.car-option{background:transparent;border-color:var(--line)}
.car-option.selected{background:var(--white);border-color:var(--ink);box-shadow:inset 0 -2px var(--gold)}
.car-option strong{font-size:12px;font-weight:600;white-space:normal}
.car-option small{font-size:12px;color:var(--muted)}
.cars-copy>.primary-button{font-size:14px}
.partner-link{font-size:13px;min-height:36px}
.cars-copy>.subtle-note{font-size:13px}
.cars-photo>figcaption{font-size:10px}
.cars-photo-note>span{font-size:42px}
.map-place-list{background:var(--paper)}
.map-place strong{font-size:31px}
.map-place small{font-size:13px;color:var(--muted)}
.map-place.active .map-place-number{background:var(--ink);border-color:var(--ink);color:var(--white)}
.map-place-number{font-size:11px;color:var(--ink)}
.review-card{background:var(--white)}
.review-sample{font-size:10px;color:var(--muted);letter-spacing:.6px}
.review-stars{color:var(--gold)}
.review-card blockquote{font-size:31px;line-height:1.3;color:var(--ink)}
.review-person strong{font-size:14px;font-weight:600}
.review-person small{font-size:12px;color:var(--muted)}
.review-card .review-trip{font-size:11px;color:var(--muted)}
.faq-heading .section-copy{font-size:16px;max-width:400px}
.faq-list summary{font-size:16px;font-weight:500}
.faq-list details>p{font-size:15px;color:var(--muted)}
.faq-list summary .icon{color:var(--ink)}
.final-shade{background:#10101080}
.final-copy>.section-kicker{color:var(--white)}
.final-copy>.primary-button{background:var(--white);color:var(--ink);border-color:var(--white)}
.final-copy>.primary-button:hover{background:var(--gold);border-color:var(--gold)}
.final-copy>p:last-child{font-size:13px;color:white}
.full-footer{background:var(--ink);color:var(--white)}
.footer-brand{display:block;line-height:0}
.footer-brand>img{width:230px;max-width:100%;height:auto}
.footer-top>p{font-size:34px;color:var(--paper)}
.footer-whatsapp{font-size:18px}
.footer-whatsapp>.icon{color:var(--gold)}
.footer-whatsapp>span>small{font-size:13px;color:var(--paper)}
.footer-links>div>span{font-size:11px;font-weight:500;color:var(--gold)}
.footer-links a,.footer-links p,.footer-links button{font-size:14px;color:var(--paper)}
.footer-bottom{color:var(--paper);font-size:12px}
.footer-bottom button{font-size:13px;color:var(--white)}
.footer-top,.footer-bottom{border-color:#ffffff30}
.mobile-plan-bar>div>span{font-size:10px;color:var(--muted)}
.mobile-plan-bar>div>b{font-size:12px;color:var(--ink)}
.mobile-plan-bar>button{font-size:13px;min-height:46px}
.detail-copy>p:not(.section-kicker){font-size:15px;color:var(--muted)}
.detail-copy>.subtle-note{font-size:13px!important}
.detail-meta{font-size:13px;color:var(--muted)}
.detail-itinerary li{font-size:15px;color:var(--muted)}
.detail-itinerary b{font-size:12px;color:var(--ink);font-weight:600}
.detail-copy>.primary-button{font-size:14px}
.trip-label,.trip-experiences>legend{font-size:14px;color:var(--ink);font-weight:600}
.trip-main>.section-kicker{font-size:11px}
.trip-main>h2{font-size:48px;max-width:410px}
.trip-activity-chip{font-size:12px;color:var(--muted);background:var(--white)}
.trip-activity-chip.selected{background:var(--ink);border-color:var(--ink);color:var(--white)}
.trip-activity-chip.selected .icon{color:var(--gold)}
.trip-main input:not([type=checkbox]),.trip-main select,.trip-main textarea{font-size:16px;background:var(--white)}
.trip-main input::placeholder{font-size:14px;color:var(--muted)}
.trip-date-row label>span,.trip-people-row label>span{font-size:13px;color:var(--ink)}
.trip-flexible,.trip-back{font-size:13px;color:var(--muted)}
.trip-flexible input{accent-color:var(--ink)}
.trip-summary,.trip-privacy{font-size:13px;color:var(--muted)}
.trip-summary b{color:var(--ink);font-weight:600}
.trip-error{color:#923b24;font-size:14px}
.trip-aside-copy>span{font-size:11px}
.trip-aside-copy>p{font-size:13px;color:var(--white)}

/* A native scroll sequence: moving copy over one pinned, full-bleed film. */
.ocean-story{--ocean-height:100svh;position:relative;isolation:isolate;background:var(--ink);color:var(--white);scroll-margin-top:-120px}
.ocean-pin{position:sticky;top:0;height:var(--ocean-height);overflow:hidden;z-index:0}
.ocean-media,.ocean-media>img,.ocean-media>video,.ocean-shade{position:absolute;inset:0;width:100%;height:100%}
.ocean-media>img,.ocean-media>video{object-fit:cover;object-position:52% center}
.ocean-media>video{opacity:0;transition:opacity .6s}
.ocean-media>video.is-ready{opacity:1}
.ocean-shade{background:linear-gradient(90deg,#101010bd 0%,#1010108c 36%,#10101038 70%),linear-gradient(0deg,#10101085,transparent 24%,transparent 76%,#10101045);pointer-events:none}
.ocean-chapters{position:relative;z-index:1;margin-top:calc(0px - var(--ocean-height));pointer-events:none}
.ocean-chapter{min-height:var(--ocean-height);display:flex;align-items:center;padding:160px max(64px,calc((100% - 1280px)/2)) 135px}
.ocean-chapter-copy{max-width:800px;pointer-events:auto}
.ocean-kicker{display:flex;align-items:baseline;gap:15px;font-size:11px;font-weight:500;line-height:1.7;letter-spacing:1.8px;color:var(--white);margin-bottom:28px}
.ocean-kicker>span:first-child{color:var(--gold);letter-spacing:1px}
.ocean-chapter h2,.ocean-chapter h3{font:600 clamp(70px,7.8vw,112px)/.98 var(--serif);letter-spacing:-.035em;margin:0;color:var(--white)}
.ocean-chapter h2 em,.ocean-chapter h3 em{font-weight:600}
.ocean-copy{max-width:425px;font-size:17px;line-height:1.85;color:var(--white);margin-top:30px;text-wrap:pretty}
.ocean-plan{margin-top:32px;background:var(--white);color:var(--ink);border-color:var(--white);min-width:256px;justify-content:space-between}
.ocean-plan:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.ocean-bottom{position:absolute;left:max(64px,calc((100% - 1280px)/2));right:max(64px,calc((100% - 1280px)/2));bottom:max(32px,var(--safe-bottom));display:flex;align-items:center;justify-content:space-between;gap:30px;z-index:2}
.ocean-story:not(.is-pinned) .ocean-bottom{visibility:hidden}
.ocean-progress{display:flex;gap:15px;align-items:center;font-size:12px;line-height:1;min-height:44px}
.ocean-progress-track{display:flex;gap:6px;width:160px}
.ocean-progress-track>i{height:2px;background:#ffffff45;position:relative;flex:1;overflow:hidden}
.ocean-progress-track>i:after{content:'';display:block;position:absolute;inset:0 auto 0 0;width:0;background:var(--gold)}
.ocean-progress-track>i.is-complete:after{width:100%}
.ocean-progress-track>i.is-current:after{width:var(--chapter-progress,0%)}
.ocean-scroll-note{font-size:10px;letter-spacing:1.2px;line-height:1.7;display:flex;gap:20px;align-items:center}
.ocean-scroll-note .icon{width:20px;height:20px;transform:rotate(90deg)}
.ocean-play-toggle{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;min-width:119px;min-height:44px;padding:10px 14px;border:1px solid #ffffff80;border-radius:2px;color:var(--white);background:#10101033}
.ocean-play-toggle .icon{width:14px;height:14px}
.ocean-play-toggle:hover{background:#10101085}
.site-header.is-scrolled.is-ocean{background:linear-gradient(#10101070,transparent);backdrop-filter:none;box-shadow:none;color:var(--white)}
.site-header.is-ocean .nav-link{color:var(--white)}
.site-header.is-ocean .brand-logo-light{display:none}
.site-header.is-ocean .brand-logo-dark{display:block}
.site-header.is-ocean .header-book{background:var(--white);color:var(--ink);border-color:var(--white)}
.site-header.is-ocean .header-book:hover{background:var(--gold);border-color:var(--gold)}
.site-header.is-ocean .header-divider{background:#ffffff55}
.site-header.is-ocean:has(.mobile-menu:not([hidden])){background:var(--white);color:var(--ink)}
.site-header.is-ocean:has(.mobile-menu:not([hidden])) .brand-logo-light{display:block}
.site-header.is-ocean:has(.mobile-menu:not([hidden])) .brand-logo-dark{display:none}

@media(max-width:1120px){
  .site-header .desktop-nav{display:none}
  .mobile-menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:44px;min-height:44px;padding:10px}
  .mobile-menu-toggle span{width:22px;height:1px;background:currentColor}
  .mobile-menu{position:absolute;display:flex;flex-direction:column;top:100%;left:0;right:0;padding:15px 32px 30px;box-shadow:0 20px 30px #10101015}
  .mobile-menu>a{font-family:var(--serif);font-size:31px;padding:12px 0;border-bottom:1px solid var(--line)}
  .mobile-menu>p{font-size:12px;color:var(--muted);margin-top:20px}
  .section-kicker{font-size:11px}
  .package-card h3{font-size:33px}
  .package-description,.package-includes li{font-size:14px}
  .package-duration{font-size:10px}
  .ocean-chapter{padding-inline:40px}
  .ocean-bottom{left:40px;right:40px}
  .ocean-scroll-note{display:none}
}
@media(max-width:760px){
  .section-copy,.intro-copy>.section-copy,.cars-copy>.section-copy{font-size:16px}
  .section-title,.intro-copy .section-title,.cars-copy .section-title{font-size:clamp(48px,8.6vw,64px)}
  .section-kicker{font-size:10px;letter-spacing:1.3px}
  .section-heading-aside .subtle-note{font-size:13px}
  .experience-filters button{font-size:12px;padding:9px 13px}
  .experience-meta{font-size:10px}
  .experience-card h3{font-size:32px}
  .experience-card>p{font-size:14px}
  .experience-card>.text-link{font-size:12px}
  .package-card h3{font-size:40px}
  .package-description,.package-includes li{font-size:15px}
  .package-description{min-height:0}
  .package-duration{font-size:11px}
  .package-card .primary-button,.package-detail-link{font-size:14px}
  .custom-escape h3{font-size:34px}
  .custom-escape p{font-size:15px}
  .custom-escape .button-outline-light{font-size:14px}
  .story-top,.story-bottom small{font-size:9px;letter-spacing:.6px}
  .story-bottom b{font-size:28px}
  .stay-caption h3{font-size:36px}
  .stay-caption p{font-size:15px}
  .small-kicker{font-size:11px}
  .car-option strong{font-size:12px}
  .car-option small{font-size:12px;line-height:1.6}
  .cars-copy>.subtle-note{font-size:13px}
  .map-place small{font-size:12px}
  .map-place strong{font-size:29px}
  .section-footnote{font-size:13px}
  .review-card blockquote{font-size:33px}
  .review-sample{font-size:10px}
  .review-person strong{font-size:14px}
  .review-person small{font-size:12px}
  .review-card .review-trip{font-size:11px}
  .faq-list summary{font-size:15px}
  .faq-list details>p{font-size:15px}
  .faq-heading .section-copy{font-size:16px}
  .final-copy>.section-kicker{font-size:10px}
  .final-copy>.primary-button{font-size:14px}
  .final-copy>p:last-child{font-size:13px}
  .footer-top{grid-template-columns:1fr;gap:27px}
  .footer-brand>img{width:230px}
  .footer-top>p{font-size:32px}
  .footer-whatsapp{grid-column:auto;font-size:18px}
  .footer-links a,.footer-links p,.footer-links button{font-size:14px}
  .footer-links>div>span{font-size:10px;letter-spacing:1.1px}
  .footer-bottom{font-size:12px}
  .footer-bottom>span:nth-child(2){font-size:12px}
  .footer-bottom>button{font-size:13px}
  .mobile-plan-bar>div>b{font-size:12px;max-width:165px}
  .mobile-plan-bar>div>span{font-size:9px}
  .mobile-plan-bar>button{font-size:13px;min-height:46px}
  .trip-main>h2{font-size:43px}
  .trip-main>.section-kicker{font-size:10px}
  .trip-label,.trip-experiences>legend{font-size:14px}
  .trip-summary,.trip-privacy{font-size:13px}
  .ocean-chapter{padding:130px 27px 125px}
  .ocean-chapter h2,.ocean-chapter h3{font-size:clamp(58px,10vw,82px);line-height:1}
  .ocean-kicker{font-size:10px;gap:10px;letter-spacing:1.1px;margin-bottom:25px;max-width:350px}
  .ocean-copy{font-size:16px;line-height:1.85;max-width:345px;margin-top:25px}
  .ocean-bottom{left:27px;right:27px;bottom:calc(24px + var(--safe-bottom))}
  .ocean-progress{font-size:11px;gap:12px}
  .ocean-progress-track{width:100px}
  .ocean-play-toggle{min-width:112px;font-size:11px}
  .ocean-plan{font-size:14px;min-width:260px;margin-top:28px}
  .ocean-shade{background:linear-gradient(90deg,#101010a8,#10101060),linear-gradient(0deg,#10101085,transparent 28%,transparent 77%,#10101050)}
}
@media(max-width:600px){
  .site-header{height:calc(104px + var(--safe-top));padding:var(--safe-top) max(16px,var(--safe-right)) 0 max(16px,var(--safe-left));gap:12px}
  .header-actions{gap:4px}
  .language-toggle{font-size:12px;min-width:44px}
  .mobile-menu-toggle{width:44px;min-width:44px;min-height:44px;padding:11px}
  .brand,.brand-logo{width:220px;min-width:220px}
  .hero-content{top:19%;left:7%;right:7%}
  h1{font-size:clamp(66px,18vw,86px);line-height:.98;letter-spacing:-.035em;margin-top:22px}
  .hero-eyebrow{font-size:10px;line-height:1.7;letter-spacing:1.25px}
  .hero-description{font-size:15px;line-height:1.8;max-width:310px;margin-top:22px}
  .booking-topline>p{font-size:9px;max-width:220px;letter-spacing:1px}
  .booking-bottomline>p{font-size:10px}
  .field-label,.destination-field .field-label{font-size:12px}
  .field-value,.field-value.placeholder,.destination-field .field-value,.guests-field .field-value{font-size:16px}
  .find-stay{font-size:14px;min-height:49px}
  .coastal-note{font-size:11px}
  .coastal-note>a{font-size:11px}
  .arrival-ribbon{min-height:110px;gap:18px}
  .arrival-ribbon>span{font-size:11px;line-height:1.6}
  .intro-main-photo figcaption{font-size:10px;line-height:1.6}
  .experience-meta{font-size:10px;letter-spacing:0;gap:2px;display:block}
  .experience-meta>span{display:block}
  .experience-meta>span+span:before{display:none}
  .experience-card h3{font-size:30px}
  .experience-card>p{font-size:14px}
  .experience-card>.text-link{font-size:12px;gap:7px}
  .experience-filters{gap:8px}
  .experience-filters button{font-size:12px;min-height:40px}
  .package-card h3{font-size:39px}
  .signature-band{font-size:9px}
  .package-price small,.package-price>span{font-size:12px}
  .image-caption{font-size:9px;letter-spacing:.7px}
  .car-options{grid-template-columns:1fr;gap:10px}
  .car-option{display:grid;grid-template-columns:88px 1fr auto;gap:10px;align-items:center;text-align:left;padding:8px 12px}
  .car-option img{height:49px}
  .car-option strong{font-size:13px;margin:0}
  .car-option small{font-size:12px;margin:0;max-width:88px;text-align:right}
  .cars-photo>figcaption{font-size:9px;letter-spacing:.7px}
  .cars-photo-note>span{font-size:35px}
  .map-place small{font-size:12px}
  .map-place strong{font-size:27px}
  .review-card blockquote{font-size:32px}
  .final-copy>h2{font-size:55px}
  .trip-main input:not([type=checkbox]),.trip-main select,.trip-main textarea{font-size:16px!important}
  .trip-date-row label>span,.trip-people-row label>span{font-size:13px}
}
@media(max-width:359px){
  .brand{width:48px;min-width:48px}
  .brand-logo{display:none!important}
  .brand-emblem{display:block;width:48px;height:48px;object-fit:contain}
  .hero-eyebrow{font-size:9px}
  .hero-content{top:18%}
  h1{font-size:66px}
  .ocean-chapter{padding-inline:22px}
  .ocean-chapter h2,.ocean-chapter h3{font-size:54px}
  .ocean-bottom{left:22px;right:22px}
  .ocean-progress-track{width:70px}
}
@media(prefers-reduced-motion:reduce){
  .ocean-pin{position:absolute;inset:0;height:100%}
  .ocean-chapters{margin-top:0;padding-bottom:70px}
  .ocean-chapter{min-height:0;padding-top:90px;padding-bottom:60px}
  .ocean-progress,.ocean-scroll-note{visibility:hidden}
  .ocean-media>video{transition:none}
  .site-header,.primary-button{transition:none}
}

/* Readability refresh: one clear type family, compact navigation and guest services. */
:root{--header-height:80px}
html{scroll-padding-top:calc(var(--header-height) + var(--safe-top,0px))}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{height:calc(var(--header-height) + var(--safe-top,0px));padding:var(--safe-top,0px) 5.2% 0;gap:24px}
.brand,.brand-logo{width:184px;min-width:184px}
.brand-logo{height:auto}
.brand-emblem{display:none}
.site-header .nav-link{font-size:14px;font-weight:500}
.header-actions{gap:16px}
.header-book{min-height:43px;font-size:13px;padding-inline:18px;gap:20px}
.header-divider{height:20px}
.mobile-menu>a{font:500 24px/1.4 var(--sans)}
h1,h1>em,.section-title,.section-title em,.final-copy>h2,.final-copy>h2 em,
.ocean-chapter h2,.ocean-chapter h3,.ocean-chapter h2 em,.ocean-chapter h3 em{
  font-family:var(--sans);font-style:normal;font-weight:500;letter-spacing:-.045em;
}
h1{font-size:clamp(66px,6.9vw,104px);line-height:1.04}
h1>em{font-style:normal}
.hero-description{font-size:17px;line-height:1.75;max-width:510px}
.section-title{font-size:clamp(40px,4vw,60px);line-height:1.12;letter-spacing:-.04em}
.intro-copy .section-title,.cars-copy .section-title{font-size:clamp(40px,3.8vw,54px);line-height:1.15}
.section-title em{font-style:normal;font-weight:500}
.section-copy{font-size:17px;line-height:1.8}
.section-kicker{font-size:12px;line-height:1.8;letter-spacing:1.2px}
.experience-card h3,.package-card h3,.stay-caption h3,.map-place strong,
.custom-escape h3,.detail-copy h2,.trip-main>h2,.trip-aside-copy>h3{
  font-family:var(--sans);font-weight:500;font-style:normal;letter-spacing:-.035em;line-height:1.22;
}
.experience-card h3{font-size:27px}
.package-card h3{font-size:30px}
.stay-caption h3{font-size:30px}
.custom-escape h3{font-size:28px}
.map-place strong{font-size:25px}
.review-card blockquote{font:400 23px/1.55 var(--sans);letter-spacing:-.015em;min-height:0}
.footer-top>p{font-family:var(--sans);font-style:normal;font-size:28px;font-weight:400;line-height:1.4;letter-spacing:-.03em}
.final-copy>h2{font-size:clamp(44px,4.8vw,70px);line-height:1.15}
.cars-photo-note>span{font:500 34px/1.2 var(--sans);letter-spacing:-.035em}
.detail-copy h2{font-size:37px}
.trip-main>h2{font-size:38px}
.trip-main>h2 em{font-style:normal;font-weight:500}
.trip-aside-copy>h3{font-size:40px}
.ocean-story{scroll-margin-top:calc(-1 * (var(--header-height) + var(--safe-top,0px)))}
.ocean-chapter{scroll-margin-top:0}
.ocean-chapter-copy{max-width:830px}
.ocean-chapter h2,.ocean-chapter h3{font-size:clamp(56px,5.5vw,82px);line-height:1.08;letter-spacing:-.045em;font-weight:500}
.ocean-kicker{font-size:11px;letter-spacing:1.2px;margin-bottom:26px}
.ocean-copy{font-size:18px;line-height:1.8;max-width:480px;margin-top:28px}
.ocean-chapter-link{display:inline-flex;align-items:center;gap:30px;min-height:48px;margin-top:28px;padding-bottom:5px;border-bottom:1px solid var(--gold);font-size:15px;font-weight:500;color:var(--white)}
.ocean-chapter-link .icon{width:20px;height:20px}
.ocean-plan{font-size:15px}
.intro-collage .intro-main-photo>img{object-position:58% center}
.services-section{background:var(--paper);padding:44px 0 56px}
.services-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.service-card{background:var(--white);border:1px solid var(--line);border-top:2px solid var(--gold);padding:27px 24px 26px;min-width:0}
.service-icon{display:block;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;width:42px;height:42px;margin-bottom:23px}
.service-card h3{font:600 20px/1.4 var(--sans);letter-spacing:-.02em;color:var(--ink);margin:0}
.service-card p{font-size:15px;line-height:1.75;color:var(--muted);margin-top:11px;max-width:240px}
@media(max-width:1120px){
  .site-header{padding-inline:4%}
  .header-actions{gap:10px}
  .services-grid{gap:12px}
  .service-card{padding:24px 18px}
  .service-card h3{font-size:18px}
  .service-card p{font-size:14px}
  .experience-card h3{font-size:27px}
  .package-card h3{font-size:27px}
  .ocean-chapter h2,.ocean-chapter h3{font-size:64px}
}
@media(max-width:760px){
  .section-title,.intro-copy .section-title,.cars-copy .section-title{font-size:42px;line-height:1.15}
  .section-copy,.intro-copy>.section-copy,.cars-copy>.section-copy{font-size:16px}
  .services-section{padding:28px 0 36px}
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .service-card{padding:23px 20px 24px}
  .service-icon{width:38px;height:38px;margin-bottom:20px}
  .service-card h3{font-size:19px}
  .service-card p{font-size:14px;line-height:1.7;max-width:240px}
  .experience-card h3{font-size:26px}
  .package-card h3{font-size:31px}
  .stay-caption h3{font-size:29px}
  .map-place strong{font-size:25px}
  .custom-escape h3{font-size:27px}
  .review-card blockquote{font-size:24px;line-height:1.55}
  .final-copy>h2{font-size:44px}
  .footer-top>p{font-size:27px}
  .detail-copy h2{font-size:33px}
  .trip-main>h2{font-size:35px}
  .ocean-chapter{padding:130px 27px 125px}
  .ocean-chapter h2,.ocean-chapter h3{font-size:clamp(44px,7.6vw,60px);line-height:1.12}
  .ocean-copy{font-size:17px;line-height:1.75;max-width:420px}
  .ocean-chapter-link{font-size:14px}
  .ocean-plan{font-size:14px}
}
@media(max-width:600px){
  :root{--header-height:72px}
  .site-header{height:calc(72px + var(--safe-top,0px));padding:var(--safe-top,0px) max(18px,var(--safe-right)) 0 max(18px,var(--safe-left));gap:16px}
  .brand,.brand-logo{width:160px;min-width:160px}
  .brand-logo{height:auto}
  .header-actions{gap:4px}
  .hero-content{top:18.5%}
  h1{font-size:clamp(54px,15.4vw,76px);line-height:1.08;letter-spacing:-.055em}
  .hero-description{font-size:16px;line-height:1.75;max-width:310px;margin-top:23px}
  .section-title,.intro-copy .section-title,.cars-copy .section-title{font-size:37px;line-height:1.2;letter-spacing:-.04em}
  .section-kicker{font-size:11px;letter-spacing:.9px}
  .service-card{padding:21px 17px 22px}
  .service-icon{width:36px;height:36px;margin-bottom:18px}
  .service-card h3{font-size:17px;line-height:1.4}
  .service-card p{font-size:14px;line-height:1.7;margin-top:10px}
  .experience-card h3{font-size:24px;line-height:1.25}
  .experience-card>p{font-size:14px;line-height:1.8}
  .package-card h3{font-size:30px}
  .stay-caption h3{font-size:27px;line-height:1.25}
  .review-card blockquote{font-size:23px}
  .final-copy>h2{font-size:39px;line-height:1.2}
  .footer-top>p{font-size:26px}
  .trip-main>h2{font-size:32px}
  .ocean-chapter h2,.ocean-chapter h3{font-size:44px;line-height:1.13;letter-spacing:-.045em}
  .ocean-copy{font-size:16px;line-height:1.8;max-width:345px}
  .ocean-kicker{font-size:10px;line-height:1.8;letter-spacing:.8px}
  .ocean-plan{min-width:0;max-width:100%;font-size:14px;gap:17px}
  .cars-photo-note>span{font-size:29px}
}
@media(max-width:359px){
  .brand{width:150px;min-width:150px}
  .brand-logo{display:block!important;width:150px;min-width:150px}
  .brand-logo-light{display:none!important}
  .site-header.is-scrolled:not(.is-ocean) .brand-logo-light{display:block!important}
  .site-header.is-scrolled:not(.is-ocean) .brand-logo-dark{display:none!important}
  .brand-emblem{display:none}
  .ocean-chapter h2,.ocean-chapter h3{font-size:39px}
  .service-card{padding:20px 13px}
  .service-card h3{font-size:16px}
}
@media(max-height:720px) and (max-width:600px){
  .ocean-chapter{padding-top:110px;padding-bottom:100px}
  .ocean-chapter h2,.ocean-chapter h3{font-size:40px}
}
@media(prefers-reduced-motion:reduce){
  .ocean-chapter{padding-top:70px;padding-bottom:45px}
  .ocean-story:not(.is-pinned) .ocean-bottom{visibility:visible}
}

@media(max-width:359px){
  .site-header:has(.mobile-menu:not([hidden])) .brand-logo-light{display:block!important}
  .site-header:has(.mobile-menu:not([hidden])) .brand-logo-dark{display:none!important}
}

/* Monochrome assurance section, following the Hilal car-site visual language. */
.services-section{background:#fff;color:#101010;padding:60px 0 68px}
.services-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:50px}
.services-eyebrow{font:500 12px/1.8 var(--sans);letter-spacing:1.45px;color:#575757;padding-top:8px}
.services-heading h2{font:500 clamp(28px,2.6vw,38px)/1.25 var(--sans);letter-spacing:-.04em;max-width:540px;text-align:right;color:#101010;margin:0}
.services-grid{gap:0;margin-top:56px}
.service-card{padding:0 33px;background:transparent;border:0;box-shadow:none;border-radius:0}
.service-card:first-child{padding-left:0}
.service-card:last-child{padding-right:0}
.service-card+.service-card{border-left:1px solid #dedede}
.service-icon{width:48px;height:48px;stroke:#101010;stroke-width:1.35;margin-bottom:27px}
.service-card h3{font-size:22px;line-height:1.35;letter-spacing:-.025em;font-weight:500;color:#101010;max-width:230px}
.service-card p{font-size:15px;line-height:1.75;color:#5a5a5a;margin-top:13px;max-width:235px}
.coastal-note{width:calc(100% - 128px);max-width:1280px;height:82px;margin:0 auto;font-size:14px}
.coastal-note>a{font-size:13px}
@media(max-width:1120px){
  .service-card{padding-inline:24px}
  .service-card h3{font-size:20px}
  .services-heading h2{max-width:480px;font-size:32px}
  .coastal-note{width:calc(100% - 70px)}
}
@media(max-width:760px){
  .services-section{padding:46px 0 48px}
  .services-heading{display:block}
  .services-eyebrow{font-size:11px;padding-top:0;letter-spacing:1.3px}
  .services-heading h2{text-align:left;font-size:30px;max-width:420px;margin-top:18px}
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:35px;gap:0}
  .service-card,.service-card:first-child,.service-card:last-child{padding:27px 22px}
  .service-card:nth-child(odd){padding-left:0}
  .service-card:nth-child(even){padding-right:0}
  .service-card+.service-card{border-left:0}
  .service-card:nth-child(even){border-left:1px solid #dedede}
  .service-card:nth-child(-n+2){border-bottom:1px solid #dedede;padding-top:0}
  .service-card:nth-child(n+3){padding-bottom:0}
  .service-icon{width:42px;height:42px;margin-bottom:24px}
  .service-card h3{font-size:20px;line-height:1.4}
  .service-card p{font-size:15px;line-height:1.7}
  .coastal-note{width:calc(100% - 48px);height:84px;font-size:13px}
  .coastal-note>p{max-width:280px}
}
@media(max-width:480px){
  .services-section{padding-top:38px;padding-bottom:40px}
  .services-heading h2{font-size:28px;line-height:1.3;max-width:330px}
  .services-grid{margin-top:30px}
  .service-card,.service-card:first-child,.service-card:last-child{padding:25px 19px}
  .service-card:nth-child(odd){padding-left:0}
  .service-card:nth-child(even){padding-right:0}
  .service-card:nth-child(-n+2){padding-top:0}
  .service-card:nth-child(n+3){padding-bottom:0}
  .service-icon{width:40px;height:40px;margin-bottom:22px}
  .service-card h3{font-size:18px}
  .service-card p{font-size:14px;line-height:1.75}
  .coastal-note{width:calc(100% - 42px);font-size:12px;height:85px;gap:20px}
  .coastal-note>p{max-width:225px;line-height:1.8}
  .coastal-note>a{font-size:12px;white-space:nowrap}
}

/* Hero headline: the last word of the second line rotates (app.js renderHeadline). */
.hero-rotator{display:inline-grid;padding:.06em 0 .18em;margin:-.06em 0 -.18em;clip-path:inset(0 -.3em)}
.hero-word{grid-area:1/1;white-space:nowrap;opacity:0;transform:translateY(115%);transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .8s ease}
.hero-word.is-active{opacity:1;transform:none;transition-delay:.06s}
.hero-word.is-leaving{opacity:0;transform:translateY(-115%)}
@media(max-width:600px){
  .hero-content{top:calc(var(--header-height) + var(--safe-top,0px) + 44px)}
  h1{font-size:clamp(46px,13.4vw,60px)}
  h1>em{white-space:normal}
  .hero-rotator{display:grid}
  .hero-description{max-width:none;margin-top:18px}
  .hero-description br{display:none}
}
@media(max-width:374px){.hero-description{font-size:15px;line-height:1.7}}

/* Book now + WhatsApp: in the responsibilities section, the pinned header and the phone bottom bar. */
:root{--whatsapp:#25d366;--whatsapp-hover:#1ebe5d}
.contact-actions{display:flex;gap:12px;flex-shrink:0}
.contact-actions>*{white-space:nowrap}
.whatsapp-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:14px 24px;border:1px solid var(--whatsapp);border-radius:2px;background:var(--whatsapp);color:var(--ink);font-size:15px;font-weight:600;white-space:nowrap;transition:background .2s,border-color .2s}
.whatsapp-button .icon{width:20px;height:20px}
.whatsapp-button:hover{background:var(--whatsapp-hover);border-color:var(--whatsapp-hover)}
.services-actions{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.services-actions>p{font-size:16px;line-height:1.6;color:var(--muted);max-width:440px}
.header-whatsapp{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 16px;border:1px solid var(--whatsapp);border-radius:2px;background:var(--whatsapp);color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap;transition:background .2s,border-color .2s}
.header-whatsapp .icon{width:18px;height:18px}
.header-whatsapp:hover{background:var(--whatsapp-hover);border-color:var(--whatsapp-hover)}
.mobile-plan-bar{gap:10px}
.mobile-plan-bar>*{flex:1 1 0;min-width:0}
.mobile-plan-bar>.whatsapp-button{min-height:46px;padding:10px 14px;font-size:13px}
@media(max-width:760px){
  .header-whatsapp{display:none}
  .services-actions{flex-direction:column;align-items:stretch;gap:20px;margin-top:36px;padding-top:28px}
  .contact-actions>*{flex:1 1 0;min-width:0;padding-inline:14px;gap:12px}
  /* The bottom bar stays visible over the waves story, so lift its controls above it. */
  .ocean-bottom{bottom:calc(84px + var(--safe-bottom,0px))}
}

/* Waves story chapters: why book with Hilal, what you can do, how to book. ocean-story.js guards the entry to chapter 1. */
html{scrollbar-gutter:stable}
.ocean-chapter h2,.ocean-chapter h3{font-size:clamp(48px,4.6vw,72px);text-wrap:balance}
.ocean-chapter .ocean-copy{max-width:500px}
.ocean-chapter-split{justify-content:space-between;gap:56px}
.ocean-chapter-split .ocean-chapter-copy{max-width:500px}
.ocean-aside{list-style:none;margin:0;padding:0;flex:none;display:grid;gap:12px;pointer-events:auto}
.ocean-aside li{position:relative;overflow:hidden;border-radius:4px}
/* Chapter 2: the booking journey as four light cards in a two-by-two grid, arriving one after another. */
.journey{display:grid;gap:12px;width:min(44vw,600px);padding:0}
.journey-head{margin:0 2px 2px;font-size:10px;font-weight:500;letter-spacing:1.5px;line-height:1.6;color:var(--white);text-shadow:0 1px 14px #101010,0 0 2px #10101099}
.journey-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.journey-steps li{display:grid;grid-template-columns:minmax(0,1fr) 40px;grid-template-rows:auto auto;column-gap:12px;align-items:center;align-content:start;padding:20px 22px 22px;overflow:visible;background:#fffffff0;border:1px solid #ffffff;border-radius:10px;color:var(--ink);box-shadow:0 18px 40px #00000033}
.journey-no{grid-column:1;grid-row:1;font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1;color:var(--ink)}
.journey-dot{grid-column:2;grid-row:1;display:grid;place-items:center;width:40px;height:40px;border:1px solid #b9986080;border-radius:50%;background:var(--paper);color:var(--ink)}
.journey-dot .icon{width:17px;height:17px;stroke-width:1.5}
.journey-steps li>div{grid-column:1/-1;grid-row:2;margin-top:16px}
.journey b{display:block;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.journey div>span{display:block;margin-top:6px;font-size:14px;line-height:1.55;color:var(--muted)}
/* Reveal: the caption fades in and the cards arrive one after another. */
.ocean-story.is-animated .journey-head{opacity:0;transition:opacity .6s ease .1s}
.ocean-story.is-animated .is-current .journey-head{opacity:1}
.ocean-story.is-animated .journey .journey-steps li{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.ocean-story.is-animated .is-current .journey .journey-steps li{opacity:1;transform:none}
.ocean-story.is-animated .is-current .journey .journey-steps li:nth-child(1){transition-delay:.15s}
.ocean-story.is-animated .is-current .journey .journey-steps li:nth-child(2){transition-delay:.35s}
.ocean-story.is-animated .is-current .journey .journey-steps li:nth-child(3){transition-delay:.55s}
.ocean-story.is-animated .is-current .journey .journey-steps li:nth-child(4){transition-delay:.75s}
/* Chapter 2: six activity photos. */
.activity-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));width:min(46vw,640px);height:min(580px,calc(var(--ocean-height) - 300px))}
.activity-grid li{background:#ffffff14}
.activity-grid li:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#101010b8);pointer-events:none}
.activity-grid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.activity-grid li:hover img{transform:scale(1.05)}
.activity-grid span{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;font-size:14px;font-weight:600;line-height:1.3;color:var(--white)}
/* Chapter 3: the booking steps, then Book now (the wider button) and WhatsApp. */
.ocean-steps{list-style:none;counter-reset:step;margin:30px 0 0;padding:0;max-width:520px}
.ocean-steps li{counter-increment:step;display:flex;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid #ffffff2e;font-size:17px;line-height:1.5}
.ocean-steps li:first-child{border-top:1px solid #ffffff2e}
.ocean-steps li:before{content:'0' counter(step);min-width:22px;font-size:12px;font-weight:600;letter-spacing:1px;color:var(--gold)}
.ocean-actions{margin-top:30px}
.ocean-actions .ocean-plan{margin-top:0;min-width:240px;justify-content:space-between}
.ocean-note{margin-top:16px;font-size:13px;line-height:1.6;color:#ffffffc2}
/* Cards and photos rise in as their chapter arrives. */
.ocean-story.is-animated .ocean-aside li{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.ocean-story.is-animated .is-current .ocean-aside li{opacity:1;transform:none}
.ocean-story.is-animated .is-current .ocean-aside li:nth-child(2){transition-delay:.06s}
.ocean-story.is-animated .is-current .ocean-aside li:nth-child(3){transition-delay:.12s}
.ocean-story.is-animated .is-current .ocean-aside li:nth-child(4){transition-delay:.18s}
.ocean-story.is-animated .is-current .ocean-aside li:nth-child(5){transition-delay:.24s}
.ocean-story.is-animated .is-current .ocean-aside li:nth-child(6){transition-delay:.3s}
@media(max-height:820px) and (min-width:761px){
  .ocean-chapter{padding-top:calc(var(--header-height) + 36px);padding-bottom:104px}
  .ocean-chapter h2,.ocean-chapter h3{font-size:clamp(44px,4.2vw,58px)}
  .ocean-kicker{margin-bottom:20px}
  .ocean-copy,.ocean-chapter .ocean-copy{font-size:16px;line-height:1.7;margin-top:20px}
  .ocean-chapter-link{margin-top:18px}
  .journey,.journey-steps{gap:10px}
  .journey-steps li{padding:14px 18px 16px}
  .journey-steps li>div{margin-top:10px}
  .journey-no{font-size:18px}
  .journey-dot{width:34px;height:34px}
  .journey b{font-size:16px}
  .journey div>span{margin-top:4px;font-size:13px;line-height:1.5}
  .ocean-steps{margin-top:22px}
  .ocean-steps li{padding:11px 0;font-size:16px}
  .ocean-actions{margin-top:24px}
  .activity-grid{height:calc(var(--ocean-height) - var(--header-height) - 160px)}
}
@media(max-width:1120px){
  .ocean-chapter-split{gap:36px}
  .activity-grid{width:min(48vw,560px)}
  .journey{width:min(46vw,540px)}
  .journey-steps li{padding:16px 18px 18px}
  .journey-steps li>div{margin-top:12px}
  .journey-no{font-size:18px}
  .journey-dot{width:36px;height:36px}
  .journey b{font-size:16px}
  .journey div>span{font-size:13.5px}
}
@media(max-width:900px){
  /* One column: kicker, title, the cards or photos, then the link. */
  .ocean-chapter-split{flex-direction:column;align-items:stretch;justify-content:center;gap:0}
  .ocean-chapter-split .ocean-chapter-copy{display:contents}
  .ocean-chapter-split .ocean-chapter-link{order:2;align-self:flex-start}
  .ocean-aside{order:1;margin-top:26px}
  .activity-grid{width:100%;max-width:560px;height:auto;grid-template-rows:none}
  .activity-grid li{aspect-ratio:1/1.05}
  .journey{width:100%;max-width:560px}
  .journey,.journey-steps{gap:8px}
  .journey-head{letter-spacing:1.2px}
  .journey-steps{grid-template-columns:1fr}
  .journey-steps li{grid-template-columns:28px minmax(0,1fr) 34px;grid-template-rows:auto;column-gap:12px;padding:12px 16px;border-radius:8px;box-shadow:0 10px 24px #00000026}
  .journey-no,.journey-dot,.journey-steps li>div{grid-column:auto;grid-row:auto}
  .journey-steps li>div{margin-top:0}
  .journey-no{font-size:12px;letter-spacing:1.4px;color:var(--gold)}
  .journey-dot{width:34px;height:34px}
  .journey-dot .icon{width:15px;height:15px}
  .journey b{font-size:15px}
  .journey div>span{display:none}
}
@media(max-width:760px){
  .ocean-chapter{padding-top:calc(var(--header-height) + var(--safe-top,0px) + 26px);padding-bottom:calc(146px + var(--safe-bottom,0px))}
  /* Chapter 3 shows its own two buttons, so the bottom bar hides there and the film controls drop to the edge. */
  #ocean-freedom{padding-bottom:calc(84px + var(--safe-bottom,0px))}
  .ocean-bottom{transition:bottom .3s ease}
  body:has(#mobile-plan-bar[hidden]) .ocean-bottom{bottom:calc(24px + var(--safe-bottom,0px))}
  .ocean-actions .ocean-plan{min-width:0}
  .ocean-actions>.primary-button{flex:1.5 1 0}
}
@media(max-width:600px){
  .ocean-chapter h2,.ocean-chapter h3{font-size:clamp(34px,10vw,42px);line-height:1.12}
  .ocean-kicker{margin-bottom:16px}
  .ocean-chapter .ocean-copy{display:none}
  .ocean-aside{margin-top:20px}
  .journey-head,.journey-dot{display:none}
  .journey,.journey-steps{gap:6px}
  .journey-steps li{grid-template-columns:24px minmax(0,1fr);column-gap:10px;padding:9px 14px}
  .journey b{font-size:15px;font-weight:600}
  .ocean-chapter-link{margin-top:16px}
  .ocean-steps{margin-top:20px}
  .ocean-steps li{padding:10px 0;font-size:15px;gap:14px}
  .ocean-actions{margin-top:20px}
  .ocean-note{margin-top:12px;font-size:12px}
  .activity-grid{gap:8px}
  .activity-grid li{aspect-ratio:1/1}
  .activity-grid span{left:9px;right:9px;bottom:8px;font-size:12px}
}
@media(max-width:600px) and (max-height:640px){
  .ocean-chapter{padding-top:calc(var(--header-height) + var(--safe-top,0px) + 14px);padding-bottom:calc(136px + var(--safe-bottom,0px))}
  .ocean-chapter h2,.ocean-chapter h3{font-size:32px}
  .ocean-chapter-link,.ocean-note{display:none}
  .ocean-steps li{padding:8px 0}
  .activity-grid li{aspect-ratio:1/.86}
}

/* Phone browsers grow the screen when their toolbar collapses. The video layer and the last chapter span
   that larger height so the next section never shows through, and the controls stay at the visible edge. */
.ocean-story{--ocean-pin:var(--ocean-height);--ocean-lift:0px}
@supports(height:100dvh){.ocean-story{--ocean-pin:100lvh;--ocean-lift:calc(100lvh - 100dvh)}}
.ocean-pin{height:var(--ocean-pin)}
.ocean-chapters{margin-top:calc(0px - var(--ocean-pin))}
#ocean-freedom{min-height:var(--ocean-pin)}
.ocean-bottom{bottom:calc(max(32px,var(--safe-bottom,0px)) + var(--ocean-lift))}
@media(max-width:760px){
  .ocean-bottom{bottom:calc(84px + var(--safe-bottom,0px) + var(--ocean-lift))}
  body:has(#mobile-plan-bar[hidden]) .ocean-bottom{bottom:calc(24px + var(--safe-bottom,0px) + var(--ocean-lift))}
}
@media(prefers-reduced-motion:reduce){.ocean-pin{height:100%}.ocean-chapters{margin-top:0}#ocean-freedom{min-height:0}}

/* Packs as full-width facing halves: a centred text panel on one side, the photo filling the other, alternating. */
.package-grid{display:grid;grid-template-columns:1fr;gap:0;width:100vw;max-width:none;margin:56px 0 0 calc(50% - 50vw)}
.package-row{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;margin-top:0!important;outline:none!important;background:#ffffff;color:var(--ink);border-radius:0;overflow:hidden}
.package-row.is-flipped .package-media{order:2}
.package-media{position:relative;min-height:clamp(460px,40vw,600px)}
.package-row .package-image{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover}
.package-row .signature-band{top:24px;left:24px}
.package-row .package-body{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:56px clamp(32px,6vw,96px)}
.package-icon{display:grid;place-items:center;width:72px;height:72px;border:2px solid var(--ink);border-radius:50%;color:var(--ink)}
.package-icon .icon{width:30px;height:30px;stroke-width:1.5}
.package-row .package-duration{margin-top:26px;font-size:11px;letter-spacing:1.8px;color:var(--muted)}
.package-row h3{margin-top:10px;font-size:clamp(34px,3.2vw,46px);font-weight:500;letter-spacing:-.03em;line-height:1.08}
.package-row .package-description{margin-top:16px;max-width:520px;font-size:16px;line-height:1.75;color:var(--muted);min-height:0}
.package-row .package-includes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:600px;margin:22px 0 0;padding:0;border:0}
.package-row .package-includes li{margin:0;padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-size:12px;line-height:1.4;color:var(--ink);background:#fff}
.package-row .package-includes .icon{margin-top:0;width:13px;height:13px}
.package-foot{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:26px;padding-top:0}
.package-row .package-price{margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 8px}
.package-row .package-price small{width:100%;margin:0;font-size:11px;letter-spacing:.6px}
.package-row .package-price strong{font-size:32px}
.package-row .package-price>span{font-size:13px;margin:0}
.package-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.package-row .primary-button{width:auto;min-width:240px;margin:0;min-height:50px;font-size:14px;justify-content:space-between;padding-inline:20px}
.package-customise{display:flex;align-items:center;justify-content:center;gap:10px;min-width:220px;min-height:50px;padding:0 20px;border:1px solid var(--ink);border-radius:2px;font-size:13px;font-weight:600;color:var(--ink);transition:background .2s,color .2s}
.package-customise .icon{width:16px;height:16px}
.package-customise:hover{background:var(--ink);color:var(--white)}
.package-row .package-detail-link{margin:18px 0 0;font-size:12px}
.package-card.is-picked{box-shadow:inset 0 0 0 3px var(--gold)}
.package-pick{position:absolute;top:24px;right:24px;z-index:1;padding:8px 11px;background:var(--gold);color:var(--ink);font-size:10px;font-weight:600;letter-spacing:1.2px;border-radius:2px}
.car-fallback{display:grid;place-items:center;width:150px;height:90px;max-width:100%;color:var(--muted)}
.car-fallback .icon{width:40px;height:40px;stroke-width:1.2}
/* The builder: choose every part of the stay on the left, read the plan like an invoice on the right. */
.builder{margin-top:72px;padding-top:56px;border-top:1px solid #ffffff22}
.builder-head{max-width:760px}
.builder-head h3{margin:0;font-size:clamp(34px,3.4vw,48px);font-weight:500;letter-spacing:-.04em;line-height:1.1;color:var(--white)}
.builder-head .section-copy{max-width:560px;margin-top:16px;color:#ded7cb}
.builder-layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:28px;align-items:start;margin-top:40px}
.builder-group{padding:26px 0 8px;border-top:1px solid #ffffff1f}
.builder-group:first-child{border-top:0;padding-top:0}
.builder-group>h4{margin:0 0 6px;font-size:11px;font-weight:500;letter-spacing:1.6px;color:var(--gold)}
.builder-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px 16px;align-items:center;padding:16px 0;border-bottom:1px solid #ffffff14}
.builder-group .builder-row:last-child{border-bottom:0}
.builder-row>.icon{width:44px;height:44px;padding:11px;border:1px solid #ffffff2e;border-radius:50%;color:var(--white);transition:background .25s,border-color .25s,color .25s}
.builder-row.is-on>.icon{background:var(--white);border-color:var(--white);color:var(--ink)}
.builder-row b{display:block;font-size:17px;font-weight:600;line-height:1.3;color:var(--white)}
.builder-row small{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:#c9c2b4}
.builder-row small em{font-style:normal;color:var(--white)}
.builder-options{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.seg{display:inline-flex;border:1px solid #ffffff33;border-radius:999px;padding:3px}
.seg button{min-height:30px;padding:0 13px;border-radius:999px;color:#ded7cb;font-size:12px;font-weight:500;transition:background .2s,color .2s}
.seg button:not(.is-active):hover{background:#ffffff14;color:var(--white)}
.seg button.is-active{background:var(--white);color:var(--ink)}
.seg button small{color:inherit;opacity:.65;margin-left:4px;font-size:11px}
.option-note{font-size:12px;color:#c9c2b4}
.stepper{display:inline-flex;align-items:center;border:1px solid #ffffff40;border-radius:999px;overflow:hidden}
.stepper button{display:grid;place-items:center;width:42px;height:42px;color:var(--white);transition:background .2s}
.stepper button:hover{background:#ffffff14}
.stepper button:disabled{opacity:.3;cursor:default;background:none}
.stepper button .icon{width:16px;height:16px}
.stepper output{min-width:34px;text-align:center;font-size:17px;font-weight:600;color:var(--white)}
.stepper.is-small button{width:34px;height:34px}
.stepper.is-small output{min-width:28px;font-size:14px}
.summary-people .stepper{border-color:var(--line)}
.summary-people .stepper button{color:var(--ink)}
.summary-people .stepper button:enabled:hover{background:#f3efe8}
.summary-people .stepper output{color:var(--ink)}
.builder-group .stepper output,.summary-people .stepper output{min-width:0;padding:0 8px;white-space:nowrap}
.builder-group .stepper:not(.is-small) output{min-width:140px} /* every counter in the list the same width, sized for the longest unit ("5 demi-journées") */
.stepper output.is-bumped{animation:bump .3s ease}
@keyframes bump{40%{transform:scale(1.25)}}
.switch{position:relative;width:52px;height:30px;border-radius:999px;background:#ffffff33;transition:background .25s;flex:none}
.switch:after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--white);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.switch[aria-checked=true]{background:var(--white)}
.switch[aria-checked=true]:after{background:var(--ink)}
.switch[aria-checked=true]:after{transform:translateX(22px)}
.car-choice{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:8px}
.car-choice button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border:1px solid #ffffff33;border-radius:999px;color:#ded7cb;font-size:12px;font-weight:500;transition:background .2s,color .2s,border-color .2s}
.car-choice button:not(.is-active):hover{border-color:var(--white);color:var(--white)}
.car-choice button.is-active{background:var(--white);border-color:var(--white);color:var(--ink)}
.car-choice button small{color:inherit;opacity:.7;margin:0}
.date-pair{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:10px 14px}
.date-pair label{flex:1 1 130px;min-width:0;display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:600;letter-spacing:1.2px;color:#c9c2b4}
.date-pair input{width:100%;min-width:0;min-height:40px;padding:0 12px;border:1px solid #ffffff40;border-radius:3px;background:#ffffff0a;color:var(--white);color-scheme:dark;font:inherit;font-size:14px;transition:border-color .2s}
.date-pair input:hover{border-color:var(--white)}
.date-pair input:focus{outline:2px solid var(--gold);outline-offset:1px}
/* The plan, on the right or in the full-screen dialog. Beside the builder it never grows past the screen: the lines scroll between the head and the total. */
.builder-summary{--summary-pad:28px;position:sticky;top:calc(var(--header-height) + 24px);display:flex;flex-direction:column;max-height:calc(100vh - var(--header-height) - 48px);max-height:calc(100dvh - var(--header-height) - 48px);background:var(--paper);color:var(--ink);border-radius:4px;padding:26px var(--summary-pad) 28px}
.summary-scroll{flex:0 1 auto;min-height:0;display:flex;gap:10px;overflow:auto;scroll-snap-type:x proximity;scrollbar-width:thin;margin:10px calc(-1 * var(--summary-pad)) 0;padding:0 var(--summary-pad) 8px;scroll-padding-inline:var(--summary-pad)}
.is-strip .summary-scroll{-webkit-mask-image:linear-gradient(to right,#0000,#000 var(--fade-l,0px),#000 calc(100% - var(--fade-r,0px)),#0000);mask-image:linear-gradient(to right,#0000,#000 var(--fade-l,0px),#000 calc(100% - var(--fade-r,0px)),#0000)}
.is-strip.has-more .summary-scroll{--fade-r:44px}
.is-strip.has-before .summary-scroll{--fade-l:44px}
.summary-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.summary-head h4{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.summary-head button{font-size:12px;font-weight:500;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.summary-people{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding:12px 14px;background:#ffffff;border:1px solid var(--line);border-radius:3px;font-size:14px;font-weight:500}
.summary-card{flex:0 0 min(100%,268px);scroll-snap-align:start;box-sizing:border-box;padding:10px 14px 2px;background:#fff;border:1px solid var(--line);border-radius:3px}
.summary-section{margin:0;font-size:10px;font-weight:600;letter-spacing:1.4px;color:var(--muted)}
.summary-lines{list-style:none;margin:6px 0 0;padding:0}
.summary-lines li{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.45}
.summary-lines li:last-child{border-bottom:0}
.summary-lines li span:last-child{flex:none;color:var(--muted)}
.summary-lines li small{display:block;font-size:12px;color:var(--muted)}
.summary-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:4px;padding-top:14px;border-top:1px solid var(--line)}
.summary-total small{display:block;font-size:11px;letter-spacing:.6px;color:var(--muted)}
.summary-total strong{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.summary-total .was{font-size:14px;color:var(--muted);text-decoration:line-through}
.summary-per{margin:6px 0 0;font-size:13px;color:var(--muted)}
.summary-note{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
.summary-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:54px;margin-top:18px;padding:0 20px;background:var(--ink);color:var(--white);border-radius:2px;font-size:15px;font-weight:600;transition:background .2s,color .2s}
.summary-cta:hover{background:var(--gold);color:var(--ink)}
.summary-cta .icon{width:20px;height:20px}
.builder-bar{display:none}
@media(max-width:900px){
  .builder-bar{position:sticky;bottom:calc(10px + var(--safe-bottom,0px));z-index:36;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:28px;padding:10px 10px 10px 18px;background:#fffffff5;color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 36px #10101038;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);transition:box-shadow .25s}
  .builder-bar.is-docked{box-shadow:none}
}
.builder-bar>div{min-width:0}
.builder-bar small{display:block;font-size:10px;letter-spacing:1.2px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.builder-bar b{display:block;margin-top:3px;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.builder-bar button{flex:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;background:var(--ink);color:var(--white);border-radius:2px;font-size:13px;font-weight:600}
.builder-bar button .icon{width:16px;height:16px}
.modal-open .builder-bar{display:none}
.plan-dialog{width:560px;max-width:calc(100% - 32px);max-height:calc(100svh - 32px);overflow:auto;background:var(--paper);color:var(--ink);border-radius:5px}
.plan-dialog-body{--summary-pad:30px;padding:34px var(--summary-pad) 30px}
.plan-dialog .summary-head h4{font-size:26px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.stepper output.is-bumped{animation:none}}
@media(max-width:1120px){
  .package-row .package-body{padding:44px 32px}
  .package-media{min-height:460px}
  .builder-layout{grid-template-columns:minmax(0,1fr) 360px;gap:22px}
  .builder-summary{--summary-pad:22px;padding:22px var(--summary-pad) 24px}
}
@media(max-width:900px){
  .package-row{grid-template-columns:1fr}
  .package-row.is-flipped .package-media{order:0}
  .package-media{min-height:320px}
  .package-row .package-body{padding:40px 24px 36px}
  .builder{margin-top:56px;padding-top:44px}
  .builder-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .builder-summary{position:static;max-height:none}
}
@media(max-width:600px){
  .package-grid{margin-top:40px}
  .package-media{min-height:240px}
  .package-row .package-body{padding:34px 20px 32px}
  .package-icon{width:60px;height:60px}
  .package-icon .icon{width:26px;height:26px}
  .package-row .package-duration{margin-top:20px}
  .package-row h3{font-size:30px}
  .package-row .package-description{font-size:14px;line-height:1.7}
  .package-row .package-includes li{font-size:11px;padding:6px 10px}
  .package-row .package-price strong{font-size:28px}
  .package-actions{width:100%;flex-direction:column}
  .package-row .primary-button,.package-customise{width:100%;min-width:0}
  .builder-head h3{font-size:30px}
  .builder-row{grid-template-columns:38px minmax(0,1fr) auto;gap:12px;padding:14px 0}
  .builder-row>.icon{width:38px;height:38px;padding:9px}
  .builder-row b{font-size:15px}
  .builder-row small{font-size:12px}
  .stepper button{width:38px;height:38px}
  .stepper output{min-width:30px;font-size:15px}
  .builder-summary{--summary-pad:18px;padding:20px var(--summary-pad) 22px;border-radius:3px}
  .summary-head h4{font-size:20px}
  .summary-total strong{font-size:26px}
  .plan-dialog{width:100%;max-width:100%;max-height:100svh;height:100svh;border-radius:0;margin:0}
  .plan-dialog-body{--summary-pad:20px;padding:28px var(--summary-pad) calc(28px + var(--safe-bottom,0px))}
}

/* Packs: a tighter text panel so a row is about as tall as its photo, and the same space above and below the section heading. */
.packages-section{--packs-gap:72px;padding-top:var(--packs-gap)}
.package-grid{margin-top:var(--packs-gap)}
.package-row .package-body{padding:40px clamp(32px,6vw,96px)}
.package-media{min-height:clamp(420px,34vw,520px)}
.package-icon{width:56px;height:56px}
.package-icon .icon{width:24px;height:24px}
.package-row .package-duration{margin-top:18px}
.package-row h3{margin-top:8px;font-size:clamp(30px,2.6vw,38px)}
.package-row .package-description{margin-top:12px;max-width:560px;font-size:15px;line-height:1.6}
.package-row .package-includes{gap:6px;max-width:640px;margin-top:16px}
.package-row .package-includes li{padding:5px 10px}
.package-foot{margin-top:20px;gap:14px}
.package-row .package-price strong{font-size:28px}
.package-row .primary-button,.package-customise{min-height:46px}
.package-row .package-detail-link{margin-top:12px}
@media(max-width:1120px){.package-row .package-body{padding:36px 32px}}
@media(max-width:900px){.package-media{min-height:320px}.package-row .package-body{padding:32px 24px}}
@media(max-width:600px){.packages-section{--packs-gap:48px}.package-media{min-height:240px}.package-row .package-body{padding:28px 20px 26px}.package-icon{width:50px;height:50px}.package-icon .icon{width:22px;height:22px}.package-row .package-duration{margin-top:16px}.package-row h3{font-size:28px}.package-row .package-includes{margin-top:14px}.package-foot{margin-top:18px;gap:12px}}
.package-row .package-body{padding-inline:clamp(28px,4.5vw,64px)}
.package-row .package-includes{max-width:none}
.package-foot{margin-top:18px}
.package-row .package-detail-link{margin-top:10px}
@media(max-width:600px){.package-row .package-includes li{font-size:11px;padding:4px 9px}.package-row .primary-button,.package-customise{min-height:44px}}

/* Packs after the pricing study: one include in gold per pack, a calm hover on the customise button, and the new builder controls. */
.package-row .package-includes li.is-hi{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}
.package-row .package-includes li.is-hi .icon{color:var(--ink);fill:currentColor;stroke-width:1.5}
.package-customise{transition:background .2s,color .2s,border-color .2s,box-shadow .25s,transform .25s}
.package-customise:hover{background:#f3efe8;color:var(--ink);border-color:var(--ink);box-shadow:0 10px 24px #10101014;transform:translateY(-1px)}
.seg.is-wrap{flex-wrap:wrap;row-gap:4px}
.in-pack{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--gold);white-space:nowrap}
.in-pack .icon{width:14px;height:14px}
.summary-context{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 0;font-size:12px;letter-spacing:.4px;color:var(--muted)}
.summary-nav{display:none;gap:6px;flex:none}
.is-strip .summary-nav{display:flex}
.summary-nav button{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);transition:border-color .2s}
.summary-nav button:hover{border-color:var(--ink)}
.summary-nav button .icon{width:14px;height:14px}
.summary-nav button:first-child .icon{transform:scaleX(-1)}
.summary-inside{margin:0 0 8px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;line-height:1.6;color:var(--muted)}
@media(max-width:600px){.seg.is-wrap button{flex:1 1 45%}}
/* On short screens the plan card tightens and drops its note, so the lines keep room to breathe. */
@media(min-width:901px) and (max-height:820px){
  .builder-summary{--summary-pad:22px;padding:20px var(--summary-pad) 22px}
  .summary-people{margin-top:12px;padding:8px 14px}
  .summary-total{margin-top:10px;padding-top:10px}
  .summary-total strong{font-size:26px}
  .summary-cta{margin-top:14px;min-height:48px}
  .summary-note{display:none}
}
.summary-card:only-child{flex-basis:100%}
.builder-summary,.summary-scroll{min-width:0}
/* A row with a switch is clickable from edge to edge. */
.builder-row.is-toggle{cursor:pointer;-webkit-user-select:none;user-select:none}
.builder-row.is-toggle:hover>.icon{border-color:var(--white)}
.builder-row.is-toggle:hover .switch[aria-checked=false]{background:#ffffff4d}

/* Each pack's includes as a grid of small cards with icons, in place of the paragraph and the pills. */
.package-row .package-includes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:600px;margin:22px 0 0;padding:0;border:0}
.package-row .package-includes li{display:flex;align-items:center;gap:11px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:4px;background:#fff;font-size:13px;line-height:1.4;color:var(--ink);text-align:left}
.package-row .package-includes li:last-child:nth-child(odd){grid-column:1/-1}
.package-row .package-includes .icon{flex:none;width:20px;height:20px;margin:0;color:var(--gold);stroke-width:1.6}
.package-row .package-includes li.is-hi{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}
.package-row .package-includes li.is-hi .icon{color:var(--ink);fill:currentColor;stroke-width:1.5}
@media(max-width:600px){.package-row .package-includes{gap:6px;margin-top:16px}.package-row .package-includes li{gap:9px;padding:10px 12px;font-size:12px}}
@media(max-width:420px){.package-row .package-includes{grid-template-columns:1fr}.package-row .package-includes li:last-child:nth-child(odd){grid-column:auto}}
/* The builder's date fields: the same white fields and calendar as the form at the top of the page, opening downward. */
.stay-dates{position:relative;flex:1 1 320px;max-width:520px}
.stay-fields{display:grid;grid-template-columns:1fr 1fr;background:var(--white);color:var(--ink);border-radius:3px;padding:6px;box-shadow:0 5px 35px #10101020}
.stay-fields .field-trigger{min-height:56px;padding:3px 14px}
.stay-fields .field-trigger:first-child{border-right:1px solid var(--line)}
.stay-fields .field-icon{flex:none;width:18px;height:18px;color:var(--muted)}
.stay-fields .field-copy{display:flex;flex-direction:column;min-width:0}
.stay-calendar.calendar-popover{top:calc(100% + 10px);bottom:auto;left:0;right:auto;width:640px;max-width:calc(100vw - 40px)}
.stay-calendar .calendar-navigation button:first-child .icon{transform:rotate(90deg)}
.stay-calendar .calendar-navigation button:last-child .icon{transform:rotate(-90deg)}
.stay-calendar .stay-clear{padding:0;text-decoration:underline;text-underline-offset:3px;font-size:12px}
@media(max-width:1000px){.stay-calendar.calendar-popover{width:380px}.stay-calendar .calendar-months{grid-template-columns:1fr}.stay-calendar .calendar-month:nth-child(2){display:none}}
@media(max-width:600px){.stay-calendar.calendar-popover{position:fixed;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:calc(100vw - 34px);max-width:390px;max-height:calc(100svh - 32px);overflow-y:auto}}
/* The calendar flips above the date fields when there is more room there, and never grows past the screen. */
@media(min-width:601px){.stay-calendar.calendar-popover{max-height:calc(100vh - var(--header-height) - 40px);overflow-y:auto}.stay-calendar.calendar-popover.is-up{top:auto;bottom:calc(100% + 10px)}}
@media(max-width:760px){.builder-row>.stepper{grid-column:2;justify-self:start;margin-top:2px}.builder-group .stepper:not(.is-small) output{min-width:104px}}

/* On phones the packs stack one under the other, each a screen tall; full-page.js pages through them one swipe at a time, and the
   header steps aside while they are under it (updateScrollState), so each pack fills the screen from the very top. Each pack is
   100lvh, the screen with Safari's toolbars tucked away, a height that never changes while the toolbars come and go (100dvh did,
   resizing all six packs and shifting the page under the finger). The bottom of the card keeps clear the strip the toolbars cover
   when they are out (100lvh - 100svh), so the price and the buttons always show. */
@media(max-width:900px){
  .packages-section{--pack-h:100vh}
  .package-grid{display:grid;grid-template-columns:1fr;gap:0}
  /* The pack's name and length sit above its photo: the body's box steps aside (display:contents) and its parts line up in one
     column with the photo, which takes the room that is left. */
  .package-row{display:flex;flex-direction:column;min-height:var(--pack-h);padding-bottom:16px;text-align:center}
  .package-row .package-body{display:contents}
  .package-icon{display:none}
  .package-row .package-duration{order:-2;margin:0;padding:16px 18px 0;font-size:10px}
  .package-row h3{order:-1;margin:0;padding:4px 18px 12px;font-size:26px}
  .package-media,.package-row.is-flipped .package-media{order:0;flex:1 1 auto;min-height:150px}
  .package-row .package-includes{width:auto;max-width:none;margin:12px 18px 0;gap:6px}
  .package-row .package-includes li{padding:8px 10px;font-size:12px;line-height:1.3}
  .package-foot{margin:12px 18px 0;gap:10px}
  .package-row .package-price strong{font-size:26px}
  .package-row .primary-button,.package-customise{min-height:42px}
  .package-row .package-detail-link{align-self:center;margin-top:8px}
  @supports(height:100lvh){
    .packages-section{--pack-h:100lvh}
    .package-row{padding-bottom:calc(16px + 100lvh - 100svh)}
  }
}

/* On phones the header slides away while the pack carousel sits under it. */
.site-header{transition:transform .3s ease,background .25s,color .25s,box-shadow .25s}
.site-header.is-hidden{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){.site-header{transition:none}}

/* The builder as a menu: every item on its own line, the price with its unit lined up on the right, then a pick, a switch or a counter; chosen lines in gold.
   On phones the control sits beside the name and the price takes the bottom of the line. */
.menu-line{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(150px,auto);grid-template-areas:"name price control" "desc price control";gap:3px 18px;align-items:center;padding:14px 0;border-bottom:1px solid #ffffff14}
.builder-group .menu-line:last-child{border-bottom:0}
.menu-name{grid-area:name;align-self:end;display:block;font-size:16px;font-weight:600;line-height:1.3;color:var(--white);transition:color .2s}
.menu-desc{grid-area:desc;align-self:start;display:block;font-size:13px;line-height:1.5;color:#c9c2b4}
.menu-desc:empty{display:none}
.menu-price{grid-area:price;text-align:right;white-space:nowrap}
.menu-price b{display:block;font-size:15px;font-weight:600;color:var(--white);font-variant-numeric:tabular-nums;transition:color .2s}
.menu-price small{display:block;margin-top:2px;font-size:10px;color:#c9c2b4}
.menu-control{grid-area:control;display:flex;justify-content:flex-end;align-items:center}
.menu-options{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding-top:4px}
.menu-line.is-on .menu-name,.menu-line.is-on .menu-price b{color:var(--gold)}
.menu-line.is-toggle,.menu-line.is-pick{cursor:pointer;-webkit-user-select:none;user-select:none}
.pick{display:grid;place-items:center;width:30px;height:30px;border:1px solid #ffffff55;border-radius:50%;color:var(--ink);transition:background .2s,border-color .2s}
.pick .icon{width:14px;height:14px;opacity:0;transition:opacity .2s}
.pick.is-active{background:var(--white);border-color:var(--white)}
.pick.is-active .icon{opacity:1}
.menu-line.is-pick:hover .pick:not(.is-active){border-color:var(--white)}
.menu-line.is-toggle:hover .switch[aria-checked=false]{background:#ffffff4d}
.menu-line .stepper.is-small button{width:34px;height:34px}
.menu-line .stepper.is-small output{min-width:118px;padding:0 8px;font-size:13px;white-space:nowrap}
@media(max-width:900px){
  .builder-summary{display:none}
}
@media(max-width:760px){
  .menu-line{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name control" "desc desc" "price price";gap:4px 12px;padding:12px 0}
  .menu-name{align-self:center}
  .menu-price{display:flex;align-items:baseline;gap:8px;text-align:left;margin-top:2px;white-space:normal}
  .menu-price b{font-size:14px}
  .menu-price small{margin-top:0}
  .menu-control{justify-self:end}
  .menu-line .stepper.is-small output{min-width:96px}
}

/* A choice between two lines sits in a gold card with its own label. */
.menu-choice{position:relative;margin:14px 0 6px;padding:8px 16px 2px;border:1px solid var(--gold);border-radius:4px}
.menu-choice-label{position:absolute;top:-8px;left:14px;padding:0 8px;background:var(--ink);color:var(--gold);font-size:10px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;line-height:16px}
.menu-choice .menu-line:last-child{border-bottom:0}
.menu-choice .menu-line{padding:12px 0}
/* Who sleeps where: the shared beds are counted for you, in a pill the width of the counters above, and a line sums it up. */
.menu-count{display:inline-flex;align-items:center;justify-content:center;min-width:188px;height:36px;padding:0 12px;border:1px dashed #ffffff40;border-radius:999px;font-size:13px;font-weight:600;color:#ede8df;white-space:nowrap}
.menu-line.is-people .menu-name{color:var(--white)}
.menu-line.is-people{padding-bottom:16px;border-bottom:1px solid #ffffff29}
.menu-choice-note{margin:0;padding:10px 0 12px;border-top:1px solid #ffffff14;font-size:12.5px;line-height:1.5;color:var(--gold)}
@media(max-width:760px){.menu-rooms .menu-line .stepper.is-small output{min-width:72px}.menu-count{min-width:142px}}

/* The travellers counter in the hero's white popover: a compact ink pill that fits the row (the base stepper styles come from two files). */
.guests-popover .guest-row{gap:14px}
.guests-popover .guest-row>span{flex:1 1 auto;min-width:0}
.guests-popover .stepper{flex:none;gap:0;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.guests-popover .stepper button{width:38px;height:38px;border:0;border-radius:0;color:var(--ink);background:none}
.guests-popover .stepper button:enabled:hover{background:#f3efe8}
.guests-popover .stepper button:disabled{opacity:.3}
.guests-popover .stepper button .icon{width:15px;height:15px}
.guests-popover .stepper output{min-width:36px;padding:0 4px;text-align:center;font-size:15px;font-weight:600;color:var(--ink)}

/* Six or more travellers: the full price struck through, the price with 10% off, and a gold badge, on the cards and in the plan. */
.package-row .package-price .package-was{font-size:15px;font-weight:500;color:var(--muted);text-decoration:line-through;text-decoration-color:#5c5a5599}
.package-row .package-price .package-off{width:auto;display:inline-block;margin-top:6px;padding:4px 10px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.summary-lines li span:last-child s{margin-right:4px;font-weight:400;text-decoration-color:#5c5a5599}
.summary-badge{display:inline-block;vertical-align:middle;margin-left:6px;padding:3px 8px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:9px;font-weight:700;letter-spacing:1px}

/* The stays section: close to the responsibilities above it, and the last photo runs straight into the packs below. */
.stays-section{padding-top:64px;padding-bottom:0}
@media(max-width:760px){.stays-section{padding-top:48px}}
/* On phones and tablets the buttons come after the last photo, so the section needs room before the packs. */
@media(max-width:900px){.stays-section{padding-bottom:64px}}

/* The two houses on the home page: for each, a header on white above a full-bleed photo that slowly turns through the house's photos. Ink, paper, gold and white only. */
/* Tifinagh: the site's fonts have no Tifinagh letters, so a 12 KB cut of Noto Sans Tifinagh (SIL Open Font License) is used for them only. */
@font-face{font-family:'Noto Sans Tifinagh';src:url('assets/noto-sans-tifinagh.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+2D30-2D7F}
.tifinagh{font-family:'Noto Sans Tifinagh',var(--sans);font-weight:400;font-style:normal}
/* A house's name in Tamazight: a gold line of Tifinagh under the name. */
.pano-native{margin:12px 0 0;font-size:clamp(20px,1.9vw,26px);line-height:1.25;letter-spacing:.14em;color:var(--gold);white-space:nowrap}
/* One column that can never grow past the page: Safari sizes an open grid column to the full-bleed photo (100vw) before
   resolving its percentage margin, which then comes out as zero and pushes the photo right, off the screen. */
.houses{display:grid;grid-template-columns:minmax(0,1fr);gap:96px;margin-top:72px}
.house-pano{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
.pano-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:32px 60px}
.pano-kicker{margin:0;font-size:11px;font-weight:600;letter-spacing:1.8px;color:var(--gold)}
.pano-name{margin:14px 0 0;font-size:clamp(52px,6.5vw,96px);font-weight:500;letter-spacing:-.045em;line-height:.95;color:var(--ink)}
.pano-open{display:none}
.pano-line{margin:16px 0 0;max-width:560px;font-size:17px;line-height:1.6;color:var(--muted)}
.pano-head-side{display:grid;justify-items:end;gap:20px;padding-bottom:6px}
.pano-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.pano-chips li{padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-size:12px;letter-spacing:.2px;color:var(--ink)}
.pano-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px 16px}
.pano-cta{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 22px;background:var(--ink);color:var(--white);border:1px solid var(--ink);border-radius:2px;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.pano-cta .icon{width:18px;height:18px;transition:transform .25s}
.pano-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.pano-cta:hover .icon{transform:translateX(4px)}
.pano-stay{display:inline-flex;align-items:center;min-height:52px;padding:0 20px;border:1px solid var(--ink);border-radius:2px;color:var(--ink);font-size:14px;font-weight:600;transition:background .2s,color .2s,border-color .2s}
.pano-stay:hover{border-color:var(--gold);color:var(--gold);background:#b9986014}
.pano-media{position:relative;display:block;width:100vw;margin-left:calc(50% - 50vw);height:clamp(480px,74vh,760px);background:var(--ink);color:var(--white);overflow:hidden}
.pano-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.pano-media img.is-on{opacity:1}
.pano-media:hover img.is-on{transform:scale(1.04)}
.pano-hit{position:absolute;inset:0;z-index:1}
/* Back and next: round buttons on the sides of the photo, lined up with the page margins. */
.pano-arrow{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:56px;height:56px;margin-top:-28px;border:1px solid #ffffff80;border-radius:50%;background:#10101040;color:var(--white);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s,border-color .2s,color .2s}
.pano-arrow .icon{width:20px;height:20px;transition:transform .25s}
.pano-arrow.is-prev{left:max(64px,calc((100% - 1280px)/2))}
.pano-arrow.is-next{right:max(64px,calc((100% - 1280px)/2))}
.pano-arrow.is-prev .icon{transform:rotate(180deg)}
/* Hover only where there is a mouse: on a phone a tapped button would otherwise stay gold. */
@media(hover:hover){
  .pano-arrow:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
  .pano-arrow.is-prev:hover .icon{transform:rotate(180deg) translateX(3px)}
  .pano-arrow.is-next:hover .icon{transform:translateX(3px)}
}
.pano-arrow:active{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.pano-shade{position:absolute;inset:0;background:linear-gradient(180deg,#1010102e 0%,#1010102e 50%,#101010bf 100%)}
.pano-foot{position:absolute;z-index:2;pointer-events:none;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(1280px,calc(100% - 128px));margin-inline:auto;padding:0 0 30px}
.pano-where{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.3px}
.pano-where .icon{width:15px;height:15px;color:var(--gold)}
.pano-dots{display:flex;gap:6px;pointer-events:auto}
.pano-dots button{position:relative;display:block;width:24px;height:24px;padding:0}
.pano-dots button::before{content:'';position:absolute;left:0;right:0;top:11px;height:2px;background:#ffffff59;transition:background .4s}
.pano-dots button:hover::before{background:#ffffffb3}
.pano-dots button.is-on::before{background:var(--white)}
.pano-more{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;background:var(--white);color:var(--ink);border-radius:2px;font-size:13px;font-weight:600;transition:background .2s}
.pano-more .icon{width:16px;height:16px;transition:transform .25s}
.pano-hit:hover~.pano-foot .pano-more,.pano-more:hover{background:var(--gold)}
.pano-hit:hover~.pano-foot .pano-more .icon,.pano-more:hover .icon{transform:translateX(4px)}
/* "Click to explore the house" ("Tap" on touch screens): a glass label on the photo, so it is clear the photo opens the house's
   page, with a pulsing gold dot like the ones on the house pages' photos. Clicks pass through it to the photo's link. */
.pano-hint{position:absolute;z-index:2;top:26px;left:max(64px,calc((100% - 1280px)/2));display:inline-flex;align-items:center;gap:11px;padding:9px 16px 9px 12px;border:1px solid #ffffff66;border-radius:999px;background:#10101052;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--white);font-size:13px;font-weight:600;letter-spacing:.2px;line-height:1.2;pointer-events:none}
.pano-hint i{position:relative;flex:none;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px #ffffffe6}
.pano-hint i::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid #ffffffb3;animation:pano-pulse 2.2s ease-out infinite}
@keyframes pano-pulse{0%{transform:scale(.55);opacity:.95}100%{transform:scale(1.5);opacity:0}}
.pano-hint .on-mouse{display:none}
@media(hover:hover) and (pointer:fine){.pano-hint .on-touch{display:none}.pano-hint .on-mouse{display:inline}}
@media(prefers-reduced-motion:reduce){.pano-hint i::after{animation:none;opacity:0}}
@media(max-width:1000px){.pano-foot{width:calc(100% - 70px)}.pano-arrow.is-prev{left:35px}.pano-arrow.is-next{right:35px}.pano-hint{left:35px}}
@media(max-width:900px){
  .houses{gap:64px;margin-top:56px}
  /* On a phone the header is only the words, and the chips and the two buttons come after the photo. The house's name stays
     pinned under the site header, on a white band the width of the screen, until the whole house has gone by (the band is
     sticky inside .house-pano, so the header's boxes step aside with display:contents). While pinned (is-stuck) the band carries
     a shadow, the name shrinks to a title-bar size (a transform, so nothing on the page moves), and an
     "Explore" button slides in on the right, to the house's page. */
  .house-pano{display:flex;flex-direction:column;gap:0}
  .pano-head,.pano-head-copy{display:contents}
  .pano-title{position:sticky;top:calc(var(--header-height) + var(--safe-top,0px));z-index:6;margin-top:6px;padding:8px 0}
  .pano-title::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--white);transition:box-shadow .25s}
  .pano-name{margin:0;font-size:clamp(46px,12vw,72px);transform-origin:left center;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .pano-native{margin-top:6px;font-size:18px}
  .pano-open{position:absolute;top:50%;right:0;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;background:var(--ink);color:var(--white);border-radius:2px;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;opacity:0;visibility:hidden;transform:translate(10px,-50%);transition:opacity .25s,transform .25s,background .2s,visibility 0s linear .25s}
  .pano-open .icon{width:15px;height:15px}
  .house-pano.is-stuck .pano-title::before{box-shadow:0 1px 0 var(--line),0 14px 28px #10101014}
  .house-pano.is-stuck .pano-name{transform:scale(.74)}
  .house-pano.is-stuck .pano-open{opacity:1;visibility:visible;transform:translate(0,-50%);transition-delay:0s}
  .pano-open:active{background:var(--gold);color:var(--ink)}
  .pano-line{margin-top:4px;font-size:15px}
  .pano-media{margin-top:22px;height:min(72svh,620px)}
  .pano-head-side{order:1;margin-top:24px;justify-items:start;gap:16px;padding-bottom:0}
  .pano-chips,.pano-actions{justify-content:flex-start}
}
@media(max-width:760px){
  .pano-foot{width:calc(100% - 48px);padding-bottom:22px}
  .pano-more{display:none}
  .pano-arrow{width:44px;height:44px;margin-top:-22px}
  .pano-arrow .icon{width:17px;height:17px}
  .pano-arrow.is-prev{left:16px}
  .pano-arrow.is-next{right:16px}
  .pano-hint{top:16px;left:16px;gap:10px;padding:8px 14px 8px 11px;font-size:12px}
  .pano-actions{width:100%}
  .pano-actions .pano-cta,.pano-actions .pano-stay{width:100%;justify-content:space-between}
}
@media(max-width:480px){.pano-foot{width:calc(100% - 42px)}}

/* On touch screens a tapped "Customise my own experience" does not keep its hover look. */
@media(hover:none){.package-customise:hover{background:transparent;color:var(--ink);box-shadow:none;transform:none}}


/* ──────────── The builder after the booking audit: activities only, children, who joins, date checks, the plan as a column,
   the pack finder, and a booking action always in reach on phones ──────────── */
.menu-line.is-stay .menu-control{justify-self:end}
.menu-who{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.menu-who>span{font-size:12px;font-weight:600;letter-spacing:.3px;color:#ffffffb3}
.menu-who>small{flex-basis:100%;font-size:12px;line-height:1.5;color:var(--gold)}
.menu-who .stepper.is-small output{min-width:78px}
.menu-kids{display:grid;gap:10px;width:100%}
.kid-ages{display:flex;flex-wrap:wrap;gap:8px}
.kid-ages label{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 6px 0 12px;border:1px solid #ffffff33;border-radius:999px;font-size:12.5px;color:#ffffffcc}
.kid-ages select{appearance:none;-webkit-appearance:none;min-height:30px;padding:0 8px;border:0;border-radius:999px;background:#ffffff1a;color:var(--white);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.kid-ages select:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.kid-ages select option{color:var(--ink)}
.menu-hint{display:block;font-size:12px;line-height:1.5;color:#ffffff99}
.menu-warn{display:block;margin-top:6px;color:var(--gold);font-weight:600}
.menu-off{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px dashed #ffffff4d;border-radius:999px;font-size:12px;color:#ffffffb3;white-space:nowrap}
.menu-line.has-warn .menu-name{color:var(--gold)}
/* The plan: one column of parts that fold, each with its subtotal. */
.summary-scroll{display:flex;flex-direction:column;gap:8px;overflow-x:hidden;overflow-y:auto;scroll-snap-type:none;margin:12px 0 0;padding:0 0 2px;-webkit-mask-image:none;mask-image:none}
.summary-card{flex:none;padding:0 14px;scroll-snap-align:none}
.summary-card>summary{display:flex;align-items:center;gap:10px;min-height:42px;cursor:pointer;list-style:none}
.summary-card>summary::-webkit-details-marker{display:none}
.summary-card>summary .summary-section{flex:1}
.summary-sub{font-size:13px;font-weight:600;color:var(--ink)}
.summary-chev{width:14px;height:14px;color:var(--muted);transition:transform .2s}
.summary-card[open] .summary-chev{transform:rotate(180deg)}
.summary-card .summary-lines{margin:0;border-top:1px solid var(--line)}
.summary-empty{margin:0;padding:14px;border:1px dashed var(--line);border-radius:3px;font-size:13px;line-height:1.5;color:var(--muted)}
.summary-nav{display:none!important}
.summary-warn{display:flex;gap:10px;margin:12px 0 0;padding:10px 12px;background:#b998601f;border:1px solid var(--gold);border-radius:3px;font-size:12.5px;line-height:1.5;color:var(--ink)}
.summary-warn .icon{flex:none;width:16px;height:16px;margin-top:1px;color:var(--gold)}
.summary-terms{display:grid;gap:8px;margin-top:14px;padding:12px 14px;background:var(--white);border:1px solid var(--line);border-radius:3px}
.summary-terms p{display:flex;gap:10px;margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.summary-terms b{color:var(--ink);font-weight:600}
.summary-terms .icon{flex:none;width:16px;height:16px;margin-top:2px;color:var(--gold)}
.summary-share{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:46px;margin-top:10px;border:1px solid var(--ink);border-radius:2px;background:transparent;color:var(--ink);font-size:14px;font-weight:600;transition:background .2s,color .2s}
.summary-share:hover{background:var(--ink);color:var(--white)}
.summary-share .icon{width:16px;height:16px}
.summary-restored{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:0 0 14px;padding:10px 12px;background:var(--white);border:1px solid var(--gold);border-radius:3px;font-size:12.5px;line-height:1.4;color:var(--ink)}
.summary-restored button{font-size:12px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* The pack finder, on the dark packs section. */
.pack-finder{display:grid;gap:12px;margin:0 0 40px}
.finder-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.finder-label{min-width:118px;margin-right:4px;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}
.finder-chip{min-height:38px;padding:0 16px;border:1px solid #ffffff40;border-radius:999px;background:transparent;color:var(--white);font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.finder-chip:hover{border-color:var(--white)}
.finder-chip.is-active{background:var(--white);border-color:var(--white);color:var(--ink)}
.finder-count{margin:2px 0 0;font-size:13px;color:#ffffff99}
.finder-count button{margin-left:6px;color:var(--white);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* The hero calendar, when it opens below the form on a short screen. */
@media(min-width:601px){#calendar-popover.is-below{top:calc(100% + 14px);bottom:auto}}
/* A booking action is always in reach on phones: "Book now" in the header, and Book now and WhatsApp at the foot of the menu. */
.mobile-menu-actions{display:flex;gap:10px;margin-top:22px}
.mobile-menu-actions>*{flex:1;display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 12px;border-radius:2px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer}
.mobile-menu-actions .menu-book{background:var(--ink);color:var(--white)}
.mobile-menu-actions .menu-wa{background:var(--whatsapp,#25d366);color:var(--ink)}
@media(max-width:760px){
  .pack-finder{margin-bottom:28px}
  .finder-group{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-24px;padding-inline:24px}
  .finder-group::-webkit-scrollbar{display:none}
  .finder-label{flex:none;min-width:0}
  .finder-chip{flex:none}
}
@media(max-width:600px){
  .site-header .header-book{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;gap:8px;font-size:12.5px;font-weight:600;white-space:nowrap}
  .site-header .header-book .icon{display:none}
  /* On a white header (scrolled, a generated page, or the menu open) the button is ink, so it never reads as plain text. */
  .site-header.is-scrolled .header-book,.site-header:has(.mobile-menu:not([hidden])) .header-book{background:var(--ink);border-color:var(--ink);color:var(--white)}
}
/* Small phones: the logo and the language label give a little room so the four header items always fit. */
@media(max-width:389px){
  .site-header .brand,.site-header .brand-logo{width:144px;min-width:144px;height:auto}
  .site-header .header-book{padding:0 10px;font-size:12px}
  .site-header .language-toggle{padding-inline:4px}
}
@media(max-width:369px){
  .site-header .brand,.site-header .brand-logo{width:124px;min-width:124px}
  .site-header .header-actions{gap:2px}
}
@media(max-width:339px){
  .site-header{padding-inline:14px}
  .site-header .brand,.site-header .brand-logo{width:104px;min-width:104px}
  .site-header .header-book{padding:0 9px;font-size:11.5px}
}
/* The plan card scrolls as one column when it is taller than the screen; the total and "Book this plan" stay pinned at its foot. */
.builder-summary{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.builder-summary .summary-scroll,.plan-dialog .summary-scroll{flex:none;overflow:visible}
.summary-foot{position:sticky;bottom:0;z-index:2;margin:0 calc(-1 * var(--summary-pad));padding:0 var(--summary-pad) 12px;background:var(--paper)}
.summary-foot .summary-cta{margin-top:12px}
/* ──────────── The generated home sections (site/build.mjs): how booking works, the questions, the experiences, the cars, the journal ──────────── */
/* Shared: on phones the cards of a section sit in one row that scrolls sideways, with a position, a progress bar and two buttons (ui.js). */
.scroller-controls{display:none;align-items:center;gap:18px;margin-top:22px}
.scroller-pos{flex:none;min-width:56px;font-size:12px;font-weight:600;letter-spacing:1.4px;font-variant-numeric:tabular-nums}
.scroller-progress{flex:1;height:2px;background:var(--line);overflow:hidden}
.scroller-progress>span{display:block;height:100%;background:var(--ink);transform-origin:left center;transform:scaleX(0);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.scroller-buttons{display:flex;gap:8px}
.scroller-buttons button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--ink);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.scroller-buttons button .icon{width:16px;height:16px}
.scroller-buttons button:first-child .icon{transform:rotate(180deg)}
.scroller-buttons button:hover{background:var(--ink);color:var(--white)}
.scroller-buttons button:disabled{opacity:.3;pointer-events:none}
.section-heading-aside .text-link{margin-top:22px}
.steps-actions .primary-button,.xp-intro-cta.primary-button{width:auto;min-width:0;margin:0;gap:14px;font-size:14px;padding-inline:22px;justify-content:center}
.xp-intro-cta.primary-button{margin:24px 0 0}
/* 03 · how booking works: the photo of the people who answer, four steps, three promises. */
.steps-section{background:var(--paper)}
.steps-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px clamp(40px,6vw,96px);align-items:start}
.steps-media{position:sticky;top:calc(var(--header-height,80px) + 24px);margin:0;overflow:hidden;border-radius:6px;background:var(--ink);aspect-ratio:4/5}
.steps-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.steps-media figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:56px 22px 20px;background:linear-gradient(to top,#101010d9,#10101000);color:var(--white);font-size:13px;line-height:1.5}
.steps-list{list-style:none;margin:0;padding:0}
.steps-list li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 12px;padding:26px 0 28px;border-top:1px solid var(--line)}
.steps-list li:last-child{border-bottom:1px solid var(--line)}
.step-num{padding-top:8px;font-size:12px;font-weight:600;letter-spacing:1.6px;color:var(--gold)}
.steps-list h3{margin:0;font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.025em;line-height:1.2}
.steps-list p{margin:10px 0 0;max-width:54ch;font-size:15.5px;line-height:1.75;color:var(--muted)}
.steps-list p a,.faq-col details p a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.steps-list p a:hover,.faq-col details p a:hover{color:var(--gold)}
.promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.promises article{min-width:0}
.promises .icon{width:28px;height:28px;stroke-width:1.4;color:var(--ink)}
.promises h3{margin:16px 0 0;font-size:18px;font-weight:600;letter-spacing:-.01em}
.promises p{margin:8px 0 0;font-size:14.5px;line-height:1.7;color:var(--muted)}
.steps-actions{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:40px}
/* 04 · the questions: two columns that fold independently, one open at a time. */
.faq-section{background:var(--white)}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px;align-items:start}
.faq-col details{border-top:1px solid var(--line)}
.faq-col details:last-child{border-bottom:1px solid var(--line)}
.faq-col summary{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 0;cursor:pointer;list-style:none;font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.4}
.faq-col summary::-webkit-details-marker{display:none}
.faq-col summary::after{content:'+';flex:none;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--ink);border-radius:50%;font-size:16px;font-weight:400;color:var(--ink);transition:background .2s,color .2s}
.faq-col details[open] summary::after{content:'−';background:var(--ink);color:var(--white)}
.faq-col details p{margin:0;padding:0 48px 22px 0;max-width:64ch;font-size:15.5px;line-height:1.75;color:var(--muted)}
/* 05 · experiences: the introduction and its index stay on the left while the cards go by on the right. */
.xp-section{background:var(--paper)}
.xp-layout{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.6fr);gap:0 clamp(40px,6vw,96px);align-items:start}
.xp-layout>*{min-width:0}
.xp-intro{position:sticky;top:calc(var(--header-height,80px) + 24px);max-height:calc(100vh - var(--header-height,80px) - 40px);overflow:auto;scrollbar-width:none}
.xp-intro::-webkit-scrollbar{display:none}
.xp-intro .section-title{font-size:clamp(34px,3.3vw,48px)}
.xp-intro .section-copy{margin-top:18px;max-width:40ch;font-size:15.5px;line-height:1.7}
.xp-index{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:24px 0 0;padding:0}
.xp-index li{min-width:0}
.xp-index a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 8px;padding:14px 14px 13px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.xp-index .icon{width:20px;height:20px;stroke-width:1.5;color:var(--ink);transition:color .2s}
.xp-index-num{font-size:11px;font-weight:600;letter-spacing:1.4px;color:var(--gold)}
.xp-index-name{grid-column:1/-1;font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.xp-index li:first-child,.xp-index li:last-child{grid-column:1/-1}
.xp-index li:first-child a,.xp-index li:last-child a{grid-template-columns:auto minmax(0,1fr) auto;gap:0 12px;padding:12px 14px}
.xp-index li:first-child .xp-index-name,.xp-index li:last-child .xp-index-name{grid-column:auto;order:2}
.xp-index li:first-child .xp-index-num,.xp-index li:last-child .xp-index-num{order:3}
.xp-index a:hover{border-color:var(--ink)}
.xp-index a.is-current{background:var(--ink);border-color:var(--ink);color:var(--white)}
.xp-index a.is-current .icon{color:var(--gold)}
.xp-intro-cta{margin-top:24px}
@media(max-height:840px) and (min-width:901px){
  .xp-intro .section-copy{display:none}
  .xp-intro .section-title{font-size:clamp(30px,3vw,40px)}
  .xp-index{margin-top:18px;gap:8px}
  .xp-index a{padding:9px 12px 8px;gap:6px 8px}
  .xp-index .icon{width:17px;height:17px}
  .xp-index-name{font-size:13.5px}
  .xp-intro-cta.primary-button{margin-top:18px;min-height:48px}
}
.xp-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 28px}
.xp-card{display:flex;flex-direction:column;min-width:0}
.xp-card-media{position:relative;display:block;overflow:hidden;border-radius:6px;background:var(--ink);aspect-ratio:4/5}
.xp-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.xp-card:hover .xp-card-media img{transform:scale(1.04)}
.xp-num{position:absolute;top:14px;left:14px;padding:6px 10px;background:var(--ink);color:var(--white);border-radius:999px;font-size:11px;font-weight:600;letter-spacing:1.4px}
.xp-card-body{display:flex;flex-direction:column;flex:1;padding:20px 4px 0}
.xp-card-meta{margin:0;font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--muted)}
.xp-card-title{margin:8px 0 0;font-size:clamp(22px,1.9vw,26px);font-weight:500;letter-spacing:-.025em;line-height:1.15}
.xp-card-title a{color:inherit;text-decoration:none;transition:color .2s}
.xp-card-title a:hover{color:var(--gold)}
.xp-card-copy{margin:12px 0 0;font-size:15px;line-height:1.72;color:var(--muted)}
.xp-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:auto;padding-top:20px}
.xp-card-link{display:inline-flex;align-items:center;gap:10px;padding-bottom:2px;border-bottom:1px solid var(--gold);font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;transition:color .2s}
.xp-card-link .icon{width:15px;height:15px;transition:transform .25s}
.xp-card-link:hover{color:var(--gold)}
.xp-card-link:hover .icon{transform:translateX(4px)}
.xp-card-add{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.xp-card-add:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.xp-card.is-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:0 40px;align-items:center}
.xp-card.is-wide .xp-card-media{aspect-ratio:4/3}
.xp-card.is-wide .xp-card-body{padding:0 8px 0 0}
.xp-card-house{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:0;background:var(--ink);color:var(--white);border-radius:6px;overflow:hidden}
.xp-card-house .xp-card-media{aspect-ratio:auto;height:100%;min-height:420px;border-radius:0}
.xp-card-house .xp-card-body{padding:44px 48px 44px 40px}
.xp-card-house .xp-card-meta{color:#ded7cb}
.xp-card-house .xp-card-copy{color:#ded7cbd9}
.xp-card-house .xp-card-link{color:var(--white)}
.xp-card-house .xp-card-add{border-color:#ffffff59;color:var(--white)}
.xp-card-house .xp-card-add:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
/* 06 · the cars, in the cards of hilalluxurycars.com: the studio photo on paper, the name, the reasons, the specs, the price and the pill. */
.cars-section{background:var(--white)}
.cars-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cars-why article{min-width:0;padding:0 32px}
.cars-why article:first-child{padding-left:0}
.cars-why article:last-child{padding-right:0}
.cars-why article+article{border-left:1px solid var(--line)}
.cars-why .icon{width:40px;height:40px;stroke-width:1.35;color:var(--ink);margin-bottom:20px}
.cars-why h3{margin:0;font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.35}
.cars-why p{margin:12px 0 0;font-size:15px;line-height:1.75;color:var(--muted)}
.fleet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px;margin-top:64px}
.car-card{display:flex;flex-direction:column;min-width:0;padding:10px 10px 20px;background:var(--white);border:1px solid var(--line);border-radius:16px;transition:border-color .2s,box-shadow .2s}
.car-card:hover{border-color:#10101033;box-shadow:0 18px 40px #10101010}
.car-image-wrap{position:relative;aspect-ratio:1.47;overflow:hidden;border-radius:10px;background:var(--white)}
.car-image{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.car-card:hover .car-image{transform:scale(1.04)}
.car-category{position:absolute;top:12px;left:12px;padding:6px 10px;background:var(--paper);border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink)}
.car-index{position:absolute;top:14px;right:14px;font-size:12px;font-weight:600;letter-spacing:1px;color:var(--muted)}
.car-content{display:flex;flex-direction:column;flex:1;padding:18px 8px 0}
.car-badge{align-self:flex-start;margin-bottom:10px;padding:5px 9px;background:var(--whatsapp,#25d366);color:var(--ink);border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase}
.car-content h3{margin:0;font-size:23px;font-weight:500;letter-spacing:-.8px;line-height:1.15}
.car-content h3 a{color:inherit;text-decoration:none;transition:color .2s}
.car-content h3 a:hover{color:var(--gold)}
.car-similar{font-size:12.5px;color:var(--muted)}
.car-fit{margin:12px 0 0;font-size:14.5px;font-weight:600;line-height:1.4}
.car-why{margin:6px 0 0;font-size:14px;line-height:1.65;color:var(--muted)}
.car-details{display:flex;flex-wrap:wrap;gap:8px 16px;margin:14px 0 18px;font-size:12.5px;color:var(--muted)}
.car-details span{display:inline-flex;align-items:center;gap:6px}
.car-details em{font-style:normal}
.car-details .icon{width:15px;height:15px;stroke-width:1.6}
.car-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.car-price{display:flex;align-items:baseline;gap:5px;margin:0;white-space:nowrap}
.car-price strong{font-size:22px;font-weight:500;letter-spacing:-.5px}
.car-price span{font-size:12px;color:var(--muted)}
.car-reserve{display:inline-flex;align-items:center;gap:10px;height:42px;white-space:nowrap;padding:0 5px 0 16px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.car-reserve .icon{box-sizing:border-box;width:30px;height:30px;padding:8px;border-radius:50%;background:var(--ink);color:var(--white);transition:background .2s,color .2s,transform .25s}
.car-reserve:hover{background:var(--ink);color:var(--white)}
.car-reserve:hover .icon{background:var(--white);color:var(--ink);transform:translate(1px,-1px)}
.car-card-more{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px 40px;padding:36px 40px;background:var(--ink);border-color:var(--ink);color:var(--white);text-decoration:none}
.car-card-more:hover{border-color:var(--ink);box-shadow:none}
.car-more-body{display:flex;flex-direction:column;min-width:0}
.car-more-kicker{font-size:11px;font-weight:600;letter-spacing:1.6px;color:var(--gold)}
.car-more-title{margin-top:8px;font-size:clamp(26px,2.4vw,36px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.car-more-copy{margin-top:10px;max-width:60ch;font-size:15px;line-height:1.7;color:#ded7cb}
.car-card-more .car-reserve{border-color:var(--white);color:var(--white)}
.car-card-more .car-reserve .icon{background:var(--white);color:var(--ink)}
.car-card-more:hover .car-reserve{background:var(--white);color:var(--ink)}
.car-card-more:hover .car-reserve .icon{background:var(--ink);color:var(--white)}
.cars-advice{margin-top:64px;padding:32px 36px 34px;background:var(--paper);border-top:2px solid var(--gold);border-radius:6px}
.cars-advice h3{margin:0;font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}
.cars-advice ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:14px 0 0;padding:0}
.cars-advice li{margin:0;padding:12px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.65}
.cars-advice li b{font-weight:600}
.cars-terms{margin:22px 0 0;font-size:13px;line-height:1.65;color:var(--muted)}
/* 07 · the journal. */
.journal-section{background:var(--paper)}
.journal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:1120px){
  .fleet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cars-why article{padding-inline:22px}
  .xp-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr)}
}
@media(max-width:900px){
  .scroller-track{--gutter:35px;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .scroller-track::-webkit-scrollbar{display:none}
  .scroller-track>*{flex:0 0 min(100% - 27px,400px);scroll-snap-align:start}
  .fleet-grid.scroller-track>*{flex-basis:min(100% - 27px,340px)}
  .scroller-controls{display:flex}
  .steps-layout{grid-template-columns:1fr;gap:32px}
  .steps-media{position:relative;top:auto;aspect-ratio:16/10}
  .promises{grid-template-columns:1fr;gap:28px;margin-top:40px;padding-top:32px}
  .faq-grid{grid-template-columns:1fr;gap:0}
  .faq-col+.faq-col details:first-child{border-top:0}
  .xp-layout{grid-template-columns:1fr;gap:36px}
  .xp-intro{position:static;max-height:none;overflow:visible}
  .xp-index,.xp-intro-cta{display:none}
  .xp-track{gap:14px}
  .xp-card.is-wide,.xp-card-house{display:flex;flex-direction:column;grid-column:auto}
  .xp-card.is-wide .xp-card-media,.xp-card-house .xp-card-media{aspect-ratio:4/5;height:auto;min-height:0}
  .xp-card.is-wide .xp-card-body{padding:20px 4px 0}
  .xp-card-house .xp-card-body{padding:22px 22px 26px}
  .cars-why{grid-template-columns:1fr;gap:0}
  .cars-why article,.cars-why article:first-child,.cars-why article:last-child{padding:22px 0}
  .cars-why article+article{border-left:0;border-top:1px solid var(--line)}
  .fleet-grid{margin-top:44px}
  .car-card-more{display:flex;flex-direction:column;justify-content:center;grid-column:auto;padding:28px 24px 30px}
  .car-card-more .car-reserve{align-self:flex-start;margin-top:22px}
  .cars-advice{margin-top:48px}
  .cars-advice ul{grid-template-columns:1fr}
}
@media(max-width:760px){
  .scroller-track{--gutter:24px}
  .steps-list li{grid-template-columns:44px minmax(0,1fr);padding:22px 0 24px}
  .steps-list h3{font-size:22px}
  .steps-actions .primary-button,.steps-actions .ghost-button{width:100%;justify-content:space-between}
  .faq-col summary{font-size:16px;padding:18px 0}
  .faq-col details p{padding-right:0}
  .cars-advice{padding:24px 20px 26px}
}
@media(max-width:480px){
  .scroller-track{--gutter:21px}
  .car-bottom{flex-direction:column;align-items:stretch;gap:14px}
  .car-reserve{justify-content:space-between;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .xp-card-media img,.car-image,.scroller-progress>span{transition:none}
}
/* The team card beside the booking steps, until there is a photo of the whole team. */
.steps-team{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(26px,3vw,42px);background:radial-gradient(110% 70% at 100% 0%,#b998603d,#b9986000 62%),var(--ink);color:var(--white);isolation:isolate}
/* The kit's emblem (hilal-emblem-gold.svg, 607×551 with a thin margin) is drawn at the size and place of the old square one. */
.steps-team .steps-team-mark{position:absolute;right:-10%;bottom:-5.5%;z-index:-1;width:75%;height:auto;object-fit:contain;opacity:.09;pointer-events:none}
.steps-team-kicker{margin:0;font-size:11px;font-weight:600;letter-spacing:1.8px;color:var(--gold)}
.steps-team-title{margin:12px 0 0;max-width:15ch;font-size:clamp(26px,2.4vw,36px);font-weight:500;letter-spacing:-.03em;line-height:1.12}
.steps-team-roles{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0}
.steps-team-roles li{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;text-align:center;font-size:13px;font-weight:500;line-height:1.3;color:#ded7cb}
/* Fixed sizes, not aspect-ratio: Chrome lets the icon’s default height stretch an aspect-ratio box into an oval. */
.steps-team-role{--d:clamp(64px,6vw,84px);flex:none;display:grid;place-items:center;width:var(--d);height:var(--d);min-height:0;border:1px solid #b998608c;border-radius:50%;background:#ffffff0a;color:var(--gold)}
.steps-team-role .icon{display:block;width:calc(var(--d) * .4);height:calc(var(--d) * .4);stroke-width:1.4}
.steps-team-roles li:nth-child(2) .steps-team-role{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.steps-team-foot{display:grid;gap:12px;padding-top:22px;border-top:1px solid #ffffff1f}
.steps-team-langs{margin:0;font-size:13px;line-height:1.6;color:#ded7cb}
.steps-team-langs>span:first-child{display:block;margin-bottom:2px;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#ffffff80}
.steps-team-phone{display:inline-flex;align-items:center;gap:10px;justify-self:start;min-height:46px;padding:0 18px;border-radius:999px;background:var(--whatsapp,#25d366);color:var(--ink);font-size:15px;font-weight:600;text-decoration:none;transition:transform .2s}
.steps-team-phone:hover{transform:translateY(-2px)}
.steps-team-phone .icon{width:18px;height:18px}
.steps-team-note{margin:0;font-size:12.5px;color:#ffffff99}
@media(max-width:900px){.steps-media.steps-team{aspect-ratio:auto;gap:24px}}
/* ──────────── The packs as stories: the photo pinned on one side, the pack scrolling on the other (full-page.js renderPackages) ──────────── */
#package-grid.package-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;width:auto;max-width:none;margin:var(--packs-gap,72px) 0 0}
.pk{--pk-r:22px;position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:start;margin:0!important;overflow:visible;background:var(--white);color:var(--ink);border-radius:var(--pk-r);outline:none!important;transition:box-shadow .3s}
.pk.is-picked{box-shadow:0 0 0 3px var(--gold)}
/* The pinned photo: the cover, then one photo per moment of the program, crossfading as the program is read. */
.pk .pk-media{position:sticky;top:calc(var(--header-height,80px) + 14px);align-self:start;height:calc(100vh - var(--header-height,80px) - 28px);height:calc(100svh - var(--header-height,80px) - 28px);min-height:460px;max-height:900px;margin:14px;overflow:hidden;border-radius:calc(var(--pk-r) - 6px);background:var(--ink);isolation:isolate}
.pk-shot{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.045);transition:opacity .8s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.pk-shot.is-on{opacity:1;transform:none}
.pk-shot img{display:block;width:100%;height:100%;object-fit:cover}
.pk .pk-media::after{content:'';position:absolute;inset:auto 0 0;z-index:1;height:46%;background:linear-gradient(to top,#101010d9,#10101000);pointer-events:none}
.pk-media-top{position:absolute;top:18px;left:18px;right:18px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}
.pk-num{padding:7px 12px;border-radius:999px;background:#1010108c;color:var(--white);font-size:11px;font-weight:600;letter-spacing:1.4px;font-variant-numeric:tabular-nums;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pk-badge{padding:7px 12px;border-radius:999px;background:var(--whatsapp,#25d366);color:var(--ink);font-size:10px;font-weight:600;letter-spacing:1.2px}
.pk .package-pick{position:absolute;top:auto;right:18px;bottom:18px;z-index:3;border-radius:999px}
.pk-cap{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;display:grid;gap:4px;color:var(--white);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;pointer-events:none}
.pk-cap.is-on{opacity:1;transform:none}
.pk-cap-time{font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);font-variant-numeric:tabular-nums}
.pk-cap-title{font-size:clamp(22px,2vw,30px);font-weight:500;letter-spacing:-.025em;line-height:1.15}
.pk-dots{display:flex;gap:6px;margin-top:10px}
.pk-dots i{width:18px;height:3px;border-radius:2px;background:#ffffff4d;transition:background .3s,width .3s}
.pk-dots i.is-on{width:30px;background:var(--gold)}
/* The scrolling side. */
.pk-body{--pk-pad-l:clamp(18px,2.6vw,40px);--pk-pad-r:clamp(24px,4.4vw,68px);min-width:0;padding:clamp(40px,5vw,72px) var(--pk-pad-r) 0 var(--pk-pad-l)}
.pk-tag.package-duration{margin:0;font-size:11px;font-weight:600;letter-spacing:1.8px;line-height:1.5;color:var(--muted)}
.pk .pk-head h3{margin:12px 0 0;font-family:var(--sans);font-size:clamp(40px,4vw,60px);font-weight:500;font-style:normal;letter-spacing:-.04em;line-height:1.02;color:var(--ink)}
.pk-lede{margin:18px 0 0;max-width:48ch;font-size:17px;line-height:1.7;color:var(--muted)}
.pk .pk-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:26px 0 0}
.pk .pk-price small{width:100%;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.pk .pk-price strong{font-size:clamp(32px,3vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1}
.pk .pk-price>span{font-size:14px;color:var(--muted)}
.pk .pk-price .package-was{font-size:16px;font-weight:500;color:var(--muted);text-decoration:line-through}
.pk .pk-price .package-off{display:inline-block;margin-left:4px;padding:4px 10px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:10px;font-weight:600;letter-spacing:.6px}
.pk-basis{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.pk-sec{margin-top:clamp(44px,5vw,64px)}
.pk-sec h4{margin:0;font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.025em;line-height:1.2}
.pk-sec h4::before{content:'';display:block;width:28px;height:2px;margin-bottom:16px;background:var(--gold)}
/* The program: time on the left, the moment on the right; the moment being read is marked and the others step back. */
.pk-timeline{list-style:none;margin:22px 0 0;padding:0}
.pk-timeline li{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 16px;padding:16px 0;border-top:1px solid var(--line);transition:opacity .35s}
.pk-timeline li:last-child{border-bottom:1px solid var(--line)}
.pk-timeline li::before{content:'';position:absolute;left:-14px;top:18px;bottom:18px;width:2px;border-radius:2px;background:var(--gold);opacity:0;transition:opacity .3s}
.pk-timeline li.is-current::before{opacity:1}
.pk-timeline:not(.is-days):has(li.is-current) li:not(.is-current){opacity:.45}
.pk-timeline time{padding-top:3px;font-size:13px;font-weight:600;letter-spacing:.5px;color:var(--muted);font-variant-numeric:tabular-nums;transition:color .3s}
.pk-timeline li.is-current time{color:var(--gold)}
.pk-timeline b{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.pk-timeline p{margin:4px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
.pk-timeline.is-days p{margin:0;color:var(--ink)}
.pk-opt{padding:3px 8px;border:1px solid var(--line);border-radius:999px;font-size:10px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
.pk-note{display:flex;gap:10px;margin:16px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.pk-note::before{content:'';flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--gold)}
/* What is included: small cards, the pack's highlight in gold. */
.pk-includes{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0 0;padding:0}
.pk-includes li{display:flex;align-items:center;gap:12px;min-width:0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;font-size:14.5px;line-height:1.4;color:var(--ink)}
.pk-includes li:last-child:nth-child(odd){grid-column:1/-1}
.pk-includes .icon{flex:none;width:20px;height:20px;color:var(--gold);stroke-width:1.6}
.pk-includes li.is-hi{background:var(--gold);border-color:var(--gold);font-weight:600}
.pk-includes li.is-hi .icon{color:var(--ink);fill:currentColor;stroke-width:1.4}
.pk-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:24px;padding:20px 22px;border-radius:14px;background:var(--paper)}
.pk-end p{flex:1 1 260px;margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
/* Buttons: pills, like the car cards. */
.pk-select,.pk-custom,.pk-share{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:999px;font:inherit;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.pk-select{border:1px solid var(--ink);background:var(--ink);color:var(--white)}
.pk-select:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.pk-custom{border:1px solid var(--ink);background:transparent;color:var(--ink)}
.pk-custom:hover{background:var(--ink);color:var(--white)}
.pk-share{padding:0 18px;border:1px solid var(--line);background:var(--white);color:var(--ink)}
.pk-share:hover{border-color:var(--ink)}
.pk-share.is-done{background:var(--gold);border-color:var(--gold)}
.pk-select .icon,.pk-custom .icon,.pk-share .icon{width:16px;height:16px}
.pk-custom-head{display:none}
/* The bar that stays in reach while the pack is read, and settles at its end. */
.pk-bar{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px 18px;margin:48px calc(-1 * var(--pk-pad-r)) 0 calc(-1 * var(--pk-pad-l));padding:14px var(--pk-pad-r) calc(14px + var(--safe-bottom,0px)) var(--pk-pad-l);background:#ffffffeb;border-top:1px solid var(--line);border-radius:0 0 var(--pk-r) 0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.pk-bar-price{display:grid;min-width:0}
.pk-bar-price small{overflow:hidden;font-size:11px;font-weight:600;letter-spacing:.6px;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.pk-bar-price b{font-size:24px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.pk-actions{display:flex;align-items:center;gap:8px}
/* The plan card beside the builder flashes gold when a pack is selected. */
.builder-summary.is-flash{animation:pkFlash 1.6s ease}
@keyframes pkFlash{0%{box-shadow:0 0 0 0 #b99860}25%{box-shadow:0 0 0 5px #b99860}100%{box-shadow:0 0 0 0 #b9986000}}
@media(max-width:1180px){
  .pk-actions .pk-share span{display:none}
  .pk-share{width:50px;padding:0}
}
@media(max-width:1020px) and (min-width:901px){
  .pk-custom-bar{display:none}
  .pk-custom-head{display:inline-flex;margin-top:18px}
}
/* Phones and tablets: the photo pinned at the top, under the header, the pack scrolling beneath it, the bar at the bottom. */
@media(max-width:900px){
  #package-grid.package-grid{gap:18px}
  .pk{--pk-r:20px;display:block;overflow:clip}
  .pk .pk-media{top:var(--header-height,72px);height:clamp(220px,38vh,340px);height:clamp(220px,38svh,340px);min-height:0;max-height:none;margin:0;border-radius:0;box-shadow:0 14px 26px -16px #10101099}
  .pk-media-top{top:14px;left:14px;right:14px}
  .pk .package-pick{right:14px;bottom:14px}
  .pk-cap{left:18px;right:18px;bottom:16px}
  .pk-cap-title{font-size:21px}
  .pk-dots{margin-top:8px;gap:5px}
  .pk-dots i{width:14px}
  .pk-dots i.is-on{width:24px}
  .pk-body{--pk-pad-l:20px;--pk-pad-r:20px;padding:26px 20px 0}
  .pk .pk-head h3{font-size:clamp(36px,10vw,46px)}
  .pk-lede{font-size:16px}
  .pk-sec{margin-top:44px}
  .pk-timeline li{grid-template-columns:76px minmax(0,1fr);gap:0 12px;padding:14px 0}
  .pk-timeline li::before{left:-11px}
  .pk-timeline b{font-size:16px}
  .pk-timeline p{font-size:14.5px}
  .pk-bar{margin-top:36px;border-radius:0}
}
@media(max-width:600px){
  .pk-custom-bar{display:none}
  .pk-custom-head{display:inline-flex;margin-top:18px}
  .pk-includes{grid-template-columns:minmax(0,1fr)}
  .pk-includes li:last-child:nth-child(odd){grid-column:auto}
  .pk-includes li{padding:12px 14px;font-size:14px}
  .pk-end{padding:18px}
  .pk-end .pk-custom{width:100%}
  .pk-bar{gap:10px}
  .pk-bar-price b{font-size:21px}
  .pk-select{min-height:48px;padding:0 18px}
  .pk-share{width:48px;min-height:48px}
}
@media(max-width:374px){
  .pk-select .icon{display:none}
  .pk-select{padding:0 14px}
  .pk-timeline li{grid-template-columns:64px minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .pk-shot,.pk-cap,.pk-timeline li,.pk-dots i{transition:none}
  .builder-summary.is-flash{animation:none}
}
/* Packs, second pass: the pinned photo above the text that scrolls under it, a bar whose price never meets the buttons, an
   icon-only share button with a tip when the link is copied. */
.pk .pk-media{z-index:3}
.pk-bar-price{flex:1 1 auto}
.pk-actions{flex:none}
.pk-bar-price b{font-size:22px}
.pk-share{position:relative;width:50px;padding:0}
.pk-share span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pk-share .icon{width:18px;height:18px}
.pk-share::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);right:0;padding:7px 11px;border-radius:8px;background:var(--ink);color:var(--white);font-size:12px;font-weight:600;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.pk-share.is-done::after{opacity:1;transform:none}
@media(max-width:1180px){
  .pk-custom-bar{display:none}
  .pk-custom-head{display:inline-flex;margin-top:18px}
}
@media(max-width:600px){
  .pk-select .icon{display:none}
  .pk-select{padding:0 20px;font-size:14px}
  .pk-bar-price b{font-size:19px}
  .pk-share{width:48px}
}
/* Packs, third pass: a light section, every pack the full width of the screen with its photo and its text alternating sides,
   and the pack's name pinned while the pack is read. The builder keeps its dark band. */
.packages-section{background:var(--white);color:var(--ink);padding-bottom:0}
.packages-section .section-title{color:var(--ink)}
.packages-section .section-heading-row .preview-chip{color:var(--ink);border-color:var(--line)}
.packages-section .finder-chip{border-color:var(--line);color:var(--ink)}
.packages-section .finder-chip:hover{border-color:var(--ink)}
.packages-section .finder-chip.is-active{background:var(--ink);border-color:var(--ink);color:var(--white)}
.packages-section .finder-count{color:var(--muted)}
.packages-section .finder-count button{color:var(--ink)}
/* The builder: the same dark band as before, from edge to edge of the screen. */
.packages-section .builder{position:relative;isolation:isolate;color:var(--white);border-top:0;padding-bottom:clamp(64px,8vw,108px)}
.packages-section .builder::before{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;background:var(--ink)}
/* The packs: full width, photo and text alternating, a hairline between two packs. */
#package-grid.package-grid{gap:0;width:100vw;margin:var(--packs-gap,72px) 0 0 calc(50% - 50vw)}
.pk{border-radius:0;border-top:1px solid var(--line);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pk:last-child{border-bottom:1px solid var(--line)}
.pk.is-picked{box-shadow:inset 0 0 0 3px var(--gold)}
.pk.is-flipped .pk-media{order:2}
.pk .pk-media{top:var(--header-height,80px);height:calc(100vh - var(--header-height,80px));height:calc(100svh - var(--header-height,80px));min-height:520px;max-height:none;margin:0;border-radius:0}
.pk-body{--pk-pad-l:clamp(28px,5.5vw,96px);--pk-pad-r:clamp(28px,5.5vw,96px);padding-top:clamp(36px,4vw,56px)}
.pk-bar{border-radius:0}
/* The name: pinned at the top of the text while the pack is read. */
.pk-name{position:sticky;top:var(--header-height,80px);z-index:5;margin:0 calc(-1 * var(--pk-pad-r)) 0 calc(-1 * var(--pk-pad-l));padding:18px var(--pk-pad-r) 16px var(--pk-pad-l);background:#ffffffee;border-bottom:1px solid transparent;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .25s,box-shadow .25s}
.pk-name.is-stuck{border-bottom-color:var(--line);box-shadow:0 10px 24px -18px #10101055}
.pk .pk-name h3{margin-top:6px;font-size:clamp(32px,2.9vw,46px)}
.pk-lede{margin-top:12px}
.pk-media-name{display:none}
@media(max-width:900px){
  .pk{display:block;overflow:visible;border-top:0}
  .pk.is-flipped .pk-media{order:0}
  .pk .pk-media{top:var(--header-height,72px);height:clamp(230px,40vh,350px);height:clamp(230px,40svh,350px);min-height:0}
  /* On phones the photo is pinned already: the name rides on it, always in sight. */
  .pk .pk-media::before{content:'';position:absolute;inset:0 0 auto;z-index:1;height:58%;background:linear-gradient(to bottom,#101010b3,#10101000);pointer-events:none}
  .pk-media-name{position:absolute;top:50px;left:16px;right:16px;z-index:2;display:block;margin:0;font-size:30px;font-weight:500;letter-spacing:-.03em;line-height:1.05;color:var(--white);text-shadow:0 2px 14px #10101066;pointer-events:none}
  .pk-media-top{top:14px;left:16px;right:16px}
  .pk-name{position:static;margin:0;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .pk .pk-name h3{margin-top:10px}
  .pk-body{--pk-pad-l:20px;--pk-pad-r:20px;padding-top:26px}
  .pk + .pk{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){.pk-name{transition:none}}
/* The name belongs to the whole text column (a direct child of .pk-body), so it stays pinned until the pack ends. */
.pk .pk-name h3{margin-bottom:0;font-family:var(--sans);font-weight:500;font-style:normal;letter-spacing:-.04em;line-height:1.04;color:var(--ink)}
.pk-head .pk-lede{margin-top:14px}
@media(max-width:900px){.pk .pk-name h3{font-size:clamp(34px,9.6vw,44px)}}
/* The pinned name is solid, so nothing reads through it. */
.pk-name{background:var(--white);backdrop-filter:none;-webkit-backdrop-filter:none}
/* Phones: the header slides away over the packs (full-page.js), so the pinned photo takes the very top of the screen. */
@media(max-width:900px){.pk .pk-media{top:var(--safe-top,0px)}.site-header{transition:transform .3s ease}}
/* The pack's bar in black: white text, a white "Select this plan", white outlines for Customise and Share. */
.pk-bar{background:#101010f5;border-top-color:var(--ink);color:var(--white)}
.pk-bar .pk-bar-price small{color:#ffffffa6}
.pk-bar .pk-bar-price b{color:var(--white)}
.pk-bar .pk-select{background:var(--white);border-color:var(--white);color:var(--ink)}
.pk-bar .pk-select:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.pk-bar .pk-custom{border-color:#ffffff73;color:var(--white)}
.pk-bar .pk-custom:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.pk-bar .pk-share{background:transparent;border-color:#ffffff4d;color:var(--white)}
.pk-bar .pk-share:hover{border-color:var(--white)}
.pk-bar .pk-share.is-done{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.pk-bar .pk-share::after{background:var(--white);color:var(--ink)}
.pk-bar{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
/* Home: under Surf Focus, the band into the page of all the plans. */
.pk-more{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px 32px;margin:28px 0 0;padding:clamp(22px,3vw,32px) clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:20px;background:var(--paper)}
.pk-more:empty{display:none}
.pk-more-kicker{margin:0;font-size:11px;font-weight:600;letter-spacing:1.6px;color:var(--gold)}
.pk-more-title{margin:6px 0 0;font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:-.025em;line-height:1.15;color:var(--ink)}
.pk-more-names{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.pk-more-faces{display:flex;padding-left:14px}
.pk-more-faces img{width:58px;height:58px;margin-left:-14px;border:3px solid var(--paper);border-radius:50%;object-fit:cover;background:var(--ink)}
.pk-more-go{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;border-radius:999px;background:var(--ink);color:var(--white);font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.pk-more-go:hover{background:var(--gold);color:var(--ink)}
.pk-more-go .icon{width:16px;height:16px}
@media(max-width:900px){
  .pk-more{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:22px;padding:22px 20px}
  .pk-more-faces{order:-1}
  .pk-more-go{justify-content:space-between}
}
/* The home page hides its header over the packs on phones; a plan's own page keeps it (pages.css). */
@media(max-width:900px){#packs .pk .pk-media{top:var(--safe-top,0px)}}
/* Phones: the name on the pinned photo fades in once the pack's own title has slid away under it (is-named). */
@media(max-width:900px){.pk-media-name{opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}.pk.is-named .pk-media-name{opacity:1;transform:none}}

/* The builder's arrival and nights: the arrival opens the calendar, the nights are a counter in the same white box; the departure
   follows and is said in the row's note. */
.stay-nights{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;min-width:0;min-height:56px;padding:3px 14px}
.stay-nights .stepper{border-color:var(--line)}
.stay-nights .stepper button{width:30px;height:30px;color:var(--ink)}
.stay-nights .stepper button:enabled:hover{background:#f3efe8}
.stay-nights .stepper button .icon{width:14px;height:14px}
#builder-items .stay-nights .stepper output{min-width:26px;padding:0 10px;color:var(--ink);font-size:16px;font-weight:600}
.stay-calendar .calendar-footer>span{font-weight:600}
/* Phones: the arrival on top, the nights below it with the counter on the right, so neither is squeezed. */
@media(max-width:480px){
  .stay-fields{grid-template-columns:minmax(0,1fr)}
  .stay-fields .field-trigger:first-child{border-right:0;border-bottom:1px solid var(--line)}
  .stay-nights{flex-direction:row;justify-content:space-between;align-items:center;min-height:52px}
  .stay-nights .field-label{font-size:12px}
}

/* Plans in the group: a box like "Who sleeps where", one line per plan; the plan in the header counts everyone left on it. */
.menu-mix .menu-line.is-main .menu-name::after{content:'';display:inline-block;width:6px;height:6px;margin-left:9px;border-radius:50%;background:var(--gold);vertical-align:middle}
@media(max-width:760px){.menu-mix .menu-line .stepper.is-small output{min-width:84px}}
/* Phones: the plan on the home page reads without its photo, which took most of the screen (the owner, 14 November 2026). The
   name, the price, the day hour by hour and what is included come first. */
@media(max-width:900px){#packs .pk .pk-media{display:none}#packs .pk .pk-body{padding-top:28px}}
/* Phones: with no photo above it, the plan's name stays pinned at the very top while the plan is read (the header slides away
   over the plans), on white, with a hairline once it is pinned (is-stuck, set in full-page.js). */
@media(max-width:900px){
  #packs .pk .pk-name{position:sticky;top:var(--safe-top,0px);z-index:6;margin:0 calc(-1 * var(--pk-pad-r,20px)) 0 calc(-1 * var(--pk-pad-l,20px));padding:14px var(--pk-pad-r,20px) 12px var(--pk-pad-l,20px);background:var(--white);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
  #packs .pk .pk-name.is-stuck{border-bottom-color:var(--line);box-shadow:0 12px 24px -20px #10101066}
  #packs .pk .pk-name .pk-tag{font-size:10.5px}
  #packs .pk .pk-name h3{margin-top:6px;font-size:clamp(30px,8.4vw,36px)}
}
/* Phones: the header slides away while the two houses fill the screen (full-page.js), so the house name pins at the very top. */
@media(max-width:900px){.pano-title{top:var(--safe-top,0px)}}

/* ──────────── Booking, after a visitor's test (15 November 2026) ──────────── */
/* The minimum stay, said at the top of both calendars before any date is picked; the month arrows move down by its height. */
.calendar-min{margin:0 0 6px;font-size:11px;font-weight:600;line-height:15px;letter-spacing:1.75px;text-transform:uppercase;color:var(--gold)}
.calendar-min[hidden]{display:none}
.calendar-popover:has(.calendar-min:not([hidden])) .calendar-navigation{top:113px}
/* The hero form's quiet note when a new check-in pushed the check-out to the minimum. */
#booking-error:not(:empty){margin-top:10px}
/* The builder's nights say their minimum; activities only shows the activity day alone (or with the car's days). */
.stay-min{font-weight:500;color:var(--muted)}
.stay-dates.is-single{max-width:300px}
.stay-fields.is-single{grid-template-columns:minmax(0,1fr)}
.stay-fields.is-single .field-trigger:first-child{border-right:0;border-bottom:0}
/* Euros and pounds under the dirhams: small, muted, labelled approximate, never in place of the price in MAD. */
.summary-fx{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:6px 0 0;font-size:13px;font-weight:500;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.summary-fx span,.fx .fx-k{font-size:11px;font-weight:500;letter-spacing:.3px;color:var(--muted)}
.summary-per-fx{color:var(--muted)}
.fx{display:block;font-size:13px;font-weight:500;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
.fx .fx-k{margin-left:8px}
.pp-card-fx{margin:8px 0 0}
.pl-price .pl-fx{margin-top:-2px;font-size:13px}
.pp-house .pp-house-fx{margin-top:2px}
.plan-price .plan-fx{width:100%;font-size:12px}
/* Home, the plans: all five side by side, before the recommended one is told in full. Small cards on white with the photo, the
   nights, the name and the price from; a list on phones. */
.pk-choice{margin:clamp(34px,4vw,52px) 0 0;padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--line)}
.pk-choice:empty{display:none}
.pk-choice-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 32px}
.pk-choice-k{margin:0;font-size:11px;font-weight:600;letter-spacing:1.75px;text-transform:uppercase;color:var(--gold)}
.pk-choice-t{margin:8px 0 0;font-size:clamp(24px,2.3vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.12;color:var(--ink)}
.pk-choice-all{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;padding:0 20px;border-radius:2px;background:var(--ink);color:var(--white);font-size:14px;font-weight:600;text-decoration:none;transition:background .2s,color .2s}
.pk-choice-all .icon{width:16px;height:16px}
.pk-choice-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin:28px 0 0;padding:0;list-style:none}
.pk-choice-list li{min-width:0}
.pk-choice-card{display:flex;flex-direction:column;gap:14px;height:100%;color:var(--ink);text-decoration:none}
.pk-choice-card:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.pk-choice-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--line)}
.pk-choice-img img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .3s}
/* "Recommended" is green everywhere (the owner, 15 November 2026), the same green as the car badges: ink text on it, 9.6:1. */
.pk-choice-tag{position:absolute;top:10px;left:10px;padding:5px 8px;border-radius:2px;background:var(--whatsapp,#25d366);color:var(--ink);font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase}
.pk-choice-text{display:grid;gap:4px;min-width:0}
.pk-choice-n{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.pk-choice-rec{display:none;margin-left:8px;padding:2px 7px;border-radius:2px;background:var(--whatsapp,#25d366);color:var(--ink);font-size:9.5px;letter-spacing:1px;vertical-align:1px}
.pk-choice-text b{font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.2;transition:color .2s}
.pk-choice-p{font-size:13px;line-height:1.45;color:var(--muted)}
.pk-choice-p strong{font-weight:600;color:var(--ink);white-space:nowrap}
.pk-choice-go{display:none}
.pk-choice-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;margin:26px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.pk-choice-foot a{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;transition:text-decoration-color .2s}
.pk-choice-foot .icon{width:14px;height:14px}
/* Hover only where there is a mouse, so a tapped card does not stay gold on a phone. No zoom on the photos. */
@media(hover:hover){
  .pk-choice-all:hover{background:var(--gold);color:var(--ink)}
  .pk-choice-card:hover .pk-choice-img img{opacity:.88}
  .pk-choice-card:hover .pk-choice-text b{color:var(--gold)}
  .pk-choice-foot a:hover{text-decoration-color:var(--ink)}
}
@media(max-width:1100px){.pk-choice-list{gap:14px}.pk-choice-text b{font-size:17px}}
@media(max-width:900px){
  .pk-choice-head{display:block}
  .pk-choice-all{display:flex;width:100%;margin-top:18px}
  .pk-choice-list{grid-template-columns:minmax(0,1fr);gap:0;margin-top:20px;border-top:1px solid var(--line)}
  .pk-choice-list li{border-bottom:1px solid var(--line)}
  .pk-choice-card{flex-direction:row;align-items:center;gap:14px;padding:12px 0}
  .pk-choice-img{flex:none;width:72px;height:72px;aspect-ratio:auto}
  .pk-choice-tag{display:none}
  .pk-choice-rec{display:inline-block}
  .pk-choice-text{flex:1}
  .pk-choice-text b{font-size:18px}
  .pk-choice-go{display:block;flex:none;width:18px;height:18px;color:var(--ink)}
  .pk-choice-foot{margin-top:18px}
}
/* Review of the booking changes (15 November 2026). On a phone the plan opens full screen: it is a page then, so it reads on white
   like every page (paper stays for the card beside the builder on wider screens). */
@media(max-width:600px){.plan-dialog,.plan-dialog .summary-foot{background:var(--white)}.plan-dialog .summary-foot{border-top:1px solid var(--line)}.plan-dialog .summary-total{margin-top:0;border-top:0}}
/* The hero calendar says why the check-out moved (a new check-in under the minimum, or the plan's own nights), under the months,
   so the heading and the month arrows keep their place. */
.calendar-note{margin:18px 0 0;padding:10px 12px;border-left:2px solid var(--gold);border-radius:0 2px 2px 0;background:var(--paper);font-size:13px;line-height:1.45;color:var(--ink)}
.calendar-note[hidden]{display:none}
/* The Hilal Stays & Experiences logo (15 November 2026). The kit's horizontal logo (hilal-horizontal-light.svg on white,
   hilal-horizontal-dark.svg over the video and on the dark footer) has the old logo's proportions (1735×551 against 2560×813), so
   it keeps the old widths: 184 px on wide screens, 160 px on phones, 144 px under 390 px. On phones it stays the horizontal logo,
   with its "STAYS & EXPERIENCES" line: from 360 px up that line keeps a cap height of at least 5 px (66/1735 of the width), which
   asks for 136 px between 360 and 369 px; the header still has 18 px to spare there. Narrower screens keep the room they need. */
@media(min-width:360px) and (max-width:369px){
  .site-header .brand,.site-header .brand-logo{width:136px;min-width:136px}
}
@media(max-width:339px){
  .site-header .brand,.site-header .brand-logo{width:110px;min-width:110px}
}
/* Safari only reads the prefixed backdrop-filter, so the white header, once scrolled, let the page's text show through sharp
   around the logo. With the prefix it gets the same soft blur as other browsers; over the home's ocean film there is none. */
.site-header.is-scrolled{-webkit-backdrop-filter:blur(15px)}
.site-header.is-scrolled.is-ocean{-webkit-backdrop-filter:none}

/* ── The colours of the conditions (the surf report, the weather page and their home cards). The owner, 15 November 2026:
   "more coloring to look better and more readable, but keeping things clean and premium". From the kit's palette outwards: sand,
   sea and the kit's deep Atlantic. The surf rating is ordinal, light to dark, sand to sea, and always shown with its word and its
   number of bars (checked with the data-visualisation validator: colour-blind separation passes). Text never takes these colours. */
:root{
  --cx-r0:#d8d2c6; /* Flat: no colour, a warm grey */
  --cx-r1:#fca48d; /* Poor: light clay */
  --cx-r2:#c1981f; /* Fair: sand gold */
  --cx-r3:#3a955a; /* Good: sea green */
  --cx-r4:#00717b; /* Very good: deep teal */
  --cx-r5:#0b3a4f; /* Epic: deep Atlantic */
  --cx-off:#3a955a; --cx-cross:#c1981f; --cx-on:#c8553d; /* wind from the land, along the shore, from the sea */
  --cx-tide:#2c7da0; --cx-tide-fill:#2c7da01f; --cx-night:#eaf0f3; /* the tide line and its fill; the night shade */
  --cx-cold:#3a7ca5; --cx-cool:#8fbfd0; --cx-mild:#e6cf8a; --cx-warm:#e39a5a; --cx-hot:#c4553a; /* air temperature, cold to hot */
  --cx-rain:#3a7ca5; --cx-sun:#d9a93e; /* rain and sunshine */
  --cx-uv1:#3a955a; --cx-uv2:#c1981f; --cx-uv3:#e0823d; --cx-uv4:#c4553a; --cx-uv5:#7b4fa0; /* UV: low, moderate, high, very high, extreme */
  --cx-sea:#00717b; --cx-sea-deep:#0b3a4f; /* the sea temperature and its latest reading */
}