/* bt-imagery v3 (from mock v2): cinematic image + translatable HTML copy layer.
   Every overlay is positioned in % of its frame (--x/--y), so it holds at any width.
   Anchor (--ax/--ay) decides which way a chip grows, so long languages grow inward.
   RTL languages (ar, ur, fa, sd): the image and the lines mirror, and the chips mirror their positions.
   The site keeps <html dir="ltr"> for RTL, so this keys off [lang], not [dir]. */

/* the one handwritten accent: Kalam (OFL), Latin subset only, 21 KB */
@font-face{font-family:'BT Hand';src:url(/assets/fonts/bt-hand-latin.woff2) format('woff2');font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201F,U+2026,U+20B9}

.cv{--plate:var(--accent-soft,#e1eafb);--ink:#f4ecdc;--paper:#f3ead8;--paper-ink:#1d1a2b;--glass:rgba(16,18,38,.62);
  position:relative;margin:0;container-type:inline-size;isolation:isolate;
  /* reset short custom properties the site also uses globally (e.g. --r), so a page token can't break the chip transforms */
  --x:0%;--y:0%;--ax:0%;--ay:0%;--r:0deg;--w:36%;--nx:0px;--ny:0px;--s:18%;--rat:1;--i:0;--tx:0deg;--ty:0deg;--rad:22px}
.cv .cv-o,.cv .cv-ring{--ax:0%;--ay:0%;--r:0deg}
.cv-frame{position:relative;aspect-ratio:var(--ar,16/9)}
/* offset plate: the image sits on a soft accent card, so it belongs to the section instead of floating */
.cv-frame::before{content:"";position:absolute;inset:0;transform:translate(var(--plate-x,14px),var(--plate-y,14px));
  border-radius:var(--rad,22px);background:var(--plate);z-index:-1;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cv-img{position:absolute;inset:0;overflow:hidden;border-radius:var(--rad,22px);background:#141833;
  box-shadow:0 30px 60px -28px rgba(20,24,51,.55),0 2px 6px rgba(20,24,51,.12)}
.cv-img picture{display:block;width:100%;height:100%}
.cv-img img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);display:block}
.cv-img::after{content:"";position:absolute;inset:0;pointer-events:none;  /* gentle vignette so chips always read */
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(10,12,30,.35) 100%)}
.cv-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cv-lines path{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;opacity:.92;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}

/* overlay base */
.cv-o{position:absolute;left:var(--x);top:var(--y);z-index:2;
  transform:translate(calc(var(--ax,0%) + var(--nx,0px)),calc(var(--ay,0%) + var(--ny,0px))) rotate(var(--r,0deg));
  max-inline-size:var(--w,36%);inline-size:max-content;white-space:normal;overflow-wrap:anywhere;hyphens:auto;
  text-align:start;line-height:1.2}
/* 1. handwritten annotation */
.cv-hand{font-family:'BT Hand','DM Sans','Inter',system-ui,sans-serif;color:var(--ink);font-size:clamp(14px,3.1cqi,24px);
  line-height:1.05;text-shadow:0 1px 10px rgba(8,10,28,.75),0 0 2px rgba(8,10,28,.6)}
/* 2. sticky-note tag */
.cv-tag{font:600 clamp(10.5px,1.9cqi,14px)/1.2 'DM Sans','Inter',system-ui,sans-serif;color:var(--paper-ink);background:var(--paper);
  padding:.5em .75em .55em;border-radius:3px;box-shadow:0 10px 18px -8px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.6) inset}
.cv-tag::before{content:"";position:absolute;top:-6px;left:50%;width:34%;min-width:22px;height:11px;transform:translateX(-50%) rotate(-2deg);
  background:rgba(206,190,255,.55);border-radius:1px;backdrop-filter:blur(1px)} /* washi tape, indigo tint */
