/* ==========================================================================
   فيرتكال | site.css
   Ink + ice + mist. Jabaya for display, Tajarib for reading.
   Mobile first. Logical properties wherever direction matters.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:"Jabaya";src:url("../fonts/jabaya-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Jabaya";src:url("../fonts/jabaya-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Jabaya";src:url("../fonts/jabaya-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Tajarib";src:url("../fonts/tajarib-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Tajarib";src:url("../fonts/tajarib-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ink:#032F3C;--ink-2:#1A424F;--ice:#C4F9FF;--mist:#EAF4FC;--mist-2:#D8E5ED;--paper:#F7FBFE;
  --f-display:"Jabaya","Segoe UI","Noto Sans Arabic",system-ui,sans-serif;
  --f-body:"Tajarib","Segoe UI","Noto Sans Arabic",system-ui,sans-serif;
  --wrap:1200px;--gutter:clamp(20px,4.5vw,44px);
  --r-lg:28px;--r:22px;--r-sm:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --header-h:68px;
  --measure:36rem; /* longest comfortable paragraph: about 70 characters a line at the body size */
  /* default tone = mist */
  --bg:var(--mist);--fg:var(--ink);--accent:var(--ink);
  --btn-bg:var(--ink);--btn-fg:var(--ice);
  --line:var(--mist-2);--card:var(--paper);
  --soft:#1F4150;--muted:#3A5A67;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px);scroll-padding-bottom:96px}
/* the bottom padding keeps a focused link scrolled clear of the floating whatsapp button (52px high, 16px from the edge) */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--mist);color:var(--ink);font:500 clamp(1.125rem,1.04rem + .4vw,1.25rem)/1.9 var(--f-body);
  font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
ul,ol{padding:0}
a{color:inherit}
b,strong{font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--ice);color:var(--ink)}
.skip{position:absolute;inset-inline-start:12px;top:-80px;z-index:100;background:var(--ice);color:var(--ink);padding:10px 18px;border-radius:12px;font:700 1rem var(--f-display);text-decoration:none}
.skip:focus{top:12px}
.skip:focus-visible{outline-color:var(--ice);box-shadow:0 0 0 3px var(--ink)}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.num{font-family:var(--f-display);font-weight:800}
.small{font-size:.95rem;line-height:1.8;color:var(--muted)}
.h3{font:800 clamp(1.3rem,1.15rem + .6vw,1.6rem)/1.45 var(--f-display);margin-bottom:.6em}
bdi[dir=ltr]{unicode-bidi:isolate}

/* ---------- section tones ---------- */
.sec{position:relative;padding-block:clamp(56px,8vw,112px);overflow:hidden;background:var(--bg);color:var(--fg)}
.sec--ink{--bg:var(--ink);--fg:var(--mist);--accent:var(--ice);--btn-bg:var(--ice);--btn-fg:var(--ink);
  --line:rgba(196,249,255,.24);--card:var(--ink-2);--soft:#D3E6EC;--muted:#A9C8D1}
.sec--mist{--bg:var(--mist)}
.sec--paper{--bg:var(--paper);--card:var(--mist)}
.sec--white{--bg:#fff;--card:var(--paper)}
.sec--mist+.sec--mist{padding-top:0}
.sec--paper+.sec--paper{padding-top:0}

/* ---------- headings of sections ---------- */
.sec__head{max-width:46rem;margin-bottom:clamp(32px,5vw,56px)}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__title{font:900 clamp(1.9rem,1.25rem + 2.7vw,3.1rem)/1.32 var(--f-display)}
.sec__title--sm{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem)}
.sec__line{margin-top:.5em;font-size:clamp(1.1rem,1.04rem + .3vw,1.3rem);color:var(--soft)}
.sec__more{margin-top:clamp(28px,4vw,44px)}
.tag{display:inline-block;margin-bottom:16px;padding:.1em 1em .15em;border:2px solid currentColor;border-radius:99px;font:700 .95rem/1.7 var(--f-body)}
.tag--ice{background:var(--ice);color:var(--ink);border-color:var(--ice)}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:.5em 1.7em;
  border:2px solid transparent;border-radius:99px;font:700 1.1rem/1.3 var(--f-display);text-decoration:none;text-align:center;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s,color .2s,border-color .2s}
.btn .ic{width:1.35em;height:1.35em;flex:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(3,47,60,.55)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn--ink{background:var(--ink);color:var(--ice)}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor}
.btn--ghost:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn--pkg{width:100%;gap:.5em;background:var(--ink);color:var(--ice);font-size:1.02rem;padding-inline:.9em}
.btn--block{width:100%}
.more{display:inline-flex;align-items:center;gap:.55em;padding-block:.35em;border-bottom:2px solid currentColor;
  font:700 1.08rem/1.5 var(--f-display);text-decoration:none;color:inherit}
.more .ic{width:1.25em;height:1.25em;transition:transform .25s var(--ease)}
.more:hover .ic{transform:translateX(-5px)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--mist);
  --accent:var(--ice);--btn-bg:var(--ice);--btn-fg:var(--ink);--line:rgba(196,249,255,.24);--fg:var(--mist);--bg:var(--ink)}
.header__in{display:flex;align-items:center;gap:14px;min-height:var(--header-h)}
.brand{display:inline-flex;color:var(--ice);flex:none;border-radius:8px}
.brand__logo{width:clamp(96px,26vw,128px);height:auto}
.nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,38px);margin-inline-start:clamp(8px,3vw,48px)}
.nav a{position:relative;padding:.35em .05em;font:700 1.08rem/1.5 var(--f-display);text-decoration:none;color:var(--mist)}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:3px;border-radius:3px;background:var(--ice);transform:scaleX(0);transition:transform .25s var(--ease)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.header__cta{margin-inline-start:auto;min-height:46px;padding:.3em 1.35em;font-size:1rem}
.site-header--min .header__cta{margin-inline-start:auto}
.nav-toggle{display:none;align-items:center;gap:.5em;min-height:46px;padding:.2em .9em;background:transparent;color:var(--mist);
  border:2px solid rgba(196,249,255,.45);border-radius:99px;font:700 .98rem var(--f-display);cursor:pointer}
