/* Waha English landing page, design direction B (v1 English owner). The Arabic page's stylesheet
   (work/dir-B.page.css), read at build time by work_en/build_en.py, with the frame in place of the
   arch (decision 8), the Latin face, and the two palm shades mirrored for a left to right page. */

: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 Sans","Waha Sans 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");
  --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 FRAME (English page, Omar's decision 8 of 2 October): the Arabic page sets its three photos (hero, why band,
   quote) in the Waha arch; this page keeps the same component as a normal frame with rounded corners. The same sand
   rim of 2.6 percent of the frame width (container units, so the ratio holds at every size), the same darker inner
   line and the same soft shadow, now on all four sides of a rounded rectangle. One radius token, --r-frame. */
.b-framebox{position:relative;container-type:inline-size;filter:drop-shadow(0 16px 26px rgba(14,59,51,.15))}
.b-frame{--rim:2.6cqw;position:relative;height:100%;padding:var(--rim);border-radius:var(--r-frame);background:linear-gradient(155deg,#F7F0E3 0%,#EADDC5 45%,#D9C6A2 100%)}
.b-frame::before{content:"";position:absolute;inset:calc(var(--rim) - 2px);border-radius:calc(var(--r-frame) - var(--rim) + 2px);background:#C9B48C}
.b-frame img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r-frame) - var(--rim));filter:var(--grade)}
/* The why band frame stands on the dark panel's lower edge (v2, finding 9 of the art director's review), as the arch
   does on the Arabic page: rounded top corners, the rim and the inner line on the top and the sides only, and the
   photo running into the panel's edge, which cuts the frame's foot. */
.b-framebox--why .b-frame{padding-bottom:0;border-radius:var(--r-frame) var(--r-frame) 0 0}
.b-framebox--why .b-frame::before{inset:calc(var(--rim) - 2px) calc(var(--rim) - 2px) 0;border-radius:calc(var(--r-frame) - var(--rim) + 2px) calc(var(--r-frame) - var(--rim) + 2px) 0 0}
.b-framebox--why .b-frame img{border-radius:calc(var(--r-frame) - var(--rim)) calc(var(--r-frame) - var(--rim)) 0 0}
/* v3 (v3 English owner): the closing band's frame stands on the dark bar's lower edge from 1024 px, as the arch does on
   the Arabic page: the same cut foot as the why band frame. On phones and tablets it rises over the heading as a whole
   frame, rim and rounded corners on all four sides. */
@media (min-width:1024px){
  .b-framebox--cta .b-frame{padding-bottom:0;border-radius:var(--r-frame) var(--r-frame) 0 0}
  .b-framebox--cta .b-frame::before{inset:calc(var(--rim) - 2px) calc(var(--rim) - 2px) 0;border-radius:calc(var(--r-frame) - var(--rim) + 2px) calc(var(--r-frame) - var(--rim) + 2px) 0 0}
  .b-framebox--cta .b-frame img{border-radius:calc(var(--r-frame) - var(--rim)) calc(var(--r-frame) - var(--rim)) 0 0}
}

/* 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;left:0;transform:scaleX(-1);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-framebox--hero{position:absolute;inset:0}
.b-framebox--hero .b-frame 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:scaleY(-1);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-framebox--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-framebox--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-framebox--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-framebox--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-framebox--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 services selected". */
.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:right 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:left}
.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}
}

/* ENGLISH PAGE OF DIRECTION B (v1 English owner, 3 October 2026; v2 English owner, same day). Everything above this
   block is the Arabic page's stylesheet (work/dir-B.page.css with the frame in place of the arch, the English RFQ
   module block of site/assets/landing-en.css and work/dir-B.rfq-map.css); its logical properties mirror it for a left
   to right page, and the build mirrors the two palm shades (the top one starts at the reading start corner, as on the
   Arabic page). This block holds only what English needs on top of that.
   V2: the second part of this block mirrors the Arabic page's v2 layer (work/dir-B.ar-v2.css, the art director's
   twelve findings on the blind committee results), which the English build does not read. */

/* Tokens: the frame radius (decision 8) and the Latin face. Arabic words carry lang="ar" and take the Arabic subset
   and its tuned DejaVu face, as on the current English page. */
:root{--r-frame:22px}
:lang(ar){font-family:"Waha Arabic","Waha Fb DejaVu",system-ui,sans-serif}

