/* MIRAS: rules shared by the inner pages only (nav, mobile nav, hero frame, sections, service rows, related block,
   next band, form base, FAQ, legal, 404). Tokens, type, themes, buttons, cards, motifs and the footer live in
   assets/motifs.css, which every page loads first. index.html does not load this file.

   SYSTEM RULES (full text at the top of motifs.css): no eyebrows, no numbering outside legal, italic only on the
   wave titles, radius ≤ 2px, no backdrop blur, no grain, no hover lifts, no fade-up reveals, no CTA band,
   no plain multi-line tide field more than once per page, Flare in the first two viewports. */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
/* the consent bar is fixed to the bottom: a focused field must scroll clear of it */
html:has(.consent:not([hidden])){scroll-padding-bottom:200px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--shore);color:var(--deep);font:400 18px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--tide);color:var(--shore)}
:focus-visible{outline:2px solid var(--ring,currentColor);outline-offset:4px;border-radius:2px}
/* the skip link lands focus on <main> (site.js moves it there): the content is the target, so no ring boxes the page */
main:focus{outline:none}
section,.band{position:relative;background:var(--bg);color:var(--fg)}
.wrap{padding-inline:var(--m)}
[hidden]{display:none!important}
/* an Arabic visit: the head script sets lang, dir and .pre-lang before the first paint; site.js takes the class off once
   the Arabic words are in, so nobody sees the English page flip. The 2s animation is the fallback if the script fails */
html.pre-lang main,html.pre-lang .nav,html.pre-lang .foot{visibility:hidden;animation:pre-lang 0s 2s forwards}
@keyframes pre-lang{to{visibility:visible}}

h3{font:var(--fs-sub);letter-spacing:var(--ls-sub)}
.label{font:var(--fs-small)} /* legacy markup only: eyebrows are gone */

/* logo artwork as masks */
.mask{display:block;background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.monogram{--src:url(monogram.png?v=r3);aspect-ratio:1000/765}
/* the nav draws the logo at 68px (50px in Arabic), so it takes the small masks (3x the drawn size); the full-size files are
   the footer's and the portal's */
.wordmark{--src:url(wordmark-nav.png?v=r3);aspect-ratio:3000/901}
html[dir=rtl] .wordmark{--src:url(arabic-nav.png?v=r3);aspect-ratio:2400/1001}


/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:26px;min-height:60px;padding:10px var(--m);color:var(--deep);}
.nav.ready{transition:background-color .4s,color .4s,transform .32s var(--ease),box-shadow .4s}
.nav.on-dark{color:var(--shore)}
.nav.on-flare .pill.flare{background:var(--deep);color:var(--flare)}
.nav.solid{background:var(--shore);color:var(--deep);box-shadow:0 1px 0 color-mix(in srgb,var(--deep) 14%,transparent)}
.nav.away{transform:translateY(-110%)}
.nav:focus-within{transform:none}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;min-height:44px;padding-inline:9px;margin-inline:-9px} /* a 44px touch target; the negative margin keeps the logo where it was */
.brand .monogram{width:27px}
.brand .wordmark{width:68px}
html[dir=rtl] .brand .wordmark{width:50px}
.nav-links{display:flex;gap:26px;margin-inline-start:auto;font:500 15px/1 var(--sans)}
.nav-links a{text-decoration:none;opacity:.8;padding:12px 0;position:relative}
.nav-links a:hover,.nav-links a[aria-current=page]{opacity:1}
.nav-links a[aria-current=page]::after{content:"";position:absolute;inset-inline:0;bottom:6px;height:2px;background:var(--flare)}
/* the language switch is a link to this page in the other language (site.js switches in place on a click); it is drawn
   as the button it was: its word centred in a 44px target, no underline until hover */
