/* =====================================================================
   FIT THE KASBAH · booking page (new website)
   Loads after site.css and reuses its tokens, buttons, tags and grain.
   PC: the retreat at a glance on a dark panel that stays put on the left,
   the form on sand on the right. Phones: the dark panel sits on top.
   ===================================================================== */

.bk-page{display:grid; grid-template-columns:minmax(0,44fr) minmax(0,56fr); min-height:100svh}

/* ---------------------------------------------------------------------
   LEFT · dark panel: the pool photo, dimmed and fading into ink, the
   hero's zellige lattice and warm glow, and its orange seam on the edge
   --------------------------------------------------------------------- */
.bk-side{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; gap:clamp(28px,4vh,44px);
  padding:clamp(20px,3.2vh,32px) clamp(28px,4vw,64px) clamp(28px,5vh,56px) var(--gutter);
  color:var(--c-sand-50);
  /* --glow-a is registered in site.css, so the glow can warm up on entrance as on the hero */
  --glow-a:.55;
  background:var(--c-ink) radial-gradient(80% 50% at 0% 0%, oklch(32% .07 45 / var(--glow-a)), transparent 72%);
}
.bk-side-bg{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 40%;
  opacity:.34; -webkit-mask-image:linear-gradient(180deg, #000 20%, transparent 88%); mask-image:linear-gradient(180deg, #000 20%, transparent 88%);
}
.bk-side::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23f3e6cf' stroke-width='.6'%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3Cpath d='M28 0v13.86M28 42.14V56M0 28h13.86M42.14 28H56'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 56px; background-position:right -28px bottom -28px;
  -webkit-mask-image:radial-gradient(90% 70% at 100% 100%, #000, transparent 75%); mask-image:radial-gradient(90% 70% at 100% 100%, #000, transparent 75%);
}
.bk-side::after{content:""; position:absolute; top:0; bottom:0; right:0; width:3px; background:var(--c-orange)}

/* PC: the panel holds still while the form scrolls */
@media (min-width:901px) and (min-height:640px){
  .bk-side{position:sticky; top:0; height:100svh}
}

/* top bar: back on the left, the brand on the right */
.bk-bar{display:flex; align-items:center; justify-content:space-between; gap:16px}
.bk-back{
  display:inline-flex; align-items:center; gap:.55em; min-height:40px; padding:0 1em 0 .8em;
  font-size:.82rem; font-weight:500; text-decoration:none; color:var(--c-sand-50);
  border:1px solid oklch(100% 0 0 / .22); border-radius:9px;
  background:oklch(18.38% 0.0052 67.50 / .42); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.bk-back svg{width:16px; height:16px; transition:transform .25s var(--ease)}
.bk-brand{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:1.2rem; text-decoration:none; color:var(--c-sand-50)}
.bk-brand b{font-weight:400; color:var(--c-orange)}
@media (hover:hover){
  .bk-back:hover{border-color:var(--c-orange); background:oklch(18.38% 0.0052 67.50 / .72)}
  .bk-back:hover svg{transform:translateX(-3px)}
}

.bk-side-main{margin-top:auto}
.bk-side .eyebrow{color:var(--c-coral)}
.bk-title{
  margin-left:-.03125em;
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  /* width and height both cap it, so the panel fits a short laptop screen without scrolling */
  font-size:clamp(2.9rem,min(6vw,11vh),6.4rem); line-height:.9; letter-spacing:.005em;
}
.bk-title em{font-style:normal; color:var(--c-orange)}
/* as the hero wordmark: each line clips only at its bottom edge, for the rise-in */
.bk-title .line{display:block; clip-path:inset(-50% -10% -.08em -10%)}
.bk-title .line > *{display:block}

/* prices: early bird in the Women's Edition gold, full price plain */
.bk-prices{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:clamp(22px,3.4vh,34px); max-width:520px}
.bk-price{
  display:flex; flex-direction:column; gap:6px; padding:14px 18px 16px;
  border-radius:12px; border:1px solid oklch(100% 0 0 / .18); background:oklch(100% 0 0 / .04);
}
.bk-price-k{font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:oklch(100% 0 0 / .62)}
.bk-price-note{letter-spacing:.04em; text-transform:none; font-weight:400}
.bk-price-v{font-family:var(--font-display); font-size:clamp(2rem,3vw,2.6rem); line-height:1; letter-spacing:.01em}
.bk-price-early{
  position:relative; overflow:hidden; isolation:isolate; border:1px solid transparent;
  background:
    linear-gradient(oklch(20% 0.012 70), oklch(16% 0.008 70)) padding-box,
    linear-gradient(120deg, oklch(58% 0.07 75), oklch(88% 0.07 90) 35%, oklch(66% 0.075 78) 60%, oklch(84% 0.06 88)) border-box;
}
.bk-price-early .bk-price-k{color:oklch(86% 0.065 85)}
.bk-price-early .bk-price-v{color:oklch(90% 0.06 88)}
/* the gold tile's slow sheen, as on the Women's Edition tag */
.bk-price-early::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, oklch(88% 0.07 90 / .12) 50%, transparent 60%);
  transform:translateX(-130%);
}