/* Latin leading: about 1.6 for running text and 1.1 to 1.3 for titles (the Arabic values are 1.7 to 1.8). */
body{line-height:1.6}
.b-h1{line-height:1.1;letter-spacing:-.012em}
.b-h2,.b-cta__t,.wrfq .wrfq__title{line-height:1.2;letter-spacing:-.006em}
.b-sub,.b-lead,.b-plan__s,.b-plan--main .b-plan__s,.b-steps p,.b-feats p{line-height:1.6}
#faq details>p,.b-foot__privacy p{line-height:1.65}
#faq summary{line-height:1.4}
.b-plan__t,.b-steps h3,.b-feats h3,.b-foot__title,.b-foot__h{line-height:1.3}
.b-brand__name{letter-spacing:-.01em}
.wrfq{line-height:1.6}

/* FIRST SCREEN. English needs more room for its headline than Arabic: "Worker accommodation" is one unbreakable
   line of about 11 em. On phones the headline therefore spans the full width above the photo, and the three services
   stand as a short list beside the framed photo; from 768 px the layout is the Arabic one, copy beside the photo. The
   headline is sized to its own box (8.5 percent of its width, at most the scale's H1 size), so its longest line
   always fits with room to spare. */
.b-hero__grid{grid-template-areas:"title title" "svc media" "act act";row-gap:20px}
.b-hero__title{grid-area:title;container-type:inline-size}
.b-h1{font-size:min(var(--fs-h1),8.5cqi)}
.b-h1 .b-h1__l{display:block}
.b-h1 .b-acc{display:inline}
.b-svc{grid-area:svc}
@media (max-width:767.98px){
  .b-svc{align-self:center;display:flex;flex-direction:column;margin-top:0}
  .b-svc li{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:12px 0;font-size:var(--fs-b);text-align:start}
  .b-svc li+li{border-inline-start:0;border-top:1px solid var(--line)}
  .b-brand:not(.b-brand--foot) .b-brand__tag{display:none}
}

/* ISO marks: the English subjects are longer ("Occupational health and safety"). The marks are sized by their content
   instead of three equal columns: a mark is never narrower than its seal and number, and when the row is short the
   long subject wraps under them on balanced lines. */
.b-iso{display:flex;align-items:flex-start}
.b-iso__badge{flex:0 1 auto;grid-template-columns:auto minmax(min-content,1fr);min-width:min-content}
.b-iso__n{font-variant-numeric:tabular-nums}
@media (max-width:359.98px){
  .b-iso__badge{column-gap:4px;padding-inline:6px}
  .b-iso__seal{width:16px;height:16px}
}

/* Text that wraps keeps balanced lines: the closing bar title, the card checks, the app panel's lines and the step
   titles. */
.b-cta__t,.b-plan__f li,.b-app__pts li,.b-app__lead,.b-steps h3{text-wrap:balance}

/* Header: English labels are longer than the Arabic ones. A link never breaks inside itself and the desktop links sit
   a little closer. The brand line under Waha in the header (in v3 a line twice the length of its Arabic twin) shows
   from 768 to 1023 px and from 1280 px; from 1024 to 1279 px the header row has no room for it. v4: the new tagline is
   short, so the V4 part shows it on phones from 375 px as well. The footer keeps its brand line at the same widths as
   the Arabic footer (from 375 px). */
.b-nav a,.b-head__tel{white-space:nowrap}

/* Footer: the company details show the register's Arabic words; under the registered activity, our English
   rendering, marked as a translation (the current English page's line). The numbers never break; the Arabic words
   move to their own line as one unit, and wrap between words only when that line is too short (at 320 px they ran
   26 px past the screen). */
.b-idl__tr{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-s);font-weight:400;line-height:1.5}
.b-idl dd bdi[lang="ar"]{display:inline-block;white-space:normal}

/* Phone action bar: "WhatsApp" is wider than its Arabic label. The outline button takes less inner space, and below
   360 px it shows its icon only (its name stays for screen readers), so the three buttons keep one row at 320 px. */
.b-bar .b-btn--line{gap:8px;padding-inline:14px}
@media (max-width:359.98px){
  .b-bar .b-btn--line{flex:none;width:48px;gap:0;padding:0;font-size:0}
}

