/* Generated by wordpress-bestnear/tools/build-theme-assets.cjs from the static repository source/styles/*.css (order: source/lib/styles.cjs, 27 files) + assets/css/wp-adapter.css. Do not edit. */ /* 00-tokens.css. Design tokens (design/step-2.md §1): the Manrope web font, brand colours, surfaces, type scale and spacing. Only tokens change at a breakpoint (--text-lead, once, at 800 px); components never redefine a font size in a media query. Keep the --text-* prefix for the type scale only (the type checks read it). */ @font-face{font-family:Manrope;src:url('../fonts/manrope-latin.woff2') format('woff2');font-weight:400 800;font-display:swap} /* Arabic webfont (S5-03, final QA Q-01; design/step-5.md §0.1/§1.1, ARCHITECTURE §5.4). Self-hosting is ACTIVE: the owner approved the IBM Plex Sans Arabic download (OPS-NOTES.md, 09:30 local 28 Sep), content/site.cjs flags.arabicWebfont is true, and dist/shared/assets/ibm-plex-sans-arabic-{400,700}.woff2 (plus the OFL licence, -OFL.txt) are committed. unicode-range on both rules is copied verbatim from the subset's own assets/fonts/ibm-plex-sans-arabic/sources.tsv (the Arabic block, presentation forms and the few extra Unicode ranges IBM Plex Sans Arabic itself covers), not the shorter placeholder range an earlier draft of this file wrote from memory: it must match the subset actually downloaded, or a character in the subset's coverage but outside a too-narrow range would silently fall back to the next font in --font-ar. The range still excludes Latin, so these rules never intercept an EN page even though the stylesheet is shared. */ @font-face{font-family:"IBM Plex Sans Arabic";src:url('../fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1} @font-face{font-family:"IBM Plex Sans Arabic";src:url('../fonts/ibm-plex-sans-arabic-700.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1} :root{ /* Brand colours (unchanged values). */ --navy:#0b2545;--blue:#0068b0;--cyan:#00c0e0;--ink:#102e49;--muted:#546b7e;--ice:#edf5f8;--line:#d9e5eb;--white:#fff;--radius:8px;--radius-sm:4px; /* Arabic font stack (S5-03, design/step-5.md §1.1): the same list is used whether the self-hosted face above is registered or not — CSS font matching falls through to the next name when "IBM Plex Sans Arabic" resolves to nothing (no @font-face yet, and no OS ships a system font under that exact name), so this token and the rule that applies it below are NOT behind the flag and need no change when the flag flips true. */ --font-ar:"IBM Plex Sans Arabic","Noto Sans Arabic","Geeza Pro","Segoe UI",Tahoma,Manrope,sans-serif; /* Surfaces and roles (DESIGN-AUDIT §3.2). Links and icons use --blue and the WhatsApp action --cyan directly (the --accent and --cta aliases had no user and were removed in the step-2 review). */ --surface:var(--white);--surface-alt:var(--ice);--surface-strong:var(--navy); --ink-on-strong:#e2eef5;--line-on-strong:rgb(255 255 255 / .15);--focus:#007dad;--focus-on-strong:#6ee7ff; /* Type scale (DESIGN-AUDIT §2.2), rem so the browser text-size setting works. */ --text-caption:.8125rem;--text-ui:.9375rem;--text-body:1rem;--text-lead:1.125rem; --text-h3:clamp(1.25rem,1rem + .6vw,1.5rem);--text-h2:clamp(1.875rem,1.1rem + 2.2vw,2.75rem); --lh-caption:1.45;--lh-caps:1.3;--lh-ui:1.3;--lh-body:1.6;--lh-body-strong:1.65;--lh-lead:1.55;--lh-h3:1.25;--lh-heading:1.12; --track-caps:.12em;--track-h3:-.01em;--track-h2:-.03em; /* Spacing, 4 px base (DESIGN-AUDIT §3.5). px on purpose: spacing follows zoom, not the text-size setting. The whole scale is kept, 3xl to 5xl included, for the page templates of steps 3 and 4. */ --space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:96px;--space-5xl:128px; --section-y:clamp(64px,40px + 5vw,112px);--section-y-tight:clamp(48px,36px + 3vw,72px);--section-y-loose:clamp(80px,48px + 7vw,144px); --stack-heading:clamp(32px,24px + 2vw,48px);--stack-text:clamp(16px,12px + 1vw,24px);--gap-split:clamp(40px,6vw,96px); /* Motion (.impeccable.md): the step-3 process accordion uses it (design/step-3.md). */ --ease-out:cubic-bezier(.22,1,.36,1); /* Elevation of the panels that hang under the header (the burger menu, the Services drop-down): navy-tinted. */ --shadow-panel:0 14px 16px #0b25451a; } @media(max-width:800px){:root{--text-lead:1.0625rem}} /* S5-03: Arabic body font-family, both locales' rule kept out of 01-base.css's body{} declaration (owned by S5-01a) by specificity, not file order (:root[lang=ar] body is (0,2,1), stronger than a bare body{} at any position in the cascade). */ :root[lang=ar] body{font-family:var(--font-ar)} /* Arabic body line-height (design/step-5.md §1.3): joined script and diacritics need more room than Latin text. --lh-body (every paragraph, list item and card text) and --lh-body-strong (the navy surfaces) are both 1.9; captions, eyebrows and leads keep their English values. */ :root[lang=ar]{--lh-body:1.9;--lh-body-strong:1.9} /* 01-base.css. Base: element defaults, layout primitives (.wrap, .section, .section-heading, .eyebrow), buttons and links, then the frozen-area shield. Shared by every page. Font sizes come from the tokens only (design/step-2.md §2). */ *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-block-start:var(--space-lg)} body{margin:0;color:var(--ink);background:var(--surface);font-family:Manrope,Arial,sans-serif;font-size:var(--text-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased} button,input,select{font:inherit} button,a,input,select,summary{-webkit-tap-highlight-color:transparent} a{color:inherit;text-decoration:none} a,button,input,select,summary{touch-action:manipulation} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:5px} /* The light ring everywhere (the scroll hero included: 4.23:1 on its ice), the cyan ring on navy surfaces only. */ .team :focus-visible,.process :focus-visible,.package-featured :focus-visible,.closing :focus-visible,.footer :focus-visible{outline-color:var(--focus-on-strong)} button{cursor:pointer} img{display:block;max-width:100%;height:auto} svg{display:block} .icon{width:22px;height:22px;flex-shrink:0} h1,h2,h3,p,figure{margin:0} h1,h2,h3{font-weight:700;text-wrap:balance} h1{font-size:clamp(2.5rem,2.08rem + 1.714vw,3.625rem);line-height:var(--lh-heading);letter-spacing:-.038em;margin-block-end:var(--space-lg)} h2{font-size:var(--text-h2);line-height:var(--lh-heading);letter-spacing:var(--track-h2)} h3{font-size:var(--text-h3);line-height:var(--lh-h3);letter-spacing:var(--track-h3)} p{color:var(--muted);max-width:65ch} .wrap{width:calc(100% - 96px);max-width:1280px;margin-inline:auto} .section{padding-block:var(--section-y);scroll-margin-block-start:var(--space-lg)} /* Section rhythm (design/step-2.md §3): every section of
uses --section-y, except the services (tight on top: the Why band already separates) and the bands that set their own token (team: loose; closing: tight). */ .services{padding-block-start:var(--section-y-tight)} .eyebrow{font-size:var(--text-caption);font-weight:800;line-height:var(--lh-caps);letter-spacing:var(--track-caps);color:var(--blue);margin-block-end:var(--space-sm)} /* Arabic ships 400 and 700 only: 800 maps to 700 (design/step-5.md §1.2). */ :root[lang=ar] .eyebrow{font-weight:700} .section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gap-split);margin-block-end:var(--stack-heading)} .section-heading>div{max-inline-size:720px} .section-description{flex:0 1 25rem;max-inline-size:25rem;font-size:var(--text-lead);line-height:var(--lh-lead)} .button{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding-block:14px;padding-inline:20px;border:1px solid transparent;border-radius:5px;font-size:var(--text-ui);font-weight:800;line-height:var(--lh-ui);transition:background .18s,transform .18s,color .18s} :root[lang=ar] .button{font-weight:700} .button .icon{width:20px;height:20px} .button .end-icon{width:18px;margin-inline-start:6px} .button-primary{background:var(--cyan);color:var(--navy)} .button-primary:hover{background:#61dfef;transform:translateY(-2px)} .button-outline{color:var(--blue);border-color:#a4c8de;background:var(--surface)} .button-outline:hover{background:var(--ice);border-color:var(--blue)} /* Text link: [icon] label [arrow] in one grid row, the row centred in the 44 px box (align-content), so a one-line link sits exactly where the former flex row put it. Each icon is centred on the label's FIRST line (its line box is 1lh tall), so when the label wraps on a phone the icons stay beside that line instead of floating between the two (a flex row would centre them on the whole label). Layouts that set their own display (30-services.css inline flow, 46-legal.css and 31-packages.css grid) are written against this rule. */ .text-link{display:inline-grid;grid-auto-flow:column;justify-content:start;align-content:center;align-items:center;gap:var(--space-xs);min-height:44px;color:var(--blue);font-size:var(--text-ui);font-weight:800;line-height:var(--lh-ui)} :root[lang=ar] .text-link{font-weight:700} .text-link .icon{width:18px;height:18px;align-self:start;margin-block-start:calc((1lh - 18px) / 2)} .text-link:hover span,.text-link:hover{text-decoration:underline;text-underline-offset:5px} .text-link .end-icon{margin-inline-start:2px} /* Pause / play glyph of the Why band toggle: the size of its 15 px label, centred on it. */ .pause-symbol{font-size:var(--text-ui);line-height:1;letter-spacing:-2px;width:12px} /* Media queries: layout only. No font-size in a media query (the tokens change instead). */ @media(max-width:1150px){ .wrap{width:calc(100% - 64px)} } @media(max-width:1000px) and (min-width:801px){ .wrap{width:calc(100% - 48px)} } @media(max-width:800px){ .wrap{width:calc(100% - 40px)} body{padding-block-end:calc(67px + env(safe-area-inset-bottom,0px))} /* Keyboard focus and anchors scroll to just above the fixed mobile action bar, never under it (WCAG 2.4.11). */ html{scroll-padding-block-end:calc(67px + env(safe-area-inset-bottom,0px))} .section-heading{display:block} .section-description{margin-block-start:var(--stack-text);max-inline-size:32.5rem} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*:before,*:after{animation:none!important;transition:none!important} .button-primary:hover{transform:none} } @media print{ body{padding-block-end:0} .section{padding-block:30px} } /* ---- Step 3 additions (design/step-3.md §3.0, Appendix A.1): section surfaces, stacked heading, in-text links. The light service hero (.hero-service, S3-01a) keeps the light ring: it is not in the focus-ring list above. */ .section.is-alt{background:var(--surface-alt)} .section.has-rule{border-block-start:1px solid var(--line)} .section-heading.is-stacked{display:block} .section-heading.is-stacked .section-description{flex:none;max-inline-size:40rem;margin-block-start:var(--stack-text)} /* A link inside a sentence (WCAG 2.5.8 inline exception, no 44 px box). wa() writes icons: hidden here. */ p .inline-link{color:var(--blue);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px} p .inline-link .icon{display:none} /* ---- Frozen-area shield (design/step-2.md §7.2) ---- The scroll hero (.hero-scroll and its fallback .hero-static) and the Why band are approved and must stay pixel-identical (hero-guard, why-guard, verify/checks/frozen.cjs). The step-2 base above would reach them through inheritance and shared classes, so these rules put back the step-1 values inside them, and only there. Exempt from the step-2 type rules (px values). Keep them here, before 20-hero-photo.css and 80-hero-scroll.css, and keep each line at the specificity of the base rule it undoes: `.hero .eyebrow` (0,2,0, 21 px margin at 560 px and below) and `.hero-scroll h1` (0,1,1, 14 px margin at 800 px and below) must still win, exactly as in step 1, hence :where() on the eyebrow line; :where() also keeps the p reset at 0,0,1. S2-06 (owner branch) overrides the hero lines it replaces. In the Why band only the eyebrow (13 px, the min-font-size floor) and the S2-05 Pause button change; its title keeps the step-1 metrics below until the owner decides (owner/why-band, Q7). */ .hero-scroll,.hero-static,.why{font-size:.9375rem;line-height:1.7} :where(.hero-scroll,.hero-static,.why) p{max-width:none} :where(.hero-scroll,.hero-static) .eyebrow{line-height:1.5;margin-block-end:16px} .hero-scroll .button,.hero-static .button{font-size:.875rem;line-height:1.4} /* The step-1 h2 of the Why band: the base h2 token would make it 30 px at 390 (31), 33 at 700 (35), 40 at 1024 (32) and 44 at 1440 (43), with tighter lines and tracking. Left out of distinct-font-sizes (verify/checks/type.cjs, FROZEN_PENDING.sizes) while it waits for the owner. */ .why-head h2{font-size:clamp(30px,3.15vw,43px);line-height:1.18;letter-spacing:-1.5px} @media(max-width:800px){.why-head h2{font-size:35px;letter-spacing:-1.2px}} @media(max-width:560px){.why-head h2{font-size:31px;line-height:1.2;letter-spacing:-1.1px}} /* 10-header.css. Skip link, utility bar, site header, main navigation, collapsible menu (1100 px and below) and the mobile service chip row (lib/layout/header.cjs). Sizes come from the tokens only, never from a media query (design/step-2.md §4). The header keeps its step-1 height at every width: 109 px up to 800, 123 from 801 to 1150 and 133 above. The scroll hero starts under it and hero-scroll.js derives --hero-offset from its top edge (hero-guard, verify/checks/frozen.cjs, §4.1). Do not change the utility bar min-height, .header-inner min-height or the logo width. */ .skip-link{position:fixed;inset-inline-start:20px;inset-block-start:12px;z-index:1000;padding-block:12px;padding-inline:20px;background:var(--surface);transform:translateY(-160%)} .skip-link:focus{transform:translateY(0)} .utility{position:relative;z-index:31;background:var(--blue);color:#fff;font-size:var(--text-caption);line-height:var(--lh-caption)} .utility>.wrap,.utility span{display:flex;align-items:center;gap:var(--space-xs)} .utility>.wrap{min-height:34px;justify-content:space-between} .utility .icon{width:14px;height:14px} .utility-divider{opacity:.55;margin-inline:4px} /* The desktop phone link: its box stays 24 px tall because the 34 px bar is part of the header height the hero depends on (§4.1). A transparent ::after grows its hit area to 44 px, from the top of the page (5 px above the box) to 10 px into the header, which has no target in its top 20 px; the bar is stacked above the header for it. touch-targets measures that hit area. Its focus ring is white and fits inside the bar (24 + 2 x 2 offset + 2 x 3 ring = 34 px): the light ring ran under the header and reached 1.26:1 on the blue bar. */ .utility a{position:relative;display:inline-flex;align-items:center;min-block-size:24px;margin-inline-start:var(--space-md);font-weight:700} .utility a::after{content:"";position:absolute;inset-block:-5px -15px;inset-inline:-4px} .utility a:focus-visible{outline-color:#fff;outline-offset:2px} /* Language switcher (lib/layout/header.cjs langSwitch(), design/step-5.md §3): its link keeps the bar's 24 px box and phone-link hit area, widened to 44 px and more by a transparent inline extension ("العربية" is 29 px wide at 13 px). Nothing is drawn: the bar looks the same. */ .utility .lang-switch a::after{inset-inline:-10px} .site-header{background:var(--surface);position:relative;z-index:30;border-block-end:1px solid #f1f4f6} .header-inner{display:flex;justify-content:space-between;align-items:center;gap:var(--space-xl);min-height:98px} .brand{display:flex;align-items:center;width:234px;min-block-size:44px;flex-shrink:0} #main-nav{display:flex;align-items:center;gap:28px;font-size:var(--text-ui);font-weight:800;line-height:var(--lh-ui)} :root[lang=ar] #main-nav{font-weight:700} #main-nav>a:not(.button),.nav-group-link{display:inline-flex;align-items:center;min-inline-size:44px;min-block-size:44px} #main-nav>a:not(.button):hover,#main-nav>[aria-current],.nav-group-link:hover,.nav-group-link[aria-current]{color:var(--blue)} .button-header{background:var(--blue);color:#fff;min-height:46px;padding-block:var(--space-sm);padding-inline:var(--space-md)} .button-header:hover{background:var(--navy)} .button-header .end-icon{display:none} /* Services group (owner request, 29 Sep 2026; lib/layout/header.cjs servicesGroup(), dist/ui.js menu block). Without JavaScript the group is only its link to the services hub, laid out exactly as before (the wrapper is display:contents; the button and the panel draw nothing). With html.js, set before the first paint, the link gives way to the disclosure button, same label plus a chevron. Above 1100 px the panel drops from the header's bottom edge under the button, absolutely positioned: the header keeps its height (§4.1) and the panel never covers it. The nav and the wrapper stretch over the full header height, so the pointer stays inside the group on its way from the button to the panel (ui.js also waits before closing a panel that hover opened). The panel's inline start is pulled back by its border, padding and row padding, so the icon column lines up with the "Services" label; logical properties only, so it mirrors on /ar/. */ .nav-group{display:contents} .nav-group-toggle{display:none} .js .nav-group-link{display:none} .js #main-nav{align-self:stretch} .js .nav-group{position:relative;display:flex;align-items:center;align-self:stretch} .js .nav-group-toggle{display:inline-flex;align-items:center;gap:var(--space-2xs);min-block-size:44px;padding:0;border:0;background:none;color:inherit} .nav-group-toggle .icon{width:16px;height:16px;transition:transform .2s var(--ease-out)} .nav-group-toggle[aria-expanded=true] .icon{transform:rotate(180deg)} .nav-group-toggle:hover,.nav-group-toggle[aria-expanded=true],.nav-group-toggle.is-current{color:var(--blue)} .nav-group-panel{display:none;position:absolute;z-index:1;inset-block-start:calc(100% + 1px);inset-inline-start:calc(-1 * (var(--space-xs) + var(--space-sm) + 1px));inline-size:max-content;min-inline-size:16rem;max-inline-size:calc(100vw - 2 * var(--space-md));margin:0;padding:var(--space-xs);list-style:none;background:var(--surface);border:1px solid var(--line);border-block-start:0;border-end-start-radius:var(--radius);border-end-end-radius:var(--radius);box-shadow:var(--shadow-panel);transition:opacity .16s var(--ease-out)} .js .nav-group-panel:not([hidden]){display:block} /* A short fade in, no slide: a slide would pass over the header's bottom edge. */ @starting-style{.nav-group-panel{opacity:0}} .nav-group-panel a{display:flex;align-items:center;gap:var(--space-sm);min-block-size:44px;padding-inline:var(--space-sm);border-radius:var(--radius-sm);color:var(--ink);font-weight:700;white-space:nowrap;transition:background-color .15s,color .15s} .nav-group-panel .icon{width:20px;height:20px;color:var(--blue)} .nav-group-panel a:focus-visible{outline-offset:-3px} .nav-group-panel a[aria-current]{background:var(--ice);color:var(--blue)} .nav-group-all{margin-block-end:var(--space-xs);padding-block-end:var(--space-xs);border-block-end:1px solid var(--line)} .nav-group-all a{font-weight:800} :root[lang=ar] .nav-group-all a{font-weight:700} .nav-group-all .end-icon{width:18px;height:18px} @media(hover:hover){ .nav-group-panel a:hover{background:var(--ice);color:var(--blue)} } .menu-toggle{display:none;border:0;background:var(--ice);color:var(--navy);padding:13px;border-radius:4px;width:46px;height:46px} .menu-toggle span{display:block;background:currentColor;height:2px;width:20px;margin-block:4px;transition:transform .2s} /* Collapsible menu from 1100 px down (DESIGN-AUDIT §2.2: the menu collapses instead of shrinking its links). The breakpoint is 68.75em (1100 px at the default text size) so that it follows the browser text-size setting, like the rem nav labels; dist/ui.js uses the same query (MENU_RANGE). ui.js closes the menu when the width leaves this range (keyboard focus moves to a visible control), on Escape (focus back on the button), on an outside click and on a link click. Without JavaScript the links wrap under the logo. */ @media(max-width:68.75em){ .header-inner{min-height:80px;flex-wrap:wrap;gap:0} .brand{width:202px} .js .menu-toggle{display:block} #main-nav{width:100%;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);padding-block-end:var(--space-md)} .js #main-nav{display:none;position:absolute;inset-inline:0;inset-block-start:100%;width:100%;background:var(--surface);padding-block:var(--space-md) var(--space-lg);padding-inline:var(--space-lg);box-shadow:var(--shadow-panel);flex-direction:column;align-items:stretch;gap:0;border-block-start:1px solid var(--line)} .js #main-nav.is-open{display:flex} .js #main-nav>a:not(.button){min-height:48px;border-block-end:1px solid var(--line)} .js #main-nav>.button{margin-block-start:var(--space-md);justify-content:center} /* Services group in the panel: the same button, full width like the links, expands the list in place, indented under it; the rows keep their 44 px and wrap if a label ever needs to. */ .js .nav-group{display:block;position:static} .js .nav-group-toggle{display:flex;justify-content:space-between;inline-size:100%;min-block-size:48px;border-block-end:1px solid var(--line);text-align:start} /* In the panel, blue marks the current page or section only; an expanded group says so with its chevron. */ .js .nav-group-toggle[aria-expanded=true]:not(.is-current,:hover){color:inherit} .js .nav-group-panel{position:static;inline-size:auto;min-inline-size:0;max-inline-size:none;padding-block:var(--space-2xs) var(--space-xs);padding-inline:var(--space-xs) 0;border:0;border-block-end:1px solid var(--line);border-radius:0;box-shadow:none;transition:none} .nav-group-panel a{white-space:normal} .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(6px) rotate(45deg)} .menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0} .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-6px) rotate(-45deg)} } /* Tablet: the panel hangs under the burger at the inline end instead of stretching across the page. */ @media(max-width:68.75em) and (min-width:801px){ .js #main-nav{inset-inline:auto 0;width:min(100%,380px);border-inline-start:1px solid var(--line);border-end-start-radius:var(--radius)} } /* 801 to 1150 px: the step-1 header height (88 px, header bottom at 123 px) with or without the burger, so the frozen scroll hero keeps its step-1 offset there too (it moved 8 px up at 801-1100 and 10 px down at 1101-1150). */ @media(min-width:801px) and (max-width:1150px){ .header-inner{min-height:88px} } @media(max-width:800px){ .utility>.wrap{justify-content:center;min-height:28px} .utility>.wrap>span:last-child{display:none} } /* Mobile service chip row (DESIGN-AUDIT C11, design spec step-1 §2). A sibling of .site-header, before
. Shown only at 800 px or less on screens at least 700 px tall, where it takes the utility bar's place: on shorter phones the page keeps today's header so the frozen hero does not move (spec §6). A page without the row (the scroll hero page, until content/site.cjs flags.chipsAboveScrollHero) keeps its utility bar: only .utility.with-chips gives way. No JavaScript: the list scrolls inside the row; the cut last visible chip is the scroll cue. Unchanged in step 2 except the tokens. */ .service-chips{display:none;background:var(--surface);padding-block:6px} .service-chips ul{display:flex;gap:var(--space-xs);margin:0;padding-block:0;padding-inline:20px;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scroll-padding-inline:20px;scrollbar-width:none} .service-chips ul::-webkit-scrollbar{display:none} .service-chips li{flex:none;scroll-snap-align:start} /* The current page's chip is the row's first view (design/step-3.md §11 P3, §12 item 7): from the fourth service on it started off-screen at 390 px. Browsers without scroll-initial-target keep the row at its start. */ .service-chips li:has(>a[aria-current=page]){scroll-initial-target:nearest} .service-chips a{display:inline-flex;align-items:center;min-height:44px;padding-inline:16px;border:1px solid var(--line);border-radius:5px;background:var(--ice);color:var(--navy);font-size:var(--text-ui);font-weight:700;line-height:var(--lh-ui);white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s} .service-chips a:active{background:var(--line)} .service-chips a:focus-visible{outline:3px solid var(--focus);outline-offset:-4px} .service-chips a[aria-current=page]{background:var(--navy);border-color:var(--navy);color:#fff} .service-chips a[aria-current=page]:focus-visible{outline-color:var(--focus-on-strong)} @media(hover:hover){ .service-chips a:hover{border-color:var(--blue);color:var(--blue)} .service-chips a[aria-current=page]:hover{border-color:var(--navy);color:#fff} } @media(max-width:800px) and (min-height:700px){ .service-chips{display:block} .utility.with-chips{display:none} } @media print{ .utility,.menu-toggle,.service-chips{display:none!important} } /* 20-hero-photo.css. The shared .hero classes of the frozen scroll hero (lib/sections/hero-scroll.cjs: .hero, .hero-content, .hero-copy, .hero .eyebrow, .hero-description, .hero-actions, .hero-secondary, .hero-assurances; approved, change only on the owner branch S2-06), then the light hero .hero-service of the service and company pages (lib/sections/hero-photo.cjs heroService()), which shares no class with them. The step-2 navy photo hero (photo, shade, airflow, caption row and Pause button) is gone (C18, design/step-3.md §3.1). */ .hero{position:relative;min-height:610px;overflow:hidden;background:var(--navy);isolation:isolate;color:#fff;display:flex;align-items:center} .hero-content{padding-top:66px;padding-bottom:96px} .hero-copy{max-width:660px} .hero .eyebrow{display:flex;align-items:center;gap:9px;color:#d5f4fc;font-size:10px;letter-spacing:1.6px} .hero .eyebrow>span{display:inline-block;width:24px;height:2px;background:var(--cyan)} .hero-description{max-width:510px;font-size:16px;line-height:1.8;color:#e1edf4} .hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:30px} .hero-secondary{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:13px;font-weight:700;color:#fff} .hero-secondary .icon{width:18px;height:18px} .hero-secondary:hover{text-decoration:underline;text-underline-offset:4px} .hero-assurances{display:flex;gap:25px;flex-wrap:wrap;font-size:12px;color:#e1edf4;margin-top:27px} .hero-assurances span{display:flex;align-items:center;gap:8px} .hero-assurances .icon{color:#74d6e8;width:17px;height:17px} @media(min-width:1600px){ .hero{min-height:640px} } @media(max-width:1150px){ .hero{min-height:590px} .hero-copy{max-width:620px} } @media(max-width:1000px) and (min-width:801px){ .hero-copy{max-width:600px} } @media(max-width:800px){ .hero{min-height:580px} .hero-content{padding-block:52px 76px} .hero-copy{max-width:530px} .hero-description{font-size:15px;max-width:440px} .hero .eyebrow{font-size:9px} .hero-actions{gap:14px 22px;margin-top:25px} .hero-assurances{gap:17px;font-size:11px} } @media(max-width:560px){ .hero{min-height:617px;align-items:flex-start} .hero-content{padding-top:42px;padding-bottom:91px} .hero-description{font-size:14px;line-height:1.85;max-width:350px} .hero .eyebrow{font-size:8px;letter-spacing:1.15px;gap:7px;margin-bottom:21px} .hero .eyebrow>span{width:15px} .hero-actions{align-items:flex-start;flex-direction:column;gap:10px;margin-top:25px} .hero .button{padding:15px 17px;min-height:52px;font-size:12px} /* Logical conversion only (ARCHITECTURE §5.5): same 10px gap in LTR, mirrors for step 5 without a [dir=rtl] override. Not a redesign of the frozen shared .hero rules above (S2-06 still owns their visual values). */ .hero .button .end-icon{margin-inline-start:10px} .hero-secondary{font-size:12px} .hero-assurances{margin-top:19px;gap:11px;font-size:9px} .hero-assurances .icon{width:15px;height:15px} } @media print{ .hero{min-height:450px} } /* ---- Light service hero (.hero-service), step 3 (design/step-3.md §3.1, Appendix A.2) ---- Its own class family: the root is not a .hero, so none of the shared .hero* rules above (frozen scroll hero) reach it, and nothing here reaches the scroll hero. Ice surface, copy at the inline start, framed media at the inline end (a real photo, or an illustration in a white frame). No airflow, no pause button, no overlay. Company pages (design/step-4.md §1.6) may add one eyebrow after the breadcrumb (base .eyebrow, no rule here). The compact variant (.hero-service.hero-compact, the Contact page) is sized in 47-contact.css (design/step-4.md A.2); the renderer loads its photo lazily, so the picture hidden at 800 px and below is never fetched. */ .hero-service{background:var(--surface-alt);padding-block:var(--section-y-tight)} .hero-service-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:var(--space-xl) var(--gap-split)} .hero-service-copy{min-inline-size:0} .hero-service .breadcrumb{margin-block:calc(-1 * var(--space-sm)) var(--space-sm)} .hero-service h1{margin-block-end:0;max-inline-size:13em} .hero-service-lead{margin-block-start:var(--stack-text);max-inline-size:34rem;font-size:var(--text-lead);line-height:var(--lh-lead)} .hero-service-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-lg);margin-block-start:var(--space-xl)} /* The soft shadow of the home hero's primary button (80-hero-scroll.css), so both heroes' main actions match. */ .hero-service-actions .button-primary{box-shadow:0 10px 24px rgb(0 104 176 / .18)} /* Assurances are short UI labels (15 px), not running text: spans in a div, as in the step-2 hero (a
  • would make them running text for type.cjs body-text-size, 16 px minimum above 800 px). */ .hero-service-assurances{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-lg);margin-block-start:var(--space-lg);font-size:var(--text-ui);line-height:var(--lh-ui);color:var(--ink)} .hero-service-assurances>span{display:flex;align-items:center;gap:var(--space-xs)} .hero-service-assurances .icon{inline-size:18px;block-size:18px;color:var(--blue)} .hero-media{margin:0;min-inline-size:0} .hero-media>img,.hero-art{display:block;inline-size:100%;block-size:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)} .hero-art{background:var(--surface);border:1px solid var(--line);overflow:hidden} .hero-art>svg{inline-size:100%;block-size:100%} .hero-media figcaption{margin-block-start:var(--space-sm);font-size:var(--text-caption);line-height:var(--lh-caption);color:var(--muted)} .hero-media .is-team{font-weight:800;line-height:var(--lh-caps);letter-spacing:var(--track-caps)} :root[lang=ar] .hero-media .is-team{font-weight:700} @media(max-width:800px){ .hero-service-grid{grid-template-columns:minmax(0,1fr)} .hero-media{max-inline-size:32rem} } @media(max-width:560px){ .hero-service-actions{flex-direction:column;align-items:flex-start} .hero-media>img,.hero-art{aspect-ratio:3/2} } /* 30-services.css. Services grid of the home page (lib/sections/services-grid.cjs, design/step-2.md §5.1). Vertical padding: 01-base (--section-y-tight on top). Type from the tokens only; media queries change layout. */ /* The white Why band ends with its Pause control, not with a card: a 1 px line marks where it stops (§3.1). */ .services{border-block-start:1px solid var(--line)} .service-gallery{display:grid;grid-template-columns:1.22fr 1fr 1fr;gap:var(--space-lg)} .service-card{min-width:0} .service-image{height:255px;position:relative;overflow:hidden;border-radius:var(--radius)} .service-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s} .service-featured .service-image img{object-position:50% 33%} #home-cleaning .service-image img{object-position:50% 36%} .service-card:hover .service-image img{transform:scale(1.025)} .service-content{padding-block-start:var(--space-lg)} .service-content h3{margin-block-end:var(--space-xs)} .service-content p{max-inline-size:40ch} /* Service links flow as text: when a label wraps, the arrow follows its last word instead of the column edge. */ /* align-content and the icons' block margin belong to the base grid row (01-base.css): reset for this inline flow. */ .services .text-link{display:inline-block;align-content:normal;min-height:44px;padding-block:12px;padding-inline-end:22px;margin-block-start:var(--space-2xs)} .services .text-link .icon{display:inline-block;vertical-align:-4px;margin-block-start:0} .services .text-link .icon:first-child:not(:last-child){margin-inline-end:var(--space-xs)} /* The arrow hangs in the 22 px end padding (net advance 0), so it never wraps alone onto a new line. */ .services .text-link .icon:last-child{margin-inline-start:var(--space-2xs);margin-inline-end:-22px} /* Mini grid (services without a photo): 24 px icon | title, copy and link. 4 columns, 2 up to 1100 px, 1 at 560. */ .service-additional{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-xl) var(--space-lg);padding-block-start:var(--space-xl);margin-block-start:var(--space-xl);border-block-start:1px solid var(--line)} .service-additional article{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:var(--space-sm);align-content:start;min-width:0;scroll-margin-block-start:36px} .service-additional>article>.icon{width:24px;height:24px;color:var(--blue);margin-block-start:2px} .service-additional h3{font-size:var(--text-lead);line-height:1.4;letter-spacing:0} .service-additional p{margin-block-start:var(--space-2xs)} /* The WhatsApp icon only (a page link's single icon is its arrow and stays). */ .service-additional .text-link .icon:first-child:not(:last-child){display:none} @media(max-width:1150px){ .service-image{height:235px} } @media(max-width:1100px){ .service-additional{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:800px){ .service-gallery{grid-template-columns:1.1fr 1fr 1fr;gap:var(--space-md)} .service-image{height:200px} .service-content{padding-block-start:var(--space-md)} .service-content .text-link .icon:first-child:not(:last-child){display:none} } /* Up to 720 px (phones, and a 1280 px window at 200 % zoom) three columns get too narrow for 16 px text: the featured card spans the width and the others become rows, photo | text. */ @media(max-width:720px){ .service-gallery{display:flex;flex-direction:column;gap:var(--space-lg)} .service-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--space-md)} .service-featured{display:block} .service-image{height:156px} .service-featured .service-image{height:220px} .service-content{padding-block-start:0} .service-featured .service-content{padding-block-start:var(--space-md)} } @media(max-width:560px){ .service-additional{grid-template-columns:minmax(0,1fr);gap:var(--space-md)} } @media(prefers-reduced-motion:reduce){ .service-card:hover .service-image img{transform:none} } /* 31-packages.css. Packages, #packages (lib/sections/packages.cjs, design/step-2.md §5.2). Ice section, white cards, navy Premium card. Type from the base and the tokens only; media queries change layout. */ .pricing{background:var(--surface-alt)} .package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg);align-items:stretch} .package{display:flex;flex-direction:column;min-width:0;padding-block:var(--space-xl);padding-inline:var(--space-lg);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transition:box-shadow .2s} .package:hover{box-shadow:0 12px 26px #0b25450b} /* Name (base h3) and badge; the row wraps instead of reserving a fixed height. */ .package-label{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-xs) var(--space-sm);margin-block-end:var(--space-2xs)} .package-label>span{padding-block:var(--space-2xs);padding-inline:var(--space-xs);border-radius:var(--radius-sm);background:var(--ice);color:var(--blue);font-size:var(--text-caption);font-weight:700;line-height:var(--lh-caption)} .package>.button{margin-block-start:var(--space-lg);width:100%;min-height:48px;padding-block:var(--space-sm);padding-inline:var(--space-md);justify-content:flex-start} .package>.button .end-icon{margin-inline-start:auto} .feature-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-sm);margin:0;margin-block-start:var(--space-lg);padding:0;padding-block-start:var(--space-lg);border-block-start:1px solid var(--line)} .feature-list li{display:flex;gap:var(--space-xs)} .feature-list .icon{width:16px;height:16px;margin-block-start:var(--space-2xs);color:var(--blue)} .scope-note{margin-block-start:auto;padding-block-start:var(--space-md);border-block-start:1px solid var(--line)} /* The note is pinned to the bottom (margin-block-start:auto) and never closer than 24 px to the last feature, even in the tallest card, where auto resolves to 0. The list is the last child when a card has no note. */ .package .feature-list:not(:last-child){margin-block-end:var(--space-lg)} .package-featured{background:var(--surface-strong);color:#fff;border-color:var(--surface-strong)} .package-featured .package-label>span{background:var(--cyan);color:var(--navy)} .package-featured p{color:var(--ink-on-strong)} .package-featured li{line-height:var(--lh-body-strong)} .package-featured .feature-list,.package-featured .scope-note{border-color:var(--line-on-strong)} .package-featured .feature-list .icon{color:var(--cyan)} /* "How to get your price" row + AC links (S1-06, design/step-1.md §3.4). Deliberately not aligned with the 3 package cards above (h3 + 3-column list = 4 columns), so step 1 does not read as "Basic". */ .price-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--space-lg);row-gap:var(--space-xl);margin-block-start:var(--space-2xl);padding-block-start:var(--space-xl);border-block-start:1px solid var(--line)} .price-steps h3{grid-column:1;color:var(--ink)} .price-steps-list{grid-column:2/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg);margin:0;padding:0;list-style:none} .price-steps-list li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--space-md);align-items:start} .price-step-n{width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--blue);font-weight:800;font-size:var(--text-ui);font-variant-numeric:tabular-nums} :root[lang=ar] .price-step-n{font-weight:700} .price-steps-list li>div{padding-block-start:var(--space-xs)} .price-step-title{line-height:1.4;font-weight:700;color:var(--navy)} .price-steps-list li>div>p:last-child{margin-block-start:var(--space-2xs)} /* Step 1: "Not sure?" then the 44 px "Ask our team" link on its own line, so the link neither makes the first line taller nor sits off its baseline (the three step texts start at the same height). */ .price-steps-list .text-link{display:grid;width:fit-content} .price-links{grid-column:1/-1;display:flex;flex-wrap:wrap;column-gap:var(--space-xl);margin:0} @media(max-width:1100px){ .package-grid{gap:var(--space-md)} .package{padding-inline:var(--space-md)} } @media(max-width:800px){ .package-grid{grid-template-columns:minmax(0,40rem)} .package{padding-inline:var(--space-lg)} .price-steps{display:block;margin-block-start:var(--space-xl);padding-block-start:var(--space-lg)} .price-steps-list{grid-template-columns:minmax(0,1fr);margin-block-start:var(--space-md);gap:var(--space-md)} .price-links{flex-direction:column;align-items:flex-start;margin-block-start:var(--space-md)} } @media(max-width:560px){ .package{padding-block:var(--space-lg)} } @media print{ .package{break-inside:avoid} } /* 33-process.css. Process, #process (lib/sections/process.cjs): the mid-page navy band of every service page (design/step-2.md §3.3, §5.4; design/step-3.md §3.8): white and --ink-on-strong text, cyan numbers, 15 % white lines. Full variant: phases of numbered steps (AC 4 x 16, pest control 4 x 8), folded by phase on the AC page at 800 px or less (.is-accordion). Compact variant: 3 to 5 steps (.process-compact). Sizes come from the tokens and the base (h2, h3, body); no font size in a media query. */ .process{background:var(--surface-strong);color:#fff} .process h2,.process h3{color:#fff} .process .eyebrow{color:var(--cyan)} .process p,.process li{color:var(--ink-on-strong)} /* Running text on navy at 1.65. :where() keeps this at 0,0,1 so the roles keep their own line heights here too (.eyebrow 1.3, .section-description 1.55): at 0,1,1 it overrode them. */ :where(.process) :is(p,li){line-height:var(--lh-body-strong)} .process .section-heading>div{max-inline-size:660px} .process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-xl) var(--space-lg)} .phase-index{display:flex;align-items:center;gap:var(--space-md);margin-block-end:var(--space-lg)} .phase-index>span{font-size:var(--text-h3);line-height:var(--lh-h3);font-weight:700;color:var(--cyan);font-variant-numeric:tabular-nums} /* transform-origin has no logical keyword: step 5 mirrors it in 90-rtl.css (ARCHITECTURE §5.5). */ .phase-index i{display:block;flex:1;height:1px;background:var(--line-on-strong);transform-origin:left} .process-phase>p{margin-block-start:var(--space-xs)} .process-phase ol{list-style:none;display:grid;gap:var(--space-sm);margin:0;margin-block-start:var(--space-lg);padding:0} .process-phase li{display:flex;gap:var(--space-sm)} .process-phase li>span{flex-shrink:0;padding-block-start:3px;font-size:var(--text-caption);line-height:var(--lh-caption);font-weight:700;color:var(--cyan);font-variant-numeric:tabular-nums} .process-tail{display:flex;align-items:center;gap:var(--space-sm);margin-block-start:var(--space-xl);padding-block-start:var(--space-lg);border-block-start:1px solid var(--line-on-strong);color:var(--ink-on-strong)} .process-tail .icon{color:var(--cyan)} .process-phase.is-visible .phase-index i{animation:draw-line .8s ease both} .process-phase:nth-child(2) .phase-index i{animation-delay:.1s} .process-phase:nth-child(3) .phase-index i{animation-delay:.2s} .process-phase:nth-child(4) .phase-index i{animation-delay:.3s} @keyframes draw-line{from{transform:scaleX(.25)}to{transform:scaleX(1)}} @media(max-width:1100px){ .process-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2xl) var(--space-lg)} } @media(max-width:560px){ .process-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)} .process-phase{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:var(--space-md)} .phase-index{grid-column:1;grid-row:1/4;display:block;margin:0;border-inline-end:1px solid var(--line-on-strong)} .phase-index>i{display:none} .process-phase h3,.process-phase>p,.process-phase ol{grid-column:2} .process-phase ol{margin-block-start:var(--space-md)} .process-tail{align-items:flex-start} } /* ---- Step 3 additions (design/step-3.md §3.8, Appendix A.4) ---- Compact process (.process.process-compact): 3 to 5 steps without phases, on the same navy band. A row of numbered circles joined by a 1 px line above 1100 px; a vertical timeline at 1100 px or less. The
      gives the order to assistive technology, so the visible number is aria-hidden. --disc is the circle (compact steps, the size of the packages' .price-step-n) and the phase-number column (accordion); every offset below derives from it and the spacing tokens. */ .process{--disc:40px} .steps{display:grid;grid-template-columns:repeat(var(--steps,4),minmax(0,1fr));gap:var(--space-lg);margin:0;padding:0;list-style:none} .steps[data-steps="3"]{--steps:3} .steps[data-steps="5"]{--steps:5} .steps>li{position:relative;min-inline-size:0;padding-block-start:calc(var(--disc) + var(--space-md))} .step-n{position:absolute;inset-block-start:0;inset-inline-start:0;display:grid;place-items:center;inline-size:var(--disc);block-size:var(--disc);border:1px solid var(--line-on-strong);border-radius:50%;color:var(--cyan);font-size:var(--text-ui);font-weight:800;font-variant-numeric:tabular-nums} :root[lang=ar] .step-n{font-weight:700} /* The connector starts 12 px after this circle and stops 12 px before the next one (column gap 24 px). */ .steps>li::before{content:"";position:absolute;inset-block-start:calc(var(--disc) / 2);inset-inline-start:calc(var(--disc) + var(--space-sm));inset-inline-end:calc(var(--space-sm) - var(--space-lg));block-size:1px;background:var(--line-on-strong)} .steps>li:last-child::before{display:none} .steps h3{font-size:var(--text-lead);line-height:1.4;letter-spacing:0} .steps p{margin-block-start:var(--space-xs)} /* Accordion by phase (.process.is-accordion, AC page, C21): every phase is a
      , open in the HTML. At 800 px or less dist/shared/accordion.js closes all but the first; above, it keeps them open and inert (data-static on the phase, the summary out of the tab order). The summary holds the phase number, the name, a step count and a chevron; the count and the chevron show at 800 px or less only. */ .process-phase>summary{display:block;list-style:none} .process-phase>summary::-webkit-details-marker{display:none} .phase-count,.phase-chevron{display:none} .phase-count{font-size:var(--text-caption);line-height:var(--lh-caption);color:var(--ink-on-strong)} .process-phase[data-static]>summary{cursor:default} @media(max-width:1100px){ .steps{grid-template-columns:minmax(0,1fr);max-inline-size:40rem;gap:0} .steps>li{padding-block:0 var(--space-xl);padding-inline-start:calc(var(--disc) + var(--space-lg))} .steps>li:last-child{padding-block-end:0} .steps>li::before{inset-block:calc(var(--disc) + var(--space-xs)) var(--space-xs);inset-inline:calc(var(--disc) / 2) auto;inline-size:1px;block-size:auto} } @media(max-width:800px){ .process.is-accordion .process-grid{grid-template-columns:minmax(0,1fr);gap:0;border-block-start:1px solid var(--line-on-strong)} .process.is-accordion .process-phase{display:block;border-block-end:1px solid var(--line-on-strong)} .process.is-accordion .process-phase>summary{display:grid;grid-template-columns:var(--disc) minmax(0,1fr) 24px;column-gap:var(--space-sm);align-items:center;min-block-size:calc(var(--disc) + 2 * var(--space-md));padding-block:var(--space-md);cursor:pointer} .process.is-accordion .phase-index{grid-column:1;grid-row:1/3;display:block;margin:0;border:0} .process.is-accordion .phase-index>i{display:none} .process.is-accordion .process-phase h3{grid-column:2} .process.is-accordion .phase-count{display:block;grid-column:2} .process.is-accordion .phase-chevron{display:block;grid-column:3;grid-row:1/3;inline-size:24px;block-size:24px;color:var(--cyan);transition:transform .15s var(--ease-out)} .process.is-accordion .process-phase[open] .phase-chevron{transform:rotate(180deg)} .process.is-accordion .process-phase>.phase-label{margin:0;padding-inline-start:calc(var(--disc) + var(--space-sm))} .process.is-accordion .process-phase ol{margin-block:var(--space-md) 0;padding-block-end:var(--space-lg);padding-inline-start:calc(var(--disc) + var(--space-sm))} .process.is-accordion .process-tail{border-block-start:0;padding-block-start:0} } @media print{ .process{background:none;color:var(--ink)} .process h2,.process h3,.process p,.process li{color:var(--ink)} .process-phase{break-inside:avoid} } /* 34-proof.css. Before/after comparison and Service Report, #proof (lib/sections/proof.cjs). White section; the report is an ice panel (design/step-2.md §5.5). The comparison geometry stays physical on purpose (forced dir=ltr at step 5, ARCHITECTURE §5.5): .comparison-line, .before-label and .after-label are logical-properties exceptions (verify/checks/css-lint.cjs). */ .proof .section-heading>div{max-inline-size:720px} .proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-split);align-items:start} /* Comparison hidden (c.real false): the report panel alone, capped for readability and aligned with the heading column at the inline start, like every other block of the page. */ .proof-grid-solo{grid-template-columns:minmax(0,1fr)} .proof-grid-solo .report-panel{max-inline-size:40rem} .comparison{min-width:0} .comparison-canvas{position:relative;width:100%;aspect-ratio:600/320;overflow:hidden;border-radius:var(--radius);background:var(--ice)} .comparison-before,.comparison-after{position:absolute;inset:0} /* The "after" (clean) layer is revealed from the right edge as --reveal grows, so the default 50% keeps Before (dirty, background layer) on the left and After (clean) on the right, reading order. The range runs right to left (direction:rtl below), so its thumb moves the same way as the divider, while the value stays the clean share that aria-valuetext announces (interactions.js). Step 5 (RTL pages): mirror the labels and the reveal edge together with this. */ .comparison-after{clip-path:inset(0 0 0 calc(100% - var(--reveal,50%)))} .comparison-canvas svg{width:100%;height:100%} .comparison-line{position:absolute;inset-block:0;left:calc(100% - var(--reveal,50%));width:2px;background:white;box-shadow:0 0 8px #0003} .comparison-line:after{content:'↔';display:grid;place-items:center;position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:38px;height:38px;background:white;border-radius:50%;color:var(--blue);font-size:20px;box-shadow:0 4px 12px #0002} .comparison-label{position:absolute;inset-block-start:14px;padding-block:var(--space-2xs);padding-inline:var(--space-xs);border-radius:var(--radius-sm);background:var(--surface);font-size:var(--text-caption);line-height:var(--lh-caption);font-weight:700} .before-label{left:14px} .after-label{right:14px} .comparison-control{display:flex;gap:var(--space-md);align-items:center;padding-block:var(--space-md) var(--space-xs)} .comparison-control label{font-size:var(--text-ui);font-weight:700} .comparison-control input{min-inline-size:80px;flex:1;min-block-size:44px;accent-color:var(--blue);direction:rtl} .comparison figcaption{max-inline-size:480px;color:var(--muted)} .report-panel{padding:var(--space-xl);border-radius:var(--radius);background:var(--surface-alt)} .report-title{display:flex;align-items:center;gap:var(--space-xs);margin-block-end:var(--space-md);color:var(--blue);font-size:var(--text-caption);line-height:var(--lh-caps);font-weight:800;letter-spacing:var(--track-caps)} :root[lang=ar] .report-title{font-weight:700} .report-title .icon{width:18px;height:18px} .report-panel>p:not(.report-note){margin-block-start:var(--space-xs)} /* Icon | title and text | scope tag. The tag stays visible at every width; at 560 px and below it moves under the text. */ .report-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:start;gap:var(--space-xs) var(--space-sm);margin-block-start:var(--space-md);padding-block-start:var(--space-md);border-block-start:1px solid var(--line)} .report-row>.icon{width:20px;height:20px;margin-block-start:3px;color:var(--blue)} .report-row strong{display:block;font-weight:700;color:var(--ink)} .report-row span{display:block;margin-block-start:var(--space-2xs);color:var(--muted)} .report-row small{justify-self:end;padding-block:var(--space-2xs);padding-inline:var(--space-xs);border-radius:var(--radius-sm);background:var(--surface);color:var(--blue);font-size:var(--text-caption);line-height:var(--lh-caption);font-weight:700} .report-note{margin-block-start:var(--space-lg)} @media(max-width:800px){ .proof-grid{grid-template-columns:minmax(0,1fr)} .comparison-control{flex-wrap:wrap} } @media(max-width:560px){ .report-panel{padding:var(--space-lg)} .report-row{grid-template-columns:20px minmax(0,1fr)} .report-row small{grid-column:2;justify-self:start} } /* 35-reviews.css. Reviews band (lib/sections/reviews.cjs), rendered only with site.flags.reviewsUrl. White, tight rhythm, placed after the packages (ice), no side rule (design/step-2.md §5.8). The h2 and the eyebrow come from the base. */ .reviews{padding-block:var(--section-y-tight);background:var(--surface)} .reviews-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-split)} .review-placeholder{max-inline-size:28rem;color:var(--ink)} .review-placeholder span{display:block;margin-block-start:var(--space-2xs);color:var(--muted)} @media(max-width:800px){ .reviews-inner{display:block} .review-placeholder{margin-block-start:var(--space-md)} } /* 37-faq.css. FAQ, #faq (lib/sections/faq.cjs). White section with a 1 px top line (it follows a white or ice section); vertical padding: 01-base (--section-y). Questions at lead 700, answers at body (design/step-2.md §5.6). */ .faq{background:var(--surface);border-block-start:1px solid var(--line)} .faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--gap-split)} .faq-grid>div:first-child>p{margin-block-start:var(--stack-text);font-size:var(--text-lead);line-height:var(--lh-lead)} .faq-grid .text-link{margin-block-start:var(--space-md)} .faq-list{border-block-start:1px solid var(--line)} .faq details{border-block-end:1px solid var(--line)} .faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);cursor:pointer;padding-block:var(--space-md);font-size:var(--text-lead);line-height:1.4;font-weight:700;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq-plus{position:relative;width:14px;height:14px;flex-shrink:0;color:var(--blue)} .faq-plus:before,.faq-plus:after{content:'';position:absolute;background:currentColor;width:12px;height:1.5px;inset-block-start:6px;inset-inline-start:1px} .faq-plus:after{transform:rotate(90deg)} .faq [open] .faq-plus:after{transform:rotate(0)} .faq details>p{padding-block-end:var(--space-lg);padding-inline-end:var(--space-xl)} @media(max-width:800px){ .faq-grid{display:block} .faq-list{margin-block-start:var(--space-xl)} .faq details>p{padding-inline-end:var(--space-md)} } /* 38-intro-split.css. Text and visual split, .ac-intro (lib/sections/intro-split.cjs), the second section of a service page. White section; the visual is the AC page's duct panel, a named 4:3 illustration panel with a key or a compare legend (design/step-3.md §3.7, Appendix A.7), or a list panel (.list-panel, 45-lists.css). Vertical padding: 01-base (--section-y). The key is a caption-role legend (13 px, 700) and the illustration note or figcaption a caption (13 px, 400), design/step-2.md §5.7. */ .ac-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-split);align-items:center} .ac-intro-grid>div:first-child>p:not(.eyebrow){margin-block-start:var(--stack-text);max-inline-size:34rem;font-size:var(--text-lead);line-height:var(--lh-lead)} .ac-intro .text-link{margin-block-start:var(--space-md)} .system-visual{border-radius:var(--radius);background:var(--surface-alt);overflow:hidden;padding-block-end:var(--space-md)} .system-duct{max-height:235px;overflow:hidden} .system-duct svg{width:100%;height:250px} .system-key{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs) var(--space-md);padding-inline:var(--space-md);font-size:var(--text-caption);line-height:var(--lh-caption);font-weight:700;color:var(--ink)} .system-key span{display:flex;align-items:center;gap:6px} .system-key .icon{width:16px;height:16px;color:var(--blue)} .system-visual>:is(p,figcaption){margin-block-start:var(--space-sm);margin-inline:auto;padding-inline:var(--space-md);text-align:center;font-size:var(--text-caption);line-height:var(--lh-caption);color:var(--muted)} @media(max-width:800px){ .ac-intro-grid{display:block} .system-visual,.ac-intro-grid>.list-panel{margin-block-start:var(--space-xl)} .system-duct{max-height:200px} .system-duct svg{height:215px} } /* ---- Step 3: named 4:3 illustrations with a key or a compare legend (design/step-3.md §3.7, Appendix A.7) ---- Scoped to the new .system-art panel, so the AC page's duct visual (.system-duct + .system-key) keeps its step-2 spacing (an unscoped ".system-visual > .system-key" rule measured +16 px on the AC intro). The legend is the .feature-columns.is-compare block of 45-lists.css, inset in the ice panel. */ .system-art{aspect-ratio:4/3} .system-art>svg{display:block;inline-size:100%;block-size:100%} .system-art+.system-key{margin-block-start:var(--space-md)} .system-art~.feature-columns{padding-block-start:var(--space-lg);padding-inline:var(--space-lg)} /* 39-team.css. Local team band, #team (lib/sections/team.cjs, S1-05, DESIGN-AUDIT C8, design spec docs/phase-3/design/step-1.md §1). Navy surface with the photo under a navy veil; the text sits on the physical right on desktop (the technicians are left of centre) and under a photo strip on mobile. Video variant (.is-video, owner decision 28 Sep 2026 21:40): no photo and no veil, solid navy, the real-team clip in a 4:5 frame in the free column (block at the end of this file). Spacing, type and colours from the step-2 tokens (S2-03, design/step-2.md §5.3). Media queries change layout and display only. Physical exceptions (spec §1.9): the desktop veil stays at 90deg and, in RTL, the text column stays on the right, because the photo is never mirrored (the logo on the uniform would read backwards). The same holds for the clip: its frame stays on the physical left of the text in both directions. */ .team{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#fff;padding-block:var(--section-y-loose)} .team-media{position:absolute;inset:0;z-index:-1} .team-media img{width:100%;height:100%;object-fit:cover;object-position:50% 20%} .team-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgb(11 37 69 / .70) 0%, rgb(11 37 69 / .70) 30%, rgb(11 37 69 / .85) 52%, rgb(11 37 69 / .85) 100%)} .team-inner{display:grid;grid-template-columns:minmax(0, 1fr) min(520px, 45%)} .team-body{grid-column:2;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xl)} .team-title{margin:0;color:#fff;text-wrap:balance} .team-facts{display:grid;gap:var(--space-sm);margin:0;padding:0;list-style:none} .team-facts li{display:flex;gap:var(--space-sm);font-size:var(--text-body);line-height:var(--lh-body-strong);font-weight:400;color:var(--ink-on-strong)} .team-facts .icon{width:20px;height:20px;margin-block-start:3px;color:var(--cyan)} /* Secondary action: outline button on navy (cyan stays for the primary WhatsApp buttons). Base .button size. */ .team-cta{background:transparent;border-color:var(--ink-on-strong);color:#fff} .team-cta .icon{transition:color .18s} .team-cta .icon:first-child{color:var(--cyan)} @media (hover:hover){ .team-cta:hover{background:#fff;color:var(--navy)} .team-cta:hover .icon{color:var(--navy)} } .team-cta:active{background:var(--ink-on-strong);color:var(--navy)} .team-cta:active .icon{color:var(--navy)} .team :focus-visible{outline-color:var(--focus-on-strong)} [dir=rtl] .team-inner{grid-template-columns:min(520px, 45%) minmax(0, 1fr)} [dir=rtl] .team-body{grid-column:1} @media (max-width:800px){ .team-media{inset:0 0 auto;height:clamp(220px, 56vw, 320px)} .team-media img{object-position:40% 25%} .team-media::after{background:linear-gradient(180deg, rgb(11 37 69 / .70) 0%, rgb(11 37 69 / .70) 45%, rgb(11 37 69 / .90) 80%, var(--navy) 100%)} .team-inner{display:block} /* The heading starts 32 px above the bottom of the strip, over the >= 90 % part of its veil. */ .team-body{gap:var(--space-lg);margin-block-start:calc(clamp(220px, 56vw, 320px) - 32px - var(--section-y-loose))} } @media (max-width:560px){ .team-hours .team-sep{display:none} .team-hours>span>span:not(.team-sep){display:block} } /* Video variant. The frame is centred in the free column (the photo variant's empty side), the text column keeps its place, size and content, and both are centred on each other vertically. --gap-split keeps the frame off the text at 801 px, where the free column is narrowest. The