/* =========================================================
   Tumlos Farm Land Resort — site-wide responsive safeguards
   Loaded after page styles so existing desktop design is preserved.
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{width:100%;max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:90px}
body{width:100%;max-width:100%;min-width:0;overflow-x:clip}
img,video,canvas,svg,iframe{max-width:100%}
img,video{height:auto}
button,input,select,textarea{font:inherit;max-width:100%}
input,select,textarea{min-width:0}
textarea{resize:vertical}
pre,code{max-width:100%;overflow-wrap:anywhere;white-space:pre-wrap}
.container,.section-inner,.booking-layout,.contact-grid,.reviews-layout,.history-block,.ethos-inner,.dash-main,.dash-panel,.dash-panel.is-active,.dash-grid,.settings-grid{min-width:0;max-width:100%}
.container{width:min(var(--container,1200px),calc(100% - 40px));margin-inline:auto}
.grid,.grid-2,.grid-3,.grid-4,.booking-layout,.contact-grid,.reviews-layout,.settings-grid,.date-layout,.cabin-grid{min-width:0}
.clay,.card,.form-card,.booking-panel,.reviews-box,.reviews-aside,.settings-card,.dash-panel{min-width:0;overflow-wrap:anywhere}
form{min-width:0;max-width:100%}
form input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),form select,form textarea{width:100%;min-width:0}
form button,.form-actions button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
button,a,[role=button]{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
.table-wrap,.table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{max-width:100%}
iframe{border:0}

@media(max-width:1024px){
  .container{width:calc(100% - 36px)}
  .section{scroll-margin-top:80px}
  .dash-main{padding:22px 20px 44px}
  .dash-shell{grid-template-columns: minmax(0,1fr)}
  .dash-sidebar{max-width:100%;min-width:0}
  .booking-layout,.contact-grid,.reviews-layout{grid-template-columns:minmax(0,1fr)}
  .reviews-aside{height:auto}
}
@media(max-width:760px){
  html{scroll-padding-top:72px}
  .container{width:calc(100% - 28px)}
  .section{padding-block:clamp(34px,7vw,56px)}
  h1{font-size:clamp(2rem,7vw,3.4rem);overflow-wrap:anywhere}
  h2{font-size:clamp(1.65rem,5.8vw,2.6rem);overflow-wrap:anywhere}
  h3{overflow-wrap:anywhere}
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
  .booking-layout,.contact-grid,.reviews-layout,.date-layout,.settings-grid{grid-template-columns:minmax(0,1fr)}
  .booking-panel,.form-card,.reviews-box,.reviews-aside,.settings-card{padding:clamp(16px,4vw,24px)}
  .form-row,.fields-row,.form-grid{grid-template-columns:minmax(0,1fr)!important}
  .contact-buttons,.booking-trust-row,.booking-trust-pill,.filter-bar,.content-tabs{flex-wrap:wrap}
  .dash-topbar{align-items:flex-start}
  .dash-user{max-width:100%;flex-wrap:wrap}
  .dash-sidebar{gap:6px;padding:12px;scroll-snap-type:x proximity}
  .dash-nav-item{flex:0 0 auto;scroll-snap-align:start;padding:10px 12px}
  .notif-panel{position:fixed;top:72px;right:12px;left:12px;width:auto;max-width:calc(100vw - 24px);max-height:min(70dvh,480px)}
  .login-screen{min-height:100svh;padding:16px}
  .login-card{max-width:460px;padding:clamp(20px,5vw,32px)}
  .account-dialog{width:min(100% - 24px,480px);max-height:calc(100svh - 24px);overflow-y:auto}
  .account-form,.account-profile{min-width:0}
  .account-field input,.account-field select,.account-field textarea{width:100%;min-width:0}
  .map-embed{min-height:260px}
  .map-info{padding:20px}
  .table-wrap{margin-inline:0}
  .table-wrap table{min-width:620px}
}
@media(max-width:480px){
  .container{width:calc(100% - 22px)}
  .section{padding-block:32px}
  .dash-main{padding:16px 12px 36px}
  .dash-topbar{gap:10px;margin-bottom:18px}
  .dash-user{gap:6px}
  .dash-grid{grid-template-columns:minmax(0,1fr)}
  .stat-card{padding:17px}
  .panel-head{align-items:stretch}
  .panel-head>*{max-width:100%}
  .panel-head button,.panel-head .btn{width:100%}
  .filter-bar>*{flex:1 1 130px;min-width:0}
  .form-actions,.contact-buttons{display:grid;grid-template-columns:minmax(0,1fr)}
  .form-actions .btn,.contact-buttons .btn{width:100%}
  .login-card{padding:20px 16px}
  .account-dialog{padding:18px 14px}
  .account-provider{width:100%;min-width:0}
  .account-profile-actions{flex-wrap:wrap}
  .cal{max-width:100%}
  .cal-grid{gap:3px}
  .cal-day{border-radius:9px;font-size:.8rem}
  .full-days{padding:14px;gap:18px}
  .map-embed{min-height:220px}
  .site-footer{padding-inline:16px}
  .footer-grid,.footer-columns{grid-template-columns:minmax(0,1fr)!important}
  .site-footer-bottom{gap:10px;flex-wrap:wrap}
  .hero-content,.hero-copy{max-width:100%;min-width:0}
  .hero-actions{flex-wrap:wrap}
  .hero-actions .btn{flex:1 1 145px}
}
@media(max-height:600px) and (min-width:761px){
  .account-dialog,.logo-modal,.login-card{max-height:calc(100svh - 20px);overflow-y:auto}
  .login-screen{padding:10px}
}
@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* =========================================================
   Responsive clarity pass — layout-only safeguards.
   Preserves existing content, colors, typography and features.
   ========================================================= */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--gold-strong,#B08D46);
  outline-offset:3px;
}
.site-header{padding:clamp(8px,1.4vw,18px) clamp(10px,2.2vw,24px)}
.nav-wrap{width:100%;min-width:0;gap:clamp(8px,1.2vw,16px)}
.brand{min-width:0;flex-shrink:1}
.brand-word{overflow-wrap:anywhere}
.nav-actions{flex-shrink:0}
.nav-pill a{white-space:nowrap}
.mobile-nav{overflow-y:auto;overscroll-behavior:contain}
.mobile-nav-panel{width:min(360px,90vw);padding:clamp(18px,4vw,28px) clamp(16px,4vw,24px);padding-bottom:max(24px,env(safe-area-inset-bottom))}
.mobile-nav-panel a{min-height:48px;line-height:1.35;overflow-wrap:anywhere}
.mobile-nav-close{min-width:44px;min-height:44px}
.site-header button,.site-header a{touch-action:manipulation}
@media (min-width:900px) and (max-width:1120px){
 .site-header{padding-inline:14px}
 .nav-wrap{gap:8px}
 .brand-logo{width:46px;height:46px}
 .brand-word{font-size:.98rem}
 .brand-sub{font-size:.55rem;letter-spacing:.1em}
 .nav-pill{padding:5px;gap:0}
 .nav-pill a{padding:9px 10px;font-size:.8rem;gap:5px}
 .nav-actions{gap:7px}
 .theme-toggle{width:40px;height:40px}
}
@media(max-width:899px){
 .site-header{padding-top:max(8px,env(safe-area-inset-top))}
 .nav-wrap{gap:10px}
 .brand-logo{width:44px;height:44px}
 .brand-word{font-size:clamp(.88rem,3.2vw,1.08rem)}
 .brand-sub{font-size:clamp(.48rem,1.7vw,.6rem);letter-spacing:.1em}
 .nav-actions{gap:7px}
 .theme-toggle,.nav-burger{width:42px;height:42px;flex:0 0 42px}
}
@media(max-width:480px){
 .site-header{padding-inline:10px}
 .nav-wrap{gap:7px}
 .brand{gap:7px}
 .brand-logo{width:38px;height:38px}
 .brand-word{font-size:.86rem;line-height:1.15;letter-spacing:0}
 .brand-sub{font-size:.47rem;letter-spacing:.07em;line-height:1.2}
 .nav-actions{gap:5px}
 .theme-toggle,.nav-burger{width:38px;height:38px;flex-basis:38px}
 .mobile-nav-panel{width:min(340px,92vw)}
}
@media(max-width:360px){
 .brand-sub{display:none}
 .brand-word{max-width:142px;font-size:.82rem}
 .site-header{padding-inline:8px}
 .nav-actions{gap:4px}
 .theme-toggle,.nav-burger{width:36px;height:36px;flex-basis:36px}
}
@media(min-width:761px) and (max-width:1024px){
 .dash-sidebar{display:flex;flex-wrap:wrap;overflow-x:auto;max-width:100%}
 .dash-nav-item{min-height:42px;white-space:normal;overflow-wrap:anywhere}
 .dash-main,.dash-panel,.dash-grid>*{min-width:0}
}
@media(max-width:760px){
 .dash-topbar{flex-wrap:wrap;gap:12px}
 .dash-topbar>*{min-width:0;max-width:100%}
 .dash-sidebar{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-width:100%;scrollbar-width:thin}
 .dash-nav-item{min-height:44px;white-space:nowrap}
 .dash-panel{overflow-wrap:anywhere}
 .dash-panel table{min-width:620px}
 .site-footer a,.mobile-nav-panel a{overflow-wrap:anywhere}
}
@media(hover:none){
 .brand:hover,.theme-toggle:hover,.nav-burger:hover,.nav-pill a:hover{transform:none}
}