/* 3. glass caption chip */
.cv-chip{font:500 clamp(10.5px,1.8cqi,13.5px)/1.25 'DM Sans','Inter',system-ui,sans-serif;color:#eef0ff;background:var(--glass);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(199,173,255,.28);padding:.45em .8em;border-radius:999px;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:.5em}
.cv-chip .dot{inline-size:.55em;block-size:.55em;border-radius:50%;background:#c7adff;box-shadow:0 0 0 .25em rgba(199,173,255,.25);flex:none}
.cv-chip.mono{font-variant-numeric:tabular-nums}
/* 4. face highlight ring (BeginRooms) */
.cv-ring{position:absolute;left:var(--x);top:var(--y);width:var(--s,18%);aspect-ratio:var(--rat,1);transform:translate(-50%,-50%) rotate(var(--r,0deg));
  border:2px solid #c7adff;border-radius:8px;box-shadow:0 0 0 999px rgba(8,10,28,0),0 0 24px rgba(199,173,255,.55);
  opacity:0;transition:opacity .25s,box-shadow .35s;pointer-events:none;z-index:1}
.cv[data-active] .cv-ring.on{opacity:1;box-shadow:0 0 0 999px rgba(8,10,28,.38),0 0 24px rgba(199,173,255,.55)}

/* small frames: drop the lowest-priority line rather than crowd the picture */
@container (max-width:420px){.cv-o[data-pri="3"]{display:none}.cv-o.m-wide{max-inline-size:44%;top:calc(var(--y) - 4%)}}
@container (max-width:340px){.cv-o[data-pri="2"]{display:none}}

/* non-Latin scripts: the hand font has no glyphs, so use the site sans, set a little smaller and upright */
html:not(:is([lang|="en"],[lang|="es"],[lang|="fr"],[lang|="de"])) .cv-hand{font-family:'DM Sans','Inter',system-ui,sans-serif;
  font-weight:500;font-size:clamp(12px,2.3cqi,17px);line-height:1.3}

/* RTL mirror */
:is(html[lang|="ar"],html[lang|="ur"],html[lang|="fa"],html[lang|="sd"]) .cv-img img,
:is(html[lang|="ar"],html[lang|="ur"],html[lang|="fa"],html[lang|="sd"]) .cv-lines{transform:scaleX(-1)}
:is(html[lang|="ar"],html[lang|="ur"],html[lang|="fa"],html[lang|="sd"]) .cv-o{left:auto;right:var(--x);direction:rtl;
  transform:translate(calc(var(--ax,0%) * -1 + var(--nx,0px)),calc(var(--ay,0%) + var(--ny,0px))) rotate(calc(var(--r,0deg) * -1))}
:is(html[lang|="ar"],html[lang|="ur"],html[lang|="fa"],html[lang|="sd"]) .cv-ring{left:auto;right:var(--x);transform:translate(50%,-50%) rotate(calc(var(--r,0deg) * -1))}
:is(html[lang|="ar"],html[lang|="ur"],html[lang|="fa"],html[lang|="sd"]) .cv-frame::before{transform:translate(calc(var(--plate-x,14px) * -1),var(--plate-y,14px))}

/* reveal (transform/clip-path/opacity only: no layout shift) */
.cv.js .cv-img{clip-path:inset(0 0 100% 0 round var(--rad,22px));transition:clip-path 1.1s cubic-bezier(.65,0,.2,1)}
.cv.js .cv-img img{transform:scale(1.06);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.cv.js .cv-o{opacity:0;translate:0 8px;transition:opacity .6s ease calc(.7s + var(--i,0) * .14s),translate .6s ease calc(.7s + var(--i,0) * .14s)}
/* lines fade in (dash-draw is unreliable with non-scaling strokes) */
.cv.js .cv-lines path{opacity:0;transition:opacity .7s ease calc(1s + var(--i,0) * .14s)}
.cv.js.is-in .cv-img{clip-path:inset(0 0 0 0 round var(--rad,22px))}
.cv.js.is-in .cv-img img{transform:none}
:is(html[lang|="ar"],html[lang|="ur"],html[lang|="fa"],html[lang|="sd"]) .cv.js.is-in .cv-img img{transform:scaleX(-1)}
.cv.js.is-in .cv-o{opacity:1;translate:0 0}
.cv.js.is-in .cv-lines path{opacity:.92}
/* hover depth, fine pointers only */
@media (hover:hover) and (pointer:fine){
  .cv-frame{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .cv:hover .cv-frame{transform:perspective(1200px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}
  .cv:hover .cv-frame::before{transform:translate(calc(var(--plate-x,14px) * 1.4),calc(var(--plate-y,14px) * 1.4))}
}
@media (prefers-reduced-motion:reduce){
  .cv.js .cv-img,.cv.js .cv-img img,.cv.js .cv-o{transition:none!important;clip-path:none!important;opacity:1!important;translate:none!important}
  .cv.js .cv-lines path{transition:none!important;opacity:.92!important}
  .cv:hover .cv-frame{transform:none}
}

/* edit mode (?edit): drag chips and read off % positions */
.cv-edit .cv-o,.cv-edit .cv-ring{outline:1px dashed #ffde7a;cursor:move;opacity:1!important}
.cv-edit .cv-ring{opacity:.8!important}
#cv-readout{position:fixed;inset-inline-end:12px;bottom:12px;z-index:99;background:#111;color:#ffde7a;font:12px/1.4 ui-monospace,monospace;padding:8px 10px;border-radius:8px;max-width:420px;white-space:pre-wrap}
:is(html[lang|="ar"],html[lang|="ur"],html[lang|="fa"],html[lang|="sd"]) .cv.js .cv-img img{transform:scaleX(-1) scale(1.06)}
:is(html[lang|="ar"],html[lang|="ur"],html[lang|="fa"],html[lang|="sd"]) .cv.js.is-in .cv-img img{transform:scaleX(-1)}

/* ---------- v3 slots ---------- */
.cv-img img{transition-property:transform}
.cv-ph-note{display:none}
/* home · BeginNotes: picture with the capture card overlapping its foot (P3) */
.cv-stack{display:grid;min-width:0}
.cv-stack .cv-c-home{width:min(340px,76%);justify-self:start}
.cv-stack .bnx-stage{margin-top:-30px;margin-inline-start:clamp(28px,14%,96px);position:relative;z-index:3}
@media (max-width:960px){.cv-stack .cv-c-home{width:min(320px,80%)}}
/* home · BeginRooms: small square inset under the headline */
.cv-b-home{width:min(320px,100%);margin-top:clamp(22px,3vw,34px)}
/* home · products: cinema strip */
.cv-strip{width:min(100%,640px);margin-top:clamp(22px,3vw,34px)}
/* BeginRooms tour head: text + inset */
.cv-head{display:grid;gap:clamp(28px,5vw,72px);align-items:center}
@media (min-width:900px){.cv-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.cv-head .cv{width:min(440px,100%);justify-self:center}
/* section heading + inset split */
.cv-split{display:grid;gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:clamp(28px,4vw,48px)}
@media (min-width:900px){.cv-split{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.cv-split .cv{width:min(540px,100%);justify-self:end}
.cv-side{width:min(440px,100%);margin-top:clamp(24px,3vw,36px)}
/* aside with a small creative (P4) */
.cv-aside{display:flex;gap:clamp(16px,2.4vw,28px);align-items:center;min-width:0}
.cv-aside>p{flex:1 1 14em;min-width:0;margin:0}
.cv-aside>.cv{flex:0 0 auto}
.cv-aside .cv-ff{width:clamp(170px,18vw,230px)}
.cv-aside .cv-c-inside{width:clamp(220px,20vw,260px)}
@media (max-width:640px){.cv-aside{flex-wrap:wrap}.cv-aside .cv-ff{width:200px}.cv-aside .cv-c-inside{width:min(300px,86%)}}
.cv-arch{--rad:999px 999px 22px 22px}
/* P5 context thumbs */
.cv-thumb{display:inline-block;vertical-align:middle;inline-size:56px;block-size:56px;border-radius:14px;overflow:hidden;margin:-6px 16px 0 0;
  box-shadow:0 12px 22px -12px rgba(20,24,51,.6),0 0 0 1px color-mix(in srgb,currentColor 10%,transparent);transform:rotate(-2.5deg)}
.cv-thumb img{display:block;width:100%;height:100%;object-fit:cover}
li:nth-child(2n) .cv-thumb,article:nth-child(2n) .cv-thumb{transform:rotate(2deg)}
@media (max-width:640px){.cv-thumb{inline-size:48px;block-size:48px;margin-inline-end:12px}}

:is(html[lang|="ar"],html[lang|="ur"],html[lang|="fa"],html[lang|="sd"]) .cv-thumb{margin:-6px 0 0 16px}

/* ---- v3.1 heading layouts: image + copy as one block (no floating gaps) ---- */
.cvh>div:first-child,.cvh>.cv-aside{display:contents}
.cvh>div:first-child>:first-child{grid-area:eb}
.cvh>div:first-child>h2{grid-area:h2}
.cvh>.section-aside,.cvh>.cv-aside>p{grid-area:as}
.cvh figure.cv{grid-area:fig;margin:0}
.cvh.cvh-side,.cvh.cvh-row{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"eb" "h2" "fig" "as";row-gap:0;align-items:start;justify-content:stretch;max-width:none}
.cvh>div:first-child>h2{margin-bottom:0}
.cvh figure.cv{margin-top:clamp(22px,4vw,34px)}
.cvh>.section-aside,.cvh>.cv-aside>p{margin-top:clamp(20px,3vw,28px);padding-bottom:0}
.cvh-side figure.cv{justify-self:start}
.cvh-side .cv-b-home{width:min(320px,100%)}
.cvh-side .cv-ff{width:200px}
.cvh-side .cv-c-inside{width:min(300px,86%)}
@media (min-width:900px){
 .cvh.cvh-side{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:1fr auto auto auto 1fr;
   grid-template-areas:". fig" "eb fig" "h2 fig" "as fig" ". fig";column-gap:clamp(48px,6vw,96px)}
 .cvh-side figure.cv{margin-top:0;justify-self:center;align-self:center}
 .cvh-side>.section-aside,.cvh-side>.cv-aside>p{max-width:460px}
 .cvh-side .cv-b-home{width:clamp(340px,34vw,480px)}
 .cvh-side .cv-ff{width:clamp(240px,23vw,330px)}
 .cvh-side .cv-c-inside{width:clamp(250px,23vw,330px)}
 .cvh.cvh-row{grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);grid-template-areas:"eb eb" "h2 h2" "fig as";column-gap:clamp(36px,4.5vw,64px)}
 .cvh-row figure.cv{width:100%}
 .cvh-row>.section-aside{align-self:center;max-width:360px;margin-top:clamp(22px,4vw,34px)}
}