/* Waha Arabic landing page, design direction B: identity first. Second pass.
   One visual system: warm sand ground, deep green type and dark panels, the Waha arch as the one frame of every
   photo (one component: the same rim to width ratio, inner line and shadow everywhere), the arcs of the mark above
   three key headings only, a warm palm leaf shade at the top of the first screen and a mint one inside the why band.
   Three radius tokens: pill, card 20, panel (26 on phones, 32 from 768 px); inner photos and fields use 12.
   Every dark panel sits in the content column with the same inset.
   Headings: centred in full width light sections (services, steps, questions); start aligned in split layouts
   (why band, app panel, quote, closing bar), at every width.
   Type: IBM Plex Sans Arabic only (the page subsets named "Waha Arabic"). One scale per width:
   phones 14, 16, 18, 20, 24, 30; tablets 14, 16, 18, 20, 32, 44; desktop 14, 16, 18, 20, 36, 52 or 56. */

:root{
  --bg:#F7F4EE;
  --bg-2:#EFE8DB;
  --card:#FFFFFF;
  --night:#0E3B33;
  --night-2:#0A2E28;
  --night-3:#144A40;
  --green:#2E7D5B;
  --green-ink:#256B4D;
  --teal:#2AA6A1;
  --mint:#7FD0A6;
  --sage:#E5ECE4;
  --sage-2:#D6E3D8;
  --sand:#E9DDC6;
  --sand-2:#D8C4A0;
  --cream:#F7F2E9;
  --ink:#0E3B33;
  --text:#33413B;
  --muted:#56635C;
  --line:#E2DCCF;
  --on-night:#F7F2E9;
  --on-night-2:#C9DCD2;
  --hair-night:rgba(127,208,166,.16);
  --font:"Waha Arabic","Waha Fb SF","Waha Fb Geeza","Waha Fb Noto Sans","Waha Fb Segoe","Waha Fb Tahoma","Waha Fb Naskh","Waha Fb DejaVu",system-ui,sans-serif;
  --gut:16px;
  --wrap:1200px;
  --r-pill:999px;
  --r-card:20px;
  --r-panel:26px;
  --r-in:12px;
  --fs-s:14px;
  --fs-b:16px;
  --fs-l:18px;
  --fs-h3:20px;
  --fs-h2:24px;
  --fs-h1:30px;
  --sh-1:0 1px 2px rgba(14,59,51,.05),0 10px 28px rgba(14,59,51,.07);
  --sh-2:0 2px 6px rgba(14,59,51,.07),0 24px 48px rgba(14,59,51,.13);
  /* One warm grade for every photograph, so the blue uniforms and the cool rooms sit in the sand family. */
  --grade:saturate(.86) sepia(.07) contrast(1.02);
  --arcs:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6 26 108 68'%3E%3Cg fill='none' stroke-width='10' stroke-linecap='round'%3E%3Cpath d='M12 80A48 48 0 0 1 108 80' stroke='%232E7D5B'/%3E%3Cpath d='M28 80A32 32 0 0 1 92 80' stroke='%232AA6A1'/%3E%3Cpath d='M44 80A16 16 0 0 1 76 80' stroke='%232E7D5B'/%3E%3C/g%3E%3Ccircle cx='60' cy='80' r='7' fill='%230E3B33'/%3E%3C/svg%3E");
  --arcs-lit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6 26 108 68'%3E%3Cg fill='none' stroke-width='10' stroke-linecap='round'%3E%3Cpath d='M12 80A48 48 0 0 1 108 80' stroke='%237FD0A6'/%3E%3Cpath d='M28 80A32 32 0 0 1 92 80' stroke='%2367D2CD'/%3E%3Cpath d='M44 80A16 16 0 0 1 76 80' stroke='%237FD0A6'/%3E%3C/g%3E%3Ccircle cx='60' cy='80' r='7' fill='%23F7F2E9'/%3E%3C/svg%3E");
  --arch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' width='100' height='1000'%3E%3Cpath d='M0 1000V59.16A60 60 0 0 1 50 0A60 60 0 0 1 100 59.16V1000Z'/%3E%3C/svg%3E");
  --shade:url(/images/dir-B/palm-shade.svg);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{position:relative;margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-b);line-height:1.7;font-weight:400;letter-spacing:0;font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
bdi{unicode-bidi:isolate}
:focus-visible{outline:3px solid var(--night);outline-offset:3px;border-radius:8px}
.b-why :focus-visible,.b-app :focus-visible,.b-cta :focus-visible,.b-facts :focus-visible{outline-color:var(--mint)}
#quote:focus{outline:none}
.b-wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gut));margin-inline:auto;padding-inline:max(var(--gut),env(safe-area-inset-right,0px)) max(var(--gut),env(safe-area-inset-left,0px))}

/* ICONS */
.b-i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.b-i--go{width:18px;height:18px;stroke-width:2.2}
.b-wa{width:20px;height:20px;flex:none}
.b-mark{width:44px;height:28px;flex:none}

/* TYPE */
.b-h1{color:var(--ink);font-size:var(--fs-h1);font-weight:700;line-height:1.24;letter-spacing:0}
.b-h1 span{display:block}
.b-h1__b,.b-acc{color:var(--green)}
.b-why .b-acc,.b-cta .b-acc{color:var(--mint)}
.b-h2{color:var(--ink);font-size:var(--fs-h2);font-weight:700;line-height:1.35;text-wrap:balance}
.b-sub{margin-top:10px;color:var(--muted);font-size:var(--fs-b);line-height:1.75;text-wrap:pretty}
/* Full width light sections: the heading is centred. */
.b-sechead{max-width:640px;margin:0 auto 28px;text-align:center}
/* The arcs of the mark sit above three headings only: services, the why band and the quote. */
.b-sechead--mark::before,.b-why__copy::before,.wrfq .wrfq__crown::before{content:"";display:block;width:38px;height:24px;margin:0 auto 14px;background:var(--arcs) center/contain no-repeat}
.b-why__copy::before{margin-inline:0;background-image:var(--arcs-lit)}
.wrfq .wrfq__crown::before{margin-inline:0}