/* Tumlos dashboard: consistent gold line icons and legible responsive navigation */
.dash-nav-item{display:flex;align-items:center;gap:11px;text-align:left;min-width:0}
.dash-nav-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px;color:var(--gold-strong,#d7b33f)}
.dash-nav-icon svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dash-nav-label{min-width:0;overflow-wrap:anywhere}
.dash-nav-item.is-active .dash-nav-icon{color:var(--forest,#17342b)}
[data-theme="dark"] .dash-nav-item.is-active .dash-nav-icon{color:#18251f}
.notif-bell .bell-icon{font-size:1.2rem;line-height:1;color:var(--gold-strong,#d7b33f)}
@media(max-width:760px){
 .hero--emboss{min-height:100svh;min-height:100dvh;padding:clamp(88px,16vh,130px) 20px clamp(52px,9vh,82px);align-items:center}
 .hero-texture-photo{object-position:68% center}
 .hero-texture::before{background:linear-gradient(180deg,rgba(249,246,238,.48) 0%,rgba(249,246,238,.84) 35%,rgba(249,246,238,.94) 100%)}
 [data-theme="dark"] .hero-texture::before{background:linear-gradient(180deg,rgba(13,21,19,.36) 0%,rgba(13,21,19,.78) 35%,rgba(13,21,19,.94) 100%)}
 .hero-content{width:100%;max-width:560px;margin-inline:auto}
 .hero-content>*{max-width:100%}
 .hero-emblem{width:clamp(92px,28vw,132px);margin-bottom:clamp(12px,3vw,20px)}
 .hero-wordmark{font-size:clamp(2.8rem,15vw,4.6rem);line-height:.98;overflow-wrap:normal;word-break:normal}
 .hero-wordmark-sub{font-size:clamp(.65rem,2.7vw,.82rem);letter-spacing:clamp(.12em,2vw,.28em);margin-bottom:18px}
 .hero-tagline{font-size:clamp(1rem,4.2vw,1.18rem);line-height:1.5;margin-bottom:24px;max-width:34ch}
 .hero-actions{display:flex;flex-wrap:wrap;gap:10px;width:100%}
 .hero-actions .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;max-width:100%;white-space:normal;text-align:center}
}
@media(max-width:420px){
 .hero--emboss{padding-inline:17px}
 .hero-actions{display:grid;grid-template-columns:minmax(0,1fr);max-width:320px}
 .hero-actions .btn{width:100%}
 .dash-sidebar{gap:5px;padding:10px}
 .dash-nav-item{gap:8px;padding:10px 11px;font-size:.88rem}
 .dash-nav-icon{flex-basis:20px;width:20px;height:20px}
 .dash-nav-icon svg{width:18px;height:18px}
}


/* Responsive header controls: keep the purpose of every round button obvious. */
.site-header .nav-actions{align-items:center}
.site-header .guest-account-link,.site-header .theme-toggle,.site-header .nav-burger{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.site-header .guest-account-mark{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:0}
.site-header .guest-account-mark svg,.site-header .theme-toggle svg,.site-header .nav-burger svg{display:block;width:20px;height:20px;min-width:20px;min-height:20px;stroke:var(--gold-strong,#d7b33f);color:var(--gold-strong,#d7b33f);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:1;visibility:visible}
.site-header .guest-account-link:focus-visible,.site-header .theme-toggle:focus-visible,.site-header .nav-burger:focus-visible{outline:2px solid var(--gold-strong,#d7b33f);outline-offset:3px}
.site-header .theme-toggle:hover,.site-header .nav-burger:hover,.site-header .guest-account-link:hover{border-color:var(--gold-strong,#d7b33f)}
@media(max-width:899px){.site-header .guest-account-link,.site-header .theme-toggle,.site-header .nav-burger{min-width:42px;min-height:42px}}
@media(max-width:480px){.site-header .guest-account-link,.site-header .theme-toggle,.site-header .nav-burger{min-width:38px;min-height:38px}.site-header .guest-account-mark svg,.site-header .theme-toggle svg,.site-header .nav-burger svg{width:18px;height:18px;min-width:18px;min-height:18px}}

/* High-visibility header controls: icons must be recognizable at a glance. */
.site-header .nav-actions{gap:10px!important}
.site-header .guest-account-link,
.site-header .theme-toggle,
.site-header .nav-burger{
  width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
  flex:0 0 44px!important;padding:0!important;box-sizing:border-box;
  border:1.5px solid rgba(220,184,66,.9)!important;
  background:rgba(8,28,24,.96)!important;color:#f2cf55!important;
  box-shadow:0 0 0 1px rgba(220,184,66,.12),0 3px 10px rgba(0,0,0,.34)!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
}
.site-header .guest-account-mark,
.site-header #theme-toggle-icon{width:100%!important;height:100%!important;display:grid!important;place-items:center!important;line-height:0!important}
.site-header .guest-account-mark svg,
.site-header .theme-toggle svg,
.site-header .nav-burger svg{
  display:block!important;width:25px!important;height:25px!important;min-width:25px!important;min-height:25px!important;
  opacity:1!important;visibility:visible!important;overflow:visible!important;
  stroke:#f5d45e!important;stroke-width:2.2!important;filter:drop-shadow(0 0 1px rgba(245,212,94,.35));
}
.site-header .guest-account-mark svg{fill:none!important}
.site-header .theme-toggle svg{fill:initial!important}
.site-header .nav-burger svg{fill:none!important}
.site-header .theme-toggle:hover,.site-header .nav-burger:hover,.site-header .guest-account-link:hover{background:#173b31!important;transform:translateY(-1px);border-color:#ffe17a!important}
.site-header .guest-account-link:focus-visible,.site-header .theme-toggle:focus-visible,.site-header .nav-burger:focus-visible{outline:3px solid #ffe17a!important;outline-offset:3px!important}
@media(max-width:480px){
  .site-header .nav-actions{gap:7px!important}
  .site-header .guest-account-link,.site-header .theme-toggle,.site-header .nav-burger{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;flex-basis:42px!important}
  .site-header .guest-account-mark svg,.site-header .theme-toggle svg,.site-header .nav-burger svg{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important}
}


/* Header account control: preserve the original desktop pill; use an icon-only circle on smaller screens. */
@media (min-width:900px){
  .site-header .guest-account-link{
    width:auto!important;height:auto!important;min-width:0!important;min-height:42px!important;
    flex:0 0 auto!important;padding:0 13px!important;gap:8px!important;border-radius:999px!important;
    border:1px solid color-mix(in srgb,var(--gold,#C5A059) 65%,var(--border-soft))!important;
    background:color-mix(in srgb,var(--gold,#C5A059) 10%,var(--surface))!important;
    color:var(--text)!important;box-shadow:0 3px 10px rgba(0,0,0,.05)!important;
    font-size:.88rem!important;font-weight:650!important;white-space:nowrap!important;
  }
  .site-header .guest-account-label{display:inline!important}
  .site-header .guest-account-mark{width:25px!important;height:25px!important;flex:0 0 25px!important}
  .site-header .guest-account-mark svg{width:17px!important;height:17px!important;min-width:17px!important;min-height:17px!important;stroke:var(--gold,#C5A059)!important;stroke-width:1.9!important;filter:none!important}
  .site-header .guest-account-link:hover{background:color-mix(in srgb,var(--gold,#C5A059) 16%,var(--surface))!important;transform:translateY(-2px)}
}
@media (max-width:899px){
  .site-header .guest-account-link{
    width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
    flex:0 0 42px!important;padding:0!important;gap:0!important;border-radius:50%!important;
  }
  .site-header .guest-account-label{display:none!important}
  .site-header .guest-account-mark{width:100%!important;height:100%!important}
}
@media (max-width:480px){
  .site-header .guest-account-link{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;flex-basis:42px!important}
}

/* Final responsive navigation correction:
   Desktop already has the full navigation links, so do not duplicate them with a menu button.
   On tablet/mobile the links collapse and the clearly visible menu button remains available. */
@media (min-width: 900px) {
  .site-header .nav-burger,
  .site-header #nav-burger {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .site-header .nav-pill {
    display: flex !important;
  }
}
@media (max-width: 899px) {
  .site-header .nav-burger,
  .site-header #nav-burger {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 50% !important;
    background: #102820 !important;
    border: 1.5px solid #e5bf43 !important;
    color: #ffe16a !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.32) !important;
  }
  .site-header .nav-pill { display: none !important; }
  .site-header .nav-burger svg,
  .site-header #nav-burger svg {
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    stroke: #ffe16a !important;
    color: #ffe16a !important;
    stroke-width: 2.5 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}
@media (max-width: 480px) {
  .site-header .nav-actions { gap: 7px !important; }
  .site-header .nav-burger,
  .site-header #nav-burger { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; flex-basis: 42px !important; }
  .site-header .nav-burger svg,
  .site-header #nav-burger svg { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; }

  /* Keep the home hero readable and orderly on narrow screens. */
  .hero--emboss { min-height: 100svh; min-height: 100dvh; padding-top: clamp(86px, 14vh, 112px) !important; padding-bottom: max(32px, env(safe-area-inset-bottom)) !important; }
  .hero-content { width: 100%; min-width: 0; }
  .hero-wordmark { max-width: 100%; font-size: clamp(2.65rem, 14vw, 4rem) !important; letter-spacing: .015em; }
  .hero-wordmark-sub { max-width: 100%; overflow-wrap: anywhere; }
  .hero-tagline { max-width: 30ch; }
}


/* =========================================================================
   MOBILE & TABLET POLISH PASS (v3)
   Everything in this block lives inside max-width media queries, so the
   desktop layout, content, colours and behaviour are not touched.
   Goals: every icon clearly visible, nothing clipped, one clean column,
   comfortable reading width, easy tap targets.
   ========================================================================= */

/* ---------- 1. Header: a calm bar + icons you can actually see ---------- */
@media (max-width:899px){
  .site-header{padding-block:8px}
  /* The bar is a pseudo-element: backdrop-filter on .site-header itself would trap the
     fixed slide-in menu inside the header's box. */
  .site-header::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:color-mix(in srgb,var(--bg,#F9F6EE) 88%,transparent);
    -webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);
    border-bottom:1px solid var(--border-soft);
  }
  /* The three round buttons sit on dark green: draw their lines in one bright gold,
     and the moon/sun in a light tone, so each icon reads at a glance. */
  .site-header .nav-actions :is(path,circle,rect,line)[stroke]:not([stroke="none"]){stroke:#ffe38a!important}
  .site-header .nav-actions :is(path,circle,rect)[fill="url(#tg-teal)"]{fill:#8fdcea!important}
  .site-header .nav-actions :is(path,circle,rect)[fill="url(#tg-gold)"]{fill:#ffe38a!important}
  .site-header .nav-actions .guest-account-mark svg,
  .site-header .nav-actions .nav-burger svg{stroke-width:2.2}
  .site-header .nav-actions{gap:8px!important}
}

/* ---------- 2. Slide-in menu: every icon visible, big touch targets ---------- */
@media (max-width:899px){
  .mobile-nav-panel{gap:6px;padding-top:max(18px,env(safe-area-inset-top))}
  .mobile-nav-close{margin-bottom:8px;border-radius:50%;background:color-mix(in srgb,var(--gold,#C5A059) 14%,var(--surface));display:inline-flex;align-items:center;justify-content:center}
  .mobile-nav-close svg{width:22px;height:22px}
  .mobile-nav-panel a{gap:14px!important;min-height:56px;padding:8px 12px!important;font-size:1.05rem}
  /* The desktop nav reveals one icon at a time. In the menu, always show all of them. */
  .mobile-nav-panel a .nav-ico{
    max-width:none!important;width:40px;height:40px;margin:0!important;opacity:1!important;transform:none!important;overflow:visible!important;
    border-radius:12px;background:color-mix(in srgb,var(--gold,#C5A059) 16%,var(--surface));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold,#C5A059) 38%,transparent);
  }
  .mobile-nav-panel a .nav-ico svg{width:24px;height:24px}
  .mobile-nav-panel a[aria-current="page"] .nav-ico{background:color-mix(in srgb,var(--gold,#C5A059) 30%,var(--surface))}
  .mobile-nav-panel a.nav-cta .nav-ico{background:rgba(255,255,255,.3);box-shadow:none}
  .mobile-nav-panel a.nav-cta{min-height:60px}
  html.nav-open{overflow:hidden}
  html.nav-open .a11y-widget{display:none!important}
}

/* ---------- 3. Floating accessibility button: smaller, out of the way ---------- */
@media (max-width:899px){
  .a11y-widget{right:14px;bottom:max(14px,env(safe-area-inset-bottom))}
  .a11y-main{width:50px;height:50px}
  .a11y-main svg{width:24px;height:24px}
  .a11y-opt{width:46px;height:46px}
  /* the booking page has a sticky total bar: lift the button above it */
  body:has(.price-sticky) .a11y-widget{bottom:calc(86px + env(safe-area-inset-bottom))}
}

/* ---------- 4. Reading comfort: ragged-right instead of justified gaps ---------- */
@media (max-width:700px){
  p,
  #main-content section p:not(.eyebrow):not(.muted.no-justify):not(.flip-hint),
  .page-intro .container>p:not(.eyebrow),
  #then-and-now .container>p.muted,
  .logo-modal p,.logo-modal .logo-story-copy p,
  .site-footer p,.team-card-bio{
    text-align:left!important;text-align-last:auto!important;-webkit-hyphens:manual;hyphens:manual;
  }
  .ethos-band p,.beauty-heading p,.beauty-quote p,.confirm-screen p,.account-small{text-align:center!important}
  .page-intro h1{line-height:1.12}
}

/* ---------- 5. Services: prices must never be cut off ---------- */
@media (max-width:760px){
  .price-card .table-wrap{overflow:visible}
  .price-card .table-wrap table,
  table.price-table{min-width:0!important;width:100%;table-layout:auto}
  table.price-table th,table.price-table td{overflow-wrap:anywhere}
  table.price-table td:last-child{white-space:nowrap;text-align:right}
}

/* ---------- 6. About: staff cards keep their names ---------- */
@media (max-width:700px){
  .team-card:not(.is-front) .team-card-bio,
  .team-card:not(.is-front) .team-card-role{display:none!important}
  .team-card-body h3{flex:1 1 auto;min-width:0;overflow:visible;text-overflow:clip;font-size:1rem}
  .team-card:not(.is-front) .team-card-body h3{font-size:1rem;width:auto}
  .team-card.is-front{height:auto;min-height:340px}
  .team-card.is-front .team-card-body{padding:18px}
  .team-card.is-front .team-card-bio{max-height:none}
  .team-controls{gap:12px;flex-wrap:nowrap}
  .team-controls .btn{padding-inline:16px}
  .eco-badges{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .eco-badge{min-width:0;width:100%}
  .eco-badge-head{min-height:44px}
  .tour-teaser{padding:22px 20px;gap:16px}
  .tour-teaser .btn{width:100%;justify-content:center}
}

/* ---------- 7. "Beauty of Tumlos": captions readable on bright photos ---------- */
@media (max-width:560px){
  .beauty-tile::before{background:linear-gradient(180deg,transparent 18%,rgba(18,29,26,.9) 100%)}
  .beauty-tile-cap{padding:14px 16px 16px;text-shadow:0 1px 3px rgba(0,0,0,.55)}
  .beauty-tile-cap p{font-size:.9rem;line-height:1.4}
}

/* ---------- 8. Gallery: one clean carousel, arrows on the photos ---------- */
@media (max-width:700px){
  .carousel-wrap{position:relative;display:block}
  .gallery-carousel{scroll-snap-type:x proximity;padding-inline:2px!important}
  .gallery-item{width:min(76vw,300px)!important;flex:0 0 min(76vw,300px)!important;scroll-snap-align:center}
  .carousel-arrow{position:absolute;top:50%;margin-top:-22px;z-index:3;width:44px;height:44px;
    background:color-mix(in srgb,var(--bg,#F9F6EE) 88%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .carousel-arrow--prev{left:6px}
  .carousel-arrow--next{right:6px}
}

/* ---------- 9. Contact & booking: even card padding, tidy buttons ---------- */
@media (max-width:760px){
  .contact-grid .form-card{padding:22px 20px}
  .contact-details li{gap:12px}
  .contact-buttons .btn,.booking-panel .btn{text-decoration:none}
  .booking-trust-row{gap:10px;align-items:stretch}
  .booking-trust-pill{border-radius:18px;padding:12px 16px;line-height:1.35;align-items:flex-start;width:100%}
  .progress-track{margin-bottom:26px}
  .progress-step .dot{width:40px;height:40px}
  .progress-track::before{top:20px}
  .step-actions{flex-direction:column-reverse;align-items:stretch}
  .step-actions .btn,.step-actions button{width:100%;justify-content:center;margin-left:0!important}
}

/* ---------- 10. Footer: tidy, readable columns ---------- */
@media (max-width:760px){
  .site-footer .footer-grid a{display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 0!important}
  .site-footer .footer-grid a svg{flex:0 0 18px}
  .site-footer .footer-social{gap:12px!important}
  .site-footer .footer-social a{width:44px!important;height:44px!important;justify-content:center}
  .site-footer .footer-bottom{flex-direction:column;gap:6px}
}

/* ---------- 11. Mobile refinements (round 2) ---------- */
@media (max-width:700px){
  /* staff strips: keep faces in frame */
  .team-card-photo{object-position:center 18%}
}
@media (max-width:480px){
  /* Home hero: stacked, full-width buttons with no underline or awkward wrapping */
  .hero-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;max-width:340px!important;gap:12px!important}
  .hero-actions .btn{width:100%!important;min-height:52px;white-space:nowrap!important;text-decoration:none!important}
  .hero-content{align-items:flex-start}
}
@media (max-width:899px){
  .btn,a.btn{text-decoration:none}
}
@media (max-width:760px){
  .booking-trust-pill{flex-wrap:nowrap!important;gap:10px}
  .booking-trust-pill>[data-icon],.booking-trust-pill>span:first-child{flex:0 0 auto;margin-top:2px}
}

/* ---------- 12. Dashboard on phones ---------- */
@media (max-width:760px){
  /* tables scroll sideways as whole rows; words are never broken letter by letter */
  .dash-table th,.dash-table td,.dash-panel table th,.dash-panel table td{
    overflow-wrap:normal!important;word-break:normal!important;white-space:nowrap;padding:12px 14px;vertical-align:middle;
  }
  .table-wrap{border-radius:16px;scrollbar-width:thin}
  .dash-sidebar{padding-inline:12px!important;scroll-padding-inline:12px}
  .dash-main{padding-top:16px}
  /* summary cards: two per row */
  .dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
  .stat-card{padding:16px 14px}
  .stat-card .stat-num,.stat-card>:first-child{font-size:1.7rem}
  .dash-user{gap:10px;flex-wrap:wrap}
}
@media (max-width:360px){
  .dash-grid{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:899px){
  /* dark mode: the current page's icon is drawn in dark ink, so give it a gold chip */
  [data-theme="dark"] .mobile-nav-panel a[aria-current="page"] .nav-ico{background:var(--gold,#D4AF37);box-shadow:none}
}
@media (max-width:560px){
  .price-cta{flex-direction:column;align-items:stretch;padding:24px 20px;gap:16px}
  .price-cta>div{min-width:0;flex:1 1 auto}
  .price-cta .btn{width:100%;justify-content:center}
}