/* =========================================================
   خياط برستيج VIP — site.css
   المفهوم: ورقة الباترون + القماش + الغرزة
   الألوان المؤقتة: كحلي على أبيض قماشي (تتبدل لما يوصل الشعار)
   ========================================================= */

/* ---------- Fonts (self-hosted, with metric-matched fallbacks so nothing jumps) ---------- */
@font-face{font-family:"Alexandria";src:url(../fonts/alexandria-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";src:url(../fonts/alexandria-arabic-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";src:url(../fonts/alexandria-arabic-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";src:url(../fonts/alexandria-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alexandria";src:url(../fonts/alexandria-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alexandria";src:url(../fonts/alexandria-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Amiri";src:url(../fonts/amiri-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Amiri";src:url(../fonts/amiri-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Aref Ruqaa";src:url(../fonts/aref-ruqaa-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Alexandria Fallback";src:local("Arial"),local("Tahoma"),local("Segoe UI"),local("Geeza Pro"),local("Noto Sans Arabic"),local("DejaVu Sans");size-adjust:104%;ascent-override:96.8%;descent-override:25.1%;line-gap-override:0%}
@font-face{font-family:"Amiri Fallback";src:local("Times New Roman"),local("Traditional Arabic"),local("Geeza Pro"),local("Noto Naskh Arabic"),local("DejaVu Serif");size-adjust:96%;ascent-override:112%;descent-override:63%;line-gap-override:0%}
@font-face{font-family:"Ruqaa Fallback";src:local("Times New Roman"),local("Geeza Pro"),local("Noto Naskh Arabic"),local("DejaVu Serif");size-adjust:92%;ascent-override:122%;descent-override:24%;line-gap-override:10%}

/* ---------- Tokens ---------- */
:root{
  --bg:#EEF2F6; --bg-2:#E3E9F0; --surface:#FFFFFF;
  --ink:#13203A; --ink-2:#47576D; --ink-3:#5B6A80;
  --brand:#1F3A5F; --brand-2:#2A4C7A; --brand-ink:#FFFFFF;
  --brand-soft:rgba(31,58,95,.07); --brand-tint:rgba(31,58,95,.16);
  --line:rgba(19,32,58,.11); --line-2:rgba(19,32,58,.2);
  --stitch-c:rgba(31,58,95,.32);
  --star:#C28A17; --wa:#0E7440; --wa-2:#0B6236;
  --vip-1:#1F3A5F; --vip-2:#7FA0C6;
  --pat:rgba(31,58,95,.13); --pat-2:rgba(31,58,95,.5);
  --glass:rgba(250,252,255,.66); --glass-strong:rgba(250,252,255,.86); --glass-soft:rgba(255,255,255,.74);
  --glass-solid:#F7F9FC; --glass-edge:rgba(255,255,255,.85); --glass-rim:rgba(19,32,58,.09);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 42%);
  --shadow-1:0 1px 2px rgba(19,32,58,.08),0 8px 22px -10px rgba(19,32,58,.18);
  --shadow-2:0 2px 6px rgba(19,32,58,.08),0 16px 36px -12px rgba(19,32,58,.26),0 34px 70px -36px rgba(19,32,58,.24);
  --shadow-3:0 4px 12px rgba(19,32,58,.10),0 26px 60px -18px rgba(19,32,58,.34),0 56px 110px -46px rgba(19,32,58,.34);
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:72px;
  --r-xs:8px;--r-sm:12px;--r-md:16px;--r-lg:22px;--r-xl:30px;--r-pill:999px;
  --t-xs:.8125rem;--t-sm:.9375rem;--t-md:1rem;--t-lg:1.25rem;--t-xl:1.5rem;
  --t-2xl:clamp(1.85rem,1.45rem + 1.8vw,2.6rem);
  --f-body:"Alexandria","Alexandria Fallback",system-ui,sans-serif;
  --f-head:"Amiri","Amiri Fallback",serif;
  --f-mark:"Aref Ruqaa","Ruqaa Fallback",serif;
  --ease:cubic-bezier(.22,.8,.24,1); --spring:cubic-bezier(.34,1.32,.52,1);
  --hdr-h:64px; --gut:18px; --dock-h:66px;
  --dir:-1; /* -1 = RTL (Arabic), 1 = LTR (English): mirrors directional motion */
  color-scheme:light;
}
[dir="ltr"]{--dir:1}
[data-theme="dark"]{
  --bg:#0B1322; --bg-2:#101B2E; --surface:#131F35;
  --ink:#E6ECF3; --ink-2:#AAB6C7; --ink-3:#93A2B6;
  --brand:#A9C2E2; --brand-2:#C4D6EE; --brand-ink:#0C1830;
  --brand-soft:rgba(169,194,226,.09); --brand-tint:rgba(169,194,226,.2);
  --line:rgba(230,236,243,.1); --line-2:rgba(230,236,243,.2);
  --stitch-c:rgba(169,194,226,.3);
  --star:#E2B24A; --wa:#0E7440;
  --vip-1:#C9D8EA; --vip-2:#F5F8FC;
  --pat:rgba(169,194,226,.09); --pat-2:rgba(169,194,226,.42);
  --glass:rgba(16,25,42,.55); --glass-strong:rgba(18,28,47,.86); --glass-soft:rgba(18,28,47,.72);
  --glass-solid:#16233A; --glass-edge:rgba(255,255,255,.12); --glass-rim:rgba(0,0,0,.3);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 40%);
  --shadow-1:0 1px 2px rgba(2,6,16,.5),0 10px 24px -10px rgba(2,6,16,.6),inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-2:0 2px 6px rgba(2,6,16,.5),0 18px 40px -12px rgba(2,6,16,.7),inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-3:0 4px 14px rgba(2,6,16,.55),0 30px 70px -18px rgba(2,6,16,.8),inset 0 1px 0 rgba(255,255,255,.07);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scroll-padding-top:84px;interpolate-size:allow-keywords}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (hover:hover) and (pointer:fine){html{scrollbar-gutter:stable}}
main,.sec,.hero{overflow-x:clip}
body{margin:0;font-family:var(--f-body);font-size:var(--t-md);line-height:1.75;color:var(--ink);background:transparent;overflow-x:clip;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;min-height:100dvh}
body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;background:
  repeating-linear-gradient(45deg,rgba(19,32,58,.022) 0 1px,transparent 1px 4px),
  repeating-linear-gradient(-45deg,rgba(255,255,255,.35) 0 1px,transparent 1px 5px),
  radial-gradient(120% 70% at 85% -10%,rgba(127,160,198,.22),transparent 60%),var(--bg)}
[data-theme="dark"] body::before{background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),
  radial-gradient(120% 70% at 85% -10%,rgba(60,96,146,.28),transparent 60%),var(--bg)}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,figure,blockquote,dl,dd,ul{margin:0}
ul{padding:0;list-style:none}
a,button{color:inherit;text-decoration:none;font:inherit}
a:hover,a:focus,a:visited,a:active,button:hover,button:focus{text-decoration:none}
a,button,label,input,select,textarea,summary,[role="option"]{touch-action:manipulation}
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:22px;height:22px;flex:none}
[hidden]{display:none!important}
.skip{position:fixed;inset-inline-start:12px;top:-60px;z-index:200;background:var(--brand);color:var(--brand-ink);padding:10px 16px;border-radius:var(--r-sm);transition:transform .2s}
.skip:focus{transform:translateY(76px)}
.wrap{width:min(100% - 2*var(--gut),1180px);margin-inline:auto}
.wrap-narrow{width:min(100% - 2*var(--gut),820px)}
.d-only{display:none!important}
@media (min-width:900px){.d-only{display:inline-flex!important}.m-only{display:none!important}:root{--gut:32px;--hdr-h:76px}}
::selection{background:var(--brand);color:var(--brand-ink)}

/* ---------- Glass ---------- */
.glass{background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-2),inset 0 1px 0 var(--glass-edge);position:relative;background-image:var(--sheen)}
.glass-soft{background:var(--glass-soft);border:1px solid var(--glass-edge);box-shadow:var(--shadow-1);background-image:var(--sheen)}
.blur,.hdr::before,.dock,.sheet,.lb-bar,.lb-x,.pop{-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
@media (min-width:900px){.hdr::before,.sheet,.pop,.lb-bar{-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}}
@media (min-width:900px){.glass,.glass-soft{-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.glass-soft,.hdr::before,.dock,.sheet,.lb-bar,.lb-x,.pop,.hchip{background-color:var(--glass-solid)!important}
}

/* ---------- Concept background: pattern sheet ---------- */
.atelier{position:fixed;inset:-4% 0;z-index:-2;pointer-events:none;overflow:hidden;will-change:transform}
.pattern{width:104%;height:104%;margin:-2%;fill:none;stroke:var(--pat);stroke-width:1.2;animation:drift 46s ease-in-out infinite alternate;will-change:transform}
.pattern *{vector-effect:non-scaling-stroke}
.pattern circle{stroke:var(--pat-2);opacity:.5}
.p-grid{stroke-dasharray:2 7;opacity:.7}
.p-arc{stroke-dasharray:8 8}
.p-seam{stroke-dasharray:7 6}
.p-grain,.p-notch{stroke:var(--pat-2);opacity:.55}
/* self-tracing seams repaint the sheet → only on desktop-class devices */
.p-trace{display:none;stroke:var(--pat-2);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.12 .88;stroke-dashoffset:1;animation:trace 18s linear infinite}
@media (min-width:900px) and (hover:hover) and (pointer:fine){.p-trace{display:inline}}
.p-trace-2{animation-duration:22s;animation-delay:-7s}
.p-trace-3{animation-duration:12s;animation-delay:-3s;stroke-dasharray:.2 .8}
.sheen{position:absolute;inset:-30%;background:linear-gradient(104deg,transparent 42%,rgba(255,255,255,.42) 50%,transparent 58%);transform:translateX(70%);animation:sheen 15s ease-in-out infinite}
[data-theme="dark"] .sheen{background:linear-gradient(104deg,transparent 42%,rgba(169,194,226,.06) 50%,transparent 58%)}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes drift{from{transform:translate3d(1%,.6%,0)}to{transform:translate3d(-1.5%,-1.2%,0)}}
@keyframes sheen{0%,12%{transform:translateX(70%)}60%,100%{transform:translateX(-70%)}}
.is-paused,.is-paused *,.is-paused::before,.is-paused::after{animation-play-state:paused!important}
/* off screen: drop the 3D scene from compositing entirely (no visual change) */
.hero-stage.is-paused .scene,.hero-stage.is-paused .tape{visibility:hidden}
/* while a finger is scrolling: hold the at-rest loops (scroll-linked motion keeps running) */
.is-scrolling .pattern,.is-scrolling .sheen,.is-scrolling .p-trace,.is-scrolling .scene,.is-scrolling .sw,.is-scrolling .sw-face::after,.is-scrolling .hchip,.is-scrolling .tape-run,.is-scrolling .stars .ic,.is-scrolling .shine::after,.is-scrolling .q-wa .ic,.is-scrolling .dock-wa .ic,.is-scrolling .turn,.is-scrolling .turn-floor,.is-scrolling .turn-sheen i,.is-scrolling .folds span,.is-scrolling .tag3d,.is-scrolling .vm-pin,.is-scrolling .vm-ring,.is-scrolling .ftr-bg::before,.is-scrolling .ftr-bg::after,.is-scrolling .ftr-vip,.is-scrolling .ht-vip,.is-scrolling .open-badge i::after{animation-play-state:paused!important}

/* ---------- Header ---------- */
.hdr{position:fixed;inset-inline:0;top:0;z-index:60;padding-top:env(safe-area-inset-top);transition:transform .5s var(--ease)}
.hdr::before{content:"";position:absolute;inset:0;background:var(--glass);background-image:var(--sheen);border-bottom:1px solid var(--glass-edge);box-shadow:var(--shadow-2);opacity:0;transition:opacity .35s var(--ease)}
.hdr.is-scrolled::before{opacity:1}
.hdr.is-hidden{transform:translateY(-115%)}
.hdr-in{position:relative;height:var(--hdr-h);display:flex;align-items:center;gap:var(--s-4);transition:transform .4s var(--ease)}
.hdr.is-scrolled .hdr-in{transform:scale(.94)}
.brand{display:flex;align-items:center;gap:10px;border-radius:var(--r-md);padding:4px;margin:-4px}
.mono{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#2A4C7A,#14294A);display:grid;place-items:center;box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.2);position:relative;flex:none}
.mono::after{content:"";position:absolute;inset:4px;border-radius:9px;border:1px dashed rgba(233,239,246,.45)}
.mono span{font-family:var(--f-mark);font-weight:700;font-size:26px;line-height:1;color:#E9EFF6;transform:translateY(-3px)}
.brand-logo{width:42px;height:42px;border-radius:13px;object-fit:cover;box-shadow:var(--shadow-1)}
.brand-txt{display:flex;align-items:baseline;gap:6px;line-height:1}
.brand-mark{font-family:var(--f-mark);font-weight:700;font-size:1.65rem;color:var(--brand);line-height:1.3}
.brand-vip{font-family:var(--f-head);font-weight:700;font-size:.82rem;letter-spacing:.14em;color:var(--ink-2)}
.hdr-nav{display:none;margin-inline-start:auto;gap:2px}
.hdr-nav a{padding:10px 14px;border-radius:var(--r-pill);font-weight:500;font-size:var(--t-sm);color:var(--ink-2);transition:background-color .25s,color .25s;min-height:44px;display:inline-flex;align-items:center}
.hdr-nav a.on{color:var(--brand);background:var(--brand-soft)}
.hdr-act{display:flex;align-items:center;gap:var(--s-2);margin-inline-start:auto}
@media (min-width:1000px){.hdr-nav{display:flex}.hdr-act{margin-inline-start:var(--s-3)}}
.progress{position:absolute;inset-inline:0;bottom:0;height:2px;overflow:hidden;opacity:0;transition:opacity .3s}
.hdr.is-scrolled .progress{opacity:1}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--vip-2));transform-origin:right;transform:scaleX(var(--p,0))}
[dir="ltr"] .progress i,[dir="ltr"] .wz-prog i{transform-origin:left}

/* ---------- Buttons ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r-pill);font-weight:600;font-size:var(--t-sm);line-height:1.2;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .3s var(--ease),background-color .25s,border-color .25s,color .25s;user-select:none;-webkit-user-select:none}
.btn:active{transform:scale(.965)}
.btn-lg{min-height:56px;padding:0 26px;font-size:var(--t-md)}
.btn-sm{min-height:44px;padding:0 16px}
.btn-block{width:100%}
.btn-primary{background:var(--brand);color:var(--brand-ink);box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-ghost{background:var(--glass-soft);border-color:var(--line-2);color:var(--ink)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-pearl{background:#E9EFF6;color:#0E1A2E;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.shine::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%);transform:translateX(130%);animation:shine 6s ease-in-out 2.4s infinite}
[data-theme="dark"] .btn-primary.shine::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%)}
@keyframes shine{0%{transform:translateX(130%)}28%,100%{transform:translateX(-130%)}}
.icon-btn{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--ink);background:var(--glass-soft);transition:background-color .25s,border-color .25s,transform .2s var(--ease)}
.icon-btn:active{transform:scale(.92)}
.tb-ic{position:relative;width:22px;height:22px}
.tb-ic .ic{position:absolute;inset:0;transition:transform .5s var(--spring),opacity .3s}
.tb-sun{opacity:0;transform:rotate(-90deg) scale(.6)}
[data-theme="dark"] .tb-moon{opacity:0;transform:rotate(90deg) scale(.6)}
[data-theme="dark"] .tb-sun{opacity:1;transform:none}
.hdr-cta{display:none;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.fab-on .hdr-cta{opacity:0;visibility:hidden}
.hdr-cta:not(.x){transition-delay:0s}
@media (min-width:900px){.hdr-cta{display:inline-flex}}
.link-soft{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:600;padding:8px 12px;margin:-8px -12px;border-radius:var(--r-sm);min-height:44px;transition:background-color .25s}
.link-soft .ic{width:18px;height:18px;transition:transform .3s var(--ease)}
.link-soft:active{background:var(--brand-tint)}

/* hover = desktop extra only */
@media (hover:hover){
  .btn-primary:hover{background:var(--brand-2);box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.2);transform:translateY(-2px)}
  .btn-ghost:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-2px)}
  .btn-wa:hover{background:var(--wa-2);box-shadow:var(--shadow-2);transform:translateY(-2px)}
  .btn-pearl:hover{background:#fff;transform:translateY(-2px)}
  .btn:active{transform:scale(.965)}
  .icon-btn:hover{background:var(--brand-soft);border-color:var(--line-2)}
  .hdr-nav a:hover{background:var(--brand-soft);color:var(--ink)}
  .link-soft:hover{background:var(--brand-soft)}
  .link-soft:hover .ic{transform:translateX(calc(3px * var(--dir)))}
  .brand:hover .mono{transform:rotate(-4deg)}
}
.mono{transition:transform .5s var(--spring)}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:calc(var(--hdr-h) + env(safe-area-inset-top));padding-bottom:var(--s-6)}
.hero-photo{position:absolute;inset:0;overflow:hidden;z-index:-1}
.hero-photo img{width:100%;height:100%;object-fit:cover;opacity:.28;animation:kenburns 26s ease-in-out infinite alternate}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,var(--bg))}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.14) translate(-2%,-1%)}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
.hero-stage{position:relative;height:clamp(250px,70vw,330px);perspective:1100px;perspective-origin:50% 30%;margin-inline:calc(-1*var(--gut));overflow:clip}
.hero-stage::after{content:"";position:absolute;inset-inline:0;bottom:0;height:72px;background:linear-gradient(to bottom,transparent,var(--bg));z-index:4;pointer-events:none}
.hero-copy{position:relative;z-index:5;margin-top:-44px}
.hero-title{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.3em;line-height:1;font-weight:700}
.ht-kind{flex-basis:100%;font-family:var(--f-head);font-size:var(--t-xl);color:var(--ink-2);margin-bottom:-.15em}
.ht-mark{font-family:var(--f-mark);font-weight:700;font-size:clamp(4.1rem,2.9rem + 6vw,7.6rem);line-height:1.12;color:var(--brand);
  text-shadow:0 1px 0 #1A3354,0 2px 0 #172E4C,0 3px 0 #142843,0 4px 0 #11233B,0 14px 22px rgba(19,32,58,.28)}
[data-theme="dark"] .ht-mark{text-shadow:0 1px 0 #8EA8C9,0 2px 0 #7891B2,0 3px 0 #627A9A,0 4px 0 #4E6482,0 16px 26px rgba(0,0,0,.55)}
.ht-vip{font-family:var(--f-head);font-weight:700;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);letter-spacing:.16em;line-height:1;
  background:linear-gradient(100deg,var(--vip-1) 0 30%,var(--vip-2) 50%,var(--vip-1) 70% 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:vip 6s ease-in-out 1.6s infinite}
@keyframes vip{0%,60%,100%{filter:brightness(1)}75%{filter:brightness(1.45) drop-shadow(0 0 6px rgba(127,160,198,.45))}}
.hero-lead{font-family:var(--f-head);font-weight:700;font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem);line-height:1.55;margin-top:var(--s-5);max-width:14em;color:var(--ink)}
.hero-sub{color:var(--ink-2);font-size:var(--t-sm);margin-top:var(--s-2);max-width:24.2rem}
.hero-meta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);margin-top:var(--s-4)}
.open-badge[data-pending]{visibility:hidden}
.hr-row{display:contents}
.hero-rate{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--ink-2);padding:8px 12px;margin:-8px -12px;border-radius:var(--r-sm);min-height:44px;transition:background-color .25s}
.hero-rate b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.hero-rate:active{background:var(--brand-soft)}
@media (hover:hover){.hero-rate:hover{background:var(--brand-soft)}}
.stars{display:inline-flex;gap:1px;color:var(--star)}
.stars .ic{width:16px;height:16px;animation:twinkle 4.8s ease-in-out infinite;animation-delay:calc(var(--k)*.18s + 1.5s)}
@keyframes twinkle{0%,70%,100%{filter:none;transform:none}78%{filter:brightness(1.35) drop-shadow(0 0 4px rgba(226,178,74,.7));transform:scale(1.15)}}
.open-badge{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-xs);font-weight:600;padding:6px 12px;border-radius:var(--r-pill);background:var(--brand-soft);color:var(--ink);min-height:32px}
.open-badge i{position:relative;width:8px;height:8px;border-radius:50%;background:#1E8A55}
.open-badge i::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(30,138,85,.5);animation:ping 2.2s ease-out infinite}
.open-badge.is-closed i{background:#B4483E}
.open-badge.is-closed i::after{content:none}
@keyframes ping{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(3);opacity:0}}
.hero-cta{display:grid;gap:var(--s-3);margin-top:var(--s-5)}
.quick{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--s-2);margin-top:var(--s-3)}
.q{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;border-radius:var(--r-md);background:var(--glass-soft);border:1px solid var(--glass-edge);box-shadow:var(--shadow-1);font-size:var(--t-xs);font-weight:500;color:var(--ink-2);transition:transform .2s var(--ease),box-shadow .3s,border-color .25s}
.q .ic{color:var(--brand);width:22px;height:22px}
.q:active{transform:scale(.95)}
.q-wa .ic{color:var(--wa);animation:pulse 2.6s ease-in-out infinite}
[data-theme="dark"] .q-wa .ic{color:#3CC07A}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@media (hover:hover){.q:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--brand-tint)}}

/* 3D swatch book */
.scene{position:absolute;inset:0;transform-style:preserve-3d;animation:sceneIn 1.5s var(--ease) both,sway 14s ease-in-out 1.5s infinite alternate}
@keyframes sceneIn{from{opacity:0;transform:translateY(26px) scale(.84) rotateY(-12deg)}to{opacity:1;transform:rotateY(-8deg)}}
@keyframes sway{from{transform:rotateY(-8deg) rotateX(0)}to{transform:rotateY(10deg) rotateX(3deg)}}
.fan{position:absolute;left:50%;bottom:24%;width:0;height:0;transform:rotateX(16deg) translateZ(20px)}
@keyframes fanIn{from{transform:rotate(0deg) translateZ(calc((6 - var(--i)) * 4px))}to{transform:rotate(calc((var(--i) - 3) * 9deg)) translateZ(calc((6 - var(--i)) * 4px))}}
@keyframes fanOpen{from{transform:rotate(calc((var(--i) - 3) * 9deg)) translateZ(calc((6 - var(--i)) * 4px))}to{transform:rotate(calc((var(--i) - 3) * 13.5deg)) translateZ(calc((6 - var(--i)) * 4px))}}
.fan::after{content:"";position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F4F7FB,#9AA8BA 55%,#5E6C80);box-shadow:0 3px 8px rgba(19,32,58,.45),inset 0 -2px 3px rgba(0,0,0,.25);transform:translateZ(40px)}
.sw{--sw-w:clamp(78px,20vw,104px);--sw-h:clamp(190px,48vw,240px);position:absolute;width:var(--sw-w);height:var(--sw-h);left:calc(var(--sw-w)/-2);bottom:-26px;transform-origin:50% calc(100% - 26px);transform:rotate(calc((var(--i) - 3) * 9deg)) translateZ(calc((6 - var(--i)) * 4px));z-index:calc(10 - var(--i));animation:fanIn 1.8s var(--ease) both,fanOpen 9s ease-in-out 1.8s infinite alternate}
.sw-face{position:absolute;inset:0;border-radius:12px 12px 16px 16px;overflow:hidden;border:1px solid rgba(19,32,58,.14);
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(255,255,255,.12) 0 1px,transparent 1px 4px),linear-gradient(90deg,rgba(0,0,0,.06),transparent 30%,transparent 70%,rgba(0,0,0,.08)),var(--c);
  box-shadow:0 1px 1px rgba(19,32,58,.12),0 10px 22px -8px rgba(19,32,58,.38)}
.sw-face::after{content:none;position:absolute;inset:-10% -60%;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);transform:translateX(60%);animation:swSheen 7s ease-in-out infinite;animation-delay:calc(var(--i)*.22s + 2s)}
.sw:nth-child(1) .sw-face::after,.sw:nth-child(4) .sw-face::after{content:""}
@keyframes swSheen{0%,20%{transform:translateX(60%)}60%,100%{transform:translateX(-60%)}}
.sw-tag{position:absolute;inset-inline:8px;top:9px;padding:5px 6px 6px;border-radius:7px;background:rgba(255,255,255,.9);color:#1F3A5F;font-size:10.5px;font-weight:600;line-height:1.2;text-align:center;outline:1px dashed rgba(31,58,95,.38);outline-offset:-3px;box-shadow:0 2px 6px rgba(19,32,58,.12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-hole{position:absolute;left:50%;bottom:17px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:rgba(19,32,58,.25);box-shadow:inset 0 2px 3px rgba(0,0,0,.35)}
.scene-floor{position:absolute;left:50%;bottom:12%;width:62%;height:36px;margin-left:-31%;border-radius:50%;background:radial-gradient(closest-side,rgba(19,32,58,.28),transparent);transform:rotateX(70deg) translateZ(-30px);}
[data-theme="dark"] .scene-floor{background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
.tape{position:absolute;inset-inline:-30%;top:34%;height:30px;direction:ltr;transform:rotate(-9deg) translateZ(-80px);background:#F2EDDF;border-block:1px solid rgba(19,32,58,.14);box-shadow:0 10px 22px -12px rgba(19,32,58,.4);overflow:hidden;opacity:.9}
[data-theme="dark"] .tape{background:#D9D3C2;opacity:.75}
.tape-run{display:flex;width:max-content;height:100%;animation:tapeRun 46s linear infinite}
.tape-run span{width:100px;height:100%;position:relative;font:600 10px/1 var(--f-body);color:#1F3A5F;padding:16px 0 0 4px;
  background:linear-gradient(90deg,#1F3A5F 0 1.5px,transparent 1.5px) 0 0/100px 14px no-repeat,repeating-linear-gradient(90deg,rgba(31,58,95,.75) 0 1px,transparent 1px 10px) 0 0/100% 7px no-repeat}
@keyframes tapeRun{to{transform:translateX(-50%)}}
.hchip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:600;color:var(--ink);white-space:nowrap;background:var(--glass-soft);animation:bob 6.5s ease-in-out infinite;box-shadow:var(--shadow-2)}
.hchip .ic{width:16px;height:16px;color:var(--brand)}
.hchip b{font-variant-numeric:tabular-nums}
/* fixed widths: a late font can't resize them (no layout shift) */
.hchip-a,.hchip-b,.hchip-c{justify-content:flex-start}
.hchip-a{width:10.8em}.hchip-b{width:6.3em}.hchip-c{width:10.2em}
.hchip-a{top:9%;inset-inline-start:calc(var(--gut) + 2%);animation-delay:-1s}
.hchip-b{bottom:30%;inset-inline-end:calc(var(--gut) + 1%);animation-delay:-3.2s}
.hchip-c{top:24%;inset-inline-end:calc(var(--gut) + 3%);animation-delay:-5s}
@keyframes bob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}

@media (min-width:900px){
  .hero{min-height:min(860px,100dvh);display:grid;align-items:center;padding-bottom:var(--s-7)}
  .hero-grid{grid-template-columns:1.05fr 1fr;gap:var(--s-6)}
  .hero-stage{order:2;height:560px;margin-inline:0;overflow:visible}
  .hero-stage::after{display:none}
  .hero-copy{margin-top:0}
  .hero-cta{display:flex;flex-wrap:wrap}
  .quick{display:none}
  .sw{--sw-w:118px;--sw-h:280px}
  .hchip{background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);font-size:var(--t-sm);padding:10px 16px}
  .hchip-a{top:12%;inset-inline-start:2%}
  .hchip-b{bottom:22%;inset-inline-end:0}
  .hchip-c{top:30%;inset-inline-end:-2%}
}
@media (max-width:899px) and (max-height:720px){
  .hero-stage{height:clamp(210px,56vw,260px)}
  .hero-sub{display:none}
  .sw{--sw-h:clamp(160px,42vw,200px)}
}

/* ---------- Opening: «على المقاس» — cut to measure ----------
   The finished hero is plain CSS: the builder's own thobe on its hanger, in front of the swatch book,
   with a swing tag that leads into «جهّز ثوبك». html.cut-play (added once per session by the inline
   head script, never with reduced motion) plays the tailoring over that finished state:
   fabric → chalk draft → tape + measurements → running stitch → the cloth fills the pattern and the
   thobe settles on the hanger → woven VIP label → swing tag. transform / opacity / stroke-dashoffset only. */
.hero-stage{--bh:calc(clamp(250px,70vw,330px) - 22px);--bt:6px}
@media (max-width:899px) and (max-height:720px){.hero-stage{--bh:calc(clamp(210px,56vw,260px) - 16px);--bt:4px}}
@media (min-width:900px){.hero-stage{--bh:500px;--bt:22px}}
.cut-board{position:absolute;z-index:2;top:var(--bt);height:var(--bh);width:calc(var(--bh) * 300 / 430);inset-inline:0;margin-inline:auto;container-type:size;
  --chalk:#3D6EAD;--thread:#1F3A5F}
[data-theme="dark"] .cut-board{--chalk:#E2EAF4;--thread:#DCE5F0}
/* the thobe: same drawing as the builder; white by day, navy by night */
.cut-fill{position:absolute;top:-6%;bottom:-10%;left:-14%;right:-14%;overflow:hidden;pointer-events:none}
.cut-fill-in{position:absolute;inset:0}
.cut-swing{position:absolute;top:calc(600% / 116);left:calc(1400% / 128);width:calc(10000% / 128);height:calc(10000% / 116);transform-origin:50% 1%;animation:cutSway 7s ease-in-out infinite alternate}
@keyframes cutSway{from{transform:rotate(-.5deg)}to{transform:rotate(.5deg)}}
.cut-thobe{--fab:#FAFBFC;--seam:#1F3A5F;position:absolute;inset:0}
[data-theme="dark"] .cut-thobe{--fab:#22344F;--seam:#DCE5F0;filter:drop-shadow(0 18px 22px rgba(0,0,0,.6))}
[data-theme="dark"] .cut-thobe .fold{stroke:rgba(255,255,255,.06)}
[data-theme="dark"] .cut-thobe .link{fill:#8FA3BC}
[data-theme="dark"] .cut-swing .turn-sheen i{background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent)}
.cut-swing .turn-sheen i{animation-delay:2.5s}
/* woven VIP flag label, sewn into the side seam (wearer's left) */
.cut-vip{position:absolute;left:65.5%;top:71.2%;display:block;font:700 max(8.5px,3.3cqw)/1 var(--f-head);letter-spacing:.16em;padding:.42em .5em .36em 1.2em;border-radius:1px 3px 3px 1px;color:#EAF0F7;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 2px),linear-gradient(180deg,#2A4C7A,#172C49);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 2px 4px -1px rgba(11,24,48,.45)}
[data-theme="dark"] .cut-vip{color:#1F3A5F;background:repeating-linear-gradient(90deg,rgba(31,58,95,.07) 0 1px,transparent 1px 2px),linear-gradient(180deg,#FBF7EE,#E9E0CC);box-shadow:inset 0 0 0 1px rgba(31,58,95,.12),0 2px 5px -1px rgba(0,0,0,.6)}
.cut-vip-st{position:absolute;left:68.5%;top:70.6%;width:1.6px;height:5.4%;background:repeating-linear-gradient(180deg,var(--thread) 0 2px,transparent 2px 4px);transform-origin:50% 0;opacity:.8}
/* the swing tag on the hanger → «جهّز ثوبك» */
.cut-tagw{position:absolute;z-index:5;top:calc(6000% / 430);inset-inline-end:calc(11400% / 300);width:0;height:0;--L:clamp(36px,19cqw,56px);transform-origin:0 0;animation:cutTagSway 6s ease-in-out infinite alternate}
@keyframes cutTagSway{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
.cut-str{position:absolute;top:-2px;left:-.9px;width:2px;height:calc(var(--L) + 2px);border-radius:1px;background:linear-gradient(90deg,#9A7432,#D4AE62 50%,#9A7432);box-shadow:0 1px 1px rgba(11,24,48,.25);transform-origin:50% 2px;transform:rotate(34deg)}
.cut-str::before{content:"";position:absolute;top:-1px;left:-2px;width:6px;height:6px;border-radius:50%;background:#B08A45}
[dir="ltr"] .cut-str{transform:rotate(-34deg)}
.cut-tag{position:absolute;top:calc(var(--L) * .83 - 10px);inset-inline-start:calc(var(--L) * .56 - 10px);display:inline-flex;align-items:center;gap:6px;min-height:44px;padding-block:0;padding-inline:21px 12px;border-radius:9px;white-space:nowrap;
  background:linear-gradient(180deg,#FFFDF8,#F3EEE2);color:#1F3A5F;font-weight:600;font-size:13px;line-height:1.2;
  box-shadow:0 12px 22px -12px rgba(11,24,48,.55),0 1px 2px rgba(11,24,48,.18);outline:1.5px dashed rgba(31,58,95,.32);outline-offset:-5px;transition:transform .25s var(--ease)}
.cut-tag::before{content:"";position:absolute;inset-inline-start:6.5px;top:6.5px;width:7px;height:7px;border-radius:50%;background:var(--bg);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.cut-tag .ic{width:17px;height:17px}
.cut-tag .cut-arr{width:15px;height:15px;transition:transform .3s var(--ease)}
.cut-tag:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px}
.cut-tag:active{transform:scale(.96)}
@media (hover:hover){.cut-tag:hover{transform:translateY(-2px)}.cut-tag:hover .cut-arr{transform:translateX(calc(3px * var(--dir)))}}
@media (max-width:430px){.cut-tag{font-size:12.5px;padding-inline:19px 11px;gap:5px}.cut-tag .cut-arr{display:none}}
@media (max-width:389px){html[lang="en"] .cut-tag{white-space:normal;max-width:8.4em;line-height:1.15;padding-block:6px}}
@media (min-width:900px){.cut-tag{font-size:var(--t-sm);padding-inline:23px 14px;min-height:48px}}
/* the chips keep fixed widths (no shift when the font lands); English words are longer */
html[lang="en"] .hchip-b{width:7.9em}
/* phones: the rating chip moves off the shoulders to the sleeve side, clear of the collar */
@media (max-width:899px){.hero-stage .hchip-a{top:43%;inset-inline-start:calc(var(--gut) - 6px)}}
/* replay: only where the opening can play (JS on, motion allowed) */
.cut-replay{display:none;position:absolute;z-index:6;inset-inline-start:calc(var(--gut) - 6px);bottom:56px;opacity:.86;background:var(--glass-soft);box-shadow:var(--shadow-1)}
.cut-replay .ic{width:20px;height:20px}
@media (prefers-reduced-motion:no-preference){.js .cut-replay{display:inline-grid}}
@media (min-width:900px){.cut-replay{inset-inline-start:auto;inset-inline-end:4%;bottom:6%}}
/* opening-only layers */
.cut-cloth,.cut-draft,.cut-meas{display:none}
.cut-cloth{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:radial-gradient(90% 55% at 72% 10%,rgba(255,255,255,.95),transparent 70%),repeating-linear-gradient(45deg,rgba(19,32,58,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(255,255,255,.75) 0 1px,transparent 1px 4px),linear-gradient(180deg,#F9FAFC,#EDF1F6);
  -webkit-mask:linear-gradient(#000 82%,transparent);mask:linear-gradient(#000 82%,transparent)}
[data-theme="dark"] .cut-cloth{background:radial-gradient(90% 55% at 72% 10%,rgba(120,152,194,.24),transparent 70%),repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(0,0,0,.28) 0 1px,transparent 1px 4px),linear-gradient(180deg,#1E2E49,#142035)}
/* light glancing across the cloth: a fixed band that only fades (a moving band would count as layout shift) */
.cut-cloth::after{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.7) 47%,transparent 66%)}
[data-theme="dark"] .cut-cloth::after{background:linear-gradient(105deg,transparent 28%,rgba(190,212,240,.12) 47%,transparent 66%)}
.cut-draft{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--chalk);stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.c-con path{stroke-width:1.1;opacity:.55;stroke-dasharray:1 1}
.c-out{stroke-width:2.6;stroke-dasharray:1 1}
.c-det path{stroke-width:1.6;opacity:.85;stroke-dasharray:1 1}
.c-mark{stroke-width:1.4;opacity:.7}
.c-dims path{stroke-width:1.3;stroke-dasharray:1 1}
.c-st{stroke:var(--thread);stroke-width:1.6;stroke-dasharray:3.4 2.8;stroke-linecap:butt}
.c-st-rev{fill:none;stroke:#fff;stroke-width:9;stroke-dasharray:1 1}
.cut-meas{position:absolute;inset:0;pointer-events:none}
.cut-tape{position:absolute;top:calc(6200% / 430);height:calc(35200% / 430);inset-inline-end:calc(26600% / 300);width:max(11px,4.6cqw);overflow:hidden;border-radius:2px;box-shadow:0 6px 12px -6px rgba(11,24,48,.45)}
.cut-tape-in{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(31,58,95,.75) 0 1px,transparent 1px 5px) 0 0/42% 100% no-repeat,repeating-linear-gradient(180deg,#1F3A5F 0 1.5px,transparent 1.5px 25px) 0 0/78% 100% no-repeat,#F2EDDF;box-shadow:inset 0 0 0 1px rgba(19,32,58,.16)}
[dir="ltr"] .cut-tape-in{background-position:100% 0,100% 0,0 0}
.cut-tape-tip{position:absolute;inset-inline:0;bottom:0;height:5px;background:linear-gradient(#A3AEBD,#5B6A80)}
.cut-chalk{position:absolute;top:calc(3600% / 430);left:50%;width:0;height:100%;filter:drop-shadow(0 2px 2px rgba(11,24,48,.3))}
.cut-chalk::before{content:"";position:absolute;left:-7px;top:-11px;width:14px;height:12px;clip-path:polygon(50% 100%,0 0,100% 0);background:linear-gradient(160deg,#7DA3D3,#3D6EAD)}
[data-theme="dark"] .cut-chalk::before{background:linear-gradient(160deg,#FFFFFF,#C9D5E3)}
.cut-m{position:absolute;display:inline-flex;align-items:baseline;gap:4px;padding:3px 7px;border-radius:7px;white-space:nowrap;font-size:11px;font-weight:500;line-height:1.3;color:var(--chalk);
  background:color-mix(in srgb,var(--bg) 72%,transparent);border:1px dashed color-mix(in srgb,var(--chalk) 55%,transparent)}
.cut-m small{font-size:9.5px;opacity:.8}
.m-sh{top:-1%;inset-inline:0;margin-inline:auto;width:max-content}
.m-sl{top:38%;inset-inline-start:calc(87% + 2px)}
.m-len{top:52%;inset-inline-end:calc(26600% / 300 + max(11px,4.6cqw) + 5px)}
.odo{display:inline-flex;font-weight:600;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink)}
.odo i{display:block;height:1.15em;overflow:hidden;font-style:normal}
.odo b{display:block;font-weight:inherit;line-height:1.15em;transform:translateY(calc(var(--d) * -1.15em))}
.odo b span{display:block}
@media (min-width:900px){.cut-m{font-size:13px;padding:4px 9px}.odo{font-size:15px}.cut-m small{font-size:11px}.c-out{stroke-width:2.2}}

/* ---- the sequence ---- */
@keyframes cutDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes cutOut{to{opacity:0}}
@keyframes cutIn{from{opacity:0}}
@keyframes cutRevA{from{transform:translateY(-100%)}to{transform:none}}
@keyframes cutRevB{from{transform:translateY(100%)}to{transform:none}}
.cut-play .cut-cloth,.cut-play .cut-draft,.cut-play .cut-meas{display:block}
/* 0 s — fine fabric; the sheen runs once; at 3 s the cloth around the pattern falls away */
.cut-play .cut-cloth{animation:cutCloth .9s cubic-bezier(.5,0,.3,1) 3s both}
.cut-play .cut-cloth::after{animation:cutGlint 2.6s ease-in-out .1s both}
@keyframes cutCloth{to{opacity:0;transform:scale(1.04)}}
@keyframes cutGlint{0%,100%{opacity:0}45%{opacity:1}}
/* .15 s — chalk: construction lines, the chalk riding the centre front, then the pattern */
.cut-play .c-con path{animation:cutDraw .6s cubic-bezier(.5,0,.3,1) both;animation-delay:calc(.15s + var(--k) * .08s)}
.cut-play .cut-chalk{animation:cutChalk .6s cubic-bezier(.5,0,.3,1) .15s both,cutOut .22s ease .76s both}
@keyframes cutChalk{to{transform:translateY(90.2%)}}
.cut-play .c-out{animation:cutDraw 1.2s cubic-bezier(.45,.05,.35,1) .45s both}
.cut-play .c-det path{animation:cutDraw .45s ease-out both;animation-delay:calc(1.15s + var(--k) * .12s)}
.cut-play .c-mark{animation:cutIn .4s ease 1.5s both}
/* 1.2 s — tape unrolls down the length; measurements roll into place */
.cut-play .c-dim-len{animation:cutDraw .3s ease-out 1.2s both}
.cut-play .c-dim-sh{animation:cutDraw .4s ease-out 1.35s both}
.cut-play .c-dim-sl{animation:cutDraw .45s ease-out 1.6s both}
.cut-play .cut-tape{animation:cutRevA 1s cubic-bezier(.4,0,.2,1) 1.3s both}
.cut-play .cut-tape-in{animation:cutRevB 1s cubic-bezier(.4,0,.2,1) 1.3s both}
.cut-play .cut-m{animation:cutLbl .4s var(--spring) both}
@keyframes cutLbl{from{opacity:0;transform:translateY(5px) scale(.9)}}
.cut-play .m-sh{animation-delay:1.5s}.cut-play .m-len{animation-delay:1.6s}.cut-play .m-sl{animation-delay:1.8s}
.cut-play .odo b{animation:cutOdo .85s cubic-bezier(.25,.7,.2,1) both}
@keyframes cutOdo{from{transform:translateY(0)}}
.cut-play .m-sh .odo b{animation-delay:1.55s}.cut-play .m-len .odo b{animation-delay:1.65s}.cut-play .m-sl .odo b{animation-delay:1.85s}
/* 2.15 s — the running stitch goes round the pattern edge */
.cut-play .c-st-rev{animation:cutDraw .9s cubic-bezier(.45,0,.55,1) 2.15s both}
/* 3 s — cut: chalk and tape lift away, the cloth fills the pattern from the shoulders down */
.cut-play .c-g1,.cut-play .cut-meas{animation:cutOut .45s ease 3s both}
.cut-play .c-g2{animation:cutOut .5s ease 3.35s both}
.cut-play .c-st{animation:cutOut .45s ease 3.45s both}
.cut-play .cut-fill{animation:cutRevA .8s cubic-bezier(.6,0,.25,1) 3s both}
.cut-play .cut-fill-in{animation:cutRevB .8s cubic-bezier(.6,0,.25,1) 3s both}
/* 3.55 s — the hanger is drawn in and the thobe settles on it */
.cut-play .cut-thobe .hanger path{stroke-dasharray:1 1;animation:cutDraw .5s ease-out 3.55s both}
.cut-play .cut-swing{animation:cutSettle 1.15s cubic-bezier(.3,.6,.35,1) 3.6s both,cutSway 7s ease-in-out 4.75s infinite alternate}
@keyframes cutSettle{0%{transform:translateY(-2.5%) rotate(0)}28%{transform:translateY(0) rotate(1.8deg)}52%{transform:rotate(-1.1deg)}76%{transform:rotate(.3deg)}100%{transform:rotate(-.5deg)}}
.cut-play .cut-swing .turn-sheen i{animation-delay:5.3s}
/* 3.75 s — the swatch book fans open behind it; tape and chips return */
.cut-play .scene{animation:cutSceneIn 1.3s var(--ease) 3.75s both,sway 14s ease-in-out 5.05s infinite alternate}
@keyframes cutSceneIn{from{opacity:0;transform:translateY(18px) scale(.86) rotateY(-12deg)}to{opacity:1;transform:rotateY(-8deg)}}
.cut-play .sw{animation:cutFanIn 1.6s var(--ease) 3.85s both,fanOpen 9s ease-in-out 5.45s infinite alternate}
@keyframes cutFanIn{from{transform:rotate(0deg) translateZ(calc((6 - var(--i)) * 4px))}to{transform:rotate(calc((var(--i) - 3) * 9deg)) translateZ(calc((6 - var(--i)) * 4px))}}
.cut-play .tape{animation:cutIn .8s var(--ease) 3.9s both}
.cut-play .hchip{animation:cutChip .55s var(--spring) both,bob 6.5s ease-in-out infinite}
@keyframes cutChip{from{opacity:0;scale:.86}}
.cut-play .hchip-a{animation-delay:4.25s,-1s}.cut-play .hchip-b{animation-delay:4.45s,-3.2s}
/* 4.3 s — the woven VIP label is stitched on, then the swing tag drops in */
.cut-play .cut-vip{animation:cutVip .55s cubic-bezier(.34,1.4,.5,1) 4.3s both}
@keyframes cutVip{from{transform:translateX(-100%)}}
.cut-play .cut-vip-st{animation:cutSt .3s ease-out 4.72s both}
@keyframes cutSt{from{transform:scaleY(0)}}
.cut-play .cut-tagw{animation:cutTagIn .9s cubic-bezier(.3,1.45,.5,1) 4.55s both,cutTagSway 6s ease-in-out 5.45s infinite alternate}
@keyframes cutTagIn{from{opacity:0;visibility:hidden;transform:rotate(calc(30deg * var(--dir)))}to{opacity:1;visibility:visible;transform:rotate(-1.5deg)}}
.cut-play .cut-replay{animation:cutIn .5s ease 5.2s both}
/* the tab is hidden: hold everything */
.tab-hidden .hero *,.tab-hidden .atelier *{animation-play-state:paused!important}

/* ---------- Sections ---------- */
.sec{padding-block:var(--s-7)}
@media (min-width:900px){.sec{padding-block:var(--s-8)}}
.sec-head{margin-bottom:var(--s-5);max-width:34.1rem}
.h2{font-family:var(--f-head);font-weight:700;font-size:var(--t-2xl);line-height:1.3;color:var(--ink)}
.sec-sub{color:var(--ink-2);margin-top:var(--s-2);font-size:var(--t-sm)}
@media (min-width:900px){.sec-sub{font-size:var(--t-md)}}
.stitched{outline:1.5px dashed var(--stitch-c);outline-offset:-9px}

/* swipe rows (phones) */
.swipe{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:8px 10% 18px;margin-inline:calc(-1*var(--gut));perspective:1000px}
.swipe::-webkit-scrollbar{display:none}
.swipe>*{scroll-snap-align:center;scroll-snap-stop:always}
.dots{display:flex;justify-content:center;gap:8px;height:8px;margin-top:2px}
.dots i{width:8px;height:8px;border-radius:4px;background:var(--line-2);transition:transform .35s var(--ease),background-color .3s}
.dots i.on{background:var(--brand);transform:scaleX(2.2)}
@media (min-width:900px){
  .swipe{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;grid-auto-rows:1fr;overflow:visible;margin-inline:0;padding:0;perspective:none}
  .sheet{inset-inline:auto;left:50%;width:min(560px,92vw);margin-left:min(-280px,-46vw);border-bottom:0}
}

/* ---------- Why cards ---------- */
.why-card{position:relative;height:350px;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  background:repeating-linear-gradient(45deg,rgba(19,32,58,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(255,255,255,.3) 0 1px,transparent 1px 4px),linear-gradient(160deg,rgba(255,255,255,.35),transparent 60%),var(--fab);
  box-shadow:var(--shadow-2);border:1px solid var(--glass-edge);display:flex;flex-direction:column;transition:translate .45s var(--ease),box-shadow .45s var(--ease)}
[data-theme="dark"] .why-card{background:repeating-linear-gradient(45deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),linear-gradient(160deg,rgba(255,255,255,.06),transparent 60%),color-mix(in srgb,var(--fab) 22%,#101A2D)}
.why-art{position:relative;flex:1;perspective:700px;overflow:hidden}
.why-body{position:relative;margin:0 10px 10px;padding:16px 18px 18px;border-radius:var(--r-md);min-height:142px;display:flex;flex-direction:column}
.why-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--brand);color:var(--brand-ink);box-shadow:var(--shadow-1);margin-top:-36px;margin-bottom:8px}
.why-ic .ic{width:20px;height:20px}
.why-body h3{font-family:var(--f-head);font-weight:700;font-size:var(--t-lg);line-height:1.4}
.why-body p{color:var(--ink-2);font-size:var(--t-sm);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:900px){.why-card{height:390px}}
@media (hover:hover){.why-card:hover{translate:0 -6px;box-shadow:var(--shadow-3)}}
.mini-tape{position:absolute;inset-inline:-20%;top:42%;height:26px;direction:ltr;transform:rotate(-14deg) rotateX(18deg);background:#F2EDDF;border-block:1px solid rgba(19,32,58,.16);box-shadow:0 14px 22px -12px rgba(19,32,58,.45);overflow:hidden}
.mini-tape .tape-run{animation-duration:30s}
.mini-tape .tape-run span{padding-top:14px}
.mini-tape::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.06),transparent 30%,transparent 70%,rgba(0,0,0,.06))}
.folds{position:absolute;left:50%;top:50%;width:64%;transform:translate(-50%,-50%) rotateX(46deg) rotateZ(-12deg);transform-style:preserve-3d}
.folds span{display:block;height:54px;margin-top:-14px;border-radius:10px 10px 14px 14px;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 40%,rgba(0,0,0,.12)),repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),var(--f);box-shadow:0 10px 16px -8px rgba(19,32,58,.55);transform:translateZ(calc(var(--j)*14px));animation:breathe 6s ease-in-out infinite;animation-delay:calc(var(--j)*-.6s);border:1px solid rgba(19,32,58,.12)}
@keyframes breathe{0%,100%{transform:translateZ(calc(var(--j)*14px))}50%{transform:translateZ(calc(var(--j)*14px + 8px))}}
.tag3d{position:absolute;left:50%;top:6%;width:120px;margin-left:-60px;transform-origin:50% 0;animation:swing 5.5s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-5deg) rotateY(-10deg)}50%{transform:rotate(5deg) rotateY(10deg)}}
.tag-string{display:block;width:2px;height:40px;margin-inline:auto;background:linear-gradient(#8C97A6,#5B6A80)}
.tag-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:150px;border-radius:12px 12px 16px 16px;background:#FAFBFC;color:#1F3A5F;outline:1.5px dashed rgba(31,58,95,.35);outline-offset:-7px;box-shadow:0 18px 30px -12px rgba(19,32,58,.45);position:relative}
.tag-card::before{content:"";position:absolute;top:10px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--fab);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.tag-card .ic{width:34px;height:34px;margin-top:10px}
.tag-card b{font-family:var(--f-head);font-size:1.25rem}

/* ---------- Builder ---------- */
.bld{display:grid;gap:var(--s-4)}
.bld-stage{position:relative;height:430px;display:grid;place-items:center;perspective:1000px;padding-bottom:46px;isolation:isolate}
.bld-stage::before{content:"";position:absolute;z-index:-1;inset:0 7% 46px;border-radius:999px 999px 26px 26px;
  background:radial-gradient(55% 40% at 50% 28%,rgba(255,255,255,.7),transparent 72%),repeating-linear-gradient(90deg,rgba(31,58,95,.045) 0 1px,transparent 1px 13px),linear-gradient(180deg,#CBD7E5,#A9BBD0);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.65),inset 0 -40px 60px -34px rgba(19,32,58,.3),var(--shadow-2);outline:1.5px dashed rgba(31,58,95,.26);outline-offset:-10px}
[data-theme="dark"] .bld-stage::before{background:radial-gradient(55% 40% at 50% 28%,rgba(169,194,226,.16),transparent 72%),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 13px),linear-gradient(180deg,#1B2B46,#121D32);outline-color:rgba(169,194,226,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -40px 60px -34px rgba(0,0,0,.5),var(--shadow-2)}
.turn{position:relative;width:min(64%,270px);aspect-ratio:300/430;transform-style:preserve-3d;animation:turn 12s ease-in-out infinite alternate}
@keyframes turn{from{transform:rotateY(-11deg) rotateX(2deg)}to{transform:rotateY(11deg) rotateX(1deg)}}
.turn-floor{position:absolute;left:50%;bottom:62px;width:56%;height:26px;margin-left:-28%;border-radius:50%;background:radial-gradient(closest-side,rgba(19,32,58,.28),transparent);animation:floor 12s ease-in-out infinite alternate}
[data-theme="dark"] .turn-floor{background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
@keyframes floor{from{transform:scaleX(.9) translateX(4%)}to{transform:scaleX(.9) translateX(-4%)}}
.thobe{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 18px rgba(19,32,58,.22))}
[data-theme="dark"] .thobe{filter:drop-shadow(0 18px 22px rgba(0,0,0,.55))}
.thobe .cloth{fill:var(--fab);stroke:var(--seam);stroke-width:1.6;stroke-linejoin:round;transition:fill .6s var(--ease),stroke .6s}
.thobe .back{filter:brightness(.9)}
.thobe .stitch{fill:none;stroke:var(--seam);stroke-width:1.2;stroke-dasharray:2.6 2.4;opacity:.7;transition:stroke .6s}
.thobe .seam{fill:none;stroke:var(--seam);stroke-width:1.3;opacity:.65}
.thobe .fold{fill:none;stroke:rgba(11,24,48,.08);stroke-width:7;stroke-linecap:round}
.thobe[data-dark] .fold{stroke:rgba(255,255,255,.06)}
.thobe .hanger{fill:none;stroke:#7D8A9C;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .thobe .hanger{stroke:#9DAABB}
.thobe .btn-dot,.thobe .opt-buttons-shown circle{fill:var(--seam);transition:fill .6s}
.thobe .link{fill:#AFBACA;stroke:var(--seam);stroke-width:.8}
.thobe .sheen-bar{display:none}
/* fabric sheen as an HTML layer masked by the thobe silhouette (composited) */
.turn-sheen{position:absolute;inset:0;pointer-events:none;overflow:hidden;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 430'%3E%3Cpath d='M128 62L84 78C66 130 52 210 44 292L76 300C84 240 92 190 100 148L90 414Q150 420 210 414L200 148C208 190 216 240 224 300L256 292C248 210 234 130 216 78L172 62Q150 56 128 62Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 430'%3E%3Cpath d='M128 62L84 78C66 130 52 210 44 292L76 300C84 240 92 190 100 148L90 414Q150 420 210 414L200 148C208 190 216 240 224 300L256 292C248 210 234 130 216 78L172 62Q150 56 128 62Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.turn-sheen i{position:absolute;top:-10%;bottom:-10%;width:34%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);animation:tbSheen 7s ease-in-out 1s infinite}
.thobe[data-dark]~.turn-sheen i{background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent)}
@keyframes tbSheen{0%,15%{transform:translateX(0)}70%,100%{transform:translateX(420%)}}
.thobe .opt{opacity:0;transition:opacity .45s var(--ease),transform .45s var(--spring);transform-box:fill-box;transform-origin:center;transform:scale(.92)}
.thobe[data-collar="saudi"] .opt-collar-saudi,.thobe[data-collar="qallab"] .opt-collar-qallab,.thobe[data-collar="sini"] .opt-collar-sini,
.thobe[data-cuff="kabak"] .opt-cuff-kabak,.thobe[data-cuff="sada"] .opt-cuff-sada,
.thobe[data-pocket="yes"] .opt-pocket,.thobe[data-buttons="shown"] .opt-buttons-shown{opacity:1;transform:none}
.bld-cap{position:absolute;inset-inline:0;bottom:0;color:var(--ink);font-weight:500;text-align:center;font-size:var(--t-sm);color:var(--ink-2);height:3.4em;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-inline:8px}
.bld-opts{border-radius:var(--r-xl);padding:20px 18px;display:flex;flex-direction:column;gap:18px}
.og{border:0;margin:0;padding:0;min-inline-size:0}
.og legend{font-weight:600;font-size:var(--t-sm);margin-bottom:8px;padding:0;color:var(--ink)}
.og-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.seg{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));padding:4px;border-radius:var(--r-pill);background:var(--brand-soft);border:1px solid var(--line);isolation:isolate}
.seg label{position:relative;z-index:1;min-height:44px;display:grid;place-items:center;border-radius:var(--r-pill);font-weight:500;font-size:var(--t-sm);color:var(--ink-2);cursor:pointer;transition:color .3s;user-select:none;-webkit-user-select:none}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.seg label:has(input:checked){color:var(--brand-ink)}
.seg label:has(input:focus-visible){outline:2.5px solid var(--brand);outline-offset:2px}
.seg-ind{position:absolute;z-index:0;top:4px;bottom:4px;inset-inline-start:4px;width:calc((100% - 8px)/var(--n));border-radius:var(--r-pill);background:var(--brand);box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.2);transform:translateX(calc(var(--idx,0) * 100% * var(--dir)));transition:transform .5s var(--spring)}
.seg label:active span{display:inline-block;transform:scale(.95)}
@media (hover:hover){.seg label:not(:has(input:checked)):hover{color:var(--ink)}}
.colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px}
.col{position:relative;display:grid;justify-items:center;gap:6px;padding:6px 2px 4px;border-radius:var(--r-sm);cursor:pointer;min-height:44px}
.col input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.col-chip{width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);background:repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px),linear-gradient(145deg,rgba(255,255,255,.4),transparent 55%),var(--c);box-shadow:var(--shadow-1);transition:transform .45s var(--spring),box-shadow .3s}
.col-n{font-size:var(--t-xs);color:var(--ink-2);line-height:1.3;text-align:center;height:2.6em;display:flex;align-items:flex-start;justify-content:center;transition:color .3s}
.col:has(input:checked) .col-chip{transform:translateY(-3px) rotate(-4deg);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--brand),var(--shadow-2)}
.col:has(input:checked) .col-n{color:var(--brand);font-weight:600}
.col:has(input:focus-visible){outline:2.5px solid var(--brand);outline-offset:1px}
.col:active .col-chip{transform:scale(.92)}
@media (hover:hover){.col:hover .col-chip{transform:translateY(-3px)}}
.bld-note{font-size:var(--t-xs);color:var(--ink-3);line-height:1.7}
@media (min-width:900px){
  .bld{grid-template-columns:1fr 1fr;gap:var(--s-6);align-items:center}
  .bld-stage{height:620px}
  .turn{width:min(62%,320px)}
  .bld-opts{padding:28px}
  .colors{grid-template-columns:repeat(7,minmax(0,1fr))}
}

/* ---------- Proof: rating + recommendation + reviews ---------- */
.proof{display:grid;gap:14px}
@media (min-width:900px){.proof{grid-template-columns:1fr 1fr;align-items:stretch}}
.rate-card,.rec-card{border-radius:var(--r-xl);padding:24px;display:flex;flex-direction:column;gap:14px;min-height:196px}
.rate-top{display:flex;align-items:center;gap:18px}
.rate-num{font-family:var(--f-body);font-weight:600;font-size:3.6rem;line-height:1;color:var(--brand);font-variant-numeric:tabular-nums;width:1.95em;flex:none;min-width:1.43em;text-align:center;letter-spacing:-.02em}
.rate-card .stars .ic{width:22px;height:22px}
.rate-of{color:var(--ink-2);font-size:var(--t-sm);margin-top:4px}
.rate-of b{color:var(--ink);font-variant-numeric:tabular-nums;display:inline-block;width:2.2em;min-width:1.86em;text-align:center}
.rate-card .link-soft{margin-top:auto;align-self:flex-start}
.rec-card{position:relative;margin:0}
.rec-q{position:absolute;top:2px;inset-inline-end:20px;font-family:var(--f-head);font-size:6rem;line-height:1;color:var(--brand-tint)}
.rec-card blockquote{margin:0}
.rec-card blockquote p{font-family:var(--f-head);font-weight:700;font-size:var(--t-xl);line-height:1.6;max-width:13em}
.rec-card figcaption{margin-top:auto;display:flex;align-items:center;gap:12px}
.rec-card figcaption b{display:block;font-size:var(--t-sm)}
.rec-card figcaption small{display:block;color:var(--ink-3);font-size:var(--t-xs)}
.rec-link{margin-inline-start:auto!important}
.av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--brand-soft);color:var(--brand);font-weight:600;border:1px solid var(--line);transition:background-color .35s,color .35s,transform .45s var(--spring)}
.rev-row{margin-top:14px}
.rev{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r-lg);background:var(--glass-soft);border:1px solid var(--glass-edge);box-shadow:var(--shadow-1);height:100%;min-height:300px;transition:translate .45s var(--ease),scale .45s var(--ease),box-shadow .45s var(--ease),border-color .35s,background-color .35s}
.rev-more{align-self:flex-start;color:var(--brand);font-weight:600;font-size:var(--t-xs);min-height:44px;padding:0 10px;margin:-10px -10px 0;border-radius:var(--r-sm);transition:background-color .25s}
.rev-more:active{background:var(--brand-tint)}
.rev-full{font-size:var(--t-md);line-height:1.9;color:var(--ink);padding:4px 2px 12px}
.rev-top{display:flex;align-items:center;gap:10px}
.rev-top b{display:block;font-size:var(--t-sm)}
.rev-top small{display:block;color:var(--ink-3);font-size:var(--t-xs)}
.rev .stars .ic{transition:filter .35s,transform .45s var(--spring)}
.clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink-2);font-size:var(--t-sm)}
.rev-foot{margin-top:auto;display:flex;align-items:center;gap:6px;color:var(--ink-3);font-size:var(--t-xs)}
.rev-foot .ic{width:16px;height:16px}
.rev.is-center{border-color:var(--brand);background:color-mix(in srgb,var(--glass-soft) 82%,var(--brand-tint));box-shadow:var(--shadow-2)}
.rev.is-center .av{background:var(--brand);color:var(--brand-ink)}
.rev.is-center .stars .ic{filter:brightness(1.2) drop-shadow(0 0 5px rgba(226,178,74,.6))}
@media (hover:hover){
  .rev-more:hover{background:var(--brand-soft)}
  .rev:hover{translate:0 -8px;scale:1.02;border-color:var(--brand);background:color-mix(in srgb,var(--glass-soft) 82%,var(--brand-tint));box-shadow:var(--shadow-2)}
  .rev:hover .av{background:var(--brand);color:var(--brand-ink);transform:scale(1.06)}
  .rev:hover .stars .ic{filter:brightness(1.2) drop-shadow(0 0 5px rgba(226,178,74,.6));transform:scale(1.1)}
}

/* ---------- Gallery + lightbox ---------- */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;border-radius:var(--r-lg);overflow:hidden}
.g-item{position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg-2)}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
@media (max-width:899px){.gal-more .g-extra{display:none}#galAll{margin-top:12px}}
@media (min-width:900px){.gal{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;border-radius:0;overflow:visible}.g-item{border-radius:var(--r-md);box-shadow:var(--shadow-1)}}
@media (hover:hover){.g-item:hover img{transform:scale(1.06)}}
.lb{position:fixed;inset:0;z-index:120;background:rgba(6,11,22,.8);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;transition:opacity .35s var(--ease)}
.lb.open{opacity:1}
.lb-stage{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.lb-stage::-webkit-scrollbar{display:none}
.lb-fig{flex:0 0 100%;height:100%;display:grid;place-items:center;scroll-snap-align:center;padding:64px 12px 100px}
.lb-fig img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:var(--r-md);box-shadow:var(--shadow-3);transform:scale(.96);transition:transform .5s var(--ease)}
.lb.open .lb-fig img{transform:none}
.lb-bar{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:6px;border-radius:var(--r-pill);background:rgba(18,28,47,.55);border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow-3);color:#fff}
.lb-bar .icon-btn,.lb-x{color:#fff;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08)}
.lb-count{min-width:3.10em;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;font-size:var(--t-sm)}
.lb-x{position:absolute;top:calc(14px + env(safe-area-inset-top));inset-inline-end:14px}

/* ---------- Booking wizard ---------- */
.wz{border-radius:var(--r-xl);padding:18px 16px 20px}
.wz-top{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;margin-bottom:14px}
.wz-back{transition:opacity .3s,transform .2s var(--ease)}
.wz-back[aria-disabled="true"]{opacity:0;pointer-events:none}
.wz-prog{height:6px;border-radius:3px;background:var(--brand-soft);overflow:hidden}
.wz-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--vip-2),var(--brand));border-radius:3px;transform-origin:right;transform:scaleX(var(--prog,.333));transition:transform .55s var(--spring)}
.wz-count{font-size:var(--t-xs);color:var(--ink-2);font-weight:600;min-width:5.58em;text-align:end;font-variant-numeric:tabular-nums}
.wz-steps{display:grid}
.wz-step{grid-area:1/1;border:0;margin:0;padding:0;min-inline-size:0;opacity:0;visibility:hidden;transform:translateX(calc(28px * var(--dir)));transition:opacity .35s var(--ease),transform .5s var(--ease),visibility 0s linear .5s}
.wz-step.is-past{transform:translateX(calc(-28px * var(--dir)))}
.wz-step.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.wz-lg{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-weight:700;font-size:var(--t-lg);margin-bottom:14px;padding:0}
.wz-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 var(--t-sm)/1 var(--f-body);background:var(--brand);color:var(--brand-ink)}
.fld{margin-bottom:16px;position:relative}
.lbl{display:block;font-weight:600;font-size:var(--t-sm);margin-bottom:8px}
.lbl small{font-weight:400;color:var(--ink-3)}
.inp{width:100%;min-height:52px;padding:12px 14px;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r-md);transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.inp::placeholder{color:var(--ink-3);opacity:1}
.inp:focus,.inp:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.inp[aria-invalid="true"]{border-color:#B4483E}
textarea.inp{resize:none;min-height:84px;display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-row{display:flex;gap:8px}
.wz .chip{display:inline-flex;align-items:center;min-height:44px;min-width:52px;padding:0 16px;border-radius:var(--r-pill);border:1.5px solid var(--line-2);background:var(--surface);font:500 var(--t-sm)/1 var(--f-body);color:var(--ink);justify-content:center;transition:background-color .25s,color .25s,border-color .25s,transform .2s var(--ease)}
.wz .chip.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.wz .chip:active{transform:scale(.94)}
@media (hover:hover){.wz .chip:not(.on):hover{border-color:var(--brand);background:var(--brand-soft)}}
.stepper{display:grid;grid-template-columns:44px 1fr 44px;gap:8px;margin-top:10px;align-items:center}
.inp-num{text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.err{min-height:1.5em;font-size:var(--t-xs);color:#B4483E;margin-top:6px;font-weight:500;line-height:1.5}
[data-theme="dark"] .err{color:#F08A80}
.design-sum{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--brand-soft);border:1px dashed var(--stitch-c)}
.design-sum p{flex:1;font-size:var(--t-sm);color:var(--ink);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.2em}
.switch{display:flex;align-items:center;gap:10px;margin-top:10px;min-height:44px;cursor:pointer;font-size:var(--t-sm);position:relative}
.switch input{position:absolute;opacity:0;width:44px;height:28px;margin:0;cursor:pointer}
.sw-track{width:44px;height:26px;border-radius:13px;background:var(--line-2);position:relative;transition:background-color .3s;flex:none}
.sw-track i{position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .4s var(--spring)}
.switch input:checked+.sw-track{background:var(--brand)}
.switch input:checked+.sw-track i{transform:translateX(calc(18px * var(--dir)))}
[data-theme="dark"] .switch input:checked+.sw-track i{background:var(--brand-ink)}
.switch input:focus-visible+.sw-track{outline:2.5px solid var(--brand);outline-offset:2px}
/* custom dropdown */
.dd{position:relative}
.dd-btn{display:flex;align-items:center;gap:10px;text-align:start;cursor:pointer}
.dd-btn .dd-ic{color:var(--brand);width:20px;height:20px}
.dd-val{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-val.is-ph{color:var(--ink-3)}
.dd-chev{width:18px;height:18px;color:var(--ink-3);transition:transform .35s var(--spring)}
.dd.open .dd-chev{transform:rotate(180deg)}
.dd.open .dd-btn{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.dd-cal{margin-top:10px}
.pop{position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:40;padding:6px;border-radius:var(--r-lg);background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--shadow-3);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top;transition:opacity .25s var(--ease),transform .35s var(--spring),visibility 0s linear .35s}
.dd.open .pop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dd-list{position:relative;max-height:300px;overflow-y:auto;overscroll-behavior:contain;outline:none;scrollbar-width:thin}
.dd-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0 14px;border-radius:var(--r-sm);cursor:pointer;font-size:16px;transition:background-color .2s,color .2s}
.dd-list li .ok{width:18px;height:18px;opacity:0;transform:scale(.5);transition:opacity .25s,transform .35s var(--spring)}
.dd-list li[aria-selected="true"]{color:var(--brand);font-weight:600;background:var(--brand-soft)}
.dd-list li[aria-selected="true"] .ok{opacity:1;transform:none}
.dd-list li.is-active{background:var(--brand-tint)}
.dd-list li[aria-disabled="true"]{opacity:.35;cursor:not-allowed}
.dd-list li:active{transform:scale(.98)}
@media (hover:hover){.dd-list li:not([aria-disabled="true"]):hover{background:var(--brand-soft)}}
.dd-cal .pop{inset-inline:auto 0;width:min(340px,100%)}
/* calendar */
.cal{padding:6px 4px 4px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cal-title{font-family:var(--f-head);font-weight:700;font-size:var(--t-lg);min-width:5.58em;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-wd{font-size:11px;color:var(--ink-3);text-align:center;padding:4px 0;font-weight:600}
.cal-d{aspect-ratio:1;min-height:40px;border-radius:12px;display:grid;place-items:center;font-weight:500;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink);transition:background-color .2s,color .2s,transform .2s var(--ease)}
.cal-d:disabled{opacity:.28;cursor:not-allowed}
.cal-d.is-out{visibility:hidden}
.cal-d.is-today{outline:1.5px dashed var(--brand);outline-offset:-3px}
.cal-d[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);box-shadow:var(--shadow-1)}
.cal-d:not(:disabled):active{transform:scale(.9)}
@media (hover:hover){.cal-d:not(:disabled):not([aria-pressed="true"]):hover{background:var(--brand-soft)}}
/* summary */
.wz-sum{display:grid;gap:8px;padding:14px;border-radius:var(--r-md);background:var(--brand-soft);border:1px dashed var(--stitch-c);font-size:var(--t-sm)}
.wz-sum div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:44px}
.wz-sum dt{color:var(--ink-3);font-size:var(--t-xs)}
.wz-sum dd{margin:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wz-sum button{color:var(--brand);font-weight:600;font-size:var(--t-xs);padding:0 10px;min-height:44px;border-radius:var(--r-sm);transition:background-color .2s}
.wz-sum button:active{background:var(--brand-tint)}
@media (hover:hover){.wz-sum button:hover{background:var(--brand-tint)}}
.wz-nav{display:grid;margin-top:6px}
.wz-nav>.btn{grid-area:1/1;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s,background-color .25s,box-shadow .3s}
.wz-nav>.btn.is-off{opacity:0;visibility:hidden;transform:translateY(6px)}
.wz-nav>.btn:not(.is-off){transition-delay:0s}
@media (min-width:900px){
  .wz{padding:30px}
  .wz-top{display:none}
  .wz-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .wz-step,.wz-step.is-past{grid-area:auto;opacity:1;visibility:visible;transform:none}
  .wz-step+.wz-step{border-inline-start:1px dashed var(--line-2);padding-inline-start:28px}
  .wz-nav{max-width:420px;margin-inline-start:auto;margin-top:10px}
  #wzNext{display:none}
  #wzSend.is-off{opacity:1;visibility:visible;transform:none}
}

/* ---------- Bottom sheet ---------- */
.scrim{position:fixed;inset:0;z-index:110;background:rgba(6,11,22,.42);opacity:0;transition:opacity .35s var(--ease)}
.scrim.open{opacity:1}
.sheet{position:fixed;inset-inline:0;bottom:0;z-index:115;max-height:84dvh;border-radius:28px 28px 0 0;background:var(--glass-strong);border:1px solid var(--glass-edge);border-bottom:0;box-shadow:var(--shadow-3);padding:6px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .55s cubic-bezier(.3,1.18,.5,1);display:flex;flex-direction:column}
.sheet.open{transform:none}
.sheet-grip{width:44px;height:5px;border-radius:3px;background:var(--line-2);margin:6px auto 8px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.sheet-head h3{font-family:var(--f-head);font-weight:700;font-size:var(--t-lg)}
.sheet-body{overflow-y:auto;overscroll-behavior:contain;min-height:0}
.sheet-body .dd-list{max-height:none}
.sheet-body .dd-list li{min-height:56px;font-size:17px}
.sheet-body .cal-d{min-height:44px;font-size:16px}
html.lock,html.lock body{overflow:hidden}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px}
.faq-item{border-radius:var(--r-lg);background:var(--glass-soft);border:1px solid var(--glass-edge);box-shadow:var(--shadow-1);transition:box-shadow .35s,border-color .35s}
.faq-item[open]{border-color:var(--brand-tint);box-shadow:var(--shadow-2)}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;min-height:60px;cursor:pointer;font-weight:600;font-size:var(--t-md);border-radius:var(--r-lg)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);flex:none;transition:transform .45s var(--spring),background-color .3s,color .3s}
.faq-ic .ic{width:18px;height:18px}
.faq-item[open] .faq-ic{transform:rotate(45deg);background:var(--brand);color:var(--brand-ink)}
.faq-item::details-content{block-size:0;overflow-y:clip;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.faq-item[open]::details-content{block-size:auto}
.faq-a{padding:0 18px 18px;color:var(--ink-2);font-size:var(--t-sm)}
.faq-a p{max-width:34.1rem}
@media (hover:hover){.faq-item summary:hover .faq-ic{background:var(--brand-tint)}}

/* ---------- Visit ---------- */
.visit{border-radius:var(--r-xl);overflow:hidden;display:grid}
.visit-map{position:relative;height:170px;background:
  repeating-linear-gradient(0deg,var(--pat) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,var(--pat) 0 1px,transparent 1px 28px),
  linear-gradient(160deg,var(--brand-soft),transparent),var(--bg-2);overflow:hidden}
.visit-map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.8)}
.vm-art{position:absolute;inset:0;display:grid;place-items:center}
.vm-art::before{content:"";position:absolute;inset:-10% -10%;background:linear-gradient(115deg,transparent 46%,var(--pat-2) 46.3%,transparent 46.8%),linear-gradient(25deg,transparent 58%,var(--pat-2) 58.2%,transparent 58.6%);opacity:.5}
.vm-pin{position:relative;z-index:2;width:56px;height:56px;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);background:var(--brand);display:grid;place-items:center;box-shadow:var(--shadow-2);animation:pinBob 3s ease-in-out infinite}
.vm-pin .ic{transform:rotate(45deg);color:var(--brand-ink);width:26px;height:26px}
@keyframes pinBob{0%,100%{transform:rotate(-45deg) translate(0,0)}50%{transform:rotate(-45deg) translate(-4px,-4px)}}
.vm-ring{position:absolute;width:56px;height:56px;border-radius:50%;border:2px solid var(--brand);opacity:0;animation:ring 3s ease-out infinite;top:calc(50% - 6px);left:calc(50% - 28px)}
.vm-ring.r2{animation-delay:1.5s}
@keyframes ring{0%{transform:scale(.4);opacity:.6}100%{transform:scale(2.6);opacity:0}}
.visit-info{padding:20px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.visit-addr b{display:block;font-family:var(--f-head);font-size:var(--t-xl);line-height:1.3}
.visit-addr span{color:var(--ink-2);font-size:var(--t-sm)}
.hours{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;font-size:var(--t-sm);width:100%}
.hours dt{color:var(--ink-3)}
.hours dd{margin:0;font-variant-numeric:tabular-nums}
.hours .is-today{color:var(--brand);font-weight:600}
.visit-btns{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;width:100%;margin-top:auto}
@media (min-width:900px){.visit{grid-template-columns:1.1fr 1fr}.visit-map{height:auto;min-height:300px}.visit-info{padding:32px}.visit-btns{width:auto;grid-auto-columns:max-content}}

/* ---------- Footer ---------- */
.ftr{position:relative;margin-top:var(--s-6);padding:56px 0 calc(var(--dock-h) + 44px + env(safe-area-inset-bottom));background:#0D182B;color:#E6ECF3;overflow:hidden;border-radius:30px 30px 0 0;isolation:isolate}
.ftr-bg{position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 1px,transparent 1px 5px),radial-gradient(90% 60% at 10% 0%,rgba(60,96,146,.38),transparent 60%),radial-gradient(70% 50% at 100% 100%,rgba(42,76,122,.35),transparent 60%)}
.ftr-bg::before,.ftr-bg::after{content:"";position:absolute;inset-inline:-20%;height:2px;background:repeating-linear-gradient(90deg,rgba(201,216,234,.32) 0 10px,transparent 10px 18px);top:30%;transform:rotate(-7deg);animation:stitchRun 1.6s linear infinite}
.ftr-bg::after{top:72%;transform:rotate(5deg);animation-duration:2.3s;animation-direction:reverse}
@keyframes stitchRun{from{translate:0 0}to{translate:18px 0}}
.ftr-in{display:grid;gap:30px}
.ftr-mark{display:flex;align-items:baseline;gap:12px;line-height:1;margin-bottom:clamp(2.2rem,1.4rem + 2.6vw,3.4rem)}
.ftr-mark span:first-child{font-family:var(--f-mark);font-weight:700;font-size:clamp(4rem,3rem + 5vw,6.5rem);line-height:1.2;color:#E9EFF6;text-shadow:0 1px 0 #B9C6D6,0 2px 0 #9FB0C4,0 3px 0 #8799B0,0 4px 0 #6F829B,0 16px 30px rgba(0,0,0,.5)}
.ftr-vip{font-family:var(--f-head);font-weight:700;font-size:1.6rem;letter-spacing:.18em;background:linear-gradient(100deg,#C9D8EA 0 30%,#fff 50%,#C9D8EA 70% 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:vip 6s ease-in-out infinite}
.ftr-line{color:#C9D5E3;margin:0 0 20px;font-size:var(--t-md);font-family:var(--f-head);font-weight:700}
.ftr-cards{display:grid;gap:10px}
.ftr-cards li{display:flex}
.ftr-cards .fc{flex:1}
.fc{display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 14px;border-radius:var(--r-lg);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 30px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);background-image:linear-gradient(180deg,rgba(255,255,255,.06),transparent 50%);transition:transform .35s var(--ease),border-color .3s,background-color .3s}
.fc-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#E9EFF6;color:#0D182B;flex:none}
.fc b{display:block;font-size:var(--t-sm)}
.fc small{display:block;color:#AFC0D4;font-size:var(--t-xs)}
.fc:active{transform:scale(.98)}
.fc-split:active{transform:none}
.fc-acts{display:flex;gap:8px;margin-inline-start:auto}
.fc-act{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#E9EFF6;transition:background-color .25s,transform .2s var(--ease)}
.fc-act:active{transform:scale(.92);background:rgba(255,255,255,.2)}
.fc-act .ic{width:20px;height:20px}
.ftr-nav{display:flex;flex-wrap:wrap;gap:4px}
.ftr-nav a{padding:10px 14px;border-radius:var(--r-pill);color:#C9D8EA;font-size:var(--t-sm);min-height:44px;display:inline-flex;align-items:center;transition:background-color .25s}
.ftr-nav a:active{background:rgba(255,255,255,.1)}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding-top:20px;border-top:1px dashed rgba(201,216,234,.2);font-size:var(--t-xs);color:#93A6BD}
.maker a{color:#E9EFF6;font-weight:600;padding:0 8px;margin:0 -4px;border-radius:10px;transition:background-color .25s;display:inline-flex;align-items:center;min-height:44px}
.maker a:active{background:rgba(255,255,255,.12)}
.ftr :focus-visible{outline-color:#C9D8EA}
@media (hover:hover){.fc-act:hover{background:rgba(255,255,255,.22)}.fc-split:hover{transform:none!important}.fc:hover{transform:translateY(-4px);border-color:rgba(201,216,234,.35);background-color:rgba(255,255,255,.09)}.ftr-nav a:hover,.maker a:hover{background:rgba(255,255,255,.1)}}
@media (min-width:900px){
  .ftr{padding-bottom:40px;border-radius:40px 40px 0 0}
  .ftr-in{grid-template-columns:1.1fr 1fr;align-items:start;column-gap:56px}
  .ftr-cards{grid-template-columns:1fr 1fr}
  .ftr-cards li:only-child,.ftr-cards li:last-child:nth-child(odd){grid-column:1/-1}
  .fc{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .ftr-nav,.ftr-base{grid-column:1/-1}
}

/* ---------- Dock (phones) ---------- */
.dock{position:fixed;z-index:70;inset-inline:10px;bottom:calc(10px + env(safe-area-inset-bottom));height:var(--dock-h);border-radius:24px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;padding:0 4px 8px;box-shadow:var(--shadow-3),inset 0 1px 0 var(--glass-edge);transition:transform .45s var(--ease),opacity .3s}
.dock.is-hidden{transform:translateY(150%);opacity:0}
.dock a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;min-height:52px;font-size:11px;font-weight:500;color:var(--ink-2);border-radius:16px;transition:color .25s,transform .2s var(--ease)}
.dock a .ic{width:22px;height:22px}
.dock a::after{content:"";position:absolute;top:4px;width:4px;height:4px;border-radius:2px;background:var(--brand);opacity:0;transform:scale(0);transition:opacity .3s,transform .4s var(--spring)}
.dock a.on{color:var(--brand);font-weight:600}
.dock a.on:not(.dock-main)::after{opacity:1;transform:none}
.dock a:active{transform:scale(.92)}
.dock-main .dm-btn{width:56px;height:56px;margin-top:-28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,var(--brand-2),var(--brand));color:var(--brand-ink);box-shadow:0 0 0 5px var(--bg),var(--shadow-3);transition:transform .3s var(--spring)}
.dock-main .dm-btn .ic{width:24px;height:24px}
.dock-main:active .dm-btn{transform:scale(.9)}
.dock-wa .ic{color:var(--wa);animation:pulse 2.6s ease-in-out infinite}
@media (min-width:900px){.dock{display:none}}

/* ---------- Desktop floating CTA ---------- */
.fab{position:fixed;z-index:65;inset-inline-end:24px;bottom:24px;display:none;align-items:center;gap:10px;padding:0 22px;min-height:54px;border-radius:var(--r-pill);font-weight:600;color:var(--ink);opacity:0;transform:translateY(24px) scale(.96);pointer-events:none;transition:opacity .35s var(--ease),transform .45s var(--spring),box-shadow .3s}
.fab .ic{color:var(--brand)}
.fab.show{opacity:1;transform:none;pointer-events:auto}
@media (min-width:900px){.fab{display:inline-flex;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}}
@media (hover:hover){.fab.show:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}}

/* ---------- Motion: entrance + scroll reveal ---------- */
.js .enter{animation:enterUp .95s var(--ease) both;animation-delay:calc(var(--d,0) * 85ms + 120ms)}
@keyframes enterUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}
.js .hdr-in{animation:enterUp .8s var(--ease) both}
.js .rv{opacity:0;transform:translateY(24px) perspective(900px) rotateX(8deg);transition:opacity .8s var(--ease),transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .slide{opacity:0;transform:translateX(calc(-30px * var(--dir)));transition:opacity .8s var(--ease),transform 1s var(--ease)}
.js .slide.in{opacity:1;transform:none}
.proof>.rv:nth-child(2),.why-row>.rv:nth-child(2){transition-delay:.12s}
.why-row>.rv:nth-child(3){transition-delay:.24s}

@supports (animation-timeline:view()){
  .js .rv{opacity:1;transform:none;transition:none;animation:rvIn linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
  .js .slide{opacity:1;transform:none;transition:none;animation:slideIn linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
  .proof>.rv:nth-child(2),.why-row>.rv:nth-child(2){animation-range:entry 6% cover 32%}
  .why-row>.rv:nth-child(3){animation-range:entry 12% cover 38%}
  .js .g-item.rv img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  .hero-stage{animation:heroOut linear both;animation-timeline:scroll(root);animation-range:0 85vh}
  .hero-title{animation:titleOut linear both;animation-timeline:scroll(root);animation-range:0 85vh}
  .progress i{animation:prog linear both;animation-timeline:scroll(root)}
  .atelier{animation:par linear both;animation-timeline:scroll(root)}
  @media (max-width:899px){
    .js .swipe{animation:rvIn linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
  }
}
@keyframes rvIn{from{opacity:0;transform:translateY(28px) perspective(900px) rotateX(10deg) scale(.985)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(calc(-34px * var(--dir)))}to{opacity:1;transform:none}}
@keyframes settle{from{transform:scale(1.08)}to{transform:none}}
@keyframes heroOut{to{transform:translateY(10%) scale(.9);opacity:.3}}
@keyframes titleOut{to{transform:translateY(-14%) scale(.96);opacity:.55}}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes par{to{transform:translateY(-5%)}}
/* phones: swipe rows are a coverflow driven by site.js (transform/opacity only) */
@media (max-width:899px){
  .js .swipe>.rv,.js .swipe>*{animation:none;opacity:1;transition:box-shadow .45s var(--ease),border-color .35s,background-color .35s;will-change:transform}
}

/* ---------- Language switch + English page ---------- */
.lang-btn{font:600 13px/1 var(--f-body);letter-spacing:.06em;color:var(--brand)}
.lang-btn[lang="ar"]{font:700 19px/1 var(--f-head);letter-spacing:0;padding-bottom:4px}
html[lang="en"] .hero-title{column-gap:.22em}
html[lang="en"] .ht-kind{order:-1;font-family:var(--f-body);font-weight:500;font-size:var(--t-sm);letter-spacing:.34em;text-transform:uppercase;margin-bottom:.5em}
html[lang="en"] .ht-mark{font-family:var(--f-head);font-size:clamp(3.3rem,2.4rem + 4.6vw,6rem);line-height:1.08;letter-spacing:-.005em}
html[lang="en"] .hero-lead{max-width:17em}
.rec-tr{font-family:var(--f-head);font-weight:700;font-size:var(--t-lg);line-height:1.5;margin-top:6px!important;color:var(--ink-2)}
.rec-tr small{display:block;font:400 var(--t-xs)/1.5 var(--f-body);color:var(--ink-3);margin-top:2px}
html[lang="en"] .rec-card blockquote p:first-child{font-size:var(--t-lg)}

/* ---------- Reduced motion: simple fades, everything visible ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .js .rv,.js .slide{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}
  .js .enter{animation:fadeOnly .6s ease both!important;animation-delay:calc(var(--d,0) * 60ms)!important;animation-duration:.6s!important}
  .hero-stage,.hero-title,.atelier,.swipe,.swipe>*{animation:none!important;transform:none!important;opacity:1!important;filter:none!important}
  .js .g-item img{animation:none!important}
  .p-trace{display:none}
  .cut-cloth,.cut-draft,.cut-meas{display:none!important}
  .cut-fill,.cut-fill-in,.cut-vip,.cut-vip-st{transform:none!important}
}

/* ---------- theme switch: circular reveal from the moon button ---------- */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:vtReveal .65s cubic-bezier(.22,.8,.24,1)}
@keyframes vtReveal{from{clip-path:circle(0 at var(--vx,50%) var(--vy,0))}to{clip-path:circle(150vmax at var(--vx,50%) var(--vy,0))}}