/* BUTTONS: one action colour, deep green with a cream label (12.4 to 1). */
.b-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 22px;border:1.5px solid transparent;border-radius:var(--r-pill);font:inherit;font-size:var(--fs-b);font-weight:700;line-height:1.3;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
.b-btn--lg{min-height:54px;padding-inline:26px}
.b-btn--ink{background:var(--night);border-color:var(--night);color:var(--cream);box-shadow:0 8px 18px rgba(14,59,51,.18)}
.b-btn--line{background:var(--card);border-color:var(--night);color:var(--night)}
.b-btn--cream{background:var(--cream);border-color:var(--cream);color:var(--night)}
.b-btn--ghost{background:transparent;border-color:rgba(247,242,233,.55);color:var(--cream)}
.b-btn--ghost .b-wa path{fill:var(--mint)}
@media (hover:hover){
  .b-btn--ink:hover{background:var(--night-3);border-color:var(--night-3)}
  .b-btn--line:hover{background:var(--sage)}
  .b-btn--cream:hover{background:#FFFFFF}
  .b-btn--ghost:hover{border-color:var(--cream)}
}
@media (forced-colors:active){.b-btn{border-color:ButtonText}}

/* THE WAHA ARCH: one component for the three photo frames (hero, why band, quote). A softly pointed arch
   (two arcs meeting at a low apex), a sand rim of 2.6 percent of the arch width, a darker inner line and one soft
   shadow. The rim is measured in container units of the arch box, so the ratio holds at every size. */
.b-archbox{position:relative;container-type:inline-size;filter:drop-shadow(0 16px 26px rgba(14,59,51,.15))}
.b-arch{--rim:2.6cqw;position:relative;height:100%;padding:var(--rim) var(--rim) 0;background:linear-gradient(155deg,#F7F0E3 0%,#EADDC5 45%,#D9C6A2 100%);-webkit-mask:var(--arch) top center/100% auto no-repeat;mask:var(--arch) top center/100% auto no-repeat}
.b-arch::before{content:"";position:absolute;inset:calc(var(--rim) - 2px) calc(var(--rim) - 2px) 0;background:#C9B48C;-webkit-mask:var(--arch) top center/100% auto no-repeat;mask:var(--arch) top center/100% auto no-repeat}
.b-arch img{position:relative;width:100%;height:100%;object-fit:cover;filter:var(--grade);-webkit-mask:var(--arch) top center/100% auto no-repeat;mask:var(--arch) top center/100% auto no-repeat}

/* HEADER: static (never over the form), on the sand ground. */
.b-head{position:relative;z-index:20}
.b-head__in{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;padding-top:6px}
.b-brand{display:inline-flex;align-items:center;gap:10px;min-height:48px;color:var(--ink);text-decoration:none}
.b-brand__txt{display:flex;flex-direction:column;line-height:1.2}
.b-brand__name{font-size:var(--fs-h2);font-weight:700;line-height:1.1}
.b-brand__tag{margin-top:3px;color:var(--muted);font-size:var(--fs-s);font-weight:400;white-space:nowrap}
.b-nav,.b-head__tel,.b-lang,.b-head__cta{display:none}
.b-head__end{display:flex;align-items:center;gap:8px}
.b-call,.b-menu summary{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;cursor:pointer}
.b-call{background:var(--night);color:var(--cream);box-shadow:0 6px 14px rgba(14,59,51,.2)}
.b-call .b-i{width:20px;height:20px}
.b-menu summary{list-style:none;border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
.b-menu summary::-webkit-details-marker{display:none}
.b-menu[open] summary{border-color:var(--night);background:var(--night);color:var(--cream)}
/* The open menu: a full width sheet under the header, rows of 52 px, the page dimmed in night green behind it. */
.b-menu__panel{position:absolute;top:100%;inset-inline:0;z-index:3;display:flex;flex-direction:column;padding:6px var(--gut) 20px;border-top:1px solid var(--line);border-radius:0 0 var(--r-panel) var(--r-panel);background:var(--bg);box-shadow:0 22px 40px rgba(10,46,40,.18)}
.b-menu__panel a:not(.b-btn){display:flex;align-items:center;min-height:52px;padding:0 4px;border-bottom:1px solid var(--line);color:var(--ink);font-size:var(--fs-l);font-weight:600;text-decoration:none}
.b-menu__panel .b-btn{margin-top:16px;min-height:52px}
.b-head:has(.b-menu[open]) .b-head__in{background:var(--bg)}
.b-head:has(.b-menu[open])::after{content:"";position:fixed;inset:0;z-index:1;background:rgba(14,59,51,.35)}

/* FIRST SCREEN */
.b-hero{position:relative;padding:14px 0 0}
/* The palm shade: one warm, crisp shadow at the top right corner of the page, where the mockup has it. Its fronds
   start beyond that corner and fade out inside the drawing, so no cut edge is ever visible. */
.b-topshade{position:absolute;top:-24px;right:0;z-index:0;width:min(78vw,420px);aspect-ratio:1;background:#6E5536;opacity:.13;-webkit-mask:var(--shade) 0 0/100% 100% no-repeat;mask:var(--shade) 0 0/100% 100% no-repeat;pointer-events:none}
body>header,body>main,body>footer{position:relative;z-index:1}
.b-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 46%;grid-template-areas:"copy media" "act act";column-gap:14px;row-gap:22px}
.b-hero__copy{grid-area:copy;align-self:center;padding-block:8px}
.b-hero__media{grid-area:media;position:relative;min-height:300px}
.b-hero__act{grid-area:act}
.b-archbox--hero{position:absolute;inset:0}
.b-archbox--hero .b-arch img{object-position:50% 40%}
.b-float{display:none}

.b-svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px}
.b-svc li{display:flex;flex-direction:column;align-items:center;gap:8px;padding-inline:2px;color:var(--ink);font-size:var(--fs-s);font-weight:700;line-height:1.35;text-align:center}
.b-svc li+li{border-inline-start:1px solid var(--line)}
.b-svc__i{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:var(--sage);color:var(--green-ink)}
.b-svc__i .b-i{width:22px;height:22px}

.b-lead{color:var(--text);font-size:var(--fs-b);line-height:1.75;text-wrap:pretty}
.b-lead strong{color:var(--ink);font-weight:700}
.b-actions{display:flex;gap:10px;margin-top:18px}
.b-actions .b-btn--ink{flex:1.35}
.b-actions .b-btn--line{flex:1}

/* ISO marks: three equal columns, the number on top and the subject under it on balanced lines. */
.b-trust{margin-top:18px}
.b-iso__cap{display:none;color:var(--muted);font-size:var(--fs-s);font-weight:600;line-height:1.4}
.b-iso{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.b-iso__badge{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-content:start;column-gap:6px;row-gap:2px;min-width:0;padding-inline:10px}
.b-iso__badge:first-child{padding-inline-start:0}
.b-iso__badge:last-child{padding-inline-end:0}
.b-iso__badge+.b-iso__badge{border-inline-start:1px solid var(--line)}
.b-iso__seal{width:20px;height:20px;align-self:center}
.b-iso__ro{fill:var(--green)}
.b-iso__ck{fill:none;stroke:#FFFFFF;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.b-iso__n{justify-self:start;align-self:center;color:var(--ink);font-size:var(--fs-s);font-weight:700;line-height:1.35;white-space:nowrap}
.b-iso__s{grid-column:1/-1;color:var(--muted);font-size:var(--fs-s);line-height:1.4;text-wrap:balance}

/* The dark bar of short facts: one calm band on a solid night base, dividers drawn inside the cells. */
.b-facts__wrap{position:relative;z-index:3;margin-top:36px}
.b-facts{display:grid;grid-template-columns:1fr 1fr;padding:6px 4px;border-radius:var(--r-panel);background:var(--night);box-shadow:var(--sh-2)}
.b-facts li{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 8px 7px;color:var(--on-night-2);font-size:var(--fs-s);line-height:1.35;text-align:center}
.b-facts li:nth-child(2n)::before{content:"";position:absolute;inset-inline-start:0;top:22%;bottom:22%;width:1px;background:var(--hair-night)}
.b-facts__i{display:grid;place-items:center;margin-bottom:3px;color:var(--mint)}
.b-facts__i .b-i{width:20px;height:20px;stroke-width:1.6}
.b-facts strong{color:var(--on-night);font-size:var(--fs-l);font-weight:700;line-height:1.25}

/* SECTIONS */
.b-sec{padding-block:64px}
.b-plans{position:relative;padding-top:64px}

/* Three cards like plans, the housing card (the service Waha runs) larger in the middle on wide screens.
   One anatomy in every card: photo, title, tag under the title, one line, checks, action. One text axis: start. */
.b-plans__list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.b-plan{position:relative;display:flex;flex-direction:column;padding:8px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--sh-1)}
.b-plan--main{grid-column:1/-1;padding:10px;border:2px solid var(--green);box-shadow:var(--sh-2)}
.b-plan__ph{overflow:hidden;border-radius:var(--r-in);background:var(--bg-2);aspect-ratio:4/3}
.b-plan--main .b-plan__ph{aspect-ratio:16/9}
.b-plan__ph img{width:100%;height:100%;object-fit:cover;filter:var(--grade)}
.b-plan__body{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:14px 6px 2px;text-align:start}
.b-plan--main .b-plan__body{padding:16px 8px 6px}
.b-plan__t{color:var(--ink);font-size:var(--fs-h3);font-weight:700;line-height:1.35}
.b-plan__tag{margin-top:6px;padding:2px 12px;border-radius:var(--r-pill);background:var(--sage);color:var(--green-ink);font-size:var(--fs-s);font-weight:700;line-height:1.6;white-space:nowrap}
.b-plan__tag--main{background:var(--night);color:var(--cream)}
.b-plan__s{margin-top:10px;color:var(--muted);font-size:var(--fs-s);line-height:1.65;text-wrap:pretty}
.b-plan--main .b-plan__s{font-size:var(--fs-b);line-height:1.7}
.b-plan__f{align-self:stretch;display:grid;gap:10px;margin:14px 0 6px;padding-top:12px;border-top:1px solid var(--line)}
.b-plan--main .b-plan__f{margin:16px 0 18px;padding-top:16px}
.b-plan__f li{display:flex;align-items:flex-start;gap:8px;color:var(--text);font-size:var(--fs-s);font-weight:600;line-height:1.45}
.b-plan--main .b-plan__f li{align-items:center;gap:10px;font-size:var(--fs-b)}
.b-plan__f .b-i{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--sage);color:var(--green-ink);stroke-width:2.4}
.b-plan--main .b-plan__f .b-i{width:26px;height:26px;padding:5px;stroke-width:2.2}
.b-plan--side .b-plan__f li+li{display:none}
.b-plan__cta{align-self:stretch;margin-top:auto}
/* Phones: the partner card is one tappable link; its action is a compact text link with an arrow. */
.b-plan__go{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:auto;color:var(--green-ink);font-size:var(--fs-b);font-weight:700;line-height:1.3;text-decoration:none}
.b-plan__go::after{content:"";position:absolute;inset:0;border-radius:var(--r-card)}
.b-plan--side .b-plan__body>:not(.b-plan__go){position:relative;z-index:1;pointer-events:none}
.b-plan__go:focus-visible{outline:none}
.b-plan:has(.b-plan__go:focus-visible){outline:3px solid var(--night);outline-offset:3px}

/* THE WHY BAND: a dark panel in the content column. Heading and six promises, then the arched corridor standing
   on the panel's lower edge (on phones under the promises, from 1024 px beside them). */
.b-why{position:relative}
.b-why__panel{position:relative;display:grid;grid-template-areas:"copy" "media";row-gap:24px;padding:36px 20px 0;overflow:hidden;border-radius:var(--r-panel);background:var(--night);color:var(--on-night-2)}
.b-why__panel::before{content:"";position:absolute;bottom:0;inset-inline-end:0;width:min(90vw,460px);aspect-ratio:1;background:var(--mint);opacity:.075;-webkit-mask:var(--shade) 0 0/100% 100% no-repeat;mask:var(--shade) 0 0/100% 100% no-repeat;transform:rotate(180deg);pointer-events:none}
.b-why__copy{grid-area:copy;position:relative;text-align:start}
.b-why .b-h2{color:var(--on-night)}
.b-why .b-sub{color:var(--on-night-2)}
.b-feats{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;margin-top:26px}
.b-feats li{display:flex;flex-direction:column;align-items:flex-start;text-align:start}
.b-feats__i{display:grid;place-items:center;width:40px;height:40px;margin-bottom:10px;border:1.5px solid rgba(127,208,166,.55);border-radius:50%;color:var(--mint)}
.b-feats__i .b-i{width:20px;height:20px}
.b-feats h3{color:var(--on-night);font-size:var(--fs-b);font-weight:700;line-height:1.45;text-wrap:balance}
.b-feats p{margin-top:4px;color:var(--on-night-2);font-size:var(--fs-s);line-height:1.6;text-wrap:pretty}
.b-why__media{grid-area:media;position:relative;display:flex;justify-content:center;align-items:flex-end}
.b-archbox--why{width:min(56vw,220px);aspect-ratio:4/5}

/* Four steps: a vertical path on phones, one line across on wide screens. */
.b-how{position:relative}
.b-steps{display:grid;gap:0;max-width:560px;margin-inline:auto}
.b-steps li{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;padding-bottom:26px}
.b-steps li:last-child{padding-bottom:0}
.b-steps li::before{content:"";position:absolute;inset-inline-start:29px;top:60px;bottom:4px;width:2px;background:repeating-linear-gradient(to bottom,var(--sage-2) 0 6px,transparent 6px 11px)}
.b-steps li:last-child::before{display:none}
.b-steps__i{grid-row:1/3;position:relative;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--sage);color:var(--green-ink)}
.b-steps__i .b-i{width:26px;height:26px}
.b-steps__n{position:absolute;inset-inline-start:40px;top:-2px;display:grid;place-items:center;width:26px;height:26px;border:2px solid var(--bg);border-radius:50%;background:var(--night);color:var(--cream);font-size:var(--fs-s);font-weight:700;line-height:1}
.b-steps h3{align-self:end;padding-top:4px;color:var(--ink);font-size:var(--fs-l);font-weight:700;line-height:1.4}
.b-steps p{margin-top:2px;color:var(--muted);font-size:var(--fs-b);line-height:1.7;text-wrap:pretty}

/* THE APP PANEL, where the mockup has a testimonial: the copy, two points, and one module of the dashboard shown
   large (no window bar), set over the panel's lower edge. */
.b-app{padding-bottom:88px}
.b-app__panel{position:relative;display:grid;grid-template-areas:"copy" "pts" "shot";gap:20px;padding:30px 20px 0;border-radius:var(--r-panel);background:var(--night);color:var(--on-night-2)}
.b-app__copy{grid-area:copy;position:relative}
.b-app__mark{display:grid;place-items:center;width:48px;height:48px;margin-bottom:14px;border-radius:var(--r-in);background:rgba(127,208,166,.14);color:var(--mint)}
.b-app__mark .b-i{width:24px;height:24px}
.b-app__eye{color:var(--mint);font-size:var(--fs-s);font-weight:700;line-height:1.4}
.b-app .b-h2{margin-top:4px;color:var(--on-night)}
.b-app__lead{margin-top:6px;color:var(--on-night);font-size:var(--fs-h3);line-height:1.5}
.b-app__pts{grid-area:pts;display:grid;gap:10px}
.b-app__pts li{display:flex;align-items:center;gap:10px;color:var(--on-night-2);font-size:var(--fs-b);line-height:1.5}
.b-app__pts .b-i{width:24px;height:24px;padding:4px;border-radius:50%;background:rgba(127,208,166,.16);color:var(--mint);stroke-width:2.4}
.b-app__shot{grid-area:shot;position:relative;margin:4px 0 -28px;overflow:hidden;border:1px solid rgba(14,59,51,.1);border-radius:var(--r-card);background:#F6F8F7;box-shadow:0 18px 34px rgba(10,46,40,.2),0 2px 6px rgba(10,46,40,.1)}
.b-app__shot picture,.b-app__shot img{display:block;width:100%}

/* THE QUOTE: the RFQ module of the current page, unchanged in markup and hooks; only its frame changes.
   Phones: the heading and the form card. From 768 px: the arched photo and the direct contact card beside the
   form, sticky, so they travel with the form as it grows. */
.b-quote{padding-bottom:72px}
.b-quote__grid{position:relative;display:grid}
.b-quote__side{display:none}
.b-quote__alt-t{color:var(--muted);font-size:var(--fs-s);font-weight:600;line-height:1.4}

/* QUESTIONS: a centred column; answers kept to a comfortable measure. */
.b-sec.b-faq{padding-top:8px}
.b-faq__head{margin-bottom:22px;text-align:center}
.b-faq .faq-list{max-width:760px;margin-inline:auto}
#faq details{margin-bottom:10px;padding:0 18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);transition:box-shadow .16s ease,border-color .16s ease}
#faq details[open]{border-color:var(--sage-2);box-shadow:var(--sh-1)}
#faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:62px;padding:10px 0;color:var(--ink);font-size:var(--fs-b);font-weight:600;line-height:1.5;list-style:none;cursor:pointer;text-wrap:balance}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%230E3B33' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/16px 16px no-repeat;transition:transform .18s ease,background-color .18s ease}
#faq details[open] summary::after{transform:rotate(45deg);background-color:var(--sage-2)}
#faq details>p{max-width:62ch;padding:0 0 18px;color:var(--text);font-size:var(--fs-b);line-height:1.8;text-wrap:pretty}

/* CLOSING BAR */
.b-cta{padding:8px 0 48px}
.b-cta__bar{position:relative;display:grid;gap:22px;padding:28px 20px 22px;overflow:hidden;border-radius:var(--r-panel);background:var(--night);color:var(--on-night)}
.b-cta__go{position:relative;display:grid;gap:16px}
.b-cta__t{color:var(--on-night);font-size:var(--fs-h2);font-weight:700;line-height:1.35}
.b-cta__btns{display:flex;gap:10px}
.b-cta__btns .b-btn--cream{flex:1.35}
.b-cta__btns .b-btn--ghost{flex:1}
.b-cta__tel{position:relative;display:flex;align-items:center;gap:14px;min-height:56px;padding-top:18px;border-top:1px solid rgba(247,242,233,.16);color:var(--on-night);text-decoration:none}
.b-cta__ring{display:grid;place-items:center;flex:none;width:50px;height:50px;border-radius:50%;background:var(--cream);color:var(--night)}
.b-cta__ring .b-i{width:22px;height:22px}
.b-cta__num{display:flex;flex-direction:column;line-height:1.35}
.b-cta__lbl{color:var(--on-night-2);font-size:var(--fs-s)}
.b-cta__num bdi{font-size:var(--fs-h3);font-weight:700;letter-spacing:.01em}

/* FOOTER: light; the company data a buyer can check, set in one sand card. */
.b-foot{padding:0 0 28px;background:var(--bg)}
.b-foot__top{display:grid;gap:24px}
.b-brand--foot .b-brand__name{font-size:var(--fs-h2)}
.b-foot__title{margin-top:16px;color:var(--ink);font-size:var(--fs-l);font-weight:700;line-height:1.4}
.b-foot__contact{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:4px}
.b-foot__contact a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font-weight:600;text-decoration:none}
.b-foot__contact .b-i{color:var(--green-ink)}
.b-foot__id{padding:18px 16px 16px;border-radius:var(--r-card);background:var(--bg-2)}
.b-foot__h{color:var(--ink);font-size:var(--fs-l);font-weight:700;line-height:1.4}
.b-idl{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;margin-top:6px}
.b-idl dd bdi{white-space:nowrap}
.b-idl>div{padding:9px 0;border-bottom:1px solid rgba(14,59,51,.09)}
.b-idl__wide{grid-column:1/-1}
.b-idl dt{color:var(--muted);font-size:var(--fs-s);line-height:1.5}
.b-idl dd{margin-top:1px;color:var(--ink);font-size:var(--fs-b);font-weight:600;line-height:1.55;overflow-wrap:anywhere}
.b-idl a{display:inline-flex;align-items:center;min-height:44px;color:var(--green-ink);text-underline-offset:4px}
.b-idl>div:last-child{border-bottom:0;padding-bottom:0}
.waha-id__copy{margin-top:12px;min-height:44px;padding:8px 18px;border:1.5px solid rgba(14,59,51,.18);border-radius:var(--r-pill);background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-s);font-weight:600;cursor:pointer}
.waha-id__copy:hover{border-color:var(--night)}
.waha-id__status{min-height:0;margin-top:6px;color:var(--green-ink);font-size:var(--fs-s)}
.waha-id__status:empty{display:none}
.b-foot__privacy{margin-top:20px;border-bottom:1px solid var(--line)}
.b-foot__privacy summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;color:var(--ink);font-size:var(--fs-b);font-weight:600;list-style:none;cursor:pointer}
.b-foot__privacy summary::-webkit-details-marker{display:none}
.b-foot__privacy summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%230E3B33' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;transition:transform .18s ease}
.b-foot__privacy[open] summary::after{transform:rotate(45deg)}
.b-foot__privacy p{padding-bottom:18px;color:var(--muted);font-size:var(--fs-s);line-height:1.8}
.b-foot__base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;margin-top:14px;color:var(--muted);font-size:var(--fs-s)}
.b-foot__nav{display:flex;flex-wrap:wrap;gap:0 18px}
.b-foot__nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--ink);font-weight:600;text-decoration:none}
.b-foot__nav a:hover{text-decoration:underline;text-underline-offset:4px}