.nav-toggle .ic{width:1.35em;height:1.35em}
.nav-toggle>span{display:inline-flex;align-items:center;gap:.45em}
.nav-toggle__close{display:none!important}
.is-open .nav-toggle__open{display:none!important}
.is-open .nav-toggle__close{display:inline-flex!important}

@media (max-width:899.98px){
  .js .nav-toggle{display:inline-flex}
  .js .nav{display:none;position:absolute;inset-inline:0;top:100%;flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:8px var(--gutter) 28px;background:var(--ink-2);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -12px rgba(1,20,27,.5)}
  .js .is-open .nav{display:flex}
  .js .nav a{padding:.7em 0;border-bottom:1px solid var(--line);font:800 1.5rem/1.4 var(--f-display)}
  .js .nav a::after{display:none}
  .js .nav a[aria-current=page]{color:var(--ice)}
  .no-js-wrap{display:none}
  html:not(.js) .header__in{flex-wrap:wrap;padding-block:10px}
  html:not(.js) .nav{order:5;width:100%;flex-wrap:wrap;margin:0}
}
@media (max-width:419.98px){
  .nav-toggle__open>span,.nav-toggle__close>span{display:none}
  .nav-toggle{padding-inline:.7em}
  .header__cta{padding-inline:1.05em}
}

/* ---------- caption highlight ---------- */
.cap{display:inline-block;padding:0 .26em .08em;margin-inline:.04em;border-radius:.2em;background:var(--ice);color:var(--ink);
  transform:rotate(-2.4deg);line-height:1.22}
.sec--mist .cap,.sec--paper .cap{background:var(--ink);color:var(--ice)}

/* ---------- brand curves (decoration) ---------- */
.curve{position:absolute;pointer-events:none;height:auto;max-width:none;fill:currentColor}

/* ---------- frame: the vertical video unit ---------- */
/* Every length inside is in cqw (1% of the frame width), so the frame scales as one piece.
   Poster tones stand in for the real video until its file is added. The ف eye (with the play triangle)
   is the brand curve zoomed in: --ex/--ey place the eye, --cw sets the zoom, --cr the tilt. */