@media (min-width:768px){
  :root{--r-frame:28px}
  /* Copy beside the photo, as on the Arabic page: the headline, the services and the actions stand together,
     centred in the height above the facts bar by two empty flexible rows. The rows carry no gap here: the spacing
     between headline, services and actions is the Arabic one (the services' own top margin and the actions' top
     padding), so the facts bar ends inside a 1440 x 900 first screen, as it does on the Arabic page. */
  .b-hero__grid{grid-template-areas:". media" "title media" "svc media" "act media" ". media" ". media";grid-template-rows:minmax(0,1fr) auto auto auto minmax(0,1fr) 64px;row-gap:0}
  .b-hero__title{padding-top:24px}
  .b-iso{max-width:none}
}
@media (min-width:1024px){
  .b-hero__grid{grid-template-rows:minmax(0,1fr) auto auto auto minmax(0,1fr) 92px}
  .b-nav a{padding-inline:10px}
}
@media (min-width:1024px) and (max-width:1279.98px){
  .b-brand:not(.b-brand--foot) .b-brand__tag{display:none}
}


/* ======================================================================================================== V2 ====
   The Arabic page's v2 layer (work/dir-B.ar-v2.css), mirrored for English by the v2 English owner. Numbers in
   brackets are the art director's findings as out/versions_work/v2/ar/NOTES.txt lists them; English only rules say
   so. The full reasons and measurements are in out/versions_work/v2/en/NOTES.txt. */

/* [12] One rhythm: 64 px between sections on phones, 88 px from 768 px, 104 px from 1024 px. */
: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)}

/* [5] Facts cells share their icon and title lines. [11] The step badge sits on the icon's top start corner. */
.b-facts li{justify-content:flex-start}
.b-steps__n{inset-inline-start:-4px;inset-inline-end:auto;top:-4px}

/* [9] English only: the framed corridor stands on the why band's lower edge at every width, as the arch does. */
.b-why__panel{padding-bottom:0}
.b-why__media{align-items:flex-end}

@media (max-width:767.98px){
  /* [4] Facts sub labels at body size. */
  .b-facts li{font-size:var(--fs-b)}

  /* [5] English only: the headline stands above the photo here, so the room takes the 4:5 ratio of the other
     frames, level with the services list, and the facts bar starts 43 px higher (v1 kept 248 px of height). */
  .b-hero__media{min-height:0;aspect-ratio:4/5;align-self:center}

  /* [2, 3] Partner cards: full width horizontal cards, photo at the start (120 px from 388 px up), title and tag,
     the line at body size, one check (the quotation line) and the Start now link whose overlay keeps the card one
     tap target. English only: the check and the link span the card under the photo, so the longer English check
     keeps one line; the body box gives its children to the card grid and the third row takes the photo's height. */
  .b-plans__list{grid-template-columns:minmax(0,1fr)}
  .b-plan--side{display:grid;grid-template-columns:clamp(72px,calc(100vw - 268px),120px) auto minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;align-items:start;padding:12px}
  .b-plan--side .b-plan__body{display:contents}
  .b-plan--side .b-plan__ph{grid-column:1;grid-row:1/4;width:100%;height:auto;aspect-ratio:1}
  .b-plan--side .b-plan__ph img{object-position:50% 50%}
  .b-plan--side .b-plan__t{grid-column:2;grid-row:1;align-self:center;margin-inline-start:14px}
  .b-plan--side .b-plan__tag{grid-column:3;grid-row:1;align-self:center;justify-self:start;margin:0;margin-inline-start:8px}
  .b-plan--side .b-plan__s{grid-column:2/-1;grid-row:2;margin-top:6px;margin-inline-start:14px;font-size:var(--fs-b);line-height:1.6}
  .b-plan--side .b-plan__f{grid-column:1/-1;grid-row:4;margin:12px 0 0;padding-top:10px}
  .b-plan--side .b-plan__f li{align-items:center;font-size:var(--fs-b)}
  .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{grid-column:1/-1;grid-row:5;justify-self:start;margin-top:4px}

  /* [4] The six promises as one list: ring icon at the start, title, the line at body size. */
  .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)}

  /* [1] The four service tiles in two rows inside the app panel. */
  .b-app__panel{padding-bottom:20px}
  .b-app__shot{margin:4px -8px 0;padding:6px}

  /* [10] Quote heading centred. [7] The direct contact block under the form: label, number and WhatsApp in one
     row; it carries data-actionbar-hide, so the phone action bar never doubles it. */
  .wrfq .wrfq__crown{text-align:center}
  .wrfq .wrfq__crown::before{margin-inline:auto}
  .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}
}
/* [7] English only: "WhatsApp" is wider than its Arabic label, so the narrow values start at 410 px (Arabic 380 px);
   below about 390 px the button wraps under the number. */
