/* Generated by tools/bundle-css.mjs. Edit the sources, not this file. */

/* ===== tokens/fonts.css ===== */
/* Haven Cave v3 — webfonts, self-hosted.
   All four families are libre (SIL Open Font License 1.1) — no licence purchase
   needed, and the binaries live in assets/fonts/ so pages work offline.

   Display:  Newsreader        — editorial headlines only (H1/H2/display + italic insight line)
   UI/body:  Plus Jakarta Sans — everything functional: nav, buttons, labels, body, H3–H5, metrics
   Arabic:   Almarai           — all Arabic copy, RTL
   Data:     JetBrains Mono    — eyebrows, sources, metric annotations

   Variable ranges are declared per face, so one file covers a weight span. */

/* ---------------- Newsreader (display serif) ---------------- */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/Newsreader-latin-normal-400_700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/Newsreader-latin-ext-normal-400_700.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 500;font-display:swap;src:url("../fonts/Newsreader-latin-italic-300_500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 500;font-display:swap;src:url("../fonts/Newsreader-latin-ext-italic-300_500.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------- Plus Jakarta Sans (UI / body) ---------------- */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/PlusJakartaSans-latin-normal-400_800.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/PlusJakartaSans-latin-ext-normal-400_800.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:italic;font-weight:400 700;font-display:swap;src:url("../fonts/PlusJakartaSans-latin-italic-400_700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:italic;font-weight:400 700;font-display:swap;src:url("../fonts/PlusJakartaSans-latin-ext-italic-400_700.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------- Almarai (Arabic) ---------------- */
@font-face{font-family:"Almarai";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/Almarai-arabic-normal-300.woff2") format("woff2")}
@font-face{font-family:"Almarai";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Almarai-arabic-normal-400.woff2") format("woff2")}
@font-face{font-family:"Almarai";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/Almarai-arabic-normal-700.woff2") format("woff2")}
@font-face{font-family:"Almarai";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/Almarai-arabic-normal-800.woff2") format("woff2")}

/* ---------------- JetBrains Mono (data / eyebrows) ---------------- */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/JetBrainsMono-latin-normal-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/JetBrainsMono-latin-ext-normal-400.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/JetBrainsMono-latin-normal-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/JetBrainsMono-latin-ext-normal-500.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/JetBrainsMono-latin-normal-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/JetBrainsMono-latin-ext-normal-600.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ===== tokens/colors.css ===== */
/* ============================================================================
   Haven Cave v3 — colour

   Ember leads. Ink and paper are the two grounds it alternates against, and the
   rhythm between them is where the energy comes from — not saturation.

   Ember is the only brand accent across marketing, charts, dashboards and UI.
   Cool accent colours are retired; tools/check-brand.mjs enforces that.

   v2's ink was #0E0F14 — R14 G15 B20, measurably ember. The file claimed the ramp
   was warm-tinted; v3 makes it true.
   ========================================================================== */

:root{

/* ---- Ember — the brand ---- */
--hc-ember-50:#FDF1EB;
--hc-ember-100:#FAE0D3;
--hc-ember-200:#F5C6AE;
--hc-ember-300:#F0A582;
--hc-ember-400:#EA7B4C;
--hc-ember-500:#E2622F;
--hc-ember-600:#C24E20;
--hc-ember-700:#9C3D18;
--hc-ember-800:#772D12;
--hc-ember-900:#5C2411;

/* ---- Ink — the dark ground. Every value is warm: R >= B, always. ---- */
--hc-ink-950:#070606;
--hc-ink-900:#0C0B0A;
--hc-ink-850:#121110;
--hc-ink-800:#171512;
--hc-ink-700:#211E1A;
--hc-ink-600:#2F2B26;
--hc-ink-line:#2A2621;
--hc-ink-line-strong:#3B352E;

/* ---- Paper — the light ground ---- */
--hc-paper-50:#FFFEFB;
--hc-paper:#F5F3EE;
--hc-paper-200:#EAE7E0;
--hc-paper-line:#E1DDD4;
--hc-paper-strong:#CFC9BD;

/* ---- Type on colour ---- */
--hc-warm-white:#FFF8F3;
--hc-white:#FFFFFF;

/* ---- Warm neutrals ---- */
--hc-sand-100:#EFEDE7;
--hc-sand-200:#DAD7CF;
--hc-sand-300:#B9B5AB;
--hc-sand-400:#918D84;
--hc-sand-500:#6E6A62;
--hc-text-ink:#171512;
--hc-text-ink-2:#33302B;
--hc-text-ink-3:#6E6A62;

/* ---- Status ---- */
--hc-success:#2E9E6B;
--hc-warning:#D99A2B;
--hc-danger:#D93F3F;

/* ---- Focus: ember, so the ring belongs to the brand on every ground ---- */
--focus-ring:rgba(226,98,47,.55);
--overlay-scrim:rgba(12,11,10,.78);
}

/* ===== tokens/grounds.css ===== */
/* ============================================================================
   Haven Cave v3 — grounds

   A page that is entirely ember flattens within seconds. Energy comes from the
   alternation, so every <section> declares which ground it sits on and
   redeclares the semantic tokens underneath it:

       <section data-ground="ember"> … </section>

   Prescribed order down the home page:
   hero EMBER · ticker INK · proof INK · services PAPER · problem EMBER ·
   process INK · industries PAPER · CTA EMBER · footer INK

   Document chrome — header, footer, dialogs — is ink, which is why ink is also
   the :root default.
   ========================================================================== */

:root,
[data-ground='ink']{
--ground:var(--hc-ink-900);
--ground-sunken:var(--hc-ink-950);
--surface-page:var(--hc-ink-900);
--surface-sunken:var(--hc-ink-950);
--surface-card:var(--hc-ink-800);
--surface-raised:var(--hc-ink-700);
--surface-hover:var(--hc-ink-600);

--border-subtle:var(--hc-ink-line);
--border-strong:var(--hc-ink-line-strong);

--text-primary:var(--hc-warm-white);
--text-body:var(--hc-sand-200);
--text-muted:var(--hc-sand-400);

--accent:var(--hc-ember-500);
--accent-hover:var(--hc-ember-400);
--accent-press:var(--hc-ember-600);
--accent-soft:rgba(226,98,47,.16);
--accent-soft-border:rgba(226,98,47,.38);
--surface-panel:rgba(226,98,47,.10);
--text-accent:var(--hc-ember-400);
--text-on-accent:var(--hc-warm-white);

/* The mascot's body is ember; on ink and paper it reads, on ember it vanishes. */
--mascot-allowed:1;
}

[data-ground='paper']{
--ground:var(--hc-paper);
--ground-sunken:var(--hc-paper-200);
--surface-page:var(--hc-paper);
--surface-sunken:var(--hc-paper-200);
--surface-card:var(--hc-paper-50);
--surface-raised:var(--hc-paper-50);
--surface-hover:var(--hc-paper-200);

--border-subtle:var(--hc-paper-line);
--border-strong:var(--hc-paper-strong);

--text-primary:var(--hc-text-ink);
--text-body:var(--hc-text-ink-2);
--text-muted:var(--hc-text-ink-3);

--accent:var(--hc-ember-500);
--accent-hover:var(--hc-ember-400);
--accent-press:var(--hc-ember-600);
--accent-soft:rgba(226,98,47,.10);
--accent-soft-border:rgba(226,98,47,.30);
--surface-panel:var(--hc-ember-50);
--text-accent:var(--hc-ember-700); /* ember-500 measures 3.14:1 on paper, below the 4.5 floor for the
                                      eyebrows and sources that use it. --accent keeps the brighter
                                      step for buttons and rules, which are not small text. */
--text-on-accent:var(--hc-warm-white);

--mascot-allowed:1;
}

[data-ground='ember']{
--ground:var(--hc-ember-500);
--ground-sunken:var(--hc-ember-600);
--surface-page:var(--hc-ember-500);
--surface-sunken:var(--hc-ember-600);
--surface-card:rgba(12,11,10,.08);
--surface-raised:rgba(12,11,10,.13);
--surface-hover:rgba(12,11,10,.13);

--border-subtle:rgba(12,11,10,.26);
--border-strong:rgba(12,11,10,.44);

/* Ink, not white. Warm white on ember measures 3.32:1 for headings, 2.97:1 for
   body and 2.46:1 for the muted line — all below the 4.5:1 floor, and the
   sources under the figures were effectively invisible. Ink on ember is 5.64:1
   and it is also the stronger look: on this ground everything is ink, which is
   already true of the accent and the buttons. */
--text-primary:var(--hc-ink-900);
--text-body:rgba(12,11,10,.88);
--text-muted:rgba(12,11,10,.84);

/* On ember the accent flips to ink — an ember button on ember is invisible. */
--accent:var(--hc-ink-900);
--accent-hover:var(--hc-ink-800);
--accent-press:#000000;
--accent-soft:rgba(12,11,10,.14);
--accent-soft-border:rgba(12,11,10,.34);
--surface-panel:rgba(12,11,10,.14);
--text-accent:var(--hc-ink-900);
--text-on-accent:var(--hc-warm-white);

--focus-ring:rgba(12,11,10,.62);

--mascot-allowed:0;
}

/* Every band paints its own ground. */
[data-ground]{
background:var(--ground);
color:var(--text-body);
}

/* ===== tokens/typography.css ===== */
/* ============================================================================
   Haven Cave — typography

   Canonical web/content roles: Plus Jakarta Sans display and UI, Almarai for
   Arabic, JetBrains Mono for Latin labels. Newsreader is a document face;
   its original files remain available but it is not the website display face.
   ========================================================================== */

:root{
/* families */
--font-display:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
--font-body:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
/* UI-scale headings (H3 and below) use the sans, not the serif */
--font-ui-heading:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
--font-arabic:"Almarai","Cairo","Segoe UI",sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

/* Web display uses 800; UI uses the available medium/semibold weights. */
--fw-light:300;
--fw-regular:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;
--fw-display:800;
--fw-display-strong:800;
/* Labels and eyebrows sit at regular; 500 reads heavy against a light serif. */
--fw-mono:400;

/* size scale */
--fs-micro:11px;
--fs-eyebrow:12px;
--fs-caption:13px;
--fs-body-sm:15px;
--fs-body:17px;
--fs-body-lg:20px;
--fs-h5:23px;
--fs-h4:28px;
--fs-h3:36px;
--fs-h2:46px;
--fs-h1:60px;
--fs-display:76px;
--fs-display-xl:104px;

/* line heights — serif needs more air than a grotesque */
--lh-tight:1.02;
--lh-heading:1.08;
--lh-snug:1.38;
--lh-body:1.7;
--lh-loose:1.85;
/* Arabic is Almarai in both systems and never gets Latin leading. */
--lh-body-ar:1.85;
--lh-display-ar:1.4;

/* tracking — the serif is optically spaced; the sans is tracked */
--tracking-display:-0.02em;
--tracking-display-ar:0em;
--tracking-heading:-0.015em;
--tracking-body:0em;
--tracking-eyebrow:0.15em;
--tracking-brand:0.28em;
--tracking-mono:0.05em;
}

/* ---------------------------------------------------------------- roles --
   The utility classes the v2 system shipped. site.css layers the responsive
   clamps on top of these. */

.hc-display{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--tracking-display);color:var(--text-primary)}
.hc-h1{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h1);line-height:var(--lh-heading);letter-spacing:var(--tracking-display);color:var(--text-primary)}
.hc-h2{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:var(--tracking-heading);color:var(--text-primary)}
.hc-h3{font-family:var(--font-ui-heading);font-weight:var(--fw-bold);font-size:var(--fs-h3);line-height:1.18;letter-spacing:-0.02em;color:var(--text-primary)}
.hc-h4{font-family:var(--font-ui-heading);font-weight:var(--fw-semibold);font-size:var(--fs-h4);line-height:1.25;letter-spacing:-0.015em;color:var(--text-primary)}
.hc-h5{font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-h5);line-height:var(--lh-snug);color:var(--text-primary)}

/* The insight line: light italic serif, accent colour. Brand signature. */
.hc-insight{font-family:var(--font-display);font-style:italic;font-weight:var(--fw-light);color:var(--text-accent)}

.hc-body{font-family:var(--font-body);font-weight:var(--fw-regular);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body)}
.hc-body-sm{font-family:var(--font-body);font-weight:var(--fw-regular);font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-body)}
.hc-caption{font-family:var(--font-body);font-weight:var(--fw-medium);font-size:var(--fs-caption);line-height:var(--lh-snug);color:var(--text-muted)}
.hc-eyebrow{font-family:var(--font-mono);font-weight:var(--fw-regular);font-size:var(--fs-eyebrow);line-height:1.2;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent)}
.hc-brandcaps{font-family:var(--font-body);font-weight:var(--fw-medium);font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-brand);text-transform:uppercase;color:var(--text-muted)}
.hc-metric{font-family:var(--font-ui-heading);font-weight:800;font-size:var(--fs-h1);line-height:1;letter-spacing:-0.035em;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.hc-mono{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--tracking-mono);color:var(--text-muted)}
.hc-ar{font-family:var(--font-arabic);direction:rtl;text-align:right;line-height:var(--lh-loose)}
.hc-ar-h{font-family:var(--font-arabic);font-weight:800;font-size:var(--fs-h2);line-height:1.4;direction:rtl;text-align:right;color:var(--text-primary)}

/* ===== tokens/spacing.css ===== */
:root{
/* 8px base unit (brand spec). 2/4 exist for hairline optical work only. */
--header-h:78px;
--space-0:0px;
--space-hair:2px;
--space-micro:4px;
--space-1:8px;
--space-2:16px;
--space-3:24px;
--space-4:32px;
--space-5:48px;
--space-6:64px;
--space-7:80px;
--space-8:96px;
--space-9:128px;
--space-10:160px;

/* layout */
--container-max:1280px;
--container-narrow:880px;
--gutter:24px;
--grid-columns:12; /* @kind other */
--section-y:96px;
--section-y-lg:128px;
--card-pad:24px;
--card-pad-lg:32px;

/* component sizing */
--control-h-sm:36px;
--control-h:44px;
--control-h-lg:52px;
--icon-sm:16px;
--icon-md:20px;
--icon-lg:24px;
--stroke-icon:1.5px; /* @kind other */
}

/* ===== tokens/effects.css ===== */
:root{
/* radii — v2 is squarer: editorial, printed, structural */
--radius-xs:3px;
--radius-sm:4px;
--radius-md:6px;
--radius-lg:8px;
--radius-xl:10px;
--radius-2xl:12px;
--radius-pill:999px;

--border-width:1px; /* @kind other */
--border-width-strong:1.5px; /* @kind other */
--hairline:1px solid var(--border-subtle); /* @kind other */

/* shadows — depth from surface value and rules, not haze */
--shadow-none:none;
--shadow-sm:0 1px 2px rgba(12,11,10,.4);
--shadow-md:0 10px 30px -12px rgba(12,11,10,.6);
--shadow-lg:0 28px 70px -24px rgba(12,11,10,.8);
--shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.04);
--shadow-light-md:0 10px 30px -14px rgba(23,21,18,.18);
--shadow-light-lg:0 30px 70px -30px rgba(23,21,18,.22);

/* glow — v2 uses it sparingly and warm-or-cool, never both at once */
--glow-node:0 0 0 1px rgba(226,98,47,.36),0 0 34px rgba(226,98,47,.18);
--glow-soft:0 0 52px rgba(226,98,47,.12);
--glow-ring:0 0 0 6px rgba(226,98,47,.10);
--glow-ember:0 0 44px rgba(226,98,47,.14);

--ring-focus:0 0 0 3px var(--focus-ring);

--blur-nav:blur(16px); /* @kind other */
--blur-overlay:blur(6px); /* @kind other */

/* imagery — photography is never used raw. The grade pulls any photo toward the
   brand's neutral, cool, documentary register; the scrim keeps type legible. */
--img-grade:saturate(.82) contrast(1.04) brightness(.97); /* @kind other */
--img-grade-strong:saturate(.55) contrast(1.08) brightness(.92); /* @kind other */
--img-mono:grayscale(1) contrast(1.1); /* @kind other */
--img-scrim:linear-gradient(180deg,rgba(10,9,8,.15) 0%,rgba(10,9,8,.55) 55%,rgba(10,9,8,.92) 100%); /* @kind other */
--img-scrim-side:linear-gradient(90deg,rgba(10,9,8,.94) 0%,rgba(10,9,8,.6) 45%,rgba(10,9,8,.12) 100%); /* @kind other */
--img-tint-ember:rgba(226,98,47,.16); /* @kind other */