/* the facts: three cells with hairlines between, on one row at every width (joining details shares them) */
.bk-facts{
  list-style:none; display:grid; grid-template-columns:repeat(3,auto); justify-content:start;
  margin-top:clamp(16px,2.4vh,22px); font-size:.88rem; line-height:1.35; color:oklch(100% 0 0 / .78)
}
.bk-facts li{display:inline-flex; align-items:center; gap:.5em; padding:2px 16px; white-space:nowrap; border-left:1px solid oklch(100% 0 0 / .2)}
.bk-facts li:first-child{padding-left:0; border-left:0}
.bk-facts li:last-child{padding-right:0}
.bk-facts b{font-weight:500; color:var(--c-sand-50)}
/* small phones: tighter cells so the row still fits */
@media (max-width:440px){
  .bk-facts{font-size:.76rem}
  .bk-facts li:not(:first-child){padding-left:9px}
  .bk-facts li:not(:last-child){padding-right:9px}
}
@media (max-width:340px){ .bk-facts{font-size:.7rem} }
/* booking's "Twin rooms" carries an info button, so on the narrowest phones it drops to a second row */
@media (max-width:374px){
  .bk-facts:has(.info){grid-template-columns:auto auto; row-gap:8px; font-size:.76rem}
  .bk-facts:has(.info) li:nth-child(3){padding-left:0; border-left:0}
}
.nowrap{white-space:nowrap}

/* the three steps: a rail joins the numbers, step 1 is lit */
.bk-steps{list-style:none; display:flex; flex-direction:column; gap:14px; padding-top:clamp(20px,3vh,28px); border-top:1px solid oklch(100% 0 0 / .14)}
.bk-steps li{position:relative; display:grid; grid-template-columns:28px 1fr; gap:14px; align-items:start; font-size:.88rem; line-height:1.55; color:oklch(100% 0 0 / .66)}
/* the rail runs from under each number to the next one, however many lines the step wraps to */
.bk-steps li:not(:last-child)::before{content:""; position:absolute; left:13.5px; top:28px; bottom:-14px; width:1px; background:oklch(100% 0 0 / .22)}
.bk-steps b{font-weight:500; color:var(--c-sand-50)}
.bk-step-n{
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  font-size:.74rem; font-weight:600; border:1px solid oklch(100% 0 0 / .3); color:var(--c-sand-50);
}
.bk-steps li > span:last-child{padding-top:3px}
.bk-steps li.is-now .bk-step-n{background:var(--c-orange); border-color:var(--c-orange); box-shadow:0 0 0 5px oklch(60.59% 0.1768 40.17 / .18)}

/* ---------------------------------------------------------------------
   INFO BUBBLES: hover or focus on PC, a tap on phones (js/booking.js
   also nudges a bubble back inside the screen)
   --------------------------------------------------------------------- */