/* PHONE ACTION BAR: shown by landing-ar.js once the first screen actions have scrolled away. */
.b-bar{position:fixed;inset-inline:0;bottom:0;z-index:30;display:flex;gap:8px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:rgba(247,244,238,.96);box-shadow:0 -8px 22px rgba(10,46,40,.1);transform:translateY(110%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
.b-bar.is-on{transform:none;visibility:visible;transition:transform .2s ease}
.b-bar .b-btn{min-height:48px;padding-inline:16px}
.b-bar .b-btn--ink{flex:1.4}
.b-bar .b-btn--line{flex:1}
.b-bar .b-btn--call{flex:none;width:48px;padding:0;border-radius:50%;background:var(--sage);color:var(--night)}
/* The preview notice that rfq-landing-context.js adds on hosts other than wahahq.com floats in a corner, as on the
   current page, so it never pushes the page down (production shows no notice). */
.rfqw-preview-notice{position:fixed;z-index:60;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:min(440px,calc(100vw - 24px));margin:0;padding:6px 12px;border-radius:10px;background:#EFE7D8;color:#4A3214;font-size:var(--fs-s);line-height:1.5;box-shadow:0 6px 18px rgba(14,59,51,.16);transition:transform .2s ease}
body:has(.b-bar.is-on) .rfqw-preview-notice{transform:translateY(-68px)}

/* Text never breaks into one word lines where a balance is possible. */
.b-lead,.b-sub,.b-plan__s,.b-steps p,.b-feats p,#faq details>p{text-wrap:pretty}

/* NARROW PHONES */
@media (max-width:374.98px){
  :root{--fs-h1:28px}
  .b-brand__tag{display:none}
  .b-hero__grid{grid-template-columns:minmax(0,1fr) 44%;column-gap:12px}
  .b-iso__badge{padding-inline:7px}
  .b-actions .b-btn,.b-cta__btns .b-btn{padding-inline:14px}
  .b-facts li{padding-inline:6px}
}

/* TABLETS */
@media (min-width:768px){
  :root{--gut:24px;--fs-h2:32px;--fs-h1:44px;--r-panel:32px}
  .b-head__in{min-height:84px}
  .b-lang{display:grid;place-items:center;min-width:46px;height:46px;padding:0 8px;border-radius:var(--r-pill);color:var(--ink);font-size:var(--fs-s);font-weight:700;text-decoration:none}
  .b-lang:hover{background:var(--sage)}
  .b-menu__panel{inset-inline:auto 0;width:340px;margin-inline-end:var(--gut);padding:8px 20px 20px;border:1px solid var(--line);border-radius:var(--r-card)}
  .b-topshade{top:-60px;width:600px;opacity:.11}
  .b-hero{padding-top:20px}
  .b-hero__grid{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"copy media" "act media" ". media";grid-template-rows:auto auto 64px;column-gap:40px;row-gap:0}
  .b-hero__copy{align-self:end;padding:24px 0 0}
  .b-hero__act{align-self:start;padding-top:22px}
  .b-hero__media{min-height:520px}
  .b-svc{display:flex;gap:0;margin-top:26px}
  .b-svc li{min-width:96px;padding-inline:20px;font-size:var(--fs-b)}
  .b-svc li:first-child{min-width:0;padding-inline-start:0}
  .b-lead{max-width:34em;font-size:var(--fs-l);text-wrap:balance}
  .b-actions{max-width:440px;margin-top:24px}
  .b-trust{margin-top:22px}
  .b-iso{max-width:470px}
  .b-facts__wrap{margin-top:-46px}
  .b-facts{grid-template-columns:repeat(4,1fr);padding:6px 8px}
  .b-facts li{padding:20px 12px 18px;line-height:1.4}
  .b-facts strong{line-height:1.3}
  .b-facts li::before{display:none}
  .b-facts li+li::before{content:"";display:block;position:absolute;inset-inline-start:0;top:25%;bottom:25%;width:1px;background:var(--hair-night)}
  .b-facts__i{margin-bottom:6px}
  .b-facts__i .b-i{width:24px;height:24px}
  .b-sec{padding-block:88px}
  .b-plans{padding-top:88px}
  .b-sechead{margin-bottom:44px}
  .b-sub{font-size:var(--fs-l)}
  /* The plan row: the housing card in the middle really larger, 16 px above and below its neighbours, with the
     same photo height and one shared button line. */
  .b-plans__list{grid-template-columns:minmax(0,1fr) minmax(0,1.14fr) minmax(0,1fr);gap:16px;align-items:stretch;padding-block:16px}
  .b-plan{padding:10px}
  .b-plan--main{grid-column:2;grid-row:1;margin-block:-16px;padding:25px 9px}
  .b-plan--side:nth-child(2){grid-column:1;grid-row:1}
  .b-plan--side:nth-child(3){grid-column:3;grid-row:1}
  .b-plan__ph,.b-plan--main .b-plan__ph{aspect-ratio:auto;height:150px}
  .b-plan__body,.b-plan--main .b-plan__body{padding:18px 8px 4px}
  .b-plan__s,.b-plan--main .b-plan__s{font-size:var(--fs-b);line-height:1.7}
  .b-plan__f,.b-plan--main .b-plan__f{margin:16px 0 20px;padding-top:16px}
  .b-plan__f li,.b-plan--main .b-plan__f li{align-items:flex-start;gap:10px;font-size:var(--fs-s)}
  .b-plan__f .b-i,.b-plan--main .b-plan__f .b-i{width:24px;height:24px;padding:4px;stroke-width:2.4}
  .b-plan--side .b-plan__f li+li{display:flex}
  .b-plan__go{align-self:stretch;justify-content:center;gap:10px;min-height:48px;padding:10px 18px;border:1.5px solid var(--night);border-radius:var(--r-pill);background:var(--card);color:var(--night)}
  .b-plan__go::after{display:none}
  .b-plan--side .b-plan__body>:not(.b-plan__go){pointer-events:auto}
  .b-plan__go:focus-visible{outline:3px solid var(--night);outline-offset:3px}
  .b-plan:has(.b-plan__go:focus-visible){outline:none}
  @media (hover:hover){.b-plan__go:hover{background:var(--sage)}}
  .b-why__panel{row-gap:36px;padding:56px 40px 0}
  .b-feats{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}
  .b-archbox--why{width:260px}
  .b-app{padding-bottom:112px}
  .b-app__panel{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"copy pts" "shot shot";align-items:end;column-gap:40px;row-gap:32px;padding:44px 40px 0}
  .b-app__shot{margin:0 0 -40px}
  .b-quote__grid{grid-template-columns:minmax(0,1fr) 280px;column-gap:40px;align-items:start}
  .b-quote__side{position:sticky;top:24px;grid-column:2;grid-row:1;display:grid;gap:20px;align-self:start}
  .b-archbox--quote{width:100%;aspect-ratio:4/5}
  .b-quote__alt{display:grid;justify-items:center;gap:12px;padding:20px 18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--sh-1);text-align:center}
  .b-quote__call{display:inline-flex;align-items:center;gap:10px;min-height:48px;color:var(--ink);font-size:var(--fs-h3);font-weight:700;text-decoration:none;letter-spacing:.01em}
  .b-quote__ring{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sage);color:var(--green-ink)}
  .b-quote__alt .b-btn{width:100%}
  .b-cta__bar{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;padding:34px 40px}
  .b-cta__go{grid-template-columns:minmax(0,1fr);gap:14px}
  .b-cta__btns{max-width:400px}
  .b-cta__tel{padding:0;padding-inline-start:32px;border-top:0;border-inline-start:1px solid rgba(247,242,233,.16)}
  .b-cta{padding-bottom:56px}
  .b-foot__top{grid-template-columns:minmax(0,1fr);gap:28px}
  .b-foot__brand{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:40px}
  .b-foot__brand .b-brand{grid-row:1/3}
  .b-foot__title{margin-top:0}
  .b-foot__id{padding:24px 28px 20px}
  .b-idl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .b-bar{display:flex}
}

/* DESKTOP */
@media (min-width:1024px){
  :root{--fs-h2:36px;--fs-h1:52px}
  .b-nav{display:flex;align-items:center;gap:4px}
  .b-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-pill);color:var(--ink);font-weight:600;text-decoration:none}
  .b-nav a:hover{background:var(--sage)}
  .b-nav .b-nav__app{display:none}
  .b-head__tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;color:var(--ink);font-weight:700;text-decoration:none}
  .b-head__tel .b-i{color:var(--green-ink)}
  .b-head__cta{display:inline-flex}
  .b-call,.b-menu{display:none}
  .b-topshade{top:-90px;width:760px;opacity:.1}
  .b-hero{padding-top:28px}
  .b-hero__grid{grid-template-columns:minmax(0,1fr) 440px;grid-template-rows:auto auto 92px;column-gap:56px}
  .b-h1__a,.b-h1__b{display:inline!important}
  .b-hero__media{min-height:590px}
  /* The floating pill rides the arch's inner lower edge, from 1024 px only (at 768 it would meet the ISO row). */
  .b-float{position:absolute;bottom:118px;inset-inline-start:-48px;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 22px 10px 12px;border-radius:var(--r-pill);background:var(--card);box-shadow:var(--sh-2);color:var(--ink);font-size:var(--fs-b);font-weight:700;white-space:nowrap}
  .b-float__i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sage);color:var(--green-ink)}
  .b-float__i .b-i{width:20px;height:20px}
  .b-lead{font-size:var(--fs-h3)}
  .b-svc li{min-width:108px;padding-inline:24px;font-size:var(--fs-l)}
  .b-svc__i{width:48px;height:48px}
  .b-svc__i .b-i{width:24px;height:24px}
  .b-iso__cap{display:block;margin-bottom:8px}
  .b-facts__wrap{margin-top:-62px}
  .b-facts strong{font-size:var(--fs-h3)}
  .b-facts li{padding:24px 16px 22px;font-size:var(--fs-b)}
  .b-sec{padding-block:104px}
  .b-plans{padding-top:104px}
  .b-plans__list{max-width:980px;margin-inline:auto;gap:24px}
  .b-plan{padding:12px}
  .b-plan--main{padding:27px 11px}
  .b-plan__body,.b-plan--main .b-plan__body{padding:20px 10px 6px}
  .b-plan__f li,.b-plan--main .b-plan__f li{font-size:var(--fs-b)}
  .b-why__panel{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"copy media";column-gap:56px;padding:72px 56px 0}
  .b-why__copy{padding-bottom:72px}
  .b-why__media{align-self:end}
  .b-archbox--why{width:320px}
  .b-feats{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 0;margin-top:36px}
  .b-feats li{padding-inline:22px}
  .b-feats li:nth-child(2n+1){padding-inline-start:0}
  .b-feats li:nth-child(2n){border-inline-start:1px solid var(--hair-night)}
  .b-feats h3{font-size:var(--fs-l)}
  .b-feats p{font-size:var(--fs-b)}
  .b-steps h3{font-size:var(--fs-h3)}
  .b-app{padding-bottom:152px}
  .b-app__panel{column-gap:56px;padding:56px 56px 0}
  .b-app__shot{margin-bottom:-48px}
  .b-quote{padding-bottom:104px}
  .b-quote__grid{grid-template-columns:minmax(0,1fr) 340px;column-gap:64px}
  .b-faq__head{margin-bottom:30px}
  #faq summary{font-size:var(--fs-l);min-height:68px}
  #faq details{padding:0 26px}
  .b-cta{padding-bottom:64px}
  .b-cta__bar{padding:40px 56px}
  .b-cta__btns{flex-wrap:nowrap}
  .b-foot__top{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:start;gap:56px}
  .b-foot__brand{display:block}
  .b-foot__title{margin-top:20px}
  .b-idl{column-gap:40px}
  .b-bar{display:none}
}