/* structural motifs */
--grid-line:rgba(255,255,255,.04); /* @kind other */
--grid-line-light:rgba(23,21,18,.055); /* @kind other */
--grid-size:72px; /* @kind other */
--rule-hair:1px solid var(--border-subtle); /* @kind other */
--bg-grid:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); /* @kind other */
--bg-grid-light:linear-gradient(var(--grid-line-light) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line-light) 1px,transparent 1px); /* @kind other */
--bg-radial-node:radial-gradient(62% 58% at 50% 0%,rgba(226,98,47,.16),transparent 70%); /* @kind other */
--bg-radial-ember:radial-gradient(60% 60% at 100% 0%,rgba(226,98,47,.11),transparent 68%); /* @kind other */
--divider-accent:linear-gradient(90deg,var(--hc-ember-500),rgba(226,98,47,0)); /* @kind other */
--rule-double:0 1px 0 var(--border-subtle),0 4px 0 var(--border-subtle); /* @kind other */
}

/* ===== tokens/motion.css ===== */
:root{
--dur-instant:80ms; /* @kind other */
--dur-fast:160ms; /* @kind other */
--dur-base:240ms; /* @kind other */
--dur-slow:400ms; /* @kind other */
--dur-reveal:600ms; /* @kind other */
--ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in-out:cubic-bezier(.6,0,.2,1); /* @kind other */
--motion-hover:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard); /* @kind other */
--press-scale:.985; /* @kind other */
--reveal-y:16px; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms; /* @kind other */ --dur-base:0ms; /* @kind other */ --dur-slow:0ms; /* @kind other */ --dur-reveal:0ms; /* @kind other */ --reveal-y:0px /* @kind other */}}
@keyframes hc-fade-up{from{opacity:0;transform:translateY(var(--reveal-y))}to{opacity:1;transform:none}}
@keyframes hc-fade{from{opacity:0}to{opacity:1}}
@keyframes hc-node-pulse{0%,100%{box-shadow:0 0 0 1px rgba(37,99,235,.35),0 0 24px rgba(37,99,235,.14)}50%{box-shadow:0 0 0 1px rgba(37,99,235,.55),0 0 40px rgba(37,99,235,.22)}}
@keyframes hc-draw-line{from{stroke-dashoffset:var(--dash,240)}to{stroke-dashoffset:0}}

/* ===== tokens/base.css ===== */
*,*::before,*::after{box-sizing:border-box}

body{
margin:0;
background:var(--surface-page);
color:var(--text-body);
font-family:var(--font-body);
font-size:var(--fs-body);
line-height:var(--lh-body);
-webkit-font-smoothing:antialiased;
text-wrap:pretty;
}

/* Display type is heavy sans in v3 — a website is a CONTENT surface. */
h1,h2,h3,h4{
font-family:var(--font-display);
font-weight:var(--fw-display);
color:var(--text-primary);
letter-spacing:var(--tracking-heading);
line-height:var(--lh-heading);
margin:0;
}
h5,h6{font-family:var(--font-body);font-weight:var(--fw-semibold);color:var(--text-primary);margin:0}
p{margin:0}

a{color:var(--text-accent);text-decoration:none;text-underline-offset:3px;transition:var(--motion-hover)}
a:hover{color:var(--accent-hover);text-decoration:underline}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-xs);
}

::selection{background:var(--hc-ember-500);color:var(--hc-warm-white)}

/* ---------------------------------------------------------------- Arabic --
   Almarai throughout, never below 1.85 leading. */
[dir="rtl"]{font-family:var(--font-arabic);line-height:var(--lh-body-ar)}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5{
font-family:var(--font-arabic);font-weight:800;letter-spacing:0;line-height:var(--lh-display-ar);
}

/* Almarai has no italic — the insight line stays upright and takes the accent
   colour instead of a slant. */
[dir="rtl"] em{font-style:normal}

/* ------------------------------------------------------------------ bidi --
   Signed numbers, hexes and paths break inside RTL text: +320% renders as
   320%+, faces/ renders as /faces. Isolating them is not optional. */
.num,[data-num],code,kbd,samp,var,time,
[dir="rtl"] .hc-ltr{
direction:ltr;
unicode-bidi:isolate;
}

/* Figures line up in columns wherever they are set. */
.num,[data-num]{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- imagery */
.hc-img{filter:var(--img-grade);display:block;width:100%;height:100%;object-fit:cover}
.hc-img-mono{filter:var(--img-mono);display:block;width:100%;height:100%;object-fit:cover}
.hc-img-frame{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--surface-sunken)}
.hc-img-frame>img{filter:var(--img-grade);display:block;width:100%;height:100%;object-fit:cover}
.hc-img-frame[data-scrim]::after{content:"";position:absolute;inset:0;background:var(--img-scrim);pointer-events:none}
.hc-img-frame[data-scrim="side"]::after{background:var(--img-scrim-side)}

/* ===== site.css ===== */
/* ============================================================================
   Haven Cave — site styles.

   Built entirely on the design tokens. Every colour, size, radius, duration and
   easing below resolves to a custom property from tokens/ — nothing is hard-coded
   except structural values the tokens don't cover.

   Order: layout primitives -> typography roles -> components -> sections -> RTL
   -> responsive. Logical properties throughout so RTL mirrors without a second
   stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------- primitives */

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html.hc-no-scroll {
  overflow: hidden;
}

/* `hidden` has to win.
   The dialog, the drawer and the Work tab panels are all hidden by attribute but
   given a `display` by their own class, and a class selector out-ranks the UA's
   `[hidden] { display: none }`. Without this the dialog's fixed, inset-0 scrim
   sits over the whole document forever, swallowing every click. */
[hidden] {
  display: none !important;
}

body {
  /* `clip`, not `hidden`: overflow-x:hidden turns the body into a scroll
     container, which is a well-known way to break `position: sticky` and to
     make scrolling feel like it is fighting itself. `clip` contains the same
     horizontal overflow without creating a scrollport. */
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  body {
    overflow-x: hidden;
  }
}

img,
svg,
video {
  max-width: 100%;
}

.hc-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hc-container--narrow {
  max-width: var(--container-narrow);
}

.hc-section {
  padding-block: var(--section-y);
}

.hc-section--lg {
  padding-block: var(--section-y-lg);
}

.hc-section--sunken {
  background: var(--surface-sunken);
  border-block: 1px solid var(--border-subtle);
}

.hc-rule {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: 0;
}

.hc-skip {
  position: absolute;
  inset-inline-start: var(--space-2);
  top: var(--space-2);
  z-index: 200;
  padding: var(--space-1) var(--space-2);
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.hc-skip:focus {
  transform: none;
}

.hc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Latin runs inside Arabic copy — phone numbers, URLs, K/%/x suffixes. */
.hc-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ------------------------------------------------------- typography roles */

.hc-display,
.hc-h1,
.hc-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text-primary);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

.hc-display {
  font-size: clamp(46px, 5.4vw, var(--fs-display));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}

.hc-h1 {
  font-size: clamp(38px, 4.2vw, var(--fs-h1));
  letter-spacing: var(--tracking-display);
}

.hc-h2 {
  font-size: clamp(30px, 3.2vw, var(--fs-h2));
  letter-spacing: var(--tracking-heading);
}

.hc-h3 {
  font-family: var(--font-ui-heading);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, var(--fs-h3));
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.hc-h4 {
  font-family: var(--font-ui-heading);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.hc-h5 {
  font-family: var(--font-ui-heading);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

/* The brand's signature device: statement roman, the turn light italic accent. */
.hc-insight {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--text-accent);
}

.hc-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-body);
  max-width: 58ch;
}

.hc-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

.hc-body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-body);
}

.hc-caption {
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

/* Eyebrow: mono uppercase in the accent, preceded by a 26px ember rule. */
.hc-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-accent);
}

.hc-eyebrow::before {
  content: '';
  flex: none;
  width: 26px;
  height: 1px;
  background: var(--accent);
}

.hc-eyebrow--bare::before {
  display: none;
}

.hc-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hc-metric {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(36px, 3.6vw, var(--fs-h1));
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* ----------------------------------------------------------------- reveal */

.hc-js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition:
    opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms);
}

.hc-js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------- buttons */

.hc-btn {
  --btn-h: var(--control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: var(--btn-h);
  padding-inline: 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--motion-hover), transform var(--dur-instant) var(--ease-standard);
}

.hc-btn:hover {
  text-decoration: none;
}

.hc-btn:active {
  transform: scale(var(--press-scale));
}

.hc-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.hc-btn--sm {
  --btn-h: var(--control-h-sm);
  padding-inline: 14px;
  font-size: var(--fs-caption);
}

.hc-btn--lg {
  --btn-h: var(--control-h-lg);
  padding-inline: 28px;
  font-size: var(--fs-body);
}

.hc-btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
}
.hc-btn--primary:hover {
  background: var(--accent-hover); /* ember lightens, never darkens */
  color: var(--text-on-accent);
}
.hc-btn--primary:active {
  background: var(--accent-press);
}

.hc-btn--secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.hc-btn--secondary:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.hc-btn--ghost {
  background: transparent;
  color: var(--text-body);
}
.hc-btn--ghost:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.hc-btn--soft {
  background: var(--accent-soft);
  border-color: var(--accent-soft-border);
  color: var(--text-accent);
}
.hc-btn--soft:hover {
  border-color: var(--accent);
  color: var(--text-accent);
}

.hc-btn__icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: none;
}

/* RTL: forward-pointing icons mirror with the text. */
[dir='rtl'] .hc-btn__icon--dir {
  transform: scaleX(-1);
}

.hc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  cursor: pointer;
  transition: var(--motion-hover);
}
.hc-icon-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--surface-hover);
}
.hc-icon-btn svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

/* -------------------------------------------------------- badges and tags */

.hc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 5px 10px;
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--radius-xs);
  background: var(--accent-soft);
  color: var(--text-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Ember marks the people, not the system — used sparingly, per the accent budget. */
.hc-badge--warm {
  border-color: rgba(226, 98, 47, 0.34);
  background: var(--accent-soft);
  color: var(--text-accent);
}

.hc-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 8px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-body);
  font-size: var(--fs-body-sm);
  transition: var(--motion-hover), transform var(--dur-base) var(--ease-out);
}
.hc-tag:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  transform: translateY(-2px);
}
.hc-tag svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--text-accent);
  flex: none;
}

/* ------------------------------------------------------------------ cards */

.hc-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--card-pad);
}

.hc-card--lg {
  border-radius: var(--radius-lg);
  padding: var(--card-pad-lg);
}

.hc-card--raised {
  background: var(--surface-raised);
}

.hc-card--accent {
  background: var(--surface-panel);
  border-color: var(--accent-soft-border);
}

.hc-card--interactive {
  transition:
    var(--motion-hover),
    transform var(--dur-base) var(--ease-out);
}
.hc-card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

/* ---------------------------------------------------------- section head */

.hc-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 62ch;
}

.hc-head__title {
  margin: 0;
}

/* Heading and a trailing action sharing one baseline. */
.hc-row-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ forms */

.hc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hc-label {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-primary);
}

.hc-input,
.hc-select,
.hc-textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 11px 14px;
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  transition: var(--motion-hover);
}

.hc-textarea {
  min-height: 104px;
  resize: vertical;
}

.hc-input::placeholder,
.hc-textarea::placeholder {
  color: var(--text-muted);
}

.hc-input:hover,
.hc-select:hover,
.hc-textarea:hover {
  border-color: var(--border-strong);
}

.hc-select {
  appearance: none;
  padding-inline-end: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right 18px center,
    right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
[dir='rtl'] .hc-select {
  background-position:
    left 13px center,
    left 18px center;
}

.hc-field.is-invalid .hc-input,
.hc-field.is-invalid .hc-select,
.hc-field.is-invalid .hc-textarea {
  border-color: var(--hc-danger);
}

.hc-field__error {
  font-size: var(--fs-caption);
  color: var(--hc-danger);
}

.hc-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  cursor: pointer;
}

.hc-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.hc-check__text {
  font-size: var(--fs-body-sm);
  color: var(--text-body);
}

.hc-check__note {
  display: block;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* switch */

.hc-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  font-size: var(--fs-body-sm);
  color: var(--text-body);
}

.hc-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hc-switch__track {
  position: relative;
  width: 44px;
  height: 24px;
  flex: none;
  background: var(--surface-hover);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  transition: var(--motion-hover);
}

.hc-switch__track::after {
  content: '';
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 16px;
  height: 16px;
  background: var(--text-body);
  border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-standard), background-color var(--dur-fast);
}

.hc-switch input:checked + .hc-switch__track {
  background: var(--accent);
  border-color: var(--accent);
}

.hc-switch input:checked + .hc-switch__track::after {
  background: var(--hc-white);
  transform: translateX(20px);
}
[dir='rtl'] .hc-switch input:checked + .hc-switch__track::after {
  transform: translateX(-20px);
}

.hc-switch input:focus-visible + .hc-switch__track {
  box-shadow: var(--ring-focus);
}

/* ----------------------------------------------------------------- header */

.hc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-standard),
    background-color var(--dur-base) var(--ease-standard);
}

.hc-header.is-scrolled {
  background: color-mix(in srgb, var(--surface-page) 78%, transparent);
  backdrop-filter: var(--blur-nav);
  -webkit-backdrop-filter: var(--blur-nav);
  border-bottom-color: var(--border-subtle);
}

.hc-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
}

.hc-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.hc-logo {
  height: 30px;
  width: auto;
  display: block;
}

.hc-logo-link {
  display: inline-flex;
  align-items: center;
  flex: none;
}

/* The lockup is inline SVG, so its two text runs take the page's faces —
   loaded through <img> they would fall back to the OS sans. */
.hc-logo__word {
  font-family: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 38px;
  letter-spacing: 0.28em;
}

.hc-logo__desc {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.24em;
}

.hc-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-inline-start: auto;
}

.hc-nav__link {
  position: relative;
  padding-block: 6px;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--motion-hover);
}

.hc-nav__link:hover,
.hc-nav__link[aria-current='page'] {
  color: var(--text-primary);
  text-decoration: none;
}

.hc-nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
}

.hc-header__tools {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: none;
}

.hc-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h);
  height: var(--control-h);
  padding-inline: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  color: var(--text-body);
  text-decoration: none;
  transition: var(--motion-hover);
}
.hc-lang:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  text-decoration: none;
}

.hc-nav-toggle {
  display: none;
}

.hc-drawer {
  position: fixed;
  inset: 78px 0 0;
  z-index: 99;
  padding: var(--space-4) var(--gutter);
  background: var(--surface-page);
  overflow-y: auto;
}

.hc-drawer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.hc-drawer__link {
  display: block;
  padding-block: var(--space-1);
  font-family: var(--font-ui-heading);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}

/* ------------------------------------------------------------------- hero */

.hc-hero {
  position: relative;
  padding-block: var(--section-y-lg) var(--section-y);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}

/* The structural motif: radial node glow layered over the 72px hairline grid. */
.hc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--bg-grid);
  background-size: var(--grid-size) var(--grid-size);
  opacity: 0.55;
  pointer-events: none;
}

.hc-hero__inner {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------- the hero field --
   A motion layer under the type: either the drawn canvas or, when one is set in
   the Customizer, a video. Decorative in both cases — the readable content is
   markup above it, and the band keeps its own background underneath, so the
   hero is never blank while the layer loads or if it never starts. */

.hc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* The band has to fill the screen. At 640px inside a 900px viewport the
     visitor met the hero and the top of the next section at the same moment,
     which is the difference between arriving somewhere and opening a page.
     svh, not vh: on a phone vh is the tallest the viewport ever gets, so the
     first paint sits under the browser chrome. */
  /* The header is sticky and so takes its own space in the flow — subtract it,
     or the bottom of the hero sits one header-height below the fold. */
  min-height: calc(100svh - var(--header-h));
  display: grid;
  align-items: center;
  padding-block: var(--space-6);
}

/* The film puts four figures across the lower two thirds, so the headline goes
   where the brand's cover art has always put it: over the dark rock above them.
   That band measures 7/255 for the whole clip, which is why the scrim below is
   almost nothing. */
.hc-hero--top {
  align-items: start;
  padding-block: var(--space-6) var(--space-8);
}

@supports not (height: 100svh) {
  .hc-hero { min-height: calc(100vh - var(--header-h)); }
}

.hc-hero__fx,
.hc-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hc-hero__video {
  object-fit: cover;
  opacity: 1;
}