@media (max-width:409.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}
}

@media (min-width:768px){
  :root{--sec-y:88px}
  .b-app{padding-bottom:calc(var(--sec-y) + 40px)}

  /* [8] One set of row tracks shared by the three cards (subgrid), so lines, checks and buttons align. English only:
     the checks pack at the top of their track when a partner check wraps. */
  .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}
  .b-plan__f{align-content:start}

  /* [6] App panel: one start aligned column, the checks in a row, the tile row without header or toolbar. */
  .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}
}

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

  /* [9] English only: the arcs, heading and lead span the why band (one line each), and under them the six promises
     in two columns stand beside the 4:5 frame on the panel's edge (v1: 883 px tall at 1440 with the frame floating).
     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;padding-bottom:72px}
  .b-why__media{grid-area:media;align-self:end;margin-top:36px}
}
/* [9] Two columns from 1280 px too: three broke "For companies and organisations" into three lines. */
@media (min-width:1280px){
  .b-feats{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:80px}
  .b-feats li:nth-child(2n+1){padding-inline-start:0;border-inline-start:0}
  .b-feats li:nth-child(2n){padding-inline-start:22px;border-inline-start:1px solid var(--hair-night)}
}


/* ======================================================================================================== V3 ====
   The Arabic page's v3 layer (work/dir-B.ar-v3.css, the art director's nine findings on the v1 committee results),
   mirrored for English by the v3 English owner, with the frame in place of the arch. Numbers in brackets are the
   findings as out/versions_work/v3/ar/NOTES.txt lists them; English only rules say so. The full reasons and
   measurements are in out/versions_work/v3/en/NOTES.txt. 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), body
   text one step darker. 14 px stays only for the ISO marks, the logo lockup's tagline, footer meta and the privacy
   note. Three 16 px labels reach 7 to 1 with board colours: the partner tags in ink on sage, the footer email in ink
   with its green underline, the phone partner link in Green Deep (below). */
:root{--muted:#3A4842;--text:#26332E}
.b-quote__alt-t,.b-cta__lbl,.b-app__eye,.b-plan__tag,.b-steps__n,.b-lang{font-size:var(--fs-b)}
.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, its rings from the bar's start edge (the
   left on this page), and the step badges in copper ink with 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 0% 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 (the legal
   name as registered in Arabic, the VAT number, the national address). Phones and tablets: a compact card (label,
   legal name, then the VAT number and the 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, teal check discs; the product screen in a white window card, radius 16. */
.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 frame returns at the end, with the dusk exterior; the bar takes the brand ripple,
   its rings rising from the bar's far lower corner (92 percent from the left: the end side here, the mirror of the
   Arabic 8 percent), the corner the frame leaves open. */
.b-cta__bar{overflow:visible;background:repeating-radial-gradient(circle at 92% 115%,rgba(127,208,166,.085) 0 1.6px,transparent 1.6px 30px) var(--night)}
.b-cta__frame{position:relative}
.b-framebox--cta{aspect-ratio:4/5}
/* The closing heading breaks before its accent phrase when it needs two lines, and short check lines balance. English
   only: the quotation card's fourth row lets "a separate line in the quotation" move to its own line as one unit
   (inline block) instead of holding it on one line, which the 196 px text column at 768 px cannot (Arabic: nowrap). */
.b-cta__t .b-acc{white-space:nowrap}
.b-qdoc__nw{display:inline-block}
.b-plan__f li,.b-qdoc__l li{text-wrap:balance}