@media (min-width:768px){
  .b-steps{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;gap:0 12px}
  .b-steps li{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:start;justify-items:center;padding-bottom:0;text-align:center}
  .b-steps li::before{inset-inline-start:calc(50% + 44px);inset-inline-end:auto;top:35px;bottom:auto;width:calc(100% - 76px);height:2px;background:repeating-linear-gradient(to left,var(--sage-2) 0 7px,transparent 7px 13px)}
  .b-steps__i{grid-row:auto;width:70px;height:70px;margin-bottom:14px}
  .b-steps__i .b-i{width:30px;height:30px}
  .b-steps__n{inset-inline-start:auto;inset-inline-end:calc(50% + 14px);top:-4px}
  .b-steps h3{padding-top:0}
}
@media (min-width:1024px){
  .b-steps{gap:0 24px}
  .b-steps li::before{inset-inline-start:calc(50% + 50px);width:calc(100% - 76px)}
}

@media (min-width:1280px){
  :root{--fs-h1:56px}
  .b-nav .b-nav__app{display:inline-flex}
  .b-hero__grid{grid-template-columns:minmax(0,1fr) 520px;column-gap:72px}
  .b-hero__media{min-height:620px}
  .b-why__panel{grid-template-columns:minmax(0,1fr) 400px;column-gap:72px;padding:80px 72px 0}
  .b-why__copy{padding-bottom:80px}
  .b-archbox--why{width:400px}
  .b-feats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .b-feats li:nth-child(2n+1),.b-feats li:nth-child(2n){padding-inline-start:22px;border-inline-start:1px solid var(--hair-night)}
  .b-feats li:nth-child(3n+1){padding-inline-start:0;border-inline-start:0}
  .b-cta__go{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px}
}
@media (min-width:1600px){
  :root{--wrap:1320px}
  .b-hero__grid{grid-template-columns:minmax(0,1fr) 560px}
  .b-hero__media{min-height:660px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* Waha RFQ module. Every rule is scoped to .wrfq so nothing leaks into the rest of the page.
   It styles the production wizard markup (rfq-landing.js hooks) without renaming any hook.
   Tokens follow research/studies/spirit.md. Override the custom properties to map them to page tokens. */

.wrfq{
  --wrfq-night:#0E3B33;
  --wrfq-night-deep:#0A2E28;
  --wrfq-cream:#F7F2E9;
  --wrfq-paper:#FBF8F1;
  --wrfq-white:#FFFFFF;
  --wrfq-sand:#E3D4B7;
  --wrfq-ink:#15211C;
  --wrfq-muted:#4A5650;
  --wrfq-placeholder:#5F6B65;
  --wrfq-edge:#7A857E;
  --wrfq-green-ink:#256B4D;
  --wrfq-copper:#A86B3C;
  --wrfq-copper-ink:#8A5428;
  --wrfq-copper-lit:#D4A373;
  --wrfq-mint:#7FD0A6;
  --wrfq-mist:#C9D8CF;
  --wrfq-error:#A3321F;
  --wrfq-error-tint:#FBEDE8;
  --wrfq-focus:#0E3B33;
  --wrfq-surround:var(--wrfq-night);
  --wrfq-gutter:clamp(20px, 12px + 1.5vw, 32px);
  --wrfq-gate-max:600px;
  --wrfq-pad:clamp(20px, 12px + 2vw, 40px);
  --wrfq-r-s:8px;
  --wrfq-r-m:14px;
  --wrfq-fs-small:0.875rem;
  --wrfq-fs-body:clamp(1rem, 0.96rem + 0.1vw, 1.0625rem);
  --wrfq-fs-h3:clamp(1.1875rem, 1.12rem + 0.29vw, 1.375rem);
  --wrfq-fs-h2:clamp(1.625rem, 1.05rem + 1.9vw, 2.5rem);
  --wrfq-ease:160ms ease;
  box-sizing:border-box;
  margin:0;
  background:var(--wrfq-surround);
  padding:clamp(64px, 40px + 5vw, 112px) var(--wrfq-gutter);
  color:var(--wrfq-ink);
  font-family:var(--wrfq-font, inherit);
  font-size:var(--wrfq-fs-body);
  line-height:1.8;
  letter-spacing:0;
}
.wrfq *,.wrfq *::before,.wrfq *::after{box-sizing:border-box}
.wrfq [hidden]{display:none!important}
.wrfq h2,.wrfq h3,.wrfq h4,.wrfq p,.wrfq dl,.wrfq dd,.wrfq fieldset{margin:0}
.wrfq section,.wrfq form,.wrfq fieldset{margin:0;padding:0;border:0;background:none;box-shadow:none;min-height:0}
.wrfq button,.wrfq input,.wrfq select,.wrfq textarea{font:inherit;color:inherit;letter-spacing:0}
.wrfq button{cursor:pointer}
.wrfq svg{display:block}
.wrfq a{color:inherit}
.wrfq button,.wrfq a,.wrfq input,.wrfq select,.wrfq textarea,.wrfq summary,.wrfq label{-webkit-tap-highlight-color:transparent}
.wrfq :focus-visible{outline:3px solid var(--wrfq-focus);outline-offset:3px}
.wrfq [tabindex="-1"]:focus{outline:none}
.wrfq .sr-only,.wrfq .rfqw-hp{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}

/* The lit gate: one arched cream opening on night. The top is a true semicircle at any width. */
.wrfq__gate{
  position:relative;
  max-width:var(--wrfq-gate-max);
  margin-inline:auto;
  background:var(--wrfq-cream);
  border-radius:9999px 9999px 0 0;
  container-type:inline-size;
}
.wrfq__gate::after{
  content:"";
  position:absolute;
  inset-inline:calc(var(--wrfq-gutter) * -0.6);
  bottom:-2px;
  height:2px;
  background:var(--wrfq-copper-lit);
  pointer-events:none;
}
.wrfq .wrfq__crown{padding:12% var(--wrfq-pad) 0;text-align:center}
.wrfq .wrfq__title{font-size:var(--wrfq-fs-h2);font-weight:700;line-height:1.3;letter-spacing:0;color:var(--wrfq-night)}
.wrfq .wrfq__title span{display:block}
.wrfq .wrfq__title,.wrfq .wrfq__promise,.wrfq .wrfq__scope,.wrfq .rfqw-hint,.wrfq [data-step] h3,.wrfq .rfqw-choice small,.wrfq .rfqw-optional summary{text-wrap:balance}
.wrfq .rfqw-context-note,.wrfq .wrfq-scope-note,.wrfq .rfqw-recovery p{text-wrap:pretty}
.wrfq .wrfq__promise{max-width:26em;margin:14px auto 0;font-size:var(--wrfq-fs-body);line-height:1.7;color:var(--wrfq-ink)}
.wrfq .wrfq__scope{max-width:26em;margin:6px auto 0;font-size:var(--wrfq-fs-small);font-weight:600;line-height:1.6;color:var(--wrfq-copper-ink)}

/* Wizard frame */
.wrfq .rfqw-card{padding:28px var(--wrfq-pad) var(--wrfq-pad);background:transparent;border:0;box-shadow:none;min-width:0}
.wrfq .rfqw-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;font-size:var(--wrfq-fs-small);line-height:1.6}
.wrfq .rfqw-top [data-step-label]{font-size:var(--wrfq-fs-small);font-weight:600;color:var(--wrfq-night)}
.wrfq .rfqw-step-status{font-size:var(--wrfq-fs-small);line-height:1.6;color:var(--wrfq-muted);white-space:nowrap}
.wrfq noscript p{font-size:var(--wrfq-fs-body);line-height:1.8;color:var(--wrfq-ink);margin-bottom:16px}
.wrfq .rfqw-progress-track{height:4px;border-radius:2px;background:var(--wrfq-sand);overflow:hidden;margin-bottom:28px}
.wrfq .rfqw-progress-track span{display:block;height:100%;background:var(--wrfq-night);border-radius:2px;transition:width 200ms ease}
/* Calm by design: the stepper list, the chip summary and the service counter repeat what the
   status line and the review step already say, and the counter can read "0 خدمات مختارة". */
.wrfq .rfqw-progress,.wrfq .rfqw-live-summary,.wrfq .rfqw-selection-note{display:none!important}

.wrfq [data-step] h3{font-size:var(--wrfq-fs-h3);font-weight:600;line-height:1.5;color:var(--wrfq-night);margin-bottom:6px}
.wrfq .rfqw-hint{font-size:var(--wrfq-fs-body);line-height:1.8;color:var(--wrfq-muted);margin-bottom:20px}

/* Services: three full width rows, each one a large tap target. */
.wrfq .rfqw-services{border:0;padding:0;min-width:0;display:grid;gap:12px}
.wrfq .rfqw-choice{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 26px;
  align-items:center;
  gap:14px;
  min-height:76px;
  padding:14px 16px;
  background:var(--wrfq-white);
  border:1px solid var(--wrfq-edge);
  border-radius:var(--wrfq-r-m);
  color:var(--wrfq-ink);
  cursor:pointer;
  transition:background-color var(--wrfq-ease),border-color var(--wrfq-ease),color var(--wrfq-ease);
}
.wrfq .rfqw-choice input{position:absolute;inset-block-start:50%;inset-inline-start:50%;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.wrfq .rfqw-scene{grid-column:1;grid-row:1;width:44px;height:40px;color:var(--wrfq-green-ink)}
.wrfq .rfqw-scene svg{width:100%;height:100%;overflow:visible}
.wrfq .rfqw-scene svg *,.wrfq .rfqw-detail-title svg *{vector-effect:non-scaling-stroke;stroke-width:1.75px}
.wrfq .scene-accent{stroke:var(--wrfq-copper)}
.wrfq .rfqw-choice-copy{grid-column:2;grid-row:1;min-width:0}
.wrfq .rfqw-choice strong{display:block;font-size:var(--wrfq-fs-body);font-weight:700;line-height:1.5}
.wrfq .rfqw-choice small{display:block;font-size:var(--wrfq-fs-small);line-height:1.6;color:var(--wrfq-muted);margin-top:2px}
.wrfq .rfqw-check{grid-column:3;grid-row:1;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--wrfq-edge);display:grid;place-items:center;color:transparent;background:var(--wrfq-white);transition:background-color var(--wrfq-ease),border-color var(--wrfq-ease),color var(--wrfq-ease)}
.wrfq .rfqw-check svg{width:18px;height:18px}
.wrfq .rfqw-choice:has(input:checked){background:var(--wrfq-night);border-color:var(--wrfq-night);color:var(--wrfq-cream)}
.wrfq .rfqw-choice:has(input:checked) small{color:var(--wrfq-mist)}
.wrfq .rfqw-choice:has(input:checked) .rfqw-scene{color:var(--wrfq-cream)}
.wrfq .rfqw-choice:has(input:checked) .scene-accent{stroke:var(--wrfq-copper-lit)}
.wrfq .rfqw-choice:has(input:checked) .rfqw-check{background:var(--wrfq-mint);border-color:var(--wrfq-mint);color:var(--wrfq-night)}
.wrfq .rfqw-choice:has(input:focus-visible){outline:3px solid var(--wrfq-focus);outline-offset:3px}
.wrfq .rfqw-choice:has(input[aria-invalid="true"]:not(:checked)){border-color:var(--wrfq-error)}
.wrfq [data-step="services"]:has(.rfqw-services input:checked) .rfqw-error,
.wrfq form:has([data-step="services"]:not([hidden]) .rfqw-services input:checked) .rfqw-form-error{display:none}
@supports not selector(:has(*)){
  .wrfq .rfqw-choice:focus-within{outline:3px solid var(--wrfq-focus);outline-offset:3px}
  .wrfq .rfqw-choice input{opacity:1;width:20px;height:20px;position:static;grid-column:3;grid-row:1;pointer-events:auto}
  .wrfq .rfqw-check{display:none}
}
@media (hover:hover){
  .wrfq .rfqw-choice:hover{border-color:var(--wrfq-night)}
  .wrfq .rfqw-quick-picks button:hover,.wrfq .rfqw-tip-picks button:hover{border-color:var(--wrfq-night)}
  .wrfq .rfqw-next:hover,.wrfq .rfqw-send:hover,.wrfq .rfqw-result button:hover{background:var(--wrfq-night-deep)}
  .wrfq .rfqw-back:hover,.wrfq .rfqw-recovery a[href]:hover{border-color:var(--wrfq-night)}
}

/* Fields */
.wrfq .rfqw-field{min-width:0;margin-bottom:18px}
.wrfq .rfqw-field label{display:block;margin-bottom:8px;font-size:var(--wrfq-fs-small);font-weight:600;line-height:1.6;color:var(--wrfq-ink)}
.wrfq .rfqw-field input,.wrfq .rfqw-field select,.wrfq .rfqw-field textarea{
  display:block;
  width:100%;
  max-width:100%;
  min-height:52px;
  margin:0;
  padding:12px 14px;
  background:var(--wrfq-white);
  border:1px solid var(--wrfq-edge);
  border-radius:var(--wrfq-r-s);
  color:var(--wrfq-ink);
  font-size:max(16px, var(--wrfq-fs-body));
  line-height:1.5;
  transition:border-color var(--wrfq-ease),box-shadow var(--wrfq-ease);
}
.wrfq .rfqw-field select{
  -webkit-appearance:none;
  appearance:none;
  padding-inline-end:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5L7 7l5.5-5.5' fill='none' stroke='%230E3B33' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 16px center;
  background-size:14px 9px;
  text-overflow:ellipsis;
}
.wrfq .rfqw-field textarea{min-height:112px;resize:vertical}
.wrfq .rfqw-field input::placeholder,.wrfq .rfqw-field textarea::placeholder{color:var(--wrfq-placeholder);opacity:1}
/* Focus on a field is a 2px night edge; an invalid field keeps its red edge and gains a night ring when focused. */
.wrfq .rfqw-field input:focus,.wrfq .rfqw-field select:focus,.wrfq .rfqw-field textarea:focus{border-color:var(--wrfq-night);box-shadow:inset 0 0 0 1px var(--wrfq-night);outline:none}
.wrfq .rfqw-field input:disabled,.wrfq .rfqw-field select:disabled,.wrfq .rfqw-field textarea:disabled{background-color:var(--wrfq-paper);color:var(--wrfq-muted);border-color:var(--wrfq-sand);cursor:not-allowed}
.wrfq .rfqw-field [aria-invalid="true"],.wrfq .rfqw-field [aria-invalid="true"]:focus{border-color:var(--wrfq-error);box-shadow:inset 0 0 0 1px var(--wrfq-error)}
.wrfq .rfqw-field [aria-invalid="true"]:focus{outline:2px solid var(--wrfq-focus);outline-offset:2px}
.wrfq .rfqw-error{margin-top:6px;font-size:var(--wrfq-fs-small);font-weight:600;line-height:1.6;color:var(--wrfq-error)}
.wrfq .rfqw-error:empty{display:none}
.wrfq .rfqw-two-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px}
.wrfq .rfqw-field-separator{height:1px;background:var(--wrfq-sand);margin:8px 0 24px}
.wrfq .rfqw-fields-note{margin:-8px 0 16px;font-size:var(--wrfq-fs-small);line-height:1.6;color:var(--wrfq-muted)}