/* Faded in only once the driver has drawn a frame, so a canvas that never
   starts is invisible rather than a black rectangle over the band. */
.hc-hero__fx {
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}

.hc-hero__fx.is-on { opacity: 1; }

/* ---- the entrance ----
   The page arrives in an order. Short, once, and only for a visitor who landed
   at the top — a deep link mid-page gets the page, not the performance. */

[data-entrance] .hc-hero__copy > * {
  animation: hc-enter 760ms var(--ease-out) both;
}

[data-entrance] .hc-eyebrow      { animation-delay: 80ms; }
[data-entrance] .hc-hero__title  { animation-delay: 200ms; }
[data-entrance] .hc-hero__lead   { animation-delay: 380ms; }
[data-entrance] .hc-hero__actions{ animation-delay: 520ms; }
[data-entrance] .hc-hero__stats  { animation-delay: 640ms; }

@keyframes hc-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

[data-entrance] .hc-hero__fx {
  animation: hc-enter-fx 1600ms var(--ease-out) both;
}

@keyframes hc-enter-fx {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}

/* The type has to stay readable over whatever is moving underneath. The film is
   paper now, so the scrim lifts the headline's side toward the ground colour
   rather than darkening it — the same job, the other direction. */
.hc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Vertical, not horizontal: the type is at the top now and the rock there is
     already black. This only guards the first third against a brighter frame. */
  background: linear-gradient(
    180deg,
    rgba(12, 11, 10, 0.72) 0%,
    rgba(12, 11, 10, 0.34) 26%,
    rgba(12, 11, 10, 0.00) 48%
  );
}

/* In Arabic the type sits on the right, so the whole field mirrors with it —
   scrim and canvas together, or the glow lands behind the headline. */
[dir="rtl"] .hc-hero::after,
[dir="rtl"] .hc-hero__fx,
[dir="rtl"] .hc-hero__video { transform: scaleX(-1); }

@media (max-width: 767px) {
  .hc-hero::after {
    display: none;
  }

  /* On a portrait screen, a full-bleed 16:9 film has to lose most of its sides.
     Give the film its own frame and move the readable content below it, so the
     complete authored shot is visible without changing or re-editing the video. */
  .hc-hero--top {
    display: block;
    min-height: 0;
    padding: 0;
    background: var(--hc-ink-950);
  }

  .hc-hero--top .hc-hero__video,
  .hc-hero--top .hc-hero__fx {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: var(--hc-ink-950);
  }

  .hc-hero--top .hc-hero__inner {
    padding-block: var(--space-5) var(--space-6);
  }

  .hc-hero--top .hc-hero__copy {
    max-width: none;
  }

  .hc-hero--top .hc-hero__title {
    font-size: clamp(36px, 11vw, 52px);
    line-height: 1.02;
  }

  .hc-hero--top .hc-hero__lead {
    font-size: 16px;
    line-height: 1.65;
  }

  .hc-hero--top .hc-hero__actions {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }

  .hc-hero--top .hc-hero__actions .hc-btn {
    width: 100%;
  }

  .hc-hero--top .hc-hero__quiet {
    min-height: 44px;
    justify-content: center;
  }

  .hc-hero--top .hc-hero__social {
    margin-top: var(--space-3);
  }
}


.hc-hero__stats {
  display: flex;
  gap: 0;
  width: 100%;
  max-width: 620px;
  margin: var(--space-5) 0 0;
  border-top: 1px solid var(--border-subtle);
}

/* Figures divided by hairlines rather than gutters — a rule before a box. */
.hc-hero__stat {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--space-3) var(--space-3) 0 0;
  border-inline-end: 1px solid var(--border-subtle);
}

.hc-hero__stat:last-child {
  border-inline-end: 0;
}

.hc-hero__stat + .hc-hero__stat {
  padding-inline-start: var(--space-3);
}

.hc-hero__stat-value {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-h4);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.hc-hero__stat-label {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ----------------------------------------------------------- comparison */

.hc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.hc-compare__col {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--radius-md) * 2);
  background: var(--hc-ink-900);
  color: var(--hc-paper-50);
}

.hc-compare__col::after {
  content: '';
  position: absolute;
  width: 240px;
  height: 240px;
  inset-inline-end: -110px;
  bottom: -130px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 36px rgba(255, 255, 255, 0.035), 0 0 0 72px rgba(255, 255, 255, 0.025);
  pointer-events: none;
}

.hc-compare__col + .hc-compare__col {
  background: var(--hc-ember-500);
  border-color: var(--hc-ember-500);
  color: var(--hc-ink-900);
}

.hc-compare__title {
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.7;
}


.hc-compare__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hc-compare__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--fs-body-sm);
  color: inherit;
}

/* The scattered column reads quieter than the one it is being turned into. */
.hc-compare__item--neg {
  color: inherit;
  opacity: 0.62;
}

/* Mono glyphs, per the brand — never an emoji, never a coloured icon set. */
.hc-compare__mark {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: inherit;
  opacity: 0.75;
}

.hc-compare__item--neg .hc-compare__mark {
  opacity: 0.45;
}

/* ------------------------------------------------------------- services */

.hc-grid {
  display: grid;
  gap: var(--space-2);
}

.hc-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.hc-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.hc-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}


/* ---------------------------------------------------------------- ticker --
   A strip of what we do, moving. Mono uppercase with ember separators.
   The track holds two identical runs and shifts by exactly half its width, so
   the loop has no seam. */

.hc-ticker {
  overflow: hidden;
  border-block: 1px solid var(--border-subtle);
  padding-block: var(--space-2);
  /* The strip runs full-bleed; only its contents follow the container. */
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hc-ticker__track {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: max-content;
  animation: hc-ticker 46s linear infinite;
}

.hc-ticker:hover .hc-ticker__track,
.hc-ticker:focus-within .hc-ticker__track {
  animation-play-state: paused;
}

.hc-ticker__item {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.hc-ticker__sep {
  color: var(--accent);
  font-size: var(--fs-eyebrow);
}

@keyframes hc-ticker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* A moving strip is exactly what reduced motion is for. */
@media (prefers-reduced-motion: reduce) {
  .hc-ticker__track {
    animation: none;
    /* One run is enough once it stops. */
    width: auto;
    flex-wrap: wrap;
  }
}

/* RTL reads the other way, so the strip travels the other way too. */
[dir='rtl'] .hc-ticker__track {
  animation-name: hc-ticker-rtl;
}

@keyframes hc-ticker-rtl {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* ------------------------------------------------------------------ rows --
   Rows beat cards. A number, a title, a description and a mark, separated by
   hairlines rather than boxed. */

.hc-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-subtle);
}

.hc-row {
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--motion-hover);
}

.hc-row__link,
.hc-row--static {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  color: inherit;
  text-decoration: none;
}

.hc-row:hover {
  border-bottom-color: var(--accent);
}

.hc-row__link:hover .hc-row__title {
  color: var(--text-accent);
}

.hc-row__link:hover .hc-row__icon svg {
  transform: translateX(4px);
}

[dir="rtl"] .hc-row__link:hover .hc-row__icon svg {
  transform: translateX(-4px);
}

.hc-row__n {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  color: var(--text-accent);
}

.hc-row__title {
  display: block;
  font-family: var(--font-ui-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.hc-row__desc {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  max-width: 56ch;
}

.hc-row__icon {
  color: var(--text-accent);
  align-self: center;
}

.hc-row__icon svg {
  display: block;
  width: var(--icon-md);
  height: var(--icon-md);
}

@media (max-width: 1023px) {

}

@media (max-width: 767px) {
  .hc-row__link,
  .hc-row--static {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .hc-row__icon { display: none; }
}

/* ------------------------------------------------------------ stat cards */

.hc-stat__value {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(32px, 3vw, 52px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.hc-stat__delta {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  color: var(--text-accent);
}

.hc-stat__insight {
  margin-top: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--text-body);
}

.hc-stat__source {
  display: block;
  margin-top: var(--space-2);
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* At most one glowing metric per view. */
.hc-stat--glow {
  box-shadow: var(--glow-soft);
  border-color: var(--accent-soft-border);
}

/* ------------------------------------------------------------------ tabs */

.hc-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
}
.hc-tabs::-webkit-scrollbar {
  display: none;
}

.hc-tab {
  position: relative;
  padding: 12px 16px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--motion-hover);
}

.hc-tab:hover {
  color: var(--text-primary);
}

.hc-tab[aria-selected='true'] {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

/* ------------------------------------------------------------ photo band */

.hc-photo {
  position: relative;
  min-height: 520px;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.hc-photo__media {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  will-change: transform;
}

.hc-photo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-grade);
}

.hc-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--img-scrim-side);
}

.hc-photo__inner {
  position: relative;
  z-index: 2;
}

.hc-photo__copy {
  max-width: 40ch;
}

/* Type over imagery always sits on the dark side of the scrim. */
.hc-photo__title,
.hc-photo__lead {
  color: var(--hc-paper-50);
}

.hc-photo__lead {
  opacity: 0.86;
}

/* ---------------------------------------------------------------- dialog */

.hc-dialog {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-3);
}

.hc-dialog__scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
  backdrop-filter: var(--blur-overlay);
  -webkit-backdrop-filter: var(--blur-overlay);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}

.hc-dialog__panel {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - var(--space-6));
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--card-pad-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.hc-dialog.is-open .hc-dialog__scrim {
  opacity: 1;
}

.hc-dialog.is-open .hc-dialog__panel {
  opacity: 1;
  transform: none;
}

.hc-dialog__title {
  margin-bottom: var(--space-1);
}

.hc-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

/* ----------------------------------------------------------------- toast */

.hc-toasts {
  position: fixed;
  inset-block-end: var(--space-3);
  inset-inline-end: var(--space-3);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  pointer-events: none;
}

.hc-toast {
  min-width: 260px;
  max-width: 360px;
  padding: var(--space-2);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-inline-start: 2px solid var(--hc-success);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.hc-toast.is-in {
  opacity: 1;
  transform: none;
}

.hc-toast--danger {
  border-inline-start-color: var(--hc-danger);
}

.hc-toast__title {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.hc-toast__msg {
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- footer */

.hc-footer {
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-6) 0 var(--space-4);
}

.hc-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-4);
}

.hc-footer__about {
  max-width: 34ch;
  margin-top: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

.hc-footer__col-title {
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hc-footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hc-footer__link {
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  text-decoration: none;
  transition: var(--motion-hover);
}
.hc-footer__link:hover {
  color: var(--text-primary);
  text-decoration: none;
}

.hc-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

/* -------------------------------------------------------------------- CTA */

.hc-cta {
  position: relative;
  text-align: center;
  border-top: 1px solid var(--border-subtle);
  overflow: hidden;
}

.hc-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--bg-grid);
  background-size: var(--grid-size) var(--grid-size);
  opacity: 0.5;
  pointer-events: none;
}

.hc-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.hc-cta__mark {
  width: 40px;
  height: 40px;
  opacity: 0.92;
}

.hc-cta__lead {
  max-width: 52ch;
}

.hc-cta__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

/* ------------------------------------------------------------------- misc */

.hc-contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.hc-contact-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-body);
  color: var(--text-body);
}

.hc-contact-list__item svg {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--text-accent);
}

.hc-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.hc-case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.hc-case__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  align-content: start;
}

.hc-case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-3);
}

.hc-404 {
  display: grid;
  place-items: center;
  min-height: 60vh;
  text-align: center;
}

/* --------------------------------------------------------------- RTL bits */

/* Almarai has no italic; the insight line takes colour and weight instead. */
[dir='rtl'] .hc-insight {
  font-family: var(--font-arabic);
  font-style: normal;
  font-weight: 700;
}

/* Arabic is never letter-spaced and never set in the mono face.
   Tracking breaks the joining between letters, and JetBrains Mono has no Arabic
   glyphs at all, so every mono-styled label falls back to Almarai instead.
   The elements that carry Latin-only content — the tier names, the stage
   numbers, the tagline — keep the mono treatment via the exceptions below. */
[dir='rtl'] .hc-eyebrow,
[dir='rtl'] .hc-crumb__link,
[dir='rtl'] .hc-mono,
[dir='rtl'] .hc-badge,
[dir='rtl'] .hc-tab,
[dir='rtl'] .hc-footer__col-title,
[dir='rtl'] .hc-compare__title,
[dir='rtl'] .hc-hero__stat-label,
[dir='rtl'] .hc-stat__delta,
[dir='rtl'] .hc-stat__source {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  text-transform: none;
}

/* Latin-only labels keep the mono voice even on an Arabic page.
   Deliberately not `[dir='rtl'] [dir='ltr']` — that also catches the figures,
   and a figure is Plus Jakarta in both locales so the two read as one number. */
[dir='rtl'] .hc-display,
[dir='rtl'] .hc-h1,
[dir='rtl'] .hc-h2,
[dir='rtl'] .hc-h3,
[dir='rtl'] .hc-h4,
[dir='rtl'] .hc-h5 {
  font-family: var(--font-arabic);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.42;
}

[dir='rtl'] .hc-photo::after {
  background: linear-gradient(
    to left,
    rgba(10, 11, 15, 0.92) 0%,
    rgba(10, 11, 15, 0.72) 42%,
    rgba(10, 11, 15, 0.15) 100%
  );
}

/* ----------------------------------------------------------- breakpoints */

@media (max-width: 1279px) {
  .hc-grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1023px) {
  :root {
    --section-y: 64px;
    --section-y-lg: 80px;
  }
  .hc-case,
  .hc-split,
  .hc-split--copy-first,
  .hc-split--copy-narrow,
  .hc-grid--3 {
    grid-template-columns: 1fr;
  }

  .hc-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .hc-metrics,
  .hc-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hc-case-strip {
    grid-template-columns: 1fr;
  }

  .hc-footer__grid {
    grid-template-columns: 1fr 1fr;
  }


  .hc-row-split {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --section-y: 56px;
    --section-y-lg: 72px;
    --card-pad: 20px;
    --card-pad-lg: 24px;
  }

  .hc-head {
    gap: 12px;
  }

  .hc-head__title {
    font-size: clamp(30px, 9vw, 42px);
  }

  .hc-lead {
    font-size: 16px;
    line-height: 1.65;
  }

  .hc-grid--4,
  .hc-grid--2,
  .hc-compare,
  .hc-case__stats,
  .hc-footer__grid {
    grid-template-columns: 1fr;
  }

  .hc-hero__stats {
    flex-wrap: wrap;
  }

  .hc-hero__stat {
    flex: 1 1 42%;
    border-inline-end: 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .hc-metrics,
  .hc-steps {
    grid-template-columns: 1fr;
  }

  .hc-metric-item,
  .hc-step {
    border-inline-end: 0;
    padding-inline-start: var(--space-2);
  }


  /* Touch targets never drop below 44px. */
  .hc-btn {
    --btn-h: var(--control-h);
  }

  .hc-footer__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .hc-photo {
    min-height: 440px;
  }

  .hc-photo::after {
    background: var(--img-scrim);
  }
}

/* Print: the site is a document first. */
/* ------------------------------------------------------- service pages */

/* The row arrow only nudges if it is allowed to move. */
.hc-row__icon svg {
  transition: transform var(--dur-fast) var(--ease-out);
}

.hc-crumb {
  margin-bottom: var(--space-4);
}

.hc-crumb__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--motion-hover);
}

.hc-crumb__link:hover {
  color: var(--text-primary);
}

.hc-crumb__link svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.hc-svc-hero__inner {
  max-width: var(--container-narrow);
}

.hc-svc-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 64px;
  margin-bottom: var(--space-3);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

.hc-svc-hero__icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* The short line is the promise; the lead is the argument. Sized apart so the
   page has a shape rather than three paragraphs of the same weight. */
.hc-svc-hero__short {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

[dir="rtl"] .hc-svc-hero__short {
  font-family: var(--font-arabic);
  font-style: normal;
  line-height: var(--lh-body-ar);
}

.hc-svc-hero__lead {
  margin-top: var(--space-3);
  max-width: 62ch;
}

.hc-svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.hc-svc-proof .hc-eyebrow {
  margin-bottom: var(--space-3);
}

.hc-svc-proof .hc-stat {
  max-width: 34rem;
}

.hc-row__ic {
  color: var(--text-accent);
  align-self: center;
}

.hc-row__ic svg {
  display: block;
  width: var(--icon-md);
  height: var(--icon-md);
}

/* ------------------------------------------------------- the nav submenu */

.hc-nav__item {
  position: relative;
  display: inline-flex;
}

.hc-nav__caret {
  margin-inline-start: 4px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.hc-nav__item--has-menu:hover .hc-nav__caret,
.hc-nav__item--has-menu:focus-within .hc-nav__caret {
  transform: rotate(180deg);
}

/* Opened on hover and on keyboard focus. Kept in the layout with opacity and a
   pointer-events guard rather than display:none, so the transition has
   something to animate and focus can still reach the links. */
.hc-nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  z-index: 20;
  min-width: 320px;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--hc-ink-900);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility 0s linear var(--dur-fast);
}