/* PHONES */
@media (max-width:767.98px){
  /* [4] English only: the hero services already stand at body size on phones (a vertical list since v1), so the
     Arabic rule for its three columns does not apply. Reading lines a little more open: 1.65 here, the Latin step
     of the Arabic 1.75. The phone partner link in Green Deep. */
  .b-plan__s,.b-plan--main .b-plan__s,.b-plan--side .b-plan__s,.b-steps p,.b-feats p{line-height:1.65}
  .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 English 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, so each key and value share one row. */
@media (max-width:379.98px){
  .b-idrow{grid-template-columns:minmax(0,1fr)}
  .b-idrow__k{display:inline;margin-inline-end:6px}
}

/* PHONES AND TABLETS: the closing frame 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 frame's top. */
@media (max-width:1023.98px){
  .b-cta{padding-top:76px}
  .b-cta__frame{grid-column:1/-1;justify-self:start;width:150px;margin-top:-120px}
  .b-framebox--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 (the
     English crop is 2476x638, so 2176/561). */
  .b-app__shot{padding:0;background:#F4F6F5}
  .b-app__shot img{aspect-ratio:2176/561;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.3}
  .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.5}
  .b-qdoc__l .b-i{width:22px;height:22px;margin-top:1px;padding:4px;border-radius:50%;background:var(--sage);color:var(--green-ink);stroke-width:2.4}

  /* [6] Tablets: the frame spans the first row; the heading and the phone share the second. */
  .b-cta__frame{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 frame in its own column, standing on the bar's lower edge (dir-B-en.frame.css cuts its foot) 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__frame{grid-column:1;grid-row:1;align-self:stretch;justify-self:center;width:220px;margin:-150px 0 -40px;contain:size}
  .b-framebox--cta{width:220px;height:100%;aspect-ratio:auto}

  /* [9] Why band: this page has had the spanning heading and the two columns beside the frame since v2; the Arabic
     page now has them too, with these values for the five promises: no end padding, 20 px and a hairline before the
     second column. */
  .b-feats{column-gap:20px}
  .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)}
}
@media (min-width:1280px){
  .b-why__panel{column-gap:48px}
  .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)}
}

/* V3, ENGLISH ONLY. Where the longer English text needs its own values (measured in out/versions_work/v3/en/NOTES.txt). */

/* [6] The closing heading wraps greedily, so it breaks before its accent phrase ("Ready to request / your quote?");
   balanced wrapping chose "Ready to / request your quote?" once the accent phrase is held together. From 1280 px the
   heading stands over the buttons in the column the frame leaves (beside them it had 172 px and three lines), so it
   holds one line. */
.b-cta__t{text-wrap:wrap}
@media (min-width:1280px){
  .b-cta__go{grid-template-columns:minmax(0,1fr)}
}

/* [3] The inclusion labels: on phones the two line labels break evenly; from 1024 px the four columns size to their
   labels and spread across the block, so every label holds one line ("Supervision and operation" wrapped in an equal
   column). */
.b-inc__l li{text-wrap:balance}
@media (min-width:1024px){
  .b-inc__l{grid-template-columns:repeat(4,auto);justify-content:space-between}
}

/* [5, 8] First screen from 1024 px: the English headline takes three lines and the lead, with the pricing sentence,
   three, so the copy column is 58 px taller than the Arabic one and set the hero's height (680 px at 1440, Arabic 622).
   Tighter steps between the headline, the services, the lead, the buttons and the ISO marks bring the facts bar up and
   the company details line onto a 1440 x 900 first screen, as on the Arabic page. The copy's top then meets the
   frame's top. */
@media (min-width:1024px){
  .b-hero__title{padding-top:0}
  .b-svc{margin-top:20px}
  .b-actions{margin-top:20px}
  .b-trust{margin-top:18px}
}

/* [5] The company details line: the English keys and the legal name make it 1,051 px wide. From 1280 px it holds one
   line (up to 1,100 px, under the 1,200 px facts bar); from 1024 to 1279 px the label takes its own centred row and the
   three facts the row under it, with no separator before the first. */
@media (min-width:1280px){
  .b-idrow{max-width:min(1100px,100%)}
}
@media (min-width:1024px) and (max-width:1279.98px){
  .b-idrow{border-radius:var(--r-card)}
  .b-idrow__t{flex-basis:100%;justify-content:center;padding-inline-end:0}
  .b-idrow__v--name{padding-inline-start:0;border-inline-start:0}
}

/* [2] The quotation card's title breaks evenly ("Your quotation / arrives in writing", not "... arrives in / writing"). */
.b-qdoc__t{text-wrap:balance}