.frame{position:relative;width:100%;aspect-ratio:9/16;container-type:inline-size;--bezel:var(--accent);
  --p-bg:#032F3C;--p-fg:#C4F9FF;--p-curve:#14495A;--ex:60cqw;--ey:118cqw;--cw:400cqw;--cr:0deg}
.frame--a{--p-bg:#032F3C;--p-fg:#C4F9FF;--p-curve:#14495A;--ex:56cqw;--ey:96cqw;--cw:390cqw;--cr:-8deg}
.frame--b{--p-bg:#C4F9FF;--p-fg:#032F3C;--p-curve:#A3E6F0;--ex:44cqw;--ey:92cqw;--cw:340cqw;--cr:8deg}
.frame--c{--p-bg:#1A424F;--p-fg:#EAF4FC;--p-curve:#27596A;--ex:58cqw;--ey:100cqw;--cw:430cqw;--cr:12deg}
.frame--d{--p-bg:#D8E5ED;--p-fg:#032F3C;--p-curve:#F3F9FD;--ex:48cqw;--ey:94cqw;--cw:360cqw;--cr:-12deg}
.frame--big{width:min(100%,330px)}
.frame__screen{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:var(--p-bg);
  border:1.2cqw solid var(--bezel);border-radius:10cqw;box-shadow:0 3cqw 9cqw -2cqw rgba(1,20,27,.45)}
.frame__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--p-bg)}
.frame__poster{position:absolute;inset:0;color:var(--p-fg);overflow:hidden}
.frame__curve{position:absolute;max-width:none;width:var(--cw);height:auto;left:calc(var(--ex) - .887 * var(--cw));top:calc(var(--ey) - .1252 * var(--cw));
  transform:rotate(var(--cr));transform-origin:88.7% 21.9%;fill:var(--p-curve)}
.frame__name{position:absolute;inset-inline:8cqw;top:12cqw;font:900 15.5cqw/1.2 var(--f-display);color:var(--p-fg)}
.frame__cap{position:absolute;inset-inline-start:7cqw;bottom:34cqw;display:grid;gap:2.2cqw;width:56cqw;padding:3.4cqw 4.2cqw 3.6cqw;
  border-radius:3.2cqw;background:var(--p-fg);transform:rotate(-2.4deg)}
.frame__cap i{display:block;height:2.8cqw;border-radius:99px;background:var(--p-bg);opacity:.9}
.frame__cap i+i{width:62%}
.frame__play{display:none;position:absolute;left:50%;top:50%;width:19cqw;height:19cqw;transform:translate(-50%,-62%);place-items:center;
  border-radius:50%;background:var(--p-fg);color:var(--p-bg);box-shadow:0 2cqw 5cqw -1cqw rgba(1,20,27,.4)}
.frame--big .frame__play{display:grid}
.frame__play svg{width:8.5cqw;height:8.5cqw;margin-inline-start:-.6cqw}
.frame__rail{position:absolute;inset-inline-end:4.5cqw;bottom:25cqw;display:flex;flex-direction:column;gap:4.5cqw;color:var(--p-fg)}
.frame__rail i{display:grid;place-items:center;width:11cqw;height:11cqw}
.frame__rail svg{width:8.6cqw;height:8.6cqw;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.frame__bar{position:absolute;inset-inline-start:6cqw;bottom:7cqw;width:60cqw;display:grid;grid-template-columns:10cqw 1fr;column-gap:3cqw;row-gap:2cqw;align-items:center;color:var(--p-fg)}
.frame__bar .av{grid-row:1/span 2;display:block;width:10cqw;height:10cqw;border-radius:50%;border:.8cqw solid currentColor}
.frame__bar b{display:block;height:2.6cqw;border-radius:99px;background:currentColor;opacity:.88}
.frame__bar b+b{width:68%;opacity:.5}
.frame:has(.frame__media) .frame__rail,.frame:has(.frame__media) .frame__bar{display:none}
.frame__todo{position:absolute;left:50%;top:3.6cqw;transform:translateX(-50%);padding:.6cqw 3cqw;border-radius:99px;background:#FFE9A8;color:#3d2c00;
  font:700 4.2cqw/1.7 var(--f-body);white-space:nowrap;z-index:3;outline:.5cqw dashed #C58A00;outline-offset:.4cqw}
.stage .frame__todo{display:none}

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,7vw,92px) clamp(64px,9vw,116px)}
.hero__curve{width:min(1250px,150vw);inset-inline-start:auto;inset-inline-end:auto;left:-34%;bottom:-48%;color:var(--ink-2);opacity:.5;transform:rotate(-6deg)}
.hero__grid{position:relative;z-index:1;display:grid;gap:clamp(40px,6vw,72px);align-items:center}
@media (min-width:960px){.hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.hero__h1{font:900 clamp(2.55rem,1.15rem + 5.4vw,4.9rem)/1.28 var(--f-display);margin-bottom:.4em}
.hero__sub{max-width:33em;font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);line-height:1.85;color:var(--soft)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:clamp(26px,3.5vw,38px)}
.hero__price{margin-top:22px;font-size:1.02rem;color:var(--muted)}
.hero__price .num{color:var(--accent);font-size:1.12em;font-weight:900} /* الوزن 900 محمّل مسبقًا: لا يتبدّل الخط بعد أول رسم فلا تنتقل الكلمات بين السطور */
.hero--stores .hero__h1{font-size:clamp(2.3rem,1.1rem + 4.4vw,4.1rem)}
.hero--stores .tag{margin-bottom:20px}

/* reassurance list right under the first button: four terms of the offer, read in one glance */
.assure{list-style:none;margin:clamp(26px,3.4vw,36px) 0 0;padding:20px 0 0;max-width:38rem;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
.assure li{display:flex;align-items:flex-start;gap:10px;font-weight:700;font-size:.95rem;line-height:1.65;color:var(--soft)}
.assure .ic{flex:none;width:21px;height:21px;margin-top:.15em;color:var(--accent);stroke-width:2.6}
.assure li>span{text-wrap:balance}

.stage{position:relative;display:flex;align-items:flex-end;justify-content:center;width:min(100%,660px);margin-inline:auto;padding-block-end:3%}
@media (min-width:960px){.stage:not(.stage--one){width:min(112%,680px);margin-inline:0 auto}}
.stage--one{width:min(80%,310px)}
.stage__slot{flex:none;width:33%;transform:translateY(var(--ty,0)) rotate(var(--rot,0deg));transform-origin:50% 100%}
.stage__slot--main{width:40%;position:relative;z-index:2}
.stage__slot--side{--ty:7%;margin-inline:-2.5%}
.stage__slot--side:first-child{--rot:5deg}
.stage__slot--side:last-child{--rot:-5deg}
.stage--one .stage__slot--main{width:100%}
.stage .frame{animation:rise .95s var(--ease) both;animation-delay:calc(var(--i) * 120ms + 120ms)}
@keyframes rise{from{opacity:0;transform:translateY(9%)}to{opacity:1;transform:none}}

/* ---------- works ---------- */
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}
@media (min-width:760px){.works{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 26px}}
.work{position:relative}
.work .frame{transition:transform .4s var(--ease)}
.work:hover .frame,.work:focus-within .frame{transform:translateY(-8px)}
.work__meta{padding-top:16px}
.work__name{font:800 clamp(1.15rem,1.05rem + .5vw,1.45rem)/1.35 var(--f-display)}
.work__type{margin:.1em 0 .5em;font-size:.98rem;line-height:1.7;color:var(--muted)}
.work__go{display:inline-flex;align-items:center;gap:.5em;font:700 1rem/1.5 var(--f-display);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.4em}
.work__go::after{content:"";position:absolute;inset:0}
.work__go .ic{width:1.2em;height:1.2em;transition:transform .25s var(--ease)}
.work:hover .work__go .ic{transform:translateX(-5px)}

/* ---------- stages (home + stores) ---------- */
.st-list{list-style:none;margin:0;display:grid;gap:0}
.st{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;row-gap:.2em;align-items:start;padding-block:26px;border-top:1px solid var(--line)}
.st:last-child{border-bottom:1px solid var(--line)}
.st__n{grid-row:1/span 4;font:900 clamp(3rem,10vw,4.2rem)/1 var(--f-display);color:var(--accent);min-width:1.05em}
.st__t{font:800 clamp(1.4rem,1.2rem + .8vw,1.75rem)/1.4 var(--f-display)}
.st__p{color:var(--soft);font-size:1.05rem;line-height:1.9}
.st .stamp{justify-self:start;margin-top:.8em}
.st-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;margin-top:clamp(32px,4vw,48px)}
.st-foot__line{font:800 clamp(1.25rem,1.1rem + .7vw,1.65rem)/1.5 var(--f-display);color:var(--accent)}
@media (min-width:960px){
  .st-list{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:0}
  .st{display:block;padding:34px 22px 8px;border-top:0;border-bottom:0!important;border-inline-start:1px solid var(--line)}
  .st:first-child{padding-inline-start:0;border-inline-start:0}
  .st:last-child{padding-inline-end:0}
  .st::before{content:"";position:absolute;top:-8px;inset-inline-start:22px;width:15px;height:15px;transform:rotate(45deg);background:var(--bg);border:2px solid var(--accent)}
  .st:first-child::before{inset-inline-start:0}
  .st:has(.stamp)::before{background:var(--accent)}
  .st-list{position:relative;border-top:1px solid var(--line);padding-top:0}
  .st__n{display:block;font-size:clamp(3.2rem,4.4vw,4.6rem);margin-bottom:.12em}
  .st__p{margin-top:.35em;font-size:1rem;line-height:1.85}
}
/* the stage list is on its own row: the ink section background drives the diamond fill */
.stages{--bg:var(--ink)}

/* approval stamp: a recurring device, it marks the points where the client decides */
.stamp{display:inline-flex;align-items:center;gap:.4em;padding:.12em .85em .2em .7em;border:2px solid var(--accent);border-radius:8px;color:var(--accent);
  font:800 .98rem/1.6 var(--f-display);transform:rotate(-4deg)}
.stamp .ic{width:1.15em;height:1.15em;stroke-width:2.4}
.js .stamp{opacity:0;transform:rotate(-4deg) scale(1.55)}
.js .stamp.is-in{opacity:1;transform:rotate(-4deg) scale(1);transition:opacity .25s ease-out,transform .55s var(--ease)}
.sec--mist .stamp{color:var(--ink)}

/* ---------- why ---------- */
.why{display:grid;gap:0 clamp(32px,6vw,80px)}
@media (min-width:800px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
.why__item{padding-block:26px 34px;border-top:3px solid var(--ink)}
.why__t{font:900 clamp(1.4rem,1.2rem + .9vw,1.85rem)/1.4 var(--f-display);margin-bottom:.35em}
.why__item p{color:var(--soft)}

/* ---------- approval (two cards) ---------- */
.ap-grid{display:grid;gap:20px}
@media (min-width:800px){.ap-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
.ap{position:relative;padding:clamp(26px,3.5vw,40px);padding-inline-end:clamp(84px,9vw,110px);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.ap__seal{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--ice);color:var(--ink)}
.ap__seal .ic{width:26px;height:26px;stroke-width:2.6}
.ap .ap__seal{position:absolute;top:clamp(22px,3vw,34px);inset-inline-end:clamp(22px,3vw,34px)}
.ap__when{display:block;margin-bottom:.2em;font:700 .98rem/1.6 var(--f-body);color:var(--accent)}
.ap__t{font:900 clamp(1.6rem,1.3rem + 1.2vw,2.2rem)/1.35 var(--f-display);margin-bottom:.3em}
.ap p{color:var(--soft)}
.ap-close{margin-top:clamp(28px,4vw,44px);font:800 clamp(1.25rem,1.1rem + .8vw,1.8rem)/1.6 var(--f-display);color:var(--accent);max-width:40rem}

/* ---------- packages ---------- */
.pkgs{display:grid;gap:34px 20px;padding-top:14px}
@media (min-width:700px){.pkgs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.pkgs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pkg{position:relative;display:flex;flex-direction:column;padding:30px 26px 26px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg)}
.pkg>*{order:5}
.pkg__tag{position:absolute;top:-16px;inset-inline-start:24px;order:0;padding:.05em 1em .15em;border:2px solid var(--ink);border-radius:99px;background:var(--ice);color:var(--ink);font:800 .95rem/1.7 var(--f-display)}
.pkg__name{order:1;font:900 clamp(1.8rem,1.5rem + 1vw,2.2rem)/1.3 var(--f-display)}
.pkg__size{order:2;font-weight:700;color:var(--muted);line-height:1.7}
.pkg__size span{display:block}
.pkg__price{order:3;margin-top:18px;line-height:1.2}
.pkg__price .num{font-size:clamp(2.5rem,2.1rem + 1.2vw,3.1rem);font-weight:900;letter-spacing:0}
.pkg__price .cur{font:700 1.05rem var(--f-body);margin-inline-start:.2em}
.pkg__price--text .num{font-size:clamp(2rem,1.8rem + .8vw,2.5rem)}
.pkg__per{order:4;margin-top:.2em;color:var(--muted);font-size:1rem}
.pkg__per .num{font-weight:700}
.viz{order:5;margin-top:22px;min-height:178px}
.viz__frames{display:grid;grid-template-columns:repeat(var(--cols),28px);gap:6px;justify-content:start}
.viz__frames i{display:block;height:50px;border-radius:6px;background:currentColor;opacity:.2;position:relative}
.viz__frames i::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-35%,-50%);border-block:4px solid transparent;border-left:6px solid var(--card);opacity:.9}
.viz__faces{display:flex;gap:6px;margin-top:12px}
.viz__faces i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid currentColor}
.viz__faces svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.viz--empty .viz__q{display:grid;place-items:center;width:100%;height:90px;border:2px dashed currentColor;border-radius:16px;opacity:.45;position:relative}
.viz--empty .viz__q::before,.viz--empty .viz__q::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.viz--empty .viz__q::before{width:26px;height:3px}
.viz--empty .viz__q::after{width:3px;height:26px}
.pkg__desc{order:6;margin-top:6px;font-size:1.02rem;line-height:1.85;color:var(--soft)}
.pkg .btn{order:7;margin-top:auto}
.pkg__desc+.btn{margin-top:22px}
.pkg--rec{background:var(--ink);color:var(--mist);border-color:var(--ink);--soft:#D3E6EC;--muted:#A9C8D1;--card:var(--ink);--accent:var(--ice)}
.pkg--rec .btn--pkg{background:var(--ice);color:var(--ink)}
.pkg--rec .viz__frames i{opacity:.32}
.pkg--custom{background:transparent;border:2px dashed var(--ink)}
.pkgs--sum .viz{min-height:0}
.pkgs--sum .pkg{padding-bottom:28px}
.pkgs__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(32px,4vw,48px)}
.pkgs__notes{margin-top:clamp(28px,4vw,40px);max-width:var(--measure);display:grid;gap:.5em}
.pkgs__notes strong{font:800 1.3rem/1.6 var(--f-display)}
.pkgs__sum{color:var(--soft)}
.pkgs__asof{font-size:.95rem;color:var(--muted);white-space:nowrap}

/* ---------- banner ---------- */
.banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;padding:clamp(28px,4.5vw,52px);
  background:var(--ink);color:var(--mist);border-radius:var(--r-lg);--soft:#D3E6EC;--accent:var(--ice)}
.banner__t{font:900 clamp(1.5rem,1.25rem + 1.2vw,2.1rem)/1.4 var(--f-display);margin-bottom:.2em}
.banner p{color:var(--soft);max-width:38rem}
.banner .btn--ink{background:var(--ice);color:var(--ink)}
.banner--plain{background:transparent;color:var(--ink);border:2px solid var(--ink);--soft:var(--soft);--accent:var(--ink)}
.banner--plain p{color:var(--soft)}
.sec--mist .banner--plain{--soft:#2B4B58}

/* ---------- cards, lists ---------- */
.two{display:grid;gap:22px}
@media (min-width:800px){.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
.card{padding:clamp(26px,3.5vw,38px);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.card--plain{background:transparent;border:2px dashed var(--ink)}
.card p{color:var(--soft)}
.card .more{margin-top:1em;color:var(--ink)}
.card__note{margin-top:1.4em;padding-top:1.2em;border-top:2px solid var(--ink);font:800 1.2rem/1.7 var(--f-display);color:var(--ink)!important}
.check{list-style:none;display:grid;gap:14px}
.check li{display:flex;align-items:flex-start;gap:14px;line-height:1.75}
.check .ic{flex:none;width:28px;height:28px;margin-top:.1em;padding:5px;border-radius:50%;background:var(--ink);color:var(--ice);stroke-width:2.6}
.check .dia{flex:none;width:14px;height:14px;margin-top:.62em;color:var(--ink)}
.sec--ink .check .ic{background:var(--ice);color:var(--ink)}
.sec--ink .check .dia{color:var(--ice)}

/* ---------- faq ---------- */
.faq-grid{display:grid}
.faq-grid>.sec__head{margin-bottom:clamp(24px,4vw,36px)}
.faq-ask{display:grid;justify-items:start;gap:14px;margin-top:clamp(30px,4vw,44px)}
.faq-ask__t{font:800 clamp(1.2rem,1.1rem + .5vw,1.45rem)/1.5 var(--f-display)}
@media (min-width:960px){
  .faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);grid-template-rows:auto 1fr auto;column-gap:clamp(40px,6vw,88px);
    grid-template-areas:"head list" "ask list" ". more"}
  .faq-grid>.sec__head{grid-area:head;margin-bottom:0}
  .faq-grid>.faq{grid-area:list}
  .faq-grid>.faq-ask{grid-area:ask;margin-top:32px;align-self:start}
  .faq-grid>.sec__more{grid-area:more;margin-top:28px}
}
.faq__item{border-bottom:1.5px solid var(--line)}
.faq__item:first-child{border-top:1.5px solid var(--line)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;list-style:none;
  font:800 clamp(1.15rem,1.05rem + .5vw,1.4rem)/1.55 var(--f-display)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__ic{position:relative;flex:none;display:grid;place-items:center;width:38px;height:38px;border:2px solid currentColor;border-radius:50%}
.faq__ic .ic{width:18px;height:18px;grid-area:1/1;stroke-width:2.4}
.faq__ic .ic--minus{display:none}
.faq__item[open] .ic--plus{display:none}
.faq__item[open] .ic--minus{display:block}
.faq__item[open] .faq__ic{background:var(--ink);color:var(--ice);border-color:var(--ink)}
.faq__a{padding-bottom:24px;max-width:var(--measure);color:var(--soft)}

/* ---------- cta band ---------- */
.cta-band{position:relative;isolation:isolate;text-align:center;padding-block:clamp(8px,2vw,24px)}
.cta-band .sec__title{font-size:clamp(2rem,1.3rem + 3vw,3.6rem);max-width:20ch;margin-inline:auto}
.cta-band .sec__line{max-width:36rem;margin-inline:auto}
.cta-band__curve{z-index:-1;width:min(1100px,150%);inset-inline-start:50%;bottom:-62%;transform:translateX(50%) rotate(-7deg);color:var(--ice);opacity:.07}
.cta-band__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 20px;margin-top:clamp(26px,4vw,40px)}
.cta-sec{padding-block:clamp(64px,9vw,128px)}

/* ---------- inner page hero ---------- */
.page-hero{padding-block:clamp(48px,7vw,92px) clamp(52px,7vw,92px)}
.page-hero>.wrap{position:relative;z-index:1}
.page-hero__curve{width:min(1100px,150vw);inset-inline-end:auto;inset-inline-start:-18%;top:-16%;color:var(--ink-2);opacity:.55;transform:rotate(-8deg)}
.page-hero__h1{max-width:17em;font:900 clamp(2.2rem,1.2rem + 4.2vw,4rem)/1.32 var(--f-display)}
.page-hero__sub{max-width:38rem;margin-top:.8em;font-size:clamp(1.12rem,1.05rem + .4vw,1.36rem);line-height:1.85;color:var(--soft)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.6em;margin-bottom:22px;font-size:.98rem;color:var(--muted)}
.crumbs a{text-decoration:none;border-bottom:1.5px solid transparent}
.crumbs a:hover{border-color:currentColor}
.work-hero__grid{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.work-hero__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px}}
.work-hero__media{justify-self:center;width:100%}
.work-hero .hero__cta{margin-top:28px}

/* ---------- clips: a cover with a play mark, swapped for the video (a light copy from the site) on press ---------- */
.frame--clip .frame__play{display:grid;transition:transform .25s var(--ease)}
.frame__hit{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:8.8cqw;
  background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.frame__hit:hover~.frame__play{transform:translate(-50%,-62%) scale(1.08)}
.frame__hit:focus-visible{outline:3px solid #fff;outline-offset:-8px;box-shadow:inset 0 0 0 11px rgba(3,47,60,.85)}
.frame__vid{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:#000}
.frame__fail{position:absolute;inset-inline:0;bottom:0;z-index:3;padding:3cqw 5cqw 4cqw;background:rgba(3,47,60,.94);color:#fff;font:700 max(12px,4.2cqw)/1.6 var(--f-body);text-align:center}
.clips-sec{padding-block:clamp(44px,6vw,80px);text-align:center}
.clips-sec .h3{margin-bottom:clamp(20px,3vw,32px)}
.clips{--g:clamp(16px,3vw,32px);list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g)}
.clips li{flex:0 0 calc((100% - var(--g)) / 2)}
@media (min-width:640px){.clips li{flex-basis:210px}}
/* four tiles sit two by two until the row of four fits (about 1040px), never three and one */
@media (min-width:640px) and (max-width:1039px){.clips{max-width:calc(421px + var(--g));margin-inline:auto}}
.clips .frame{transition:transform .4s var(--ease)}
.clips li:hover .frame,.clips li:focus-within .frame{transform:translateY(-6px)}
.work-body{display:grid;gap:40px}
@media (min-width:800px){.work-body{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}}
.work-body p{color:var(--soft)}
.pn{display:grid;gap:16px;margin-top:clamp(44px,6vw,72px)}
@media (min-width:640px){.pn{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn__a{display:flex;flex-direction:column;gap:2px;padding:22px 26px;border:2px solid var(--ink);border-radius:var(--r);text-decoration:none;transition:background-color .2s,color .2s}
.pn__a:hover{background:var(--ink);color:var(--ice)}
.pn__l{font-size:.95rem;opacity:.8}
.pn__n{font:900 1.6rem/1.4 var(--f-display)}
.pn__a--prev{text-align:end}

/* ---------- packages page: strips ---------- */
.approval-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.approval-strip p{max-width:44rem;margin-top:.5em;color:var(--soft)}

/* ---------- process page ---------- */
.steps>.wrap{position:relative;z-index:1}
.steps__curve{width:min(980px,130%);left:-24%;top:6%;color:var(--mist-2);opacity:.8;transform:rotate(-9deg)}
.ps-list{list-style:none;max-width:52rem;display:grid;gap:0}
.ps{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr);column-gap:22px;padding-bottom:34px}
.ps::before{content:"";position:absolute;top:64px;bottom:4px;inset-inline-start:29px;width:2px;background:rgba(3,47,60,.22)}
.ps:last-child{padding-bottom:0}
.ps:last-child::before{display:none}
.ps__n{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--ink);color:var(--ice);font:900 1.6rem/1 var(--f-display)}
.ps--appr .ps__n{background:var(--ice);color:var(--ink);box-shadow:0 0 0 3px var(--ink) inset}
.ps__t{display:flex;flex-wrap:wrap;align-items:center;gap:.4em 1em;padding-top:.5em;font:800 clamp(1.4rem,1.2rem + .8vw,1.75rem)/1.4 var(--f-display)}
.ps__b p{margin-top:.2em;color:var(--soft)}
.points{list-style:none;display:grid;gap:16px;margin-top:clamp(28px,4vw,44px)}
@media (min-width:760px){.points{grid-template-columns:repeat(2,minmax(0,1fr))}}
.points li{display:flex;align-items:center;gap:18px;padding:22px 26px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.points p{font:800 clamp(1.2rem,1.1rem + .5vw,1.5rem)/1.55 var(--f-display)}

/* ---------- about ---------- */
.about{max-width:56rem}
.about__lead{font:700 clamp(1.4rem,1.05rem + 1.5vw,2.05rem)/1.75 var(--f-display)}
.about__rule{display:inline-block;margin:26px 0 clamp(36px,5vw,56px);padding:.35em 1em .45em;border-radius:var(--r-sm);background:var(--ink);color:var(--ice);
  font:900 clamp(1.3rem,1.1rem + 1vw,1.8rem)/1.6 var(--f-display)}
.about .two{margin-bottom:28px}
.about__story{margin-bottom:28px}
.about__story p{max-width:var(--measure)}
.about__facts{margin-bottom:28px}
.facts{display:grid}
.facts>div{display:grid;gap:.1em 28px;padding-block:14px;border-top:1px solid var(--line)}
.facts>div:first-child{padding-top:0;border-top:0}
.facts>div:last-child{padding-bottom:0}
.facts dt{font:800 1.05rem/1.8 var(--f-display);color:var(--ink)}
.facts dd{color:var(--soft)}
@media (min-width:760px){.facts>div{grid-template-columns:11.5rem minmax(0,1fr);align-items:baseline}}
.hero__cta--mist{margin-top:clamp(28px,4vw,44px)}

/* ---------- contact ---------- */
.contact{display:grid;gap:clamp(28px,4vw,44px);grid-template-areas:"wa" "form" "other"}
.contact__wa{grid-area:wa}
.contact__form{grid-area:form}
.contact__other{grid-area:other}
@media (min-width:900px){
  .contact{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);grid-template-areas:"wa wa" "form other";align-items:start;column-gap:clamp(36px,5vw,64px)}
}
.contact__wa .btn{min-height:62px;padding-inline:2.2em;font-size:1.2rem}
.banner .contact__num{margin-top:.5em;font:800 1.3rem/1.5 var(--f-display);color:var(--ice)}
.contact__form{padding:clamp(26px,4vw,44px);background:var(--paper);border:1px solid var(--mist-2);border-radius:var(--r-lg)}
.form{margin-top:22px}
.fld{margin-bottom:22px}
.fld label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;font:700 1.05rem/1.6 var(--f-display)}
.req,.opt{font:700 .85rem/1.6 var(--f-body);color:var(--muted)}
.req{color:var(--ink)}
.fld input,.fld select{width:100%;min-height:56px;padding:.55em 1em;background:#fff;border:2px solid #6B8793;border-radius:var(--r-sm);font:500 1.08rem/1.6 var(--f-body);transition:border-color .2s,box-shadow .2s}
.fld input::placeholder{color:#5E7A86;opacity:1}
.fld input:hover,.fld select:hover{border-color:var(--ink-2)}
.fld input:focus,.fld select:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px var(--ice)}
.fld input[dir=ltr]{text-align:start}
.fld.is-invalid input{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.16)}
.fld__note{margin-top:8px;font-size:.95rem;line-height:1.7;color:var(--muted)}
.fld__err{margin-top:8px;color:#9A1B14;font-weight:700;font-size:.98rem;line-height:1.7}
.hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.form__privacy{margin:4px 0 20px;font-size:.98rem;line-height:1.8;color:var(--muted)}
.form__privacy a{color:var(--ink);font-weight:700}
.form__msg{margin-top:18px;padding:16px 20px;border-radius:var(--r-sm);font-weight:700;line-height:1.8}
.form__msg.is-ok{background:#D6F2E2;color:#0D4B2A}
.form__msg.is-err{background:#FBE0DC;color:#8A1710}
.form__msg.is-note{background:#FFE9A8;color:#3d2c00;outline:2px dashed #C58A00;outline-offset:-2px}
.form.is-done .fld,.form.is-done .form__privacy,.form.is-done button[type=submit]{display:none}
.chan{display:grid;gap:22px;align-content:start}
.chan__list{list-style:none;display:grid;gap:18px}
.chan__list li{display:grid;gap:2px;padding-bottom:18px;border-bottom:1.5px solid var(--mist-2)}
.chan__list li:last-child{border-bottom:0}
.chan__list span{font-size:.95rem;color:var(--muted)}
.chan__list a{font:700 1.15rem var(--f-display);text-decoration-thickness:2px;text-underline-offset:.35em}
.chan__list bdi{font:700 1.15rem var(--f-display)}
.chan__list small{font-size:.95rem;color:var(--muted)}

/* ---------- stores: today ---------- */
.today{display:grid;gap:18px}
@media (min-width:800px){.today{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.today__c{padding:clamp(24px,3vw,34px);background:var(--paper);border:1px solid var(--mist-2);border-radius:var(--r)}
.today__c .h3{margin-bottom:.3em}
.today__c p{color:var(--soft)}
.today__close{margin-top:clamp(28px,4vw,44px);font:900 clamp(1.4rem,1.1rem + 1.4vw,2.1rem)/1.5 var(--f-display)}

/* ---------- legal ---------- */
.prose-sec{overflow:visible}
.prose-grid{display:grid;gap:clamp(36px,5vw,56px)}
@media (min-width:960px){.prose-grid{grid-template-columns:minmax(0,48rem) minmax(0,20rem);justify-content:space-between;align-items:start}}
.prose__aside{padding:clamp(24px,3vw,32px);background:var(--paper);border:1px solid var(--mist-2);border-radius:var(--r-lg)}
.prose__aside p{margin-bottom:1.2em;color:var(--soft)}
@media (min-width:960px){.prose__aside{position:sticky;top:calc(var(--header-h) + 28px)}}
.prose{max-width:48rem}
.prose__lead{font-size:1.2rem;color:var(--soft);margin-bottom:1.4em}
.clause{padding-block:26px;border-top:1.5px solid var(--line)}
.clause__t{display:flex;align-items:center;gap:14px;font:800 clamp(1.25rem,1.1rem + .6vw,1.5rem)/1.5 var(--f-display);margin-bottom:.4em}
.clause__n{display:grid;place-items:center;flex:none;width:2em;height:2em;border-radius:50%;background:var(--ink);color:var(--ice);font:900 .9rem/1 var(--f-display)}
.clause p{color:var(--soft)}
.prose p,.prose li{max-width:var(--measure)}
.draft-note{margin-bottom:22px;padding:12px 18px;border-radius:12px;background:#FFE9A8;color:#3d2c00;font-weight:700;line-height:1.7}

/* ---------- 404 ---------- */
.nf-sec{padding-block:clamp(72px,12vw,160px)}
.nf{position:relative;isolation:isolate}
.nf__curve{z-index:-1;width:min(900px,140%);inset-inline-start:-12%;top:-30%;color:var(--ink-2);opacity:.6;transform:rotate(-8deg)}
.nf .hero__cta{margin-top:30px}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--mist);border-top:1px solid rgba(196,249,255,.2);padding-block:clamp(44px,6vw,72px) 40px;
  --accent:var(--ice);--line:rgba(196,249,255,.24);--muted:#A9C8D1}
.footer__grid{display:grid;gap:36px 32px}
@media (min-width:640px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.footer__grid{grid-template-columns:1.3fr .8fr .9fr minmax(240px,1.2fr)}}   /* 240px: the five-icon row (236px) stays on one line */
.footer__about p{margin-top:16px;max-width:20em;color:#D3E6EC;font-size:1.02rem;line-height:1.85}
.footer__h{margin-bottom:.7em;font:800 1.05rem/1.5 var(--f-display);color:var(--ice)}
.footer__h--gap{margin-top:1.4em}
.site-footer ul{list-style:none;display:grid;gap:.4em;font-size:1.02rem;line-height:1.8}
.site-footer a{text-decoration:none;border-bottom:1.5px solid transparent}
.site-footer a:hover{border-bottom-color:currentColor}
.footer__last{margin-top:clamp(32px,5vw,52px);padding-top:22px;border-top:1px solid var(--line);font-size:.95rem;color:var(--muted)}
.footer__min{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 36px}
.footer__links{display:flex;flex-wrap:wrap;gap:8px 26px;font:700 1rem var(--f-display)}
@media (max-width:759.98px){.site-footer{padding-bottom:104px}}
/* touch: footer links are short text, so the hit area grows to 44px without changing how they look */
@media (max-width:820px),(pointer:coarse){
  .site-footer ul{gap:0}
  .site-footer li{display:flex}
  .site-footer li>a{padding-block:.45em;border-bottom:0}
  .footer__links{row-gap:0}
  .footer__links a{display:flex;align-items:center;min-height:44px;border-bottom:0}
  .site-footer li>a:hover,.footer__links a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.3em}
}

/* ---------- social icons ---------- */
/* The glyphs come from the owner's own stock vector set (brand/social-*.svg) and take the colour of the text around them.
   Each link is a 44px box (the touch target) that draws a 40px ring; its name for screen readers is the .sr-only span. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.soc{--soc-fg:var(--ink);--soc-on:var(--mist);list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0}
.soc li{display:block;margin:0;padding:0;border:0}
.soc a{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;color:var(--soc-fg);text-decoration:none}
.soc a::before{content:"";position:absolute;inset:2px;border:1.5px solid var(--soc-fg);border-radius:50%;transition:background-color .2s var(--ease)}
.soc__i{position:relative;width:22px;height:22px;transition:color .2s var(--ease)}
.soc a:focus-visible{border-radius:50%;outline-offset:1px}
@media (hover:hover){
  .soc a:hover{color:var(--soc-on)}
  .soc a:hover::before{background:var(--soc-fg)}
}
.site-footer .soc{--soc-fg:var(--ice);--soc-on:var(--ink);display:flex;gap:4px;margin-top:.9em}
.site-footer .soc li{display:block}
.site-footer .soc a{padding:0;border:0}
.chan__list .soc{margin-top:6px}
.chan__list .soc li{display:block;padding:0;border:0}

/* ---------- floating whatsapp ---------- */
.float-wa{position:fixed;left:16px;bottom:16px;z-index:40;display:inline-flex;align-items:center;gap:.5em;min-height:52px;padding:.2em 1.2em .2em 1em;
  background:var(--ice);color:var(--ink);border:2px solid var(--ink);border-radius:99px;font:800 1.02rem var(--f-display);text-decoration:none;
  box-shadow:0 12px 28px -10px rgba(3,47,60,.6);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.float-wa:hover{transform:translateY(-3px);box-shadow:0 16px 32px -10px rgba(3,47,60,.7)}
.float-wa:focus-visible{outline-color:var(--ice);box-shadow:0 0 0 3px var(--ink),0 12px 28px -10px rgba(3,47,60,.6)}
.float-wa .ic{width:26px;height:26px;stroke-width:2}
.float-wa{--accent:var(--ink)}
.page-contact .float-wa{display:none}

/* ---------- clients wall: the logos of previous clients, three rows that drift (white section) ----------
   Rows are laid out left to right whatever the page direction, which keeps the slide maths plain: each row is one track
   of 2n identical copies of its logos and moves by exactly half its own width, so the end of the slide is the start again.
   Only the first copy of a row carries the names for screen readers; the others are silent twins (aria-hidden).
   A row never wraps: the wall is three lines at every width, on a phone too. Without a script, or for a visitor who prefers
   less motion, only the first copy shows, still, centred when it fits, and swipeable when it is wider than the screen.
   There is no control for the visitor (the owner's decision, 2026-11-10); a visitor who asks for less motion gets them still.
   Each mark sits between margins that ui.client_row measured from its real silhouette (--l, --r), so the space the eye sees
   between any two neighbours is the same, whatever their shapes. --k scales the marks, the spaces and the rows together (phones).
   --ds stretches the time of the slide: on a phone the marks are smaller, so the same time would be slower on the screen, and the
   owner asked for a quicker drift on a narrow screen (36px a second there, 30 on a desktop; ui.MQ_PHONE_SPEED). */
.clients{padding-block:clamp(40px,5vw,72px)}
.clients .sec__head{margin-bottom:clamp(24px,3.6vw,40px)}
.mq{--k:1;--ds:1;--vg:calc(40px*var(--k));display:grid;gap:var(--vg);direction:ltr}
.mq__row{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.mq__row::-webkit-scrollbar{display:none}
.mq__track{display:flex;width:max-content;min-width:100%}
.mq__copy{display:flex;flex:none;margin:0 auto;padding:0;list-style:none}
.mq__copy[aria-hidden=true]{display:none}
.mq__copy li{display:flex;align-items:center;justify-content:center;flex:none;height:calc(56px*var(--k))}
.mq__copy img{flex:none;max-width:none;width:calc(var(--w)*var(--k)*1px);height:calc(var(--h)*var(--k)*1px);
  margin-inline:calc(var(--l)*var(--k)*1px) calc(var(--r)*var(--k)*1px)}
@media (max-width:719.98px){.mq{--k:.84;--ds:.7}}
@keyframes mq-l{to{transform:translateX(-50%)}}
@keyframes mq-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:no-preference){
  .js .mq{--fade:clamp(20px,8vw,140px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
  .js .mq__row{overflow:hidden}
  .js .mq__track{min-width:0;will-change:transform;animation:mq-l calc(var(--dur,90s)*var(--ds,1)) linear infinite}
  .js .mq__row--r .mq__track{animation-name:mq-r}
  .js .mq__copy{margin:0}
  .js .mq__copy[aria-hidden=true]{display:flex}
}

/* ---------- preview only ---------- */
.todo{padding:0 .3em;border-radius:5px;background:#FFE9A8;color:#3d2c00;outline:2px dashed #C58A00;outline-offset:2px;font-style:normal;font-weight:700}
.preview-bar{padding:9px var(--gutter);background:#FFE9A8;color:#3d2c00;text-align:center;font:700 .95rem/1.7 var(--f-body);border-bottom:2px dashed #C58A00}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .stage .frame{animation:none}
  .js .stamp{opacity:1;transform:rotate(-4deg)}
}