.hc-nav__item--has-menu:hover .hc-nav__menu,
.hc-nav__item--has-menu:focus-within .hc-nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.hc-nav__menu a {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  padding: 10px var(--space-2);
  border-radius: var(--radius-md);
  color: var(--hc-warm-white);
  text-decoration: none;
  transition: var(--motion-hover);
}

.hc-nav__menu a:hover {
  background: rgba(255, 255, 255, 0.06);
}

.hc-nav__menu svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--hc-ember-400);
}

.hc-nav__menu-name {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}

.hc-nav__menu-desc {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--hc-sand-300);
}

.hc-drawer__link--sub {
  padding-inline-start: var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--hc-sand-300);
}

/* ------------------------------------------------------------ the journey */

/* The process band: four figures climbing out of the dark on one ember thread.
   The markup is a plain ordered list of four stages, which is what a visitor
   without JavaScript gets. Everything below arranges it along the climb.

   The resting state is all four stages fully legible. journey.js only adds
   [data-journey-live] from inside a frame that actually ran, so an unlit stage
   is a starting position and never something a visitor is left looking at. */

.hc-journey__stage {
  --thread-h: clamp(230px, 27vw, 350px);
  position: relative;
  margin-top: var(--space-6);
  padding-top: 0;
}

/* The thread, behind the stages, spanning the whole stage. */
.hc-journey__thread {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: var(--thread-h);
  overflow: visible;
  pointer-events: none;
}

.hc-journey__thread path {
  fill: none;
  stroke: var(--hc-ember-500);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(226, 98, 47, 0.55));
}

.hc-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none; /* the stage number is drawn, not a marker */
  counter-reset: none;
}

.hc-step {
  position: relative;
  padding-top: var(--lift, 0px);
}

/* Each stage is dropped by the height of the thread at its own column so the
   character's feet land on the line. The fractions are read off the path above;
   change one and change the other.

   The lift alone was not enough: the four renders are different heights — the
   crouching pose is 150px where the celebrating one is 233 — and a lift applied
   to the top of the stage put four different pairs of feet at four different
   distances from the line, up to 79px of float. So the figure gets a fixed zone
   and stands at the bottom of it. Every pair of feet now shares one baseline,
   and the lift only has to move that baseline onto the thread. The zone is
   capped with minmax so a taller render overflows upward instead of pushing the
   text down. */
.hc-journey__stop {
  display: grid;
  grid-template-rows: minmax(0, var(--fig-zone)) auto;
  align-content: start;
  row-gap: var(--space-2);
}

.hc-journey__stage { --fig-zone: calc(var(--thread-h) * 0.46); }

.hc-step:nth-child(1) { --lift: calc(var(--thread-h) * 0.466); }
.hc-step:nth-child(2) { --lift: calc(var(--thread-h) * 0.363); }
.hc-step:nth-child(3) { --lift: calc(var(--thread-h) * 0.189); }
.hc-step:nth-child(4) { --lift: calc(var(--thread-h) * 0.003); }

.hc-journey__figure {
  display: block;
  align-self: end;
  width: 100%;
  max-width: calc(var(--thread-h) * 0.45);
  height: auto;
  margin-bottom: 0;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6));
}

.hc-step__n {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--text-accent);
}

.hc-step__name {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

[dir="rtl"] .hc-step__name {
  font-family: var(--font-arabic);
  font-weight: 800;
  line-height: var(--lh-display-ar);
}

.hc-step__desc {
  margin: 6px 0 0;
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  max-width: 30ch;
}

/* The daylight at the mouth of the cave, at the end of the climb. It comes up
   with the thread rather than sitting there from the start. */
.hc-journey__mouth {
  position: absolute;
  top: 0;
  inset-inline-end: -4%;
  width: clamp(160px, 20vw, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(255, 248, 243, 0.20),
    rgba(226, 98, 47, 0.14) 45%,
    transparent 72%
  );
  pointer-events: none;
}

/* ---- claimed by the driver, only once a frame has run ---- */

[data-journey-live] .hc-journey__stop {
  opacity: 0.42;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  transform: translateY(10px);
}

[data-journey-live] .hc-journey__stop.is-lit {
  opacity: 1;
  transform: translateY(0);
}

[data-journey-live] .hc-journey__mouth {
  opacity: calc(0.15 + (var(--journey-progress, 0) * 0.85));
}

@media (max-width: 1023px) {
  .hc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-step { --lift: 0px !important; }
  .hc-journey__thread { display: none; }
  /* No line to stand on, so the figure zone stops holding a baseline. */
  .hc-journey__stop { grid-template-rows: none; }
}

@media (max-width: 599px) {
  .hc-steps { grid-template-columns: minmax(0, 1fr); }
  .hc-journey__figure { max-width: 120px; }
}

/* ------------------------------------------------------------- clients */

.hc-clients {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.hc-client-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--card-pad);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: inherit;
  text-decoration: none;
  transition: var(--motion-hover);
}

.hc-client-card:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
}

/* A fixed box for the logo so cards line up whatever shape each mark is. */
.hc-client-card__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 64px;
}

.hc-client-card__logo img {
  max-height: 100%;
  max-width: 190px;
  width: auto;
  object-fit: contain;
}

.hc-client-card__sector {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}

[dir="rtl"] .hc-client-card__sector {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  text-transform: none;
}

.hc-client-card__short {
  font-family: var(--font-ui-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-heading);
  color: var(--text-primary);
}

.hc-client-card__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--text-accent);
}

.hc-client-card__go svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}

.hc-client-card:hover .hc-client-card__go svg { transform: translateX(4px); }
[dir="rtl"] .hc-client-card:hover .hc-client-card__go svg { transform: translateX(-4px); }

.hc-client-hero__inner {
  max-width: var(--container-narrow);
}

.hc-client-hero__logo {
  display: block;
  height: 84px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  margin-bottom: var(--space-3);
}

.hc-client-hero__title { margin-top: var(--space-2); }

.hc-client-hero__lead {
  margin-top: var(--space-3);
  max-width: 62ch;
}

.hc-client-results {
  margin-top: var(--space-3);
}

/* ------------------------------------------------------------ the blog */

.hc-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.hc-post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: var(--motion-hover);
}

.hc-post-card:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
}

.hc-post-card__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-sunken);
}

.hc-post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-grade);
  transition: transform var(--dur-slow) var(--ease-out);
}

.hc-post-card:hover .hc-post-card__thumb img { transform: scale(1.03); }

.hc-post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--card-pad);
}

.hc-post-card__meta,
.hc-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}

[dir="rtl"] .hc-post-card__meta,
[dir="rtl"] .hc-post__meta {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  text-transform: none;
}

.hc-post-card__title {
  font-family: var(--font-ui-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

.hc-post-card__desc {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

.hc-post-card__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-1);
  font-size: var(--fs-body-sm);
  color: var(--text-accent);
}

.hc-post-card__go svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}

.hc-post-card:hover .hc-post-card__go svg { transform: translateX(4px); }
[dir="rtl"] .hc-post-card:hover .hc-post-card__go svg { transform: translateX(-4px); }

.hc-post__title { margin-top: var(--space-2); }
.hc-post__meta { margin-top: var(--space-3); }
.hc-post__excerpt { margin-top: var(--space-3); }

.hc-post__cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  filter: var(--img-grade);
}

/* ---- post content ----
   The editor emits plain HTML, so this is the one place in the theme that has
   to style tags rather than classes. Scoped to .hc-prose so it can never leak
   into the marketing templates. */

.hc-prose {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

[dir="rtl"] .hc-prose { line-height: var(--lh-body-ar); }

.hc-prose > * + * { margin-top: var(--space-3); }

.hc-prose h2,
.hc-prose h3,
.hc-prose h4 {
  margin-top: var(--space-5);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
}

[dir="rtl"] .hc-prose h2,
[dir="rtl"] .hc-prose h3,
[dir="rtl"] .hc-prose h4 {
  font-family: var(--font-arabic);
  font-weight: 800;
  line-height: var(--lh-display-ar);
}

.hc-prose h2 { font-size: var(--fs-h3); }
.hc-prose h3 { font-size: var(--fs-h4); }
.hc-prose h4 { font-size: var(--fs-h5); font-family: var(--font-ui-heading); font-weight: var(--fw-semibold); }

.hc-prose a {
  color: var(--text-accent);
  text-underline-offset: 3px;
}

.hc-prose ul,
.hc-prose ol { padding-inline-start: var(--space-3); }
.hc-prose li + li { margin-top: 8px; }

.hc-prose blockquote {
  margin-inline: 0;
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body-lg);
  color: var(--text-primary);
}

[dir="rtl"] .hc-prose blockquote {
  font-family: var(--font-arabic);
  font-style: normal;
}

.hc-prose img,
.hc-prose figure img {
  border-radius: var(--radius-md);
}

.hc-prose figcaption {
  margin-top: 8px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.hc-prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
}

.hc-prose pre {
  padding: var(--card-pad);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  overflow-x: auto;
}

.hc-prose pre code { padding: 0; background: none; }

.hc-prose hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
}

.hc-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
}

.hc-prose th,
.hc-prose td {
  padding: 10px var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  text-align: start;
}

/* ---- pagination ---- */

.hc-pagination {
  margin-top: var(--space-5);
}

.hc-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hc-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  text-decoration: none;
  transition: var(--motion-hover);
}

.hc-pagination .page-numbers:hover { border-color: var(--accent); }

.hc-pagination .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

/* ------------------------------------------------- metrics & case strip --
   The proof band. Markup and responsive overrides for these existed from the
   start; the base rules never did, so this band — the one carrying 48, 4.7x and
   6.2M — rendered as a stack of unstyled text on every page it appears. */

.hc-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: var(--space-5) 0 0;
  border-top: 1px solid var(--border-subtle);
}

.hc-metric-item {
  padding: var(--space-4) var(--space-3) var(--space-3) 0;
  border-inline-end: 1px solid var(--border-subtle);
}

.hc-metric-item:last-child { border-inline-end: 0; }
.hc-metric-item + .hc-metric-item { padding-inline-start: var(--space-3); }

.hc-metric-item__value {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.hc-metric-item__unit {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-accent);
}

.hc-metric-item__insight {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 26ch;
}

.hc-metric-item__source {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
  opacity: 0.8;
}

[dir="rtl"] .hc-metric-item__unit,
[dir="rtl"] .hc-metric-item__source,
[dir="rtl"] .hc-case-strip__label,
[dir="rtl"] .hc-case-strip__source {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  text-transform: none;
}

/* ---- the named case, beside its numbers ---- */

.hc-case-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.hc-case-strip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* A fixed box, so a client logo of any shape sits on the same line. */
.hc-case-strip__client {
  height: 40px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  flex: none;
}

.hc-case-strip__title { margin: 0 0 var(--space-2); }

.hc-case-strip__source {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
}

.hc-case-strip__stats {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.hc-case-strip__stats > div {
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--accent);
}

.hc-case-strip__value {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.hc-case-strip__label {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 1023px) {
  .hc-case-strip { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .hc-case-strip__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------- odds the markup needs */

.hc-hero__copy {
  min-width: 0;
  /* The character stands at 65% of the frame; the type has to end before it. */
  max-width: min(100%, 54ch);
}

@media (min-width: 1024px) {
  .hc-hero--top .hc-hero__copy { max-width: 64%; }
  .hc-hero--top .hc-hero__title { font-size: clamp(38px, 4.6vw, 66px); }
}

.hc-hero__lead { margin-top: var(--space-3); max-width: 54ch; }

.hc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
}

/* The second route out of the hero, demoted. Two buttons of equal weight make
   the visitor choose before they have read anything; a link does not. */
.hc-hero__quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--motion-hover);
}

.hc-hero__quiet:hover {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.hc-hero__quiet svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}

.hc-hero__quiet:hover svg { transform: translateX(4px); }
[dir="rtl"] .hc-hero__quiet:hover svg { transform: translateX(-4px); }

.hc-industries__side { min-width: 0; }

.hc-dialog__form { display: grid; gap: var(--space-3); }

@media print {
  .hc-header,
  .hc-drawer,
  .hc-toasts,
  .hc-dialog,
  .hc-headlamp {
    display: none !important;
  }
}

/* The desktop nav swapped to the drawer at 767px, which was fine at six items
   and is not at nine — the Arabic labels alone run past the logo and the
   language switch somewhere around a tablet. The swap is its own breakpoint so
   the rest of the mobile layout keeps the 767px one it was designed against. */
@media (max-width: 1179px) {
  .hc-nav,
  .hc-header__tools .hc-btn {
    display: none;
  }

  .hc-nav-toggle {
    display: inline-flex;
    margin-inline-start: auto;
  }
}

/* ------------------------------------------------------------ row tag */

/* The third line of a row: the capability that answers the symptom on the
   challenges band, the human hand-off on the AI band. Mono and quiet — it is
   a label on the row, not a third sentence competing with the description. */
.hc-row__tag {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-accent);
}

[dir='rtl'] .hc-row__tag {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  text-transform: none;
}

.hc-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* ------------------------------------------------------------------ faq */

/* Native <details>. The answers ship in the DOM open or closed, which is the
   point: an answer engine reads the markup, not the interaction. */
.hc-faq {
  border-top: 1px solid var(--border-subtle);
}

.hc-faq__item {
  border-bottom: 1px solid var(--border-subtle);
}

.hc-faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  line-height: 1.4;
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}

[dir='rtl'] .hc-faq__q {
  font-family: var(--font-arabic);
  font-weight: 800;
  line-height: 1.5;
}

.hc-faq__q::-webkit-details-marker {
  display: none;
}

.hc-faq__q:hover,
.hc-faq__item[open] > .hc-faq__q {
  color: var(--text-accent);
}

.hc-faq__q:focus-visible {
  outline: 2px solid var(--text-accent);
  outline-offset: 4px;
}

.hc-faq__caret {
  flex: none;
  transform: translateY(0.15em);
  transition: transform var(--dur-fast) var(--ease-out);
}

.hc-faq__item[open] .hc-faq__caret {
  transform: translateY(0.15em) rotate(180deg);
}

.hc-faq__a {
  max-width: 62ch;
  margin: 0;
  padding-bottom: var(--space-4);
  color: var(--text-body);
}

.hc-note {
  max-width: 62ch;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* The stage figure on a method page. The pose is the stage — crouching to
   find the gap, the laptop to read it, climbing to build, celebrating at the
   mouth — so it sits with the heading rather than floating beside it. */
.hc-stage__figure {
  display: block;
  margin-top: var(--space-5);
}

@media (min-width: 900px) {
  .hc-stage__figure {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    margin-top: 0;
    pointer-events: none;
  }

  .hc-svc-hero__inner:has(.hc-stage__figure) {
    position: relative;
    padding-inline-end: 15rem;
  }
}

/* A sector tag that leads somewhere. Five of the eight do; the rest are
   labels, and the difference has to be visible before the cursor arrives. */
.hc-tag--link {
  text-decoration: none;
  border-color: var(--border-strong);
  transition: var(--motion-hover);
}

.hc-tag--link:hover {
  color: var(--text-accent);
  border-color: var(--accent);
  text-decoration: none;
}

/* ------------------------------------------------------- journey in RTL */

/* The thread climbs left to right, and each stage is dropped by the height of
   the line at its own column. In Arabic the grid reverses — stage one lands on
   the right — but the line did not, so every figure sat on the wrong end of it
   and the ascent read as a descent. Mirroring the line puts the low end back
   under stage one and makes the climb run with the reading direction. The lift
   fractions need no change: they describe column order, which is already
   correct, and the draw-on-scroll starts from the new right-hand end. */
[dir='rtl'] .hc-journey__thread {
  transform: scaleX(-1);
}

/* The wordmark is Latin on every page. Belt and braces with the SVG attribute:
   a stylesheet that sets direction on svg text would otherwise undo it. */
.hc-logo__word,
.hc-logo__desc {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ================================================== the home page rebuild */

/* Tick list — the three claims in the intro band. */
.hc-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.hc-tick {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
}

.hc-tick__mark {
  color: var(--text-accent);
  transform: translateY(0.2em);
}

.hc-tick strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

[dir='rtl'] .hc-tick strong {
  font-family: var(--font-arabic);
  font-weight: 700;
}

.hc-tick span span {
  display: block;
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

.hc-intro__figure {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* ---- the work band. Their showreel, our figures. ---- */
.hc-folio {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-3);
}

.hc-folio__card {
  display: flex;
  grid-column: span 5;
}

.hc-folio__card:nth-child(4n + 1),
.hc-folio__card:nth-child(4n) {
  grid-column: span 7;
}

.hc-folio__link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 430px;
  padding: var(--card-pad-lg);
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--radius-md) * 2);
  background:
    radial-gradient(circle at 82% 16%, rgba(226, 98, 47, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 48%),
    var(--surface-card);
  text-decoration: none;
  transition: var(--motion-hover);
}

.hc-folio__link:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  text-decoration: none;
}

