/* Finishing layer: branded video player in the work viewer, branded pickers for the booking form.
   Colours, font and radii follow styles.css / sections.css (--lime, --ink, DM Sans). */

/* ---------- 1. video player ---------- */
.gp{position:relative;display:grid;place-items:center;max-width:100%;line-height:0;background:#000;-webkit-user-select:none;user-select:none}
.gp video{display:block;cursor:inherit}
.gp-big{position:absolute;left:50%;top:50%;z-index:2;width:76px;height:76px;margin:-38px 0 0 -38px;border:0;border-radius:50%;background:var(--lime);color:#0b0c0b;display:grid;place-items:center;
  box-shadow:0 10px 40px #0007;transition:transform .35s cubic-bezier(.2,.9,.25,1),opacity .25s,background-color .2s}
.gp-big svg{width:26px;height:26px;margin-inline-start:4px}
.gp-big:hover{transform:scale(1.07);background:#fff}
.gp:not(.is-paused) .gp-big{opacity:0;transform:scale(.8);pointer-events:none}
.gp-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:6px;padding:28px 12px 10px;line-height:1;
  background:linear-gradient(180deg,transparent,#000000b3);transition:opacity .35s,transform .35s}
.gp.is-idle .gp-bar{opacity:0;transform:translateY(8px);pointer-events:none}
.gp.is-idle{cursor:none}
.gp-btn{flex:none;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:#fff;display:grid;place-items:center;transition:background-color .2s,color .2s}
.gp-btn svg{width:16px;height:16px;stroke-width:1.8}
.gp-btn .fill-path{fill:currentColor;stroke:none}
.gp-btn:hover{background:#ffffff1f;color:var(--lime)}
.gp-btn:focus-visible,.gp-big:focus-visible,.gp-scrub:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.gp-time{flex:none;min-width:36px;font:700 12px/1 var(--font);font-variant-numeric:tabular-nums;color:#fff;text-align:center;letter-spacing:.02em}
.gp-scrub{position:relative;flex:1;height:30px;cursor:pointer;touch-action:none}
.gp-scrub::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:#ffffff40}
.gp-fill{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}
.gp-knob{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 2px 8px #0008;transform:scale(0);transition:transform .2s}
.gp-scrub:hover .gp-knob,.gp.is-seeking .gp-knob,.gp-scrub:focus-visible .gp-knob{transform:scale(1)}
@media (hover:none){.gp-knob{transform:scale(1)}}
/* full screen keeps the branded controls */
.gp:fullscreen{width:100vw;height:100vh;border-radius:0}
.gp:-webkit-full-screen{width:100vw;height:100vh}
.gp:fullscreen video,.gp:-webkit-full-screen video{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
@media (max-width:700px){
  .gp-big{width:62px;height:62px;margin:-31px 0 0 -31px}
  .gp-big svg{width:22px;height:22px}
  .gp-bar{gap:2px;padding:26px 6px 6px}
  .gp-time{min-width:32px;font-size:11px}
  .gp-btn{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){.gp-big,.gp-bar,.gp-knob{transition:none}}

/* ---------- 2. pickers: the button wears the same box as the select it replaces ---------- */
.gs-native{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important;clip-path:inset(50%)}
.gs{display:flex;align-items:center;gap:8px;width:100%;min-width:0;text-align:start}
.field .gs{font:inherit;font-weight:500;font-size:13px;border:1px solid #dfe2dd;border-radius:10px;padding:9px 11px;background:#fafbf9;color:#111;transition:border-color .2s,box-shadow .2s}
#bcPane1 .field .gs{padding:11px 12px}
.gs:focus-visible,.gs[aria-expanded=true]{outline:0;border-color:#1f9a5c;box-shadow:0 0 0 4px #1f9a5c1f}
.gs-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs.is-empty .gs-val{color:#7a827c}
.gs-chev{flex:none;width:12px;height:8px;stroke-width:2;color:#141714;transition:transform .3s}
.gs[aria-expanded=true] .gs-chev{transform:rotate(180deg)}
.gs-code{flex:none;display:inline-grid;place-items:center;min-width:30px;height:20px;padding:0 6px;border-radius:6px;background:#e9f2cc;color:#2f3a12;font:800 10.5px/1 var(--font);letter-spacing:.06em}
.gs-code[hidden]{display:none}

/* the list (desktop) */
.gs-list{list-style:none;margin:0;padding:6px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d6dad3 transparent}
.gs-list:focus{outline:0}
.gs-list li{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;border-radius:9px;font:600 13.5px/1.2 var(--font);color:#151815;cursor:url(assets/brand/cursor-hover.svg) 24 1,pointer}
.gs-list li.is-active{background:#f1f4ec}
.gs-list li[aria-selected=true]{background:var(--lime);color:#0d0e0d}
.gs-list li[aria-selected=true] .gs-code{background:#0d0e0d;color:var(--lime)}
.gs-list li[aria-selected=true]::after{content:"";margin-inline-start:auto;width:7px;height:13px;border:solid #0d0e0d;border-width:0 2.2px 2.2px 0;transform:translateY(-2px) rotate(45deg);flex:none}
.gs-pop{position:fixed;z-index:120;max-height:300px;background:#fff;border:1px solid #e4e7e2;border-radius:14px;box-shadow:0 26px 60px -22px #10201566,0 4px 14px #10201512;animation:gsIn .22s cubic-bezier(.2,.9,.25,1)}
@keyframes gsIn{from{opacity:0;transform:translateY(-6px)}}

/* the bottom sheet (phones) */
.gs-sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:min(82svh,640px);border:0;padding:0 12px max(14px,env(safe-area-inset-bottom));
  background:#fff;color:#0d0e0d;border-radius:24px 24px 0 0;box-shadow:0 -20px 60px #0d1a1240;flex-direction:column;overflow:hidden;
  transform:translateY(105%);transition:transform .42s cubic-bezier(.2,.9,.25,1)}
.gs-sheet[open]{display:flex}
.gs-sheet.is-in{transform:none}
.gs-sheet::backdrop{background:#050806b3;opacity:0;transition:opacity .3s}
.gs-sheet.is-in::backdrop{opacity:1}
.gs-head{flex:none;padding:14px 0 14px;border-bottom:1px solid #eceee9;touch-action:none}
.gs-grab{display:block;width:40px;height:5px;border-radius:3px;background:#d3d7d0;margin:0 auto 16px}
.gs-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:16px}
.gs-sheet-t{margin:0;font:800 18px/1.25 var(--font);letter-spacing:-.02em}
html[lang=ar] .gs-sheet-t{font-family:var(--kufi);letter-spacing:0}
.gs-x{flex:none;width:40px;height:40px;margin:-11px;margin-inline-end:-12px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:#0d0e0d}
.gs-x svg{width:15px;height:15px;stroke-width:2.4}
.gs-x:active{background:#f1f4ec}
.gs-sheet .gs-list{flex:0 1 auto;min-height:0;padding:10px 0 4px;display:grid;gap:4px;align-content:start;scrollbar-width:none}
.gs-sheet .gs-list::-webkit-scrollbar{display:none}
.gs-sheet .gs-list li{min-height:54px;padding-inline:16px;gap:14px;border-radius:14px;font-size:16px}
.gs-sheet .gs-list .gs-code{width:38px;min-width:0;padding:0;height:24px;font-size:11px}
html[lang=ar] .gs-list li{font-family:var(--kufi)}
@media (prefers-reduced-motion:reduce){.gs-sheet{transition:none}.gs-pop{animation:none}}

/* iPhone zooms the page into any text field under 16px; at 16px it stays put */
@supports (-webkit-touch-callout:none){.field input:not([type=radio]):not([type=checkbox]){font-size:16px}}

/* ---------- 3. Arabic layout ---------- */
/* Arabic line spacing. Noto Kufi Arabic's letters, dots and hamzas reach much higher and lower than Anton's capitals,
   so the headings' English line heights (0.92 to 1.22) ran one Arabic line into the next. Measured with the real font:
   at 1.4 no heading line touches the next one at any width. Stickers and small labels that wrap get the same room. */
html[lang=ar] :is(#statsTitle,#servicesTitle,#workTitle,#processTitle,#whyTitle,#teamTitle,#reachTitle,#diagTitle,#bookTitle,#faqTitle){line-height:1.4}
html[lang=ar] .sticker-body{line-height:1.35}
html[lang=ar] :is(.lc-back .lc-gets span,.pill span){line-height:1.6}
/* Arabic buttons: the label sits in the middle. Paddings are start/end (styles.css) so the wider side follows the text,
   as in English; the booking card's step buttons sat 1.5-2.5px low in Kufi and move up 1.5px. */
html[lang=ar] .bc-next,html[lang=ar] .bc-pane .bc-foot .bc-submit{padding-top:9.5px;padding-bottom:12.5px}
/* the display face (Anton) has no Arabic letters, so Arabic headings use Noto Kufi Arabic at a heavy weight, like the hero does */
html[lang=ar] :is(.work-title,.svc-title,.svc-row-title,.svc-band-track span){font-family:var(--kufi);font-weight:900;text-transform:none;letter-spacing:0}
html[lang=ar] .work-title{font-size:clamp(40px,7.4vw,112px);line-height:1.22;text-wrap:balance}
html[lang=ar] .svc-title{font-size:clamp(40px,5.6vw,88px);line-height:1.22}
html[lang=ar] .svc-row-title{font-size:clamp(25px,3.9vw,60px);line-height:1.35}
html[lang=ar] .svc-band-track span{font-size:clamp(18px,2.1vw,30px);font-weight:800}
@media (max-width:650px){html[lang=ar] .svc-title{font-size:clamp(34px,10vw,48px)}}
/* stickers sit on the opposite side when the headline starts on the right */
html[dir=rtl] .st-a{right:auto;left:6%;rotate:-8deg}
html[dir=rtl] .st-b{right:auto;left:-2%;rotate:7deg}
html[dir=rtl] .st-c{left:auto;right:34%;rotate:3deg}
@media (max-width:650px){html[dir=rtl] .st-a{left:0;right:auto}html[dir=rtl] .st-c{right:auto;left:0;bottom:6px}}
/* arrows point the way Arabic reads */
html[dir=rtl] :is(.work-all svg,.dir-flip,.cal-head button,.lb-nav button){transform:scaleX(-1)}
.dir-flip{display:inline-block}
/* emails and phone numbers are typed left to right, also on the Arabic page */
html[dir=rtl] :is(#fEmail,#fPhone){direction:ltr;text-align:right}

/* ---------- 4. phones: the Connect tab slims down so it stops covering text at the screen edge ---------- */
@media (max-width:650px){
  .side-tab-btn{width:26px;gap:0;padding:12px 0}
  .side-tab-btn span{display:none}
  .side-tab-btn img{width:16px}
  .side-tab-btn:hover,.side-tab-btn[aria-expanded=true]{width:28px}
}

/* ---------- 5. booking ---------- */
.book-card .book-note{margin:12px 2px 0;font-size:12px;line-height:1.55;color:#5d655f}
.book-card .book-note a,.legal-links a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.book-card .book-note a:hover,.legal-links a:hover{color:#1f9a5c}
.legal-links{white-space:nowrap}
/* footer: Instagram, LinkedIn and email as small icons after the legal links (phones have no side tab menu) */
.end-social{display:inline-flex;align-items:center;gap:4px;margin:-6px 0}
.end-social a{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#7d857f;transition:color .2s,background .2s}
.end-social a:hover{color:#1f9a5c;background:#1f9a5c14}
.end-social svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.end-social svg .dot{fill:currentColor;stroke:none}
.end-logo.is-dark .end-social a{color:#9aa59c}
/* the diagnostic chip keeps its text readable */
.bca-text{flex:1;min-width:0}

/* ---------- 6. responsive pass (every phone, tablet and desktop width) ---------- */
/* top bar: never wraps; on the narrowest phones the Contact button keeps only its icon */
.top-contact{white-space:nowrap}
@media (max-width:650px){.topbar-right{gap:8px}}
@media (max-width:380px){
  .brand img{height:28px}
  .top-lang.lang-switch{width:74px;height:38px}
  .top-contact{width:44px;height:44px;padding:0;gap:0;justify-content:center}
  .top-contact span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* diagnostic: the single column may shrink to the screen instead of to its widest answer */
.diag-card,.diag-side{min-width:0}
/* diagnostic: score panel left, questions right on wide screens; on phones the questions come first and the score panel sits under them */
@media (min-width:901px){.diag-inner{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}}
@media (max-width:900px){.diag-inner{grid-template-columns:minmax(0,1fr)}.diag-card{order:-1}.diag-side{order:1}}

/* booking: spam trap stays off screen; taken hours greyed out; the confirmation covers the card */
.bc-trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.gs-list li[aria-disabled=true]{opacity:.38;cursor:not-allowed;text-decoration:line-through}
.book-card{position:relative}
.bc-done{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px;text-align:center;background:#fff;border-radius:inherit;animation:gsIn .4s cubic-bezier(.2,.9,.25,1)}
.bc-done-tick{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--lime);color:#0d0e0d;font-size:30px;font-weight:900}
.bc-done strong{font-size:24px;letter-spacing:-.03em}
.bc-done p{margin:0;font-weight:700;color:#1f9a5c}
.bc-done small{max-width:30ch;color:#5d655f;line-height:1.5}

/* ---------- 7. bottom bar on phones and tablets: the section tabs themselves, not a "Menu" button ---------- */
.dl-short{display:none}
@media (max-width:900px){
  .dock{width:min(560px,calc(100vw - 16px));bottom:max(10px,env(safe-area-inset-bottom))}
  .dock-bar{gap:2px;padding:6px}
  .dock-menu,.mobile-nav-panel{display:none!important}
  .dock-links{display:flex;flex:1;min-width:0;justify-content:space-between;gap:2px}
  .dock-link{flex:1;min-width:0;justify-content:center;padding:9px 6px;gap:7px;font-size:13px}
  .dock-link .dl-long{display:none}
  .dock-link .dl-short{display:inline}
  .dock-lang{flex:none;height:44px;min-width:44px;padding:0 10px}
}
@media (max-width:599px){
  .dock-logo{display:none}
  .dock-link{flex-direction:column;gap:3px;padding:7px 2px 6px;font-size:10.5px;line-height:1.1;letter-spacing:0}
  .dock-link svg{width:21px;height:21px}
  .dock-link span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dock-lang{height:40px;min-width:40px;padding:0 8px;margin:0}
  html[dir=rtl] .dock-lang{margin:0}
}
@media (max-width:340px){.dock-link{font-size:9.5px}.dock-link svg{width:19px;height:19px}}
html[lang=ar] .dock-link{font-family:var(--kufi)}
/* services headline: the "8 main services" sticker sits in the free space beside "GROW." instead of on the words */
.st-b{bottom:4%;right:6%}
html[dir=rtl] .st-b{right:auto;left:6%}
@media (min-width:651px) and (max-width:1180px){.svc-title{max-width:min(76%,780px)}}
/* diagnostic buttons wrap on small phones instead of running off the panel */
@media (max-width:420px){.diag-actions{flex-wrap:wrap}.diag-actions .primary-btn{flex:1 1 auto;justify-content:space-between}}
/* footer: the "Let's grow" sticker stays clear of the copyright line on phones */
@media (max-width:650px){.e-hey{bottom:24%}}
/* tabs share the bar by their label length, so "Diagnostic" fits on small phones */
@media (max-width:599px){.dock-link{flex:1 1 auto}}
/* Arabic hero: stickers mirror with the top bar (logo on the right, Contact on the left) */
html[dir=rtl] .s-seo{left:auto;right:1%;transform-origin:right top}
html[dir=rtl] .s-lead{right:auto;left:1%;transform-origin:left top}
html[dir=rtl] .s-web{left:auto;right:1%;transform-origin:right bottom}
html[dir=rtl] .s-auto{right:auto;left:1%;transform-origin:left bottom}
@media (max-width:650px){html[dir=rtl] .s-seo{right:-2%}html[dir=rtl] .s-lead{left:-3%}html[dir=rtl] .s-web{right:-3%}html[dir=rtl] .s-auto{left:-2%}
  html[lang=ar] .hero-eyebrow{border-radius:18px;text-wrap:balance;line-height:1.5}
  .e-open{bottom:24%}}
/* language button in the bar: an exact circle, the letter optically centred */
@media (max-width:900px){
  .dock-lang,html[dir=rtl] .dock-lang{flex:none;width:46px;height:46px;min-width:0;padding:0;margin:0;display:grid;place-items:center;border-radius:50%;line-height:1}
  .dock-lang[lang=ar]{padding-bottom:4px;font-size:18px}
  .dock-lang[lang=en]{font-size:12px;letter-spacing:.04em}
}
@media (max-width:599px){.dock-lang,html[dir=rtl] .dock-lang{width:42px;height:42px}}
/* the circle is exactly as tall as the tabs, so the bar's 6px edge is the same above, below and beside it */
@media (max-width:599px){
  .dock-link{height:48px;justify-content:center}
  .dock-lang,html[dir=rtl] .dock-lang{width:48px;height:48px}
}

/* ---------- 8. flip cards (How we work, team): the faces swap by opacity at the midpoint of the turn.
   Safari does not reliably honour backface-visibility on a rotated <button>, which showed both faces at once. ---------- */
.lc button{-webkit-transform-style:preserve-3d}
.lc-front,.lc-back{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.lc-front{opacity:1;transition:opacity 0s linear .32s}
.lc-back{opacity:0;transition:opacity 0s linear .32s}
.lc.flipped .lc-front{opacity:0}
.lc.flipped .lc-back{opacity:1}
.lc:not(.flipped) .lc-back{pointer-events:none}
@media (prefers-reduced-motion:reduce){.lc-front,.lc-back{transition:none}}
.flip-inner{-webkit-transform-style:preserve-3d}
.flip-front,.flip-back{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.flip-front{opacity:1;transition:opacity 0s linear .3s}
.flip-back{opacity:0;transition:opacity 0s linear .3s}
.flip.flipped .flip-front{opacity:0}
.flip.flipped .flip-back{opacity:1}
@media (prefers-reduced-motion:reduce){.flip-front,.flip-back{transition:none}}

/* ---------- 9. speed ---------- */
/* the bar is already almost solid, so it needs no blur; a blur behind a fixed bar is re-computed on every scroll frame */
.dock-bar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#0b0c0bf2}
/* endless animations rest while their section is off screen (polish.js toggles .is-off) */
.is-off,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}
/* the Our Work cards get their own GPU layers only while that section is on screen */
.fly-card{will-change:auto!important}
.work.is-live .fly-card{will-change:transform,opacity!important}

/* How we work, phones: no pile. Each card rises into its own slot as it scrolls into view. */
@media (max-width:700px){
  .lc{opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
  .lc:nth-child(even){transition-delay:.08s}
  .lc.in{opacity:1;transform:none}
  .lc .lc-hint{white-space:normal;text-wrap:balance}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.lc{opacity:1;transform:none;transition:none}}

/* top bar on every phone: Contact keeps only its icon so the row stays calm and the logo has room */
@media (max-width:650px){
  .top-contact{width:44px;height:44px;padding:0;gap:0;justify-content:center}
  .top-contact span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .top-contact .ico-chat{width:21px;height:21px}
}

/* ---------- Approved copy (fix pack v3): new elements ---------- */
/* hero: the H1 is the descriptive line in the pill; where it wraps (phones, tablets) the pill rounds less */
@media (max-width:900px){.hero-eyebrow{border-radius:18px;padding:9px 14px;line-height:1.5}}
/* headings inside the services accordion and the FAQ keep the rows' look */
.svc-h,.faq-h{margin:0;font:inherit;letter-spacing:inherit;color:inherit}
/* work: the section heading sits in the eyebrow spot (its intro line was removed at Groweve's request, Nov 2026) */
html[lang=ar] .work-eyebrow{letter-spacing:0;font-size:14px}
/* loop: Arabic cards also name the stage in English */
.lc-en{display:block;font-family:'DM Sans',system-ui,sans-serif;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);opacity:.85}
/* why: the closing line and the services button under the comparison */
.why-close{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;max-width:900px;margin:34px auto 0}
.why-close p{margin:0;font-size:clamp(17px,1.7vw,22px);font-weight:800;letter-spacing:-.02em;color:#fff}
html[lang=ar] .why-close p{letter-spacing:0}
@media (max-width:650px){.why-close{flex-direction:column;align-items:stretch}.why-close .primary-btn{justify-content:space-between}}
/* team: the lead sentence, and the tap hint under the intro */
.team-lead strong{color:#fff;font-weight:700}
.team-hint{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;font-weight:700;color:var(--lime)}
.team-hint-ico{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#b8d4331f;font-size:12px}
/* diagnostic result: what the band means, then the top area to improve and a tip */
.score-leak #bandLine{min-height:0;margin:0 0 10px;color:#eef3ec}
.score-leak-title:empty,.score-leak p:empty{display:none}
/* FAQ: WhatsApp link and reply time */
.faq-cta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:22px 0 0}
.faq-cta .book-wa{margin-top:0}
.faq-reply{font-size:13px;font-weight:600;color:#8c968e}
/* booking: step 1 ends with its button only */
#bcPane1 .bc-foot{justify-content:flex-end}
/* consent: required, unticked, directly above the send button */
.bc-consent{margin:12px 0 0;padding:12px 14px;border:1px solid #e6e8e4;border-radius:14px;background:#fafbf8}
.consent-label{margin:0 0 7px;font-size:11px;font-weight:800;letter-spacing:.04em;color:#1e2520}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:600;line-height:1.45;color:#232a25;cursor:pointer}
.consent input{flex:none;width:20px;height:20px;margin:0;accent-color:#1f9a5c;cursor:pointer}
.form-privacy{margin:7px 0 0;font-size:11.5px;line-height:1.5;color:#6d756f}
.form-privacy a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.form-privacy a:hover{color:#1f9a5c}
.bc-consent .err{margin-top:7px}
.bc-consent.invalid{border-color:#e07a48;background:#fff8f4}
html[lang=ar] .consent-label{letter-spacing:0}
.bc-done:focus{outline:none}

/* ---------- Client mobile patch (fix pack v3, 08-mobile-fixes.css), after all other styles ---------- */
#bookForm input,#bookForm select,#bookForm textarea{font-size:16px}
#bookForm input[type="checkbox"],#bookForm input[type="radio"]{font-size:inherit}
@media (max-width:767px){#sideTab{display:none}}
#calPrev,#calNext{min-width:44px;min-height:44px}
#calGrid button{min-height:44px}
#bcBack{display:inline-flex;align-items:center;min-height:44px;padding-inline:10px}
/* Arabic letters join up, so Arabic text is never letter-spaced: Safari would pull the letters apart (Chrome ignores the spacing) */
html[lang=ar] :not([lang=en],[lang=en] *){letter-spacing:0!important}
/* loop cards, Arabic: the big outlined number moves to the free corner (the icon sits at the start, on the right) */
html[dir=rtl] .lc .lc-num{right:auto;left:16px}
@media (max-width:650px){html[dir=rtl] .lc .lc-num{left:10px}}
/* the back of a card lists what you get; keep every line inside the card, the "flip back" hint included */
.lc-back{gap:10px}
.lc-back .lc-gets span{line-height:1.35}
html[lang=ar] .lc-back .lc-title{font-size:clamp(20px,1.7vw,24px)}
html[lang=ar] .lc-back .lc-gets{gap:6px}
html[lang=ar] .lc-back .lc-gets span{padding:7px 10px;font-size:12.5px}
html[lang=ar] .lc .lc-hint{margin-top:10px;padding-top:8px}
/* flip cards grow to fit their text instead of cutting it off (long Arabic lines, narrow phones); the old heights are the minimum */
.lc{display:grid;height:auto;min-height:340px}
@media (max-width:1100px) and (min-width:651px){.lc{min-height:300px}}
@media (max-width:650px){.lc{min-height:270px}.lc:last-child{min-height:240px}}
.lc button{display:grid;height:auto}
.lc-face{position:relative;inset:auto;grid-area:1/1}
.flip{display:grid;height:auto;min-height:320px}
@media (max-width:560px){.flip{min-height:330px}}
.flip-inner{display:grid;height:auto}
.flip-face{position:relative;inset:auto;grid-area:1/1}
/* team cards with an icon instead of a photo: the dark fade under the name starts lower, so a role that wraps to two lines
   (Arabic) never covers the icon */
.flip-front:has(.flip-icon) .flip-bottom{background:linear-gradient(transparent 0,#060b08b3 34%,#060b08 58%,#060b08f7)}
/* booking card, Arabic: the panes sit right to left, so step 2 slides in from the other side */
html[dir=rtl] .bc-track.on2{transform:translateX(50%)}
/* Scrolling strips loop without a seam: each item carries its own trailing space instead of the strip's gap, so half
   the strip (one loop) is a whole number of items and the restart doesn't jump (it jumped 8px on the band, up to 48px
   on the logos). The band is laid out left to right on both pages so it always covers its width; on the Arabic page
   each phrase reads right to left and the band moves right, so a phrase's first word comes in first. */
.svc-band{direction:ltr}
.svc-band-track{gap:0}
.svc-band-track>span{margin-right:16px}
html[dir=rtl] .svc-band-track>span{direction:rtl}
html[dir=rtl] .svc-band-track{animation-direction:reverse}
.marquee-track{gap:0}
.marquee-track>*{margin-right:clamp(40px,6vw,96px)}
@media(max-width:650px){.marquee-track>*{margin-right:44px}}
/* the pinned footer, while the page is loading and still covers it completely (script.js) */
.end-logo.covered{visibility:hidden}
/* until the script sets the card's height (or without scripts), step 2 takes no room, so the card is as short as step 1 */
.bc-track:not([style*=height]) #bcPane2{height:0;overflow:hidden}
/* Work: the tall scroll runway for the sideways film (130vh per category, plus 60vh; sizeWork() in sections.js sets the
   same) is set here too, so the page has its final height from the first paint instead of growing once the script runs */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){#work{height:calc(var(--cats,3) * 130vh + 60vh)}}
/* diagnostic ring: "/100" keeps its slash before the number on the Arabic page */
.score-val span{direction:ltr;unicode-bidi:isolate}
/* the booking card never scrolls sideways: Safari could scroll it to a focused button while the steps slide, leaving step 2 off-centre */
.book-card{overflow:clip;min-width:0}
.bc-pane:focus{outline:none}
/* booking, Arabic: the time-zone switch is a little wider for the country names; "Edit details" stays on one line */
html[lang=ar] .bc-zone{width:150px}
html[lang=ar] .bc-zone button{font-size:12px}
.bc-edit{white-space:nowrap}
@media (max-width:480px){html[lang=ar] .bc-when{grid-template-columns:1fr}html[lang=ar] .bc-zone{width:100%}}
/* phones: two narrow columns, so the back of a loop card is set smaller to stay close to the front's height */
@media (max-width:650px){
  .lc-back{padding:16px 14px 14px;gap:8px}
  .lc-back .lc-title{font-size:19px}
  .lc-back .lc-gets{gap:5px}
  .lc-back .lc-gets span{padding:7px 8px;gap:6px;font-size:11.5px}
  .lc-back .lc-gets span::before{width:17px;height:17px;font-size:10px}
  html[lang=ar] .lc-back .lc-title{font-size:17px}
  html[lang=ar] .lc-back .lc-gets span{font-size:11.5px;padding:6px 8px}
}
/* why: the red line crosses every line of a row that wraps (longer rows, phones), from the side you start reading */
.cmp-line{background:linear-gradient(#ff5a4e,#ff5a4e) no-repeat 0 58%/calc(var(--strike,0) * 100%) 1.5px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .25s ease-out}
html[dir=rtl] .cmp-line{background-position:100% 58%}
html[dir=rtl] .why .cmp-new{transform:translateX(26px) scale(.96)}