.info{position:relative; display:inline-flex; vertical-align:middle}
/* a soft glass disc with a drawn "i" (dot and stem), not a typed letter, so it sits dead centre at any size */
.info-btn{
  display:inline-grid; place-items:center; width:20px; height:20px; padding:0; border-radius:50%; cursor:pointer;
  color:var(--c-coral); background:oklch(100% 0 0 / .1); border:0; box-shadow:inset 0 0 0 1px oklch(100% 0 0 / .14);
  transition:color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.info-btn svg{width:20px; height:20px}
@media (hover:hover){ .info-btn:hover{background:oklch(100% 0 0 / .18)} }
/* a finger-sized hit area around the small ring */
.info-btn::after{content:""; position:absolute; inset:-12px}
.info-bubble{
  position:absolute; z-index:5; bottom:calc(100% + 10px); left:50%; width:max-content; max-width:240px;
  /* white-space:normal: both bubbles sit inside no-wrap text (the facts, "next."), which kept them on one runaway line */
  padding:10px 14px; border-radius:10px; font-size:.8rem; line-height:1.5; font-weight:400; text-align:left; white-space:normal;
  color:var(--c-ink); background:var(--c-sand-50); box-shadow:0 14px 34px oklch(0% 0 0 / .35);
  transform:translate(calc(-50% + var(--shift,0px)), 6px); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease-soft), transform .35s var(--ease-out), visibility 0s linear .25s;
}
.info-bubble::after{content:""; position:absolute; top:100%; left:calc(50% - var(--shift,0px)); margin-left:-6px; border:6px solid transparent; border-top-color:var(--c-sand-50)}
.info-btn:focus-visible + .info-bubble, .info.is-open .info-bubble{opacity:1; visibility:visible; transform:translate(calc(-50% + var(--shift,0px)), 0); transition:opacity .25s var(--ease-soft), transform .35s var(--ease-out), visibility 0s}
/* the block holding an open bubble comes to the front, so no later block (steps, prices) paints over it */
.bk-side-main:has(.info.is-open, .info-btn:focus-visible), .bk-steps:has(.info.is-open, .info-btn:focus-visible),
.bk-steps li:has(.info.is-open, .info-btn:focus-visible){position:relative; z-index:10}
.info.is-open .info-btn{background:var(--c-orange); color:#fff; box-shadow:0 0 0 4px oklch(60.59% 0.1768 40.17 / .22)}

/* ---------------------------------------------------------------------
   RIGHT · dark mode: a night panel a shade deeper than the photo side,
   a warm glow low on the left, the faint orange lattice top right, and
   the form set in one glass card. color-scheme makes the native pickers
   and autofill dark too
   --------------------------------------------------------------------- */
.bk-main{
  --panel:oklch(14.5% 0.006 60);
  --glass:oklch(100% 0 0 / .035); --glass-2:oklch(100% 0 0 / .055);
  --hair:oklch(100% 0 0 / .1); --hair-2:oklch(100% 0 0 / .18);
  --txt:var(--c-sand-50); --txt-2:oklch(100% 0 0 / .7); --txt-3:oklch(100% 0 0 / .48);
  --bad:var(--c-coral);
  position:relative; isolation:isolate; color-scheme:dark; color:var(--txt); padding:0 var(--gutter);
  background:var(--panel) radial-gradient(70% 45% at 0% 100%, oklch(32% .07 45 / .38), transparent 70%);
}
/* the hero's zellige lattice, same cream hairline and strength as on the home page, fading in from the top-right corner */
.bk-main::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23f3e6cf' stroke-width='.6'%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3Cpath d='M28 0v13.86M28 42.14V56M0 28h13.86M42.14 28H56'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 56px; background-position:right -28px top -28px;
  -webkit-mask-image:radial-gradient(85% 65% at 100% 0%, #000, transparent 75%); mask-image:radial-gradient(85% 65% at 100% 0%, #000, transparent 75%);
}
.bk-form-wrap{
  max-width:560px; min-height:100svh; margin:0 auto;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px,8vh,96px) 0 clamp(28px,4vh,40px);
}
/* the step header: number and name, then a three-part progress bar where the plain line was */
.bk-main .section-label{display:flex; align-items:center; gap:.9em; margin-bottom:clamp(18px,2.6vh,24px); color:var(--c-coral)}
.bk-main .section-label span{color:var(--txt); letter-spacing:.12em}
.bk-prog{flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-left:.4em}
.bk-prog i{height:3px; border-radius:2px; background:var(--hair)}
.bk-prog i.is-done{background:oklch(60.59% 0.1768 40.17 / .55)}
.bk-prog i.is-now{background:var(--c-orange); box-shadow:0 0 12px oklch(60.59% 0.1768 40.17 / .6)}