.lang{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;font:500 15px/1 var(--ar);min-height:44px;padding:0 4px;color:inherit;text-decoration:none}
.lang:hover{text-decoration:underline;text-decoration-color:var(--flare);text-decoration-thickness:2px;text-underline-offset:.3em}
html[lang=ar] .lang{font-family:var(--sans)}
.nav .pill{min-height:44px;padding:0 20px;font-size:14px}
.menu-btn{display:none;background:none;border:0;cursor:pointer;min-width:44px;min-height:44px;padding-inline:8px;margin-inline:-8px;font:500 15px/1 var(--sans)}
/* the nav's Arabic labels take the Arabic face, as the phone menu and the body do (Bricolage has no Arabic glyphs) */
html[lang=ar] .nav-links,html[lang=ar] .menu-btn{font-family:var(--ar)}
.mnav{position:fixed;inset:0;z-index:39;background:var(--deep);color:var(--shore);display:flex;flex-direction:column;justify-content:safe center;gap:6px;overflow-y:auto;overscroll-behavior:contain;padding:100px var(--m) 40px;transform:translateY(-100%);transition:transform .5s var(--ease)}
.mnav.open{transform:none}
.mnav a{font:400 clamp(44px,12vw,72px)/1.1 var(--serif);text-decoration:none}
html[lang=ar] .mnav a{font-family:var(--ar);font-weight:600;font-size:clamp(34px,9vw,56px);line-height:1.5}
/* the four disciplines: an indented list under Services in the phone menu, a flyout under it on desktop (site.js adds both) */
.mnav-sub{display:flex;flex-direction:column;padding-inline-start:clamp(18px,5vw,32px);margin:2px 0 8px;border-inline-start:1.5px solid var(--flare)}
.mnav .mnav-sub a{display:flex;align-items:center;min-height:44px;font:500 22px/1.2 var(--sans);color:color-mix(in srgb,var(--shore) 80%,transparent)}
.mnav .mnav-sub a:hover,.mnav .mnav-sub a:focus-visible{color:var(--shore)}
html[lang=ar] .mnav .mnav-sub a{font:500 21px/1.4 var(--ar)}
/* the page you are on: the desktop nav's Flare rule, as an underline under the word */
.mnav a[aria-current=page]{color:var(--shore);text-decoration:underline;text-decoration-color:var(--flare);text-decoration-thickness:2px;text-underline-offset:.22em}
.mnav .mnav-sub a[aria-current=page]{text-underline-offset:.35em}
/* the links sit in the space above, the menu ends on the brand: the footer line in both languages and the email */
.mnav>a:first-child{margin-top:auto}
.mnav-foot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.mnav-foot .foot-tag{font-size:20px;color:color-mix(in srgb,var(--shore) 78%,transparent)}
.mnav-foot .foot-tag .arx{font-size:18px}
.mnav .mnav-foot a,html[lang=ar] .mnav .mnav-foot a{display:inline-flex;align-items:center;min-height:44px;font:500 17px/1 var(--sans);color:var(--shore);text-decoration:underline;text-decoration-color:var(--flare);text-decoration-thickness:1.5px;text-underline-offset:.3em}
.nav-svc{position:relative;display:flex}
.nav-fly{position:absolute;top:100%;inset-inline-start:-18px;display:flex;flex-direction:column;min-width:200px;padding:8px 18px 12px;background:var(--deep);color:var(--shore);border-radius:2px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s}
.nav-svc:hover .nav-fly,.nav-svc:focus-within .nav-fly{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s}
/* Escape shuts the flyout until the pointer leaves or the focus moves out (site.js sets .shut); focus stays on the link */
.nav-svc.shut .nav-fly,.nav-svc.shut:hover .nav-fly,.nav-svc.shut:focus-within .nav-fly{opacity:0;visibility:hidden}
.nav-links .nav-fly a{display:flex;align-items:center;min-height:44px;padding:0;opacity:.85;font:500 15px/1.2 var(--sans);white-space:nowrap}
.nav-links .nav-fly a:hover,.nav-links .nav-fly a:focus-visible,.nav-links .nav-fly a[aria-current=page]{opacity:1}
.nav-links .nav-fly a[aria-current=page]::after{bottom:8px;inset-inline-end:auto;width:24px}
html[lang=ar] .nav-links .nav-fly a{font-family:var(--ar)}
/* the single-service pages (.nav-p) come first; a hairline sets them off from the four disciplines (.nav-g) */
.nav-fly .nav-p + .nav-g,.mnav-sub .nav-p + .nav-g{border-top:1px solid color-mix(in srgb,var(--shore) 20%,transparent)}
.mnav-sub .nav-p + .nav-g{margin-top:4px}
@media (prefers-reduced-motion:reduce){.nav-fly{transition:none!important;transform:none}}
@media (max-width:900px){.nav-links{display:none}.lang{margin-inline-start:auto}.menu-btn{display:block}}
@media (max-width:520px){.brand .wordmark{display:none}.nav{gap:14px}.nav .pill{padding:0 14px}}