.hc-folio__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.hc-folio__index {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.hc-folio__signal {
  display: flex;
  align-items: end;
  gap: 6px;
  width: min(58%, 260px);
  height: 72px;
  margin-top: var(--space-4);
  padding-bottom: 1px;
  border-bottom: 1px solid var(--border-subtle);
}

.hc-folio__signal span {
  flex: 1;
  height: 18%;
  background: var(--accent);
  opacity: 0.34;
  transition: height 360ms var(--ease-out), opacity 220ms var(--ease-out);
}

.hc-folio__signal span:nth-child(2) { height: 34%; }
.hc-folio__signal span:nth-child(3) { height: 28%; }
.hc-folio__signal span:nth-child(4) { height: 56%; }
.hc-folio__signal span:nth-child(5) { height: 72%; }
.hc-folio__signal span:nth-child(6) { height: 100%; }

.hc-folio__link:hover .hc-folio__signal span {
  opacity: 0.9;
}

.hc-folio__sector {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-accent);
}

[dir='rtl'] .hc-folio__sector {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  text-transform: none;
}

.hc-folio__figure {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
  color: var(--text-primary);
}

.hc-folio__unit {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-body-sm);
  color: var(--text-accent);
}

.hc-folio__desc {
  display: block;
  margin-top: var(--space-3);
  color: var(--text-body);
  max-width: 42ch;
}

.hc-folio__source {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  direction: ltr;
}

[dir='rtl'] .hc-folio__source {
  text-align: right;
}

.hc-folio__more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.hc-folio__chip {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.hc-folio__chip b {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

.hc-folio__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--fs-body-sm);
  color: var(--text-accent);
}

/* ---- trusted: the wall that only shows who agreed ---- */
.hc-logowall {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.hc-logowall__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  transition: var(--motion-hover);
}

.hc-logowall__link:hover {
  border-color: var(--border-strong);
}

.hc-logowall img {
  display: block;
  height: 34px;
  width: auto;
}

/* ---- services as cards, the shape both competitors use ---- */
.hc-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-3);
}

.hc-cards > li { grid-column: span 4; }
.hc-cards > li:nth-child(1),
.hc-cards > li:nth-child(4) { grid-column: span 8; }
.hc-cards > li:nth-child(5),
.hc-cards > li:nth-child(6) { grid-column: span 6; }

.hc-scard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 340px;
  padding: var(--card-pad-lg);
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--radius-md) * 2);
  background:
    linear-gradient(145deg, rgba(226, 98, 47, 0.05), transparent 48%),
    var(--surface-card);
  text-decoration: none;
  transition: var(--motion-hover);
}

.hc-cards > li:nth-child(1) .hc-scard,
.hc-cards > li:nth-child(4) .hc-scard {
  background:
    radial-gradient(circle at 82% 18%, rgba(226, 98, 47, 0.25), transparent 32%),
    var(--hc-ink-900);
  border-color: var(--hc-ink-line-strong);
}

.hc-cards > li:nth-child(1) .hc-scard__name,
.hc-cards > li:nth-child(4) .hc-scard__name {
  color: var(--hc-paper-50);
}

.hc-cards > li:nth-child(1) .hc-scard__desc,
.hc-cards > li:nth-child(4) .hc-scard__desc,
.hc-cards > li:nth-child(1) .hc-scard__index,
.hc-cards > li:nth-child(4) .hc-scard__index {
  color: var(--hc-sand-300);
}

.hc-cards > li:nth-child(1) .hc-scard__visual,
.hc-cards > li:nth-child(4) .hc-scard__visual {
  border-bottom-color: var(--hc-ink-line-strong);
  background-image:
    radial-gradient(circle at 80% 40%, rgba(226, 98, 47, 0.32), transparent 30%),
    linear-gradient(var(--hc-ink-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hc-ink-line) 1px, transparent 1px);
}

.hc-cards > li:nth-child(1) .hc-scard__ic,
.hc-cards > li:nth-child(4) .hc-scard__ic {
  background: var(--hc-ink-850);
}

.hc-cards > li:nth-child(1) .hc-scard__go,
.hc-cards > li:nth-child(4) .hc-scard__go {
  color: var(--hc-ember-400);
}

.hc-cards > li:nth-child(2) .hc-scard,
.hc-cards > li:nth-child(5) .hc-scard {
  background: var(--hc-ember-500);
  border-color: var(--hc-ember-500);
}

.hc-cards > li:nth-child(2) .hc-scard__visual,
.hc-cards > li:nth-child(5) .hc-scard__visual {
  border-bottom-color: rgba(12, 11, 10, 0.18);
  background-image:
    radial-gradient(circle at 80% 40%, rgba(255, 255, 255, 0.28), transparent 30%),
    linear-gradient(rgba(12, 11, 10, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 11, 10, 0.12) 1px, transparent 1px);
}

.hc-cards > li:nth-child(2) .hc-scard__name,
.hc-cards > li:nth-child(5) .hc-scard__name,
.hc-cards > li:nth-child(2) .hc-scard__desc,
.hc-cards > li:nth-child(5) .hc-scard__desc,
.hc-cards > li:nth-child(2) .hc-scard__index,
.hc-cards > li:nth-child(5) .hc-scard__index,
.hc-cards > li:nth-child(2) .hc-scard__go,
.hc-cards > li:nth-child(5) .hc-scard__go {
  color: var(--hc-ink-900);
}

.hc-cards > li:nth-child(2) .hc-scard__desc,
.hc-cards > li:nth-child(5) .hc-scard__desc,
.hc-cards > li:nth-child(2) .hc-scard__index,
.hc-cards > li:nth-child(5) .hc-scard__index {
  opacity: 0.7;
}

.hc-cards > li:nth-child(2) .hc-scard__ic,
.hc-cards > li:nth-child(5) .hc-scard__ic {
  border-color: rgba(12, 11, 10, 0.3);
  background: rgba(255, 255, 255, 0.3);
  color: var(--hc-ink-900);
}

.hc-scard:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  text-decoration: none;
}

.hc-scard__visual {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 118px;
  margin: calc(var(--card-pad-lg) * -1) calc(var(--card-pad-lg) * -1) 0;
  padding: var(--card-pad-lg);
  border-bottom: 1px solid var(--border-subtle);
  background-image:
    radial-gradient(circle at 80% 40%, rgba(226, 98, 47, 0.18), transparent 30%),
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
}

.hc-scard__index {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.hc-scard__ic {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 50%;
  color: var(--text-accent);
  background: var(--surface-card);
  transition: transform 300ms var(--ease-out), background 220ms var(--ease-out);
}

.hc-scard:hover .hc-scard__ic {
  transform: rotate(-8deg) scale(1.06);
  background: var(--accent);
  color: var(--hc-ink-900);
}

.hc-scard__name {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  color: var(--text-primary);
}

[dir='rtl'] .hc-scard__name {
  font-family: var(--font-arabic);
  font-weight: 800;
}

.hc-scard__desc {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

.hc-scard__go {
  display: inline-flex;
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--text-accent);
}

.hc-scard__go svg,
.hc-folio__cta svg {
  transition: transform 220ms var(--ease-out);
}

.hc-scard:hover .hc-scard__go svg,
.hc-folio__link:hover .hc-folio__cta svg {
  transform: translateX(5px);
}

[dir='rtl'] .hc-scard:hover .hc-scard__go svg,
[dir='rtl'] .hc-folio__link:hover .hc-folio__cta svg {
  transform: translateX(-5px);
}

@media (max-width: 1023px) {
  .hc-folio__card,
  .hc-folio__card:nth-child(4n + 1),
  .hc-folio__card:nth-child(4n) {
    grid-column: span 6;
  }

  .hc-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hc-cards > li,
  .hc-cards > li:nth-child(1),
  .hc-cards > li:nth-child(4),
  .hc-cards > li:nth-child(5),
  .hc-cards > li:nth-child(6) { grid-column: auto; }
}

@media (max-width: 767px) {
  .hc-folio {
    grid-template-columns: 1fr;
  }

  .hc-folio__card,
  .hc-folio__card:nth-child(4n + 1),
  .hc-folio__card:nth-child(4n) {
    grid-column: auto;
  }

  .hc-folio__link { min-height: 360px; }
  .hc-cards { grid-template-columns: 1fr; }
  .hc-scard { min-height: 270px; }
  .hc-scard__visual { min-height: 96px; }
  .hc-compare { grid-template-columns: 1fr; }
  .hc-compare__col { min-height: auto; padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .hc-scard:hover,
  .hc-folio__link:hover,
  .hc-scard:hover .hc-scard__ic {
    transform: none;
  }
}

/* ---- quotes: built now, shown when there is a real one ---- */
.hc-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.hc-quote {
  margin: 0;
  padding: var(--card-pad-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.hc-quote__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

[dir='rtl'] .hc-quote__text {
  font-family: var(--font-arabic);
  line-height: var(--lh-body-ar);
}

.hc-quote__by {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.hc-quote__name {
  display: block;
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.hc-quote__role {
  display: block;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* ---- latest posts, and the face that holds the empty state ---- */
.hc-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.hc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) 0;
  text-align: center;
}

.hc-empty .hc-mascot {
  opacity: 0.75;
}

/* ---- the contact details beside the form ---- */
.hc-details {
  margin: 0;
  border-top: 1px solid var(--border-subtle);
}

.hc-details__row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.hc-details dt {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}

[dir='rtl'] .hc-details dt {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  text-transform: none;
}

.hc-details dd {
  margin: 0;
  color: var(--text-primary);
}

.hc-details a {
  color: inherit;
}

@media (max-width: 1023px) {
  .hc-cards,
  .hc-quotes,
  .hc-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .hc-folio,
  .hc-cards,
  .hc-quotes,
  .hc-posts { grid-template-columns: minmax(0, 1fr); }
  .hc-details__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hc-intro__figure { display: none; }
}

/* ------------------------------------------------------- mascot beats */

/* A face or a pose that marks a moment rather than decorating a band. One per
   section at most, and only where something is actually happening — a result,
   an empty state, a refusal, a dead end. The mascot that turns up in every band
   is wallpaper; the one that turns up when something happens is a character. */
.hc-beat {
  display: block;
  margin-bottom: var(--space-3);
}

.hc-beat--center {
  margin-inline: auto;
}

.hc-beat--edge {
  margin-bottom: calc(var(--space-3) * -1);
  margin-inline-start: auto;
  transform: scaleX(-1);
}

[dir='rtl'] .hc-beat--edge {
  transform: none;
}

/* The one wink, in the footer bar, at the size of a full stop. */
.hc-footer__wink {
  width: 26px;
  height: auto;
  vertical-align: -7px;
  margin-inline-end: 8px;
  opacity: 0.9;
}

/* No shot on a work card: the figure takes the space a photograph would have.
   Shots were tried from client-media/portfolio and pulled — real work, but not
   good enough to front the site. */
.hc-folio__link {
  padding: var(--card-pad-lg);
}

.hc-folio__link--bare .hc-folio__figure {
  font-size: clamp(48px, 6.4vw, 74px);
}

/* Legal links, in the bar. Required to exist, never the reason anyone came —
   so they sit below the columns at caption size and take no more room. */
.hc-footer__legal {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  font-size: var(--fs-caption);
}

.hc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
}

.hc-footer__social,
.hc-contact-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hc-footer__social .hc-social,
.hc-contact-social .hc-social {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.hc-contact-social { margin-block-start: 24px; }

@media (max-width: 640px) {
  .hc-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ------------------------------------------------ insights filter bar */

.hc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.hc-filters__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hc-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--motion-hover);
}

.hc-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  text-decoration: none;
}

.hc-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--hc-ink-900);
  font-weight: var(--fw-medium);
}

.hc-chip__n {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  opacity: 0.7;
}

.hc-filters__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 18rem;
}

.hc-filters__search .hc-input {
  flex: 1;
}

.hc-filters__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--motion-hover);
}

.hc-filters__go:hover {
  border-color: var(--accent);
  color: var(--text-accent);
}

/* ------------------------------------------------- social row in the hero */

/* Five marks under the call to action. The brand glyphs are filled, so they sit
   in a ring rather than on the ground — an Instagram mark dropped straight onto
   a photograph disappears into it. */
.hc-hero__social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
}

.hc-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(245, 243, 238, 0.22);
  border-radius: 50%;
  color: rgba(245, 243, 238, 0.82);
  background: rgba(12, 11, 10, 0.35);
  backdrop-filter: blur(6px);
  transition: var(--motion-hover);
}

.hc-social:hover {
  color: var(--hc-ink-900);
  background: var(--hc-ember-500);
  border-color: var(--hc-ember-500);
  text-decoration: none;
}

.hc-social:focus-visible {
  outline: 2px solid var(--hc-ember-500);
  outline-offset: 3px;
}

/* ------------------------------------------------------------- the chain */

/* Six capabilities read as a sequence rather than a set: each one says what it
   does for the next, so the argument for buying them together is in the shape
   of the band and not in an adjective. */
.hc-chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border-subtle);
}

.hc-chain__link {
  position: relative;
  padding: var(--space-4) var(--space-3) var(--space-4) 0;
  border-inline-start: 1px solid var(--border-subtle);
  padding-inline-start: var(--space-3);
}

.hc-chain__link:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}

/* The line that makes it a chain: it runs from each link into the next. */
.hc-chain__link::after {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform-origin: var(--chain-origin, left);
  opacity: 0.55;
}

[dir='rtl'] .hc-chain__link::after {
  --chain-origin: right;
}

.hc-chain__n {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--text-accent);
}

.hc-chain__name {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

[dir='rtl'] .hc-chain__name {
  font-family: var(--font-arabic);
  font-weight: 800;
}

.hc-chain__desc {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

@media (max-width: 1023px) {
  .hc-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .hc-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------ growth leak finder */

.hc-leak {
  position: relative;
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + var(--space-2));
}

.hc-leak::before {
  content: '';
  position: absolute;
  width: min(42rem, 70vw);
  aspect-ratio: 1;
  inset-inline-start: -18rem;
  bottom: -28rem;
  border: 1px solid rgba(12, 11, 10, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgba(12, 11, 10, 0.035), 0 0 0 10rem rgba(12, 11, 10, 0.025);
  pointer-events: none;
}

.hc-leak__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(var(--space-5), 7vw, var(--space-8));
  align-items: start;
}

.hc-leak__intro {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
}

.hc-leak__choices {
  border-top: 1px solid rgba(12, 11, 10, 0.28);
}

.hc-leak__item {
  border-bottom: 1px solid rgba(12, 11, 10, 0.28);
  transition: background-color 220ms ease, color 220ms ease;
}

.hc-leak__summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 44px;
  gap: var(--space-3);
  align-items: center;
  min-height: 96px;
  padding: var(--space-3);
  cursor: pointer;
  list-style: none;
}

.hc-leak__summary::-webkit-details-marker { display: none; }

.hc-leak__summary:focus-visible {
  outline: 2px solid var(--hc-ink-900);
  outline-offset: -4px;
}

.hc-leak__icon,
.hc-leak__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.hc-leak__question {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: var(--lh-snug);
}

[dir='rtl'] .hc-leak__question { font-family: var(--font-arabic); }

.hc-leak__toggle {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  transition: transform 220ms ease;
}

.hc-leak__item[open] {
  color: var(--hc-paper-50);
  background: var(--hc-ink-900);
}

.hc-leak__item[open] .hc-leak__toggle { transform: rotate(45deg); }

.hc-leak__answer {
  padding: 0 var(--space-3) var(--space-4) calc(48px + var(--space-6));
}

[dir='rtl'] .hc-leak__answer {
  padding-right: calc(48px + var(--space-6));
  padding-left: var(--space-3);
}

.hc-leak__answer p {
  max-width: 56ch;
  margin: 0;
  color: rgba(245, 243, 238, 0.74);
}

.hc-leak__answer a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  font-weight: 800;
  color: var(--hc-ember-500);
}