/* the glass card the form sits in: a faint gold-to-orange hairline across its top edge */
.bk-card{
  position:relative; padding:clamp(22px,2.8vw,34px); border-radius:22px;
  background:linear-gradient(180deg, oklch(100% 0 0 / .05), oklch(100% 0 0 / .02));
  border:1px solid var(--hair); box-shadow:0 30px 60px oklch(0% 0 0 / .35), inset 0 1px 0 oklch(100% 0 0 / .05);
}
.bk-card::before{
  content:""; position:absolute; top:-1px; left:22px; right:22px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, oklch(84% 0.06 88 / .7), var(--c-orange), transparent);
}

.bk-form{display:flex; flex-direction:column; gap:20px}
.bk-row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{display:flex; flex-direction:column; gap:8px; min-width:0}
.field label{font-size:.8rem; font-weight:500; letter-spacing:.02em; color:var(--txt-2)}
.req{color:var(--c-orange)}
.opt{font-weight:300; color:var(--txt-3)}

/* inputs: dark wells with a hairline; focus lifts them a shade and draws the orange ring. 16px text so iPhones don't zoom in */
.bk-form input:not([type="checkbox"]), .bk-form select, .bk-dial-show{
  width:100%; height:54px; padding:0 16px; border-radius:12px;
  font:400 16px/1.2 var(--font-body); color:var(--txt);
  background:oklch(100% 0 0 / .04); border:1px solid var(--hair);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.bk-form input::placeholder{color:oklch(100% 0 0 / .3)}
.bk-form input:not([type="checkbox"]):focus, .bk-form select:focus, .bk-dial:focus-within .bk-dial-show{
  outline:none; border-color:var(--c-orange); background:oklch(100% 0 0 / .065); box-shadow:0 0 0 4px oklch(60.59% 0.1768 40.17 / .2);
}
@media (hover:hover){
  .bk-form input:not([type="checkbox"]):hover:not(:focus), .bk-form select:hover:not(:focus), .bk-dial:hover .bk-dial-show{border-color:var(--hair-2)}
}
/* browser autofill paints its own pale fill: hold it to the dark well */
.bk-form input:-webkit-autofill{-webkit-text-fill-color:var(--txt); -webkit-box-shadow:0 0 0 60px oklch(21% 0.006 60) inset; caret-color:var(--txt)}
.bk-form select option{color:var(--c-ink)}

/* selects: a drawn chevron in place of the browser's; the placeholder option reads grey */
.bk-select, .bk-dial{position:relative}
.bk-select::after, .bk-dial::after{
  content:""; position:absolute; right:18px; top:50%; width:8px; height:8px; margin-top:-6px; pointer-events:none;
  border-right:1.6px solid var(--txt-3); border-bottom:1.6px solid var(--txt-3); transform:rotate(45deg);
}
.bk-select select{padding-right:44px; cursor:pointer}
.bk-select select:invalid{color:oklch(100% 0 0 / .32)}

/* phone: code box + number. The real select lies invisible over the box, so its native picker opens */
.bk-phone{display:grid; grid-template-columns:118px minmax(0,1fr); gap:10px}
.bk-dial-show{display:flex; align-items:center; padding-right:36px; white-space:nowrap; overflow:hidden}
.bk-dial-show.is-empty{color:oklch(100% 0 0 / .32)}
.bk-dial select{position:absolute; inset:0; height:100%; opacity:0; cursor:pointer}
.hint{font-size:.76rem; line-height:1.5; color:var(--txt-3)}

/* a field that failed: coral edge and a short line under it */
.field-err{display:none; font-size:.78rem; font-weight:500; color:var(--bad)}
.field.is-bad .field-err{display:block}
.field.is-bad input, .field.is-bad select, .field.is-bad .bk-dial-show{border-color:var(--bad); background:oklch(67.97% 0.1445 40.17 / .06)}

/* honeypot: off screen */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* consent: a drawn square with a tick that draws itself in */
.bk-consent{position:relative; display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:start; margin-top:4px; cursor:pointer; font-size:.86rem; line-height:1.6; color:var(--txt-2)}
.bk-consent input{position:absolute; width:24px; height:24px; opacity:0; margin:0; cursor:pointer}
.bk-check{
  display:grid; place-items:center; width:24px; height:24px; margin-top:1px; border-radius:7px;
  background:oklch(100% 0 0 / .04); border:1px solid var(--hair-2); color:#fff;
  transition:background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.bk-check svg{width:15px; height:15px; stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .35s var(--ease-out) .05s}
.bk-consent input:checked + .bk-check{background:var(--c-orange); border-color:var(--c-orange); box-shadow:0 0 14px oklch(60.59% 0.1768 40.17 / .45)}
.bk-consent input:checked + .bk-check svg{stroke-dashoffset:0}
.bk-consent input:focus-visible + .bk-check{box-shadow:0 0 0 4px oklch(60.59% 0.1768 40.17 / .25); border-color:var(--c-orange)}
.bk-consent.is-bad .bk-check{border-color:var(--bad); box-shadow:0 0 0 4px oklch(67.97% 0.1445 40.17 / .15)}

/* the form-wide message (sending failed, box not ticked) */
.bk-error{display:none; padding:12px 16px; border-radius:10px; font-size:.86rem; line-height:1.55; color:var(--txt); background:oklch(60.59% 0.1768 40.17 / .12); border:1px solid oklch(60.59% 0.1768 40.17 / .4)}
.bk-error.is-on{display:block}
.bk-error a{color:var(--c-coral); text-decoration:underline; text-underline-offset:3px}

/* submit: the site's orange button at full width; while sending the label dims and a ring turns */
.bk-submit{width:100%; min-height:58px; margin-top:4px; font-size:1rem}
.bk-spinner{display:none; width:18px; height:18px; border-radius:50%; border:2px solid oklch(100% 0 0 / .35); border-top-color:#fff; animation:bk-spin .8s linear infinite}
.bk-submit.is-loading{pointer-events:none; opacity:.92}
.bk-submit.is-loading .bk-spinner{display:block}
.bk-submit.is-loading svg{display:none}
@keyframes bk-spin{to{transform:rotate(360deg)}}

.bk-fine{display:flex; align-items:center; justify-content:center; gap:8px; font-size:.78rem; color:var(--txt-3)}
.bk-fine svg{width:14px; height:14px; flex:none; color:var(--c-coral)}

/* questions: V1's help box, now under the form */
/* the card's own edge closes the form above, so no extra rule here; the help sits in from the card's edge */
.bk-help{margin-top:clamp(30px,4.5vh,40px); padding:0 clamp(4px,1vw,12px)}
.bk-help-title{font-family:var(--font-display); font-size:1.35rem; text-transform:uppercase; letter-spacing:.01em; line-height:1}
.bk-help-text{margin-top:6px; font-size:.9rem; color:var(--txt-2)}
.bk-help-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.bk-help-links a{
  display:inline-flex; align-items:center; gap:.6em; min-height:44px; padding:0 1.1em;
  font-size:.86rem; font-weight:400; text-decoration:none; color:var(--txt);
  background:var(--glass); border:1px solid var(--hair); border-radius:10px;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.bk-help-links svg{width:17px; height:17px; color:var(--c-orange); flex:none}
@media (hover:hover){ .bk-help-links a:hover{border-color:var(--c-orange); background:var(--glass-2); transform:translateY(-1px)} }

.bk-copy{margin-top:clamp(28px,4vh,40px); padding:0 clamp(4px,1vw,12px); font-size:.74rem; color:var(--txt-3)}

/* ---------------------------------------------------------------------
   ENTRANCE: the home page hero's sequence, same timings and keyframes
   (--go, .in, .d1-.d5 and the keyframes live in site.css)
   0.2s        the orange seam draws down the panel edge
   --go (.8s)  the photo exposes and settles, RESERVE YOUR rises, SPOT follows, the glow warms up
   --go        the form side starts pure black and settles into its night tone (1.6s)
   +0.8s       eyebrow, then prices, facts, steps, each a beat apart
   +1.1s       the lattice breathes in; +1.6s the panel has settled: its lattice breathes in,
               then the form label, form and help rise, a beat apart
   +1.9s       the Back/brand bar arrives last; +3.3s the gold sheen
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .bk-side::after{transform-origin:50% 0; animation:seam 1.6s cubic-bezier(.55,0,.3,1) .2s both}
  /* own fade: site.css's expose ends at full opacity, and this photo rests dimmed */
  .bk-side-bg{animation:bk-expose 2.4s var(--ease) var(--go) both, settle 3.6s var(--ease-out) var(--go) both}
  @keyframes bk-expose{from{opacity:0}}
  .bk-title .line > *{transform:translateY(135%); animation:up 1.5s var(--ease-out) var(--go) forwards}
  .bk-title .line:nth-child(2) > *{animation-delay:calc(var(--go) + .25s)}
  .bk-side{animation:glow 2.4s var(--ease) var(--go) both}
  .bk-side::before{animation:breathe 3s var(--ease) calc(var(--go) + 1.1s) both}
  .bk-bar{animation:fade 1.4s var(--ease) calc(var(--go) + 1.9s) backwards}
  .bk-price-early::after{animation:gold-sheen 7s var(--ease) calc(var(--go) + 3.3s) infinite}

  /* the form side: pure black first, settling into the night panel, and only then its contents */
  .bk-main{animation:bk-dawn 1.6s var(--ease-soft) var(--go) both}
  @keyframes bk-dawn{from{background-color:#000}}
  .bk-main::before{animation:breathe 2.4s var(--ease) calc(var(--go) + 1.6s) both}
  .bk-main .d1{animation-delay:calc(var(--go) + 1.6s)}
  .bk-main .d2{animation-delay:calc(var(--go) + 1.9s)}
  .bk-main .d3{animation-delay:calc(var(--go) + 2.15s)}
}

/* ---------------------------------------------------------------------
   TABLET & PHONE: one column, the dark panel on top
   --------------------------------------------------------------------- */
@media (max-width:900px){
  .bk-page{grid-template-columns:1fr; align-content:start}
  .bk-side{gap:28px; padding:16px var(--gutter) 32px}
  .bk-side::after{top:auto; left:0; width:auto; height:3px}
  /* the seam is horizontal here, so it draws left to right, as on the hero */
  @media (prefers-reduced-motion:no-preference){
    .bk-side::after{transform-origin:0 50%; animation-name:seam-x}
  }
  .bk-side-main{margin-top:12px}
  .bk-title{font-size:clamp(2.9rem,13vw,4.4rem)}
  .bk-form-wrap{min-height:0; padding:36px 0 32px}
}
@media (max-width:520px){
  .bk-prices{gap:10px}
  .bk-price{padding:12px 14px 14px}
  .bk-steps li{font-size:.86rem}
  .bk-phone{grid-template-columns:108px minmax(0,1fr)}
}
@media (max-width:360px){ .bk-row2{grid-template-columns:1fr} }