/* ---------- Page hero: the signature motif full-bleed behind, the words on top ---------- */
.hero{position:relative;min-height:92svh;display:flex;flex-direction:column;justify-content:flex-end;padding:140px var(--m) clamp(50px,8vh,90px);overflow:hidden}
.hero > canvas.motif{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero > :not(canvas.motif){position:relative;z-index:1}
.hero .lead{max-width:40ch;margin-top:22px;color:var(--soft)}
.hero-sea{position:absolute;inset:auto 0 0;height:42%;pointer-events:none} /* legacy markup only */
.hero-sea canvas{width:100%;height:100%;display:block}
@media (max-width:759px){.hero{min-height:86svh;padding-top:120px}}

/* ---------- Sections ---------- */
.sec{padding-block:var(--pad)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(40px,6vw,80px)}
.sec-head .heading{max-width:18ch}
.sec-head .lead{max-width:38ch;color:var(--soft)}
.more{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:600 15px/1 var(--sans);min-height:44px;border-bottom:1.5px solid currentColor}
html[lang=ar] .more{font-family:var(--ar)}

/* service rows on discipline pages: name (cols 1–5) | description, deliverables, ask (cols 6–12) */
.svc-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.svc-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:14px;padding:clamp(30px,5vh,56px) 0;border-bottom:1px solid var(--hair)}
.svc-row > h3,.svc-row > .svc-n{grid-column:1 / span 5;font:400 clamp(30px,3.4vw,56px)/1.02 var(--serif);letter-spacing:-.015em;margin:0}
html[lang=ar] .svc-row > h3,html[lang=ar] .svc-row > .svc-n{font:var(--fs-sub);font-size:clamp(24px,2.4vw,38px)}
.svc-row > div,.svc-row > .svc-b{grid-column:6 / -1}
.svc-row .lead,.svc-row p{color:var(--soft);max-width:46ch;margin:0}
.svc-row .slash{margin-top:16px}
.svc-row .more{margin-top:22px}
.svc-row > .n{display:none} /* legacy number column */
.svc-row ul:not(.slash){list-style:none;display:flex;flex-wrap:wrap;padding:0;margin-top:16px;margin-inline-start:-1.6em;font:500 17px/1.6 var(--sans);clip-path:inset(-.6em -.6em -.6em 1.6em)}
html[dir=rtl] .svc-row ul:not(.slash){clip-path:inset(-.6em 1.6em -.6em -.6em)}
.svc-row ul:not(.slash) li::before{content:"/";display:inline-block;width:1.6em;text-align:center;color:var(--flare)}
@media (max-width:820px){.svc-row > h3,.svc-row > .svc-n,.svc-row > div,.svc-row > .svc-b{grid-column:1 / -1}}

.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(30px,4vw,50px)}

/* the old footer word (legacy markup: .foot-word > .mask.wordmark); the new footer is in motifs.css */
.foot-word > .mask{width:100%}

/* ---------- Motion: no fade-up reveals; the word-by-word settle is for [data-settle] only (j0.t on index) ---------- */
.rise{opacity:1;transform:none}
[data-settle].settle .w{display:inline-block;transform:translateY(.34em) rotate(2.4deg);opacity:.12;transition:transform 1s var(--ease) calc(var(--i) * 50ms),opacity .8s ease calc(var(--i) * 50ms)}
[data-settle].settle .w:nth-of-type(even){transform:translateY(.22em) rotate(-2deg)}
[data-settle].settle.in .w{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){[data-settle].settle .w{transform:none;opacity:1;transition:none}.nav,.nav.ready,.mnav{transition:none}}