@media (max-width: 767px) {
  .hc-leak__layout { grid-template-columns: 1fr; }
  .hc-leak__intro { position: static; }
  .hc-leak__summary {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: var(--space-2);
    min-height: 82px;
    padding-inline: 0;
  }
  .hc-leak__icon,
  .hc-leak__toggle {
    width: 38px;
    height: 38px;
  }
  .hc-leak__answer {
    padding-right: 0;
    padding-left: calc(40px + var(--space-2));
  }
  [dir='rtl'] .hc-leak__answer {
    padding-right: calc(40px + var(--space-2));
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hc-leak__item,
  .hc-leak__toggle { transition: none; }
}

/* ===== experience.css ===== */
/* Work-led agency pages. All measurements stay stable as content changes. */
.hc{--font-display:"Plus Jakarta Sans",Arial,sans-serif;--fw-display:800;--fw-display-strong:800;--tracking-display:0;--tracking-heading:0;--tracking-eyebrow:0;--tracking-brand:0;--tracking-mono:0;--hc-danger:#ff9b9b;font-synthesis:none;background:#0b0c0e}
[dir='rtl'] .hc{--font-display:var(--font-arabic);--font-body:var(--font-arabic);--font-ui-heading:var(--font-arabic);--fw-light:400;--fw-medium:400;--fw-semibold:700;font-family:var(--font-arabic)}
[dir='rtl'] .hc :is(.hc-nav__link,.hc-nav__menu-name,.hc-btn,.hc-hero__statement,.hc-text-link,.hc-label){font-weight:700}
[dir='rtl'] .hc .hc-caption{font-weight:400}
.hc .hc-lang[lang='ar']{font-family:var(--font-arabic);font-weight:700}
.hc .hc-hero--top .hc-hero__title{font-family:"Plus Jakarta Sans",Arial,sans-serif}
.hc-honeypot{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.hc #hc-main{overflow-x:clip}
[dir='rtl'] .hc .hc-hero--top .hc-hero__title{text-align:right}
.hc *,.hc *::before,.hc *::after{letter-spacing:0}
.hc [data-ground]{--ground:#0b0c0e;--ground-sunken:#090a0c;--surface-page:#0b0c0e;--surface-sunken:#090a0c;--surface-card:#141619;--surface-raised:#1c1e22;--surface-hover:#202329;--surface-panel:#16181d;--text-primary:#f7f8fa;--text-body:#bec1c8;--text-muted:#9da2ad;--text-accent:#ff986a;--border-subtle:#2b2e34;--border-strong:#464b54;--accent:#f57d45;--accent-hover:#ff986a;--accent-press:#e76d36;--text-on-accent:#111214;--accent-soft:rgba(245,125,69,.09);--accent-soft-border:rgba(245,125,69,.3);--focus-ring:#ff986a}
.hc [data-ground='paper']{--ground:#121417;--surface-page:#121417}
.hc [data-ground='ember']{--ground:#101215;--surface-page:#101215}
.hc .hc-section{padding-block:84px}.hc .hc-section--lg{padding-block:96px}
.hc .hc-h1{font-size:54px;line-height:1.2;font-weight:800}.hc .hc-h2{font-size:40px;line-height:1.25;font-weight:800}.hc .hc-h3{font-size:26px}
.hc .hc-insight{font-family:var(--font-display);font-style:normal;font-weight:700}
.hc .hc-header{background:#0b0c0e;border-bottom:1px solid #24262c}.hc .hc-header__inner{gap:28px}.hc .hc-logo{width:180px}.hc .hc-nav{gap:22px}.hc .hc-nav__link{font-size:14px}
.hc .hc-nav__menu{max-height:min(650px,calc(100svh - 100px));overflow-y:auto;background:#15171c}.hc .hc-btn{border-radius:4px}.hc .hc-btn--primary{background:#f57d45;color:#101114;font-weight:700}
.hc .hc-hero--top{min-height:calc(100svh - var(--header-h) - 48px);max-height:none;padding-block:64px 72px}.hc .hc-hero--top .hc-hero__copy{max-width:760px}
.hc .hc-hero--top .hc-hero__title{font-size:76px;line-height:1.08;font-weight:800;max-width:100%;margin-block:22px}
.hc .hc-hero__statement{font-size:30px;line-height:1.45;color:#f7f8fa;font-weight:650;max-width:720px;margin:0 0 20px}.hc .hc-hero--top .hc-hero__lead{max-width:610px;font-size:18px;line-height:1.8}
.hc .hc-hero__video{object-position:center 68%}.hc .hc-hero::after{background:linear-gradient(180deg,rgba(8,9,11,.8),rgba(8,9,11,.54) 45%,rgba(8,9,11,.08))}.hc .hc-hero__social{margin-top:28px}
.hc-agency{border-bottom:1px solid #292c32}.hc-agency__layout{display:grid;grid-template-columns:1.25fr 1fr;gap:90px;align-items:start}.hc-agency__layout h2{margin-block:22px}
.hc-agency__principles{display:grid;gap:32px}.hc-agency__principles article{border-top:1px solid #32363e;padding-top:22px}.hc-agency__principles h3{font-size:22px;margin-block:14px 12px;color:#f7f8fa}.hc-agency__principles p{font-size:16px;line-height:1.9}
.hc-text-link{display:inline-flex;gap:12px;align-items:center;min-height:44px;color:#ff986a;font-size:15px;font-weight:650;text-decoration:none}.hc-text-link:hover{color:#ffd1ba}.hc-text-link svg{flex-shrink:0}
.hc-capabilities{background:#121417}.hc-capability-grid{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#33363d;border:1px solid #33363d}
.hc-capability{position:relative;display:flex;flex-direction:column;min-height:280px;height:100%;background:#121417;padding:28px;text-decoration:none;color:#d0d3da;transition:background 200ms}.hc-capability:hover,.hc-capability:focus-visible{background:#1b1e24}
.hc-capability__top{display:flex;align-items:center;justify-content:space-between;color:#a5abb7;font-size:12px}.hc-capability__icon{color:#ff986a}
.hc-capability h3{font-size:20px;line-height:1.5;font-weight:700;color:#f7f8fa;margin:24px 0 12px}.hc-capability p{font-size:14px;line-height:1.8;margin:0 0 24px}.hc-capability__link{display:flex;align-items:center;justify-content:space-between;margin-top:auto;font-size:13px;color:#ff986a}
.hc-work-stories{margin-top:52px}.hc-work-story{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:center;padding-block:52px;border-top:1px solid #32363d}
.hc-work-story:nth-child(even) .hc-work-story__visual{grid-column:1;grid-row:1}.hc-work-story:nth-child(even) .hc-work-story__copy{grid-column:2}
.hc-work-story__copy h3{font-size:30px;line-height:1.4;margin-block:16px;color:#f7f8fa}.hc-work-story__copy p{line-height:1.9;margin-bottom:16px}.hc-work-story__copy .hc-lead{font-size:21px;color:#f7f8fa}
.hc-work-story__visual{display:block;text-decoration:none;background:#171a20;overflow:hidden;border-radius:6px}.hc-work-story__visual img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;transition:transform 300ms}.hc-work-story__visual--content img{aspect-ratio:4/3}.hc-work-story__visual:hover img{transform:scale(1.025)}
.hc-work-story__caption{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;color:#e6e8ed;font-size:14px}
.hc .hc-page-hero{padding-block:80px 48px}.hc .hc-page-hero .hc-lead{max-width:800px}
.hc-work-nav{display:flex;flex-wrap:wrap;gap:12px 24px;padding-block:20px;border-bottom:1px solid #34373d}.hc-work-nav a{min-height:44px;display:inline-flex;align-items:center;font-size:14px;color:#bfc4ce;text-decoration:none;border-bottom:2px solid transparent}.hc-work-nav a:hover,.hc-work-nav a[aria-current]{color:#ff986a;border-color:#ff986a}.hc-work-section{scroll-margin-top:110px}
.hc-section-bar{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:40px}.hc-section-bar>div{max-width:760px}.hc-section-bar h2{max-width:800px;margin-block:12px 0}.hc-section-bar>a{flex-shrink:0}
.hc-project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;align-items:start}.hc-project-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.hc-project{min-width:0}
.hc-project__image{position:relative;display:block;overflow:hidden;background:#181b20;border:1px solid #34383f;border-radius:6px}.hc-project__image img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain}.hc-project--content .hc-project__image img{aspect-ratio:4/5}
.hc-project__expand{position:absolute;inset-inline-end:12px;bottom:12px;display:grid;place-items:center;width:40px;height:40px;border-radius:4px;background:#f4f5f7;color:#111}.hc-project__copy{padding-block:22px}
.hc-project__tag{color:#ff986a;font-size:13px;margin:0 0 10px}.hc-project__copy h3{font-size:24px;line-height:1.5;margin:0 0 12px;color:#f7f8fa}.hc-project__copy>p{line-height:1.85}
.hc-project__metric{display:flex;align-items:baseline;gap:16px;margin-block:12px}.hc-project__metric strong{font-size:38px;font-weight:750;color:#f7f8fa}.hc-project__metric span{font-size:14px}
.hc-service-opening__layout{display:grid;grid-template-columns:1.65fr 1fr;gap:90px;align-items:center;margin-top:48px}.hc-service-opening h1{margin-block:20px}.hc-service-opening .hc-btn{margin-top:28px}
.hc-service-fit{border-inline-start:1px solid #373b44;padding-inline-start:40px}.hc-service-fit>svg{display:block;color:#ff986a;margin-block:28px}.hc-service-fit p{font-size:20px;line-height:1.9}
.hc-deliverables{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 52px;margin-top:40px;padding:0}.hc-deliverables li{display:flex;gap:24px;padding-block:26px;border-top:1px solid #32363e}.hc-deliverables li>span{padding-top:8px}.hc-deliverables h3{color:#f7f8fa;font-size:21px;margin:0 0 10px}.hc-deliverables p{line-height:1.85;margin:0}
.hc-service-questions{display:grid;grid-template-columns:1fr 1.2fr;gap:70px}.hc-service-questions h2{margin-top:20px}.hc-native-faq details{border-block-start:1px solid #373b44}.hc-native-faq summary{cursor:pointer;padding-block:24px;color:#f7f8fa;font-size:18px;line-height:1.6}.hc-native-faq details p{line-height:1.9;padding-bottom:24px}
.hc .hc-card{border-radius:6px}.hc .hc-cta svg[role='img']{filter:brightness(0) invert(1)}.hc .hc-footer{border-top:1px solid #30343b}.hc .hc-post__title{font-family:var(--font-body)}
.hc a:focus-visible,.hc button:focus-visible,.hc summary:focus-visible{outline:2px solid #ffb28c;outline-offset:5px}
@media(max-width:1100px){.hc .hc-nav{gap:14px}.hc .hc-header__inner{gap:18px}.hc-agency__layout,.hc-service-opening__layout{gap:48px}.hc-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hc-work-story{gap:40px}}
@media(max-width:767px){
  .hc .hc-section,.hc .hc-section--lg{padding-block:56px}.hc .hc-h1{font-size:34px;line-height:1.45}.hc .hc-h2{font-size:29px;line-height:1.5}.hc .hc-h3{font-size:23px}.hc .hc-logo{width:150px}
  .hc .hc-hero--top{position:relative;display:grid;min-height:calc(100svh - var(--header-h) - 32px);padding-block:42px 60px;align-items:start}
  .hc .hc-hero--top .hc-hero__video,.hc .hc-hero--top .hc-hero__fx{position:absolute;height:100%;width:100%;aspect-ratio:auto;object-fit:cover;object-position:62% center}
  .hc .hc-hero::after{display:block;background:linear-gradient(180deg,rgba(8,9,11,.92),rgba(8,9,11,.82) 65%,rgba(8,9,11,.35))}
  .hc .hc-hero--top .hc-hero__copy{max-width:100%;padding:0}.hc .hc-hero--top .hc-hero__title{font-size:40px;margin-block:20px}.hc .hc-hero__statement{font-size:24px;line-height:1.6}.hc .hc-hero--top .hc-hero__lead{font-size:16px;line-height:1.9}
  .hc .hc-hero--top .hc-hero__actions{margin-top:28px;align-items:start}.hc .hc-hero--top .hc-hero__quiet{text-align:start}
  .hc-agency__layout,.hc-service-opening__layout,.hc-service-questions{grid-template-columns:1fr;gap:36px}.hc-capability{padding:22px;min-height:285px}.hc-capability h3{font-size:18px}.hc-capability-grid{margin-top:30px}.hc-capability__link{font-size:12px}
  .hc-work-story{grid-template-columns:1fr;gap:28px;padding-block:36px}.hc-work-story:nth-child(even) .hc-work-story__visual,.hc-work-story:nth-child(even) .hc-work-story__copy{grid-column:auto;grid-row:auto}.hc-work-story__copy h3{font-size:25px}
  .hc-project-grid,.hc-project-grid--3,.hc-deliverables{grid-template-columns:1fr}.hc-section-bar{align-items:start;flex-direction:column;gap:16px}.hc-service-fit{border-inline-start:0;border-top:1px solid #373b44;padding-inline-start:0;padding-top:24px}
  .hc .hc-page-hero{padding-block:50px 30px}.hc-work-nav{gap:6px 18px}.hc-work-nav a{font-size:13px}.hc-project__metric strong{font-size:32px}
}
@media(max-width:380px){.hc-capability-grid{grid-template-columns:1fr}.hc-capability{min-height:245px}.hc .hc-hero--top .hc-hero__title{font-size:36px}}
.hc .hc-head{gap:22px;max-width:820px}.hc .hc-head__title{line-height:1.4;overflow-wrap:break-word}.hc .hc-head__title .hc-insight{display:inline;line-height:inherit}.hc .hc-lead{line-height:1.85}.hc .hc-row__body{min-width:0}.hc .hc-row__title{line-height:1.6}.hc .hc-row__desc{line-height:1.9;margin-top:10px}
.hc .hc-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:start}.hc .hc-split>*{min-width:0}.hc .hc-page-hero__layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.8fr);gap:70px;align-items:center}.hc .hc-page-hero__layout .hc-head{max-width:none}.hc .hc-page-art{margin:0;min-width:0;display:flex;align-items:center;justify-content:center;min-height:280px}.hc .hc-page-art img{display:block;width:min(100%,320px);height:auto;object-fit:contain}
.hc .hc-service-opening__layout{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}.hc .hc-service-fit p{font-size:17px;margin-top:22px}.hc .hc-service-art{margin:28px 0 0}.hc .hc-service-art img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;display:block;border-radius:6px}.hc .hc-service-art--mascot{display:flex;justify-content:center}.hc .hc-service-art--mascot img{width:min(100%,260px);aspect-ratio:auto}.hc figcaption{margin-top:12px;font-size:12px;color:#9da2ad;line-height:1.7}
.hc .hc-industry-band__opening{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:64px;align-items:center;margin-bottom:40px}.hc .hc-industry-band__opening h2{margin:22px 0 18px;max-width:700px}.hc .hc-industry-band__opening p{max-width:740px}.hc .hc-industry-band__mascot{width:190px;height:auto;display:block}.hc .hc-sector-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0 0 32px;padding:0}.hc .hc-sector-grid a{display:flex;flex-direction:column;gap:16px;min-height:232px;height:100%;padding:26px;background:#171a1f;border:1px solid #34383f;border-radius:6px;text-decoration:none}.hc .hc-sector-grid a>svg{color:#ff986a;flex-shrink:0}.hc .hc-sector-grid h3{font-size:19px;line-height:1.7}.hc .hc-sector-grid p{font-size:14px;line-height:1.9;color:#bfc4cd}.hc .hc-sector-grid__arrow{margin-top:auto;align-self:flex-end}.hc .hc-sector-grid a:hover{border-color:#ff986a;background:#1c2027}
.hc .hc-clients{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px}.hc .hc-client-card{min-width:0;height:100%;padding:28px;gap:18px}.hc .hc-client-card__logo{height:96px;justify-content:flex-start}.hc .hc-client-card__logo img{width:100%;height:96px;max-width:280px;object-fit:contain;object-position:center}.hc .hc-client-card__desc{font-size:14px;line-height:1.9;color:#bfc4cd}.hc .hc-client-card__short{font-size:13px;line-height:1.8;color:#ff986a}.hc .hc-concept-note{max-width:920px;margin-top:28px;padding-inline-start:20px;border-inline-start:3px solid #ff986a;font-size:14px;line-height:1.9;color:#c0c5ce}.hc .hc-concept-opening{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:80px;margin-top:38px}.hc .hc-concept-opening h1{margin-block:22px}.hc .hc-concept-opening__brand{display:flex;flex-direction:column;align-items:center;gap:40px;padding:48px}.hc .hc-concept-opening__brand img{width:100%;max-width:360px;height:auto}.hc .hc-concept-opening__brand>svg{color:#ff986a}.hc .hc-concept-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}.hc .hc-deliverables--single{grid-template-columns:1fr}.hc .hc-concept-story__image{margin:0}.hc .hc-concept-story__image img{width:100%;height:auto;border-radius:6px}.hc .hc-project--content .hc-project__image img{aspect-ratio:3/2}.hc .hc-project-grid:has(>.hc-project:only-child){grid-template-columns:minmax(0,1000px)}
@media(max-width:1100px){.hc .hc-clients,.hc .hc-sector-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hc .hc-page-hero__layout{gap:36px}.hc .hc-concept-opening{gap:40px}}
@media(max-width:767px){.hc .hc-head{gap:18px}.hc .hc-split,.hc .hc-page-hero__layout,.hc .hc-service-opening__layout,.hc .hc-concept-opening,.hc .hc-concept-story{grid-template-columns:1fr;gap:32px}.hc .hc-page-art{min-height:0}.hc .hc-page-art img{width:190px}.hc .hc-industry-band__opening{grid-template-columns:1fr;gap:24px}.hc .hc-industry-band__mascot{width:140px;justify-self:center}.hc .hc-sector-grid,.hc .hc-clients{grid-template-columns:1fr}.hc .hc-sector-grid a{min-height:200px;padding:24px}.hc .hc-concept-opening__brand{padding:20px}.hc .hc-service-art img{max-height:260px}.hc .hc-client-card{padding:24px}.hc .hc-service-opening__layout{margin-top:28px}}
@media(prefers-reduced-motion:reduce){.hc-work-story__visual img,.hc-capability{transition:none}.hc-work-story__visual:hover img{transform:none}}

/* ===== mobile.css ===== */
/* Responsive navigation and compact, touch-first agency pages. */
.hc .hc-header-logo--compact,.hc .hc-footer-logo--compact{display:none}
.hc .hc-drawer{inset:0;z-index:150;padding:0 24px calc(28px + env(safe-area-inset-bottom));background:#0b0c0e;overscroll-behavior:contain}
.hc-drawer__top{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;padding-top:env(safe-area-inset-top);margin-bottom:12px;background:#0b0c0e;z-index:1}
.hc .hc-drawer__top .hc-logo{width:160px;height:34px}
.hc .hc-drawer__list{gap:0;margin:0}
.hc-drawer__list>li{border-bottom:1px solid #2b2e34}
.hc .hc-drawer__link,.hc-drawer__group>summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding-block:12px;font-family:var(--font-body);font-size:19px;font-weight:var(--fw-semibold);line-height:1.5;color:#f7f8fa;text-decoration:none;cursor:pointer}
.hc-drawer__link[aria-current]{color:#ff986a}
.hc-drawer__group>summary{list-style:none;gap:16px}
.hc-drawer__group>summary::-webkit-details-marker{display:none}
.hc-drawer__group>summary>svg{flex:none;transition:transform 180ms}
.hc-drawer__group[open]>summary>svg{transform:rotate(180deg)}
.hc-drawer__children{list-style:none;padding:0 0 12px 0;margin:0 0 10px;padding-inline-start:14px;border-inline-start:1px solid #464b54}
.hc-drawer__children a{display:flex;gap:12px;align-items:center;min-height:48px;padding-block:10px;color:#c9cdd5;font-size:15px;line-height:1.7;text-decoration:none}
.hc-drawer__children svg{flex:none;color:#ff986a}
.hc-drawer__utility{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:20px}
.hc-drawer__utility a{display:flex;align-items:center;min-height:44px;color:#bec1c8;font-size:14px;text-decoration:none}
.hc .hc-drawer>.hc-btn{width:100%;min-height:48px;margin-top:22px}
.hc-client-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px}
.hc-client-toolbar__select{display:flex;align-items:center;gap:12px;min-width:0;width:min(360px,100%);color:#ff986a}
.hc-client-toolbar__select>svg{flex:none}
.hc .hc-client-toolbar .hc-select{font-size:16px;min-height:48px;width:100%;min-width:0}
.hc-client-toolbar output{flex:none;font-size:14px;color:#bec1c8}
.hc-client-toolbar[hidden],.hc-clients>[hidden],.hc-drawer[hidden]{display:none}
.hc .hc-dialog__close{position:absolute;inset-inline-end:16px;top:16px;width:44px;height:44px}
.hc .hc-dialog__title{padding-inline-end:42px}
@media(max-width:1179px){
  .hc{--header-h:68px}
  .hc .hc-header__inner{justify-content:space-between;gap:12px}
  .hc .hc-header__tools{margin-inline-start:auto;gap:8px}
  .hc .hc-header-logo--full{display:none}
  .hc .hc-header-logo--compact{display:block;width:160px;height:34px}
  .hc .hc-lang,.hc .hc-nav-toggle{min-width:44px;height:44px}
}
@media(max-width:767px){
  .hc .hc-section,.hc .hc-section--lg{padding-block:44px}
  .hc .hc-h1,.hc .hc-head__title{font-size:30px;line-height:1.45}
  .hc .hc-h2{font-size:28px;line-height:1.5}
  .hc .hc-h3{font-size:22px;line-height:1.5}
  .hc .hc-head{gap:16px}
  .hc .hc-lead{font-size:16px;line-height:1.9}
  .hc .hc-page-hero{padding-block:34px 28px}
  .hc .hc-page-hero__layout{display:block;position:relative}
  .hc .hc-page-hero__layout .hc-head__title{padding-inline-end:82px}
  .hc .hc-page-art{position:absolute;inset-block-start:26px;inset-inline-end:var(--gutter);min-height:0;width:68px}
  .hc .hc-page-art img{width:68px}
  .hc .hc-clients-index{padding-top:32px}
  .hc .hc-concept-note{font-size:13px;line-height:1.85;margin-top:18px;padding-inline-start:12px;border-inline-start-width:2px}
  .hc-client-toolbar{gap:12px;margin-top:22px}
  .hc-client-toolbar__select{gap:8px;width:auto;flex:1}
  .hc-client-toolbar output{font-size:13px}
  .hc .hc-clients{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
  .hc .hc-client-card{padding:16px;gap:10px;min-height:196px;border-radius:6px}
  .hc .hc-client-card__logo{height:64px;justify-content:center}
  .hc .hc-client-card__logo img{height:64px;width:100%;max-width:100%}
  .hc .hc-client-card__sector{font-size:13px;line-height:1.7;min-height:44px;overflow-wrap:anywhere}
  .hc .hc-client-card__desc,.hc .hc-client-card__short{display:none}
  .hc .hc-client-card__go{font-size:13px;min-height:32px;padding-top:0;line-height:1.6}
  .hc .hc-work-nav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;max-width:100%;gap:20px;padding-block:10px;scrollbar-width:thin}
  .hc .hc-work-nav a{flex:none;white-space:nowrap;font-size:14px;min-height:48px}
  .hc .hc-project-grid{gap:28px}
  .hc .hc-project__copy{padding-block:18px}
  .hc .hc-project__copy h3{font-size:22px;line-height:1.6}
  .hc .hc-project__expand{width:44px;height:44px}
  .hc .hc-service-opening__layout{gap:28px;margin-top:24px}
  .hc .hc-service-fit{padding-top:20px}
  .hc .hc-service-fit p{font-size:16px;line-height:1.9}
  .hc .hc-service-art--mascot img{width:150px;max-height:170px}
  .hc .hc-deliverables{margin-top:28px}
  .hc .hc-deliverables li{gap:16px;padding-block:22px}
  .hc .hc-deliverables h3{font-size:19px;line-height:1.6}
  .hc .hc-sector-grid a{min-height:176px;padding:22px;gap:12px}
  .hc .hc-industry-band__opening{position:relative;display:block;margin-bottom:28px}
  .hc .hc-industry-band__opening h2{padding-inline-end:76px}
  .hc .hc-industry-band__mascot{position:absolute;inset-inline-end:0;inset-block-start:34px;width:64px}
  .hc .hc-hero--top{padding-block:32px 44px}
  .hc .hc-hero--top .hc-hero__title{font-size:38px;line-height:1.15;margin-block:18px}
  .hc .hc-hero__statement{font-size:22px;line-height:1.65}
  .hc .hc-hero--top .hc-hero__actions{gap:12px;margin-top:24px}
  .hc .hc-hero--top .hc-hero__actions>.hc-btn{width:100%;min-height:48px}
  .hc .hc-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .hc .hc-footer-logo--full{display:none}
  .hc .hc-footer-logo--compact{display:block;width:160px;height:34px}
  .hc-footer__grid>div{min-width:0}
  .hc-footer__grid>div:first-child,.hc-footer__grid>div:last-child{grid-column:1/-1}
  .hc .hc-footer__list{gap:0}
  .hc .hc-footer__link{display:inline-flex;align-items:center;min-height:44px;max-width:100%;font-size:14px;line-height:1.7;overflow-wrap:anywhere}
  .hc .hc-footer__grid>div:last-child .hc-footer__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
  .hc-footer__grid>div:last-child .hc-footer__list>li:nth-child(-n+3){grid-column:1/-1}
  .hc .hc-journey__stage{margin-top:28px}
  .hc .hc-journey__steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .hc .hc-journey__stop{grid-template-columns:minmax(0,1fr) 28px;grid-template-rows:76px auto 1fr;grid-template-areas:"figure number" "title title" "desc desc";row-gap:8px;padding-top:14px;border-top:1px solid #2b2e34;opacity:1;transform:none}
  .hc .hc-journey__figure{grid-area:figure;width:64px;max-width:64px;height:76px;object-fit:contain;align-self:center;filter:none}
  .hc .hc-step__n{grid-area:number;align-self:center;text-align:end}
  .hc .hc-step__name{grid-area:title;font-size:18px;font-weight:var(--fw-semibold);line-height:1.6;margin:0}
  .hc .hc-step__desc{grid-area:desc;font-size:16px;line-height:1.85;margin:0}
  .hc .hc-journey__mouth{display:none}
  .hc .hc-input,.hc .hc-select,.hc .hc-textarea{font-size:16px;min-height:48px}
  .hc .hc-dialog{padding:16px}
  .hc .hc-dialog__panel{padding:24px 20px;max-height:calc(100dvh - 32px);overscroll-behavior:contain}
  .hc .hc-dialog__title{font-size:22px;line-height:1.6;padding-inline-end:38px}
}
@media(max-width:359px){
  .hc .hc-step__name{font-size:16px}
  .hc .hc-header-logo--compact{width:148px}
  .hc .hc-client-card{padding:12px;min-height:190px}
  .hc .hc-client-card__go{font-size:12px;gap:4px}
  .hc .hc-hero--top .hc-hero__title{font-size:34px}
  .hc .hc-page-hero__layout .hc-head__title{padding-inline-end:66px;font-size:28px}
  .hc .hc-page-art,.hc .hc-page-art img{width:54px}
}

/* Full-viewport artwork with a stable toolbar and independently pannable image. */
.hc .hc-viewer:not([open]){display:none}
.hc .hc-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr);inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:0;background:#0b0c0e;color:#f7f8fa;overflow:hidden}
.hc-viewer::backdrop{background:rgba(0,0,0,.92)}
.hc-viewer__toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(12px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));border-bottom:1px solid #34383f}
.hc-viewer__count{font-size:14px;line-height:1.8;font-variant-numeric:tabular-nums;white-space:nowrap;unicode-bidi:isolate}
.hc-viewer__controls{display:flex;gap:8px}
.hc .hc-viewer .hc-icon-btn{width:44px;height:44px;flex:none;color:#f7f8fa;border:1px solid #464b54;border-radius:4px}
.hc .hc-viewer .hc-icon-btn:hover,.hc .hc-viewer .hc-icon-btn[aria-pressed='true']{color:#ff986a;background:#202329;border-color:#ff986a}
.hc .hc-viewer .hc-icon-btn:disabled{opacity:.4;cursor:wait}
.hc-viewer__zoom-out,.hc-viewer__zoom[aria-pressed='true'] .hc-viewer__zoom-in{display:none}
.hc-viewer__zoom[aria-pressed='true'] .hc-viewer__zoom-out{display:block}
.hc-viewer__figure{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;margin:0}
.hc-viewer__stage{min-height:0;display:grid;place-items:center;overflow:auto;padding:24px;overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.hc-viewer__stage img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.hc-viewer__stage img[hidden],.hc-viewer__error[hidden]{display:none}
.hc-viewer__stage[aria-busy='true'] img{opacity:.35}
.hc-viewer__stage.is-zoomed{display:block;place-items:start;padding:0;direction:ltr;text-align:start;touch-action:pan-x pan-y pinch-zoom}
.hc-viewer__stage.is-zoomed img{width:max(100%,var(--image-width));height:auto;max-width:none;max-height:none}
.hc .hc-viewer__caption{margin:0;padding:18px max(24px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));border-top:1px solid #34383f;max-height:32dvh;overflow:auto}
.hc-viewer__caption h2{font-family:var(--font-ui-heading);font-size:20px;font-weight:var(--fw-semibold);line-height:1.6;margin:0;color:#f7f8fa;overflow-wrap:anywhere}
.hc-viewer__caption p{font-size:14px;line-height:1.9;color:#ff986a;margin:8px 0 0}
@media(max-width:767px){.hc-viewer__toolbar{gap:8px;padding-inline:12px}.hc-viewer__controls{gap:8px}.hc-viewer__stage{padding:12px}.hc .hc-viewer__caption{padding-inline:20px}.hc-viewer__caption h2{font-size:18px}}

/* ===== project-tools.css ===== */
.hc-tool-page .hc-section-heading{max-width:850px}
.hc-finder,.hc-brief-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr);gap:56px;align-items:start;margin-top:40px}
.hc-finder fieldset,.hc-project-brief fieldset{min-width:0;border:0;padding:0;margin:0 0 28px}
.hc-finder legend,.hc-project-brief legend{font-size:24px;font-weight:700;line-height:1.5;margin-bottom:24px;max-width:100%}
.hc-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hc-choice{display:flex;align-items:center;gap:12px;border:1px solid var(--border-subtle);padding:16px;cursor:pointer;min-height:76px;border-radius:4px}
.hc-choice input{accent-color:var(--accent);flex-shrink:0;width:18px;height:18px}
.hc-choice span{display:flex;align-items:center;gap:12px;line-height:1.6;overflow-wrap:anywhere}
.hc-choice svg{width:22px;height:22px;flex-shrink:0;color:var(--accent)}
.hc-choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.hc-choice:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.hc-tool-progress{display:block;width:100%;height:4px;appearance:none;border:0;margin:16px 0 28px;background:var(--border-subtle)}
.hc-tool-progress::-webkit-progress-bar{background:var(--border-subtle)}
.hc-tool-progress::-webkit-progress-value{background:var(--accent)}
.hc-tool-progress::-moz-progress-bar{background:var(--accent)}
.hc-tool-actions,.hc-tool-actions>[data-brief-controls]{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hc-finder__result ol{list-style:none;margin:24px 0;padding:0;border-top:1px solid var(--border-subtle)}
.hc-finder__result li{padding:20px 0;border-bottom:1px solid var(--border-subtle);display:grid;gap:10px}
.hc-finder__result li a{font-size:22px;font-weight:700;line-height:1.5;overflow-wrap:anywhere}
.hc-guide-scene{position:sticky;top:120px;aspect-ratio:1/1;width:100%;min-width:0}
.hc-guide-scene img,.hc-guide-scene canvas{width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
.hc-finder-band .hc-container{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:48px;align-items:center}
.hc-finder-band img{width:220px;height:260px;object-fit:contain}
.hc-compare{--split:50%;margin:32px 0;max-width:1040px}
.hc-compare__images{aspect-ratio:3/2;position:relative;overflow:hidden;background:var(--hc-paper-200)}
.hc-compare__images>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-compare__after{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.hc-compare__label{position:absolute;top:16px;max-width:42%;background:var(--hc-ink-900);color:var(--hc-white);font-size:13px;line-height:1.7;padding:8px 12px;border-radius:4px}
.hc-compare__label--before{right:16px}.hc-compare__label--after{left:16px}
.hc-compare__divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:var(--hc-white);transform:translateX(-50%);display:flex;align-items:center;justify-content:center;pointer-events:none}
.hc-compare__divider svg{background:var(--hc-ink-900);color:var(--hc-white);min-width:42px;height:42px;padding:8px;border-radius:4px}
.hc-compare__range{display:block;width:100%;margin:12px 0 0;accent-color:var(--accent);height:32px;cursor:ew-resize}
.hc-decision-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:32px 0}
.hc-decision-grid article{border-top:1px solid var(--border-subtle);padding-top:20px;min-width:0}
.hc-decision-grid h3{font-size:21px;line-height:1.55;margin-bottom:12px}.hc-decision-grid p{line-height:1.9}
.hc-project-brief .hc-field{margin:0 0 20px}
.hc-brief-review dl{margin:0}.hc-brief-review dl>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--border-subtle)}
.hc-brief-review dt{color:var(--text-muted)}.hc-brief-review dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
.hc-brief-aside{padding-inline-start:32px;border-inline-start:1px solid var(--border-subtle)}
.hc-brief-aside img{display:block;width:100%;max-height:280px;object-fit:contain;margin-bottom:24px}
.hc-brief-aside ol{padding-inline-start:22px;line-height:2;margin:24px 0}
.hc-case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:32px}
@media(max-width:767px){
 .hc-finder,.hc-brief-layout{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:24px}
 .hc-guide-scene{position:relative;top:auto;width:160px;height:160px;aspect-ratio:auto;justify-self:center;grid-row:1}
 .hc-finder legend,.hc-project-brief legend{font-size:21px;margin-bottom:18px}
 .hc-choice-grid{gap:10px}.hc-choice{padding:12px;min-height:80px;gap:8px;font-size:14px}.hc-choice span{gap:8px}.hc-choice svg{width:18px;height:18px}
 .hc-finder__result li a{font-size:20px}
 .hc-tool-actions .hc-btn{min-height:48px}
 .hc-finder-band .hc-container{grid-template-columns:minmax(0,1fr) 90px;gap:12px}.hc-finder-band img{width:90px;height:140px}
 .hc-finder-band .hc-h2{font-size:28px;line-height:1.5}
 .hc-compare__label{top:10px;font-size:11px;padding:6px 8px}.hc-compare__label--before{right:8px}.hc-compare__label--after{left:8px}
 .hc-decision-grid,.hc-case-gallery{grid-template-columns:minmax(0,1fr);gap:20px}
 .hc-brief-review dl>div{grid-template-columns:minmax(0,1fr);gap:8px}
 .hc-brief-aside{border:0;border-top:1px solid var(--border-subtle);padding:28px 0 0;display:none}
}

/* ===== careers.css ===== */
/* Recruitment shares the brand type and ground tokens with the rest of the site. */
.hc .hc-careers-hero{padding-block:60px 48px}
.hc-careers-hero__layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(180px,.65fr);gap:64px;align-items:center}
.hc-careers-hero h1{max-width:760px;margin-block:18px 22px}
.hc-careers-hero .hc-lead{max-width:720px;font-size:17px}
.hc-careers-hero__art{display:flex;justify-content:center}
.hc-careers-hero__art img{width:min(100%,260px);height:auto;object-fit:contain}
.hc-careers-hero .hc-text-link{margin-top:18px}
.hc .hc-careers-directory{padding-block:48px 72px;scroll-margin-top:100px}
.hc-careers-bar{display:flex;align-items:center;justify-content:space-between;gap:24px}
.hc-careers-bar h2{font-size:32px;line-height:1.5;margin:0}
.hc-careers-count{margin:0;flex-shrink:0;font-size:14px;color:var(--text-muted)}
.hc-careers-count strong{font-size:28px;color:var(--text-accent);margin-inline-start:8px}
.hc-careers-preview{font-size:13px;line-height:1.9;color:var(--text-muted);border-inline-start:2px solid var(--accent);padding-inline-start:14px;margin-block:20px;max-width:900px}
.hc-careers-filters{display:grid;grid-template-columns:minmax(200px,1.3fr) minmax(180px,1fr) auto auto;align-items:end;gap:20px;margin-block:32px}
.hc-careers-filters label{display:grid;gap:10px;min-width:0;font-size:13px;color:var(--text-body)}
.hc-careers-filters :is(input,select){font:inherit;font-size:15px;min-height:48px;min-width:0;width:100%;padding:10px 14px;background:var(--surface-card);color:var(--text-primary);border:1px solid var(--border-strong);border-radius:4px}
.hc-careers-search{display:flex;align-items:center;position:relative}
.hc-careers-search>svg{position:absolute;inset-inline-start:14px;pointer-events:none;color:var(--text-muted)}
.hc-careers-search input{padding-inline-start:44px}
.hc-careers-filters .hc-btn{min-height:48px}
.hc-careers-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:42px;align-items:start}
.hc-careers-list{min-width:0}
.hc-job-grid{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hc-job-grid>li{min-width:0}
.hc-job-card{display:flex;flex-direction:column;min-height:182px;height:100%;padding:22px 20px;gap:16px;color:var(--text-primary);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:6px;text-decoration:none;transition:background 160ms,border-color 160ms}
.hc-job-card:hover,.hc-job-card[aria-current]{background:var(--accent-soft);border-color:var(--accent)}
.hc-job-card__department{display:flex;gap:8px;align-items:center;color:var(--text-accent);font-size:12px;line-height:1.8;margin:0}
.hc-job-card__department svg{flex:0 0 auto}
.hc-job-card h3{font-family:var(--font-body);font-size:18px;font-weight:700;line-height:1.65;margin:0;overflow-wrap:break-word}
.hc-job-card__footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-muted);gap:12px}
.hc-job-card__footer svg{color:var(--text-accent);flex-shrink:0}
.hc-job-panel{position:sticky;top:calc(var(--header-h) + 24px);max-height:calc(100svh - var(--header-h) - 48px);overflow-y:auto;overscroll-behavior:contain;padding-inline-start:32px;padding-inline-end:12px;border-inline-start:1px solid var(--border-strong);scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.hc-job-detail__title{font-family:var(--font-body);font-size:26px;line-height:1.5;font-weight:700;margin-block:12px 24px}
.hc-job-detail__heading{font-family:var(--font-body);font-size:17px;line-height:1.7;font-weight:700;margin-block:22px 10px}
.hc-job-detail p,.hc-job-detail li{font-size:14px;line-height:1.9;color:var(--text-body)}
.hc-job-detail ul{padding-inline-start:22px;margin:0}
.hc-job-detail li{padding-inline-start:4px;margin-bottom:8px}
.hc-job-detail li::marker{color:var(--text-accent)}
.hc-job-detail__intro{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:18px;align-items:center}
.hc-job-detail__intro img{width:96px;height:auto;max-height:140px;object-fit:contain}
.hc-job-detail__intro .hc-job-detail__heading{margin-top:0}
.hc-job-detail p.hc-job-detail__terms{font-size:12px;color:var(--text-muted);margin-block:24px;padding-block:16px;border-block:1px solid var(--border-subtle)}
.hc-job-detail .hc-btn{width:100%;justify-content:center;white-space:normal;text-align:center}
.hc-job-detail__link{justify-content:center;width:100%;font-size:13px;margin-top:8px}
.hc-careers-empty{padding-block:32px;font-size:17px;color:var(--text-body)}
.hc-careers-process{padding:0;margin:36px 0 0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px}
.hc-careers-process li{border-block-start:1px solid var(--border-strong);padding-block-start:24px}
.hc-careers-process li>span{color:var(--text-accent);font-size:14px}
.hc-careers-process h3{font-size:21px;line-height:1.6;margin-block:16px 12px}
.hc-careers-process p{font-size:15px;line-height:1.9;margin:0;color:var(--text-body)}
.hc .hc-application-dialog{width:min(600px,calc(100% - 32px));max-width:none;max-height:calc(100svh - 32px);height:auto;padding:0;margin:auto;border:1px solid var(--border-strong);border-radius:6px;background:var(--surface-page);color:var(--text-primary);overflow-y:auto;overscroll-behavior:contain}
.hc-application-dialog:not([open]){display:none}
.hc-application-dialog::backdrop{background:rgba(0,0,0,.75)}
.hc-application-dialog__top{position:sticky;top:0;z-index:1;background:var(--surface-page);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px;border-bottom:1px solid var(--border-subtle);font-size:13px}
.hc-careers-icon{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--border-strong);background:transparent;color:var(--text-primary);border-radius:4px;cursor:pointer}
.hc-application-dialog .hc-application-form{padding:28px}
.hc-application-form h2{font-family:var(--font-body);font-size:26px;line-height:1.5;margin:0}
.hc-application-form__role{font-size:15px;color:var(--text-accent);line-height:1.8;margin-block:10px}
.hc-application-form__lead{font-size:14px;line-height:1.9;color:var(--text-body);margin-block:10px 24px}
.hc-application-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
.hc-application-field{display:block;min-width:0;font-size:13px;line-height:1.8;color:var(--text-primary)}
.hc-application-field--wide{grid-column:1/-1}
.hc-application-field :is(input,select){display:block;width:100%;min-width:0;min-height:48px;padding:11px 14px;margin-top:8px;border:1px solid var(--border-strong);border-radius:4px;background:var(--surface-card);font:inherit;font-size:16px;color:var(--text-primary)}
.hc-application-field :is(input,select):focus,.hc-careers-filters :is(input,select):focus{outline:2px solid var(--focus-ring);outline-offset:2px}
.hc-application-field [aria-invalid='true']{border-color:var(--hc-danger)}
.hc-application-optional{font-size:12px;color:var(--text-muted);font-weight:400}
.hc-application-upload{padding-top:4px}
.hc-application-upload input{padding:10px;font-size:13px;overflow:hidden}
.hc-application-upload input::file-selector-button{font:inherit;background:var(--surface-raised);color:var(--text-primary);padding:9px 12px;margin-inline-end:12px;border:1px solid var(--border-strong);border-radius:4px;cursor:pointer}
.hc-application-consent{display:flex;gap:12px;font-size:12px;line-height:1.9;margin-block:24px;color:var(--text-body)}
.hc-application-consent input{width:20px;height:20px;flex:0 0 auto;margin-top:3px;accent-color:var(--accent)}
.hc-application-consent a{color:var(--text-accent)}
.hc-application-error{display:block;font-size:12px;line-height:1.8;color:var(--hc-danger);margin-block:6px 0}
.hc-application-form .hc-btn{width:100%;justify-content:center;min-height:50px;white-space:normal;text-align:center}
.hc-application-form .hc-btn:disabled{opacity:.65;cursor:wait}
.hc-application-feedback{padding:16px;border-inline-start:3px solid var(--accent);font-size:14px;line-height:1.9;color:var(--text-primary);margin-top:20px;overflow-wrap:break-word}
.hc .hc-application-dialog.is-complete{width:min(480px,calc(100% - 32px));height:fit-content;min-height:0}
.hc-application-form.is-complete{text-align:center;min-height:0}
.hc-application-form.is-complete .hc-application-form__role{margin-block:8px 0;overflow-wrap:anywhere}
.hc-application-success{display:grid;justify-items:center;gap:20px;padding-top:20px}
.hc-application-success img{width:130px;height:190px;object-fit:contain}
.hc-application-success p{font-size:15px;line-height:1.9;color:var(--text-body);margin:0;max-width:38ch;overflow-wrap:break-word}
.hc-application-success .hc-btn{max-width:260px}
.hc-job-page h1{font-size:40px;line-height:1.5;margin-block:24px;max-width:1000px}
.hc-job-page__layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;margin-top:40px}
.hc-job-page__application{border-inline-start:1px solid var(--border-strong);padding-inline-start:40px;scroll-margin-top:calc(var(--header-h) + 24px);min-width:0}
.hc-job-page .hc-job-detail__intro{grid-template-columns:minmax(0,1fr) 140px}
.hc-job-page .hc-job-detail__intro img{width:140px;max-height:200px}
.hc-job-page .hc-job-detail :is(p,li){font-size:16px}
.hc [data-job-card][hidden],.hc [data-job-panel][hidden],.hc [data-job-empty][hidden],.hc .hc-application-error[hidden],.hc .hc-application-feedback[hidden],.hc [data-application-fields][hidden],.hc [data-application-intro][hidden],.hc [data-application-success][hidden]{display:none!important}
[dir='rtl'] .hc-careers-hero .hc-text-link svg,[dir='rtl'] .hc-job-detail .hc-btn svg,[dir='rtl'] .hc-job-page>.hc-container>.hc-text-link svg,[dir='rtl'] .hc-application-form .hc-btn svg{transform:scaleX(-1)}
[dir='rtl'] .hc-application-success .hc-btn svg{transform:none}
@media(max-width:1100px){.hc-careers-layout{gap:26px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.hc-job-panel{padding-inline-start:22px}.hc-job-card{padding:18px 16px}.hc-job-card h3{font-size:16px}.hc-job-page__layout{gap:40px}.hc-job-page__application{padding-inline-start:28px}.hc-careers-filters{gap:14px}}
@media(max-width:767px){
  .hc .hc-careers-hero{padding-block:32px}.hc-careers-hero__layout{grid-template-columns:minmax(0,1fr) 100px;gap:12px 14px;align-items:center}.hc-careers-hero__layout>div:first-child{display:contents}.hc-careers-hero .hc-eyebrow{grid-column:1;grid-row:1;margin:0;font-size:11px}.hc-careers-hero h1{grid-column:1;grid-row:2;font-size:30px;line-height:1.55;margin:0}.hc-careers-hero .hc-lead{grid-column:1/-1;font-size:15px;line-height:1.9;margin-block:12px 0}.hc-careers-hero__art{grid-column:2;grid-row:1/3}.hc-careers-hero__art img{width:100px}.hc-careers-hero .hc-text-link{grid-column:1/-1;margin-top:4px;font-size:14px}
  .hc .hc-careers-directory{padding-block:32px 48px}.hc-careers-bar{gap:12px;align-items:start}.hc-careers-bar h2{font-size:24px}.hc-careers-count{font-size:12px;white-space:nowrap;padding-top:2px}.hc-careers-count strong{font-size:24px;margin-inline-end:4px}.hc-careers-preview{font-size:12px;margin-block:16px;line-height:1.85}.hc-careers-filters{grid-template-columns:minmax(0,1fr) auto;gap:16px;margin-block:24px}.hc-careers-filters label{grid-column:1/-1}.hc-careers-filters .hc-text-link{justify-self:end;font-size:13px}.hc-careers-filters label{font-size:12px}
  .hc-careers-layout{display:block}.hc-job-panel{display:none}.hc-job-grid{grid-template-columns:1fr;gap:12px}.hc-job-card{min-height:148px;padding:20px;gap:12px}.hc-job-card h3{font-size:19px;line-height:1.7}.hc-job-card__department{font-size:12px}.hc-job-card[aria-current]{background:var(--surface-card);border-color:var(--border-subtle)}
  .hc-careers-process{grid-template-columns:1fr;gap:28px}.hc-careers-process h3{font-size:20px}.hc-careers-process p{font-size:14px}
  .hc-job-page h1{font-size:29px}.hc-job-page__layout{grid-template-columns:1fr;gap:40px;margin-top:28px}.hc-job-page__application{border-inline-start:0;border-block-start:1px solid var(--border-strong);padding-inline-start:0;padding-block-start:32px}.hc-job-page .hc-job-detail__intro{grid-template-columns:minmax(0,1fr) 90px}.hc-job-page .hc-job-detail__intro img{width:90px}.hc-job-page .hc-job-detail :is(p,li){font-size:15px}
  .hc-application-fields{grid-template-columns:1fr;gap:18px}.hc-application-field{grid-column:1}.hc .hc-application-dialog{width:calc(100% - 20px);max-height:calc(100svh - 20px)}.hc-application-dialog .hc-application-form{padding:22px 18px}.hc-application-dialog__top{padding:12px 18px}.hc-application-form h2{font-size:24px}
}
@media(prefers-reduced-motion:reduce){.hc-job-card{transition:none}}