/* Quick picks and service tips: buttons, never pills, at least 48px tall. */
.wrfq .rfqw-quick-picks,.wrfq .rfqw-tip-picks{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 18px}
.wrfq .rfqw-quick-picks button,.wrfq .rfqw-tip-picks button{
  min-height:48px;
  padding:10px 16px;
  background:var(--wrfq-white);
  border:1px solid var(--wrfq-edge);
  border-radius:var(--wrfq-r-s);
  color:var(--wrfq-ink);
  font-size:var(--wrfq-fs-body);
  font-weight:600;
  line-height:1.4;
  transition:background-color var(--wrfq-ease),border-color var(--wrfq-ease),color var(--wrfq-ease);
}
.wrfq .rfqw-quick-picks button[aria-pressed="true"],.wrfq .rfqw-tip-picks button[aria-pressed="true"]{background:var(--wrfq-night);border-color:var(--wrfq-night);color:var(--wrfq-cream)}
.wrfq .rfqw-quick-picks button:disabled,.wrfq .rfqw-tip-picks button:disabled{opacity:.55;cursor:not-allowed}
/* Below 560px the bands and dates are chosen from the large native lists; the shortcut rows return on wider cards. */
.wrfq [data-step="workforce"] .rfqw-quick-picks{display:none}
.wrfq .rfqw-tip-picks{margin:4px 0 0}

/* The D13 qualifier sits directly under the city list, on a copper clay line. */
.wrfq .wrfq-scope-note{margin:0 0 20px;padding-inline-start:12px;border-inline-start:2px solid var(--wrfq-copper);font-size:var(--wrfq-fs-small);line-height:1.7;color:var(--wrfq-muted)}