/* ---------- Arabic ---------- */
html[lang=ar] body{font-family:var(--ar)}
html[lang=ar] h3{font:var(--fs-sub);letter-spacing:0}

/* ---------- Next band: the next discipline's colour washes in ---------- */
/* a 12-column band: the words in cols 1–7, a real visual in .next-art (cols 8–12; pages fill it with a mini motif) */
.next{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-content:center;min-height:40vh;text-decoration:none;padding:clamp(70px,10vh,120px) var(--m);background:var(--bg);color:var(--fg)}
.next > *{grid-column:1 / span 7}
.next .label,.next .small{font:var(--fs-small);color:var(--soft)}
.next .display{display:flex;align-items:center;gap:.3em;margin-top:10px}
.next > .next-art{grid-column:8 / -1;grid-row:1 / span 3;align-self:center;position:relative;height:clamp(160px,28vh,260px);pointer-events:none}
.next-art > .motif,.next-art > canvas,.next-art > svg{position:absolute;inset:0;width:100%;height:100%}
/* .next-art.bleed: the art runs from column 8 off the band's end edge, and from the crest of the band's wave edge to its
   foot, cut hard on that wave (the same mask, at the same place, as .next::before). No feathered edges anywhere
   (100cqw is the band's content box: its width less the --m padding on each side) */