/* [3] Tablets: four equal columns leave the English labels about 100 px, so the discs and gaps are a little smaller and
   every label keeps two lines at most ("Supervision / and operation" took three). */
@media (min-width:768px) and (max-width:1023.98px){
  .b-inc__l{column-gap:12px}
  .b-inc__l li{gap:8px}
  .b-inc__i{width:36px;height:36px}
  .b-inc__i .b-i{width:20px;height:20px}
}

/* [4] English only: the committee's English rows name the small captions under the ISO marks (v1 scorer 1, v2 scorers 4
   and 5). From 1280 px the row has room for the marks at body size, each subject on one line; the caption above them
   sits 4 px closer so the company details line stays on the 1440 x 900 first screen. Phones and tablets keep 14 px,
   where "Occupational health and safety" would wrap into a third line. */
@media (min-width:1280px){
  .b-iso__n,.b-iso__s{font-size:var(--fs-b)}
  .b-iso__cap{margin-bottom:4px}
}


/* ======================================================================================================== V4 ====
   Omar's decisions 9 to 16 (out/fix/ship/OMAR_DECISIONS_2026-10-03.txt): the Arabic page's v4 layer
   (work/dir-B.ar-v4.css), mirrored for English by the v4 English owner. Numbers in brackets are the decisions; English
   only rules say so. out/versions_work/v4/en/NOTES.txt maps every change. Sizes stay on the page scale. */

/* [14] The app panel the way the old site presents its platform (production site/index.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 (the brand green is under 4.5 to 1 on the panel's lightest teal). */
.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
   English master is 2476 x 1456, so 2176/1280; the Arabic one 2176/1302); 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/1280;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}
}

/* V4, ENGLISH ONLY */

/* [10] The tagline beside the logo, "Waha, a place to rest", is shorter than the v3 line the header hid on phones, so the
   header shows it from 375 px as the Arabic header does (below 375 px the shared rule hides it on both pages, and from
   1024 to 1279 px the desktop header row still has no room for it). */
@media (min-width:375px) and (max-width:767.98px){
  .b-brand:not(.b-brand--foot) .b-brand__tag{display:block}
}

/* [14] On phones the first claim takes two lines in English (one line in Arabic); its words then start beside the check
   instead of centring away from it. A claim on one line is sized to its words, so this changes nothing there. */
@media (max-width:767.98px){
  .b-app__pts li{text-align:start}
}


/* ======================================================================================================== V5 ====
   Decision 17 (out/fix/ship/OMAR_DECISIONS_2026-10-03.txt): the app panel with the old site's own dashboard composition,
   the Arabic page's v5 layer (work/dir-B.ar-v5.css) mirrored for English by the v5 English owner, with the numbers of the
   English images (work_en/dash_v5/v5_images.json, the "css" entry; build_en.py stops when they differ).
   out/versions_work/v5/en/NOTES.txt explains every value. The page keeps the panel's head and pills, id app,
   data-track-section app and the caption.

   The images (work_en/make_dash_en_v5.py):
     dash-en-comp-*   the browser window with the whole dashboard and the phone over its lower LEFT corner, as production
                      index.html draws its section #app (the mirror image of the Arabic page), 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 7.779 percent from the left (the phone and its shadow) and 2.527 percent from the
                      top; its bottom edge is at 86.172 percent of the height.
     dash-en-phone-*  phones: the phone app alone, cut under its sites card; the phone is 63.43 percent of the file width. */

/* 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. The window bar of v3
   leaves with the tiles it framed. */
@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.879 percent past its start edge (the phone and its shadow, the left side in
   English) and 5.259 percent past its end edge (the window's shadow). Vertically the image starts 2.677 percent of the
   figure width above the window and ends 14.651 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.677%) 0 calc(-14.651% - 40px)}
  .b-app__shot img{width:114.138%;margin-inline-start:-8.879%;aspect-ratio:2176/2020;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, as on the Arabic page. */
  .b-app{padding-bottom:calc(var(--sec-y) + 24px)}
  .b-app__shot{margin-bottom:calc(-14.651% - 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}
}
.b-foot__legal [lang="ar"]{font-weight:600}
/* 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}
}
@media (max-width:399.98px){.b-head .b-brand:not(.b-brand--foot) .b-brand__tag{display:none}}