/* Optional disclosure rows */
.wrfq .rfqw-optional{margin:4px 0 18px;border-top:1px solid var(--wrfq-sand);border-bottom:1px solid var(--wrfq-sand)}
.wrfq .rfqw-optional summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 0;list-style:none;cursor:pointer;font-size:var(--wrfq-fs-body);font-weight:600;line-height:1.5;color:var(--wrfq-green-ink)}
.wrfq .rfqw-optional summary::-webkit-details-marker{display:none}
.wrfq .rfqw-optional summary::after{content:"";flex:none;width:9px;height:9px;margin-inline-end:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform var(--wrfq-ease)}
.wrfq .rfqw-optional[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.wrfq .rfqw-optional[open]>div{padding:8px 0 4px}
.wrfq .rfqw-context-note{margin-top:4px;font-size:var(--wrfq-fs-small);line-height:1.75;color:var(--wrfq-muted)}

/* Details step */
.wrfq .rfqw-detail-panel{margin-bottom:14px;padding:16px;background:var(--wrfq-white);border:1px solid var(--wrfq-sand);border-radius:var(--wrfq-r-m)}
.wrfq .rfqw-detail-title{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.wrfq .rfqw-detail-title>span{flex:none;width:36px;height:33px;color:var(--wrfq-green-ink)}
.wrfq .rfqw-detail-title svg{width:100%;height:100%;overflow:visible}
.wrfq .rfqw-detail-title h4{font-size:var(--wrfq-fs-body);font-weight:700;line-height:1.5;color:var(--wrfq-night)}
.wrfq .rfqw-detail-panel .rfqw-field{margin-bottom:12px}

/* Review step: the JS writes .rfqw-review-block groups with an edit button each. */
.wrfq .rfqw-review-block{margin-bottom:12px;padding:16px;background:var(--wrfq-white);border:1px solid var(--wrfq-sand);border-radius:var(--wrfq-r-m)}
.wrfq .rfqw-review-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.wrfq .rfqw-review-heading strong{font-size:var(--wrfq-fs-body);font-weight:700;color:var(--wrfq-night)}
.wrfq .rfqw-review-heading button{min-height:44px;min-width:64px;padding:8px 14px;background:transparent;border:1px solid var(--wrfq-edge);border-radius:var(--wrfq-r-s);color:var(--wrfq-green-ink);font-size:var(--wrfq-fs-small);font-weight:600}
.wrfq .rfqw-review-block dl{display:grid;grid-template-columns:minmax(88px,.75fr) minmax(0,1.25fr);gap:6px 14px;font-size:var(--wrfq-fs-small);line-height:1.7}
.wrfq .rfqw-review-block dt{color:var(--wrfq-muted)}
.wrfq .rfqw-review-block dd{color:var(--wrfq-ink);font-weight:600;overflow-wrap:anywhere;white-space:pre-wrap;unicode-bidi:plaintext;text-align:right}
.wrfq .rfqw-review-block>p{font-size:var(--wrfq-fs-small);color:var(--wrfq-muted)}
.wrfq .wrfq-promise-note{margin-top:16px;padding:12px 14px;background:var(--wrfq-paper);border-inline-start:2px solid var(--wrfq-copper);color:var(--wrfq-ink);font-weight:600}

/* Actions */
.wrfq .rfqw-form-error{margin-top:18px;padding:12px 14px;background:var(--wrfq-error-tint);border-radius:var(--wrfq-r-s);color:var(--wrfq-error);font-size:var(--wrfq-fs-small);font-weight:600;line-height:1.7}
.wrfq .rfqw-form-error:focus{outline:none}
.wrfq .rfqw-actions{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.wrfq .rfqw-actions button{min-height:56px;border-radius:var(--wrfq-r-m);font-size:var(--wrfq-fs-body);font-weight:700;line-height:1.4;transition:background-color var(--wrfq-ease),border-color var(--wrfq-ease),color var(--wrfq-ease)}
.wrfq .rfqw-next,.wrfq .rfqw-send{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:14px 24px;background:var(--wrfq-night);border:1px solid var(--wrfq-night);color:var(--wrfq-cream)}
.wrfq .rfqw-actions .rfqw-back{flex:0 0 auto;min-height:48px;padding:10px 18px;background:transparent;border:1px solid var(--wrfq-edge);color:var(--wrfq-ink)}
.wrfq .rfqw-actions button:disabled{opacity:.6;cursor:wait}
.wrfq .rfqw-privacy{margin-top:14px;font-size:var(--wrfq-fs-small);line-height:1.6;text-align:center;color:var(--wrfq-muted)}
.wrfq .rfqw-draft-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:8px;border-top:1px solid var(--wrfq-sand)}
.wrfq .rfqw-draft-note{font-size:var(--wrfq-fs-small);line-height:1.6;color:var(--wrfq-muted)}
.wrfq .rfqw-clear{flex:none;min-height:44px;padding:8px 0;background:none;border:0;color:var(--wrfq-green-ink);font-size:var(--wrfq-fs-small);font-weight:600;text-decoration:underline;text-underline-offset:4px}
/* The privacy line appears where personal data is typed; the draft row once there is a draft. */
.wrfq__app.wrfq-boot:not([data-current-step]) .rfqw-privacy,
.wrfq__app[data-current-step]:not([data-current-step="contact"]):not([data-current-step="review"]) .rfqw-privacy{display:none}
.wrfq__app[data-current-step="services"] .rfqw-draft-row,
.wrfq .rfqw-draft-row:not(:has(> :not([hidden]))){display:none}

/* After a failed send the recovery block sits under the send button, so the draft row and privacy line step aside. */
.wrfq .rfqw-card:has(> .rfqw-recovery:not([hidden])) .rfqw-draft-row,
.wrfq .rfqw-card:has(> .rfqw-recovery:not([hidden])) .rfqw-privacy{display:none}

/* Native form mode, when JavaScript is off or the wizard never loaded: every step shows, so drop the step counter and separate the steps. */
.wrfq__app:not(.wrfq-boot):not([data-current-step]) .rfqw-top,
.wrfq__app:not(.wrfq-boot):not([data-current-step]) .rfqw-progress-track{display:none}
.wrfq__app:not(.wrfq-boot):not([data-current-step]) [data-step]+[data-step]{margin-top:32px;padding-top:28px;border-top:1px solid var(--wrfq-sand)}
.wrfq__app:not(.wrfq-boot):not([data-current-step]) .rfqw-quick-picks,
.wrfq__app:not(.wrfq-boot):not([data-current-step]) .rfqw-tip-picks,
.wrfq__app:not(.wrfq-boot):not([data-current-step]) [data-review]{display:none!important}

/* Result and recovery. The production success summary joins its parts with a dash, so it stays hidden. */
.wrfq .rfqw-result{padding:12px 0 4px;text-align:center}
.wrfq .rfqw-result:focus{outline:none}
.wrfq .rfqw-success-mark{position:relative;display:block;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--wrfq-mint);font-size:0;color:transparent}
.wrfq .rfqw-success-mark::after{content:"";position:absolute;left:25px;top:14px;width:14px;height:27px;border-right:3px solid var(--wrfq-night);border-bottom:3px solid var(--wrfq-night);transform:rotate(45deg)}
.wrfq .rfqw-result h3{font-size:var(--wrfq-fs-h3);font-weight:700;line-height:1.5;color:var(--wrfq-night);margin-bottom:6px}
.wrfq .rfqw-result p{font-size:var(--wrfq-fs-body);line-height:1.8;color:var(--wrfq-muted);overflow-wrap:anywhere}
.wrfq .rfqw-result .rfqw-success-summary{display:none}
.wrfq .rfqw-result button{min-height:52px;margin-top:20px;padding:12px 24px;background:var(--wrfq-night);border:1px solid var(--wrfq-night);border-radius:var(--wrfq-r-m);color:var(--wrfq-cream);font-size:var(--wrfq-fs-body);font-weight:700}
.wrfq .rfqw-recovery{margin-top:18px;padding:16px;background:var(--wrfq-white);border:1px solid var(--wrfq-sand);border-radius:var(--wrfq-r-m)}
.wrfq .rfqw-recovery p{margin-bottom:12px;font-size:var(--wrfq-fs-body);line-height:1.75;color:var(--wrfq-ink)}
.wrfq .rfqw-recovery a{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:8px;padding:10px 16px;border:1px solid var(--wrfq-edge);border-radius:var(--wrfq-r-m);color:var(--wrfq-night);font-weight:700;text-decoration:none}

/* Before rfq-landing.js has initialised, show only the first step so nothing jumps.
   The inline boot script in rfq.html removes the class after 8 seconds if the wizard never loads,
   which gives back the complete native form. Without JavaScript the class is never set. */
.wrfq-boot form[data-rfq-wizard]:not([data-wizard-ready]) [data-step]:not([data-step="services"]),
.wrfq-boot form[data-rfq-wizard]:not([data-wizard-ready]) .rfqw-send{display:none!important}
.wrfq-boot form[data-rfq-wizard]:not([data-wizard-ready]) .rfqw-next{display:flex!important}

/* Wider cards: the card decides, not the viewport, so the module also works inside a narrow column. */
@container (min-width:480px){
  .wrfq .rfqw-actions{flex-direction:row;gap:12px}
  .wrfq .rfqw-actions .rfqw-back{min-height:56px;min-width:96px}
}
@container (min-width:560px){
  .wrfq .rfqw-two-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wrfq [data-step="workforce"] .rfqw-quick-picks{display:flex}
  .wrfq .rfqw-recovery{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
  .wrfq .rfqw-recovery p{grid-column:1/-1}
  .wrfq .wrfq__crown{padding-top:9%}
}

@media (prefers-reduced-motion:reduce){
  .wrfq *,.wrfq *::before,.wrfq *::after{transition:none!important;animation:none!important}
}
@media (forced-colors:active){
  .wrfq .rfqw-check svg{visibility:hidden}
  .wrfq .rfqw-choice:has(input:checked) .rfqw-check svg{visibility:visible}
  .wrfq .rfqw-choice:has(input:checked){outline:3px solid CanvasText}
  .wrfq .rfqw-quick-picks button[aria-pressed="true"],.wrfq .rfqw-tip-picks button[aria-pressed="true"]{outline:3px solid CanvasText}
}

/* Direction B mapping for the RFQ module: the request form as one white card on the sand ground, its heading set
   like the other split layout headings (start aligned, the arcs above it, the scope line as a regular subtitle).
   Hooks, ids and markup are the current page's; only styles change here. */
.wrfq{--wrfq-surround:transparent;--wrfq-cream:#F7F4EE;--wrfq-paper:#F2EFE6;--wrfq-sand:#E4E0D5;--wrfq-copper:#2E7D5B;--wrfq-copper-ink:#256B4D;--wrfq-copper-lit:#7FD0A6;--wrfq-fs-small:var(--fs-s);--wrfq-fs-body:var(--fs-b);--wrfq-fs-h3:var(--fs-h3);--wrfq-fs-h2:var(--fs-h2);--wrfq-gate-max:none;--wrfq-r-m:var(--r-in);--wrfq-r-s:var(--r-in);padding:0;background:transparent;min-width:0}
.wrfq .wrfq__gate{max-width:none;margin:0;background:transparent;border-radius:0}
.wrfq .wrfq__gate::after{display:none}
.wrfq .wrfq__crown{padding:0 0 24px;text-align:start}
.wrfq .wrfq__title{color:var(--ink);font-size:var(--fs-h2);line-height:1.3}
.wrfq .wrfq__title span+span{color:var(--green)}
.wrfq .wrfq__scope{max-width:none;margin:10px 0 0;color:var(--muted);font-size:var(--fs-b);font-weight:400;line-height:1.75}
.wrfq .rfqw-card{padding:22px 18px 20px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--sh-2)}
.wrfq .rfqw-actions button{border-radius:var(--r-pill)}
.wrfq .rfqw-next,.wrfq .rfqw-send{box-shadow:0 8px 18px rgba(14,59,51,.18)}
.wrfq .rfqw-choice{border-color:#C9CEC6;border-radius:var(--r-in)}
.wrfq .rfqw-privacy a{display:inline-block;padding-block:11px;margin-block:-11px;color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.wrfq .rfqw-optional summary::after{width:32px;height:32px;margin-inline-end:0;border:0;border-radius:50%;background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%230E3B33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;transform:none}
.wrfq .rfqw-optional[open] summary::after{transform:rotate(180deg)}
.wrfq .rfqw-review-block dl{grid-template-columns:minmax(80px,.6fr) minmax(0,1.4fr)}
@container (max-width:420px){.wrfq .rfqw-review-block dl{grid-template-columns:minmax(0,1fr);row-gap:0}.wrfq .rfqw-review-block dd{margin-bottom:6px}}
/* A wide card (desktop) shows the three services as three tiles in a row instead of three long rows with the
   label and the check mark far apart. CSS only; the markup and the inputs are unchanged. */
@container (min-width:560px){
  .wrfq .rfqw-services{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .wrfq .rfqw-choice{grid-template-columns:minmax(0,1fr) 26px;grid-template-rows:auto 1fr;align-items:start;gap:16px 8px;min-height:156px;padding:18px 16px 16px;border-radius:var(--r-card)}
  .wrfq .rfqw-scene{grid-column:1;grid-row:1;width:52px;height:48px}
  .wrfq .rfqw-check{grid-column:2;grid-row:1}
  .wrfq .rfqw-choice-copy{grid-column:1/-1;grid-row:2;align-self:end}
}
@media (min-width:768px){
  .wrfq .wrfq__crown{padding:0 0 28px}
  .wrfq .wrfq__scope{font-size:var(--fs-l)}
  .wrfq .rfqw-card{padding:30px 32px 28px}
}
@media (min-width:1024px){
  .wrfq .rfqw-card{padding:34px 40px 30px}
}

/* ARABIC V2 LAYER (v2 Arabic owner, 3 October 2026): the art director's twelve findings on the blind committee
   results, for the Arabic page only. build_css.py appends this file last, after the RFQ mapping, so each rule here
   wins over the base rule it names by source order at the same specificity. The numbers in brackets are the findings
   in out/versions_work/v2/ar/NOTES.txt.
   The English stylesheet is built by work_en/build_en.py from dir-B.page.css and dir-B.rfq-map.css only. It never
   reads this file, so this layer does not change the English page. */

/* One vertical rhythm per width [12]: every gap between two sections is 64 px on phones, 88 px from 768 px and
   104 px from 1024 px. The questions used to sit 80 to 122 px from their neighbours (the quote section's own bottom
   padding plus 8 px, then the list's last margin plus 8 px), and the app section ignored the overhang it lost. */
:root{--sec-y:64px}
.b-sec{padding-block:var(--sec-y)}
.b-plans{padding-top:var(--sec-y)}
.b-sec.b-faq{padding-top:var(--sec-y)}
.b-quote{padding-bottom:0}
#faq details:last-child{margin-bottom:0}
.b-cta{padding-top:0}
.b-app{padding-bottom:var(--sec-y)}

/* Facts bar [5]: the four cells share their icon and title lines even when a sub label wraps. */
.b-facts li{justify-content:flex-start}

/* Steps [11]: the number badge is a child of the icon and sits on the icon's top start corner at every width (it
   used to be placed from the list item, so it landed on the end corner on phones and the start corner on desktop).
   Its centre lies on the ring, 45 degrees up from the start side. */
.b-steps__n{inset-inline-start:-4px;inset-inline-end:auto;top:-4px}

/* First screen [5]: the three ISO marks size to their labels, so each label keeps one line at 390 px (and in the
   380 px copy column at 768 px) and the row drops from 61 to 42 px. Narrower screens let the longest label wrap, as
   before. From 1024 px the equal columns already hold every label on one line. */
@media (max-width:1023.98px){
  .b-iso{grid-template-columns:repeat(3,auto);justify-content:space-between}
}

/* PHONES */
@media (max-width:767.98px){

  /* Facts bar [4]: sub labels at the body size. */
  .b-facts li{font-size:var(--fs-b)}

  /* Partner cards [2]: one column of full width cards under the housing card, each a horizontal card: the photo
     (a centre crop at 120 by 120) at the start, the title with its tag on one line, the line at body size, one
     check [3] and the existing ابدأ الآن link, whose overlay still makes the whole card one tap target. */
  .b-plans__list{grid-template-columns:minmax(0,1fr)}
  /* The photo is 120 px from 388 px up and gives way below that (92 px at 360, 72 px at 340), so the check keeps
     one line. */
  .b-plan--side{display:grid;grid-template-columns:clamp(72px,calc(100vw - 268px),120px) minmax(0,1fr);column-gap:14px;align-items:start;padding:12px}
  .b-plan--side .b-plan__ph{width:100%;height:auto;aspect-ratio:1}
  .b-plan--side .b-plan__ph img{object-position:50% 50%}
  .b-plan--side .b-plan__body{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;padding:0}
  .b-plan--side .b-plan__tag{justify-self:start;margin:0}
  .b-plan--side .b-plan__s,.b-plan--side .b-plan__f,.b-plan--side .b-plan__go{grid-column:1/-1}
  .b-plan--side .b-plan__s{margin-top:6px;font-size:var(--fs-b);line-height:1.6}
  .b-plan--side .b-plan__f{margin:12px 0 0;padding-top:10px}
  .b-plan--side .b-plan__f li{align-items:center;font-size:var(--fs-b)}
  /* [3] On phones the check that remains is the useful one: the quotation line, not the partner word. */
  .b-plan--side .b-plan__f li:first-child{display:none}
  .b-plan--side .b-plan__f li+li{display:flex}
  .b-plan--side .b-plan__go{justify-self:start;margin-top:4px}

  /* Why band [4]: the six promises as one list, the ring icon at the start spanning the title and the line, the
     line at body size and the full text width. */
  .b-feats{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .b-feats li{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;align-items:start}
  .b-feats__i{grid-row:1/3;margin:0}
  .b-feats h3,.b-feats p{grid-column:2}
  .b-feats h3{padding-top:8px}
  .b-feats p{font-size:var(--fs-b)}

  /* App panel [1]: the four service tiles in two rows, inside the panel (no overhang under it any more). The card
     reaches 8 px into the panel's side padding, so the tiles get the most width the panel can give. */
  .b-app__panel{padding-bottom:20px}
  .b-app__shot{margin:4px -8px 0;padding:6px}

  /* Quote [10]: the heading centred like every other full width light section on phones. */
  .wrfq .wrfq__crown{text-align:center}
  .wrfq .wrfq__crown::before{margin-inline:auto}

  /* Quote [7]: the existing direct contact card shows under the form as one compact block: its label, then the
     phone number and the outlined WhatsApp button side by side. The photo stays a wide screen element. The block
     carries data-actionbar-hide, so the phone action bar never doubles it. */
  .b-quote__grid{grid-template-columns:minmax(0,1fr)}
  .b-quote__side{display:block;margin-top:16px}
  .b-quote__ph{display:none}
  .b-quote__alt{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 16px}
  .b-quote__alt-t{flex-basis:100%;text-align:center}
  .b-quote__call{display:inline-flex;align-items:center;gap:10px;min-height:48px;color:var(--ink);font-size:var(--fs-l);font-weight:700;text-decoration:none;letter-spacing:.01em;white-space:nowrap}
  .b-quote__ring{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--sage);color:var(--green-ink)}
  .b-quote__alt .b-btn{min-height:48px;padding-inline:20px}
}
/* Narrow phones: the number and the WhatsApp button still share one row from 340 px (below that the button wraps
   under the number). */
@media (max-width:379.98px){
  .b-quote__alt{column-gap:12px}
  .b-quote__call{gap:8px;font-size:var(--fs-b)}
  .b-quote__alt .b-btn{padding-inline:16px}
}

/* TABLETS AND UP */
@media (min-width:768px){
  :root{--sec-y:88px}
  /* The app shot keeps its deliberate overhang of 40 px (48 px from 1024 px), so the gap after it stays one step. */
  .b-app{padding-bottom:calc(var(--sec-y) + 40px)}

  /* Plan row [8]: explicit tracks shared by the three cards (photo, title, tag, line, checks, action), so their
     dividers, first checks and buttons share lines whatever the length of each line. The card and its body are
     subgrids; the housing card keeps its 16 px larger block margins because its negative margin, border and padding
     add up to the same 11 px (13 px from 1024 px) as a partner card's, so the edge tracks stay shared too. */
  .b-plans__list{grid-template-rows:repeat(6,auto);row-gap:0}
  .b-plans__list .b-plan--main,.b-plans__list .b-plan--side{display:grid;grid-row:1/span 6;grid-template-rows:subgrid}
  .b-plan__body{display:grid;grid-row:2/span 5;grid-template-rows:subgrid;align-items:start}
  .b-plan__tag{justify-self:start}

  /* App panel [6]: one start aligned column (eyebrow, heading, lead), the two checks in one row under it, then the
     tile row in the white card, without the window header or the toolbar. No icon tile: the eyebrow names the panel. */
  .b-app__panel{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "pts" "shot";align-items:start;row-gap:20px}
  .b-app__pts{display:flex;flex-wrap:wrap;gap:12px 32px}
  .b-app__shot{margin:12px 0 -40px;padding:8px}
}

/* DESKTOP */
@media (min-width:1024px){
  :root{--sec-y:104px}
  .b-app{padding-bottom:calc(var(--sec-y) + 48px)}
  .b-app__shot{margin-bottom:-48px}
}

/* ARABIC V3 LAYER (v3 Arabic owner, 3 October 2026): the art director's nine findings on the v1 committee results,
   for the Arabic page only. build_css.py appends this file after the v2 layer, so each rule here wins over the rule it
   names by source order at the same specificity. Numbers in brackets are the findings in
   out/versions_work/v3/ar/NOTES.txt. The English stylesheet never reads this file (work_en/build_en.py reads only
   dir-B.page.css and dir-B.rfq-map.css and pins dir-B.ar-v2.css); the English owner mirrors it in dir-B-en.page.css.
   Sizes stay on the page scale (14, 16, 18, 20 and the heading sizes), so every width keeps six font sizes. */

/* [4] Readability. Secondary text in the brand board's ink grey: 8.75 to 1 on the sand ground, 9.61 on white,
   7.89 on the footer identity card (was #56635C, 5.74 and 5.17). Body text one step darker. */
:root{--muted:#3A4842;--text:#26332E}
/* [4] 14 px stays only for the ISO marks, the logo lockup's tagline, footer meta and the privacy note. */
.b-quote__alt-t,.b-cta__lbl,.b-app__eye,.b-plan__tag,.b-steps__n,.b-lang{font-size:var(--fs-b)}
/* [4] Three 16 px labels that sat between 5.2 and 6.4 to 1 reach 7 to 1 or more with board colours: the partner card
   tags in ink on sage (10.3), the footer email in ink with its green underline (10.2). The phone partner link takes
   Green Deep #1C5A40 below. */
.b-plan__tag:not(.b-plan__tag--main){color:var(--ink)}
.b-idl a{color:var(--ink);text-decoration-color:var(--green)}

/* [7] The brand ripple (concentric rings from one source) on the facts bar, rings from its start edge, and the
   step badges in copper ink (white digits 6.21 to 1). Copper appears only here, in the inclusion icons and on the
   quotation card's rule; teal only inside the app panel. */
.b-facts{background:repeating-radial-gradient(circle at 100% 50%,rgba(127,208,166,.06) 0 1.4px,transparent 1.4px 26px) var(--night)}
.b-steps__n{background:#8A5428;color:#FFFFFF}

/* [5] Company details under the facts bar, a link to the identity block in the footer, built from its rows.
   Phones and tablets: a compact card (label, legal name, then VAT and national address side by side, keys over
   values). From 1024 px: one pill line under the facts bar. */
.b-idrow__wrap{position:relative;z-index:2;margin-top:16px}
.b-idrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:2px;padding:11px 16px 12px;border:1px solid var(--line);border-radius:var(--r-card);background:#FBF8F1;color:var(--ink);text-decoration:none;transition:border-color .16s ease,background-color .16s ease}
.b-idrow__t{grid-column:1/-1;display:flex;align-items:center;gap:6px;color:var(--ink);font-size:var(--fs-s);font-weight:700;line-height:1.45}
.b-idrow__t .b-i{width:18px;height:18px;color:var(--green-ink)}
.b-idrow__v{display:block;color:var(--ink);font-size:var(--fs-b);font-weight:600;line-height:1.45}
.b-idrow__v--name{grid-column:1/-1;margin:1px 0 5px}
.b-idrow__k{display:block;color:var(--muted);font-size:var(--fs-s);font-weight:400}
.b-idrow bdi{white-space:nowrap}
@media (hover:hover){.b-idrow:hover{border-color:var(--sand-2);background:#FFFFFF}}

/* [3] What the bed price covers: the eight items of the approved faq-scope answer as a sand block under the plan
   row (2 columns on phones, 4 from 768 px), copper line icons in white discs. */
.b-inc{max-width:980px;margin:24px auto 0;padding:22px 18px;border-radius:var(--r-card);background:#EFE7D6}
.b-inc__t{color:var(--ink);font-size:var(--fs-l);font-weight:700;line-height:1.4;text-align:center}
.b-inc__l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;margin-top:16px}
.b-inc__l li{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:var(--fs-b);font-weight:600;line-height:1.35}
.b-inc__i{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#FFFFFF;color:#A86B3C}
.b-inc__i .b-i{width:22px;height:22px}

/* [1] The app panel as the brand's water teal "app and tech layer": a light panel (no longer the fourth dark block in
   a row), ink type, teal ink eyebrow (4.94 to 1 or more on every stop), teal check discs. The product screen sits in
   a white window card: radius 16 at every width. */
.b-app__panel{border:1px solid rgba(42,166,161,.22);background:linear-gradient(165deg,#DDEFEC 0%,#EAF3EF 50%,#F3EFE5 100%);color:var(--text)}
.b-app .b-h2{color:var(--ink)}
.b-app__lead,.b-app__pts li{color:var(--text)}
.b-app__eye{color:#17706C}
.b-app__pts .b-i{background:rgba(42,166,161,.16);color:#17706C}
.b-app :focus-visible{outline-color:var(--night)}
.b-app__shot{border-radius:16px;border:1px solid rgba(14,59,51,.12);background:#F6F8F7;box-shadow:0 28px 60px rgba(14,59,51,.18),0 3px 8px rgba(14,59,51,.08)}

/* [2] Beside the form from 768 px: what the written quotation carries, in place of the rendered dusk building (which
   moves to the closing band). Hidden on phones, where the photo was hidden too. */
.b-qdoc{display:none}

/* [6] The closing band: the page's arch returns at the end, standing on the bar, with the dusk exterior; the bar takes
   the brand ripple, its rings rising from the bar's far lower corner (8 percent from the left, the end side), the
   corner the arch leaves open. Measured both ways: with the source under the arch (92 percent) the arch hides the
   rings' centre and the rest read as near vertical stripes; from the far corner they read as ripples and balance the
   arch. */
.b-cta__bar{overflow:visible;background:repeating-radial-gradient(circle at 8% 115%,rgba(127,208,166,.085) 0 1.6px,transparent 1.6px 30px) var(--night)}
.b-cta__arch{position:relative}
.b-archbox--cta{aspect-ratio:4/5}
/* The closing heading breaks before its accent phrase when it needs two lines (جاهز لطلب / عرض السعر؟), and the
   short check lines balance instead of leaving one word alone (measured at 768 px with 16 px checks). */
.b-cta__t .b-acc,.b-qdoc__nw{white-space:nowrap}
.b-plan__f li,.b-qdoc__l li{text-wrap:balance}

/* PHONES */
@media (max-width:767.98px){
  /* [4] The hero service labels at body size; reading lines a little more open. */
  .b-svc li{font-size:var(--fs-b)}
  .b-plan__s,.b-plan--main .b-plan__s,.b-plan--side .b-plan__s,.b-steps p,.b-feats p{line-height:1.75}
  .b-plan__go{color:#1C5A40}

  /* [1] The four tiles keep their two rows, now under a 26 px window bar inside the same card: the render's own bar
     colour, hairline and three dots (8 px, at the left as in the render), so phone and desktop show the same window. */
  .b-app__shot{padding:0 6px 6px}
  .b-app__shot::before{content:"";display:block;height:26px;margin:0 -6px 6px;border-bottom:1px solid #E7ECE9;background:radial-gradient(circle closest-side,#E0584F 82%,rgba(224,88,79,0) 100%) left 12px center/8px 8px no-repeat,radial-gradient(circle closest-side,#E6B23C 82%,rgba(230,178,60,0) 100%) left 26px center/8px 8px no-repeat,radial-gradient(circle closest-side,#3DAE6B 82%,rgba(61,174,107,0) 100%) left 40px center/8px 8px no-repeat,#F4F6F5}
}

/* NARROW PHONES: the two identity values would run together side by side (two 135 px numbers in 140 px columns at
   360 px), so each key and value share one row instead; the card keeps its four rows and its height. */
@media (max-width:379.98px){
  .b-idrow{grid-template-columns:minmax(0,1fr)}
  .b-idrow__k{display:inline;margin-inline-end:6px}
}
/* Below 360 px the three hero service columns are 50 px wide: their one word labels keep the 14 px of v2 there. */
@media (max-width:359.98px){
  .b-svc li{font-size:var(--fs-s)}
}

/* PHONES AND TABLETS: the closing arch at the inline start, rising 92 px above the bar over the heading. The section
   keeps 48 px clear between the last question and the arch's top on phones (72 px on tablets). */
@media (max-width:1023.98px){
  .b-cta{padding-top:76px}
  .b-cta__arch{grid-column:1/-1;justify-self:start;width:150px;margin-top:-120px}
  .b-archbox--cta{width:150px}
}

/* TABLETS AND UP */
@media (min-width:768px){
  /* [3] */
  .b-inc{padding:26px 32px}
  .b-inc__l{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 16px}

  /* [1] The framed product screen: the clean render's top (window bar, sidebar with the mark and the account card,
     title, subline, four tiles), edge to edge in the card; the box keeps the file ratio whatever file loads. */
  .b-app__shot{padding:0;background:#F4F6F5}
  .b-app__shot img{aspect-ratio:2176/578;object-fit:cover;object-position:50% 0}

  /* [2] The quotation card. */
  .b-qdoc{position:relative;display:block;overflow:hidden;padding:26px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--sh-2)}
  .b-qdoc::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,#A86B3C,#D4A373)}
  .b-qdoc__top{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:var(--fs-l);font-weight:700;line-height:1.3}
  .b-qdoc__top .b-mark{width:40px;height:26px}
  .b-qdoc__t{margin-top:14px;color:var(--ink);font-size:var(--fs-h3);font-weight:700;line-height:1.45}
  .b-qdoc__l{display:grid;gap:12px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--sand-2)}
  .b-qdoc__l li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;align-items:start;color:var(--text);font-size:var(--fs-b);line-height:1.55}
  .b-qdoc__l .b-i{width:22px;height:22px;margin-top:2px;padding:4px;border-radius:50%;background:var(--sage);color:var(--green-ink);stroke-width:2.4}

  /* [6] Tablets: the arch spans the first row; the heading and the phone share the second. */
  .b-cta__arch{margin-top:-126px}
}

/* TABLETS ONLY: the lines that were still 14 px between 768 and 1023 px take the body size, as on phones and desktop. */
@media (min-width:768px) and (max-width:1023.98px){
  .b-facts li,.b-feats p,.b-plan__f li,.b-plan--main .b-plan__f li{font-size:var(--fs-b)}
}

/* DESKTOP */
@media (min-width:1024px){
  /* [5] One pill line, centred, 20 px under the facts bar: 14 px label, 16 px values, hairline separators. */
  .b-idrow__wrap{margin-top:20px}
  .b-idrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;row-gap:4px;width:max-content;max-width:min(980px,100%);margin-inline:auto;padding:10px 20px;border-radius:var(--r-pill)}
  .b-idrow__t{padding-inline-end:13px}
  .b-idrow__v{padding-inline:13px;border-inline-start:1px solid var(--line)}
  .b-idrow__v--name{margin:0}
  .b-idrow__v:last-child{padding-inline-end:0}
  .b-idrow__k{display:inline;margin-inline-end:6px;font-size:var(--fs-b)}

  /* [6] The arch in its own column, standing on the bar's lower edge and rising 110 px above its top whatever the
     bar's height: size containment keeps it out of the row's sizing, and it stretches from 150 px above the row
     (110 px plus the bar's 40 px padding) down to the bar's lower edge. */
  .b-cta{padding-top:72px}
  .b-cta__bar{grid-template-columns:240px minmax(0,1fr) auto}
  .b-cta__arch{grid-column:1;grid-row:1;align-self:stretch;justify-self:center;width:220px;margin:-150px 0 -40px;contain:size}
  .b-archbox--cta{width:220px;height:100%;aspect-ratio:auto}

  /* [9] Why band: the arcs, heading and lead span the panel; the five promises stand in two columns beside the arch,
     which keeps standing on the panel's lower edge (the English page's v2 layout). The copy box gives its children
     to the panel grid; they stay positioned, above the palm shade. */
  .b-why__panel{grid-template-areas:"mark mark" "head head" "sub sub" "feats media";grid-template-rows:auto auto auto minmax(0,1fr);row-gap:0}
  .b-why__copy{display:contents}
  .b-why__copy::before{grid-area:mark}
  .b-why .b-h2{grid-area:head;position:relative}
  .b-why .b-sub{grid-area:sub;position:relative}
  .b-feats{grid-area:feats;align-self:start;position:relative;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;padding-bottom:72px}
  .b-feats li,.b-feats li:nth-child(2n+1),.b-feats li:nth-child(3n+1){padding-inline:0;border-inline-start:0}
  .b-feats li:nth-child(2n){padding-inline-start:20px;border-inline-start:1px solid var(--hair-night)}
  .b-why__media{grid-area:media;align-self:end;margin-top:36px}
}
@media (min-width:1280px){
  .b-why__panel{column-gap:48px}
  .b-feats{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:80px}
  .b-feats li,.b-feats li:nth-child(2n+1),.b-feats li:nth-child(3n+1){padding-inline:0;border-inline-start:0}
  .b-feats li:nth-child(2n){padding-inline-start:20px;border-inline-start:1px solid var(--hair-night)}
}

/* ARABIC V4 LAYER (v4 Arabic owner, 3 October 2026): Omar's decisions 9 to 16 (out/fix/ship/OMAR_DECISIONS_2026-10-03.txt),
   for the Arabic page only. build_css.py appends this file after the v3 layer, so each rule here wins over the rule it
   names by source order at the same specificity. Numbers in brackets are the decisions; out/versions_work/v4/ar/NOTES.txt
   maps every change. The English stylesheet never reads this file; the English owner mirrors what applies.
   Sizes stay on the page scale (14, 16, 18, 20 and the heading sizes). */

/* [14] The app panel the way the old site presents its platform (production ar.html, section #app): a centred head
   (eyebrow, heading, lead), the claims as pills, then one large browser window holding the whole clean dashboard, and
   the old site's caption under it. The teal app layer of v3 stays as the stage; the window stands on its lower edge.
   Phones keep the four service tiles under the window bar (the old site shows no dashboard on phones at all). */
.b-app__panel{justify-items:center;text-align:center}
.b-app__copy{max-width:640px}
/* The accent word of the heading in the deeper green (5.36 to 1 on the panel's lightest teal; the brand green measured 4.26). */
.b-app .b-h2 .b-acc{color:var(--green-ink)}
.b-app__pts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.b-app__pts li{gap:8px;padding-block:6px;padding-inline:8px 16px;border:1px solid rgba(42,166,161,.28);border-radius:var(--r-pill);background:rgba(255,255,255,.72);color:var(--ink);font-weight:600}
.b-app__shot{justify-self:stretch}
.b-app__cap{display:none}

/* [12] Why band: four promises once the partner promise left. Tablets set them two by two (three columns left one
   alone on a second row). */
@media (min-width:768px) and (max-width:1023.98px){
  .b-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* TABLETS AND UP: [14] the whole dashboard in the window card; the box keeps the file ratio whatever file loads; the
   caption on the sand ground under the window's overhang (40 px, 48 px from 1024 px). */
@media (min-width:768px){
  .b-app{padding-bottom:var(--sec-y)}
  .b-app__panel{row-gap:20px}
  .b-app__shot{margin-top:16px}
  .b-app__shot img{aspect-ratio:2176/1302;object-fit:cover;object-position:50% 0}
  .b-app__cap{display:block;margin-top:56px;color:var(--muted);font-size:var(--fs-s);font-weight:500;line-height:1.5;text-align:center}
}
@media (min-width:1024px){
  .b-app__cap{margin-top:64px}
}

/* ARABIC V5 LAYER (v5 Arabic owner, 3 October 2026): decision 17 (out/fix/ship/OMAR_DECISIONS_2026-10-03.txt), the app
   panel with the old site's own dashboard composition, for the Arabic page only. build_css.py appends this file after
   the v4 layer, so each rule here wins over the rule it names by source order at the same specificity.
   out/versions_work/v5/ar/NOTES.txt explains every value. The English stylesheet never reads this file.

   The images (work/make_dash_v5.py, numbers from work/dash_v5/v5_images.json):
     dash-comp-*   the browser window with the whole dashboard and the phone over its lower corner, as production ar.html
                   draws its section #app, on a transparent ground with the window's and the phone's own shadows.
                   Inside the file the window is 87.613 percent of the width, starting 4.607 percent from the left and
                   2.457 percent from the top; its bottom edge is at 86.492 percent of the height; the phone ends 4.0
                   percent of the width past the window's right edge.
     dash-phone-*  phones: the phone app alone, cut under its sites card; the phone is 63.43 percent of the file width.
   The page keeps the panel's head and pills, id app, data-track-section app and the caption. */

/* EVERY WIDTH: the figure is no longer a card. The window and the phone carry their own frames and shadows. */
.b-app__shot{padding:0;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
.b-app__shot img{max-width:none;height:auto}
/* The caption sits over the image's transparent ground (beside the phone, as on the old site), so it paints above it. */
.b-app__cap{position:relative;z-index:1;display:block;color:var(--muted);font-size:var(--fs-s);font-weight:500;line-height:1.5;text-align:center}

/* PHONES: the phone app alone, rising from the panel's lower edge (the panel clips the far ends of its shadow), and the
   caption under the panel, because the phone shows the same sample figures. The phone is 248 px wide on a 390 px
   screen (64 percent of narrower screens); the image box is the phone's width divided by 0.6343. */
@media (max-width:767.98px){
  .b-app__panel{padding-bottom:0;overflow:hidden}
  .b-app__shot{margin:-12px 0 0}
  .b-app__shot::before{content:none;display:none}
  .b-app__shot img{width:min(391px,100.9vw);margin-inline-start:calc((100% - min(391px,100.9vw)) / 2)}
  .b-app__cap{margin-top:14px}
}

/* TABLETS AND UP: the window keeps the box the v4 window had (the panel's content width), so the image is 114.138
   percent of the figure and reaches 8.880 percent past its start edge (the phone and its shadow, the right side in
   Arabic) and 5.258 percent past its end edge (the window's shadow). Vertically the image starts 2.667 percent of the
   figure width above the window and ends 14.661 percent below it, so the window stands where the v4 window stood and
   still overhangs the panel's lower edge by 40 px (48 px from 1024 px). The caption is 32 px under the window, centred,
   beside the phone's foot, as on the old site. */
@media (min-width:768px){
  .b-app__shot{margin:calc(16px - 2.667%) 0 calc(-14.661% - 40px)}
  .b-app__shot img{width:114.138%;margin-inline-start:-8.88%;aspect-ratio:2176/2069;object-fit:fill}
  .b-app__cap{margin-top:72px}
}
@media (min-width:1024px){
  /* 24 px more room under the caption keeps the image's shadow inside the section (at 1206 px the image ends 225 px
     under the panel; caption 101 px plus padding 128 px). */
  .b-app{padding-bottom:calc(var(--sec-y) + 24px)}
  .b-app__shot{margin-bottom:calc(-14.661% - 48px)}
  .b-app__cap{margin-top:80px}
}

/* Footer v5.1: no identity card. Name and address sit as one quiet line under the contacts. */
.b-foot__top{display:block}
.b-foot__brand{display:grid;grid-template-columns:minmax(0,1fr);row-gap:6px}
.b-foot__brand .b-brand{grid-row:auto}
.b-foot__title{margin-top:14px}
.b-foot__legal{margin-top:6px;color:var(--muted);font-size:var(--fs-s);line-height:1.8}
@media (min-width:900px){
  .b-foot__brand{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:56px;row-gap:4px}
  .b-foot__brand .b-brand{grid-row:1/4}
  .b-foot__title{margin-top:0}
  .b-foot__legal{margin-top:0}
}
/* Phones: keep the language switch visible in the header, styled like the menu button. */
@media (max-width:767.98px){
  .b-head .b-lang{display:grid;place-items:center;min-width:46px;height:46px;padding:0 12px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:var(--card);color:var(--ink);font-size:var(--fs-s);font-weight:700;text-decoration:none;white-space:nowrap}
  .b-head__end{gap:6px}
}