.next{container-type:inline-size}
.next > .next-art.bleed{--x0:calc(var(--m) + 7 * (100cqw - 11 * var(--gut)) / 12 + 7 * var(--gut));--wx:calc(-1 * var(--x0));
  position:absolute;grid-area:auto;align-self:auto;top:-63px;bottom:0;inset-inline-start:var(--x0);inset-inline-end:0;height:auto;overflow:hidden;
  -webkit-mask:var(--wavemask) var(--wx) 0/calc(100cqw + 2 * var(--m)) 64px no-repeat,linear-gradient(#000 0 0) 0 63px/100% 100% no-repeat;
  mask:var(--wavemask) var(--wx) 0/calc(100cqw + 2 * var(--m)) 64px no-repeat,linear-gradient(#000 0 0) 0 63px/100% 100% no-repeat}
html[dir=rtl] .next > .next-art.bleed{--wx:0px}
@media (max-width:759px){.next > *{grid-column:1 / -1}.next > .next-art{display:none}}
.next .display .arrow{font-family:var(--sans);font-weight:400;font-size:.6em}
.next:hover .arrow,.next:focus-visible .arrow{transform:translateX(8px)}
html[dir=rtl] .next:hover .arrow,html[dir=rtl] .next:focus-visible .arrow{transform:scaleX(-1) translateX(8px)}
.next::before{content:"";position:absolute;inset-inline:0;bottom:calc(100% - 1px);height:64px;background:var(--bg);-webkit-mask:var(--wavemask) center/100% 100% no-repeat;mask:var(--wavemask) center/100% 100% no-repeat;pointer-events:none}

/* ---------- Forms ---------- */
form{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
.field{display:flex;flex-direction:column;gap:10px}
.field.full{grid-column:1/-1}
.field label,.field legend{font:var(--fs-small);color:var(--soft)}
.field input,.field textarea{font:400 20px/1.4 var(--sans);color:var(--fg);background:transparent;border:0;border-bottom:1.5px solid color-mix(in srgb,var(--fg) 55%,transparent);padding:8px 0;border-radius:0}
/* the message line grows with what is written (no stock resize grip) */
.field textarea{resize:none;field-sizing:content;min-height:110px;max-height:40vh}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--fg);box-shadow:0 1px 0 var(--fg)}
html[lang=ar] .field input,html[lang=ar] .field textarea{font-family:var(--ar)}
/* a phone number reads left to right, but it sits on the Arabic page's right edge like the label above it; so do the free-text fields,
   which take the direction of what is typed (dir=auto), when they are empty or hold English */
html[dir=rtl] .field input[type=tel],html[dir=rtl] .field input[type=email],html[dir=rtl] .field [dir=auto]{text-align:right}
fieldset.field{border:0}
.picks{display:flex;flex-wrap:wrap;gap:8px}
html[lang=ar] .err,html[lang=ar] .status-line{font-family:var(--ar)}
.send{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.err{font-size:15px;font-weight:600;color:var(--flare)}
.status-line{grid-column:1/-1;font-size:15px;min-height:1.5em;color:var(--soft)}
.faq-list{list-style:none;border-bottom:1px solid var(--hair)}
.faq-list li{border-top:1px solid var(--hair)}
.faq-list button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;text-align:start;background:none;border:0;cursor:pointer;padding:24px 0;font:400 clamp(24px,2.2vw,34px)/1.15 var(--serif);color:var(--fg)}
html[lang=ar] .faq-list button{font-family:var(--ar);font-weight:600;font-size:clamp(20px,1.9vw,28px);line-height:1.4}
.faq-list .pm{flex:none;width:24px;height:24px;position:relative}
.faq-list .pm::before,.faq-list .pm::after{content:"";position:absolute;left:2px;right:2px;top:11px;height:2px;background:var(--flare)}
.faq-list .pm::after{transform:rotate(90deg);transition:transform .35s var(--ease)}
.faq-list button[aria-expanded=true] .pm::after{transform:rotate(0)}
.faq-list button:hover > span:first-child,.faq-list button:focus-visible > span:first-child{color:var(--tide)}
.faq-list button:hover .pm::before,.faq-list button:hover .pm::after{background:var(--tide)}
.faq-list .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-list .ans > div{overflow:hidden;visibility:hidden;transition:visibility 0s .45s}
.faq-list button[aria-expanded=true] + .ans{grid-template-rows:1fr}
.faq-list button[aria-expanded=true] + .ans > div{visibility:visible;transition:visibility 0s}
.faq-list .ans p{padding:0 0 26px;max-width:56ch;color:var(--soft)}
/* reduced motion: the answers open and close at once, and the plus does not turn (the contact FAQ is on every inner page that uses it) */
@media (prefers-reduced-motion:reduce){.faq-list .ans,.faq-list .ans>div,.faq-list .pm::after{transition:none}}
@media (max-width:900px){form{grid-template-columns:1fr}}


/* ---------- Legal pages: privacy, terms, cookies ---------- */
.legal-hero{min-height:0;justify-content:flex-start;padding-top:clamp(130px,18vh,190px);padding-bottom:0}
.legal-hero .display{max-width:14ch}
/* Arabic: ch is the width of the current font's zero, so a fallback face would shrink this box before the web font lands (and wrap the title).
   8.4em is the same 14ch in IBM Plex Sans Arabic, and does not depend on the face */
html[lang=ar] .legal-hero .display{max-width:8.4em}
.legal-hero .lead{max-width:46ch}
/* Arabic on a phone: the fallback faces are within a few percent of IBM Plex's width, but a paragraph close to a line break can still wrap
   one line differently when the web font lands. Three lines are kept, so the tabs and the line below do not move */
@media (max-width:600px){html[lang=ar] .legal-hero .lead{min-height:5.25em}}
.legal-date{margin-top:30px;color:var(--soft)}
.legal-date.data{font-size:13px;letter-spacing:.06em}
html[lang=ar] .legal-date.data{letter-spacing:0} /* the Arabic words are not tracked; only the mono digits keep the data look */
.legal-line{display:block;width:calc(100% + 2 * var(--m));height:40px;margin:clamp(26px,4vh,44px) calc(-1 * var(--m)) 0;color:color-mix(in srgb,var(--shore) 40%,transparent);overflow:visible}
.legal-tabs{display:flex;flex-wrap:wrap;gap:4px 22px}
.legal-tabs a{display:inline-flex;align-items:center;min-height:44px;font:500 15px/1.2 var(--sans);text-decoration:none;color:var(--soft);transition:color .25s var(--ease)}
.legal-tabs a:hover{color:var(--fg)}
.legal-tabs a[aria-current=page]{color:var(--fg);text-decoration:underline;text-decoration-color:var(--flare);text-decoration-thickness:2px;text-underline-offset:.4em}
.legal-hero .hero-sea{position:relative;inset:auto;height:40px;margin:clamp(26px,4vh,44px) calc(-1 * var(--m)) 0} /* legacy markup only */

.legal{padding-block:clamp(64px,9vh,110px) clamp(100px,13vh,150px)}
.legal-grid{display:grid;grid-template-columns:minmax(210px,1fr) minmax(0,2.8fr);grid-template-areas:"toc short" "toc body";gap:clamp(40px,5vw,64px) clamp(40px,6vw,110px);align-items:start}
.legal-short{--bg:var(--foam);position:relative;grid-area:short;max-width:none;padding:clamp(26px,3vw,40px);border-radius:0;background:var(--foam);color:var(--deep);margin-top:36px}
.legal-short::before{content:"";position:absolute;inset-inline:0;bottom:calc(100% - 1px);height:36px;background:var(--bg);-webkit-mask:var(--wavemask) center/100% 100% no-repeat;mask:var(--wavemask) center/100% 100% no-repeat}
.legal-short .small,.legal-toc .small{font:600 14px/1.45 var(--sans)}
html[lang=ar] .legal-short .small,html[lang=ar] .legal-toc .small{font-family:var(--ar)}
.legal-short ul{list-style:none;display:grid;gap:12px;margin-top:18px;max-width:68ch}
.legal-short li{position:relative;padding-inline-start:36px;font-size:clamp(18px,1.4vw,21px);line-height:1.5}
.legal-short li::before{content:"";position:absolute;inset-inline-start:0;top:.42em;width:22px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M1 6c2.5-4.5 4.5-4.5 6.5 0s4.5 4.5 6.5 0 4.5-4.5 7-1.5' fill='none' stroke='%232B3BF0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.legal-toc{grid-area:toc;position:sticky;top:100px;max-height:calc(100vh - 130px);overflow:auto;overscroll-behavior:contain}
.legal-toc ol{list-style:none;margin-top:14px;border-top:1px solid var(--hair)}
.legal-toc li{border-bottom:1px solid var(--hair)}
.legal-toc a{display:flex;align-items:baseline;gap:14px;padding:12px 0;font-size:15px;line-height:1.35;text-decoration:none;color:var(--soft);transition:color .25s}
.legal-toc a:hover,.legal-toc a.on{color:var(--fg)}
.legal-toc a.on span:last-child{text-decoration:underline;text-decoration-color:var(--flare);text-decoration-thickness:2px;text-underline-offset:.32em}
.legal-toc .n{flex:none;min-width:2.4em;font:400 13px/1 var(--mono);letter-spacing:.08em;color:var(--flare-ink)}

.legal-body{grid-area:body;min-width:0;max-width:none;font-size:clamp(17px,1.2vw,19px);line-height:1.7}
.legal-part + .legal-part{margin-top:clamp(48px,6vw,72px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--hair)}
.legal-part h2{display:flex;align-items:baseline;gap:16px;margin-bottom:18px;font:400 clamp(30px,3vw,46px)/1.08 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.legal-part h2 .n{flex:none;font:400 13px/1 var(--mono);letter-spacing:.12em;color:var(--flare-ink)}
.legal-part h3{margin-top:30px;font:600 clamp(17px,1.25vw,20px)/1.4 var(--sans);letter-spacing:0}
.legal-part h3 + p{margin-top:6px}
.legal-body p{max-width:68ch}
.legal-body p + p,.legal-body p + ul,.legal-body ul + p,.legal-body p + .legal-table-wrap{margin-top:16px}
.legal-body ul{list-style:none;display:grid;gap:10px;max-width:68ch}
.legal-body ul li{position:relative;padding-inline-start:26px}
.legal-body ul li::before{content:"";position:absolute;inset-inline-start:0;top:.82em;width:10px;height:1.5px;background:var(--flare)}
.legal-body strong{font-weight:600}
.legal-body a,.legal-short a{color:var(--tide);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.legal-body a:hover,.legal-short a:hover{text-decoration-thickness:2px}
/* inline links keep their text layout; the vertical padding only widens the tap area on a phone, to about 44px */
@media (max-width:759px){.legal-body a,.legal-short a{padding-block:12px}}
.legal-body code{font:400 .78em/1 var(--mono);padding:.28em .45em;border-radius:2px;background:color-mix(in srgb,var(--deep) 7%,transparent);white-space:nowrap;direction:ltr;unicode-bidi:isolate}
/* a cookie name in a table cell (16px parent) would be 12.48px: the floor is 13px on every page */
.legal-body code{font-size:max(13px,.78em)}
.legal-part.legal-contact{margin-top:clamp(56px,7vw,88px);padding:clamp(28px,4vw,52px);border:0;border-radius:0}
.legal-contact h2 .n{color:var(--acc)}
.legal-contact p{color:var(--soft)}
.legal-contact .legal-mail{margin-top:20px;font:400 clamp(30px,3.6vw,54px)/1.1 var(--serif);color:var(--fg)}
.legal-body .legal-contact a{color:var(--fg);text-decoration-thickness:1.5px;text-underline-offset:.16em}
/* the email is the one link on the page set in a 30px+ serif: its hit area is 44px tall, and the negative margin keeps the paragraph (and the line below) where it was */
.legal-contact .legal-mail a{display:inline-flex;align-items:center;min-height:44px;margin-block:-6px}
.legal-contact .legal-addr{margin-top:14px;font-size:16px;line-height:1.6}

/* the storage table; it becomes stacked rows where the column is narrow */
.legal-table-wrap{margin-top:20px}
.legal-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.55}
.legal-table thead th{padding:0;padding-inline-end:18px;padding-bottom:12px;text-align:start;font:var(--fs-small);color:var(--soft);border-bottom:1.5px solid var(--fg)}
.legal-table tbody th,.legal-table td{padding:18px 0;padding-inline-end:18px;text-align:start;vertical-align:top;font-weight:400;border-bottom:1px solid var(--hair)}
.legal-table tbody th{white-space:nowrap}
.legal-table tbody th code{display:inline-block;margin-block:2px}
.legal-table td:nth-child(2){width:46%}
.legal-table .th{display:none}
@media (max-width:1180px){
  .legal-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .legal-table,.legal-table tbody,.legal-table tr,.legal-table tbody th,.legal-table td{display:block;width:auto}
  .legal-table tr{padding:20px 0;border-bottom:1px solid var(--hair)}
  .legal-table tbody tr:first-child{border-top:1.5px solid var(--fg)}
  .legal-table tbody th,.legal-table td{padding:0;border:0}
  .legal-table td{margin-top:12px}
  .legal-table td:nth-child(2){width:auto}
  .legal-table td:nth-child(3),.legal-table td:nth-child(4){display:inline-block;vertical-align:top;margin-inline-end:32px}
  .legal-table td:nth-child(3){min-width:11em}
  .legal-table .th{display:block;margin-bottom:2px;font:var(--fs-small);color:var(--soft)}
}
@media (max-width:900px){
  .legal-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"short" "toc" "body"}
  .legal-toc{position:static;max-height:none;overflow:visible}
}
/* on wide screens the pair keeps the page's own gutter, so the contents list lines up with the hero title and the footer
   (a 1180px centred box gave the pair a second left edge at 1600px and up); the reading column keeps its 780px measure */
@media (min-width:1600px){.legal-grid{max-width:none;margin-inline:0}}
html[lang=ar] .legal-body,html[lang=ar] .legal-short li{line-height:1.9;letter-spacing:0}
html[lang=ar] .legal-tabs a{font-family:var(--ar)}
html[lang=ar] .legal-part h2{font-family:var(--ar);font-weight:600;font-size:clamp(24px,2.3vw,34px);line-height:1.45;letter-spacing:0}
html[lang=ar] .legal-part h3{font-family:var(--ar);font-weight:600;font-size:clamp(17px,1.25vw,20px);line-height:1.6}
html[lang=ar] .legal-toc a{line-height:1.6}
html[lang=ar] .legal-short li::before{transform:scaleX(-1)}
html[lang=ar] .legal-table td{line-height:1.8}

/* ---------- 404: words in cols 1–7, Mira on ripples in cols 8–12 ---------- */
.nf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end}
.nf > *{grid-column:1 / span 7}
.nf .nf-art{grid-column:8 / -1;grid-row:1 / span 6;align-self:end;justify-self:center;display:flex;flex-direction:column;align-items:center}
.nf .nf-mira{height:300px;width:auto;max-width:none;position:relative;z-index:1;transform-origin:50% 100%}
.nf .ripple{margin-top:-16px;color:var(--shore)}
.nf .heading{max-width:16ch;margin-top:6px}
.nf .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
@media (max-width:820px){.nf > *,.nf .nf-art{grid-column:1 / -1;grid-row:auto}.nf .nf-art{justify-self:start;margin-top:40px}.nf .nf-mira{height:200px}}

/* about: the service ribbon with reduced motion, at every width. Its still is a straight line that starts off the left edge
   and runs past the right one, so the names are cut ("y", "Brandi", and at 760px+ "Strategy" fell off the left). Those users
   get the same seven names as a wrapped list (the section's own list, same keys and words); the moving ribbon is unchanged.
   Each "~" leads the name after it, so it stays with that name when the list wraps, and mirrors in RTL */
@media (prefers-reduced-motion:reduce){
  .ab-mq > svg.motif{display:none}
  .ab-mq > .sr-only{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px .45em;margin:0;padding:0 var(--m) 40px;list-style:none;font:400 clamp(30px,9vw,64px)/1.2 var(--serif);letter-spacing:-.01em;color:var(--fg)}
  .ab-mq > .sr-only li + li::before{content:"~";color:var(--flare);margin-inline:0 .45em}
  html[lang=ar] .ab-mq > .sr-only{font:600 clamp(24px,7vw,48px)/1.6 var(--ar);letter-spacing:0}
}

/* ---------- The Arabic hint (offered by assets/site.js) ----------
   Only for a browser set to Arabic that lands on the English site.
   A thin Deep bar held to the foot of the screen, after everything else in the page: at the very end it sits under the
   footer rather than over it, and it takes no room above it, so nothing on the page moves. It steps aside while the
   consent bar asks. dir=rtl and lang=ar are on the bar itself (the page around it is English). */
.ar-hint{--ring:var(--foam);position:sticky;bottom:0;z-index:38;display:flex;flex-wrap:wrap;align-items:center;column-gap:clamp(14px,2vw,24px);padding:4px var(--m) calc(4px + env(safe-area-inset-bottom,0px));background:var(--deep);color:var(--shore);box-shadow:0 -1px 0 color-mix(in srgb,var(--shore) 16%,transparent);font:400 15px/1.5 var(--ar)}
.ar-hint p{margin-inline-end:auto;padding-block:10px}
.ar-hint a,.ar-hint button{display:inline-flex;align-items:center;min-height:44px;font:500 15px/1 var(--ar);color:var(--shore)}
.ar-hint a{text-decoration:underline;text-decoration-color:var(--flare);text-decoration-thickness:2px;text-underline-offset:.5em}
.ar-hint button{justify-content:center;min-width:44px;padding:0 4px;background:none;border:0;cursor:pointer;color:color-mix(in srgb,var(--shore) 78%,transparent)}
.ar-hint button:hover,.ar-hint button:focus-visible{color:var(--shore)}
body:has(.consent:not([hidden])) .ar-hint{display:none}
html:has(.ar-hint){scroll-padding-bottom:64px}
@media (max-width:520px){.ar-hint{padding-inline:16px;column-gap:14px}.ar-hint,.ar-hint a,.ar-hint button{font-size:14px}}