.mobile-whatsapp-icon {
  display:none
}
.mobile-actions {
  display:contents
}
/* All visual overrides below apply only to phone widths. */ @media(max-width:720px) {
  html {
    scroll-padding-top:20px
  }
  body {
    padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))
  }
  .demo-bar {
    font-size:10px;
    letter-spacing:1.5px;
    padding:6px 16px
  }
  header {
    display:grid;
    grid-template-columns:1fr auto;
    gap:6px 16px;
    padding:12px 24px 8px;
    align-items:center
  }
  header .brand {
    width:112px;
    grid-column:1;
    order:0
  }
  .menu-toggle {
    grid-column:2;
    order:0;
    margin:0!important;
    min-height:46px;
    min-width:76px;
    padding:8px 12px;
    border:1px solid #ccd4c6;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:14px;
    color:var(--ink)
  }
  .menu-toggle:before {
    content:'☰';
    font-size:17px;
    line-height:1
  }
  .menu-toggle[aria-expanded=true]:before {
    content:'×';
    font-size:24px
  }
  header>.header-contact {
    display:none
  }
  header>.language-picker {
    grid-column:1/-1;
    order:1;
    width:100%;
    justify-content:center;
    gap:10px;
    margin:0!important;
    padding:2px 0 0;
    border-top:1px solid #e1e4d9
  }
  .language-picker button {
    width:44px;
    height:44px;
    border-radius:6px
  }
  .language-picker img {
    width:25px;
    height:17px
  }
  .english-mark {
    font-size:12px
  }
  header nav {
    grid-column:1/-1;
    order:2;
    width:100%;
    margin:4px 0 0!important;
    gap:0;
    padding:6px 0;
    border-top:1px solid #d4dccf
  }
  header nav.open {
    display:flex;
    flex-direction:column;
    align-items:stretch
  }
  header nav a {
    font-size:16px;
    padding:11px 8px;
    min-height:46px;
    border-bottom:1px solid #e1e4d9
  }
  header nav a:last-child {
    border-bottom:0
  }
  .hero {
    min-height:0;
    margin:0;
    border-radius:0
  }
  .hero-copy {
    padding:36px 24px 36px;
    max-width:none
  }
  .hero .eyebrow {
    font-size:11px;
    letter-spacing:1.5px;
    margin-bottom:22px;
    gap:10px
  }
  .hero h1 {
    font-size:clamp(38px,10.8vw,49px);
    line-height:1.08;
    letter-spacing:-.7px
  }
  .hero-copy>p {
    font-size:16px;
    line-height:1.7;
    max-width:360px;
    margin-top:22px
  }
  .hero-actions {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin-top:26px
  }
  .hero-actions .button {
    font-size:15px;
    min-height:50px;
    padding:12px 20px;
    text-align:center
  }
  .hero-actions .quiet {
    font-size:14px;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:0;
    padding:8px
  }
  .hero-trust {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:none;
    gap:12px;
    margin-top:24px;
    padding-top:18px
  }
  .hero-trust span {
    font-size:12px;
    line-height:1.55;
    max-width:none
  }
  .hero-photo>video {
    object-position:58% center
  }
  .hero-photo:after {
    background:linear-gradient(90deg,#102b23e0,#102b23a8 70%,#102b2370)
  }
  .photo-caption,.vertical-label {
    display:none
  }
  html[dir=rtl] .hero-photo:after {
    background:linear-gradient(270deg,#102b23e0,#102b23a8 70%,#102b2370)
  }
  html[dir=rtl] .hero h1 {
    font-size:clamp(36px,10vw,44px);
    line-height:1.3;
    letter-spacing:0
  }
  .intro,.experiences,.suggestions,.planning,.transport-section,.faq-section,.about-section {
    padding:46px 24px
  }
  h2 {
    font-size:clamp(32px,9.5vw,39px);
    line-height:1.12;
    letter-spacing:-.6px
  }
  h3,.service-area h3,.card-copy h3,.fleet-copy h3 {
    font-size:29px;
    line-height:1.15
  }
  .section-heading {
    margin-bottom:26px
  }
  .section-heading>p {
    font-size:15px;
    margin-top:16px
  }
  .intro {
    gap:28px
  }
  .tabs {
    gap:12px;
    justify-content:space-between
  }
  .tabs button {
    font-size:16px;
    padding:8px 4px 12px;
    min-height:44px
  }
  .service-area p,.card-copy p,.fleet-copy p,.plan-copy>p {
    font-size:16px;
    line-height:1.7
  }
  .cards,.fleet-grid {
    gap:28px
  }
  .card-photo {
    height:auto;
    aspect-ratio:4/3
  }
  .card-copy {
    padding:20px 0 24px
  }
  .card-copy p {
    margin:12px 0 16px
  }
  .text-link {
    font-size:14px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    padding:7px 0
  }
  .fleet-photo {
    height:auto;
    aspect-ratio:3/2
  }
  .fleet-copy {
    padding:22px
  }
  .fleet-photo img {
    padding:20px
  }
  .fleet-photo span {
    font-size:12px;
    left:12px;
    bottom:12px
  }
  .fleet-note {
    font-size:14px;
    gap:8px
  }
  .values {
    padding:44px 24px
  }
  .value-grid {
    margin-top:30px;
    gap:26px
  }
  .about-photo {
    height:auto;
    aspect-ratio:auto
  }
  .about-copy>p {
    margin-top:18px
  }
  .about-links {
    gap:8px 18px;
    margin-top:18px
  }
  .all-tours-link {
    padding:0 24px 44px
  }
  .all-tours-link .button {
    min-height:50px;
    width:100%;
    font-size:15px
  }
  .faq-section {
    gap:24px
  }
  .faq-intro>p {
    margin:18px 0 12px
  }
  .faq-list details,.tips details {
    padding:17px 0
  }
  .faq-list summary,.tips summary {
    font-size:16px;
    line-height:1.6;
    padding:4px 0;
    min-height:36px
  }
  .faq-list p,.tips p {
    font-size:16px;
    line-height:1.7
  }
  .planning {
    gap:28px
  }
  .contact-block {
    margin-top:24px;
    overflow-wrap:anywhere
  }
  form {
    padding:24px 20px
  }
  form h3 {
    font-size:31px
  }
  .form-grid {
    grid-template-columns:minmax(0,1fr);
    gap:18px
  }
  label {
    font-size:14px
  }
  .form-note {
    font-size:13px;
    line-height:1.6
  }
  input,select,textarea {
    font-size:16px;
    min-height:48px;
    padding:12px;
    max-width:100%
  }
  input[type=date] {
    min-width:0
  }
  textarea {
    min-height:120px
  }
  form .button {
    min-height:50px;
    font-size:15px
  }
  #enquiry-result {
    overflow-wrap:anywhere;
    font-size:14px
  }
  .catalogue-intro {
    padding:36px 24px;
    gap:24px
  }
  .catalogue-hero-copy h1 {
    font-size:clamp(38px,10vw,46px);
    line-height:1.1
  }
  .catalogue-hero-copy>p {
    font-size:16px;
    line-height:1.7;
    margin:20px 0 10px
  }
  .catalogue-hero-image {
    height:auto;
    aspect-ratio:4/3
  }
  .catalogue-grid {
    padding:34px 24px;
    gap:28px
  }
  .catalogue-photo {
    height:auto;
    aspect-ratio:4/3
  }
  .catalogue-copy {
    padding:22px
  }
  .catalogue-copy h2 {
    font-size:30px;
    line-height:1.15
  }
  .catalogue-copy>p,.catalogue-copy ul {
    font-size:16px;
    line-height:1.7
  }
  .catalogue-copy summary {
    font-size:15px;
    min-height:44px;
    display:list-item;
    padding:8px 0
  }
  .catalogue-help {
    padding:40px 24px
  }
  .catalogue-help .button {
    width:100%;
    min-height:50px
  }
  footer {
    padding:36px 24px 22px
  }
  .footer-top {
    grid-template-columns:105px minmax(0,1fr);
    gap:18px
  }
  .footer-brand {
    width:105px
  }
  .footer-top p {
    font-size:18px;
    overflow-wrap:anywhere
  }
  .footer-columns {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 20px;
    padding:28px 0
  }
  .footer-columns a {
    font-size:14px;
    line-height:1.6;
    padding:5px 0;
    overflow-wrap:anywhere
  }
  .footer-columns h4 {
    font-size:12px;
    letter-spacing:1.2px
  }
  .footer-columns>.language-column {
    grid-column:1/-1
  }
  footer .language-picker {
    flex-wrap:wrap;
    gap:4px
  }
  .footer-bottom {
    padding-bottom:10px;
    font-size:12px
  }
  dialog {
    width:calc(100% - 32px);
    max-height:85dvh;
    overflow:auto;
    padding:30px 22px
  }
  dialog h2 {
    font-size:34px
  }
  dialog .button {
    width:100%;
    min-height:48px
  }
  .mobile-actions {
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:10;
    gap:10px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:#faf6f0f5;
    border-top:1px solid #d0d8cb;
    box-shadow:0 -3px 20px #173a2414;
    backdrop-filter:blur(12px)
  }
  .mobile-actions[data-at-plan=true] {
    display:none
  }
  .mobile-actions .booking-shortcut,.mobile-actions .floating-whatsapp {
    position:static;
    min-height:50px;
    border-radius:6px;
    padding:12px 16px;
    box-shadow:none;
    max-width:none;
    width:auto;
    justify-content:center;
    gap:8px;
    flex:1;
    font-size:14px
  }
  .mobile-actions .booking-shortcut {
    flex:1.2;
    border:0;
    color:var(--paper)
  }
  .booking-shortcut>span[aria-hidden=true] {
    display:none
  }
  .mobile-whatsapp-icon {
    display:block
  }
  .floating-whatsapp span {
    display:inline
  }
  .floating-whatsapp svg {
    width:22px;
    height:22px;
    flex-shrink:0
  }
  .floating-whatsapp:has(span):not(:has(svg)):before {
    font-size:20px
  }
  body:has(#enquiry input:focus) .mobile-actions,body:has(#enquiry textarea:focus) .mobile-actions {
    display:none
  }
  /* Keep the host's floating badge clear of the mobile booking controls. */  #nl-badge-frame {
    display:none!important
  }
}
@media(max-width:360px) {
  header {
    padding-inline:20px
  }
  .hero-copy {
    padding-inline:20px
  }
  .language-picker button {
    width:42px
  }
  .hero h1 {
    font-size:38px
  }
  .mobile-actions {
    padding-inline:12px
  }
  .mobile-actions .booking-shortcut,.mobile-actions .floating-whatsapp {
    padding:12px;
    font-size:13px
  }
  .footer-columns {
    gap:20px 14px
  }
}
/* Keep phone video above the hero background, including Safari compositing. */ @media(max-width:720px) {
  .hero-photo {
    z-index:0;
    min-height:0;
    background:url('assets/hero-video-poster.jpg') 58% center/cover no-repeat;
    pointer-events:none
  }
  .hero-copy {
    z-index:1
  }
  .hero-photo>video {
    opacity:0
  }
  .hero-photo.hero-video-playing>video {
    opacity:1
  }
  .hero-photo>video::-webkit-media-controls {
    display:none!important
  }
  .hero-photo>video::-webkit-media-controls-start-playback-button {
    display:none!important
  }
}