/* ==========================================================
   MR TECHNICAL SERVICES — Dubai
   Layout language taken from the Homeasy / Briva reference
   kits: two-colour brand (purple + yellow), utility top bar,
   pill eyebrows, floating badge cards over photography,
   stats bands, plan cards, and a dark booking panel.
   ========================================================== */
:root{
  --pu:#4C1D95;        /* brand purple      */
  --pu-2:#6D28D9;      /* brighter purple   */
  --pu-3:#8B5CF6;      /* light on dark     */
  --pu-d:#2A0E5C;      /* deepest           */
  --tint:#F4F1FC;      /* page tint         */
  --tint-2:#EBE5F9;
  --yl:#FFD429;        /* accent            */
  --yl-2:#FFE894;
  --yl-d:#F2C200;
  --ink:#1A1330;
  --body:#5B5470;
  --mut:#8B84A3;
  --line:#E7E2F3;
  --wa:#25D366;
  --ok:#16A34A;
  /* Archivo carries the headings: an industrial grotesque with real
     weight at 800 and a utility/signage feel that suits a trades company.
     Figtree handles body copy — warmer and rounder, so the page does not
     go cold. Swap either line to retheme the whole site.
     Alternates that also work here: Archivo + Public Sans (more neutral),
     or Barlow + Inter (more condensed, more industrial). */
  --disp:'Archivo',system-ui,sans-serif;
  --f:'Figtree',system-ui,sans-serif;
  --wrap:1200px;
  --r:8px;      /* was 16 */
  --r-lg:10px;  /* was 24 */
  --r-xl:12px;  /* was 32 */
  --sh:0 1px 2px rgba(26,19,48,.06),0 4px 10px -6px rgba(26,19,48,.12);
  --sh-lg:0 2px 4px rgba(26,19,48,.05),0 12px 24px -14px rgba(26,19,48,.28);
  --e:cubic-bezier(.2,.7,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f);background:#fff;color:var(--ink);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
img{max-width:100%;display:block;background:#E4DEF2;color:transparent;font-size:0}
:focus-visible{outline:3px solid var(--pu-2);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

h1,h2,h3,h4{font-family:var(--disp);font-weight:800;letter-spacing:-.035em;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(2.05rem,3.9vw,3.2rem);line-height:1.08;letter-spacing:-.042em}
h2{font-size:clamp(1.62rem,2.9vw,2.4rem);letter-spacing:-.038em}
h3{font-size:1.11rem;font-weight:700;letter-spacing:-.028em}
p{color:var(--body)}

/* pill eyebrow — the reference kits put one above every section */
.eb{display:inline-block;font-family:var(--disp);background:var(--yl);color:var(--ink);font-size:.71rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;padding:8px 16px;border-radius:6px}
.eb.gh{background:rgba(255,255,255,.16);color:#fff}
.eb.so{background:var(--tint-2);color:var(--pu)}
.sec{padding:clamp(56px,6.2vw,96px) 0}
.sh{max-width:640px;margin-bottom:clamp(30px,3.4vw,46px)}
.sh h2{margin-top:16px}
.sh p{margin-top:13px}
.sh.c{margin-left:auto;margin-right:auto;text-align:center}
.sh.r{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap}
.on-d h2,.on-d h3,.on-d h4{color:#fff}
.on-d p{color:#CFC5E6}
.tint{background:var(--tint)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--disp);font-weight:700;
  font-size:.92rem;letter-spacing:-.012em;white-space:nowrap;
  padding:15px 28px;border-radius:6px;border:2px solid transparent;
  transition:background .16s,color .16s,border-color .16s}
.btn svg{width:18px;height:18px;flex:none}
.b-pu{background:var(--pu);color:#fff}
.b-pu:hover{background:var(--pu-2)}
.b-yl{background:var(--yl);color:var(--ink)}
.b-yl:hover{background:var(--yl-d)}
.b-w{background:#fff;color:var(--ink)}
.b-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.b-o:hover{background:#fff;color:var(--pu)}
.b-l{background:#fff;color:var(--ink);border-color:var(--line)}
.b-l:hover{border-color:var(--pu);color:var(--pu)}
.b-wa{background:var(--wa);color:#06331A}
.b-sm{padding:11px 20px;font-size:.86rem}

/* ========== TOP BAR ========== */
/* Yellow utility strip, as in the Briva reference. Text is ink rather
   than inverted light-purple, which had no contrast on yellow. */
.tb{background:var(--yl);color:#4A3F0C;font-size:.8rem;border-bottom:1px solid rgba(76,29,149,.14)}
.tb-in{display:flex;align-items:center;gap:24px;height:42px}
.tb b{color:var(--pu);font-weight:700}
.tb .r{margin-left:auto;display:flex;gap:22px;align-items:center}
.tb a{transition:color .2s}
.tb a:hover{color:var(--pu)}
@media(max-width:900px){.tb{display:none}}

/* ========== HEADER ========== */
.hd{position:sticky;top:0;z-index:90;background:#fff;box-shadow:0 1px 0 var(--line)}
.hd-in{display:flex;align-items:center;gap:22px;height:76px}
.lg{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:1.1rem;
  letter-spacing:-.038em;flex:none}
.lg i{width:40px;height:40px;border-radius:8px;background:var(--pu);color:var(--yl);display:grid;
  place-items:center;font-family:var(--disp);font-size:.78rem;font-weight:800;font-style:normal;letter-spacing:0}
.nv{display:flex;gap:20px;margin-left:10px}
.nv a{font-family:var(--disp);font-size:.89rem;font-weight:600;color:var(--body);letter-spacing:-.012em;
  white-space:nowrap;transition:color .2s}
.nv a:hover{color:var(--pu)}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none}
.hd-t{display:flex;align-items:center;gap:10px}
.hd-t i{width:40px;height:40px;border-radius:50%;background:var(--tint-2);color:var(--pu);display:grid;
  place-items:center;flex:none}
.hd-t i svg{width:17px;height:17px}
.hd-t b{display:block;font-family:var(--disp);font-weight:700;font-size:.95rem;letter-spacing:-.03em;white-space:nowrap}
.hd-t small{display:block;font-size:.72rem;color:var(--mut);line-height:1.3}
.bg{display:none;width:44px;height:44px;border-radius:7px;border:1.5px solid var(--line);
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.bg span{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.bg.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bg.on span:nth-child(2){opacity:0}
.bg.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1200px){
  /* Anchored to the header rather than a fixed 76px offset. The old value
     assumed the header always sat flush to the viewport top, so the panel
     slid under it whenever the admin bar or top bar pushed the header down. */
  .nv{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#fff;padding:6px 22px 20px;
    box-shadow:0 12px 24px -14px rgba(26,19,48,.3);transform:translateY(-140%);
    transition:transform .34s var(--e);z-index:-1}
  .nv.open{transform:none}
  .nv a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .bg{display:flex}.hd-t small{display:none}
}
@media(max-width:640px){.hd-r .btn{display:none}.hd-t b{display:none}}

/* ========== HERO ========== */
.hero{background:var(--tint);position:relative;overflow:hidden;padding:clamp(38px,4.4vw,66px) 0 clamp(50px,5vw,80px)}
.hero .wrap{position:relative;z-index:2}
.hero-g{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(28px,3.6vw,54px);
  align-items:center}
@media(max-width:940px){.hero-g{grid-template-columns:1fr;gap:40px}}
.hero h1{margin-top:18px}
.hero h1 em{font-style:normal;color:var(--pu);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.04em;height:.32em;
  background:var(--yl);z-index:-1;border-radius:3px}
.hero-p{margin-top:20px;font-size:1.05rem;max-width:47ch}
.hero-b{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.hero-ch{margin-top:26px;display:flex;gap:6px 26px;flex-wrap:wrap;
  border-top:1px solid #DCD4EE;padding-top:20px}
.hero-ch li{display:flex;align-items:center;gap:8px;font-size:.87rem;font-weight:600;color:var(--body)}
.hero-ch i{color:var(--pu);display:flex;flex:none}
.hero-ch i svg{width:16px;height:16px}

.hero-im{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3.9;background:var(--pu);
  box-shadow:var(--sh-lg)}
.hero-im>img{width:100%;height:100%;object-fit:cover}
/* floating badge cards, straight from the reference kits */
.fb{position:absolute;background:#fff;border-radius:var(--r);box-shadow:var(--sh-lg);padding:14px 16px}
.fb-1{left:16px;top:18px;display:flex;align-items:center;gap:10px}
.fb-1 i{width:34px;height:34px;border-radius:6px;background:var(--yl);display:grid;place-items:center;flex:none}
.fb-1 i svg{width:17px;height:17px;color:var(--ink)}
.fb-1 b{display:block;font-size:.84rem;font-weight:800;line-height:1.2}
.fb-1 small{font-size:.73rem;color:var(--mut)}
.fb-2{right:16px;bottom:18px;min-width:172px}
.fb-2 b{display:block;font-family:var(--disp);font-size:1.55rem;font-weight:800;letter-spacing:-.048em;line-height:1;color:var(--pu)}
.fb-2 small{display:block;font-size:.75rem;color:var(--mut);margin-top:3px;line-height:1.35}
.avs{display:flex;margin-top:10px}
.avs img{width:30px;height:30px;border-radius:50%;border:2px solid #fff;object-fit:cover;margin-left:-9px}
.avs img:first-child{margin-left:0}
.avs span{width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:var(--pu);color:#fff;
  font-size:.62rem;font-weight:800;display:grid;place-items:center;margin-left:-9px}
@media(max-width:520px){.fb-1,.fb-2{position:static;margin:0;box-shadow:none}
  .hero-im{aspect-ratio:4/3.2}}

/* ========== MARQUEE ========== */
.mq{background:var(--tint);overflow:hidden;padding:6px 0 26px}
.mq-in{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:run 38s linear infinite}
.mq span{font-family:var(--disp);font-size:clamp(1.7rem,4vw,3rem);font-weight:800;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.4px rgba(76,29,149,.22);display:flex;align-items:center;gap:44px}
.mq span::after{content:"✦";-webkit-text-stroke:0;color:var(--yl);font-size:.7em}
@keyframes run{to{transform:translateX(-50%)}}

/* ========== SERVICE GRID ========== */
/* brands we actually service — text marks, as on the original site */
.brands{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.brands-in{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);flex-wrap:wrap;
  justify-content:center;padding:26px 0}
.brands-in>p{font-size:.79rem;font-weight:700;color:var(--mut);letter-spacing:.02em;white-space:nowrap;
  border-right:1px solid var(--line);padding-right:clamp(16px,2.2vw,30px)}
.brands-in span{font-family:var(--disp);font-size:.95rem;font-weight:700;letter-spacing:.05em;color:#9E96B4;white-space:nowrap;
  transition:color .2s}
.brands-in span:hover{color:var(--pu)}
@media(max-width:700px){.brands-in>p{border-right:0;width:100%;text-align:center;padding:0}
  .brands-in span{font-size:.88rem}}

.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:940px){.sg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sg{grid-template-columns:1fr}}
.sc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--sh);
  transition:box-shadow .22s,border-color .22s}
.sc:hover{border-color:var(--pu);box-shadow:var(--sh-lg)}
.sc i{width:52px;height:52px;border-radius:8px;background:var(--tint-2);color:var(--pu);display:grid;
  place-items:center;margin-bottom:17px;transition:background .22s,color .22s}
.sc:hover i{background:var(--pu);color:var(--yl)}
.sc i svg{width:25px;height:25px}
.sc h3{margin-bottom:8px}
.sc p{font-size:.92rem}
.sc .go{display:inline-flex;align-items:center;gap:7px;margin-top:15px;font-size:.87rem;font-weight:700;color:var(--pu)}
.sc:hover .go{gap:12px}
/* the yellow "not sure?" card the reference kits both use */
.sc.yl{background:var(--yl);border-color:var(--yl);display:flex;flex-direction:column;justify-content:center}
.sc.yl h3{font-size:1.24rem;margin-bottom:10px}
.sc.yl p{color:#5A4A00;font-size:.92rem}
.sc.yl .btn{margin-top:18px;align-self:flex-start}

/* ========== ABOUT: photo + vision/mission ========== */
.ab{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(26px,3.4vw,48px);
  align-items:center}
@media(max-width:940px){.ab{grid-template-columns:1fr}}
.ab-im{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3.4;position:relative;box-shadow:var(--sh-lg)}
.ab-im img{width:100%;height:100%;object-fit:cover}
.ab-bd{position:absolute;left:18px;bottom:18px;background:var(--pu);color:#fff;border-radius:var(--r);
  padding:14px 18px}
.ab-bd b{display:block;font-family:var(--disp);font-size:1.65rem;font-weight:800;letter-spacing:-.048em;line-height:1;color:var(--yl)}
.ab-bd small{font-size:.74rem;opacity:.85}
.vm{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;margin-bottom:14px;
  box-shadow:var(--sh)}
.vm h4{font-size:1.02rem;margin-bottom:7px;display:flex;align-items:center;gap:10px}
.vm h4 i{width:32px;height:32px;border-radius:6px;background:var(--yl);color:var(--ink);display:grid;
  place-items:center;flex:none}
.vm h4 i svg{width:16px;height:16px}
.vm p{font-size:.92rem}
.ticks{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:18px}
@media(max-width:560px){.ticks{grid-template-columns:1fr}}
.ticks li{display:flex;align-items:flex-start;gap:9px;font-size:.87rem;font-weight:600}
.ticks svg{width:18px;height:18px;color:var(--ok);flex:none;margin-top:3px}

/* ========== STATS ========== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.stats>div{background:#fff;padding:30px 20px;text-align:center}
.stats b{display:block;font-family:var(--disp);font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.05em;
  line-height:1;color:var(--pu)}
.stats small{display:block;margin-top:8px;font-size:.83rem;color:var(--mut);font-weight:600}
@media(max-width:680px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ========== WHY CHOOSE ========== */
.wc{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(26px,3.4vw,50px);
  align-items:center}
@media(max-width:940px){.wc{grid-template-columns:1fr}}
.wc-im{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3.6;box-shadow:var(--sh-lg)}
.wc-im img{width:100%;height:100%;object-fit:cover}
.wl{margin-top:22px}
.wl li{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.wl li:last-child{border-bottom:0}
.wl i{width:40px;height:40px;border-radius:7px;background:var(--tint-2);color:var(--pu);display:grid;
  place-items:center;flex:none}
.wl i svg{width:19px;height:19px}
.wl b{display:block;font-weight:700;font-size:1rem;margin-bottom:3px}
.wl p{font-size:.89rem;line-height:1.5}

/* ========== CTA BAND with photo ========== */
.cta{position:relative;border-radius:var(--r-xl);overflow:hidden;color:#fff;text-align:center;
  padding:clamp(44px,5.4vw,80px) clamp(22px,4vw,60px)}
.cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,var(--pu-d) 8%,rgba(76,29,149,.9) 62%,rgba(109,40,217,.82))}
.cta>*{position:relative;z-index:2}
.cta h2{color:#fff;max-width:20ch;margin:16px auto 0}
.cta p{color:#D6CBEF;margin:14px auto 0;max-width:52ch}
.cta .b{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.cta .ch{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.cta .ch li{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border-radius:7px;
  padding:10px 15px;font-size:.83rem;font-weight:600}
.cta .ch svg{width:16px;height:16px;color:var(--yl)}

/* ========== STEPS ========== */
.stp{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:840px){.stp{grid-template-columns:1fr}}
.st{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;position:relative;
  box-shadow:var(--sh)}
.st .n{position:absolute;top:20px;right:22px;font-family:var(--disp);font-size:2.8rem;font-weight:800;color:var(--tint-2);
  letter-spacing:-.05em;line-height:1}
.st .eb{margin-bottom:16px}
.st h3{margin-bottom:8px}
.st p{font-size:.92rem}

/* ========== PLANS ========== */
.pl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
@media(max-width:900px){.pl{grid-template-columns:1fr}}
.pc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;box-shadow:var(--sh)}
.pc.hot{background:var(--pu);border-color:var(--pu);color:#fff;box-shadow:var(--sh-lg)}
.pc .tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:var(--tint-2);color:var(--pu);padding:6px 12px;border-radius:6px;margin-bottom:16px}
.pc.hot .tag{background:var(--yl);color:var(--ink)}
.pc .pr{font-family:var(--disp);font-size:2.2rem;font-weight:800;letter-spacing:-.05em;line-height:1}
.pc.hot .pr{color:var(--yl)}
.pc .pr span{font-size:.85rem;font-weight:600;color:var(--mut);letter-spacing:0}
.pc.hot .pr span{color:#CFC5E6}
.pc .ds{font-size:.9rem;color:var(--body);margin:12px 0 18px}
.pc.hot .ds{color:#D6CBEF}
.pc ul{border-top:1px solid var(--line);padding-top:16px}
.pc.hot ul{border-color:rgba(255,255,255,.2)}
.pc ul li{display:flex;gap:10px;align-items:flex-start;font-size:.89rem;padding:7px 0}
.pc ul svg{width:17px;height:17px;color:var(--ok);flex:none;margin-top:3px}
.pc.hot ul svg{color:var(--yl)}
.pc .btn{width:100%;margin-top:18px}

/* ========== TRADE TILES ========== */
.tt{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
@media(max-width:1040px){.tt{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.tt{grid-template-columns:repeat(2,1fr)}}
.tl{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1.16;display:block;box-shadow:var(--sh)}
.tl img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--e)}
.tl:hover img{transform:scale(1.08)}
.tl::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(26,19,48,.9) 8%,transparent 62%);
  transition:background .3s}
.tl:hover::after{background:linear-gradient(to top,var(--pu) 8%,rgba(76,29,149,.4) 62%)}
.tl b{position:absolute;inset:auto 10px 10px;z-index:2;color:#fff;font-size:.82rem;font-weight:700;line-height:1.2}
.tl i{position:absolute;top:9px;left:10px;z-index:2;font-style:normal;font-size:.68rem;font-weight:800;color:var(--yl)}

/* ========== GALLERY ========== */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:12px}
.gi{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
.gi.big{grid-column:span 2;grid-row:span 2}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}
.gi:hover img{transform:scale(1.06)}
.gi span{position:absolute;inset:auto 0 0;padding:44px 18px 16px;color:#fff;
  background:linear-gradient(to top,rgba(26,19,48,.95),transparent)}
.gi small{display:block;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--yl);margin-bottom:4px}
.gi b{font-size:1rem;font-weight:700}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}}
@media(max-width:560px){.gal{grid-template-columns:1fr}.gi.big{grid-column:span 1;grid-row:span 1}}

/* ========== BOOKING (dark panel left) ========== */
.bk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(26px,3.4vw,50px);
  align-items:center}
@media(max-width:940px){.bk{grid-template-columns:1fr}}
.bk-f{background:var(--pu-d);border-radius:var(--r-xl);padding:clamp(24px,3vw,36px)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.frow{grid-template-columns:1fr}}
.f{margin-bottom:12px}
.f label{display:block;font-size:.76rem;font-weight:700;color:#BEB3DA;margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.14);
  border-radius:7px;padding:13px 15px;font-size:.93rem;color:#fff;transition:.2s}
.f textarea{min-height:92px;resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:#8F84AE}
.f select option{color:var(--ink)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--yl);background:rgba(255,255,255,.11)}
.bk-f .btn{width:100%;margin-top:6px}
.bk-f .nt{margin-top:11px;text-align:center;font-size:.78rem;color:#9F94BE}
.bk-ch{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
@media(max-width:560px){.bk-ch{grid-template-columns:1fr}}
.bk-ch li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);
  border-radius:8px;padding:13px 15px;font-size:.86rem;font-weight:600}
.bk-ch svg{width:19px;height:19px;color:var(--ok);flex:none}

/* ========== TESTIMONIALS ========== */
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:940px){.tg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.tg{grid-template-columns:1fr}}
.tc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;box-shadow:var(--sh)}
.tc .str{color:var(--yl);letter-spacing:2px;font-size:.95rem;margin-bottom:11px}
.tc q{quotes:none;display:block;font-size:.93rem;line-height:1.6;color:var(--ink)}
.tc .by{display:flex;align-items:center;gap:11px;margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}
.tc .by img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none}
.tc .by b{display:block;font-size:.9rem;font-weight:700}
.tc .by small{font-size:.76rem;color:var(--mut)}

/* ========== TEAM ========== */
.tm{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:760px){.tm{grid-template-columns:repeat(2,1fr)}}
.mb2{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1.15;box-shadow:var(--sh)}
.mb2 img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--e)}
.mb2:hover img{transform:scale(1.05)}
.mb2 span{position:absolute;inset:auto 12px 12px;background:#fff;border-radius:8px;padding:11px 14px}
.mb2 b{display:block;font-size:.94rem;font-weight:700}
.mb2 small{font-size:.75rem;color:var(--mut)}

/* ========== BLOG ========== */
.bl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.bl{grid-template-columns:1fr}}
.bp{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);
  transition:transform .22s var(--e),box-shadow .22s}
.bp:hover{border-color:var(--pu);box-shadow:var(--sh-lg)}
.bp-i{position:relative;aspect-ratio:16/10;overflow:hidden}
.bp-i img{width:100%;height:100%;object-fit:cover}
.bp-d{position:absolute;top:12px;left:12px;background:var(--yl);color:var(--ink);border-radius:6px;
  padding:8px 12px;text-align:center;line-height:1.05}
.bp-d b{display:block;font-size:1rem;font-weight:800}
.bp-d small{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bp-b{padding:20px 20px 24px}
.bp-b .mt{font-size:.74rem;font-weight:700;color:var(--pu);letter-spacing:.06em;text-transform:uppercase}
.bp-b h3{font-size:1.04rem;margin:8px 0 7px}
.bp-b p{font-size:.88rem}

/* ========== FAQ ========== */
.fq{max-width:880px;margin:0 auto}
.fi{background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:10px;overflow:hidden;box-shadow:var(--sh);
  transition:border-color .2s}
.fi.open{border-color:var(--pu)}
.fq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;
  padding:18px 22px;font-family:var(--disp);font-weight:700;font-size:1rem;letter-spacing:-.025em}
.fq-q::after{content:"+";font-size:1.4rem;color:var(--pu);transition:transform .3s var(--e);flex:none;line-height:1}
.fi.open .fq-q::after{transform:rotate(45deg)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--e)}
.fi.open .fq-a{max-height:320px}
.fq-a p{padding:0 22px 20px;font-size:.93rem}

/* ========== AREAS ========== */
.ar{display:flex;flex-wrap:wrap;gap:9px}
.ar li{font-size:.87rem;font-weight:600;padding:11px 18px;border-radius:6px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh);transition:.2s}
.ar li:hover{background:var(--pu);color:#fff;border-color:var(--pu)}

/* ========== FOOTER ========== */
/* Yellow footer. Rebuilt for a light field rather than inverted from the
   dark one: ink text, purple headings and controls. The subscribe input
   is white with a purple border — on yellow, a translucent-white fill
   computes to near-black and the placeholder disappears. */
.ft{background:var(--yl);color:var(--ink);padding:clamp(50px,5vw,76px) 0 0}
.ft-in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:clamp(24px,3vw,44px);padding-bottom:44px}
@media(max-width:900px){.ft-in{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.ft-in{grid-template-columns:1fr}}
.ft .lg{color:var(--ink)}
.ft .lg i{background:var(--pu);color:var(--yl)}
.ft-b p{margin-top:15px;font-size:.9rem;color:#6B5A12;max-width:36ch}
.ft h4{font-family:var(--disp);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pu);margin-bottom:16px}
.ft ul li{margin-bottom:9px;font-size:.9rem;color:#4A3F0C;font-weight:500}
.ft ul a{transition:color .2s}
.ft ul a:hover{color:var(--pu)}
.nl{display:flex;gap:8px;margin-top:14px}
.nl input{flex:1;min-width:0;background:#fff;border:1.5px solid rgba(76,29,149,.22);
  border-radius:6px;padding:12px 17px;font-size:.87rem;color:var(--ink);transition:border-color .2s}
.nl input::placeholder{color:#9A9088}
.nl input:focus{outline:none;border-color:var(--pu)}
.nl button{background:var(--pu);color:#fff;border-radius:6px;padding:12px 20px;font-weight:700;
  font-size:.87rem;transition:background .2s}
.nl button:hover{background:var(--pu-2)}
.ft-bt{border-top:1px solid rgba(76,29,149,.2);padding:20px 0;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:.82rem;color:#6B5A12;line-height:1.6}
.ft-bt a{font-weight:600}
.ft-bt a:hover{color:var(--pu)}
.soc{display:flex;gap:8px;margin-top:16px}
.soc a{width:36px;height:36px;border-radius:6px;background:var(--pu);color:var(--yl);display:grid;
  place-items:center;transition:transform .2s var(--e),background .2s}
.soc a:hover{background:var(--ink)}
.soc svg{width:16px;height:16px}

/* ========== FLOATING ========== */
.fab{position:fixed;right:18px;bottom:18px;z-index:70;width:56px;height:56px;border-radius:50%;background:var(--wa);
  color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px -8px rgba(37,211,102,.75);transition:transform .2s}
.fab svg{width:27px;height:27px}
.fab:hover{transform:scale(1.08)}
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:75;background:#fff;
  box-shadow:0 -2px 16px rgba(26,19,48,.12);padding:9px 11px;gap:9px}
.mbar a{flex:1;text-align:center;padding:14px;border-radius:6px;font-family:var(--disp);font-weight:700;font-size:.91rem}
.mbar .c{background:var(--pu);color:#fff}
.mbar .w{background:var(--wa);color:#06331A}
@media(max-width:760px){.mbar{display:flex}.fab{bottom:82px}body{padding-bottom:72px}}

.rv{opacity:0;transform:translateY(20px);transition:opacity .6s var(--e),transform .6s var(--e)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}

/* ==========================================================
   WORDPRESS INTEGRATION
   Classes the design mock-up never had to deal with: menu
   lists, alignment classes, comments, pagination and the
   accessibility helpers core expects a theme to define.
   ========================================================== */
.nv-list{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.nv-list li{position:relative}
@media(max-width:1200px){
  .nv-list{flex-direction:column;gap:0;width:100%}
  .nv-list li{width:100%}
  .nv-list a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-size:1rem}
}
.ft ul{list-style:none;margin:0;padding:0}
.ft .lg img,.hd .lg img{max-height:42px;width:auto}

/* accessibility helpers WordPress expects */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:#fff;border-radius:6px;box-shadow:var(--sh-lg);clip:auto;
  clip-path:none;color:var(--pu);display:block;font-weight:700;height:auto;left:6px;line-height:normal;
  padding:14px 22px;text-decoration:none;top:6px;width:auto;z-index:100000}
.skip-link{position:absolute;left:-9999px}

/* long-form content inside posts and pages */
.entry{font-size:1.02rem;line-height:1.75}
.entry>*+*{margin-top:1.1em}
.entry h2{margin-top:1.6em;font-size:1.6rem}
.entry h3{margin-top:1.5em;font-size:1.22rem}
.entry ul,.entry ol{padding-left:1.35em}
.entry ul{list-style:disc}
.entry ol{list-style:decimal}
.entry li{margin-bottom:.45em}
.entry a{color:var(--pu);text-decoration:underline;text-underline-offset:3px}
.entry blockquote{border-left:4px solid var(--yl);padding:6px 0 6px 20px;font-size:1.08rem;color:var(--ink)}
.entry img,.entry figure img{border-radius:var(--r-lg);box-shadow:var(--sh)}
.entry code{background:var(--tint);padding:2px 6px;border-radius:4px;font-size:.92em}
.entry table{width:100%;border-collapse:collapse}
.entry th,.entry td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.entry th{background:var(--tint);font-weight:700}

/* core alignment classes */
.alignleft{float:left;margin:0 1.4em 1em 0}
.alignright{float:right;margin:0 0 1em 1.4em}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.alignwide{width:min(1100px,100%);margin-left:auto;margin-right:auto}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.wp-caption-text,figcaption{font-size:.85rem;color:var(--mut);margin-top:8px}

/* pagination */
.pagination,.nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers,.nav-links .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;
  padding:0 12px;border:1px solid var(--line);border-radius:6px;background:#fff;font-weight:600;font-size:.9rem;
  box-shadow:var(--sh)}
.pagination .current,.nav-links .current{background:var(--pu);border-color:var(--pu);color:#fff}
.pagination a:hover,.nav-links a:hover{border-color:var(--pu);color:var(--pu)}

/* comments */
.comment-list{list-style:none;margin:26px 0 0;padding:0}
.comment-list li{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;
  margin-bottom:12px;box-shadow:var(--sh)}
.comment-list .children{list-style:none;margin:12px 0 0;padding-left:22px}
.comment-form input:not([type=submit]),.comment-form textarea{width:100%;background:var(--tint);
  border:1.5px solid var(--line);border-radius:7px;padding:13px 15px;font-size:.94rem}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--pu);background:#fff}
.comment-form p{margin-bottom:12px}
.comment-form .submit{background:var(--pu);color:#fff;border:0;border-radius:6px;padding:14px 26px;
  font-family:var(--disp);font-weight:700;cursor:pointer}
.comment-reply-title,.comments-title{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;
  font-size:1.3rem;margin:30px 0 6px}

/* admin bar must not hide the sticky header */
.admin-bar .hd{top:32px}
@media(max-width:782px){.admin-bar .hd{top:46px}}

/* the mobile call bar reserves space only when it is switched on */
body.has-mobile-bar{padding-bottom:0}
@media(max-width:760px){body.has-mobile-bar{padding-bottom:72px}}

/* sidebar widgets, in case a child theme adds one */
.widget{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;
  margin-bottom:16px;box-shadow:var(--sh)}
.widget-title{font-family:var(--disp);font-weight:700;font-size:1rem;letter-spacing:-.028em;margin-bottom:12px}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{padding:7px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.widget li:last-child{border-bottom:0}

/* process step icon tile — the design had one, the first widget build lost it */
.st-i{display:grid;place-items:center;width:48px;height:48px;border-radius:8px;
  background:var(--pu);color:var(--yl);margin:14px 0 16px}
.st-i svg{width:23px;height:23px}

/* ==========================================================
   SUB-MENUS
   Desktop: a dropdown panel opened on hover and on keyboard
   focus. Mobile: an inline accordion inside the slide-down
   nav, toggled by a button the script injects.

   The parent <li> keeps position:relative (set above) so the
   panel anchors to it rather than to the header.
   ========================================================== */
.nv-list .menu-item-has-children > a{padding-right:18px}
.nv-list .menu-item-has-children > a::after{content:"";position:absolute;right:2px;top:50%;
  width:6px;height:6px;margin-top:-4px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);
  transition:transform .2s var(--e),opacity .2s;opacity:.6}
.nv-list .menu-item-has-children:hover > a::after,
.nv-list .menu-item-has-children.is-open > a::after{opacity:1}

.nv-list .sub-menu{list-style:none;margin:0;padding:8px;position:absolute;left:-14px;top:calc(100% + 14px);
  min-width:246px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);z-index:95;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--e),transform .18s var(--e),visibility .18s}
/* hover bridge: stops the panel closing while the pointer crosses the gap */
.nv-list .menu-item-has-children::before{content:"";position:absolute;left:0;right:0;
  top:100%;height:16px;display:none}
.nv-list .menu-item-has-children:hover::before{display:block}
.nv-list .menu-item-has-children:hover > .sub-menu,
.nv-list .menu-item-has-children:focus-within > .sub-menu,
.nv-list .menu-item-has-children.is-open > .sub-menu{opacity:1;visibility:visible;transform:none}

.nv-list .sub-menu li{width:100%}
.nv-list .sub-menu a{display:block;padding:11px 14px;border-radius:7px;font-size:.87rem;
  font-weight:600;color:var(--body);white-space:normal;line-height:1.4;border-bottom:0;
  transition:background .16s,color .16s}
.nv-list .sub-menu a::after{display:none}
.nv-list .sub-menu a:hover,.nv-list .sub-menu a:focus-visible{background:var(--tint);color:var(--pu)}
.nv-list .sub-menu .current-menu-item > a{background:var(--tint-2);color:var(--pu)}

/* the injected toggle: desktop uses hover, so keep it out of the way */
.nv-tog{display:none}

@media(max-width:1150px){
  /* the slide-down panel can outgrow the viewport once sub-items exist */
  .nv{max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch}

  .nv-list .menu-item-has-children{display:flex;flex-wrap:wrap;align-items:center}
  .nv-list .menu-item-has-children > a{flex:1;padding-right:0}
  .nv-list .menu-item-has-children > a::after{display:none}

  .nv-tog{display:grid;place-items:center;width:44px;height:48px;flex:none;
    background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;color:var(--ink)}
  .nv-tog svg{width:15px;height:15px;transition:transform .26s var(--e)}
  .menu-item-has-children.is-open > .nv-tog svg{transform:rotate(180deg)}

  .nv-list .sub-menu{position:static;opacity:1;visibility:visible;transform:none;
    width:100%;min-width:0;border:0;border-radius:0;box-shadow:none;background:var(--tint);
    padding:0 0 0 14px;margin:0;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .3s var(--e),visibility .3s}
  /* visibility, not just height: a collapsed panel with links still in the
     tab order lets keyboard users focus items they cannot see. */
  .nv-list .menu-item-has-children.is-open > .sub-menu{max-height:640px;visibility:visible}
  .nv-list .sub-menu a{padding:13px 10px;border-radius:0;font-size:.94rem;
    border-bottom:1px solid var(--line)}
  .nv-list .sub-menu li:last-child a{border-bottom:0}
  .nv-list .menu-item-has-children::before{display:none}
}

@media(prefers-reduced-motion:reduce){
  .nv-list .sub-menu,.nv-tog svg{transition:none}
}