/* ============================================================================================================
   TECHRISH – styles.css (the only stylesheet; every page loads this file)

   1. GLOBAL            tokens, base, helpers
   2. COMMON COMPONENTS buttons, navigation (dark + light), mega menu, WhatsApp button, CTA, footer, light hero,
                        section label, shared responsive rules
   3. PAGES             one section per page, in this order: Services, Home, About, Products, Life, Careers (+ job
                        detail), Contact, Blog, Testimonials, Works, Project detail, Industries, Product landing (Trixio, Sharepay), Service detail (services/*), Blog post (blog/*), Legal (privacy policy), 404

   Page sections are scoped with :where(.<page>-page) – the class on that page's <body>. :where() adds no
   specificity, so each page's own cascade is exactly what it was in its separate file, while pages can no longer
   style each other. Rules before the PAGES part apply everywhere.
   Desktop sizes are Figma px × --u (one Figma pixel = 100vw / 1920) with minimums. Type sizes come from the
   type-scale tokens (--fs-h1 … --fs-caption) defined on :root and documented in TYPOGRAPHY.
   ============================================================================================================ */
/* ---------- 1. GLOBAL: tokens and base ---------- */
:root {
    --ink: #39332d;
    --black: #000;
    --panel: #141615;
    --teal: #2fd4bb;
    --light-bg: #f7f7f8;
    --font-head: 'Comfortaa', system-ui, sans-serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-inter: 'Inter', system-ui, sans-serif;
    --gutter: clamp(20px, 6.25vw, 120px);
    --grad-brand: linear-gradient(90deg, #ff6961 0%, #f1de56 50%, #40c5e4 75%, #77dd77 100%);
    /* Techrish gradient (Home – Improved: hero heading, button border, Execute) */
    --grad-techrish: linear-gradient(90deg, #ef4136 0%, #ffc20e 35%, #8dc63f 65%, #00aeef 100%);
    /* ---- type scale (see TYPOGRAPHY): desktop sizes are the Figma px at 1920 (as vw) with a minimum; the mobile
     queries right after this block swap the heading sizes for fluid ones. Pages pick a role with var(--fs-…). ---- */
    --fs-display: max(56px, 7.0833vw);
    /* 136 – one-off display title */
    --fs-h1: max(44px, 5.4167vw);
    /* 104 – page titles */
    --fs-h2: max(34px, 3.75vw);
    /*  72 – section titles */
    --fs-h3: max(26px, 2.5vw);
    /*  48 – feature and row titles */
    --fs-h4: max(24px, 1.875vw);
    /*  36 – card titles */
    --fs-h5: max(22px, 1.5625vw);
    /*  30 – small card titles */
    --fs-h6: max(18px, 1.25vw);
    /*  24 – list and post titles */
    --fs-lead-lg: max(18px, 1.3542vw);
    /*  26 – large intro copy */
    --fs-lead: max(17px, 1.1458vw);
    /*  22 – intro paragraphs */
    --fs-body-lg: max(16px, 1.0417vw);
    /*  20 – large body copy */
    --fs-body: max(15px, .9375vw);
    /*  18 – body copy */
    --fs-body-sm: max(14px, .8333vw);
    /*  16 – small body copy */
    --fs-label: max(13px, .8333vw);
    /*  16 – uppercase labels / eyebrows */
    --fs-caption: max(12px, .7292vw);
    /*  14 – captions and meta */
    --lh-h1: .98;
    --lh-h2: 1.05;
    --lh-h3: 1.1;
    --lh-h4: 1.15;
    --lh-h5: 1.2;
    --lh-h6: 1.3;
    --lh-body: 1.5;
    --ls-h1: -.04em;
    --ls-h2: -.03em;
    --ls-h3: -.02em;
    --ls-h4: -.02em;
    --ls-h5: -.01em;
    --ls-h6: -.01em;
}

/* type scale on narrow, portrait or short screens (the same query every page uses for its mobile layout) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    :root {
        --fs-display: clamp(48px, 14vw, 96px);
        --fs-h1: clamp(38px, 9.4vw, 72px);
        --fs-h2: clamp(32px, 6vw, 48px);
        --fs-h3: clamp(24px, 4.8vw, 34px);
        --fs-h4: clamp(24px, 5.6vw, 30px);
        --fs-h5: clamp(20px, 4.6vw, 26px);
        --fs-h6: 20px;
    }
}

@media (max-width: 560px) {
    :root {
        --fs-h1: clamp(34px, 10.4vw, 60px);
    }
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
}

/* in-page links glide via script.js; a CSS smooth root animates EVERY programmatic scroll (GSAP pin refreshes, snap-backs) and makes the scroll-driven sections jitter */
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1, h2, h3, p {
    margin: 0;
}

/* ---------- TYPOGRAPHY: headings and text roles ----------
   Headings are Inter 600; the size, line-height and letter-spacing of each level come from the tokens above, so a
   bare <h1>…<h6> is already right and page rules only change the level (e.g. a card's h3 using --fs-h5).
   Text roles: --fs-lead (intro copy), --fs-body-lg / --fs-body / --fs-body-sm (copy), --fs-label (uppercase labels),
   --fs-caption (meta); copy uses line-height var(--lh-body). */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-inter);
    font-weight: 600;
}

h1 {
    font-size: var(--fs-h1);
    font-weight: 600;
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
}

h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

h3 {
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
}

h4 {
    font-size: var(--fs-h5);
    font-weight: 600;
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
}

h5 {
    font-size: var(--fs-h6);
    font-weight: 600;
    line-height: var(--lh-h6);
    letter-spacing: var(--ls-h6);
}

h6 {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label);
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.eyebrow {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: clamp(14px, 1.25vw, 24px);
    line-height: 16px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(57, 51, 45, .75);
    --rule-c: rgba(57, 51, 45, .4);
}

.eyebrow--light {
    color: rgba(255, 255, 255, .75);
    --rule-c: rgba(255, 255, 255, .4);
}

/* divider line after the label (left-aligned section heads) */
.eyebrow--rule {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* the rule shrinks (down to nothing) on narrow screens instead of pushing past the edge */
.eyebrow--rule::after {
    content: "";
    flex: 0 1 var(--rule-w, 200px);
    min-width: 0;
    height: 1px;
    background: var(--rule-c);
}

/* forced line breaks that match the Figma desktop copy; dropped once the text wraps naturally */
@media (max-width: 1200px) {
    .br-lg {
        display: none;
    }
}

/* crop helper: reproduces Figma's cropped image fills */
.crop {
    position: relative;
    overflow: hidden;
}

.crop > img {
    position: absolute;
    max-width: none;
    width: var(--w);
    height: var(--h);
    left: var(--l);
    top: var(--t);
}

/* ---------- BUTTONS ---------- */
/* pill buttons (Figma "Button": Light / Dark, Default / Hover) */
.pbtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 20px 32px;
    border-radius: 999px;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: clamp(16px, .94vw, 18px);
    line-height: normal;
    white-space: nowrap;
    transition: background-color .2s ease, gap .2s ease;
}

.pbtn span {
    display: inline-block;
    transition: transform 0.25s ease;
}

.pbtn:hover span {
    transform: translateX(3px);
}

.pbtn--light {
    background: #fff;
    color: #09090b;
}

.pbtn--light:hover, .pbtn--light:focus-visible {
    background: #e4e4e7;
}

/* dark: 2px Techrish-gradient border */
.pbtn--dark {
    --pbtn-bg: #09090b;
    color: #fff;
    border: 2px solid transparent;
    padding: 18px 30px;
    background: linear-gradient(var(--pbtn-bg), var(--pbtn-bg)) padding-box, var(--grad-techrish) border-box;
}

.pbtn--dark:hover, .pbtn--dark:focus-visible {
    --pbtn-bg: #27272a;
}

/* ---------- NAV (Figma › Navigation, 1920 × 120) ---------- */
.nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    height: clamp(88px, 6.25vw, 120px);
    display: flex;
    align-items: center;
    gap: clamp(20px, 1.875vw, 36px);
    padding: clamp(6px, .55vw, 10px) var(--gutter) 0;
    /* the row sits a little below the exact middle: more air above the logo */
}

/* keyboard users: the first tab stop jumps past the navigation to <main id="main"> */
.skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: 999px;
    background: #09090b;
    color: #fff;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 15px;
}

.skip-link:focus {
    top: 16px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* pages whose header is a normal block above the content (data-nav-class="nav--static") */
body > .nav--static {
    position: relative;
    background: #fff;
}

.nav__logo {
    display: flex;
    align-items: center;
    margin-right: auto;
}

/* flex: the image sits on the nav's centre line with no inline baseline gap */
.nav__logo img {
    width: clamp(156px, 13.4vw, 256px);
    height: auto;
    transform: translateY(-12%);
}

/* ~12% larger than the Figma 230px; lifted so the letters of the wordmark (their x-height centre is 15% below the image's box centre, the T mark rises above) sit on the nav's centre line with the links and buttons */
/* links centred on the page (Figma: x 680–1241 of 1920) */
.nav__links {
    position: absolute;
    left: calc(50% + clamp(16px, 1.4vw, 28px));
    top: calc(50% + clamp(3px, .275vw, 5px));
    transform: translate(-50%, -50%);
    /* a little right of centre, on the row's (lowered) centre line */
    display: flex;
    align-items: center;
    gap: clamp(24px, 2.29vw, 44px);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
}

.nav__links a {
    color: rgba(255, 255, 255, .72);
    transition: color .2s;
}

.nav__links a:hover, .nav__links a.is-current {
    color: #fff;
    text-decoration: underline;
    text-underline-position: from-font;
}

.nav__links a.is-current {
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Services / Products: the text is a link to the page; only the chevron button beside it opens the mega menu */
.nav__drop {
    display: inline-flex;
    align-items: center;
}

/* 28px hit area round the 9.5px chevron; the margins keep it 6px from the text and the links evenly spaced */
.nav__drop-btn {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0 -9px 0 3px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: background-color .2s ease;
}

.nav__drop-btn:hover, .nav__drop-btn:focus-visible {
    background: rgba(255, 255, 255, .16);
}

.nav__drop-btn img {
    width: 9.5px;
    height: 5.5px;
    transition: transform .2s ease;
}

.nav__drop-btn.is-up img {
    transform: rotate(180deg);
}

/* script.js raises only the chevron that opened the menu */
/* call button: an outlined circle the size of the menu button; the two sit as a pair at the right */
.nav__phone {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-right: calc(20px - clamp(20px, 1.875vw, 36px));
    /* 20px to the menu button whatever the nav gap */
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    color: #fff;
    transition: background-color .2s ease, border-color .2s ease;
}

.nav__phone .icon-phone {
    width: 22px;
    height: 22px;
}

.nav__phone:hover, .nav__phone:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .6);
}

.nav__menu {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}

.nav__menu span {
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: #09090b;
}

/* ---------- MEGA MENU (Figma "Menu – Overlay (Home, dark header)" + "Mega menu (hover categories)") ---------- */
.is-menu-open, .is-menu-open body {
    overflow: hidden;
}

.mega {
    --u: calc(100vw / 1920);
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mega[hidden] {
    display: none;
}

.mega__backdrop {
    position: fixed;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(9, 9, 11, .45);
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s ease;
}

/* header bar: the nav copy on black (Figma "dark header") */
.mega__bar {
    position: relative;
    background: #000;
}

.mega__bar .nav {
    position: relative;
}

.mega__close {
    flex: none;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.mega__close img {
    width: 56px;
    height: 56px;
}

/* panel: 1680 wide at x 120, y 112 (tucked 8px under the bar) */
.mega__panel {
    position: relative;
    margin: -8px var(--gutter) 40px;
    display: grid;
    gap: 40px;
    padding: 48px max(24px, calc(56 * var(--u))) 36px;
    border-radius: 24px;
    background: #0a0a0a;
    color: #fff;
    filter: drop-shadow(0 24px 32px rgba(0, 0, 0, .3));
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .25s ease, transform .25s ease;
}

.mega.is-open .mega__backdrop, .mega.is-open .mega__panel {
    opacity: 1;
}

.mega.is-open .mega__panel {
    transform: none;
}

.mega__cols {
    display: grid;
    grid-template-columns: minmax(260px, calc(400 * var(--u))) minmax(0, 1fr) 1px minmax(280px, calc(440 * var(--u)));
    gap: max(28px, calc(46 * var(--u)));
}

.mega__eyebrow {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 20px;
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}

/* categories: active = #1c1c1f pill with its arrow */
.mega__tabs {
    display: grid;
    gap: 6px;
    margin-top: 16px;
}

.mega__cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: max(17px, calc(21 * var(--u)));
    line-height: normal;
    color: #a1a1aa;
    transition: background-color .2s ease, color .2s ease;
}

.mega__cat span {
    font-size: 18px;
    color: #fff;
    opacity: 0;
    transition: opacity .2s ease;
}

.mega__cat.is-active {
    background: #1c1c1f;
    color: #fff;
}

.mega__cat.is-active span {
    opacity: 1;
}

.mega__cat:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* detail: title, two columns of services (4 + rest), explore link */
.mega__detail {
    display: grid;
    gap: 24px;
    align-content: start;
    justify-items: start;
}

.mega__detail[hidden] {
    display: none;
}

.mega__title {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
}

.mega__list {
    display: grid;
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: 16px 32px;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: normal;
}

.mega__list a {
    color: #d4d4d8;
    transition: color .2s ease;
}

.mega__list a:hover, .mega__list a:focus-visible {
    color: #fff;
}

.mega__explore {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: normal;
    color: #fff;
    text-decoration: underline;
    text-underline-position: from-font;
}

.mega__divider {
    background: #27272a;
}

/* products: 2 × 2 cards (215 wide) */
.mega__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.mega__product {
    position: relative;
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 18px;
    border-radius: 14px;
    background: #161618;
    transition: background-color .2s ease;
}

.mega__product:hover, .mega__product:focus-visible {
    background: #1c1c1f;
}

.mega__product b {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    color: #fff;
}

.mega__product span {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.4;
    color: #a1a1aa;
}

/* product logo: top right corner of the card, appears on hover / focus (always shown on touch screens) */
.mega__product .mega__logo {
    position: absolute;
    top: 15px;
    right: 12px;
    width: 28px;
    height: 28px;
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px) scale(.8);
    transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
}

.mega__product:hover .mega__logo, .mega__product:focus-visible .mega__logo {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    .mega__product .mega__logo {
        opacity: 1;
        transform: none;
    }
}

/* stand-in tile for a product without a logo file yet (Route): replace with an <img class="mega__logo"> */
.mega__product .mega__logo--mono {
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #27272a;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    color: #fff;
}

/* bottom: rule, company links, email / phone / Reach out */
.mega__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
    padding-top: 40px;
    border-top: 1px solid #27272a;
}

.mega__company {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 36px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: normal;
}

.mega__company a {
    color: #a1a1aa;
    transition: color .2s ease;
}

.mega__company a:hover, .mega__company a:focus-visible {
    color: #fff;
}

.mega__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
}

/* mobile layout (JS adds .is-accordion): each category's services open directly under it */
.mega.is-accordion .mega__details {
    display: none;
}

.mega.is-accordion .mega__title {
    display: none;
}

/* the category button above already names it */
.mega.is-accordion .mega__cat span {
    opacity: 1;
    color: #71717a;
    transition: transform .2s ease, color .2s ease;
}

.mega.is-accordion .mega__cat[aria-expanded="true"] {
    background: #1c1c1f;
    color: #fff;
}

.mega.is-accordion .mega__cat[aria-expanded="true"] span {
    color: #fff;
    transform: rotate(90deg);
}

.mega.is-accordion .mega__detail {
    gap: 16px;
    padding: 12px 16px 20px;
    animation: mega-expand .25s ease;
}

@keyframes mega-expand {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mega__backdrop, .mega__panel, .mega__cat, .mega__cat span {
        transition: none;
    }

    .mega.is-accordion .mega__detail {
        animation: none;
    }

    .mega__panel {
        transform: none;
    }
}

/* ---------- WHATSAPP (fixed; Figma "WhatsApp float button", Default / Hover) ---------- */
.whatsapp {
    position: fixed;
    right: 48px;
    bottom: 40px;
    z-index: 50;
    display: flex;
    align-items: center;
    padding: 18px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    box-shadow: 0 12px 32px rgba(37, 211, 102, .35);
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 18px;
    white-space: nowrap;
    transition: padding .3s ease;
}

.whatsapp img {
    width: 36px;
    height: 36px;
    flex: none;
}

/* label expands on hover (pl 18, pr 26, gap 12) */
.whatsapp__label {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width .3s ease, opacity .2s ease, margin .3s ease;
}

.whatsapp:hover, .whatsapp:focus-visible {
    padding-right: 26px;
}

.whatsapp:hover .whatsapp__label, .whatsapp:focus-visible .whatsapp__label {
    max-width: 140px;
    opacity: 1;
    margin-left: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .pbtn, .whatsapp, .whatsapp__label, .nav__phone {
        transition: none;
    }
}

/* ---------- MOBILE ACTION BAR (phones, max-width 768px): a fixed Call Us / Chat with Us bar at the bottom.
   The header phone link and the WhatsApp float are hidden there. --mbar-h is the bar's height (0 elsewhere): the body
   reserves that space below the page, and anything else pinned to the bottom (e.g. a cookie banner) should offset by
   calc(var(--mbar-h) + env(safe-area-inset-bottom)) so it sits above the bar. ---------- */
:root {
    --mbar-h: 0px;
}

.mbar {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --mbar-h: 72px;
    }

    body {
        padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px));
    }

    body:not(:has(.mbar)) {
        padding-bottom: 0;
    }

    /* pages without the shared header (the project detail overlays) have no bar */
    .nav__phone, .whatsapp {
        display: none;
    }

    .mbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        gap: 10px;
        height: calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px));
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(9, 9, 11, .96);
        border-top: 1px solid rgba(255, 255, 255, .1);
        /* no backdrop blur: a fixed blur re-renders on every scroll frame and makes phones stutter */
    }

    .mbar__btn {
        flex: 1 1 0;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        height: 52px;
        padding: 0 12px;
        border-radius: 999px;
        font-family: var(--font-inter);
        font-weight: 600;
        font-size: 16px;
        line-height: 1;
        white-space: nowrap;
        transition: background-color .2s ease, transform .15s ease;
    }

    .mbar__btn:active {
        transform: scale(.97);
    }

    .mbar__btn:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    .mbar__btn img, .mbar__btn .icon-phone {
        flex: none;
        width: 20px;
        height: 20px;
    }

    .mbar__btn--call {
        background: #fff;
        color: #09090b;
    }

    .mbar__btn--call:hover {
        background: #f4f4f5;
    }

    .mbar__btn--chat {
        background: #25d366;
        color: #fff;
    }

    .mbar__btn--chat:hover {
        background: #1ebe5b;
    }

    .mbar__btn--chat img {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 360px) {
    .cta__actions .pbtn, .cta__actions .cta__wa {
        font-size: 14px;
        padding: 0 10px;
    }

    .mbar {
        gap: 8px;
        padding-inline: 12px; }

    .mbar__btn {
        gap: 8px;
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mbar__btn {
        transition: none;
    }
}

/* ---------- CTA (Figma "Home – Improved" › CTA; card 1680 × 560) ---------- */
/* Desktop sizes are Figma px × --u (100vw / 1920) with minimums */
.cta {
    --u: calc(100vw / 1920);
    background: #fff;
    padding: calc(160 * var(--u)) var(--gutter) calc(120 * var(--u));
}

.cta__card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: calc(560 * var(--u));
    display: flex;
    align-items: center;
    padding: calc(73 * var(--u)) calc(95 * var(--u));
    background: #0a0a0a;
    border: 1px solid #27272a;
    border-radius: max(20px, calc(32 * var(--u)));
    color: #fff;
}

/* glows and the glass T on the right (Figma x 939 / 1159 / 1113 of the 1680 card) */
.cta__glow {
    position: absolute;
    z-index: -1;
    max-width: none;
    height: auto;
    pointer-events: none;
}

.cta__glow--cool {
    width: 45.24%;
    left: 55.89%;
    top: -43.04%;
}

.cta__glow--warm {
    width: 40.48%;
    left: 68.99%;
    top: 6.96%;
}

.cta__t {
    position: absolute;
    z-index: -1;
    left: 71.56%;
    top: 50%;
    transform: translateY(-50%);
    width: 17.85%;
    height: auto;
    aspect-ratio: 810 / 929;
    object-fit: contain;
    pointer-events: none;
}

/* laptops (1024-1440): the T anchors to the right edge of the card instead of the 1920 Figma offset */
@media (min-width: 901px) and (max-width: 1440px) and (orientation: landscape) {
    .cta__t {
        left: auto;
        right: 5%;
        width: 24%;
    }
}

.cta__content {
    display: grid;
    gap: 28px;
    justify-items: start;
    max-width: 58%;
}

/* stays clear of the T (x 66%) */
.cta__eyebrow {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label);
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a1a1aa;
}

.cta h2 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

.cta__copy {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: #a1a1aa;
    max-width: max(320px, calc(620 * var(--u)));
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 8px;
}

.cta__wa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 19px 30px 19px 24px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: clamp(16px, .94vw, 18px);
    line-height: normal;
    white-space: nowrap;
}

.cta__wa img {
    width: 24px;
    height: 24px;
}

/* ---------- FOOTER (Figma "Home – Improved" › Footer) ---------- */
.footer {
    --u: calc(100vw / 1920);
    background: #000;
    color: #fff;
    display: grid;
    gap: max(40px, calc(64 * var(--u)));
    padding: max(72px, calc(120 * var(--u))) var(--gutter) max(40px, calc(56 * var(--u)));
    font-family: var(--font-body);
}

.footer a {
    transition: color .2s ease;
}

/* "Services" is an h2 (the service columns under it are h3s), so the label sets its own font instead of the heading one */
.footer__eyebrow {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8b8b93;
}

/* services: five columns (310 wide, 32 apart) */
.footer__cols {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 40px 32px;
    margin-top: 32px;
}

.footer__col h3 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: max(17px, calc(20 * var(--u)));
    line-height: normal;
    letter-spacing: 0;
}

.footer__col ul {
    display: grid;
    gap: 16px;
    margin-top: 20px;
    font-size: var(--fs-body);
    line-height: normal;
}

.footer__col a {
    color: #a1a1aa;
}

.footer__col a:hover, .footer__col a:focus-visible, .footer__row a:hover, .footer__row a:focus-visible, .footer__bottom a:hover, .footer__bottom a:focus-visible {
    color: #fff;
}

/* products & company: rows of links */
.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 160px;
}

.footer__group {
    display: grid;
    gap: 18px;
}

.footer__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 36px;
    font-size: var(--fs-body);
    line-height: normal;
}

.footer__row a {
    color: #d4d4d8;
}

.footer__rule {
    height: 1px;
    margin: 0;
    border: 0;
    background: rgba(255, 255, 255, .12);
}

/* brand + contact */
.footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.footer__brand {
    display: grid;
    gap: 20px;
    justify-items: start;
}

.footer__logo {
    width: 184px;
    height: auto;
}

.footer__tagline {
    font-size: var(--fs-body-lg);
    line-height: normal;
    color: #a1a1aa;
}

/* social icons: Figma's icon boxes, 50px apart */
.footer__social {
    display: flex;
    align-items: center;
    gap: 50px;
}

.footer__social a {
    display: grid;
    place-items: center;
    width: var(--box-w);
    height: var(--box-h);
    transition: opacity .2s ease;
}

.footer__social a:hover, .footer__social a:focus-visible {
    opacity: .7;
}

.footer__social img {
    max-width: 100%;
    height: auto;
}

.footer__contact {
    display: grid;
    justify-items: end;
    text-align: right;
}

.footer__contact .footer__eyebrow {
    letter-spacing: .1em;
}

.footer__ask {
    margin-top: 8px;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
}

.footer__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.footer__pill {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 24px 10px 10px;
    border-radius: 999px;
    text-align: left;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .2);
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 20px;
    line-height: normal;
    color: #fff;
}

.footer__pill-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.footer__pill-icon img {
    width: 20px;
    height: 20px;
}

.footer__pill-text {
    display: grid;
    gap: 2px;
    white-space: nowrap;
}

.footer__pill-text small {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    color: #a1a1aa;
}

.footer__pill--light {
    background: #fff;
    border-color: #fff;
    color: #09090b;
}

.footer__pill--light .footer__pill-icon {
    background: #f4f4f5;
}

.footer__pill--light .footer__pill-text small {
    color: #71717a;
}

/* bottom bar */
.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
    font-size: var(--fs-body);
    line-height: normal;
    color: #8b8b93;
}

.footer__bottom p:last-child {
    display: flex;
    gap: 32px;
}

@media (prefers-reduced-motion: reduce) {
    .footer a, .footer__social a {
        transition: none;
    }
}

/* ---------- RESPONSIVE ---------- */
/* footer: three service columns below 1440 */
@media (max-width: 1439px) {
    .footer__cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer__links {
        column-gap: 80px;
    }
}

/* small laptops: the six links sit closer together so they stay clear of the phone number */
@media (max-width: 1360px) {
    .nav__links {
        gap: 20px;
        font-size: 15px;
    }
}

@media (max-width: 1200px) {
    .nav__links {
        display: none;
    }

    /* the menu button opens the mega menu instead */
    .mega__cols {
        grid-template-columns: minmax(240px, 34%) minmax(0, 1fr);
    }

    .mega__divider {
        display: none;
    }

    .mega__products {
        grid-column: 1 / -1;
    }

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

/* mobile layout: narrow, portrait or short screens (the home page's own mobile rules are in home.css) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    /* cta: text first, the glass T smaller at the bottom right */ .cta {
        padding: 64px var(--gutter) 72px;
    }

    .cta__card {
        display: block;
        padding: 40px 28px min(62vw, 300px);
    }

    .cta__content {
        gap: 20px;
        max-width: none;
        grid-template-columns: minmax(0, 1fr);   /* long button rows must not widen the column */
    }

    /* the two buttons share one row at the same size (the glass T sits below them) */
    .cta__actions {
        flex-wrap: nowrap;
        gap: 12px;
        align-self: stretch;
    }

    .cta__actions .pbtn, .cta__actions .cta__wa {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        gap: 8px;
        min-height: 50px;
        padding: 0 22px;
        font-size: 15px;
    }

    .cta__actions .pbtn:hover, .cta__actions .pbtn:focus-visible {
        gap: 8px;
    }

    .cta__actions .cta__wa img {
        width: 20px;
        height: 20px;
    }

    .cta__glow--cool {
        width: 110%;
        left: -5%;
        top: auto;
        bottom: -45%;
    }

    .cta__glow--warm {
        width: 90%;
        left: 20%;
        top: auto;
        bottom: -40%;
    }

    /* glass T sits bottom-centre under the buttons */
    .cta__t {
        left: 50%;
        right: auto;
        top: auto;
        bottom: 24px;
        transform: translateX(-50%);
        width: min(42vw, 200px);
        height: auto;
        aspect-ratio: 810 / 929;
    }

    /* footer: two service columns; brand and contact stacked, left-aligned */
    .footer__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;
    }

    .footer__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer__contact {
        justify-items: start;
        text-align: left;
    }

    .footer__pills {
        justify-content: flex-start;
    }

    /* mega menu: categories, then the selected category's services, then products */
    .mega__panel {
        margin-top: 8px;
        padding: 28px 20px 24px;
        gap: 28px;
    }

    .mega__cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .mega__tabs {
        margin-top: 12px;
        gap: 2px;
    }

    .mega__cat {
        padding: 12px 16px;
        font-size: 17px;
    }

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

    .mega__bottom {
        padding-top: 24px;
    }
}

/* tablets (641px and up, incl. portrait iPads): the T beside the text as on desktop, vertically centred; the stacked
   layout above is for phones only */
@media (min-width: 641px) and (max-width: 900px), (min-width: 641px) and (orientation: portrait) {
    .cta__card {
        display: flex;
        align-items: center;
        min-height: 380px;
        padding: 48px 36px;
    }

    .cta__content {
        max-width: 60%;
    }

    .cta__actions {
        align-self: auto;
    }

    .cta__glow--cool {
        width: 70%;
        left: 50%;
        top: -30%;
        bottom: auto;
    }

    .cta__glow--warm {
        width: 60%;
        left: 62%;
        top: 10%;
        bottom: auto;
    }

    .cta__t {
        left: auto;
        right: 5%;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        width: min(27%, 260px);
        height: auto;
        aspect-ratio: 810 / 929;
    }
}

@media (max-width: 560px) {
    .nav {
        gap: 12px;
    }

    .nav__logo img {
        width: 144px;
    }

    /* phone: icon-only call link (44px tap area) */
    .nav__menu {
        width: 48px;
        height: 48px;
    }

    .pbtn {
        padding: 16px 20px;
        font-size: 15px;
    }

    .pbtn--dark {
        padding: 14px 18px;
    }

    .whatsapp {
        right: 16px;
        bottom: 16px;
        padding: 14px;
    }

    .whatsapp img {
        width: 30px;
        height: 30px;
    }

    .mega__panel {
        margin-inline: 12px; }

    .mega__list {
        grid-template-rows: none;
        grid-auto-flow: row;
    }

    .mega__product {
        padding: 14px;
    }

    .mega__product b {
        font-size: 16px;
    }

    .mega__product span {
        font-size: 13px;
    }

    .mega__close, .mega__close img {
        width: 48px;
        height: 48px;
    }

    .footer__social {
        gap: 32px;
    }

    .footer__pill {
        width: 100%;
        font-size: 18px;
    }

    .footer__pill > span:last-child {
        margin-left: auto;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* landscape phones (short landscape screens): smaller buttons and WhatsApp button */
@media (max-height: 540px) and (orientation: landscape) {
    .pbtn {
        padding: 12px 18px;
        font-size: 14px;
    }

    .pbtn--dark {
        padding: 10px 16px;
    }

    .whatsapp {
        right: 16px;
        bottom: 16px;
        padding: 12px;
    }

    .whatsapp img {
        width: 28px;
        height: 28px;
    }
}

/* ================================================================================================================
   2b. COMMON COMPONENTS (light pages): light navigation, outline button, section label, centred light hero (.shero – Services, Works)
   ================================================================================================================ */
/* ---------- LIGHT NAV (white page top: dark links, logo, phone and menu button) ---------- */
.nav--light .nav__links a {
    color: #52525b;
}

.nav--light .nav__links a:hover, .nav--light .nav__links .is-current {
    color: #09090b;
}

.nav--light .nav__drop-btn:hover, .nav--light .nav__drop-btn:focus-visible {
    background: rgba(9, 9, 11, .08);
}

.nav--light .nav__phone {
    color: #09090b;
    border-color: rgba(9, 9, 11, .22);
}

.nav--light .nav__phone:hover, .nav--light .nav__phone:focus-visible {
    background: rgba(9, 9, 11, .06);
    border-color: rgba(9, 9, 11, .5);
}

.nav--light .nav__menu {
    background: #09090b;
}

.nav--light .nav__menu span {
    background: #fff;
}

.mega__bar--light {
    background: #fff;
}

/* outline pill (Figma "Secondary button") */
.pbtn--outline {
    padding: 19px 31px;
    border: 1px solid #d4d4d8;
    background: #fff;
    color: #09090b;
}

.pbtn--outline:hover, .pbtn--outline:focus-visible {
    background: #f4f4f5;
}

/* section label: small uppercase line, optionally followed by a rule */
.sec-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: max(13px, calc(16 * var(--u, 1px)));
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #52525b;
}

.sec-label--rule {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sec-label--rule::after {
    content: "";
    flex: 0 1 200px;
    min-width: 0;
    height: 1px;
    background: currentColor;
    opacity: .5;
}

/* ---------- HERO (Figma › Hero, 1920 × 770: nav 120 + centred text block) ---------- */
.shero {
    --u: calc(100vw / 1920);
    position: relative;
    background: #fff;
    color: #09090b;
    padding: calc(clamp(88px, 6.25vw, 120px) + max(48px, calc(110 * var(--u)))) var(--gutter) max(56px, calc(72 * var(--u)));
}

.shero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    text-align: center;
}

.shero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 14px;
    border-radius: 999px;
    background: #f4f4f5;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    color: #3f3f46;
}

.shero__eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--grad-techrish);
}

.shero h1 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    color: #09090b;
}

.shero__sub {
    max-width: max(320px, calc(720 * var(--u)));
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

.shero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding-top: 12px;
}

/* light hero + outline button on small screens (was part of the Services responsive block) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    .shero {
        padding-top: 128px;
    }

    .shero__content {
        gap: 22px;
    }
}

@media (max-width: 560px) {
    .shero__actions {
        gap: 12px;
    }

    .pbtn--outline {
        padding: 15px 19px;
    }
}

/* section label and section heading shared by the Home, About, Life, Careers and Contact pages (Blog and Testimonials
   restyle .kicker in their own sections, which come later and win) */
.kicker {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label);
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #52525b;
}

.kicker--light {
    color: rgba(255, 255, 255, .5);
}

.a-h2 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

/* ================================================================================================================
   3. PAGES
   ================================================================================================================ */
/* ================================================================================================================
   SERVICES (services.html – Figma "Services – Improved")
   ================================================================================================================ */
/* ---------- SERVICES OVERVIEW (Figma "Services overview (bento)", 1920 × 1339) ---------- */
:where(.services-page) .bento {
    --u: calc(100vw / 1920);
    background: #fff;
    display: grid;
    gap: max(40px, calc(64 * var(--u)));
    padding: max(24px, calc(40 * var(--u))) var(--gutter) max(72px, calc(160 * var(--u)));
}

:where(.services-page) .bento__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px 48px;
}

:where(.services-page) .bento__head h2 {
    max-width: max(320px, calc(900 * var(--u)));
    margin-top: 20px;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    color: #09090b;
}

:where(.services-page) .bento__intro {
    max-width: max(300px, calc(520 * var(--u)));
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

/* 820 | 414 | 414 columns and two 442 rows, 16 apart; the large tile spans both rows */
:where(.services-page) .bento__grid {
    display: grid;
    grid-template-columns: 820fr 414fr 414fr;
    grid-template-rows: 1fr 1fr;
    gap: max(12px, calc(16 * var(--u)));
    aspect-ratio: 1680 / 900;
}

:where(.services-page) .tile--lg {
    grid-row: span 2;
}

/* tile (Figma "Service tile (hover)"): hover zooms the image, fades the description in and turns the arrow */
:where(.services-page) .tile {
    --pad: max(16px, calc(24 * var(--u)));
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 0;
    border-radius: max(16px, calc(24 * var(--u)));
    background: #09090b;
    color: #fff;
}

:where(.services-page) .tile__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 30%;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

:where(.services-page) .tile--contain {
    background: #141416;
}

:where(.services-page) .tile--contain .tile__img {
    object-fit: contain;
    object-position: 50% 50%;
}

/* 20% black over the photos, then the bottom shade (72% black, 90% on hover) */
:where(.services-page) .tile::before, :where(.services-page) .tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

:where(.services-page) .tile::before {
    background: rgba(0, 0, 0, .2);
}

:where(.services-page) .tile--contain::before {
    content: none;
}

:where(.services-page) .tile::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .9) 100%);
    opacity: .8;
    transition: opacity .4s ease;
}

:where(.services-page) .tile__tag {
    position: absolute;
    left: var(--pad);
    top: var(--pad);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 14px;
    border-radius: 999px;
    background: #fff;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: #09090b;
}

:where(.services-page) .tile__tag::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
}

:where(.services-page) .tile__arrow {
    position: absolute;
    right: var(--pad);
    top: var(--pad);
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, 0);
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 22px;
    line-height: 1;
    color: #fff;
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

:where(.services-page) .tile__caption {
    position: absolute;
    left: var(--pad);
    right: var(--pad);
    bottom: max(20px, calc(28 * var(--u)));
    display: grid;
}

:where(.services-page) .tile h3 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
}

:where(.services-page) .tile--lg h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
}

/* description: no height until hover (grid 0fr → 1fr lets the title slide up smoothly) */
:where(.services-page) .tile__desc {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .8);
    transition: grid-template-rows .4s ease, opacity .3s ease, margin .4s ease;
}

:where(.services-page) .tile__desc > span {
    min-height: 0;
    overflow: hidden;
}

:where(.services-page) .tile--lg .tile__desc {
    max-width: 560px;
}

:where(.services-page) .tile:hover .tile__img, :where(.services-page) .tile:focus-visible .tile__img {
    transform: scale(1.087);
}

/* Figma: image inset −4% */
:where(.services-page) .tile:hover::after, :where(.services-page) .tile:focus-visible::after {
    opacity: 1;
}

:where(.services-page) .tile:hover .tile__arrow, :where(.services-page) .tile:focus-visible .tile__arrow {
    background: #fff;
    color: #09090b;
    transform: rotate(-45deg);
}

:where(.services-page) .tile:hover .tile__desc, :where(.services-page) .tile:focus-visible .tile__desc {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 10px;
}

:where(.services-page) .tile:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* touch screens have no hover: descriptions always shown */
@media (hover: none) {
    :where(.services-page) .tile__desc {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: 10px;
    }

    :where(.services-page) .tile::after {
        opacity: 1;
    }
}

/* ---------- SERVICE LIST (Figma "Services (hover to expand)", 1920 × 1760; rows 150 collapsed / 472 open) ---------- */
:where(.services-page) .slist {
    --u: calc(100vw / 1920);
    background: #000;
    color: #fff;
    display: grid;
    gap: max(48px, calc(80 * var(--u)));
    padding: max(72px, calc(160 * var(--u))) var(--gutter);
}

:where(.services-page) .slist .sec-label {
    color: rgba(255, 255, 255, .6);
}

:where(.services-page) .slist__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
}

:where(.services-page) .slist__title {
    display: grid;
    gap: 24px;
}

:where(.services-page) .slist h2 {
    max-width: max(320px, calc(1000 * var(--u)));
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

:where(.services-page) .slist__intro {
    max-width: max(300px, calc(900 * var(--u)));
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .7);
}

:where(.services-page) .slist__hint {
    flex: none;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: normal;
    color: rgba(255, 255, 255, .5);
}

:where(.services-page) .slist__hint-tap {
    display: none;
}

@media (hover: none) {
    :where(.services-page) .slist__hint-hover {
        display: none;
    }

    :where(.services-page) .slist__hint-tap {
        display: inline;
    }
}

/* the script keeps the hovered row under the pointer, so the browser's own scroll anchoring stays out of it */
:where(.services-page) .slist__rows {
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    overflow-anchor: none;
}

:where(.services-page) .srow {
    border-top: 1px solid rgba(255, 255, 255, .16);
}

:where(.services-page) .srow h3 {
    font: inherit;
    letter-spacing: normal;
}

/* head: (01) at x 0, title at x 160, count and the 56px toggle on the right */
:where(.services-page) .srow__head {
    display: grid;
    grid-template-columns: max(64px, calc(160 * var(--u) - 32px)) minmax(0, 1fr) auto 56px;
    align-items: center;
    column-gap: 32px;
    width: 100%;
    padding: max(24px, calc(46 * var(--u))) 0 max(24px, calc(48 * var(--u)));
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

:where(.services-page) .srow__head:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

:where(.services-page) .srow__num {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: normal;
    color: rgba(255, 255, 255, .5);
    transition: color .3s ease;
}

:where(.services-page) .srow__title {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
}

:where(.services-page) .srow__count {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: normal;
    color: rgba(255, 255, 255, .5);
    white-space: nowrap;
    transition: opacity .3s ease;
}

:where(.services-page) .srow__toggle {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .3);
    transition: background-color .3s ease, border-color .3s ease, transform .4s ease;
}

/* plus (two 20 × 2 bars); turns into × on the accent circle when open */
:where(.services-page) .srow__toggle::before, :where(.services-page) .srow__toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 2px;
    margin: -1px 0 0 -10px;
    background: #fff;
    transition: background-color .3s ease;
}

:where(.services-page) .srow__toggle::after {
    transform: rotate(90deg);
}

:where(.services-page) .srow__head:hover .srow__toggle {
    border-color: rgba(255, 255, 255, .6);
}

/* body: indented to the title; description (600) + link on the left, capability points (2 × 384) at x 880 */
:where(.services-page) .srow__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1);
}

:where(.services-page) .srow__inner {
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 600fr) minmax(0, 800fr);
    column-gap: calc(120 * var(--u));
    align-items: start;
    padding-left: max(96px, calc(160 * var(--u)));
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .3s ease, transform .5s cubic-bezier(.4, 0, .2, 1);
}

:where(.services-page) .srow__inner > * {
    margin: max(4px, calc(10 * var(--u))) 0 max(40px, calc(72 * var(--u)));
}

:where(.services-page) .srow__about p {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .72);
}

:where(.services-page) .srow__link {
    display: inline-flex;
    gap: .45em;
    margin-top: max(24px, calc(40 * var(--u)));
    padding-bottom: 6px;
    border-bottom: 2px solid var(--accent);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-body-lg);
    line-height: normal;
    color: #fff;
}

:where(.services-page) .srow__link span {
    transition: transform .2s ease;
}

:where(.services-page) .srow__link:hover span, :where(.services-page) .srow__link:focus-visible span {
    transform: translateX(4px);
}

/* points: two columns of four (first column fills first) */
:where(.services-page) .srow__points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-gap: max(20px, calc(32 * var(--u)));
}

:where(.services-page) .srow__points li {
    display: flex;
    align-items: center;
    gap: max(12px, calc(16 * var(--u)));
    min-height: max(48px, calc(60 * var(--u)));
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #fff;
}

:where(.services-page) .srow__points li::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

/* open */
:where(.services-page) .srow.is-open .srow__body {
    grid-template-rows: 1fr;
}

:where(.services-page) .srow.is-open .srow__inner {
    opacity: 1;
    transform: none;
    transition-delay: .1s, 0s;
}

:where(.services-page) .srow.is-open .srow__num {
    color: var(--accent);
}

:where(.services-page) .srow.is-open .srow__count {
    opacity: 0;
}

:where(.services-page) .srow.is-open .srow__toggle {
    background: var(--accent);
    border-color: var(--accent);
    transform: rotate(45deg);
}

:where(.services-page) .srow.is-open .srow__toggle::before, :where(.services-page) .srow.is-open .srow__toggle::after {
    background: #09090b;
}

/* opened from a tile link: no animation, so the page scrolls straight to the row's final place */
:where(.services-page) .slist__rows.is-instant * {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    :where(.services-page) .tile__img, :where(.services-page) .tile::after, :where(.services-page) .tile__arrow, :where(.services-page) .tile__desc, :where(.services-page) .srow__body, :where(.services-page) .srow__inner, :where(.services-page) .srow__num, :where(.services-page) .srow__count, :where(.services-page) .srow__toggle, :where(.services-page) .srow__toggle::before, :where(.services-page) .srow__toggle::after, :where(.services-page) .srow__link span {
        transition: none;
    }
}

/* ---------- SERVICES PAGE: RESPONSIVE ---------- */
@media (max-width: 1200px) {
    /* bento: the large tile full width on top, the other four in a 2 × 2 grid */ :where(.services-page) .bento__grid {
        aspect-ratio: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }

    :where(.services-page) .tile {
        aspect-ratio: 414 / 442;
    }

    :where(.services-page) .tile--lg {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 16 / 9;
    }
}

/* mobile layout (same breakpoints as the home page) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    :where(.services-page) .bento__head, :where(.services-page) .slist__head {
        flex-direction: column;
        align-items: flex-start;
    }

    :where(.services-page) .bento__head h2 {
        margin-top: 14px;
    }

    :where(.services-page) .slist__title {
        gap: 18px;
    }

    /* rows: number above the title, toggle on the right, count hidden; body in one column */
    :where(.services-page) .srow__head {
        grid-template-columns: minmax(0, 1fr) 48px;
        column-gap: 16px;
        row-gap: 6px;
        padding: 24px 0;
    }

    :where(.services-page) .srow__num {
        grid-column: 1;
        grid-row: 1;
    }

    :where(.services-page) .srow__title {
        grid-column: 1;
        grid-row: 2;
    }

    :where(.services-page) .srow__count {
        display: none;
    }

    :where(.services-page) .srow__toggle {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: 48px;
        height: 48px;
    }

    :where(.services-page) .srow__toggle::before, :where(.services-page) .srow__toggle::after {
        width: 18px;
        margin-left: -9px;
    }

    :where(.services-page) .srow__inner {
        grid-template-columns: minmax(0, 1fr);
        padding-left: 0;
    }

    :where(.services-page) .srow__inner > * {
        margin: 0;
    }

    :where(.services-page) .srow__points {
        margin: 24px 0 32px;
    }

    :where(.services-page) .srow__link {
        margin-top: 20px;
    }

    :where(.services-page) .srow__points li {
        min-height: 48px;
    }
}

@media (max-width: 560px) {
    :where(.services-page) .bento__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(.services-page) .tile, :where(.services-page) .tile--lg {
        aspect-ratio: 1 / 1;
    }

    :where(.services-page) .srow__points {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}

/* ================================================================================================================
   HOME (index.html – Figma "Home – Improved")
   ================================================================================================================ */
/* Techrish "Home" – built from Figma "Home – Improved" (1920px desktop frame). The shared parts
   (tokens, nav, mega menu, pill buttons, WhatsApp button, CTA and footer are in COMMON COMPONENTS above).
   Desktop sizes are Figma px × --u (one Figma pixel = 100vw / 1920) with minimums, so text stays readable on a laptop. */
.home-page {
    --u: calc(100vw / 1920);
    --ease: cubic-bezier(.22, .61, .36, 1);
    color: #09090b;
}

.home-page :is(h1, h2, h3) {
    font-family: var(--font-inter);
}

:where(.home-page) :where(ol) {
    list-style: none;
    margin: 0;
    padding: 0;
}

:where(.home-page) :where(dl, dd) {
    margin: 0;
}

.home-page main :focus-visible {
    outline: 2px solid #00aeef;
    outline-offset: 3px;
}

/* shared: section label (same as the about, life and careers pages) */
/* .kicker / .kicker--light / .a-h2: see COMMON COMPONENTS (identical on Home, About, Life, Careers and Contact) */
/* footer: the "Services" label is an h2; keep it in the body font (the heading rule above would make it Inter) */
.home-page .footer__eyebrow {
    font-family: var(--font-body);
}

/* headings keep their designed line breaks at every width (the shared stylesheet drops .br-lg below 1200px) */
.home-page .br-lg {
    display: inline;
}

/* ---------- HERO (Figma "Home – Improved" › Hero, 1920 × 1080: text block at x 120, y 380; badge 201 × 209 at x 1262, y 439) ---------- */
:where(.home-page) .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* one full screen, as in Figma (1080 of 1080) */
    min-height: max(520px, 100vh);
    min-height: max(520px, 100svh);
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    padding: clamp(120px, 7.08vw, 136px) var(--gutter) clamp(60px, 4.17vw, 80px);
}

/* background video: a black 16:9 frame with the element on the right (stabilised and looped in the file itself).
   Shown 10% larger, anchored right, so the element starts at about 58% of the width and clears the headline. */
:where(.home-page) .hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

:where(.home-page) .hero__video {
    position: absolute;
    top: 0;
    left: -10%;
    width: 110%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

/* keeps the text legible once it overlaps the video (mobile layout only) */
:where(.home-page) .hero__shade {
    display: none;
    position: absolute;
    inset: 0;
    z-index: -1;
}

:where(.home-page) .hero__content {
    display: grid;
    gap: 32px;
    justify-items: start;
    max-width: 100%;
}

:where(.home-page) .hero h1 {
    font-weight: 600;
    font-size: clamp(34px, 4.167vw, 80px);
    line-height: 1.06;
    letter-spacing: -.03em;
}

:where(.home-page) .hero__line {
    display: block;
    font-weight: 300;
}

/* entrance: each word rises out of its own mask, one after another (--w is the word's place in the sentence) */
:where(.home-page) .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: .1em 0 .18em;
    margin: -.1em 0 -.18em;
}

:where(.home-page) .w__in {
    display: inline-block;
    animation: word-in 1s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(.15s + var(--w) * .09s);
}

@keyframes word-in {
    from {
        transform: translateY(120%);
    }
}

:where(.home-page) .hero__sub, :where(.home-page) .hero__actions {
    animation: hero-rise .9s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: .75s;
}

:where(.home-page) .hero__actions {
    animation-delay: .9s;
}

@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

/* TRIX highlight. Every highlighted letter holds its quarter of the brand gradient (--x), so the four letters of
   "TRIX" read as one continuous gradient. In the words, the letter each part stands for is bold white; every 8
   seconds the pairs light up in turn (--i): the TRIX letter lifts while its letter in the word takes the same colour. */
:where(.home-page) .hl {
    font-weight: 600;
    background: var(--grad-techrish) var(--x) 0 / 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

:where(.home-page) .hl--t {
    --x: 0%;
    --i: 0;
}

:where(.home-page) .hl--r {
    --x: 33.33%;
    --i: 1;
}

:where(.home-page) .hl--i {
    --x: 66.67%;
    --i: 2;
}

:where(.home-page) .hl--x {
    --x: 100%;
    --i: 3;
}

:where(.home-page) .trix .hl {
    display: inline-block;
    -webkit-text-fill-color: transparent;
    animation: hl-lift 8s ease-in-out infinite;
    animation-delay: calc(2.2s + var(--i) * .5s);
}

:where(.home-page) .w__in:not(.trix) .hl {
    -webkit-text-fill-color: #fff;
    animation: hl-colour 8s ease-in-out infinite;
    animation-delay: calc(2.2s + var(--i) * .5s);
}

@keyframes hl-lift {
    0%, 14%, 100% {
        transform: none;
    }

    6% {
        transform: translateY(-.07em);
    }
}

@keyframes hl-colour {
    0%, 17%, 100% {
        -webkit-text-fill-color: #fff;
    }

    5%, 11% {
        -webkit-text-fill-color: transparent;
    }
}

:where(.home-page) .hero__sub {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(17px, 1.25vw, 24px);
    line-height: 1.5;
    color: #a1a1aa;
    /* as wide as the headline above it, and wrapped into lines of even length */
    max-width: clamp(320px, 44vw, 860px);
    text-wrap: balance;
}

:where(.home-page) .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 8px;
}

/* 12 years badge, label centred on it. It drifts like a bubble, but only over the element's side of the hero
   (its left edge stays between about 62% and 80% of the width, so it never reaches the headline). Sideways drift,
   rise / fall and wobble run on different periods, so the path does not visibly repeat. */
:where(.home-page) .years {
    --bx0: -3.5vw;
    --bx1: 14vw;
    /* sideways range, from its Figma place at x 65.73% */
    --by0: -9vh;
    --by1: 15vh;
    /* up / down range, from y 40.65% */
    position: absolute;
    left: 65.73%;
    top: 40.65%;
    width: clamp(120px, 10.47vw, 201px);
    aspect-ratio: 201 / 209;
    display: grid;
    place-content: center;
    justify-items: center;
    color: #fff;
    animation: bubble-x 17s ease-in-out -6s infinite alternate, bubble-y 11s ease-in-out -4s infinite alternate, bubble-wobble 5s ease-in-out infinite alternate;
    will-change: translate, transform;
}

@keyframes bubble-x {
    from {
        translate: var(--bx0) 0;
    }

    to {
        translate: var(--bx1) 0;
    }
}

@keyframes bubble-y {
    from {
        transform: translateY(var(--by0));
    }

    to {
        transform: translateY(var(--by1));
    }
}

@keyframes bubble-wobble {
    from {
        scale: 1 1;
        rotate: -3deg;
    }

    to {
        scale: 1.05 .97;
        rotate: 3deg;
    }
}

:where(.home-page) .years img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(.home-page) .years strong {
    position: relative;
    font-family: var(--font-inter);
    font-weight: 300;
    font-size: clamp(42px, 3.75vw, 72px);
    line-height: 1;
    letter-spacing: -.04em;
}

:where(.home-page) .years span {
    position: relative;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(11px, .73vw, 14px);
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .85);
}

/* ---------- ABOUT (Figma › About, 1920 × 1524: label y 180, heading 226, copy 404, tour card 1686 × 766 at y 598) ---------- */
:where(.home-page) .about {
    display: grid;
    justify-items: center;
    text-align: center;
    background: #fff;
    padding: calc(180 * var(--u)) var(--gutter) calc(160 * var(--u));
}

:where(.home-page) .about__title {
    margin-top: calc(28 * var(--u));
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

:where(.home-page) .about__lead {
    margin-top: calc(28 * var(--u));
    max-width: max(560px, calc(920 * var(--u)));
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

/* ---------- AI VIRTUAL TOUR (story and copy from Figma "AI virtual tour", Step 0–4; presented in the style of trysoro.com:
   one floating screen in a soft frame showing a realistic product, with the steps under it) ---------- */
:where(.home-page) .tour {
    position: relative;
    width: min(100%, max(640px, calc(1200 * var(--u))));
    margin-top: calc(88 * var(--u));
    text-align: left;
}

/* the card: thick, soft frame round a white screen */
:where(.home-page) .tour__frame {
    position: relative;
    margin-top: max(36px, calc(64 * var(--u)));
    padding: max(8px, calc(16 * var(--u)));
    border-radius: max(22px, calc(44 * var(--u)));
    background: rgba(244, 244, 245, .8);
    box-shadow: 0 30px 60px rgba(9, 9, 11, .08);
}

:where(.home-page) .tour__card {
    position: relative;
    border: 1px solid #e4e4e7;
    border-radius: max(14px, calc(28 * var(--u)));
    background: #fff;
    overflow: hidden;
}

/* status pill, sitting on the bottom edge of the frame */
:where(.home-page) .tour__status {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 2;
    transform: translate(-50%, 50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid #e4e4e7;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
    font-size: var(--fs-label);
    line-height: normal;
    color: #3f3f46;
    white-space: nowrap;
}

:where(.home-page) .tour__dot {
    position: relative;
    flex: none;
    width: 8px;
    height: 8px;
}

:where(.home-page) .tour__dot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

:where(.home-page) .tour__dot-live {
    opacity: 0;
    transition: opacity .3s;
}

:where(.home-page) .tour[data-step="4"] .tour__dot-live {
    opacity: 1;
}

/* above the card: title, progress line, the four steps */
:where(.home-page) .tour__caption {
    text-align: center;
}

:where(.home-page) .tour__eyebrow {
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #71717a;
}

:where(.home-page) .tour__title {
    margin-top: 10px;
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
}

:where(.home-page) .tour__progress {
    height: 4px;
    margin-top: max(24px, calc(40 * var(--u)));
    border-radius: 2px;
    background: #e4e4e7;
}

:where(.home-page) .tour__progress span {
    display: block;
    width: 4%;
    height: 100%;
    border-radius: inherit;
    background: var(--grad-techrish);
    transition: width .8s var(--ease);
}

:where(.home-page) .tour[data-step="1"] .tour__progress span {
    width: 25%;
}

:where(.home-page) .tour[data-step="2"] .tour__progress span {
    width: 50%;
}

:where(.home-page) .tour[data-step="3"] .tour__progress span {
    width: 75%;
}

:where(.home-page) .tour[data-step="4"] .tour__progress span {
    width: 100%;
}

:where(.home-page) .tour__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: max(16px, calc(28 * var(--u)));
    margin-top: max(20px, calc(32 * var(--u)));
}

:where(.home-page) .tour__step {
    display: flex;
    align-items: flex-start;
    gap: max(10px, calc(14 * var(--u)));
    color: #a1a1aa;
}

:where(.home-page) .tour__num {
    flex: none;
    display: grid;
    place-items: center;
    width: max(30px, calc(36 * var(--u)));
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid #d4d4d8;
    background: #fff;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-label);
    line-height: 1;
    color: #a1a1aa;
    transition: background-color .4s, border-color .4s, color .4s;
}

:where(.home-page) .tour__step-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

:where(.home-page) .tour__step-text strong {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    transition: color .4s;
}

:where(.home-page) .tour__step-text p {
    font-size: var(--fs-body-sm);
    line-height: 1.45;
    transition: color .4s;
}

:where(.home-page) .tour__step.is-active .tour__num {
    background: #09090b;
    border-color: #09090b;
    color: #fff;
}

:where(.home-page) .tour__step.is-active strong {
    color: #09090b;
}

:where(.home-page) .tour__step.is-active p {
    color: #52525b;
}

:where(.home-page) .tour__step.is-done .tour__num {
    background: #8dc63f;
    border-color: #8dc63f;
    color: #fff;
}

:where(.home-page) .tour__step.is-done .tour__num span {
    display: none;
}

:where(.home-page) .tour__step.is-done .tour__num::after {
    content: "✓";
}

:where(.home-page) .tour__step.is-done strong {
    color: #3f3f46;
}

:where(.home-page) .tour__step.is-done p {
    color: #71717a;
}

/* the screen: a 1220 × 760 scene. Everything inside is sized in --c (one Figma px of the 1220-wide scene), so it scales on any screen. */
:where(.home-page) .tour__canvas {
    position: relative;
    overflow: hidden;
}

:where(.home-page) .tour__scene {
    position: relative;
    width: 100%;
    aspect-ratio: 1220 / 760;
    container-type: inline-size;
    --c: calc(100cqw / 1220);
}

/* 80px grid; runs three cells past the scene's top and bottom so it also fills a taller canvas */
:where(.home-page) .tour__scene::before {
    content: "";
    position: absolute;
    inset: calc(var(--c) * -240) 0;
    background-image: linear-gradient(90deg, #f4f4f5 1px, transparent 1px), linear-gradient(#f4f4f5 1px, transparent 1px);
    background-size: calc(var(--c) * 80) calc(var(--c) * 80);
    background-position: calc(var(--c) * 60) calc(var(--c) * 40);
}

:where(.home-page) .tour__layer {
    position: absolute;
    left: calc(var(--c) * 120);
    top: calc(var(--c) * 150);
    width: calc(var(--c) * 980);
    height: calc(var(--c) * 560);
    max-width: none;
}

:where(.home-page) .tour__launch {
    top: calc(var(--c) * 172);
    opacity: 0;
    transition: top .7s var(--ease), opacity .7s;
}

/* the generated product: a booking dashboard (browser window) and its mobile app. Sized in em, where 1em = 10 scene px.
   Step 2 "Sketch" shows it as a wireframe (grey bars for text, no colour); step 3 "Design" fills in the real content. */
:where(.home-page) .app {
    position: absolute;
    left: 6em;
    right: 6em;
    top: 15.2em;
    bottom: 4.4em;
    display: flex;
    gap: 3.2em;
    font: 400 calc(var(--c) * 10) / 1.2 var(--font-inter);
    color: #09090b;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.3s var(--ease), opacity .4s ease;
}

:where(.home-page) .tour:is([data-step="2"], [data-step="3"], [data-step="4"]) .app {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

:where(.home-page) .app i {
    display: block;
    flex: none;
    font-style: normal;
}

/* text: a grey bar in the wireframe, the words once designed */
:where(.home-page) .app .tx {
    display: inline-block;
    border-radius: .3em;
    background: linear-gradient(#dcdce2, #dcdce2) 0 50% / 0% 64% no-repeat;
    transition: color .5s ease, background-size .6s var(--ease);
}

/* fills: brand gradient / ink once designed */
:where(.home-page) .app .fill-grad {
    position: relative;
    isolation: isolate;
    background-color: #f4f4f5;
}

:where(.home-page) .app .fill-grad::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--grad-techrish);
    transition: opacity .8s ease;
}

:where(.home-page) .app .fill-ink {
    background-color: #09090b;
    transition: background-color .6s ease;
}

:where(.home-page) .app__web {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #e4e4e7;
    border-radius: 1.6em;
    background: #fff;
    box-shadow: 0 1.6em 4em rgba(9, 9, 11, .08);
    overflow: hidden;
}

:where(.home-page) .app__bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: .6em;
    height: 4.4em;
    padding: 0 1.6em;
    border-bottom: 1px solid #e4e4e7;
    background: #fafafa;
}

:where(.home-page) .app__bar i {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    transition: background-color .6s ease;
}

:where(.home-page) .app__bar i:nth-child(1) {
    background-color: #ef4136;
}

:where(.home-page) .app__bar i:nth-child(2) {
    background-color: #ffc20e;
}

:where(.home-page) .app__bar i:nth-child(3) {
    background-color: #8dc63f;
}

:where(.home-page) .app__url {
    display: grid;
    place-items: center;
    width: 30em;
    height: 2.4em;
    margin: 0 auto;
    border-radius: 1.2em;
    background: #f4f4f5;
}

:where(.home-page) .app__url .tx {
    font-size: 1.1em;
    color: #71717a;
}

:where(.home-page) .app__body {
    flex: 1;
    min-height: 0;
    display: flex;
}

:where(.home-page) .app__side {
    flex: none;
    width: 17em;
    padding: 1.8em 1.2em;
    border-right: 1px solid #e4e4e7;
}

:where(.home-page) .app__brand {
    display: flex;
    align-items: center;
    gap: .8em;
    padding: 0 .6em;
}

:where(.home-page) .app__brand i {
    width: 2.2em;
    height: 2.2em;
    border-radius: .6em;
}

:where(.home-page) .app__brand b {
    font-size: 1.4em;
    font-weight: 600;
}

:where(.home-page) .app__nav {
    display: grid;
    gap: .4em;
    margin: 2em 0 0;
    padding: 0;
    list-style: none;
}

:where(.home-page) .app__nav li {
    display: flex;
    align-items: center;
    gap: .9em;
    height: 3.2em;
    padding: 0 1em;
    border-radius: .8em;
    color: #71717a;
}

:where(.home-page) .app__nav i {
    width: 1.2em;
    height: 1.2em;
    border-radius: .35em;
    background-color: #d4d4d8;
    transition: background-color .6s ease;
}

:where(.home-page) .app__nav .tx {
    font-size: 1.25em;
}

:where(.home-page) .app__nav .is-on {
    background: #f4f4f5;
    color: #09090b;
    font-weight: 500;
}

:where(.home-page) .app__nav .is-on i {
    background-color: #09090b;
}

:where(.home-page) .app__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 2.2em 2.4em;
}

:where(.home-page) .app__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
}

:where(.home-page) .app__head b {
    font-size: 2em;
    font-weight: 600;
    letter-spacing: -.02em;
}

:where(.home-page) .app__btn {
    display: grid;
    place-items: center;
    height: 3.2em;
    padding: 0 1.4em;
    border-radius: 1.6em;
    color: #fff;
}

:where(.home-page) .app__btn .tx {
    font-size: 1.2em;
    font-weight: 500;
}

:where(.home-page) .app__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2em;
    margin-top: 1.8em;
}

:where(.home-page) .app__stat {
    display: grid;
    gap: .5em;
    justify-items: start;
    padding: 1.4em;
    border: 1px solid #e4e4e7;
    border-radius: 1.2em;
}

:where(.home-page) .app__stat span {
    font-size: 1.1em;
    color: #71717a;
}

:where(.home-page) .app__stat b {
    font-size: 2.6em;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
}

:where(.home-page) .app__stat.fill-grad {
    border-color: transparent;
}

:where(.home-page) .app__stat.fill-grad span {
    color: rgba(9, 9, 11, .72);
}

:where(.home-page) .app__chart {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8em;
    margin-top: 1.4em;
    padding: 1.4em;
    border: 1px solid #e4e4e7;
    border-radius: 1.2em;
}

:where(.home-page) .app__chart > .tx {
    font-size: 1.2em;
    font-weight: 500;
}

:where(.home-page) .app__chart svg {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: visible;
}

:where(.home-page) .app__line {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

:where(.home-page) .app__line--ghost {
    stroke: #d4d4d8;
}

:where(.home-page) .app__line--color {
    transition: opacity .8s ease;
}

:where(.home-page) .app__rows {
    display: grid;
    gap: .6em;
    margin: 1.4em 0 0;
    padding: 0;
    list-style: none;
}

:where(.home-page) .app__rows li {
    display: grid;
    grid-template-columns: 2.4em 1.2fr 1fr 1fr auto;
    align-items: center;
    justify-items: start;
    gap: 1.2em;
    height: 3.6em;
    padding: 0 1em;
    border: 1px solid #f4f4f5;
    border-radius: 1em;
}

:where(.home-page) .app__rows i {
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    background: #e4e4e7;
}

:where(.home-page) .app__rows li > .tx {
    font-size: 1.2em;
    color: #52525b;
}

:where(.home-page) .app__rows li > .tx:first-of-type {
    font-weight: 500;
    color: #09090b;
}

:where(.home-page) .app__rows em {
    font-style: normal;
    padding: .4em 1em;
    border-radius: 1em;
    background-color: rgba(141, 198, 63, .2);
    color: #3f6212;
    transition: background-color .6s ease;
}

:where(.home-page) .app__rows em.is-wait {
    background-color: rgba(255, 194, 14, .24);
    color: #854d0e;
}

:where(.home-page) .app__rows em .tx {
    font-size: 1.05em;
    font-weight: 500;
}

:where(.home-page) .app__phone {
    position: relative;
    flex: none;
    width: 27em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 4.2em 1.6em 1.4em;
    border: .7em solid #09090b;
    border-radius: 4em;
    background: #fff;
    box-shadow: 0 1.6em 4em rgba(9, 9, 11, .12);
    transition: border-color .6s ease;
}

:where(.home-page) .app__notch {
    position: absolute;
    left: 50%;
    top: 1em;
    width: 7em;
    height: 1.8em;
    margin-left: -3.5em;
    border-radius: 1em;
    background-color: #09090b;
    transition: background-color .6s ease;
}

:where(.home-page) .app__ptitle {
    font-size: 1.8em;
    font-weight: 600;
    letter-spacing: -.02em;
}

:where(.home-page) .app__psub {
    margin-top: .3em;
    font-size: 1.15em;
    color: #71717a;
}

:where(.home-page) .app__doc {
    display: flex;
    align-items: center;
    gap: 1em;
    width: 100%;
    margin-top: 1.4em;
    padding: 1em;
    border-radius: 1.2em;
    background: #f4f4f5;
}

:where(.home-page) .app__doc i {
    width: 3em;
    height: 3em;
    border-radius: 50%;
    background: #d4d4d8;
}

:where(.home-page) .app__doc span {
    display: grid;
    gap: .3em;
    justify-items: start;
}

:where(.home-page) .app__doc b {
    font-size: 1.25em;
    font-weight: 600;
}

:where(.home-page) .app__doc small {
    font-size: 1.05em;
    color: #71717a;
}

:where(.home-page) .app__days {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .5em;
    width: 100%;
    margin-top: 1.4em;
}

:where(.home-page) .app__days > span {
    display: grid;
    justify-items: center;
    gap: .3em;
    padding: .8em 0;
    border: 1px solid #e4e4e7;
    border-radius: 1em;
}

:where(.home-page) .app__days small {
    font-size: .95em;
    color: #71717a;
}

:where(.home-page) .app__days b {
    font-size: 1.4em;
    font-weight: 600;
}

:where(.home-page) .app__days .is-on {
    border-color: transparent;
}

:where(.home-page) .app__days .is-on small {
    color: rgba(9, 9, 11, .72);
}

:where(.home-page) .app__label {
    margin-top: 1.2em;
    font-size: 1.15em;
    font-weight: 500;
}

:where(.home-page) .app__slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7em;
    width: 100%;
    margin-top: .9em;
}

:where(.home-page) .app__slots > span {
    display: grid;
    place-items: center;
    height: 3.4em;
    border: 1px solid #e4e4e7;
    border-radius: 1em;
}

:where(.home-page) .app__slots .tx {
    font-size: 1.15em;
}

:where(.home-page) .app__slots .is-on {
    border-color: transparent;
    color: #fff;
}

:where(.home-page) .app__sum {
    display: grid;
    gap: .4em;
    justify-items: start;
    width: 100%;
    margin-top: 1.4em;
    padding: 1.1em 1.2em;
    border: 1px dashed #d4d4d8;
    border-radius: 1.2em;
}

:where(.home-page) .app__sum small {
    font-size: 1.05em;
    color: #71717a;
}

:where(.home-page) .app__sum b {
    font-size: 1.35em;
    font-weight: 600;
}

:where(.home-page) .app__cta {
    display: grid;
    place-items: center;
    width: 100%;
    height: 4.2em;
    margin-top: auto;
    border-radius: 2.1em;
}

:where(.home-page) .app__cta .tx {
    font-size: 1.3em;
    font-weight: 600;
}

:where(.home-page) .app__tabs {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 1.2em;
    padding-top: 1.1em;
    border-top: 1px solid #e4e4e7;
}

:where(.home-page) .app__tabs i {
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    border: 1.5px solid #a1a1aa;
}

:where(.home-page) .app__tabs i.fill-ink {
    border-color: transparent;
}

/* wireframe look, until step 3 */
:where(.home-page) .tour:is([data-step="0"], [data-step="1"], [data-step="2"]) .app .tx {
    color: transparent !important;
    background-size: 100% 64%;
}

:where(.home-page) .tour:is([data-step="0"], [data-step="1"], [data-step="2"]) .app .fill-grad::before {
    opacity: 0;
}

:where(.home-page) .tour:is([data-step="0"], [data-step="1"], [data-step="2"]) .app :is(.fill-ink, .app__notch, .app__bar i, .app__nav .is-on i) {
    background-color: #dcdce2;
}

:where(.home-page) .tour:is([data-step="0"], [data-step="1"], [data-step="2"]) .app .app__rows em {
    background-color: #f4f4f5;
}

:where(.home-page) .tour:is([data-step="0"], [data-step="1"], [data-step="2"]) .app .app__line--color {
    opacity: 0;
}

:where(.home-page) .tour:is([data-step="0"], [data-step="1"], [data-step="2"]) .app .app__phone {
    border-color: #d4d4d8;
}

:where(.home-page) .tour[data-step="4"] .tour__launch {
    top: calc(var(--c) * 150);
    opacity: 1;
}

:where(.home-page) .tour__chip, :where(.home-page) .tour__toast {
    position: absolute;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e4e4e7;
    box-shadow: 0 calc(var(--c) * 12) calc(var(--c) * 32) rgba(0, 0, 0, .08);
    white-space: nowrap;
}

:where(.home-page) .tour__chip {
    top: calc(var(--c) * -15);
    gap: calc(var(--c) * 8);
    padding: calc(var(--c) * 8) calc(var(--c) * 14) calc(var(--c) * 8) calc(var(--c) * 12);
    border-radius: 999px;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: calc(var(--c) * 14);
    line-height: 1.21;
    color: #09090b;
}

:where(.home-page) .tour__chip img {
    width: calc(var(--c) * 8);
    height: calc(var(--c) * 8);
}

:where(.home-page) .tour__chip--web {
    left: calc(var(--c) * 510);
}

:where(.home-page) .tour__chip--app {
    left: calc(var(--c) * 760);
}

:where(.home-page) .tour__toast {
    left: calc(var(--c) * 590);
    top: calc(var(--c) * 330);
    gap: calc(var(--c) * 12);
    padding: calc(var(--c) * 14) calc(var(--c) * 20) calc(var(--c) * 14) calc(var(--c) * 14);
    border-radius: calc(var(--c) * 16);
}

:where(.home-page) .tour__toast-check {
    display: grid;
    place-items: center;
    width: calc(var(--c) * 32);
    height: calc(var(--c) * 32);
    border-radius: 50%;
    background: #22c55e;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: calc(var(--c) * 15);
    line-height: 1;
    color: #fff;
}

:where(.home-page) .tour__toast-text {
    display: flex;
    flex-direction: column;
    gap: calc(var(--c) * 2);
    line-height: 1.25;
}

:where(.home-page) .tour__toast-text strong {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: calc(var(--c) * 15);
    color: #09090b;
}

:where(.home-page) .tour__toast-text small {
    font-size: calc(var(--c) * 13);
    color: #71717a;
}

:where(.home-page) .tour__prompt {
    position: absolute;
    left: calc(var(--c) * 250);
    top: calc(var(--c) * 334);
    width: calc(var(--c) * 720);
    height: calc(var(--c) * 92);
    border: 1px solid #e4e4e7;
    border-radius: calc(var(--c) * 20);
    background: #fff;
    overflow: hidden;
    box-shadow: 0 calc(var(--c) * 12) calc(var(--c) * 32) rgba(0, 0, 0, .08);
    font-family: var(--font-inter);
    font-size: calc(var(--c) * 22);
    line-height: 1.21;
    white-space: nowrap;
    transition: top .9s var(--ease);
}

:where(.home-page) .tour:is([data-step="2"], [data-step="3"], [data-step="4"]) .tour__prompt {
    top: calc(var(--c) * 40);
}

:where(.home-page) .tour__sparkle {
    position: absolute;
    left: calc(var(--c) * 23);
    top: calc(var(--c) * 31);
    width: calc(var(--c) * 28);
    height: calc(var(--c) * 28);
}

:where(.home-page) .tour__placeholder {
    position: absolute;
    left: calc(var(--c) * 67);
    top: calc(var(--c) * 29);
    color: #a1a1aa;
    transition: opacity .2s;
}

:where(.home-page) .tour__typed {
    position: absolute;
    left: calc(var(--c) * 67);
    top: calc(var(--c) * 27);
    width: 0;
    height: calc(var(--c) * 36);
    overflow: hidden;
    color: #09090b;
    transition: width 1.6s steps(40, end);
}

:where(.home-page) .tour__typed span {
    position: absolute;
    left: 0;
    top: calc(var(--c) * 2);
}

:where(.home-page) .tour__cursor {
    position: absolute;
    left: calc(var(--c) * 70);
    top: calc(var(--c) * 31);
    width: calc(var(--c) * 2);
    min-width: 1px;
    height: calc(var(--c) * 28);
    background: #09090b;
    transition: left 1.6s steps(40, end);
    animation: cursor-blink 1s steps(1) infinite;
}

@keyframes cursor-blink {
    50% {
        opacity: 0;
    }
}

:where(.home-page) .tour__send {
    position: absolute;
    left: calc(var(--c) * 649);
    top: calc(var(--c) * 21);
    display: grid;
    place-items: center;
    width: calc(var(--c) * 48);
    height: calc(var(--c) * 48);
    border-radius: 50%;
    background: #e4e4e7;
    font-weight: 500;
    font-size: calc(var(--c) * 20);
    line-height: 1;
    color: #fff;
    transition: background-color .4s;
}

:where(.home-page) .tour:not([data-step="0"]) .tour__placeholder {
    opacity: 0;
}

:where(.home-page) .tour:not([data-step="0"]) .tour__typed {
    width: calc(var(--c) * 410);
}

:where(.home-page) .tour:not([data-step="0"]) .tour__cursor {
    left: calc(var(--c) * 480);
}

:where(.home-page) .tour:not([data-step="0"]) .tour__send {
    background: #09090b;
}

:where(.home-page) .tour:is([data-step="2"], [data-step="3"], [data-step="4"]) .tour__cursor {
    visibility: hidden;
}

/* ---------- PINNED SECTIONS (desktop): a tall section, a sticky full-screen .pin and a 1920 × 1080 .stage centred in it;
   script.js feeds the scroll progress in. --fit shrinks the stage on screens shorter than its content. ---------- */
:where(.home-page) .pin {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

:where(.home-page) .stage {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: calc(1080 * var(--u));
    transform: translateY(-50%) scale(var(--fit, 1));
}

:where(.home-page) .chip {
    position: absolute;
    left: var(--gutter);
    top: calc(96 * var(--u));
    padding: 8px 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

/* ---------- HOW WE WORK (Figma "Imagine · Strategize · Execute", Step 0–3: glow 704 at x 18, y 188; T 440 × 429 at x 150, y 325;
   rail at x 730; words 132px at x 820, y 250 / 400 / 550; copy at x 820, y 764) ---------- */
:where(.home-page) .ise {
    height: 400vh;
    background: #050505;
    color: #fff;
    --fill: 100;
}

/* Step 0: the T sits in the middle at 580 × 566; it shrinks into its place on the left for steps 1–3 */
:where(.home-page) .ise__logo {
    position: absolute;
    left: calc(18 * var(--u));
    top: calc(188 * var(--u));
    width: calc(704 * var(--u));
    height: calc(704 * var(--u));
    transition: transform 1.1s var(--ease);
}

:where(.home-page) .ise[data-step="0"] .ise__logo {
    transform: translateX(calc(590 * var(--u))) scale(1.318);
}

:where(.home-page) .ise__glow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: filter 1s ease;
}

:where(.home-page) .ise__t {
    position: absolute;
    left: calc(132 * var(--u));
    top: calc(137.5 * var(--u));
    width: calc(440 * var(--u));
    height: calc(429 * var(--u));
}

/* the colourless glass the colours flow back into */
:where(.home-page) .ise__t--ghost {
    object-fit: contain;
    filter: grayscale(1) brightness(.62);
    opacity: .55;
    transition: opacity .8s ease;
}

:where(.home-page) .ise__t--color {
    overflow: visible;
}

/* the colour layer is revealed through a mask: a thick stroke along the tube's centre line (#ise-line, length 100)
   drawn up to --fill, a circle for each dot, and a full-size rect for the fully coloured states */
:where(.home-page) .ise__m-line {
    fill: none;
    stroke: #fff;
    stroke-width: 150;
    stroke-linecap: round;
    stroke-dasharray: 100 100;
    stroke-dashoffset: calc(100 - var(--fill));
    transition: stroke-dashoffset 1.2s var(--ease);
}

:where(.home-page) .ise__m-line--cut {
    stroke: #000;
}

:where(.home-page) .ise__m-dot {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    transition: transform .6s var(--ease);
}

:where(.home-page) .ise__m-all {
    opacity: 0;
    transition: opacity .5s ease;
}

:where(.home-page) .ise__dots {
    fill: none;
    stroke: rgba(255, 255, 255, .4);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: .01 .7;
    opacity: 0;
    transition: opacity .6s ease;
}

/* step 0: full colour */
:where(.home-page) .ise[data-step="0"] :is(.ise__m-dot, .ise__m-all) {
    transform: none;
    opacity: 1;
}

:where(.home-page) .ise[data-step="0"] .ise__t--ghost {
    opacity: 0;
}

/* step 1 Imagine: the red dot, the red foot and the orange of the stem */
:where(.home-page) .ise[data-step="1"] {
    --fill: 27;
}

/* step 2 Strategize: on through the yellow stem and curve to the blue end of the bar */
:where(.home-page) .ise[data-step="2"] {
    --fill: 75;
}

:where(.home-page) :is(.ise[data-step="1"], .ise[data-step="2"]) .ise__m-dot--red {
    transform: none;
}

:where(.home-page) :is(.ise[data-step="1"], .ise[data-step="2"]) .ise__dots {
    opacity: 1;
}

/* step 3 Execute: the green bar and the green dot complete the mark, then the glass is fully lit */
:where(.home-page) .ise[data-step="3"] .ise__m-dot {
    transform: none;
}

:where(.home-page) .ise[data-step="3"] .ise__m-dot--green {
    transition-delay: .7s;
}

:where(.home-page) .ise[data-step="3"] .ise__m-all {
    opacity: 1;
    transition-delay: 1.1s;
}

:where(.home-page) .ise[data-step="3"] .ise__t--ghost {
    opacity: 0;
    transition-delay: 1.2s;
}

/* the glow behind the T takes the colour of the step (the asset is green) */
:where(.home-page) .ise[data-step="1"] .ise__glow {
    filter: hue-rotate(-82deg) saturate(1.5);
}

:where(.home-page) .ise[data-step="2"] .ise__glow {
    filter: hue-rotate(-38deg) saturate(1.2);
}

:where(.home-page) .ise__progress {
    position: absolute;
    left: calc(660 * var(--u));
    top: calc(320 * var(--u));
    width: calc(90 * var(--u));
    height: calc(440 * var(--u));
    transition: opacity .6s;
}

:where(.home-page) .ise__progress::before {
    content: "";
    position: absolute;
    left: calc(70 * var(--u));
    top: 0;
    width: 1px;
    height: 100%;
    background: #27272a;
}

:where(.home-page) .ise__progress li {
    position: absolute;
    left: calc(70 * var(--u));
    width: 0;
    height: 0;
}

:where(.home-page) .ise__progress li:nth-child(1) {
    top: calc(49 * var(--u));
}

:where(.home-page) .ise__progress li:nth-child(2) {
    top: calc(219 * var(--u));
}

:where(.home-page) .ise__progress li:nth-child(3) {
    top: calc(389 * var(--u));
}

:where(.home-page) .ise__progress img {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 10px;
    height: 10px;
    max-width: none;
}

:where(.home-page) .ise__progress li::after {
    content: "";
    position: absolute;
    left: -8px;
    top: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: scale(0);
    transition: transform .4s var(--ease);
}

:where(.home-page) .ise__progress li:nth-child(1)::after {
    background: linear-gradient(135deg, #ef4136, #f7941d);
}

:where(.home-page) .ise__progress li:nth-child(2)::after {
    background: linear-gradient(135deg, #ffc20e, #00aeef);
}

:where(.home-page) .ise__progress li:nth-child(3)::after {
    background: #8dc63f;
}

:where(.home-page) .ise__progress li.is-active::after {
    transform: scale(1);
}

:where(.home-page) .ise__steps, :where(.home-page) .ise__step {
    display: contents;
}

:where(.home-page) .ise__word {
    position: absolute;
    left: calc(820 * var(--u));
    font-weight: 600;
    font-size: calc(132 * var(--u));
    line-height: 1;
    letter-spacing: -.04em;
    color: #27272a;
    white-space: nowrap;
    transition: color .5s, opacity .7s, transform .9s var(--ease);
}

:where(.home-page) .ise__step:nth-child(1) .ise__word {
    top: calc(250 * var(--u));
}

:where(.home-page) .ise__step:nth-child(2) .ise__word {
    top: calc(400 * var(--u));
    transition-delay: .06s;
}

:where(.home-page) .ise__step:nth-child(3) .ise__word {
    top: calc(550 * var(--u));
    transition-delay: .12s;
}

:where(.home-page) .ise__desc {
    position: absolute;
    left: calc(820 * var(--u));
    top: calc(764 * var(--u));
    width: calc(760 * var(--u));
    font-size: var(--fs-lead-lg);
    line-height: var(--lh-body);
    color: #a1a1aa;
    opacity: 0;
    transform: translateY(calc(24 * var(--u)));
    transition: opacity .5s, transform .6s var(--ease);
}

:where(.home-page) .ise__step.is-active .ise__word {
    color: #fff;
}

:where(.home-page) .ise__step.is-active .ise__desc {
    opacity: 1;
    transform: none;
}

:where(.home-page) .ise[data-step="0"] .ise__progress {
    opacity: 0;
}

:where(.home-page) .ise[data-step="0"] .ise__word {
    opacity: 0;
    transform: translateX(calc(80 * var(--u)));
}

:where(.home-page) .ise[data-step="0"] .ise__desc {
    opacity: 0;
}

/* ---------- SERVICES (Figma "Services (stacked cards on scroll)", Step 1–5: label y 72, heading 104, copy at x 1200, y 100;
   cards 1680 × 640 at y 220: title at x 63, y 99; video 440 × 440 at x 699; list at x 1219) ---------- */
:where(.home-page) .services {
    height: 460vh;
    background: #050505;
    color: #fff;
}

:where(.home-page) .services__head > div {
    position: absolute;
    left: var(--gutter);
    top: calc(72 * var(--u));
}

:where(.home-page) .services__title {
    margin-top: calc(14 * var(--u));
    font-weight: 600;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
    white-space: nowrap;
}

:where(.home-page) .services__lead {
    position: absolute;
    right: var(--gutter);
    top: calc(100 * var(--u));
    width: max(400px, calc(600 * var(--u)));
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #a1a1aa;
}

:where(.home-page) .services__cards {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(280 * var(--u));
    height: calc(640 * var(--u));
}

/* each card after the first starts one screen down; script.js moves --t from 0 to 1 as it slides over the previous one */
:where(.home-page) .scard {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: calc(636 * var(--u)) calc(440 * var(--u)) minmax(0, 1fr);
    align-items: start;
    padding: calc(99 * var(--u)) calc(63 * var(--u)) 0;
    border: 1px solid #232327;
    border-radius: max(20px, calc(28 * var(--u)));
    background: #111113;
    overflow: hidden;
    transform: translateY(calc((1 - var(--t, 1)) * 100vh));
    will-change: transform;
}

:where(.home-page) .scard:not(:first-child) {
    --t: 0;
}

:where(.home-page) .scard__main, :where(.home-page) .scard__image, :where(.home-page) .scard__list {
    position: relative;
}

:where(.home-page) .scard__title {
    width: calc(580 * var(--u));
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

:where(.home-page) .scard__btn {
    position: absolute;
    left: 0;
    bottom: calc(-36 * var(--u));
}

/* button bottom at y 575 of the 640 card */
:where(.home-page) .scard__main {
    height: calc(440 * var(--u));
}

/* video holder */
:where(.home-page) .scard__image {
    width: calc(440 * var(--u));
    aspect-ratio: 1;
    border: 1px solid #27272a;
    border-radius: max(14px, calc(20 * var(--u)));
    background: #0b0b0c;
    overflow: hidden;
}

:where(.home-page) .scard__image video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* the cloud and cybersecurity videos carry a blue and a red object; in greys they match the other three */
:where(.home-page) .scard__image video.is-mono {
    filter: grayscale(1) contrast(1.06);
}

:where(.home-page) .scard__list {
    display: grid;
    gap: max(9px, calc(16 * var(--u)));
    margin: calc(4 * var(--u)) 0 0 calc(80 * var(--u));
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #d4d4d8;
}

:where(.home-page) .scard__list li {
    display: flex;
    align-items: flex-start;
    gap: max(10px, calc(14 * var(--u)));
}

:where(.home-page) .scard__list li::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 0.48em;
    background: url("../images/bullet.svg") center / 100% 100% no-repeat;
}

/* ---------- PRODUCT VIDEO (Figma "Product video (grows to full screen on scroll)", Size=Small / Full: text at x 120, centred;
   frame 960 wide at x 840, radius 28. The frame is 16:9 (960 × 540, y 270) to fit the supplied clip; Figma's placeholder is 960 × 700) ---------- */
:where(.home-page) .pvideo {
    height: 260vh;
    background: #fff;
}

:where(.home-page) .pvideo__text {
    position: absolute;
    left: var(--gutter);
    top: 50%;
    display: grid;
    gap: calc(28 * var(--u));
    justify-items: start;
    transform: translateY(-50%);
    opacity: calc(1 - var(--p, 0) * 3);
}

:where(.home-page) .pvideo__title {
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    white-space: nowrap;
}

:where(.home-page) .pvideo__lead {
    width: max(380px, calc(560 * var(--u)));
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.home-page) .pvideo__slot {
    position: absolute;
    right: var(--gutter);
    top: calc(270 * var(--u));
    width: calc(960 * var(--u));
    height: calc(540 * var(--u));
    visibility: hidden;
}

/* script.js moves the frame from the slot to the full screen; this is its resting place without JS */
:where(.home-page) .pvideo__video {
    position: absolute;
    right: var(--gutter);
    top: calc(50% - 270 * var(--u));
    width: calc(960 * var(--u));
    height: calc(540 * var(--u));
    border-radius: calc(28 * var(--u));
    overflow: hidden;
    background: #e9f5e6;
    will-change: left, top, width, height;
}

:where(.home-page) .pvideo__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* pause / play */
:where(.home-page) .pvideo__toggle {
    position: absolute;
    right: max(12px, calc(28 * var(--u)));
    bottom: max(12px, calc(28 * var(--u)));
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    background: rgba(9, 9, 11, .55);
    cursor: pointer;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background-color .2s ease;
}

:where(.home-page) .pvideo__toggle:hover, :where(.home-page) .pvideo__toggle:focus-visible {
    background: rgba(9, 9, 11, .8);
}

:where(.home-page) .pvideo__toggle span {
    width: 12px;
    height: 14px;
    border: solid #fff;
    border-width: 0 4px;
}

:where(.home-page) .pvideo__toggle[aria-pressed="true"] span {
    width: 0;
    height: 0;
    margin-left: 3px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
    border-width: 8px 0 8px 12px;
}

/* product artwork: short looping videos (already cropped to the portrait strip Figma shows), with the first frame as
   poster; icons from one sprite */
:where(.home-page) .pshot {
    aspect-ratio: 318.383 / 431.668;
    background: #2f2f2f;
    overflow: hidden;
}

:where(.home-page) .pshot video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(.home-page) .pshot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .2);
}

:where(.home-page) .pshot--route::after {
    content: none;
}

:where(.home-page) .picon {
    position: relative;
    overflow: hidden;
}

:where(.home-page) .picon img {
    position: absolute;
    max-width: none;
    height: 451.66%;
}

:where(.home-page) .picon--sharepay {
    aspect-ratio: 36.444 / 56;
}

:where(.home-page) .picon--sharepay img {
    left: -2.93%;
    top: -276.59%;
    width: 728.97%;
}

:where(.home-page) .picon--trixio {
    aspect-ratio: 46.445 / 56;
}

:where(.home-page) .picon--trixio img {
    left: -470.74%;
    top: -60.24%;
    width: 572.76%;
}

:where(.home-page) .picon--trixloop {
    aspect-ratio: 33.16 / 56;
}

:where(.home-page) .picon--trixloop img {
    left: -403.81%;
    top: -270.32%;
    width: 801.86%;
}

:where(.home-page) .picon--route {
    aspect-ratio: 50.537 / 56;
}

:where(.home-page) .picon--route img {
    left: -56.12%;
    top: -58.47%;
    width: 525.81%;
}

/* ---------- PRODUCTS (Figma "Products (horizontal scroll)": label y 120, heading 152, copy at x 1240, y 150;
   cards 396 × 640, 32 apart, at y 330: the first starts at x 1404 and the row ends with the four across the page) ---------- */
:where(.home-page) .products {
    height: 320vh;
    background: #050505;
    color: #fff;
}

:where(.home-page) .products__head > div {
    position: absolute;
    left: var(--gutter);
    top: calc(120 * var(--u));
}

:where(.home-page) .products__title {
    margin-top: calc(14 * var(--u));
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    white-space: nowrap;
}

:where(.home-page) .products__lead {
    position: absolute;
    right: var(--gutter);
    top: calc(150 * var(--u));
    width: max(380px, calc(560 * var(--u)));
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: #a1a1aa;
}

/* script.js sets --x (px): the distance the row still has to travel */
:where(.home-page) .products__track {
    position: absolute;
    left: var(--gutter);
    top: calc(330 * var(--u));
    display: flex;
    gap: calc(32 * var(--u));
    transform: translateX(var(--x, 0px));
    will-change: transform;
}

:where(.home-page) .pcard {
    position: relative;
    flex: none;
    width: calc(396 * var(--u));
    height: max(420px, calc(640 * var(--u)));
    padding: calc(79 * var(--u)) calc(23 * var(--u)) 0;
    border: 1px solid #232327;
    border-radius: max(18px, calc(24 * var(--u)));
    background: #111113;
    overflow: hidden;
    opacity: var(--o, 1);
}

/* in the opening frame only the first card is on screen; the rest sit one gutter further out */
:where(.home-page) .pcard:nth-child(2) {
    margin-left: calc((1 - var(--p, 1)) * 120 * var(--u));
}

:where(.home-page) .pcard__icon {
    position: absolute;
    left: calc(343 * var(--u));
    top: calc(11 * var(--u));
    height: calc(56 * var(--u));
    transform: translateX(-50%);
}

:where(.home-page) .pcard__media {
    position: relative;
    height: calc(290 * var(--u));
    border-radius: max(12px, calc(16 * var(--u)));
    background: #0b0b0c;
    overflow: hidden;
}

:where(.home-page) .pcard__media .pshot {
    position: absolute;
    left: 0;
    top: calc(-70.83 * var(--u));
    width: 100%;
    border-radius: calc(5.923 * var(--u));
}

:where(.home-page) .pcard__title {
    margin-top: calc(26 * var(--u));
    font-weight: 600;
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
}

:where(.home-page) .pcard__desc {
    margin-top: calc(9 * var(--u));
    font-size: var(--fs-body-sm);
    line-height: 1.5;
    color: #a1a1aa;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

:where(.home-page) .pcard__cta {
    position: absolute;
    left: calc(23 * var(--u));
    right: calc(23 * var(--u));
    bottom: calc(23 * var(--u));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: max(44px, calc(56 * var(--u)));
    padding: 0 max(6px, calc(8 * var(--u))) 0 max(16px, calc(24 * var(--u)));
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-body-sm);
    line-height: normal;
    white-space: nowrap;
    transition: background-color .2s ease;
}

:where(.home-page) .pcard__cta:hover, :where(.home-page) .pcard__cta:focus-visible {
    background: rgba(255, 255, 255, .2);
}

:where(.home-page) .pcard__cta-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: max(32px, calc(40 * var(--u)));
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    font-size: var(--fs-body);
    line-height: 1;
    color: #09090b;
    transition: transform .2s ease;
}

:where(.home-page) .pcard__cta:hover .pcard__cta-icon, :where(.home-page) .pcard__cta:focus-visible .pcard__cta-icon {
    transform: translateX(2px);
}

/* the position bar and swipe hint exist only in the mobile / tablet layout (see the responsive block) */
:where(.home-page) .products__progress, :where(.home-page) .products__swipe {
    display: none;
}

/* ---------- INDUSTRIES (Figma "Industries (slider)", 1920 × 980: label y 140, heading 172, cards 600 × 500 at y 330, 24 apart, bar at y 886) ---------- */
:where(.home-page) .industries {
    background: #f4f4f5;
    padding: calc(140 * var(--u)) 0 calc(92 * var(--u));
    overflow: hidden;
}

:where(.home-page) .industries__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 var(--gutter);
}

:where(.home-page) .industries__title {
    margin-top: calc(14 * var(--u));
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

:where(.home-page) .industries__controls {
    display: flex;
    gap: max(8px, calc(12 * var(--u)));
}

:where(.home-page) .round-btn {
    display: grid;
    place-items: center;
    width: max(44px, calc(56 * var(--u)));
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    transition: transform .2s var(--ease);
}

:where(.home-page) .round-btn:hover, :where(.home-page) .round-btn:focus-visible {
    transform: scale(1.06);
}

:where(.home-page) .round-btn--light {
    background: #fff;
    border: 1px solid #d4d4d8;
    color: #09090b;
}

:where(.home-page) .round-btn--dark {
    background: #09090b;
    border: 1px solid #09090b;
    color: #fff;
}

:where(.home-page) .round-btn:disabled {
    cursor: default;
    transform: none;
}

/* the row: native horizontal scroll with snap (buttons step it; touch can swipe it) */
:where(.home-page) .industries__viewport {
    margin-top: calc(81 * var(--u));
    padding: 0 var(--gutter);
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

:where(.home-page) .industries__viewport::-webkit-scrollbar {
    display: none;
}

:where(.home-page) .industries__track {
    display: flex;
    gap: calc(24 * var(--u));
    width: max-content;
}

:where(.home-page) .icard {
    position: relative;
    flex: none;
    width: max(280px, calc(600 * var(--u)));
    aspect-ratio: 600 / 500;
    overflow: hidden;
    border-radius: max(16px, calc(24 * var(--u)));
    background: #27272a;
    color: #fff;
    scroll-snap-align: start;
}

:where(.home-page) .icard__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease);
}

:where(.home-page) .icard::before, :where(.home-page) .icard::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

:where(.home-page) .icard::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .78) 100%);
}

/* darker wash behind the description while it is open */
:where(.home-page) .icard::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .82) 60%);
    opacity: 0;
    transition: opacity .4s ease;
}

:where(.home-page) .icard__text {
    position: absolute;
    z-index: 2;
    left: max(20px, calc(32 * var(--u)));
    right: max(20px, calc(32 * var(--u)));
    bottom: max(20px, calc(32 * var(--u)));
}

:where(.home-page) .icard__text small {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

:where(.home-page) .icard__text h3 {
    margin-top: 8px;
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
}

/* description: opens on hover or focus (always open on the mobile layout) */
:where(.home-page) .icard__text p {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .88);
    transition: max-height .5s var(--ease), opacity .35s ease, margin-top .5s var(--ease);
}

:where(.home-page) .icard:hover .icard__text p, :where(.home-page) .icard:focus-visible .icard__text p {
    max-height: 14em;
    opacity: 1;
    margin-top: max(8px, calc(12 * var(--u)));
}

:where(.home-page) .icard:hover::before, :where(.home-page) .icard:focus-visible::before {
    opacity: 1;
}

:where(.home-page) .icard:hover .icard__img, :where(.home-page) .icard:focus-visible .icard__img {
    transform: scale(1.04);
}

:where(.home-page) .icard:focus-visible {
    outline-offset: -4px !important;
}

:where(.home-page) .industries__progress {
    height: 2px;
    margin: calc(56 * var(--u)) var(--gutter) 0;
    background: #e4e4e7;
}

:where(.home-page) .industries__progress span {
    display: block;
    width: 25%;
    height: 100%;
    background: #09090b;
    transition: width .3s var(--ease);
}

/* ---------- INSIGHTS (Figma "Home – Improved" › Blog, 1920 × 972: head at y 160, posts 544 × 436 at y 376, 24 apart) ---------- */
:where(.home-page) .blog {
    padding: calc(160 * var(--u)) var(--gutter);
    background: #fff;
}

:where(.home-page) .blog__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

:where(.home-page) .blog__title {
    margin-top: calc(16 * var(--u));
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

/* Figma "Link – View all insights (hover underline)" */
:where(.home-page) .ulink {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    flex: none;
    color: #09090b;
}

:where(.home-page) .ulink__row {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-body-lg);
    line-height: normal;
    white-space: nowrap;
}

:where(.home-page) .ulink::after {
    content: "";
    width: 0;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ef4136 0%, #f7941d 20%, #ffc20e 40%, #8dc63f 60%, #00aeef 80%, #2e6fd8 100%);
    transition: width .45s var(--ease);
}

:where(.home-page) .ulink:hover::after, :where(.home-page) .ulink:focus-visible::after {
    width: 100%;
}

:where(.home-page) .blog__posts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(24 * var(--u));
    margin-top: calc(64 * var(--u));
}

:where(.home-page) .post {
    display: grid;
    gap: max(14px, calc(20 * var(--u)));
    align-content: start;
    justify-items: start;
    min-width: 0;
    color: #09090b;
}

:where(.home-page) .post__img {
    width: 100%;
    height: auto;
    aspect-ratio: 544 / 340;
    border-radius: max(14px, calc(20 * var(--u)));
    object-fit: cover;
    transition: transform .6s var(--ease), filter .6s;
}

:where(.home-page) .post:hover .post__img, :where(.home-page) .post:focus-visible .post__img {
    transform: translateY(-4px);
    filter: brightness(1.08);
}

:where(.home-page) .post__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-caption);
    line-height: normal;
    color: #71717a;
}

:where(.home-page) .post__dot {
    margin: 0 .35em;
    font-style: normal;
}

:where(.home-page) .post__tag {
    padding: 4px 10px;
    border-radius: 999px;
    background: #f4f4f5;
    font-weight: 500;
    font-size: 13px;
    color: #3f3f46;
}

:where(.home-page) .post__title {
    font-weight: 600;
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
    letter-spacing: var(--ls-h6);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

:where(.home-page) .post__title:hover {
    text-decoration: underline;
}

/* ---------- TECH STACK (Figma "Home – Improved" › Tech stack, 1920 × 1000: text 560 wide at x 120; wall 1040 × 680 at x 760, y 160;
   wall = "Tech stack wall (vertical loop)": three columns of 304 × 128 cards, 20 apart) ---------- */
:where(.home-page) .tech {
    display: flex;
    align-items: center;
    gap: calc(80 * var(--u));
    padding: calc(160 * var(--u)) var(--gutter);
    background: #fff;
}

:where(.home-page) .tech__text {
    flex: none;
    width: calc(560 * var(--u));
    display: grid;
    gap: calc(28 * var(--u));
    justify-items: start;
}

:where(.home-page) .tech__title {
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

:where(.home-page) .tech__lead {
    max-width: calc(520 * var(--u));
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.home-page) .tech__cats {
    width: 100%;
}

:where(.home-page) .tech__cats > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: max(14px, calc(20 * var(--u))) 0;
    border-top: 1px solid #e4e4e7;
}

:where(.home-page) .tech__cats dt {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-body-lg);
    line-height: normal;
}

:where(.home-page) .tech__cats dd {
    font-size: var(--fs-body);
    line-height: normal;
    color: #71717a;
    text-align: right;
}

:where(.home-page) .wall {
    position: relative;
    flex: 1;
    min-width: 0;
    height: calc(680 * var(--u));
    border-radius: max(20px, calc(32 * var(--u)));
    background: #0a0a0a;
    overflow: hidden;
}

:where(.home-page) .wall__glow {
    position: absolute;
    max-width: none;
}

:where(.home-page) .wall__glow--cool {
    left: calc(-240 * var(--u));
    top: calc(-300 * var(--u));
    width: calc(760 * var(--u));
    height: calc(760 * var(--u));
}

:where(.home-page) .wall__glow--warm {
    left: calc(560 * var(--u));
    top: calc(280 * var(--u));
    width: calc(700 * var(--u));
    height: calc(700 * var(--u));
}

:where(.home-page) .wall__cols {
    position: absolute;
    left: calc(40 * var(--u));
    top: 0;
    display: flex;
    gap: calc(24 * var(--u));
}

/* script.js duplicates each column's cards; one set is 8 × (128 + 20) = 1184 tall */
:where(.home-page) .wall__col {
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--u));
    width: calc(304 * var(--u));
    animation: wall-up 36s linear infinite;
}

:where(.home-page) .wall__col--reverse {
    animation-name: wall-down;
}

@keyframes wall-up {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(calc(-1184 * var(--u)));
    }
}

@keyframes wall-down {
    from {
        transform: translateY(calc(-1184 * var(--u)));
    }

    to {
        transform: translateY(0);
    }
}

:where(.home-page) .tcard {
    flex: none;
    display: flex;
    align-items: center;
    gap: calc(18 * var(--u));
    height: calc(128 * var(--u));
    padding: 0 calc(20 * var(--u));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: calc(22 * var(--u));
    background: #141416;
}

:where(.home-page) .tcard__logo {
    position: relative;
    flex: none;
    width: calc(88 * var(--u));
    height: calc(88 * var(--u));
    border-radius: calc(18 * var(--u));
    background: #fff;
    overflow: hidden;
}

:where(.home-page) .tlogo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(64 * var(--u));
    height: calc(64 * var(--u));
    overflow: hidden;
    transform: translate(-50%, -50%);
}

:where(.home-page) .tlogo img {
    position: absolute;
    max-width: none;
}

:where(.home-page) .tlogo--azure img {
    left: -15.27%;
    top: 22.42%;
    width: 125.27%;
    height: 57.58%;
}

:where(.home-page) .tlogo--aws {
    height: calc(57.6 * var(--u));
}

:where(.home-page) .tlogo--aws img {
    left: .02%;
    top: 12.96%;
    width: 99.95%;
    height: 74.07%;
}

:where(.home-page) .tlogo--nextjs img {
    left: -40.7%;
    top: -38.43%;
    width: 224.43%;
    height: 178.52%;
}

:where(.home-page) .tlogo--strava {
    height: calc(38.788 * var(--u));
}

:where(.home-page) .tlogo--strava img {
    left: -8.84%;
    top: 0;
    width: 117.68%;
    height: 100%;
}

:where(.home-page) .tlogo--gcloud img {
    left: -57.84%;
    top: -23.49%;
    width: 186.84%;
    height: 122.41%;
}

:where(.home-page) .tlogo--garmin img {
    left: 0;
    top: 36.67%;
    width: 100%;
    height: 26.66%;
}

:where(.home-page) .tlogo--zoho img {
    left: 0;
    top: 14.65%;
    width: 100%;
    height: 70.7%;
}

:where(.home-page) .tlogo--fitbit img {
    left: 4.84%;
    top: 41.78%;
    width: 82.26%;
    height: 20.4%;
}

:where(.home-page) .tcard__text {
    display: grid;
    gap: calc(6 * var(--u));
    min-width: 0;
    white-space: nowrap;
}

:where(.home-page) .tcard__text strong {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: max(13px, calc(20 * var(--u)));
    line-height: 1.21;
    color: #fff;
}

:where(.home-page) .tcard__text small {
    font-size: max(11px, calc(15 * var(--u)));
    line-height: 1.3;
    color: #a1a1aa;
}

:where(.home-page) .wall__fade {
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(160 * var(--u));
    pointer-events: none;
}

:where(.home-page) .wall__fade--top {
    top: 0;
    background: linear-gradient(180deg, #0a0a0a, rgba(10, 10, 10, 0));
}

:where(.home-page) .wall__fade--bottom {
    bottom: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0), #0a0a0a);
}

/* ---------- RESPONSIVE ---------- */
/* laptops narrower than the wall + text need: text above a full-width wall */
@media (max-width: 1200px) {
    :where(.home-page) .tech {
        flex-direction: column;
        align-items: stretch;
        gap: 48px;
        padding: 96px var(--gutter);
    }

    :where(.home-page) .tech__text {
        width: auto;
        max-width: 720px;
        gap: 20px;
    }

    :where(.home-page) .tech__lead {
        max-width: 560px;
    }

    :where(.home-page) .wall {
        flex: none;
        --u: 1px;
        height: clamp(420px, 56vw, 600px);
    }

    :where(.home-page) .wall__cols {
        left: 50%;
        margin-left: -480px;
    }

    :where(.home-page) .blog__posts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 24px;
    }

    /* the section intros sit beside the heading, close above the cards: a size down keeps them clear */
    /* the longest service button would otherwise reach the video beside it */
    :where(.home-page) .scard__btn {
        padding: 16px 22px;
        font-size: 15px;
    }
}

/* mobile layout: narrow, portrait or short screens (same query as every other page). Sections leave the pinned
   stages and stack in normal flow at their Figma sizes (--u: 1px) with their own type scale. */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    .home-page {
        --u: 1px;
    }

    /* hero: text at the bottom, the element fills the screen behind it */
    :where(.home-page) .hero {
        align-items: flex-end;
        min-height: max(584px, 61svh);
        padding-bottom: calc(64px + var(--mbar-h));
    }

    /* the mobile action bar sits over the bottom of the screen */
    :where(.home-page) .hero__video {
        object-position: 80% 50%;
    }

    :where(.home-page) .hero__shade {
        display: block;
        background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .25) 35%, rgba(0, 0, 0, .9) 100%);
    }

    :where(.home-page) .years {
        left: auto;
        right: var(--gutter);
        top: max(120px, 17svh);
        --bx0: -46vw;
        --bx1: 0vw;
        --by0: 0vh;
        --by1: 18vh;
    }

    /* drifts across the top, above the text */
    :where(.home-page) .hero__content {
        gap: 24px;
    }

    :where(.home-page) .hero h1 {
        font-size: max(34px, 5.5vw);
    }

    :where(.home-page) .hero__sub {
        max-width: 480px;
    }

    /* about + tour: steps in two columns */
    :where(.home-page) .about {
        padding: 88px var(--gutter) 80px;
    }

    :where(.home-page) .about__title {
        margin-top: 20px;
    }

    :where(.home-page) .about__lead {
        margin-top: 20px;
        max-width: 640px;
    }

    :where(.home-page) .tour {
        width: 100%;
        max-width: 720px;
        margin-top: 40px;
    }

    :where(.home-page) .tour__frame {
        padding: 8px;
        border-radius: 24px;
    }

    :where(.home-page) .tour__card {
        border-radius: 16px;
    }

    :where(.home-page) .tour__frame {
        margin-top: 36px;
    }

    :where(.home-page) .tour__status {
        padding: 8px 14px;
    }

    :where(.home-page) .tour__progress {
        margin-top: 24px;
    }

    :where(.home-page) .tour__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
        margin-top: 24px;
    }

    /* pinned sections become normal flow */
    :where(.home-page) .pin {
        position: static;
        height: auto;
        overflow: visible;
    }

    :where(.home-page) .stage {
        position: static;
        height: auto;
        transform: none;
    }

    :where(.home-page) .chip {
        position: static;
        display: inline-block;
    }

    /* how we work: full-colour T, then the three words with their copy */
    :where(.home-page) .ise {
        height: auto;
    }

    :where(.home-page) .ise__stage {
        padding: 72px var(--gutter) 80px;
    }

    :where(.home-page) .ise__logo, :where(.home-page) .ise[data-step] .ise__logo {
        position: relative;
        left: auto;
        top: auto;
        width: min(320px, 100%);
        height: auto;
        aspect-ratio: 1;
        margin: 16px auto 0;
        transform: none;
    }

    :where(.home-page) .ise__t {
        left: 18.75%;
        top: 19.53%;
        width: 62.5%;
        height: 60.94%;
    }

    :where(.home-page) .ise[data-step] .ise__t--ghost, :where(.home-page) .ise[data-step] .ise__dots, :where(.home-page) .ise__progress {
        display: none;
    }

    :where(.home-page) .ise[data-step] .ise__m-all {
        opacity: 1;
    }

    :where(.home-page) .ise[data-step] .ise__glow {
        filter: none;
    }

    :where(.home-page) .ise__steps {
        display: grid;
        gap: 36px;
        margin-top: 24px;
    }

    :where(.home-page) .ise__step {
        display: block;
        padding-top: 28px;
        border-top: 1px solid #27272a;
    }

    :where(.home-page) .ise__word, :where(.home-page) .ise[data-step] .ise__word {
        position: static;
        font-size: clamp(44px, 12vw, 80px);
        color: #fff;
        opacity: 1;
        transform: none;
    }

    :where(.home-page) .ise__desc, :where(.home-page) .ise[data-step] .ise__desc {
        position: static;
        width: auto;
        max-width: 600px;
        margin-top: 16px;
        opacity: 1;
        transform: none;
    }

    /* services: cards in normal flow; title, video, list, button */
    :where(.home-page) .services {
        height: auto;
    }

    :where(.home-page) .services__stage {
        padding: 72px var(--gutter);
    }

    :where(.home-page) .services__head > div, :where(.home-page) .services__lead {
        position: static;
    }

    :where(.home-page) .services__title {
        margin-top: 14px;
        white-space: normal;
    }

    :where(.home-page) .services__lead {
        width: auto;
        max-width: 600px;
        margin-top: 20px;
    }

    :where(.home-page) .services__cards {
        position: static;
        display: grid;
        gap: 20px;
        height: auto;
        margin-top: 40px;
    }

    :where(.home-page) .scard {
        position: relative;
        inset: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 32px 28px;
        border-radius: 24px;
        transform: none;
    }

    :where(.home-page) .scard__main {
        display: contents;
    }

    :where(.home-page) .scard__title {
        width: auto;
    }

    :where(.home-page) .scard__image {
        width: 100%;
        max-width: 440px;
    }

    :where(.home-page) .scard__list {
        gap: 12px;
        margin: 0;
    }

    :where(.home-page) .scard__btn {
        position: relative;
        bottom: auto;
        order: 5;
        justify-self: start;
        max-width: 100%;
        white-space: normal;
    }

    /* product video: text above the frame */
    :where(.home-page) .pvideo {
        height: auto;
        padding: 72px var(--gutter);
    }

    :where(.home-page) .pvideo__text {
        position: static;
        gap: 20px;
        transform: none;
        opacity: 1;
    }

    :where(.home-page) .pvideo__title {
        white-space: normal;
    }

    :where(.home-page) .pvideo__lead {
        width: auto;
        max-width: 560px;
    }

    :where(.home-page) .pvideo__slot {
        display: none;
    }

    :where(.home-page) .pvideo__video {
        position: relative;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        margin-top: 40px;
        border-radius: 20px !important;
    }

    /* products: a swipeable row of cards at their Figma size */
    :where(.home-page) .products {
        height: auto;
    }

    :where(.home-page) .products__stage {
        padding: 72px 0;
    }

    :where(.home-page) .products__head {
        padding: 0 var(--gutter);
    }

    :where(.home-page) .products__head > div, :where(.home-page) .products__lead {
        position: static;
    }

    :where(.home-page) .products__title {
        margin-top: 14px;
        white-space: normal;
    }

    :where(.home-page) .products__lead {
        width: auto;
        max-width: 560px;
        margin-top: 20px;
    }

    :where(.home-page) .products__track {
        position: static;
        gap: 16px;
        margin-top: 40px;
        padding: 0 var(--gutter);
        scroll-padding-inline: var(--gutter);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        transform: none;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    :where(.home-page) .products__track::-webkit-scrollbar {
        display: none;
    }

    :where(.home-page) .pcard {
        height: 640px;
        opacity: 1;
        scroll-snap-align: start;
    }

    :where(.home-page) .pcard:nth-child(2) {
        margin-left: 0;
    }

    /* narrow windows with a mouse (no touch, scrollbar hidden): the row can be dragged; script.js adds .is-dragging while it is */
    @media (pointer: fine) {
        :where(.home-page) .products__track {
            cursor: grab;
        }
    }

    :where(.home-page) .products__track.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        scroll-behavior: auto;
        user-select: none;
    }

    :where(.home-page) .products__track.is-dragging a {
        pointer-events: none;
    }

    /* position bar: the thumb is as wide as the visible share of the row (--sw) and sits at the scroll position (--sp), both set by script.js */
    :where(.home-page) .products__progress {
        display: block;
        height: 2px;
        margin: 28px var(--gutter) 0;
        border-radius: 2px;
        background: rgba(255, 255, 255, .14);
    }

    :where(.home-page) .products__progress span {
        display: block;
        width: var(--sw, 25%);
        height: 100%;
        margin-left: calc(var(--sp, 0) * (100% - var(--sw, 25%)));
        border-radius: inherit;
        background: #fff;
        transition: width .2s ease;
    }

    /* swipe hint: a pointing hand nudging sideways with chevrons lighting up towards the hidden cards; fades out after the first swipe */
    :where(.home-page) .products__swipe {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 22px;
        padding: 0 var(--gutter);
        font-family: var(--font-inter);
        font-weight: 500;
        font-size: var(--fs-label);
        line-height: 1;
        letter-spacing: .02em;
        color: rgba(255, 255, 255, .72);
        transition: opacity .45s ease, visibility .45s;
    }

    :where(.home-page) .products.is-swiped .products__swipe {
        opacity: 0;
        visibility: hidden;
    }

    :where(.home-page) .products__swipe-hand {
        flex: none;
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        color: #fff;
        animation: products-swipe-hand 1.8s ease-in-out infinite;
    }

    :where(.home-page) .products__swipe-hand svg {
        width: 100%;
        height: 100%;
    }

    :where(.home-page) .products__swipe-arrows {
        display: inline-flex;
        gap: 1px;
    }

    :where(.home-page) .products__swipe-arrows i {
        display: block;
        width: 7px;
        height: 7px;
        margin-left: -3px;
        border-top: 1.5px solid currentColor;
        border-right: 1.5px solid currentColor;
        transform: rotate(45deg);
        opacity: .3;
        animation: products-swipe-chevron 1.8s ease-in-out infinite;
    }

    :where(.home-page) .products__swipe-arrows i:nth-child(2) {
        animation-delay: .15s;
    }

    :where(.home-page) .products__swipe-arrows i:nth-child(3) {
        animation-delay: .3s;
    }

    @keyframes products-swipe-hand {
        0%, 100% {
            transform: translateX(-5px) rotate(-6deg);
        }

        50% {
            transform: translateX(5px) rotate(4deg);
        }
    }

    @keyframes products-swipe-chevron {
        0%, 100% {
            opacity: .3;
        }

        50% {
            opacity: 1;
        }
    }

    /* industries: smaller, taller cards with the description always open */
    :where(.home-page) .industries {
        padding: 72px 0 64px;
    }

    :where(.home-page) .industries__viewport {
        margin-top: 32px;
    }

    :where(.home-page) .industries__track {
        gap: 16px;
    }

    :where(.home-page) .icard {
        width: min(82vw, 420px);
        aspect-ratio: 4 / 5;
        border-radius: 20px;
    }

    :where(.home-page) .icard::before {
        opacity: 1;
    }

    :where(.home-page) .icard__text {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }

    :where(.home-page) .icard__text p {
        max-height: none;
        opacity: 1;
        margin-top: 10px;
    }

    :where(.home-page) .industries__progress {
        margin-top: 32px;
    }

    /* insights */
    :where(.home-page) .blog {
        padding: 72px var(--gutter);
    }

    :where(.home-page) .blog__head {
        flex-wrap: wrap;
        gap: 20px;
    }

    :where(.home-page) .blog__posts {
        gap: 36px 20px;
        margin-top: 36px;
    }

    :where(.home-page) .post {
        gap: 14px;
    }

    /* tech stack */
    :where(.home-page) .tech {
        padding: 72px var(--gutter);
    }
}

@media (max-width: 700px) {
    :where(.home-page) .blog__posts {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(.home-page) .scard {
        padding: 28px 22px;
    }

    :where(.home-page) .pcard {
        width: min(396px, 80vw);
    }

    /* the next card peeks in from the right (about 36px on a 390px screen) */
    :where(.home-page) .pcard__icon {
        left: auto;
        right: 28px;
        transform: none;
    }

    :where(.home-page) .wall {
        height: 460px;
    }
}

@media (max-width: 560px) {
    :where(.home-page) .hero h1 {
        font-size: 9vw;
    }

    :where(.home-page) .hero__sub {
        font-size: 16px;
        max-width: none;
    }

    :where(.home-page) .hero__actions {
        gap: 12px;
    }

    :where(.home-page) .years {
        display: none;
    }

    :where(.home-page) .tech__cats > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    :where(.home-page) .tech__cats dd {
        text-align: left;
    }

    :where(.home-page) .tour__steps {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* landscape phones (short landscape screens): hero text beside the element instead of stacked below it */
@media (max-height: 540px) and (orientation: landscape) {
    :where(.home-page) .hero {
        align-items: center;
        min-height: max(320px, 100svh);
        padding: 80px var(--gutter) 24px;
    }

    :where(.home-page) .hero__shade {
        background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .6) 30%, rgba(0, 0, 0, 0) 60%);
    }

    :where(.home-page) .hero__content {
        gap: 14px;
        max-width: 62vw;
    }

    :where(.home-page) .hero h1 {
        font-size: clamp(26px, 4.2vw, 36px);
    }

    :where(.home-page) .hero__sub {
        font-size: 15px;
        max-width: 46vw;
    }

    :where(.home-page) .hero__actions {
        padding-top: 4px;
    }

    :where(.home-page) .years {
        display: grid;
        top: auto;
        bottom: 20px;
        right: 96px;
        width: 96px;
        --bx0: -10vw;
        --bx1: 0vw;
        --by0: -34vh;
        --by1: 0vh;
    }

    /* clear of the WhatsApp button */
    :where(.home-page) .years strong {
        font-size: 34px;
    }

    :where(.home-page) .years span {
        font-size: 10px;
    }
}

@media (hover: none) {
    :where(.home-page) .icard::before {
        opacity: 1;
    }

    :where(.home-page) .icard__text p {
        max-height: none;
        opacity: 1;
        margin-top: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page *, .home-page *::before, .home-page *::after {
        transition-duration: .01ms !important;
    }

    :where(.home-page) .years, :where(.home-page) .hl, :where(.home-page) .w__in, :where(.home-page) .hero__sub, :where(.home-page) .hero__actions, :where(.home-page) .wall__col, :where(.home-page) .tour__cursor, :where(.home-page) .products__swipe-hand, :where(.home-page) .products__swipe-arrows i {
        animation: none !important;
    }
}

/* ================================================================================================================
   ABOUT (about.html – Figma "About – Improved")
   ================================================================================================================ */
/* Techrish about – built from Figma "About – Improved" (1920px desktop frame).
   The shared parts (nav incl. the light variant, mega menu, buttons, CTA, footer and WhatsApp are in COMMON COMPONENTS above).
   Desktop sizes are Figma px × --u (one Figma pixel = 100vw / 1920) with minimums. */
:where(.about-page) .ahero, .about-page {
    --u: calc(100vw / 1920);
}

/* shared: section label, heading, button */
/* .kicker / .kicker--light / .a-h2: see COMMON COMPONENTS (identical on Home, About, Life, Careers and Contact) */
/* .pbtn--outline: see COMMON COMPONENTS (same rule) */
/* ---------- HERO (Figma › Hero, 1920 × 770: navigation 120 + content 650) ---------- */
:where(.about-page) .ahero {
    position: relative;
    background: #fff;
    color: #09090b;
    text-align: center;
    padding: calc(clamp(88px, 6.25vw, 120px) + max(56px, calc(110 * var(--u)))) var(--gutter) max(56px, calc(72 * var(--u)));
}

:where(.about-page) .ahero__content {
    display: grid;
    justify-items: center;
    gap: 28px;
}

:where(.about-page) .ahero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 14px;
    border-radius: 999px;
    background: #f4f4f5;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    color: #3f3f46;
}

:where(.about-page) .ahero__eyebrow img {
    width: 8px;
    height: 8px;
}

:where(.about-page) .ahero h1 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
}

:where(.about-page) .ahero__sub {
    max-width: 720px;
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.about-page) .ahero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding-top: 12px;
}

/* ---------- WHO WE ARE (Figma "About statement (scroll reveal)", 1920 × 1102) ---------- */
:where(.about-page) .statement {
    background: #000;
    color: #fff;
    padding: calc(160 * var(--u)) var(--gutter);
}

:where(.about-page) .statement__text {
    margin-top: max(20px, calc(35 * var(--u)));
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: max(28px, calc(64 * var(--u)));
    line-height: 1.18;
    letter-spacing: -.02em;
}

/* JS wraps each word; the words start dim (Step 0) and light up with the scroll (Step 1–8) */
:where(.about-page) .statement.is-reveal .statement__w {
    color: rgba(255, 255, 255, .2);
}

:where(.about-page) .statement__rule {
    height: 1px;
    margin: max(48px, calc(122 * var(--u))) 0 0;
    border: 0;
    background: rgba(255, 255, 255, .16);
}

/* stats: columns at x 0 / 576 / 1152 of 1680 */
:where(.about-page) .statement__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-top: max(32px, calc(56 * var(--u)));
}

:where(.about-page) .statement__stats li {
    display: grid;
    gap: max(10px, calc(20 * var(--u)));
}

:where(.about-page) .statement__stats strong {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: max(48px, calc(104 * var(--u)));
    line-height: 1;
    letter-spacing: -.04em;
}

:where(.about-page) .statement__stats li > span {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: normal;
    color: rgba(255, 255, 255, .6);
}

/* ---------- OUR PEOPLE (Figma "Team photo (intro)", 1920 × 1240, Step 0–1) ---------- */
/* The frame is laid out at its Step 1 size (full width, 820 tall at y 420); --p (0 → 1, set by JS on scroll) opens the
   clip from the Step 0 box (1280 × 600 at x 320, y 520, radius 24) and scales the photo so Step 0 frames it exactly. */
/* margin -1px: overlaps the black statement above so a fractional boundary can't leave a light seam between them */
:where(.about-page) .people {
    --p: 0;
    margin-top: -1px;
    background: #000;
    color: #fff;
    padding-top: max(72px, calc(140 * var(--u)));
    overflow: hidden;
}

:where(.about-page) .people__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(560 * var(--u));
    column-gap: 40px;
    align-items: start;
    padding: 0 var(--gutter);
}

:where(.about-page) .people__head .kicker {
    grid-column: 1;
}

:where(.about-page) .people__head h2 {
    grid-column: 1;
    margin-top: calc(23 * var(--u));
}

:where(.about-page) .people__copy {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: calc(56 * var(--u));
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .72);
}

:where(.about-page) .people__stage {
    position: relative;
    height: calc(820 * var(--u));
    margin-top: calc(85 * var(--u));
}

:where(.about-page) .people__frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: inset(calc(100 * var(--u) * (1 - var(--p))) calc(320 * var(--u) * (1 - var(--p))) calc(120 * var(--u) * (1 - var(--p))) round calc(24 * var(--u) * (1 - var(--p))));
}

/* scaled 1280 / 1920 at Step 0 about the Step 0 box's centre (y 400 of the frame); the photo box runs from y -50 to
   850 so that, scaled, it still covers that whole box (100 – 700) */
:where(.about-page) .people__photo {
    position: absolute;
    left: 0;
    top: calc(-50 * var(--u));
    width: 100%;
    height: calc(900 * var(--u));
    max-width: none;
    object-fit: cover;
    transform-origin: 50% calc(450 * var(--u));
    transform: scale(calc(.66667 + .33333 * var(--p)));
}

:where(.about-page) .people__shade {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: calc(.55 - .25 * var(--p));
}

/* "Meet the team": bottom right of the full frame (x 1628, y 1096), rises in with the photo */
:where(.about-page) .people__link {
    position: absolute;
    right: var(--gutter);
    bottom: calc(120 * var(--u));
    display: inline-flex;
    gap: 12px;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-body-lg);
    line-height: normal;
    color: #fff;
}

:where(.about-page) .people__link:hover, :where(.about-page) .people__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

:where(.about-page) .people.is-anim .people__link {
    opacity: var(--p);
    transform: translateY(calc(64 * var(--u) * (1 - var(--p))));
}

:where(.about-page) .people.is-anim .people__photo, :where(.about-page) .people.is-anim .people__frame {
    will-change: transform, clip-path;
}

/* ---------- OUR VALUES (Figma "Our values", 1920 × 1211; rows = "Value row (hover)") ---------- */
:where(.about-page) .values {
    background: #fff;
    color: #09090b;
    padding: calc(160 * var(--u)) var(--gutter);
}

:where(.about-page) .values__head {
    display: grid;
    justify-items: center;
    gap: 20px;
    text-align: center;
}

:where(.about-page) .values__copy {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.about-page) .values__list {
    margin-top: max(40px, calc(80 * var(--u)));
    border-bottom: 1px solid #e4e4e7;
}

/* row: 140 collapsed / 220 expanded at 1680; description column 640 at x 1040 */
:where(.about-page) .value {
    --c: #09090b;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(640 * var(--u));
    min-height: calc(140 * var(--u));
}

:where(.about-page) .value::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: #e4e4e7;
    transition: height .35s ease, background-color .35s ease;
}

:where(.about-page) .value.is-open::before {
    height: 2px;
    background: var(--c);
}

:where(.about-page) .value__head {
    grid-row: 1;
    grid-column: 1 / -1;
    position: relative;
    display: block;
    width: 100%;
    min-height: calc(140 * var(--u));
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

:where(.about-page) .value__head:focus-visible {
    outline: 2px solid #09090b;
    outline-offset: 4px;
}

:where(.about-page) .value__num {
    position: absolute;
    left: 0;
    top: calc(38 * var(--u));
    display: grid;
    place-items: center;
    width: max(48px, calc(64 * var(--u)));
    height: max(48px, calc(64 * var(--u)));
    border-radius: 50%;
    border: 1px solid #d4d4d8;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-body);
    line-height: normal;
    color: #52525b;
    transition: top .45s ease, background-color .35s ease, border-color .35s ease, color .35s ease;
}

:where(.about-page) .value.is-open .value__num {
    top: calc(48 * var(--u));
    background: var(--c);
    border-color: var(--c);
    color: #fff;
}

/* title: centred when collapsed, slides to x 96 when expanded */
:where(.about-page) .value__title {
    position: absolute;
    left: 50%;
    top: calc(46 * var(--u));
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
    transition: left .45s ease, top .45s ease, transform .45s ease;
}

:where(.about-page) .value.is-open .value__title {
    left: calc(96 * var(--u));
    top: calc(56 * var(--u));
    transform: none;
}

/* description: the row grows with it (grid rows 0fr → 1fr) and it fades / rises in */
:where(.about-page) .value__body {
    grid-row: 1;
    grid-column: 2;
    position: relative;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s ease;
    pointer-events: none;
}

:where(.about-page) .value.is-open .value__body {
    grid-template-rows: 1fr;
    pointer-events: auto;
}

:where(.about-page) .value__body > div {
    min-height: 0;
    overflow: hidden;
}

:where(.about-page) .value__body p {
    padding: calc(48 * var(--u)) 0 calc(73 * var(--u));
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
    opacity: 0;
    transform: translateY(calc(26 * var(--u)));
    transition: opacity .35s ease, transform .45s ease;
}

:where(.about-page) .value.is-open .value__body p {
    opacity: 1;
    transform: none;
    transition-delay: .1s;
}

/* ---------- HOW WE WORK (Figma "How we work (orbit)", 1920 × 1400; ring 960 at x 480, y 220) ---------- */
:where(.about-page) .orbit {
    position: relative;
    height: calc(1400 * var(--u));
    background: #000;
    color: #fff;
    overflow: hidden;
}

:where(.about-page) .orbit__ring {
    position: absolute;
    left: calc(480 * var(--u));
    top: calc(220 * var(--u));
    width: calc(960 * var(--u));
    height: calc(960 * var(--u));
}

:where(.about-page) .orbit__track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* quarter arcs (480 × 480): 0–90° top right, 90–180° bottom right, 180–270° bottom left; lit on arrival (JS) */
:where(.about-page) .orbit__arc {
    position: absolute;
    width: 50%;
    height: 50%;
    opacity: 0;
    transition: opacity .5s ease;
}

:where(.about-page) .orbit__arc--1 {
    left: 50%;
    top: 0;
}

:where(.about-page) .orbit__arc--2 {
    left: 50%;
    top: 50%;
}

:where(.about-page) .orbit__arc--3 {
    left: 0;
    top: 50%;
}

:where(.about-page) .orbit__ring.is-lit-1 .orbit__arc--1, :where(.about-page) .orbit__ring.is-lit-2 .orbit__arc--2, :where(.about-page) .orbit__ring.is-lit-3 .orbit__arc--3 {
    opacity: 1;
}

/* the arm spans the ring; turning it (--a, degrees clockwise from the top) carries the dot round the ring */
:where(.about-page) .orbit__arm {
    position: absolute;
    inset: 0;
    transform: rotate(var(--a, 0deg));
    pointer-events: none;
    transition: transform 1.05s cubic-bezier(.45, 0, .55, 1);
}

:where(.about-page) .orbit__arm.is-reset {
    transition: none;
}

:where(.about-page) .orbit__dot {
    position: absolute;
    left: 50%;
    top: 0;
    width: max(16px, calc(22 * var(--u)));
    height: max(16px, calc(22 * var(--u)));
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .4s ease;
}

:where(.about-page) .orbit__dot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

:where(.about-page) .orbit.is-running .orbit__dot {
    opacity: 1;
}

:where(.about-page) .orbit[data-stage="1"] .orbit__dot img:nth-child(1), :where(.about-page) .orbit[data-stage="2"] .orbit__dot img:nth-child(2), :where(.about-page) .orbit[data-stage="3"] .orbit__dot img:nth-child(3), :where(.about-page) .orbit[data-stage="4"] .orbit__dot img:nth-child(4) {
    opacity: 1;
}

/* centre text */
:where(.about-page) .orbit__text {
    position: absolute;
    left: 50%;
    top: calc(531.5 * var(--u));
    transform: translateX(-50%);
    width: calc(640 * var(--u));
    display: grid;
    justify-items: center;
    text-align: center;
}

:where(.about-page) .orbit__text h2 {
    margin-top: calc(20 * var(--u));
}

:where(.about-page) .orbit__copy {
    width: calc(520 * var(--u));
    min-width: 260px;
    margin-top: calc(25 * var(--u));
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .72);
}

/* stage chips: centred on the ring's top / right / bottom / left points */
:where(.about-page) .orbit__stages {
    list-style: none;
    margin: 0;
    padding: 0;
}

:where(.about-page) .chip {
    --c: #fff;
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: flex-start;
    gap: max(12px, calc(16 * var(--u)));
    padding: max(14px, calc(18 * var(--u))) max(18px, calc(24 * var(--u))) max(14px, calc(18 * var(--u))) max(14px, calc(20 * var(--u)));
    background: #141416;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: max(16px, calc(20 * var(--u)));
    opacity: .7;
    transition: opacity .4s ease, border-color .4s ease, box-shadow .4s ease;
}

:where(.about-page) .chip--1 {
    left: calc(960 * var(--u));
    top: calc(220 * var(--u));
}

:where(.about-page) .chip--2 {
    left: calc(1440 * var(--u));
    top: calc(700 * var(--u));
}

:where(.about-page) .chip--3 {
    left: calc(960 * var(--u));
    top: calc(1180 * var(--u));
}

:where(.about-page) .chip--4 {
    left: calc(480 * var(--u));
    top: calc(700 * var(--u));
}

:where(.about-page) .chip__badge {
    flex: none;
    display: grid;
    place-items: center;
    width: max(36px, calc(44 * var(--u)));
    height: max(36px, calc(44 * var(--u)));
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-label);
    line-height: normal;
    transition: background-color .4s ease;
}

:where(.about-page) .chip__text {
    display: grid;
    gap: 4px;
    width: max(170px, calc(250 * var(--u)));
}

:where(.about-page) .chip__text strong {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
    letter-spacing: var(--ls-h6);
}

:where(.about-page) .chip__text span {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    line-height: 1.4;
    color: rgba(255, 255, 255, .55);
    transition: color .4s ease;
}

/* active stage: 2px border (1px border + 1px inset ring, so nothing shifts), badge in the stage colour */
:where(.about-page) .chip.is-active {
    opacity: 1;
    border-color: var(--c);
    box-shadow: inset 0 0 0 1px var(--c);
}

:where(.about-page) .chip.is-active .chip__badge {
    background: var(--c);
}

:where(.about-page) .chip.is-active .chip__text span {
    color: rgba(255, 255, 255, .8);
}

/* ---------- LEADERSHIP TEAM (Figma "Leadership team", 1920 × 2505; cards = "Team card (hover)", 402 × 600) ---------- */
:where(.about-page) .team {
    background: #fff;
    color: #09090b;
    padding: calc(160 * var(--u)) var(--gutter);
}

:where(.about-page) .team__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
}

:where(.about-page) .team__head h2 {
    margin-top: 20px;
}

:where(.about-page) .team__copy {
    flex: 0 1 calc(560 * var(--u));
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.about-page) .team__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: max(40px, calc(56 * var(--u))) max(16px, calc(24 * var(--u)));
    margin-top: max(40px, calc(80 * var(--u)));
}

/* sizes inside the card are Figma px of the 402-wide card, in container units (100cqw = card width; 1px = .24876cqw) */
:where(.about-page) .tcard {
    container-type: inline-size;
}

:where(.about-page) .tcard__inner {
    position: relative;
    height: 149.254cqw;
    overflow: hidden;
    background: #fff;
}

/* photo frame 480 tall; shrinks to 260 on hover, the photo stays 480 and centred (y -110) */
:where(.about-page) .tcard__photo {
    position: relative;
    height: 119.403cqw;
    overflow: hidden;
    border-radius: 4.975cqw;
    background: #f4f4f5;
    transition: height .45s ease;
}

:where(.about-page) .tcard__photo img {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 119.403cqw;
    object-fit: cover;
    transform: translateY(-50%);
}

:where(.about-page) .tcard__arrow {
    position: absolute;
    right: 3.98cqw;
    top: 3.98cqw;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    cursor: pointer;
    width: max(36px, 10.945cqw);
    height: max(36px, 10.945cqw);
    border-radius: 50%;
    background: #fff;
    color: #09090b;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: max(15px, 4.478cqw);
    line-height: 1;
    transition: background-color .3s ease, color .3s ease;
}

:where(.about-page) .tcard__arrow:focus-visible {
    outline: 2px solid #09090b;
    outline-offset: 2px;
}

:where(.about-page) .tcard h3 {
    margin-top: 5.97cqw;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: max(18px, 6.468cqw);
    line-height: 1.2;
    letter-spacing: -.01em;
}

:where(.about-page) .tcard__role, :where(.about-page) .tcard__bio {
    font-family: var(--font-body);
    font-size: max(14px, 4.229cqw);
    line-height: 1.45;
    color: #52525b;
}

:where(.about-page) .tcard__role {
    margin-top: 1.6cqw;
}

:where(.about-page) .tcard__bio {
    margin-top: 9.79cqw;
    opacity: 0;
    transform: translateY(6cqw);
    transition: opacity .35s ease, transform .45s ease;
}

/* email / LinkedIn: bottom of the card (y 548), 52px circles 12 apart */
:where(.about-page) .tcard__social {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    gap: 2.985cqw;
    opacity: 0;
    transform: translateY(15.42cqw);
    transition: opacity .35s ease, transform .45s ease;
}

:where(.about-page) .tcard__social a {
    display: grid;
    place-items: center;
    width: max(40px, 12.935cqw);
    height: max(40px, 12.935cqw);
    border-radius: 50%;
    transition: background-color .2s ease;
}

:where(.about-page) .tcard__social img {
    width: 100%;
    height: 100%;
}

:where(.about-page) .tcard__in {
    border: 1px solid rgba(9, 9, 11, .2);
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: max(16px, 4.975cqw);
    line-height: 1;
    color: #09090b;
}

:where(.about-page) .tcard__social a:hover, :where(.about-page) .tcard__social a:focus-visible {
    background: #f4f4f5;
}

/* open: arrow button / tap (is-open), keyboard focus (own rule: browsers without :has() skip only that one), hover */
:where(.about-page) .tcard.is-open .tcard__photo {
    height: 64.677cqw;
}

:where(.about-page) .tcard.is-open .tcard__arrow {
    background: #09090b;
    color: #fff;
}

:where(.about-page) .tcard.is-open .tcard__bio, :where(.about-page) .tcard.is-open .tcard__social {
    opacity: 1;
    transform: none;
    transition-delay: .08s;
}

:where(.about-page) .tcard:has(:focus-visible) .tcard__photo {
    height: 64.677cqw;
}

:where(.about-page) .tcard:has(:focus-visible) .tcard__arrow {
    background: #09090b;
    color: #fff;
}

:where(.about-page) .tcard:has(:focus-visible) .tcard__bio, :where(.about-page) .tcard:has(:focus-visible) .tcard__social {
    opacity: 1;
    transform: none;
    transition-delay: .08s;
}

@media (hover: hover) {
    :where(.about-page) .tcard:hover .tcard__photo {
        height: 64.677cqw;
    }

    :where(.about-page) .tcard:hover .tcard__arrow {
        background: #09090b;
        color: #fff;
    }

    :where(.about-page) .tcard:hover .tcard__bio, :where(.about-page) .tcard:hover .tcard__social {
        opacity: 1;
        transform: none;
        transition-delay: .08s;
    }
}

/* ---------- LIFE AT TECHRISH (Figma "Life at Techrish slider", 1920 × 1200; strip of 800 × 880 photos 32 apart at x 760) ---------- */
:where(.about-page) .life {
    position: relative;
    height: calc(1200 * var(--u));
    min-height: 760px;
    background: #000;
    color: #fff;
    overflow: hidden;
}

/* left mask (x 0–744): photos sliding left pass under it */
:where(.about-page) .life::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(744 * var(--u));
    background: #000;
}

:where(.about-page) .life__intro, :where(.about-page) .life__caption {
    position: absolute;
    z-index: 2;
    left: var(--gutter);
    width: max(300px, calc(520 * var(--u)));
}

:where(.about-page) .life__intro {
    top: calc(160 * var(--u));
    display: grid;
    justify-items: start;
}

:where(.about-page) .life__intro h2 {
    margin-top: calc(23 * var(--u));
}

:where(.about-page) .life__copy {
    margin-top: calc(17 * var(--u));
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .72);
}

:where(.about-page) .life__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: calc(40 * var(--u));
    padding: max(14px, calc(18 * var(--u))) max(22px, calc(28 * var(--u)));
    border-radius: 999px;
    background: #fff;
    color: #09090b;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: normal;
    transition: background-color .2s ease, gap .2s ease;
}

:where(.about-page) .life__btn:hover, :where(.about-page) .life__btn:focus-visible {
    background: #e4e4e7;
    gap: 16px;
}

:where(.about-page) .life__caption {
    bottom: calc(160 * var(--u));
}

:where(.about-page) .life__text {
    transition: opacity .25s ease, transform .25s ease;
}

:where(.about-page) .life__text.is-swapping {
    opacity: 0;
    transform: translateY(8px);
}

:where(.about-page) .life__count {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label);
    line-height: normal;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .6);
}

:where(.about-page) .life__caption h3 {
    margin-top: calc(17 * var(--u));
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
}

:where(.about-page) .life__desc {
    margin-top: calc(12 * var(--u));
    min-height: 3em;
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .72);
}

:where(.about-page) .life__controls {
    display: flex;
    gap: calc(16 * var(--u));
    margin-top: calc(82 * var(--u));
}

:where(.about-page) .life__btn-nav {
    display: grid;
    place-items: center;
    width: max(48px, calc(64 * var(--u)));
    height: max(48px, calc(64 * var(--u)));
    padding-bottom: 7px;
    border-radius: 50%;
    cursor: pointer;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: max(20px, calc(26 * var(--u)));
    line-height: 1;
    transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}

:where(.about-page) .life__btn-nav--prev {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
}

:where(.about-page) .life__btn-nav--next {
    background: #fff;
    border: 1px solid #fff;
    color: #09090b;
}

:where(.about-page) .life__btn-nav--prev:hover:not(:disabled), :where(.about-page) .life__btn-nav--prev:focus-visible {
    border-color: #fff;
}

:where(.about-page) .life__btn-nav--next:hover:not(:disabled), :where(.about-page) .life__btn-nav--next:focus-visible {
    background: #e4e4e7;
}

:where(.about-page) .life__btn-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

:where(.about-page) .life__btn-nav:disabled {
    cursor: default;
}

/* the ends keep their Figma look (as the home Industries slider) */
:where(.about-page) .life__viewport {
    position: absolute;
    left: calc(760 * var(--u));
    top: calc(160 * var(--u));
    bottom: calc(160 * var(--u));
    right: 0;
    touch-action: pan-y;
}

:where(.about-page) .life__strip {
    display: flex;
    gap: calc(32 * var(--u));
    height: 100%;
    transition: transform .7s cubic-bezier(.65, 0, .35, 1);
    will-change: transform;
}

:where(.about-page) .life__slide {
    flex: none;
    height: 100%;
    aspect-ratio: 800 / 880;
    overflow: hidden;
    border-radius: max(16px, calc(24 * var(--u)));
    background: #18181b;
    opacity: .45;
    transition: opacity .6s ease;
}

:where(.about-page) .life__slide.is-active {
    opacity: 1;
}

:where(.about-page) .life__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    :where(.about-page) .value::before, :where(.about-page) .value__num, :where(.about-page) .value__title, :where(.about-page) .value__body, :where(.about-page) .value__body p, :where(.about-page) .orbit__arc, :where(.about-page) .orbit__dot, :where(.about-page) .chip, :where(.about-page) .chip__badge, :where(.about-page) .chip__text span, :where(.about-page) .tcard__photo, :where(.about-page) .tcard__arrow, :where(.about-page) .tcard__bio, :where(.about-page) .tcard__social, :where(.about-page) .life__text, :where(.about-page) .life__strip, :where(.about-page) .life__slide, :where(.about-page) .life__btn, :where(.about-page) .life__btn-nav {
        transition: none;
    }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
    :where(.about-page) .team__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* mobile layout: narrow, portrait or short screens (matches the home page's mobile breakpoint) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    :where(.about-page) .ahero {
        padding-top: calc(88px + 48px);
        padding-bottom: 64px;
    }

    :where(.about-page) .ahero__content {
        gap: 22px;
    }

    :where(.about-page) .statement {
        padding: 72px var(--gutter);
    }

    :where(.about-page) .statement__text {
        font-size: clamp(26px, 5.4vw, 44px);
    }

    :where(.about-page) .statement__rule {
        margin-top: 48px;
    }

    :where(.about-page) .statement__stats strong {
        font-size: clamp(44px, 9vw, 72px);
    }

    /* people: heading, copy, then the rounded photo in the gutters (no scroll growth) */
    :where(.about-page) .people {
        padding: 72px 0;
    }

    :where(.about-page) .people__head {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }

    :where(.about-page) .people__head h2 {
        margin-top: 0;
    }

    :where(.about-page) .people__copy {
        grid-column: 1;
        grid-row: auto;
        margin-top: 0;
    }

    :where(.about-page) .people__stage {
        height: auto;
        margin: 36px var(--gutter) 0;
        display: grid;
        gap: 20px;
    }

    :where(.about-page) .people__frame {
        position: relative;
        clip-path: none;
        aspect-ratio: 1280 / 600;
        border-radius: 16px;
    }

    :where(.about-page) .people__photo {
        top: 0;
        height: 100%;
        transform: none;
    }

    :where(.about-page) .people__link {
        position: static;
        justify-self: start;
    }

    :where(.about-page) .values {
        padding: 72px var(--gutter);
    }

    /* rows: badge + title on one line, the description opens under them */
    :where(.about-page) .value {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    :where(.about-page) .value__head {
        min-height: 0;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 22px 0;
    }

    :where(.about-page) .value__num, :where(.about-page) .value.is-open .value__num {
        position: static;
    }

    :where(.about-page) .value__title, :where(.about-page) .value.is-open .value__title {
        position: static;
        transform: none;
        white-space: normal;
    }

    :where(.about-page) .value__body {
        grid-row: 2;
        grid-column: 1;
    }

    :where(.about-page) .value__body p {
        padding: 0 0 24px 64px;
        transform: translateY(12px);
    }

    /* orbit: heading, then the four stages as a list (the active one cycles) */
    :where(.about-page) .orbit {
        height: auto;
        padding: 72px var(--gutter);
    }

    :where(.about-page) .orbit__ring {
        display: none;
    }

    :where(.about-page) .orbit__text {
        position: static;
        transform: none;
        width: auto;
        justify-items: start;
        text-align: left;
    }

    :where(.about-page) .orbit__text h2 {
        margin-top: 14px;
    }

    :where(.about-page) .orbit__copy {
        width: auto;
        min-width: 0;
        max-width: 560px;
        margin-top: 16px;
    }

    :where(.about-page) .orbit__stages {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 32px;
    }

    :where(.about-page) .chip {
        position: static;
        transform: none;
    }

    :where(.about-page) .chip__text {
        width: auto;
    }

    :where(.about-page) .team {
        padding: 72px var(--gutter);
    }

    :where(.about-page) .team__head {
        flex-direction: column;
        align-items: flex-start;
    }

    :where(.about-page) .team__head h2 {
        margin-top: 14px;
    }

    :where(.about-page) .team__copy {
        flex: none;
    }

    :where(.about-page) .team__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 36px;
    }

    /* life: intro, the photo strip (next photo peeks in), then the caption and arrows */
    :where(.about-page) .life {
        height: auto;
        min-height: 0;
        padding: 72px 0;
        display: grid;
        gap: 32px;
    }

    :where(.about-page) .life::before {
        display: none;
    }

    :where(.about-page) .life__intro, :where(.about-page) .life__caption {
        position: static;
        width: auto;
        padding: 0 var(--gutter);
    }

    :where(.about-page) .life__intro h2 {
        margin-top: 14px;
    }

    :where(.about-page) .life__copy {
        margin-top: 12px;
    }

    :where(.about-page) .life__btn {
        margin-top: 24px;
    }

    :where(.about-page) .life__viewport {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        right: auto;
        padding-left: var(--gutter);
        overflow: hidden;
    }

    :where(.about-page) .life__strip {
        gap: 16px;
        height: auto;
    }

    :where(.about-page) .life__slide {
        height: auto;
        width: min(74vw, 440px, calc((100svh - 120px) * .909));
    }

    :where(.about-page) .life__caption h3 {
        margin-top: 10px;
    }

    :where(.about-page) .life__desc {
        margin-top: 8px;
    }

    :where(.about-page) .life__controls {
        margin-top: 24px;
        gap: 12px;
    }
}

@media (max-width: 560px) {
    :where(.about-page) .ahero__actions .pbtn--outline {
        padding: 15px 19px;
    }

    :where(.about-page) .statement__stats {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    :where(.about-page) .orbit__stages {
        grid-template-columns: 1fr;
    }

    :where(.about-page) .team__grid {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }

    /* each card already keeps room below for its bio */
    :where(.about-page) .value__body p {
        padding-left: 0;
    }
}

/* ================================================================================================================
   PRODUCTS (products.html – Figma "Product – Improved")
   ================================================================================================================ */
/* Techrish products page – built from Figma "Product – Improved" (1920px desktop frame).
   Shared parts (nav, mega menu, pill buttons, CTA, footer, WhatsApp) are in COMMON COMPONENTS above.
   Desktop sizes are Figma px × --u (one Figma pixel: 100vw / 1920) with minimums. */
/* ---------- HERO (Figma › Hero, 1920 × 770: navigation 120 + content 650) ---------- */
:where(.products-page) .phero {
    --u: calc(100vw / 1920);
    position: relative;
    background: #fff;
    color: #09090b;
    text-align: center;
    /* content: 110 below the 120 navigation, 72 at the bottom */
    padding: calc(clamp(88px, 6.25vw, 120px) + max(48px, calc(110 * var(--u)))) var(--gutter) max(48px, calc(72 * var(--u)));
}

:where(.products-page) .phero__content {
    display: grid;
    justify-items: center;
    gap: max(22px, calc(28 * var(--u)));
}

:where(.products-page) .phero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 14px;
    border-radius: 999px;
    background: #f4f4f5;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    color: #3f3f46;
}

:where(.products-page) .phero__eyebrow img {
    width: 8px;
    height: 8px;
}

:where(.products-page) .phero h1 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
}

:where(.products-page) .phero__sub {
    max-width: max(320px, calc(720 * var(--u)));
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.products-page) .phero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding-top: 12px;
}

/* secondary pill (Figma "Secondary button": white, 1px #d4d4d8) */
:where(.products-page) .pbtn--outline {
    background: #fff;
    color: #09090b;
    border: 1px solid #d4d4d8;
    padding: 19px 31px;
    transition: border-color .2s ease, gap .2s ease;
}

:where(.products-page) .pbtn--outline:hover, :where(.products-page) .pbtn--outline:focus-visible {
    border-color: #09090b;
}

/* ---------- SHOWCASE (Figma "Showcase Slider", 1920 × 820: 1000 × 625 slides at y 40, controls at y 748) ---------- */
:where(.products-page) .showcase {
    --u: calc(100vw / 1920);
    --slide-w: max(calc(1000 * var(--u)), min(84vw, 640px));
    overflow: hidden;
    background: #fff;
    padding: max(16px, calc(40 * var(--u))) 0 max(48px, calc(64 * var(--u)));
}

:where(.products-page) .showcase__track {
    position: relative;
    height: calc(var(--slide-w) * .625);
    touch-action: pan-y;
}

/* JS sets --pos (-2…2 from the active slide), --sign and --off: neighbours sit 80 (Figma) apart,
   24 lower and tilted 3°; slides two away are hidden */
:where(.products-page) .showcase__slide {
    --pos: 0;
    --sign: 0;
    --off: 0;
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--slide-w);
    aspect-ratio: 1000 / 625;
    overflow: hidden;
    border-radius: max(14px, calc(20 * var(--u)));
    background: #0b0b0b;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .16);
    container-type: inline-size;
    transform: translateX(calc(-50% + var(--pos) * var(--slide-w) * 1.08)) translateY(calc(var(--off) * var(--slide-w) * .024)) rotate(calc(var(--sign) * 3deg));
    transition: transform .8s cubic-bezier(.22, .61, .36, 1), opacity .8s ease;
    user-select: none;
    -webkit-user-select: none;
}

:where(.products-page) .showcase__slide.is-far {
    opacity: 0;
    pointer-events: none;
}

:where(.products-page) .showcase__slide.is-side {
    cursor: pointer;
}

:where(.products-page) .showcase__slide.no-anim {
    transition: none;
}

:where(.products-page) .showcase__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

:where(.products-page) .showcase__shade {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: .35;
    pointer-events: none;
    transition: opacity .8s ease;
}

:where(.products-page) .showcase__slide.is-active .showcase__shade {
    opacity: 0;
}

/* slides 3–4: artwork tile 914.894 × 1240.426 at y -308 (units: cqw = 1% of the slide width) */
:where(.products-page) .showcase__tile {
    position: absolute;
    left: 0;
    top: -30.8cqw;
    width: 100%;
    height: 124.0426cqw;
    border-radius: 1.7021cqw;
    background: #2f2f2f;
}

:where(.products-page) .showcase__dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .2);
}

:where(.products-page) .showcase__arrow {
    position: absolute;
    right: 5.1064cqw;
    bottom: 5.1064cqw;
    width: 4.6809cqw;
    height: 4.6809cqw;
}

:where(.products-page) .showcase__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: max(36px, calc(83 * var(--u)));
}

:where(.products-page) .showcase__btn {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid #d4d4d8;
    border-radius: 999px;
    background: #fff;
    color: #09090b;
    cursor: pointer;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

:where(.products-page) .showcase__btn:hover, :where(.products-page) .showcase__btn:focus-visible {
    background: #09090b;
    color: #fff;
    border-color: #09090b;
}

:where(.products-page) .showcase__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

:where(.products-page) .showcase__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #d4d4d8;
    cursor: pointer;
    transition: width .35s ease, background-color .35s ease;
}

:where(.products-page) .showcase__dot.is-active {
    width: 28px;
    background: #09090b;
}

/* ---------- PRODUCTS (Figma › Products, 1920 × 1126: header, then four 402 × 560 cards, 24 apart) ---------- */
:where(.products-page) .plist {
    --u: calc(100vw / 1920);
    background: #fff;
    color: #09090b;
    padding: max(72px, calc(160 * var(--u))) var(--gutter);
}

:where(.products-page) .plist__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: max(40px, calc(72 * var(--u)));
}

:where(.products-page) .plist__title {
    display: grid;
    gap: 20px;
}

:where(.products-page) .plist__eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label);
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #71717a;
}

:where(.products-page) .plist__eyebrow::after {
    content: "";
    flex: 0 1 64px;
    height: 1px;
    background: #d4d4d8;
}

:where(.products-page) .plist h2 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

:where(.products-page) .plist__intro {
    max-width: max(300px, calc(520 * var(--u)));
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.products-page) .plist__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

/* inner sizes scale with the card (Figma card = 402 wide; 1cqw = 4.02 Figma px), capped at the Figma size */
:where(.products-page) .plist__card {
    --inset: clamp(16px, 7.96cqw, 32px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: block;
    container-type: inline-size;
    aspect-ratio: 402 / 560;
    border-radius: 20px;
    background: #0b0b0b;
    color: #fff;
    transition: opacity .7s ease, transform .7s ease;
}

/* artwork tile: 413.036 × 560 at x -25 of the 402 card (Figma leaves a dark strip on the right) */
:where(.products-page) .plist__art {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
    border-radius: 7.684px;
    background: #2f2f2f;
    transition: transform .7s ease;
}

:where(.products-page) .plist__dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .2);
}

/* top gradient (whole card) + bottom gradient (y 340–560) */
:where(.products-page) .plist__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60.71%, rgba(0, 0, 0, .7) 100%), linear-gradient(180deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .2) 45%, rgba(0, 0, 0, 0) 100%);
}

:where(.products-page) .plist__text {
    position: absolute;
    top: var(--inset);
    left: var(--inset);
    right: var(--inset);
    display: grid;
    gap: clamp(6px, 2.49cqw, 10px);
}

:where(.products-page) .plist__text h3 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: clamp(22px, 7.96cqw, 32px);
    line-height: normal;
    letter-spacing: -.02em;
}

:where(.products-page) .plist__text p {
    max-width: 330px;
    font-family: var(--font-body);
    font-size: clamp(14px, 4.23cqw, 17px);
    line-height: 1.45;
    color: rgba(255, 255, 255, .8);
}

/* Figma "Card CTA": glass pill (338 × 56) with a white arrow disc (40) */
:where(.products-page) .plist__cta {
    position: absolute;
    left: var(--inset);
    right: var(--inset);
    bottom: var(--inset);
    height: clamp(46px, 13.93cqw, 56px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 clamp(5px, 1.99cqw, 8px) 0 clamp(14px, 5.97cqw, 24px);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: clamp(13px, 3.98cqw, 16px);
    white-space: nowrap;
    transition: background-color .3s ease;
}

:where(.products-page) .plist__cta span {
    flex: none;
    display: grid;
    place-items: center;
    width: clamp(34px, 9.95cqw, 40px);
    aspect-ratio: 1;
    border-radius: 999px;
    background: #fff;
    color: #09090b;
    font-size: clamp(15px, 4.48cqw, 18px);
    transform: rotate(-45deg);
    transition: transform .3s ease;
}

:where(.products-page) .plist__card:hover .plist__art {
    transform: scale(1.04);
}

:where(.products-page) .plist__card:hover .plist__cta, :where(.products-page) .plist__card:focus-visible .plist__cta {
    background: rgba(255, 255, 255, .2);
}

:where(.products-page) .plist__card:hover .plist__cta span, :where(.products-page) .plist__card:focus-visible .plist__cta span {
    transform: rotate(0deg);
}

/* scroll reveal (JS adds .is-pending, then removes it once the card is on screen) */
:where(.products-page) .plist__card.is-pending {
    opacity: 0;
    transform: translateY(24px);
}

/* ---------- STATISTICS (Figma › Statistics, 1920 × 621) ---------- */
:where(.products-page) .pstats {
    --u: calc(100vw / 1920);
    display: grid;
    justify-items: center;
    gap: max(48px, calc(80 * var(--u)));
    padding: max(80px, calc(140 * var(--u))) var(--gutter);
    background: #000;
    color: #fff;
    text-align: center;
}

:where(.products-page) .pstats h2 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
}

:where(.products-page) .pstats__row {
    display: flex;
    align-items: center;
}

:where(.products-page) .pstats__item {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 12px;
    width: max(240px, calc(380 * var(--u)));
}

/* 1 × 120 divider between stats */
:where(.products-page) .pstats__item + .pstats__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: max(80px, calc(120 * var(--u)));
    transform: translateY(-50%);
    background: #27272a;
}

:where(.products-page) .pstats__num {
    font-family: var(--font-inter);
    font-weight: 300;
    font-size: max(52px, calc(96 * var(--u)));
    line-height: normal;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

:where(.products-page) .pstats__label {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: normal;
    color: #a1a1aa;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
    :where(.products-page) .plist__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* mobile layout: narrow, portrait or short screens (same query as styles.css) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    :where(.products-page) .plist__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    :where(.products-page) .pstats__row {
        flex-direction: column;
    }

    :where(.products-page) .pstats__item {
        width: min(100%, 320px);
        padding: 24px 0;
    }

    :where(.products-page) .pstats__item + .pstats__item::before {
        top: 0;
        left: 50%;
        width: 100%;
        height: 1px;
        transform: translateX(-50%);
    }
}

@media (max-width: 560px) {
    :where(.products-page) .phero__actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    :where(.products-page) .pbtn--outline {
        padding: 15px 19px;
    }

    :where(.products-page) .showcase__controls {
        gap: 14px;
    }

    :where(.products-page) .plist__grid {
        grid-template-columns: 1fr;
    }

    :where(.products-page) .plist__card {
        width: 100%;
        max-width: 440px;
        margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
    :where(.products-page) .showcase__slide, :where(.products-page) .showcase__shade, :where(.products-page) .showcase__dot, :where(.products-page) .plist__card, :where(.products-page) .plist__art, :where(.products-page) .plist__cta, :where(.products-page) .plist__cta span, :where(.products-page) .pbtn--outline {
        transition: none;
    }

    :where(.products-page) .plist__card.is-pending {
        opacity: 1;
        transform: none;
    }
}

/* ================================================================================================================
   LIFE AT TECHRISH (life.html)
   ================================================================================================================ */
/* Techrish "Life at Techrish" – built from Figma "Life at Techrish – Improved" (1920px desktop frame).
   The shared parts (nav incl. the light variant, mega menu, buttons, footer and WhatsApp are in COMMON COMPONENTS above).
   Desktop sizes are Figma px × --u (one Figma pixel = 100vw / 1920) with minimums. */
.life-page {
    --u: calc(100vw / 1920);
    color: #09090b;
}

/* shared: section label, heading (same as the about page) */
/* .kicker / .kicker--light / .a-h2: see COMMON COMPONENTS (identical on Home, About, Life, Careers and Contact) */
/* ---------- BANNER (Figma "Banner – photo zoom", 1920 × 880; Step 0 → 1 driven by --p) ---------- */
:where(.life-page) .banner {
    --p: 0;
    position: relative;
    background: #fff;
}

:where(.life-page) .banner__stage {
    position: relative;
    height: calc(880 * var(--u));
    overflow: hidden;
}

:where(.life-page) .banner__head {
    position: absolute;
    z-index: 2;
    left: var(--gutter);
    top: calc(160 * var(--u));
    opacity: calc(1 - var(--p));
}

:where(.life-page) .banner__title {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-display);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    color: #09090b;
}

:where(.life-page) .banner__sub {
    margin: calc(24 * var(--u)) 0 0 calc(4 * var(--u));
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: normal;
    color: #52525b;
}

/* photo frame: 980 × 720 at x 610, y 40 (Step 0) → the whole stage (Step 1) */
:where(.life-page) .banner__frame {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    left: calc(610 * var(--u) * (1 - var(--p)));
    top: calc(40 * var(--u) * (1 - var(--p)));
    width: calc(980 * var(--u) + (100% - 980 * var(--u)) * var(--p));
    height: calc(720 * var(--u) + (100% - 720 * var(--u)) * var(--p));
    border-radius: calc(4px * (1 - var(--p)));
}

:where(.life-page) .banner__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(.life-page) .banner__shade {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: calc(.45 * var(--p));
}

:where(.life-page) .banner__facts {
    position: absolute;
    z-index: 2;
    right: var(--gutter);
    top: calc(60 * var(--u));
    margin: 0;
    display: grid;
    gap: calc(63 * var(--u));
    max-width: calc(190 * var(--u));
    justify-items: end;
    text-align: right;
    opacity: calc(1 - var(--p));
}

/* the column is capped at the space beside the photo (which ends 210px from the right edge): values are sized so the
   widest ("100+ events") fits, and a long label wraps onto a second line on small laptops instead of overlapping */
:where(.life-page) .banner__facts dt {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: max(9px, calc(13 * var(--u)));
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #52525b;
}

:where(.life-page) .banner__facts dd {
    margin: calc(8 * var(--u)) 0 0;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: max(15px, calc(30 * var(--u)));
    line-height: normal;
    letter-spacing: -.02em;
    color: #09090b;
    white-space: nowrap;
}

:where(.life-page) .banner__caption {
    position: absolute;
    z-index: 2;
    left: var(--gutter);
    bottom: calc(40 * var(--u));
    color: #fff;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    opacity: var(--p);
    transform: translateY(calc(32px * (1 - var(--p))));
}

:where(.life-page) .banner__hint {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: calc(800 * var(--u));
    transform: translateX(-50%);
    display: inline-flex;
    gap: 10px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label);
    line-height: normal;
    color: #52525b;
    white-space: nowrap;
    opacity: calc(1 - var(--p));
}

:where(.life-page) .banner__hint span {
    transition: transform .2s ease;
}

:where(.life-page) .banner__hint:hover span {
    transform: translateY(3px);
}

/* pinned (desktop, JS): the stage fills the screen so the photo can grow to a full-screen Step 1 */
:where(.life-page) .banner.is-pinned .banner__stage {
    height: 100vh;
    height: 100svh;
}

:where(.life-page) .banner.is-pinned .banner__frame {
    top: calc(max(0px, (100% - 800 * var(--u)) / 2) * (1 - var(--p)));
}

/* ---------- ALBUM (Figma "Album – 3D flipbook", 1920 × 1180; book 1200 × 720 at x 360, y 300) ---------- */
:where(.life-page) .album {
    position: relative;
    background: #f4f4f5;
    padding: calc(110 * var(--u)) var(--gutter) calc(96 * var(--u));
    overflow: hidden;
}

:where(.life-page) .album__head {
    text-align: center;
    display: grid;
    gap: calc(20 * var(--u));
}

/* book sizes are Figma px × --b; --b = --u on desktop, the book shrinks with the screen below */
:where(.life-page) .album__scene {
    --b: var(--u);
    position: relative;
    width: calc(1200 * var(--b));
    height: calc(720 * var(--b));
    margin: calc(80 * var(--u)) auto 0;
}

:where(.life-page) .album__book {
    position: absolute;
    inset: 0;
    border-radius: calc(20 * var(--b));
    background: #fff;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .14);
    perspective: calc(2600 * var(--b));
    transform-style: preserve-3d;
}

:where(.life-page) .album__spread {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

:where(.life-page) .album__page {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    visibility: hidden;
}

:where(.life-page) .album__page--l {
    left: 0;
    border-radius: calc(20 * var(--b)) 0 0 calc(20 * var(--b));
}

:where(.life-page) .album__page--r {
    right: 0;
    border-radius: 0 calc(20 * var(--b)) calc(20 * var(--b)) 0;
}

:where(.life-page) .album__spread.is-current .album__page, :where(.life-page) .album__spread.show-l .album__page--l, :where(.life-page) .album__spread.show-r .album__page--r {
    visibility: visible;
}

:where(.life-page) .album__spread.is-current {
    pointer-events: auto;
}

:where(.life-page) .album__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(.life-page) .album__chip, :where(.life-page) .album__note {
    position: absolute;
    left: calc(24 * var(--b));
    background: #fff;
    color: #09090b;
    font-family: var(--font-body);
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
}

:where(.life-page) .album__chip {
    top: calc(24 * var(--b));
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--b));
    padding: calc(8 * var(--b)) calc(16 * var(--b)) calc(8 * var(--b)) calc(12 * var(--b));
    border-radius: 999px;
    font-size: max(11px, calc(14 * var(--b)));
}

:where(.life-page) .album__chip i {
    width: calc(10 * var(--b));
    height: calc(10 * var(--b));
    border-radius: 50%;
    background: var(--c);
}

:where(.life-page) .album__note {
    bottom: calc(24 * var(--b));
    padding: calc(12 * var(--b)) calc(16 * var(--b));
    border-radius: calc(14 * var(--b));
    font-size: max(11px, calc(15 * var(--b)));
    white-space: pre;
}

/* right page: two tilted polaroids and the caption (Figma "Photo A" 320 × 360 at 48, 40 / "Photo B" 270 × 310 at 268, 250) */
:where(.life-page) .album__polaroid {
    position: absolute;
    margin: 0;
    padding: calc(10 * var(--b));
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

:where(.life-page) .album__polaroid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(.life-page) .album__polaroid--a {
    left: calc(57 * var(--b));
    top: calc(48 * var(--b));
    width: calc(320 * var(--b));
    height: calc(360 * var(--b));
    transform: rotate(-3deg);
}

:where(.life-page) .album__polaroid--b {
    left: calc(278 * var(--b));
    top: calc(259 * var(--b));
    width: calc(270 * var(--b));
    height: calc(310 * var(--b));
    transform: rotate(4deg);
}

:where(.life-page) .album__page--r h3 {
    position: absolute;
    left: calc(48 * var(--b));
    top: calc(600 * var(--b));
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: max(18px, calc(34 * var(--b)));
    line-height: normal;
    letter-spacing: -.02em;
    white-space: nowrap;
}

:where(.life-page) .album__page--r p {
    position: absolute;
    left: calc(48 * var(--b));
    top: calc(648 * var(--b));
    font-family: var(--font-body);
    font-weight: 500;
    font-size: max(11px, calc(16 * var(--b)));
    line-height: normal;
    color: #52525b;
    white-space: nowrap;
}

:where(.life-page) .album__spine {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: rgba(0, 0, 0, .1);
    z-index: 3;
}

/* the turning leaf: hinged on the spine; front = the page it lifts, back = the page it lands as */
:where(.life-page) .album__leaf {
    position: absolute;
    left: 50%;
    top: 0;
    width: 50%;
    height: 100%;
    transform-origin: left center;
    transform-style: preserve-3d;
    z-index: 4;
    display: none;
}

:where(.life-page) .album__leaf.is-on {
    display: block;
}

:where(.life-page) .album__leaf.is-anim {
    transition: transform .9s cubic-bezier(.6, .05, .3, 1);
}

:where(.life-page) .album__face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: #fff;
}

:where(.life-page) .album__face .album__page {
    visibility: visible;
    width: 100%;
    left: 0;
    right: 0;
}

:where(.life-page) .album__face--front {
    border-radius: 0 calc(20 * var(--b)) calc(20 * var(--b)) 0;
}

:where(.life-page) .album__face--back {
    transform: rotateY(180deg);
    border-radius: calc(20 * var(--b)) 0 0 calc(20 * var(--b));
}

:where(.life-page) .album__face::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 30%);
    opacity: var(--shade, 0);
}

:where(.life-page) .album__face--back::after {
    background: linear-gradient(270deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 30%);
}

:where(.life-page) .album__leaf.is-anim .album__face {
    --shade: 1;
    transition: --shade .9s;
}

/* edges of the pages still to come (Figma "Side 2–5": 44 wide at x 1572 + 40 n, 40 shorter each) */
:where(.life-page) .album__sides {
    position: absolute;
    left: 100%;
    top: 0;
    height: 100%;
}

:where(.life-page) .album__side {
    position: absolute;
    left: calc((12 + 40 * (var(--i) - 1)) * var(--b));
    top: calc(20 * var(--i) * var(--b));
    width: calc(44 * var(--b));
    height: calc((720 - 40 * var(--i)) * var(--b));
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: calc(10 * var(--b));
    opacity: calc(1.15 - .15 * var(--i));
    transition: opacity .4s ease, transform .4s ease;
}

:where(.life-page) .album__side img {
    width: calc(1000 * var(--b));
    max-width: none;
    height: 100%;
    object-fit: cover;
    margin-left: calc(-480 * var(--b));
}

:where(.life-page) .album__side.is-used {
    opacity: 0;
    transform: translateX(-12px);
}

:where(.life-page) .album__nav {
    position: absolute;
    top: 50%;
    width: max(48px, calc(72 * var(--u)));
    height: max(48px, calc(72 * var(--u)));
    margin-top: calc(max(48px, 72 * var(--u)) / -2);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #09090b;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
    cursor: pointer;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: max(20px, calc(28 * var(--u)));
    line-height: 1;
    transition: opacity .2s ease, transform .2s ease;
}

:where(.life-page) .album__nav--prev {
    left: calc(-210 * var(--u));
}

:where(.life-page) .album__nav--next {
    right: calc(-210 * var(--u));
}

:where(.life-page) .album__nav:hover:not(:disabled) {
    transform: scale(1.06);
}

:where(.life-page) .album__nav:disabled {
    opacity: .35;
    cursor: default;
}

:where(.life-page) .album__nav:focus-visible {
    outline: 2px solid #09090b;
    outline-offset: 3px;
}

:where(.life-page) .album__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

:where(.life-page) .album__dots {
    margin-top: calc(56 * var(--u));
}

:where(.life-page) .album__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #a1a1aa;
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}

:where(.life-page) .album__dot.is-active {
    width: 28px;
    background: #09090b;
}

/* ---------- MOMENTS (Figma "Moments by year (list)": one list of event rows per year) ---------- */
:where(.life-page) .moments {
    background: #fff;
    padding: calc(160 * var(--u)) var(--gutter) calc(160 * var(--u));
}

:where(.life-page) .moments__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
}

:where(.life-page) .moments__head .a-h2 {
    margin-top: calc(23 * var(--u));
}

:where(.life-page) .moments__years {
    display: grid;
    justify-items: end;
    gap: calc(18 * var(--u));
}

:where(.life-page) .moments__tabs {
    position: relative;
    display: flex;
    gap: calc(48 * var(--u));
}

:where(.life-page) .moments__year {
    padding: 0 0 calc(14 * var(--u));
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
    color: rgba(9, 9, 11, .25);
    transition: color .25s ease;
}

:where(.life-page) .moments__year:hover, :where(.life-page) .moments__year.is-active {
    color: #09090b;
}

:where(.life-page) .moments__year:focus-visible {
    outline: 2px solid #09090b;
    outline-offset: 4px;
}

:where(.life-page) .moments__indicator {
    position: absolute;
    bottom: 0;
    left: var(--x, 0);
    width: var(--w, 0);
    height: 3px;
    background: #09090b;
    transition: left .35s ease, width .35s ease;
}

:where(.life-page) .moments__count {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: normal;
    color: #52525b;
}

:where(.life-page) .moments__list {
    margin-top: calc(72 * var(--u));
    border-bottom: 1px solid #e4e4e7;
}

/* year switch (Figma Phase=Enter → Shown): the rows rise in one after another, the wipe slides up off each cover and
   the photo settles from 105% */
:where(.life-page) .moments__list.is-swapping .moment {
    animation: moment-in .5s ease both;
}

:where(.life-page) .moments__list.is-swapping .moment:nth-child(2) {
    animation-delay: .06s;
}

:where(.life-page) .moments__list.is-swapping .moment:nth-child(3) {
    animation-delay: .12s;
}

:where(.life-page) .moments__list.is-swapping .moment:nth-child(4) {
    animation-delay: .18s;
}

:where(.life-page) .moments__list.is-swapping .moment:nth-child(5) {
    animation-delay: .24s;
}

:where(.life-page) .moments__list.is-swapping .moment__wipe {
    animation: moment-reveal .8s cubic-bezier(.65, 0, .35, 1) both;
}

:where(.life-page) .moments__list.is-swapping .moment__cover img {
    animation: moment-settle .9s ease both;
}

@keyframes moment-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes moment-reveal {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes moment-settle {
    from {
        transform: scale(1.05);
    }

    to {
        transform: scale(1);
    }
}

/* row (Figma "Moment row", 1680 wide): cover flush with the lines of the row, index at x 780, text at x 860, arrow
   button at x 1624. The cover is 423 × 510 (the image size of the reference list, stanzza.design/projects at 1920)
   in place of the 400 × 400 of the Figma row, so the row is 510 tall. */
:where(.life-page) .moment {
    position: relative;
    display: grid;
    grid-template-columns: calc(423 * var(--u)) minmax(0, 1fr);
    min-height: calc(510 * var(--u));
    border-top: 1px solid #e4e4e7;
    color: #09090b;
    transition: border-color .3s ease;
}

:where(.life-page) .moment:hover, :where(.life-page) .moment:focus-visible {
    border-top-color: #09090b;
}

:where(.life-page) .moment__cover {
    position: relative;
    overflow: hidden;
    background: #f4f4f5;
    aspect-ratio: 423 / 510;
}

:where(.life-page) .moment__cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

/* black & white copy on top (grayscale also covers the events whose B&W fill is the colour photo); hover wipes it away */
:where(.life-page) .moment__cover .moment__bw {
    filter: grayscale(1);
    transition: clip-path .7s cubic-bezier(.65, 0, .35, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}

:where(.life-page) .moment__wipe {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    top: -100%;
    background: #f4f4f5;
}

:where(.life-page) .moment:hover .moment__cover img, :where(.life-page) .moment:focus-visible .moment__cover img {
    transform: scale(1.06);
}

:where(.life-page) .moment:hover .moment__bw, :where(.life-page) .moment:focus-visible .moment__bw {
    clip-path: inset(100% 0 0 0);
}

:where(.life-page) .moment:hover .moment__wipe, :where(.life-page) .moment:focus-visible .moment__wipe {
    animation: moment-wipe .7s cubic-bezier(.65, 0, .35, 1) both;
}

@keyframes moment-wipe {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(200%);
    }
}

:where(.life-page) .moment__index {
    position: absolute;
    left: calc(780 * var(--u));
    top: calc(52 * var(--u));
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: normal;
    letter-spacing: .08em;
    color: #52525b;
}

:where(.life-page) .moment__body {
    display: block;
    padding: calc(36 * var(--u)) calc(120 * var(--u)) calc(36 * var(--u)) calc(437 * var(--u));
}

:where(.life-page) .moment__title {
    display: block;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
    transition: transform .35s ease;
}

:where(.life-page) .moment:hover .moment__title, :where(.life-page) .moment:focus-visible .moment__title {
    transform: translateX(calc(16 * var(--u)));
}

:where(.life-page) .moment__date {
    display: block;
    margin-top: calc(20 * var(--u));
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #52525b;
}

:where(.life-page) .moment__desc {
    display: block;
    margin-top: calc(18 * var(--u));
    max-width: calc(560 * var(--u));
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: #52525b;
}

/* "View gallery": bottom of the row, rises in on hover (Figma y 356 → 336 of 400) */
:where(.life-page) .moment__link {
    position: absolute;
    left: calc(860 * var(--u));
    bottom: calc(42 * var(--u));
    display: inline-flex;
    gap: 10px;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: normal;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .3s ease, transform .3s ease;
}

:where(.life-page) .moment:hover .moment__link, :where(.life-page) .moment:focus-visible .moment__link {
    opacity: 1;
    transform: none;
}

:where(.life-page) .moment__arrow {
    position: absolute;
    right: 0;
    top: calc(36 * var(--u));
    display: grid;
    place-items: center;
    width: max(40px, calc(56 * var(--u)));
    height: max(40px, calc(56 * var(--u)));
    border: 1px solid rgba(9, 9, 11, .2);
    border-radius: 50%;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-lead);
    line-height: 1;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

:where(.life-page) .moment:hover .moment__arrow, :where(.life-page) .moment:focus-visible .moment__arrow {
    background: #09090b;
    color: #fff;
    transform: rotate(45deg);
}

:where(.life-page) .moment:focus-visible {
    outline: none;
}

/* "More moments coming soon" (Figma ghost row: 200 tall, dimmed, no cover) */
:where(.life-page) .moment--ghost {
    display: block;
    min-height: calc(200 * var(--u));
}

:where(.life-page) .moment--ghost .moment__index {
    color: rgba(82, 82, 91, .5);
}

:where(.life-page) .moment--ghost .moment__title {
    position: absolute;
    left: calc(860 * var(--u));
    top: calc(36 * var(--u));
    color: rgba(9, 9, 11, .3);
}

/* dark variant (black background): remove the moments--dark class in life.html to go back to the white Figma version */
:where(.life-page) .moments--dark {
    background: #000;
    color: #fff;
}

:where(.life-page) .moments--dark .moments__year {
    color: rgba(255, 255, 255, .3);
}

:where(.life-page) .moments--dark .moments__year:hover, :where(.life-page) .moments--dark .moments__year.is-active {
    color: #fff;
}

:where(.life-page) .moments--dark .moments__year:focus-visible {
    outline-color: #fff;
}

:where(.life-page) .moments--dark .moments__indicator {
    background: #fff;
}

:where(.life-page) .moments--dark .moments__count {
    color: rgba(255, 255, 255, .72);
}

:where(.life-page) .moments--dark .moments__list {
    border-bottom-color: #27272a;
}

:where(.life-page) .moments--dark .moment {
    border-top-color: #27272a;
    color: #fff;
}

:where(.life-page) .moments--dark .moment:hover, :where(.life-page) .moments--dark .moment:focus-visible {
    border-top-color: rgba(255, 255, 255, .7);
}

:where(.life-page) .moments--dark .moment__cover, :where(.life-page) .moments--dark .moment__wipe {
    background: #18181b;
}

:where(.life-page) .moments--dark .moment__index, :where(.life-page) .moments--dark .moment__date {
    color: #a1a1aa;
}

:where(.life-page) .moments--dark .moment__desc {
    color: rgba(255, 255, 255, .72);
}

:where(.life-page) .moments--dark .moment__arrow {
    border-color: rgba(255, 255, 255, .3);
}

:where(.life-page) .moments--dark .moment:hover .moment__arrow, :where(.life-page) .moments--dark .moment:focus-visible .moment__arrow {
    background: #fff;
    color: #09090b;
}

:where(.life-page) .moments--dark .moment--ghost .moment__index {
    color: rgba(161, 161, 170, .5);
}

:where(.life-page) .moments--dark .moment--ghost .moment__title {
    color: rgba(255, 255, 255, .3);
}

/* ---------- EVENT GALLERY (Figma "Event gallery – Overlay", 1920 × 1080): opened by clicking a moment row ---------- */
/* full-screen sheet over the page: "Back to moments" pill at 120, 56; title at y 140; meta right-aligned; then a
   four-column masonry grid (402-wide columns, 24 apart) of every photo of the event. Columns are filled by script.js. */
.is-gallery-open, .is-gallery-open body:where(.life-page) {
    overflow: hidden;
}

:where(.life-page) .gallery {
    --u: calc(100vw / 1920);
    position: fixed;
    inset: 0;
    z-index: 90;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: max(24px, calc(56 * var(--u))) var(--gutter) max(40px, calc(80 * var(--u)));
    background: #fff;
    color: #09090b;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}

:where(.life-page) .gallery[hidden] {
    display: none;
}

:where(.life-page) .gallery.is-open {
    opacity: 1;
    transform: none;
}

:where(.life-page) .gallery__close {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px 14px 20px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5;
    color: inherit;
    cursor: pointer;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: normal;
    transition: background-color .2s ease;
}

:where(.life-page) .gallery__close:hover {
    background: #e4e4e7;
}

:where(.life-page) .gallery__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

:where(.life-page) .gallery__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-top: calc(34 * var(--u));
}

:where(.life-page) .gallery__title {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

:where(.life-page) .gallery__meta {
    padding-bottom: calc(8 * var(--u));
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #52525b;
    white-space: pre;
}

:where(.life-page) .gallery__grid {
    display: flex;
    align-items: flex-start;
    gap: max(12px, calc(24 * var(--u)));
    margin-top: max(28px, calc(54 * var(--u)));
}

:where(.life-page) .gallery__col {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    gap: max(12px, calc(24 * var(--u)));
}

:where(.life-page) .gallery__photo {
    overflow: hidden;
    border-radius: 8px;
    background: #f4f4f5;
}

:where(.life-page) .gallery__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .4s ease;
}

:where(.life-page) .gallery__photo img.is-loaded {
    opacity: 1;
}

/* opened from the dark moments section */
:where(.life-page) .gallery--dark {
    background: #000;
    color: #fff;
}

:where(.life-page) .gallery--dark .gallery__close {
    background: #18181b;
}

:where(.life-page) .gallery--dark .gallery__close:hover {
    background: #27272a;
}

:where(.life-page) .gallery--dark .gallery__meta {
    color: #a1a1aa;
}

:where(.life-page) .gallery--dark .gallery__photo {
    background: #18181b;
}

/* ---------- JOIN (Figma "Join our team", 1920 × 1040; photo 600 × 760 at x 1080, badge 220 at x 1570, y 790) ---------- */
:where(.life-page) .join {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(600 * var(--u));
    column-gap: calc(80 * var(--u));
    background: #fff;
    padding: calc(140 * var(--u)) calc(240 * var(--u)) calc(140 * var(--u)) var(--gutter);
}

:where(.life-page) .join__text {
    display: grid;
    justify-items: start;
    align-content: center;
}

:where(.life-page) .join h2 {
    margin-top: calc(19 * var(--u));
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
}

:where(.life-page) .join__copy {
    margin-top: calc(32 * var(--u));
    max-width: calc(640 * var(--u));
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.life-page) .join__btn {
    margin-top: calc(48 * var(--u));
    background: #09090b;
    color: #fff;
    border: 2px solid #ef4136;
    padding: 18px 30px;
}

:where(.life-page) .join__btn:hover, :where(.life-page) .join__btn:focus-visible {
    background: #27272a;
}

/* the photo fills exactly the height of the text column (the HTML height attribute must not win: height is set here) */
:where(.life-page) .join__media {
    position: relative;
    min-height: calc(420 * var(--u));
}

:where(.life-page) .join__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

/* rotating badge: white disc, turning ring of text, black core with the arrow */
:where(.life-page) .badge {
    position: absolute;
    right: calc(-110 * var(--u));
    bottom: calc(-110 * var(--u));
    width: calc(220 * var(--u));
    height: calc(220 * var(--u));
    display: block;
}

:where(.life-page) .badge__disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

:where(.life-page) .badge__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: badge-spin 14s linear infinite;
}

:where(.life-page) .badge__ring text {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .14em;
    text-transform: uppercase;
    fill: #09090b;
}

@keyframes badge-spin {
    to {
        transform: rotate(360deg);
    }
}

:where(.life-page) .badge__core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(96 * var(--u));
    height: calc(96 * var(--u));
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #09090b;
    color: #fff;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: calc(34 * var(--u));
    line-height: 1;
    transition: transform .25s ease;
}

:where(.life-page) .badge:hover .badge__core, :where(.life-page) .badge:focus-visible .badge__core {
    transform: translate(-50%, -50%) scale(1.08) rotate(45deg);
}

:where(.life-page) .badge:hover .badge__ring {
    animation-duration: 6s;
}

@media (prefers-reduced-motion: reduce) {
    :where(.life-page) .banner__hint span, :where(.life-page) .album__leaf, :where(.life-page) .album__side, :where(.life-page) .album__nav, :where(.life-page) .album__dot, :where(.life-page) .moments__indicator, :where(.life-page) .moments__year, :where(.life-page) .moment__bw, :where(.life-page) .moment__link, :where(.life-page) .moment__arrow, :where(.life-page) .badge__core {
        transition: none;
    }

    :where(.life-page) .moments__list.is-swapping .moment, :where(.life-page) .moments__list.is-swapping .moment__wipe, :where(.life-page) .moments__list.is-swapping .moment__cover img, :where(.life-page) .moment:hover .moment__wipe {
        animation: none;
    }

    :where(.life-page) .moment, :where(.life-page) .moment__cover img, :where(.life-page) .moment__cover .moment__bw, :where(.life-page) .moment__title, :where(.life-page) .gallery, :where(.life-page) .gallery__photo img {
        transition: none;
    }

    :where(.life-page) .badge__ring {
        animation: none;
    }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
    :where(.life-page) .join {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 36%);
        padding-right: calc(160 * var(--u));
    }

    :where(.life-page) .badge {
        right: calc(-60 * var(--u));
        bottom: calc(-40 * var(--u));
        width: 160px;
        height: 160px;
    }

    :where(.life-page) .badge__core {
        width: 70px;
        height: 70px;
        font-size: 26px;
    }
}

/* mobile layout: narrow, portrait or short screens (matches the other pages' mobile breakpoint) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    /* banner: title, photo, facts and caption in the flow */ :where(.life-page) .banner__stage {
        height: auto;
        padding: 32px var(--gutter) 56px;
        display: grid;
        gap: 24px;
    }

    :where(.life-page) .banner__head, :where(.life-page) .banner__facts, :where(.life-page) .banner__caption, :where(.life-page) .banner__hint {
        position: static;
        opacity: 1;
        transform: none;
    }

    :where(.life-page) .banner__sub {
        margin: 14px 0 0;
    }

    :where(.life-page) .banner__frame {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 980 / 720;
        border-radius: 6px;
    }

    :where(.life-page) .banner__shade {
        display: none;
    }

    :where(.life-page) .banner__facts {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 40px;
        max-width: none;
        text-align: left;
    }

    :where(.life-page) .banner__facts dt {
        font-size: 12px;
    }

    :where(.life-page) .banner__facts dd {
        margin-top: 4px;
        font-size: 24px;
    }

    :where(.life-page) .banner__caption {
        display: none;
    }

    :where(.life-page) .banner__hint {
        display: none;
        justify-self: center;
    }

    /* album: the two pages stack, one book-page wide; spreads fade instead of turning */
    :where(.life-page) .album {
        padding: 72px var(--gutter) 64px;
    }

    :where(.life-page) .album__scene {
        --b: calc((100vw - 2 * var(--gutter)) / 600);
        width: calc(600 * var(--b));
        height: calc(1440 * var(--b));
        margin-top: 36px;
    }

    :where(.life-page) .album__page {
        width: 100%;
        height: 50%;
    }

    :where(.life-page) .album__page--l {
        top: 0;
        border-radius: calc(20 * var(--b)) calc(20 * var(--b)) 0 0;
    }

    :where(.life-page) .album__page--r {
        top: 50%;
        border-radius: 0 0 calc(20 * var(--b)) calc(20 * var(--b));
    }

    :where(.life-page) .album__spread {
        transition: opacity .45s ease;
        opacity: 0;
    }

    :where(.life-page) .album__spread.is-current {
        opacity: 1;
    }

    :where(.life-page) .album__spine {
        left: 0;
        right: 0;
        top: 50%;
        bottom: auto;
        width: auto;
        height: 2px;
        margin: -1px 0 0;
    }

    :where(.life-page) .album__leaf, :where(.life-page) .album__sides {
        display: none !important;
    }

    :where(.life-page) .album__nav {
        top: auto;
        bottom: -80px;
        margin-top: 0;
    }

    :where(.life-page) .album__nav--prev {
        left: 0;
    }

    :where(.life-page) .album__nav--next {
        right: 0;
    }

    :where(.life-page) .album__dots {
        margin-top: 96px;
    }

    /* moments: year tabs under the heading; rows = small cover beside the text */
    :where(.life-page) .moments {
        padding: 72px var(--gutter);
    }

    :where(.life-page) .moments__head {
        flex-direction: column;
        align-items: flex-start;
    }

    :where(.life-page) .moments__head .a-h2 {
        margin-top: 14px;
    }

    :where(.life-page) .moments__years {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        gap: 10px;
    }

    :where(.life-page) .moments__tabs {
        gap: clamp(12px, 4vw, 24px);
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    /* on narrow phones the years scroll sideways instead of widening the page */
    :where(.life-page) .moments__tabs::-webkit-scrollbar {
        display: none;
    }

    :where(.life-page) .moments__year {
        padding-bottom: 8px;
    }

    :where(.life-page) .moments__list {
        margin-top: 32px;
    }

    /* rows: the cover across the top, then the index and text with the arrow button beside them */
    :where(.life-page) .moment {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 0;
        gap: 10px 16px;
        padding: 0 0 28px;
        align-items: start;
    }

    :where(.life-page) .moment__cover {
        grid-column: 1 / -1;
        grid-row: 1;
        aspect-ratio: 4 / 3;
        margin-bottom: 10px;
    }

    :where(.life-page) .moment__index {
        position: static;
        display: block;
        grid-column: 1;
        grid-row: 2;
    }

    :where(.life-page) .moment__body {
        grid-column: 1;
        grid-row: 3;
        padding: 0;
    }

    :where(.life-page) .moment:hover .moment__title, :where(.life-page) .moment:focus-visible .moment__title {
        transform: none;
    }

    :where(.life-page) .moment__date {
        margin-top: 8px;
    }

    :where(.life-page) .moment__desc {
        margin-top: 8px;
        max-width: 560px;
    }

    :where(.life-page) .moment__link {
        position: static;
        margin-top: 14px;
        opacity: 1;
        transform: none;
    }

    :where(.life-page) .moment__arrow {
        position: static;
        grid-column: 2;
        grid-row: 2 / span 2;
    }

    :where(.life-page) .moment--ghost {
        display: grid;
        grid-template-columns: 1fr;
        padding: 20px 0;
    }

    :where(.life-page) .moment--ghost .moment__index, :where(.life-page) .moment--ghost .moment__title {
        position: static;
    }

    /* gallery: three columns on tablets, two on phones (script.js); title above the meta */
    :where(.life-page) .gallery__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-top: 24px;
    }

    :where(.life-page) .gallery__meta {
        padding-bottom: 0;
    }

    /* join: text, then the photo with the badge on its corner */
    :where(.life-page) .join {
        grid-template-columns: 1fr;
        row-gap: 40px;
        padding: 72px var(--gutter) 96px;
    }

    :where(.life-page) .join__text {
        padding-top: 0;
    }

    :where(.life-page) .join h2 {
        margin-top: 14px;
    }

    :where(.life-page) .join__copy {
        margin-top: 16px;
        max-width: 560px;
    }

    :where(.life-page) .join__btn {
        margin-top: 28px;
        padding: 14px 18px;
    }

    :where(.life-page) .join__media {
        max-width: 480px;
        min-height: 0;
    }

    :where(.life-page) .join__photo {
        position: static;
        height: auto;
        aspect-ratio: 4 / 5;
        object-position: 50% 50%;
    }

    :where(.life-page) .badge {
        right: 0;
        bottom: -40px;
        width: 140px;
        height: 140px;
    }

    /* inside the photo's edge: nothing hangs past the viewport */
    :where(.life-page) .badge__core {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
}

/* ================================================================================================================
   CAREERS + JOB DETAIL (careers.html, career-details*.html)
   ================================================================================================================ */
/* Techrish "Careers" – built from Figma "Career – Improved" (1920px desktop frame); the job detail page
   (Figma "Job detail – Improved") is the last part of the file. The shared parts (nav incl. the light variant, mega menu, buttons, footer and WhatsApp are in COMMON COMPONENTS above).
   Desktop sizes are Figma px × --u (one Figma pixel = 100vw / 1920) with minimums. */
.careers-page {
    --u: calc(100vw / 1920);
    color: #09090b;
}

/* shared: section label, heading (same as the about and life pages) */
/* .kicker / .kicker--light / .a-h2: see COMMON COMPONENTS (identical on Home, About, Life, Careers and Contact) */
/* Figma "Eyebrow": grey pill with a coloured dot */
:where(.careers-page) .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 14px;
    border-radius: 999px;
    background: #f4f4f5;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    letter-spacing: 0;
    color: #09090b;
    white-space: nowrap;
}

:where(.careers-page) .pill i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00aeef;
}

/* Figma "Button" on the white sections: ink pill, 2px red border (66 tall) */
:where(.careers-page) .pbtn--ink {
    border: 2px solid #ef4136;
    background: #09090b;
    color: #fff;
}

/* ---------- BANNER (Figma "Banner", 1920 × 1510: label at y 70, headline 130, sub 362, button 468, video 610) ---------- */
:where(.careers-page) .chero {
    display: grid;
    justify-items: center;
    background: #fff;
    text-align: center;
    padding: max(40px, calc(70 * var(--u))) var(--gutter) max(56px, calc(120 * var(--u)));
}

:where(.careers-page) .chero__title {
    margin-top: max(18px, calc(24 * var(--u)));
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    color: #09090b;
}

:where(.careers-page) .chero__sub {
    margin-top: max(18px, calc(28 * var(--u)));
    max-width: max(480px, calc(720 * var(--u)));
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.careers-page) .chero .pbtn {
    margin-top: max(28px, calc(40 * var(--u)));
}

/* video: poster, 30% shade, 180 play button in the centre, caption at 48 / 48 from the bottom left, duration at 32 / 32 */
:where(.careers-page) .cvideo {
    position: relative;
    width: 100%;
    aspect-ratio: 1680 / 780;
    margin-top: max(40px, calc(76 * var(--u)));
    overflow: hidden;
    border-radius: max(14px, calc(24 * var(--u)));
    background: #18181b;
    color: #fff;
    text-align: left;
}

:where(.careers-page) .cvideo__poster, :where(.careers-page) .cvideo video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(.careers-page) .cvideo__shade {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .3);
}

/* Figma "Play button (hover)": the disc grows (r 60 → 66) and a soft ring expands behind it (r 90, white 25%) */
:where(.careers-page) .cvideo__play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(96px, calc(180 * var(--u)));
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

:where(.careers-page) .cvideo__play::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    opacity: 0;
    transform: scale(.67);
    transition: opacity .35s ease, transform .35s ease;
}

:where(.careers-page) .cvideo__play img {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .35s ease;
}

:where(.careers-page) .cvideo__play:hover::before, :where(.careers-page) .cvideo__play:focus-visible::before {
    opacity: 1;
    transform: none;
}

:where(.careers-page) .cvideo__play:hover img, :where(.careers-page) .cvideo__play:focus-visible img {
    transform: scale(1.1);
}

:where(.careers-page) .cvideo__play:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

:where(.careers-page) .cvideo__caption {
    position: absolute;
    left: max(20px, calc(48 * var(--u)));
    bottom: max(20px, calc(48 * var(--u)));
    display: grid;
    gap: max(2px, calc(6 * var(--u)));
}

:where(.careers-page) .cvideo__caption strong {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
}

:where(.careers-page) .cvideo__caption span {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: normal;
    color: rgba(255, 255, 255, .8);
}

:where(.careers-page) .cvideo__time {
    position: absolute;
    right: max(16px, calc(32 * var(--u)));
    top: max(16px, calc(32 * var(--u)));
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
}

/* playing (script.js): the player takes over the frame */
:where(.careers-page) .cvideo.is-playing > :not(video) {
    display: none;
}

/* ---------- OPEN POSITIONS (Figma "Open positions", 1920 × 1558; job grid 2 × 828, 24 apart) ---------- */
:where(.careers-page) .jobs {
    background: #000;
    color: #fff;
    padding: max(72px, calc(160 * var(--u))) var(--gutter);
}

:where(.careers-page) .jobs__head {
    display: grid;
    justify-items: center;
    gap: max(12px, calc(20 * var(--u)));
    text-align: center;
}

:where(.careers-page) .jobs__sub {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .72);
}

:where(.careers-page) .jobs__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: max(16px, calc(24 * var(--u)));
    margin-top: max(40px, calc(72 * var(--u)));
}

:where(.careers-page) .jobs__grid li {
    display: grid;
}

/* Figma "Job card (hover)", 828 × 316: title at 35 / 35, tags at y 91, arrow button 56 at the top right, divider at
   y 151, description at 175, "View role & apply" at 260. Hover: white card, ink text, the arrow flips to "→". */
:where(.careers-page) .job, :where(.careers-page) .apply {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: calc(316 * var(--u));
    padding: max(24px, calc(35 * var(--u)));
    border-radius: max(16px, calc(24 * var(--u)));
    color: #fff;
}

:where(.careers-page) .job {
    border: 1px solid rgba(255, 255, 255, .14);
    background: #111113;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

:where(.careers-page) .job__title {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
}

:where(.careers-page) .job .job__title {
    padding-right: max(56px, calc(80 * var(--u)));
}

:where(.careers-page) .job__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: max(14px, calc(19 * var(--u)));
}

:where(.careers-page) .job__tags span {
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label);
    line-height: normal;
    white-space: nowrap;
    transition: background-color .3s ease;
}

:where(.careers-page) .job__arrow {
    position: absolute;
    right: max(24px, calc(35 * var(--u)));
    top: max(20px, calc(31 * var(--u)));
    display: grid;
    place-items: center;
    width: max(44px, calc(56 * var(--u)));
    height: max(44px, calc(56 * var(--u)));
    border-radius: 50%;
    background: #fff;
    color: #09090b;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-lead);
    line-height: 1;
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

:where(.careers-page) .job__desc {
    align-self: stretch;
    margin-top: max(20px, calc(26 * var(--u)));
    padding-top: max(18px, calc(23 * var(--u)));
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .72);
    transition: color .3s ease, border-color .3s ease;
}

:where(.careers-page) .job__more {
    margin-top: auto;
    padding-top: 16px;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-body-sm);
    line-height: normal;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
}

:where(.careers-page) .job:hover, :where(.careers-page) .job:focus-visible {
    background: #fff;
    border-color: #fff;
    color: #09090b;
}

:where(.careers-page) .job:hover .job__tags span, :where(.careers-page) .job:focus-visible .job__tags span {
    background: #f4f4f5;
}

:where(.careers-page) .job:hover .job__arrow, :where(.careers-page) .job:focus-visible .job__arrow {
    background: #09090b;
    color: #fff;
    transform: rotate(45deg);
}

:where(.careers-page) .job:hover .job__desc, :where(.careers-page) .job:focus-visible .job__desc {
    border-top-color: #e4e4e7;
    color: #52525b;
}

:where(.careers-page) .job:hover .job__more, :where(.careers-page) .job:focus-visible .job__more {
    opacity: 1;
    transform: none;
}

:where(.careers-page) .job:focus-visible, :where(.careers-page) .apply:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Figma "Self-application": dashed card, description 560 wide, underlined link at the bottom */
:where(.careers-page) .apply {
    border: 1.5px dashed rgba(255, 255, 255, .35);
    transition: border-color .3s ease;
}

:where(.careers-page) .apply:hover, :where(.careers-page) .apply:focus-visible {
    border-color: #fff;
}

:where(.careers-page) .apply__desc {
    margin-top: max(12px, calc(21 * var(--u)));
    max-width: max(320px, calc(560 * var(--u)));
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .72);
}

:where(.careers-page) .apply__link {
    display: inline-flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: normal;
    transition: gap .2s ease;
}

:where(.careers-page) .apply__link u {
    text-underline-position: from-font;
}

:where(.careers-page) .apply:hover .apply__link, :where(.careers-page) .apply:focus-visible .apply__link {
    gap: 16px;
}

/* ---------- OUR VALUES (Figma "Career values (word cycle + card fan)", 1920 × 1020, Step 1–8) ---------- */
/* One loop is 12.8 s = eight 1.6 s steps: on each step every card of the fan moves one slot round the ring, so a
   value's card (odd steps) or a photo (even steps) is at the front. A value stays active for two steps (3.2 s): its
   word is in ink, its title / description show on the right and the label dot takes its colour. Each element runs
   the same keyframes from its own point of the loop (negative delay from --i), so everything stays in step. */
:where(.careers-page) .cvalues {
    position: relative;
    display: grid;
    grid-template-columns: calc(880 * var(--u)) minmax(0, 1fr);
    align-items: start;
    overflow: hidden;
    background: #fff;
    color: #09090b;
    padding: max(72px, calc(150 * var(--u))) var(--gutter) max(72px, calc(173 * var(--u)));
}

:where(.careers-page) .cvalues__left {
    display: grid;
    justify-items: start;
}

:where(.careers-page) .cvalues__pill i {
    animation: cvalue-dot 12.8s linear infinite;
}

@keyframes cvalue-dot {
    0%, 19.5% {
        background: #00aeef;
    }

    25%, 44.5% {
        background: #ef4136;
    }

    50%, 69.5% {
        background: #f7941d;
    }

    75%, 94.5% {
        background: #8dc63f;
    }

    100% {
        background: #00aeef;
    }
}

/* words: 130px, 142 apart (label at y 150, words from y 226) */
:where(.careers-page) .cvalues__words {
    display: grid;
    gap: calc(12 * var(--u));
    margin-top: calc(40 * var(--u));
}

:where(.careers-page) .cvalues__words li {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: calc(130 * var(--u));
    line-height: 1;
    letter-spacing: -.04em;
    white-space: nowrap;
    color: #e4e4e7;
    animation: cvalue-word 12.8s ease infinite;
    animation-delay: calc((var(--i) - 4) * 3.2s);
}

@keyframes cvalue-word {
    0%, 19.5% {
        color: #09090b;
    }

    25%, 94.5% {
        color: #e4e4e7;
    }

    100% {
        color: #09090b;
    }
}

/* fan: a 960 × 380 box at x 860, y 140 of the section; card positions are their centres inside it, × --f */
:where(.careers-page) .cfan {
    --f: var(--u);
    position: relative;
    width: calc(960 * var(--f));
    height: calc(380 * var(--f));
    margin: calc(-10 * var(--u)) 0 0 calc(-140 * var(--u));
}

:where(.careers-page) .cfan__card {
    position: absolute;
    overflow: hidden;
    border-radius: calc(18 * var(--f));
    background: #09090b;
    color: #fff;
    animation: cfan 12.8s cubic-bezier(.65, 0, .35, 1) infinite;
    animation-delay: calc((var(--i) - 8) * 1.6s);
}

/* slots, front first then anticlockwise (Figma Step 1: Card 1, 8, 7, 6, 5, 4, 3, 2) */
@keyframes cfan {
    0%, 7% {
        left: calc(480 * var(--f));
        top: calc(230 * var(--f));
        width: calc(420 * var(--f));
        height: calc(290 * var(--f));
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 1;
        z-index: 80;
    }

    12.5%, 19.5% {
        left: calc(197.16 * var(--f));
        top: calc(208.03 * var(--f));
        width: calc(315.14 * var(--f));
        height: calc(268.77 * var(--f));
        transform: translate(-50%, -50%) rotate(-5.66deg);
        opacity: .93;
        z-index: 60;
    }

    25%, 32% {
        left: calc(80 * var(--f));
        top: calc(155 * var(--f));
        width: calc(110.25 * var(--f));
        height: calc(217.5 * var(--f));
        transform: translate(-50%, -50%) rotate(-8deg);
        opacity: .75;
        z-index: 40;
    }

    37.5%, 44.5% {
        left: calc(197.16 * var(--f));
        top: calc(101.97 * var(--f));
        width: calc(194.92 * var(--f));
        height: calc(166.24 * var(--f));
        transform: translate(-50%, -50%) rotate(-5.66deg);
        opacity: .57;
        z-index: 20;
    }

    50%, 57% {
        left: calc(480 * var(--f));
        top: calc(80 * var(--f));
        width: calc(210 * var(--f));
        height: calc(145 * var(--f));
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: .5;
        z-index: 10;
    }

    62.5%, 69.5% {
        left: calc(762.84 * var(--f));
        top: calc(101.97 * var(--f));
        width: calc(194.92 * var(--f));
        height: calc(166.24 * var(--f));
        transform: translate(-50%, -50%) rotate(5.66deg);
        opacity: .57;
        z-index: 30;
    }

    75%, 82% {
        left: calc(880 * var(--f));
        top: calc(155 * var(--f));
        width: calc(110.25 * var(--f));
        height: calc(217.5 * var(--f));
        transform: translate(-50%, -50%) rotate(8deg);
        opacity: .75;
        z-index: 50;
    }

    87.5%, 94.5% {
        left: calc(762.84 * var(--f));
        top: calc(208.03 * var(--f));
        width: calc(315.14 * var(--f));
        height: calc(268.77 * var(--f));
        transform: translate(-50%, -50%) rotate(5.66deg);
        opacity: .93;
        z-index: 70;
    }

    100% {
        left: calc(480 * var(--f));
        top: calc(230 * var(--f));
        width: calc(420 * var(--f));
        height: calc(290 * var(--f));
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 1;
        z-index: 80;
    }
}

/* photo cards: the cropped image fill (--w / --h / --l / --t are % of the card, as in Figma) */
:where(.careers-page) .cfan__card img {
    position: absolute;
    left: var(--l);
    top: var(--t);
    width: var(--w);
    height: var(--h);
    max-width: none;
}

/* value cards: accent dot, number and title, shown only while the card is at the front */
:where(.careers-page) .cfan__card i, :where(.careers-page) .cfan__card b, :where(.careers-page) .cfan__card strong {
    position: absolute;
    opacity: 0;
    animation: cfan-face 12.8s cubic-bezier(.65, 0, .35, 1) infinite;
    animation-delay: inherit;
}

:where(.careers-page) .cfan__card i {
    left: calc(24 * var(--f));
    top: calc(26 * var(--f));
    width: calc(12 * var(--f));
    height: calc(12 * var(--f));
    border-radius: 50%;
    background: var(--c);
}

:where(.careers-page) .cfan__card b {
    left: calc(46 * var(--f));
    top: calc(21 * var(--f));
    font-family: var(--font-body);
    font-weight: 500;
    font-size: calc(16 * var(--f));
    line-height: normal;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .6);
}

:where(.careers-page) .cfan__card strong {
    left: calc(24 * var(--f));
    bottom: calc(24.6 * var(--f));
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: calc(34 * var(--f));
    line-height: 1.05;
    letter-spacing: -.02em;
    white-space: nowrap;
}

@keyframes cfan-face {
    0%, 19.5% {          /* front + big slot behind it */
        opacity: 1;
    }

    25%, 82% {           /* narrow / far slots: too small for the text */
        opacity: 0;
    }

    87.5%, 100% {        /* big slot coming back round + front */
        opacity: 1;
    }
}

/* title / description / counter (x 1000, y 690): the four values share one cell and take turns */
:where(.careers-page) .cvalues__panels {
    display: grid;
    margin-top: calc(170 * var(--u));
}

:where(.careers-page) .cvalue {
    position: relative;
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    animation: cvalue-panel 12.8s ease infinite;
    animation-delay: calc((var(--i) - 4) * 3.2s);
}

@keyframes cvalue-panel {
    0%, 19.5% {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    22%, 97% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
    }

    100% {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

:where(.careers-page) .cvalue h3 {
    padding-right: 90px;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
}

:where(.careers-page) .cvalue p {
    margin-top: max(10px, calc(14 * var(--u)));
    max-width: max(360px, calc(700 * var(--u)));
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.careers-page) .cvalue__count {
    position: absolute;
    right: 0;
    top: max(4px, calc(10 * var(--u)));
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label);
    line-height: normal;
    letter-spacing: .08em;
    color: #52525b;
    white-space: nowrap;
}

/* ---------- PERKS (Figma "Perks & benefits", 1920 × 1201; grid 3 × 544, 24 apart, cards 330 tall) ---------- */
:where(.careers-page) .perks {
    background: #000;
    color: #fff;
    padding: max(72px, calc(160 * var(--u))) var(--gutter);
}

:where(.careers-page) .perks__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
}

:where(.careers-page) .perks__head .a-h2 {
    margin-top: max(12px, calc(20 * var(--u)));
}

:where(.careers-page) .perks__sub {
    flex: none;
    width: calc(600 * var(--u));
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .72);
}

:where(.careers-page) .perks__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: max(16px, calc(24 * var(--u)));
    margin-top: max(40px, calc(80 * var(--u)));
}

:where(.careers-page) .perk {
    display: grid;
    align-content: start;
    gap: max(12px, calc(16 * var(--u)));
    min-height: calc(330 * var(--u));
    padding: max(24px, calc(40 * var(--u)));
    border-radius: max(16px, calc(24 * var(--u)));
    background: #111113;
}

:where(.careers-page) .perk__num {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label);
    line-height: normal;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .5);
}

:where(.careers-page) .perk__num i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--c);
}

:where(.careers-page) .perk h3 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
}

:where(.careers-page) .perk p {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .72);
}

/* ---------- NOT ONLY ABOUT WORK (Figma "Not only about work (photo slider)", 1920 × 1262) ---------- */
:where(.careers-page) .after {
    background: #fff;
    color: #09090b;
    padding: max(72px, calc(160 * var(--u))) 0;
    overflow: hidden;
}

:where(.careers-page) .after__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    padding: 0 var(--gutter);
}

:where(.careers-page) .after__text {
    flex: none;
    width: calc(600 * var(--u));
    display: grid;
    justify-items: start;
    gap: max(20px, calc(32 * var(--u)));
    padding-top: 3px;
}

:where(.careers-page) .after__text p {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

/* Figma "Career collage marquee (loop)": the 2000 × 670 collage tile twice in a row; the strip slides left by one
   tile in 40 s and starts over. Photos are placed by --x / --y / --w / --h (Figma px inside the tile) × --m. */
:where(.careers-page) .collage {
    --m: var(--u);
    margin-top: max(40px, calc(72 * var(--u)));
    overflow: hidden;
}

:where(.careers-page) .collage__track {
    display: flex;
    width: max-content;
    animation: collage 40s linear infinite;
}

:where(.careers-page) .collage:hover .collage__track {
    animation-play-state: paused;
}

:where(.careers-page) .collage__tile {
    position: relative;
    flex: none;
    width: calc(2000 * var(--m));
    height: calc(670 * var(--m));
}

:where(.careers-page) .collage__tile img {
    position: absolute;
    left: calc(var(--x) * var(--m));
    top: calc(var(--y) * var(--m));
    width: calc(var(--w) * var(--m));
    height: calc(var(--h) * var(--m));
    max-width: none;
    object-fit: cover;
    border-radius: 4px;
}

@keyframes collage {
    to {
        transform: translateX(-50%);
    }
}

/* reduced motion: nothing moves. The fan rests on Step 1 as a still, every value word is in ink and the four
   values are listed under it instead of taking turns; the photo strip stands still. */
@media (prefers-reduced-motion: reduce) {
    :where(.careers-page) .cvideo__play::before, :where(.careers-page) .cvideo__play img, :where(.careers-page) .job, :where(.careers-page) .job__tags span, :where(.careers-page) .job__arrow, :where(.careers-page) .job__desc, :where(.careers-page) .job__more, :where(.careers-page) .apply, :where(.careers-page) .apply__link {
        transition: none;
    }

    :where(.careers-page) .cfan__card, :where(.careers-page) .cfan__card i, :where(.careers-page) .cfan__card b, :where(.careers-page) .cfan__card strong {
        animation-play-state: paused;
    }

    :where(.careers-page) .cvalues__pill i, :where(.careers-page) .cvalues__words li, :where(.careers-page) .cvalue, :where(.careers-page) .collage__track {
        animation: none;
    }

    :where(.careers-page) .cvalues__words li {
        color: #09090b;
    }

    :where(.careers-page) .cvalues__panels {
        gap: max(24px, calc(40 * var(--u)));
        margin-top: max(32px, calc(60 * var(--u)));
    }

    :where(.careers-page) .cvalue {
        grid-area: auto;
        opacity: 1;
        visibility: visible;
    }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
    :where(.careers-page) .perks__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(.careers-page) .perk {
        min-height: 0;
    }
}

/* mobile layout: narrow, portrait or short screens (matches the other pages' mobile breakpoint) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    /* banner: the headline wraps on its own; the video frame is taller */ :where(.careers-page) .chero {
        padding: 32px var(--gutter) 56px;
    }

    :where(.careers-page) .chero__title {
        text-wrap: balance;
    }

    :where(.careers-page) .chero__title br {
        display: none;
    }

    :where(.careers-page) .chero__sub {
        max-width: 560px;
    }

    :where(.careers-page) .cvideo {
        aspect-ratio: 4 / 3;
        margin-top: 36px;
    }

    :where(.careers-page) .cvideo__play {
        width: 84px;
    }

    /* open positions: one card per row; "View role & apply" always shows (no hover on touch) */
    :where(.careers-page) .jobs__grid {
        grid-template-columns: 1fr;
    }

    :where(.careers-page) .job, :where(.careers-page) .apply {
        min-height: 0;
    }

    :where(.careers-page) .job__more {
        opacity: 1;
        transform: none;
        padding-top: 20px;
    }

    :where(.careers-page) .apply__link {
        padding-top: 28px;
    }

    /* values: label, words, the fan across the page, then the active value */
    :where(.careers-page) .cvalues {
        grid-template-columns: 1fr;
        padding: 72px var(--gutter);
    }

    :where(.careers-page) .cvalues__words {
        gap: 4px;
        margin-top: 24px;
    }

    :where(.careers-page) .cvalues__words li {
        font-size: clamp(44px, 13vw, 104px);
    }

    :where(.careers-page) .cfan {
        --f: calc((100vw - 2 * var(--gutter)) / 960);
        margin: 40px 0 0;
    }

    :where(.careers-page) .cvalues__panels {
        margin-top: 32px;
    }

    :where(.careers-page) .cvalue p {
        max-width: 640px;
    }

    /* perks: heading above the copy */
    :where(.careers-page) .perks__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    :where(.careers-page) .perks__sub {
        width: auto;
        max-width: 640px;
    }

    /* not only about work: heading above the copy; a larger collage */
    :where(.careers-page) .after__head {
        flex-direction: column;
        gap: 20px;
    }

    :where(.careers-page) .after__text {
        width: auto;
        max-width: 640px;
        padding-top: 0;
    }

    :where(.careers-page) .collage {
        --m: calc(100vw / 1000);
    }
}

@media (max-width: 700px) {
    :where(.careers-page) .perks__grid {
        grid-template-columns: 1fr;
    }

    :where(.careers-page) .collage {
        --m: calc(100vw / 640);
    }
}

/* =====================================================================================================
   JOB DETAIL PAGE (career-details.html – Figma "Job detail – Improved", 1920 wide). Shares the page
   base, the section label and the job cards above with the careers page.
   ===================================================================================================== */
/* ---------- JOB HERO (Figma "Job hero", 1920 × 462: back pill at y 72, breadcrumb 158, title 215, tags 347) ---------- */
:where(.careers-page) .jhero {
    display: grid;
    justify-items: start;
    gap: max(20px, calc(36 * var(--u)));
    background: #fff;
    padding: max(32px, calc(72 * var(--u))) var(--gutter);
}

:where(.careers-page) .jhero__back {
    display: inline-flex;
    gap: 10px;
    padding: 14px 24px 14px 20px;
    border-radius: 999px;
    background: #f4f4f5;
    color: #09090b;
    white-space: nowrap;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: normal;
    transition: background-color .2s ease;
}

/* the arrows come from a fallback font with a taller line: keep them from stretching the pill, button and link */
:where(.careers-page) .jhero__back, :where(.careers-page) .jform__submit, :where(.careers-page) .jmore__all {
    align-items: center;
}

:where(.careers-page) .jhero__back span, :where(.careers-page) .jform__submit span, :where(.careers-page) .jmore__all span {
    line-height: 1;
}

:where(.careers-page) .jhero__back span {
    transition: transform .2s ease;
}

:where(.careers-page) .jhero__back:hover, :where(.careers-page) .jhero__back:focus-visible {
    background: #e4e4e7;
}

:where(.careers-page) .jhero__back:hover span, :where(.careers-page) .jhero__back:focus-visible span {
    transform: translateX(-3px);
}

:where(.careers-page) .jhero__crumb {
    white-space: pre-wrap;
}

:where(.careers-page) .jhero__title {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    color: #09090b;
}

:where(.careers-page) .jhero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

:where(.careers-page) .jhero__tags li {
    padding: 10px 18px;
    border-radius: 999px;
    background: #f4f4f5;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: normal;
    color: #09090b;
    white-space: nowrap;
}

/* ---------- JOB BODY (Figma "Job body", 1920 × 1699: role description 960 wide, form 600 wide, 120 apart) ---------- */
:where(.careers-page) .jbody {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: max(40px, calc(120 * var(--u)));
    background: #fff;
    padding: max(24px, calc(40 * var(--u))) var(--gutter) max(72px, calc(160 * var(--u)));
}

/* role description: a rule on top, then the sections 64 apart */
:where(.careers-page) .jrole {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(960 * var(--u));
    display: grid;
    gap: max(40px, calc(64 * var(--u)));
    padding-top: max(40px, calc(64 * var(--u)));
    border-top: 1px solid #e4e4e7;
}

:where(.careers-page) .jrole section {
    display: grid;
    gap: max(16px, calc(24 * var(--u)));
}

:where(.careers-page) .jrole h2 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
    color: #09090b;
}

:where(.careers-page) .jrole p, :where(.careers-page) .jrole li {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.careers-page) .jrole ul {
    display: grid;
    gap: max(10px, calc(14 * var(--u)));
}

/* Figma "Bullet": 8 × 32, the dot on the middle of the first line (32 = one 20px line at 1.6) */
:where(.careers-page) .jrole li {
    position: relative;
    padding-left: 24px;
}

:where(.careers-page) .jrole li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 1.6em;
    background: url(../images/78518.svg) center / 8px 32px no-repeat;
}

/* Figma "Application form": grey card, 40 padding, fields 24 apart; inputs 60 tall, textarea 150, dashed dropzone */
:where(.careers-page) .jform {
    flex: none;
    width: max(380px, calc(600 * var(--u)));
    display: grid;
    gap: max(18px, calc(24 * var(--u)));
    padding: max(24px, calc(40 * var(--u)));
    border-radius: max(16px, calc(24 * var(--u)));
    background: #f4f4f5;
    color: #09090b;
    font-family: var(--font-body);
}

:where(.careers-page) .jform h2 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
}

:where(.careers-page) .jform__sub {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.careers-page) .jfield {
    display: grid;
    gap: 8px;
}

:where(.careers-page) .jfield > span {
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
}

:where(.careers-page) .jfield > input, :where(.careers-page) .jfield > textarea {
    width: 100%;
    height: max(52px, calc(60 * var(--u)));
    padding: 0 19px;
    border: 1px solid #e4e4e7;
    border-radius: 12px;
    background: #fff;
    color: #09090b;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: normal;
    outline: none;
    transition: border-color .2s ease;
}

:where(.careers-page) .jfield > textarea {
    height: max(130px, calc(150 * var(--u)));
    min-height: 96px;
    padding: 16px 19px;
    line-height: 1.4;
    resize: vertical;
}

:where(.careers-page) .jfield ::placeholder {
    color: rgba(82, 82, 91, .6);
    opacity: 1;
}

:where(.careers-page) .jfield > input:focus, :where(.careers-page) .jfield > textarea:focus {
    border-color: #09090b;
}

:where(.careers-page) .jdrop {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: max(22px, calc(28 * var(--u))) 16px;
    border: 1.5px dashed rgba(9, 9, 11, .3);
    border-radius: 12px;
    background: #fff;
    text-align: center;
    transition: border-color .2s ease, background-color .2s ease;
}

:where(.careers-page) .jdrop input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

:where(.careers-page) .jdrop strong {
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: normal;
    overflow-wrap: anywhere;
}

:where(.careers-page) .jdrop small {
    font-size: 15px;
    line-height: normal;
    color: #52525b;
}

:where(.careers-page) .jdrop:hover, :where(.careers-page) .jdrop:focus-within, :where(.careers-page) .jdrop.is-over {
    border-color: #09090b;
}

:where(.careers-page) .jdrop.is-over {
    background: #fafafa;
}

:where(.careers-page) .jdrop.has-file {
    border-style: solid;
}

/* validation (script.js) */
:where(.careers-page) .jfield__error {
    font-size: 14px;
    line-height: normal;
    color: #d92d20;
}

:where(.careers-page) .jfield__error:empty {
    display: none;
}

:where(.careers-page) .jfield.is-invalid > input, :where(.careers-page) .jfield.is-invalid > textarea, :where(.careers-page) .jfield.is-invalid .jdrop {
    border-color: #ef4136;
}

:where(.careers-page) .jform__submit {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 20px;
    border: 0;
    border-radius: 999px;
    background: #09090b;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: normal;
    white-space: nowrap;
    transition: background-color .2s ease, gap .2s ease;
}

:where(.careers-page) .jform__submit:hover, :where(.careers-page) .jform__submit:focus-visible {
    background: #27272a;
    gap: 16px;
}

:where(.careers-page) .jform__submit:focus-visible {
    outline: 2px solid #09090b;
    outline-offset: 3px;
}

:where(.careers-page) .jform__status {
    font-size: 15px;
    line-height: 1.5;
    color: #09090b;
}

:where(.careers-page) .jform__status:empty {
    display: none;
}

:where(.careers-page) .jform__status.is-ok {
    color: #15803d;
}

:where(.careers-page) .jform__status.is-error {
    color: #d92d20;
}

:where(.careers-page) .jform.is-sending .jform__submit {
    opacity: .6;
    pointer-events: none;
}

/* bot trap: a "Company" field people never see (api/apply.php drops applications that fill it in) */
:where(.careers-page) .jfield--trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

:where(.careers-page) .jform__alt {
    font-size: 16px;
    line-height: normal;
    color: #52525b;
}

:where(.careers-page) .jform__alt a:hover, :where(.careers-page) .jform__alt a:focus-visible {
    color: #09090b;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* ---------- OTHER POSITIONS (Figma "Other positions", 1920 × 719: heading row at y 140, two job cards at 263) ---------- */
:where(.careers-page) .jmore {
    background: #000;
    color: #fff;
    padding: max(72px, calc(140 * var(--u))) var(--gutter);
}

:where(.careers-page) .jmore__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 32px;
}

:where(.careers-page) .jmore__head h2 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

:where(.careers-page) .jmore__all {
    display: inline-flex;
    gap: 10px;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-body-lg);
    line-height: normal;
    white-space: nowrap;
    transition: gap .2s ease;
}

:where(.careers-page) .jmore__all u {
    text-underline-position: from-font;
}

:where(.careers-page) .jmore__all:hover, :where(.careers-page) .jmore__all:focus-visible {
    gap: 16px;
}

:where(.careers-page) .jmore .jobs__grid {
    margin-top: max(32px, calc(56 * var(--u)));
}

@media (prefers-reduced-motion: reduce) {
    :where(.careers-page) .jhero__back, :where(.careers-page) .jhero__back span, :where(.careers-page) .jfield > input, :where(.careers-page) .jfield > textarea, :where(.careers-page) .jdrop, :where(.careers-page) .jform__submit, :where(.careers-page) .jmore__all {
        transition: none;
    }
}

/* mobile layout: the role description, then the form across the page */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    :where(.careers-page) .jbody {
        flex-direction: column;
        align-items: stretch;
        gap: 48px;
    }

    :where(.careers-page) .jrole {
        flex: none;
        max-width: none;
    }

    :where(.careers-page) .jform {
        width: auto;
    }

    :where(.careers-page) .jfield > input {
        height: 56px;
    }
}

/* ================================================================================================================
   CONTACT (contact.html – Figma "Contact – Improved")
   ================================================================================================================ */
/* Techrish contact – built from Figma "Contact – Improved" (1920px desktop frame).
   The shared parts (nav incl. the light variant, mega menu, buttons and footer are in COMMON COMPONENTS above).
   Desktop sizes are Figma px × --u (one Figma pixel = 100vw / 1920) with minimums. */
:where(.contact-page) .chero, .contact-page {
    --u: calc(100vw / 1920);
}

/* shared: section label and heading */
/* .kicker / .kicker--light / .a-h2: see COMMON COMPONENTS (identical on Home, About, Life, Careers and Contact) */
:where(.contact-page) .c-h2 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

/* ---------- HERO (Figma › Hero, 1920 × 635: navigation 120 + content 515) ---------- */
:where(.contact-page) .chero {
    position: relative;
    background: #fff;
    color: #09090b;
    text-align: center;
    padding: calc(clamp(88px, 6.25vw, 120px) + max(56px, calc(110 * var(--u)))) var(--gutter) max(56px, calc(72 * var(--u)));
}

:where(.contact-page) .chero__content {
    display: grid;
    justify-items: center;
    gap: 28px;
}

:where(.contact-page) .chero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 14px;
    border-radius: 999px;
    background: #f4f4f5;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    color: #3f3f46;
}

:where(.contact-page) .chero__eyebrow img {
    width: 8px;
    height: 8px;
}

:where(.contact-page) .chero h1 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
}

:where(.contact-page) .chero__sub {
    max-width: 720px;
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.contact-page) .chero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding-top: 12px;
}

/* ---------- HOW CAN WE HELP (Figma "Contact paths (tabs)", 1920 × 1200) ---------- */
/* intro + rows at x 120 (720 wide), card at x 960 (840 wide, 880 tall at y 160) */
:where(.contact-page) .paths {
    background: #000;
    color: #fff;
    padding: calc(160 * var(--u)) var(--gutter);
    display: grid;
    grid-template-columns: calc(720 * var(--u)) calc(840 * var(--u));
    justify-content: space-between;
    column-gap: 40px;
    align-items: start;
}

:where(.contact-page) .paths__intro h2 {
    margin-top: calc(16 * var(--u));
}

/* rows: 160 tall, 1px lines between (and after) them */
:where(.contact-page) .paths__rows {
    margin-top: calc(93 * var(--u));
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

:where(.contact-page) .path {
    --path-c: #00aeef;
    position: relative;
    display: grid;
    grid-template-columns: max(36px, calc(44 * var(--u))) minmax(0, 1fr) max(40px, calc(48 * var(--u)));
    column-gap: 24px;
    align-items: start;
    width: 100%;
    min-height: max(108px, calc(160 * var(--u)));
    padding: calc(40 * var(--u)) 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

:where(.contact-page) .path--career {
    --path-c: #8dc63f;
}

:where(.contact-page) .path--partner {
    --path-c: #f7941d;
}

:where(.contact-page) .path:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
    border-radius: 4px;
}

/* the coloured line that runs along the top of the active row (0 → 720 in 4.5 s, script.js) */
:where(.contact-page) .path__progress {
    position: absolute;
    left: 0;
    top: -1px;
    height: 3px;
    width: 100%;
    background: var(--path-c);
    transform: scaleX(0);
    transform-origin: left;
}

:where(.contact-page) .paths.is-playing .path.is-active .path__progress {
    animation: path-progress 4.5s linear forwards;
    animation-play-state: running;
}
:where(.contact-page) .paths.is-paused .path.is-active .path__progress {
    animation-play-state: paused;
}

@keyframes path-progress {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

:where(.contact-page) .path__badge {
    display: grid;
    place-items: center;
    width: max(36px, calc(44 * var(--u)));
    height: max(36px, calc(44 * var(--u)));
    margin-top: 2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-label);
    line-height: 1;
    transition: background-color .3s ease, color .3s ease;
}

:where(.contact-page) .path__text {
    display: grid;
    gap: calc(10 * var(--u));
}

:where(.contact-page) .path__text strong {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
    color: rgba(255, 255, 255, .45);
    transition: color .3s ease;
}

:where(.contact-page) .path__text span {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: normal;
    color: rgba(255, 255, 255, .4);
    transition: color .3s ease;
}

:where(.contact-page) .path__arrow {
    display: grid;
    place-items: center;
    width: max(40px, calc(48 * var(--u)));
    height: max(40px, calc(48 * var(--u)));
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: max(18px, calc(20 * var(--u)));
    line-height: 1;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

:where(.contact-page) .path:hover .path__text strong, :where(.contact-page) .path:focus-visible .path__text strong {
    color: rgba(255, 255, 255, .75);
}

:where(.contact-page) .path.is-active .path__badge {
    background: var(--path-c);
    color: #09090b;
}

:where(.contact-page) .path.is-active .path__text strong {
    color: #fff;
}

:where(.contact-page) .path.is-active .path__text span {
    color: rgba(255, 255, 255, .72);
}

:where(.contact-page) .path.is-active .path__arrow {
    background: #fff;
    border-color: #fff;
    color: #09090b;
}

/* form card (white, radius 24, padding 48); the three cards swap in place */
:where(.contact-page) .paths__cards {
    display: grid;
}

:where(.contact-page) .pcard {
    grid-area: 1 / 1;
    display: block;
    min-height: calc(880 * var(--u));
    padding: max(24px, calc(48 * var(--u))) max(24px, calc(48 * var(--u))) max(32px, calc(86 * var(--u)));
    border-radius: max(16px, calc(24 * var(--u)));
    background: #fff;
    color: #09090b;
    font-family: var(--font-body);
}

:where(.contact-page) .pcard[hidden] {
    display: none;
}

:where(.contact-page) .pcard.is-in {
    animation: pcard-in .4s ease both;
}

@keyframes pcard-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

:where(.contact-page) .pcard__title {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
}

:where(.contact-page) .pcard__sub {
    margin-top: calc(14 * var(--u));
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #52525b;
}

/* fields: two 360-wide columns 24 apart; label 16/500, input 60 tall, textarea 230 */
:where(.contact-page) .pcard__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(24 * var(--u));
    margin-top: calc(59 * var(--u));
}

:where(.contact-page) .field {
    display: grid;
    gap: 10px;
    grid-column: 1 / -1;
    align-content: start;
}

:where(.contact-page) .field--half {
    grid-column: auto;
}

:where(.contact-page) .field > span {
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: #09090b;
}

:where(.contact-page) .field > input, :where(.contact-page) .field > textarea {
    width: 100%;
    height: max(52px, calc(60 * var(--u)));
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #f4f4f5;
    color: #09090b;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: normal;
    outline: none;
    transition: border-color .2s ease, background-color .2s ease;
}

:where(.contact-page) .field > textarea {
    height: max(150px, calc(230 * var(--u)));
    min-height: 96px;
    padding: 18px 20px;
    line-height: 1.4;
    resize: vertical;
}

:where(.contact-page) .field ::placeholder {
    color: rgba(82, 82, 91, .6);
    opacity: 1;
}

:where(.contact-page) .field > input:focus, :where(.contact-page) .field > textarea:focus {
    border-color: #09090b;
    background: #fff;
}

/* honeypot: off screen for people, a normal field for bots */
:where(.contact-page) .field--trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* validation (script.js) */
:where(.contact-page) .field__error {
    font-size: 14px;
    line-height: normal;
    color: #d92d20;
}

:where(.contact-page) .field__error:empty {
    display: none;
}

:where(.contact-page) .field.is-invalid > input, :where(.contact-page) .field.is-invalid > textarea {
    border-color: #ef4136;
}

/* actions: dark pill + "Prefer chat?" note; the career card has two pills */
:where(.contact-page) .pcard__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: calc(46 * var(--u));
}

:where(.contact-page) .pcard__submit, :where(.contact-page) .pcard__secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 20px 32px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: clamp(16px, .94vw, 18px);
    line-height: normal;
    transition: background-color .2s ease, gap .2s ease, border-color .2s ease;
}

:where(.contact-page) .pcard__submit {
    background: #09090b;
    color: #fff;
}

:where(.contact-page) .pcard__submit:hover, :where(.contact-page) .pcard__submit:focus-visible {
    background: #27272a;
}
.pcard__submit span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.pcard__submit:hover span {
    transform: translateX(5px);
}
:where(.contact-page) .pcard__secondary {
    padding: 19px 31px;
    border: 1px solid rgba(9, 9, 11, .25);
    background: #fff;
    color: #09090b;
}

:where(.contact-page) .pcard__secondary:hover, :where(.contact-page) .pcard__secondary:focus-visible {
    border-color: #09090b;
}
.pcard__secondary span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.pcard__secondary:hover span {
    transform: translateX(5px);
}

:where(.contact-page) .pcard__submit:focus-visible, :where(.contact-page) .pcard__secondary:focus-visible {
    outline: 2px solid #09090b;
    outline-offset: 3px;
}

:where(.contact-page) .pcard__alt {
    font-size: 16px;
    line-height: normal;
    color: #52525b;
}

:where(.contact-page) .pcard__alt a:hover, :where(.contact-page) .pcard__alt a:focus-visible {
    color: #09090b;
    text-decoration: underline;
    text-underline-position: from-font;
}

:where(.contact-page) .pcard__status {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.5;
    color: #09090b;
}

:where(.contact-page) .pcard__status:empty {
    display: none;
}

:where(.contact-page) .pcard__status.is-ok {
    color: #15803d;
}

:where(.contact-page) .pcard__status.is-error {
    color: #d92d20;
}

:where(.contact-page) .pcard.is-sending .pcard__submit {
    opacity: .6;
    pointer-events: none;
}

/* career card: 744 × 460 photo, radius 16 */
:where(.contact-page) .pcard__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 744 / 460;
    margin-top: calc(59 * var(--u));
    border-radius: 16px;
    object-fit: cover;
}

:where(.contact-page) .pcard--career .pcard__actions {
    margin-top: calc(74 * var(--u));
}

/* ---------- REACH US DIRECTLY (Figma "Direct contact", 1920 × 1327) ---------- */
:where(.contact-page) .direct {
    background: #fff;
    color: #09090b;
    padding: calc(160 * var(--u)) var(--gutter);
    display: grid;
    gap: calc(72 * var(--u));
}

:where(.contact-page) .direct__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

:where(.contact-page) .direct__heading {
    display: grid;
    gap: calc(20 * var(--u));
}

:where(.contact-page) .direct__copy {
    flex: none;
    width: calc(600 * var(--u));
    max-width: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

/* contact cards: 544 × 300, radius 24; hover turns the card ink and fills the arrow */
:where(.contact-page) .direct__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(24 * var(--u));
}

:where(.contact-page) .ccard {
    --ccard-ink: #09090b;
    --ccard-grey: #52525b;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    min-height: max(230px, calc(300 * var(--u)));
    padding: calc(40 * var(--u));
    border-radius: max(16px, calc(24 * var(--u)));
    background: #f4f4f5;
    color: var(--ccard-ink);
    font-family: var(--font-body);
    transition: background-color .3s ease, color .3s ease;
}

:where(.contact-page) .ccard__icon {
    display: grid;
    place-items: center;
    width: max(44px, calc(56 * var(--u)));
    height: max(44px, calc(56 * var(--u)));
    border-radius: 50%;
    background: #09090b;
    transition: background-color .3s ease;
}

:where(.contact-page) .ccard__icon img {
    width: 100%;
    height: 100%;
}

:where(.contact-page) .ccard__arrow {
    display: grid;
    place-items: center;
    align-self: center;
    width: max(40px, calc(48 * var(--u)));
    height: max(40px, calc(48 * var(--u)));
    border-radius: 50%;
    border: 1px solid rgba(9, 9, 11, .2);
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: max(18px, calc(20 * var(--u)));
    line-height: 1;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

:where(.contact-page) .ccard__label {
    grid-column: 1 / -1;
    margin-top: calc(48 * var(--u));
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ccard-grey);
    transition: color .3s ease;
}

:where(.contact-page) .ccard__value {
    grid-column: 1 / -1;
    margin-top: calc(10 * var(--u));
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
    overflow-wrap: anywhere;
}

:where(.contact-page) .ccard__hint {
    grid-column: 1 / -1;
    margin-top: calc(14 * var(--u));
    font-size: var(--fs-body);
    line-height: normal;
    color: var(--ccard-grey);
    transition: color .3s ease;
}

:where(.contact-page) .ccard:hover, :where(.contact-page) .ccard:focus-visible {
    --ccard-ink: #fff;
    --ccard-grey: rgba(255, 255, 255, .64);
    background: #09090b;
    outline: none;
}

:where(.contact-page) .ccard:hover .ccard__icon, :where(.contact-page) .ccard:focus-visible .ccard__icon {
    background: rgba(255, 255, 255, .14);
}

:where(.contact-page) .ccard:hover .ccard__arrow, :where(.contact-page) .ccard:focus-visible .ccard__arrow {
    background: #fff;
    border-color: #fff;
    color: #09090b;
    transform: rotate(45deg);

}

/* social block: rule, centred heading, five 120-wide links 24 apart */
:where(.contact-page) .social {
    display: grid;
    justify-items: center;
    gap: calc(36 * var(--u));
    padding-top: calc(56 * var(--u));
}

:where(.contact-page) .social__rule {
    width: 100%;
    height: 1px;
    margin: 0;
    border: 0;
    background: #e4e4e7;
}

:where(.contact-page) .social__head {
    display: grid;
    justify-items: center;
    gap: calc(12 * var(--u));
    padding-top: calc(36 * var(--u));
    text-align: center;
}

:where(.contact-page) .social__head h3 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
}

:where(.contact-page) .social__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(24 * var(--u));
}

:where(.contact-page) .slink {
    display: grid;
    justify-items: center;
    width: max(88px, calc(120 * var(--u)));
    padding-top: 4px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: #52525b;
    text-align: center;
}

:where(.contact-page) .slink__disc {
    display: grid;
    place-items: center;
    width: max(64px, calc(76 * var(--u)));
    height: max(64px, calc(76 * var(--u)));
    margin-bottom: calc(20 * var(--u));
    border-radius: 50%;
    background: #f4f4f5;
    transition: background-color .3s ease, transform .3s ease;
}

:where(.contact-page) .slink__disc img {
    transition: filter .3s ease;
}

:where(.contact-page) .slink:hover .slink__disc, :where(.contact-page) .slink:focus-visible .slink__disc {
    background: #09090b;
    transform: scale(1.08);
}

:where(.contact-page) .slink:hover .slink__disc img, :where(.contact-page) .slink:focus-visible .slink__disc img {
    filter: invert(1);
}

:where(.contact-page) .slink:focus-visible {
    outline: none;
    color: #09090b;
}

/* ---------- OFFICE LOCATIONS (Figma "Office locations (reveal)", 1920 × 984; cards 544 × 480 at y 344) ---------- */
:where(.contact-page) .offices {
    background: #f4f4f5;
    color: #09090b;
    padding: calc(160 * var(--u)) var(--gutter);
}

:where(.contact-page) .offices__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

:where(.contact-page) .offices__head h2 {
    margin-top: calc(16 * var(--u));
}

:where(.contact-page) .offices__copy {
    flex: none;
    max-width: 100%;
    margin-bottom: calc(5 * var(--u));
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.contact-page) .offices__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(24 * var(--u));
    margin-top: calc(72 * var(--u));
}

/* mobile / default layout: everything in flow (region, drawing, name, address, link) */
:where(.contact-page) .ocard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 24px;
    border-radius: 16px;
    background: #fff;
    color: #09090b;
    font-family: var(--font-body);
    transition: box-shadow .3s ease;
}

:where(.contact-page) .ocard:hover, :where(.contact-page) .ocard:focus-visible {
    box-shadow: 0 12px 40px rgba(9, 9, 11, .08);
    outline: none;
}

:where(.contact-page) .ocard__region {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    font-size: var(--fs-label);
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #52525b;
}

:where(.contact-page) .ocard__region img {
    width: 12px;
    height: 12px;
}

:where(.contact-page) .ocard__tag {
    padding: 7px 14px;
    border-radius: 999px;
    background: #f4f4f5;
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    white-space: nowrap;
}

:where(.contact-page) .ocard__art {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 464px;
    height: auto;
    margin-top: 20px;
}

:where(.contact-page) .ocard__name {
    grid-column: 1 / -1;
    margin-top: 12px;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
}

:where(.contact-page) .ocard__address {
    grid-column: 1 / -1;
    margin-top: 12px;
    font-size: 17px;
    line-height: 1.5;
    color: #52525b;
}

:where(.contact-page) .ocard__address br {
    display: none;
}

/* Figma's line breaks only at the desktop card width */
:where(.contact-page) .ocard__link {
    grid-column: 1 / -1;
    display: inline-flex;
    gap: 10px;
    margin-top: 20px;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 17px;
    line-height: normal;
}

:where(.contact-page) .ocard__link u {
    text-underline-position: from-font;
}

/* desktop (the site's non-mobile range): Figma positions inside the 544 × 480 card; the Art state (JS, .is-art) shows
   the drawing large with the name under it, the Details state shrinks the drawing into the corner and brings in the
   address and the link */
@media (min-width: 901px) and (orientation: landscape) and (min-height: 541px) {
    :where(.contact-page) .ocard {
        display: block;
        position: relative;
        height: calc(480 * var(--u));
        padding: 0;
        border-radius: max(16px, calc(24 * var(--u)));
        overflow: hidden;
    }

    :where(.contact-page) .ocard__region {
        position: absolute;
        left: calc(40 * var(--u));
        top: calc(41 * var(--u));
    }

    :where(.contact-page) .ocard__tag {
        position: absolute;
        right: calc(40 * var(--u));
        top: calc(34 * var(--u));
    }

    :where(.contact-page) .ocard__art {
        position: absolute;
        left: calc(40 * var(--u));
        top: calc(88 * var(--u));
        width: calc(464 * var(--u));
        max-width: none;
        margin: 0;
        transform-origin: 0 0;
        transform: translate(calc(232 * var(--u)), calc(222 * var(--u))) scale(.5);
        opacity: .55;
        transition: transform .7s cubic-bezier(.65, 0, .35, 1), opacity .7s ease;
    }

    :where(.contact-page) .ocard__name {
        position: absolute;
        left: calc(40 * var(--u));
        top: calc(96 * var(--u));
        margin: 0;
        transition: transform .7s cubic-bezier(.65, 0, .35, 1);
    }

    :where(.contact-page) .ocard__address {
        position: absolute;
        left: calc(40 * var(--u));
        top: calc(176 * var(--u));
        width: calc(464 * var(--u));
        margin: 0;
        font-size: max(15px, calc(20 * var(--u)));
        transition: opacity .5s ease .2s, transform .7s cubic-bezier(.65, 0, .35, 1) .1s;
    }

    :where(.contact-page) .ocard__address br {
        display: inline;
    }

    :where(.contact-page) .ocard__link {
        position: absolute;
        left: calc(40 * var(--u));
        top: calc(418 * var(--u));
        margin: 0;
        font-size: max(15px, calc(18 * var(--u)));
        transition: opacity .5s ease .25s, transform .7s cubic-bezier(.65, 0, .35, 1) .1s;
    }

    /* Art state (before the reveal, and again once the cards have scrolled away) */
    :where(.contact-page) .offices.is-art .ocard:not(.is-details) .ocard__art {
        transform: none;
        opacity: 1;
    }

    :where(.contact-page) .offices.is-art .ocard:not(.is-details) .ocard__name {
        transform: translateY(calc(276 * var(--u)));
    }

    :where(.contact-page) .offices.is-art .ocard:not(.is-details) .ocard__address {
        opacity: 0;
        transform: translateY(calc(40 * var(--u)));
        transition-delay: 0s;
    }

    :where(.contact-page) .offices.is-art .ocard:not(.is-details) .ocard__link {
        opacity: 0;
        transform: translateY(calc(52 * var(--u)));
        transition-delay: 0s;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.contact-page) .path__progress, :where(.contact-page) .pcard.is-in, :where(.contact-page) .ocard__art, :where(.contact-page) .ocard__name, :where(.contact-page) .ocard__address, :where(.contact-page) .ocard__link, :where(.contact-page) .slink__disc, :where(.contact-page) .slink__disc img, :where(.contact-page) .ccard, :where(.contact-page) .ccard__icon, :where(.contact-page) .ccard__arrow, :where(.contact-page) .ccard__label, :where(.contact-page) .ccard__hint, :where(.contact-page) .path__badge, :where(.contact-page) .path__text strong, :where(.contact-page) .path__text span, :where(.contact-page) .path__arrow, :where(.contact-page) .pcard__submit, :where(.contact-page) .pcard__secondary, :where(.contact-page) .field > input, :where(.contact-page) .field > textarea {
        animation: none;
        transition: none;
    }
}

/* ---------- RESPONSIVE ---------- */
/* laptops: the paths card sits under the rows at full width */
@media (max-width: 1200px) {
    :where(.contact-page) .paths {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 48px;
    }

    :where(.contact-page) .paths__rows {
        max-width: 720px;
    }

    :where(.contact-page) .pcard {
        min-height: 0;
        padding: 32px;
    }

    :where(.contact-page) .pcard__fields, :where(.contact-page) .pcard__photo {
        margin-top: 36px;
    }

    :where(.contact-page) .pcard__actions, :where(.contact-page) .pcard--career .pcard__actions {
        margin-top: 32px;
    }
}

/* mobile layout: narrow, portrait or short screens (matches the other pages' mobile breakpoint) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    :where(.contact-page) .chero {
        padding-top: calc(88px + 48px);
        padding-bottom: 64px;
    }

    :where(.contact-page) .chero__content {
        gap: 22px;
    }

    :where(.contact-page) .paths {
        padding: 72px var(--gutter);
        row-gap: 40px;
    }

    :where(.contact-page) .paths__intro h2 {
        margin-top: 14px;
    }

    :where(.contact-page) .paths__rows {
        margin-top: 36px;
    }

    :where(.contact-page) .path {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        column-gap: 16px;
        min-height: 0;
        padding: 22px 0;
    }

    :where(.contact-page) .path__badge {
        width: 40px;
        height: 40px;
        margin-top: 0;
    }

    :where(.contact-page) .path__text {
        gap: 6px;
    }

    :where(.contact-page) .path__arrow {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    :where(.contact-page) .pcard {
        padding: 24px 20px 28px;
        border-radius: 16px;
    }

    :where(.contact-page) .pcard__sub {
        margin-top: 10px;
    }

    :where(.contact-page) .pcard__fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        margin-top: 28px;
    }

    :where(.contact-page) .field--half {
        grid-column: 1 / -1;
    }

    :where(.contact-page) .field > input {
        height: 54px;
    }

    :where(.contact-page) .field > textarea {
        height: 160px;
    }

    :where(.contact-page) .pcard__photo {
        margin-top: 28px;
    }

    :where(.contact-page) .pcard__actions, :where(.contact-page) .pcard--career .pcard__actions {
        margin-top: 28px;
    }

    :where(.contact-page) .pcard__alt {
        font-size: 15px;
    }

    :where(.contact-page) .direct {
        padding: 72px var(--gutter);
        gap: 36px;
    }

    :where(.contact-page) .direct__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    :where(.contact-page) .direct__heading {
        gap: 14px;
    }

    :where(.contact-page) .direct__copy {
        width: auto;
    }

    :where(.contact-page) .direct__cards {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
        gap: 16px;
    }

    :where(.contact-page) .ccard {
        min-height: 0;
        padding: 24px;
        border-radius: 16px;
    }

    :where(.contact-page) .ccard__icon {
        width: 48px;
        height: 48px;
    }

    :where(.contact-page) .ccard__arrow {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    :where(.contact-page) .ccard__label {
        margin-top: 32px;
        font-size: 13px;
    }

    :where(.contact-page) .ccard__value {
        margin-top: 8px;
    }

    :where(.contact-page) .ccard__hint {
        margin-top: 10px;
    }

    :where(.contact-page) .social {
        gap: 28px;
        padding-top: 24px;
    }

    :where(.contact-page) .social__head {
        gap: 10px;
        padding-top: 24px;
    }

    :where(.contact-page) .social__links {
        gap: 8px 4px;
    }

    :where(.contact-page) .slink {
        width: 88px;
        font-size: 14px;
    }

    :where(.contact-page) .slink__disc {
        width: 60px;
        height: 60px;
        margin-bottom: 12px;
    }

    :where(.contact-page) .offices {
        padding: 72px var(--gutter);
    }

    :where(.contact-page) .offices__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    :where(.contact-page) .offices__head h2 {
        margin-top: 14px;
    }

    :where(.contact-page) .offices__copy {
        margin: 0;
    }

    :where(.contact-page) .offices__grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
        gap: 16px;
        margin-top: 36px;
    }
}

@media (max-width: 560px) {
    :where(.contact-page) .chero__actions .pbtn--outline {
        padding: 15px 19px;
    }

    :where(.contact-page) .pcard__submit, :where(.contact-page) .pcard__secondary {
        padding: 16px 20px;
        font-size: 15px;
    }

    :where(.contact-page) .pcard__secondary {
        padding: 15px 19px;
    }

    :where(.contact-page) .pcard__actions {
        gap: 12px;
    }

    :where(.contact-page) .ocard {
        padding: 20px;
    }

    :where(.contact-page) .ocard__address {
        font-size: 16px;
    }
}

/* ================================================================================================================
   BLOG (blog.html – Figma "Blog – Improved")
   ================================================================================================================ */
/* Techrish blog – built from Figma "Blog – Improved" (1920px desktop frame).
   The shared parts (nav incl. the light + static variants, mega menu, buttons, CTA, footer and WhatsApp come
   from there). Desktop sizes are Figma px × --u (one Figma pixel = 100vw / 1920) with minimums. */
.blog-page {
    --u: calc(100vw / 1920);
}

/* shared: kicker, topic tag (outlined pill with the topic colour as a dot), date · reading time */
:where(.blog-page) .kicker {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #71717a;
}

:where(.blog-page) .tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 12px;
    border: 1px solid #d4d4d8;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    color: #09090b;
    white-space: nowrap;
}

:where(.blog-page) .tag img {
    width: 6px;
    height: 6px;
}

:where(.blog-page) .meta {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #71717a;
    white-space: nowrap;
}

:where(.blog-page) .meta__sep {
    margin: 0 .6em;
}

/* ---------- BANNER (Figma › Banner, 1920 × 538: padding 70 / 110) ---------- */
:where(.blog-page) .bhero {
    display: grid;
    justify-items: center;
    gap: 24px;
    padding: max(40px, calc(70 * var(--u))) var(--gutter) max(56px, calc(110 * var(--u)));
    background: #fff;
    color: #09090b;
    text-align: center;
}

:where(.blog-page) .bhero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 14px;
    border-radius: 999px;
    background: #f4f4f5;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    color: #09090b;
}

:where(.blog-page) .bhero__eyebrow img {
    width: 8px;
    height: 8px;
}

:where(.blog-page) .bhero__copy {
    display: grid;
    justify-items: center;
    gap: 28px;
}

:where(.blog-page) .bhero h1 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
}

:where(.blog-page) .bhero__sub {
    max-width: 720px;
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

/* ---------- FEATURED ARTICLE (Figma › Featured article: 720 × 405 image, text column, 140 below) ---------- */
:where(.blog-page) .featured {
    display: flex;
    align-items: center;
    gap: max(40px, calc(96 * var(--u)));
    padding: 0 var(--gutter) max(64px, calc(140 * var(--u)));
    background: #fff;
    color: #09090b;
}

:where(.blog-page) .featured__image {
    flex: none;
    display: block;
    width: calc(720 * var(--u));
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: max(20px, calc(32 * var(--u)));
    overflow: hidden;
    background: #f4f4f5;
}

:where(.blog-page) .featured__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

:where(.blog-page) .featured__image:hover img, :where(.blog-page) .featured__image:focus-visible img {
    transform: scale(1.03);
}

:where(.blog-page) .featured__text {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 32px;
}

:where(.blog-page) .featured__heading {
    display: grid;
    gap: 24px;
}

:where(.blog-page) .featured h2 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

:where(.blog-page) .featured__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

:where(.blog-page) .featured__rule {
    height: 1px;
    margin: 0;
    border: 0;
    background: #e4e4e7;
}

/* "Read article →" (Figma "Link – Read article (hover underline)"): a 4px gradient underline grows in on hover */
:where(.blog-page) .readlink {
    position: relative;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 8px;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-body-lg);
    line-height: normal;
    color: #09090b;
}

:where(.blog-page) .readlink::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ef4136 0%, #f7941d 20%, #ffc20e 40%, #8dc63f 60%, #00aeef 80%, #2e6fd8 100%);
    transition: width .35s cubic-bezier(.2, .7, .2, 1);
}

:where(.blog-page) .readlink:hover::after, :where(.blog-page) .readlink:focus-visible::after {
    width: 100%;
}

:where(.blog-page) .readlink span {
    transition: transform .25s ease;
}

:where(.blog-page) .readlink:hover span {
    transform: translateX(4px);
}

/* ---------- BROWSE ALL (Figma › Browse all: heading row, 3 × 544 grid 72 / 24 apart, pagination) ---------- */
:where(.blog-page) .browse {
    display: grid;
    gap: max(32px, calc(48 * var(--u)));
    padding: 0 var(--gutter);
    background: #fff;
    color: #09090b;
}

:where(.blog-page) .browse__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 56px;
}

:where(.blog-page) .browse h2 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
}

/* search (Figma "Blog search (expand)"): a 56 circle that grows leftwards into a 480 × 56 field */
:where(.blog-page) .search {
    position: relative;
    display: flex;
    align-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid #d4d4d8;
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
    transition: width .3s ease, border-color .2s ease, box-shadow .2s ease;
}

:where(.blog-page) .search.is-open {
    width: 480px;
    max-width: 100%;
    border-color: #09090b;
}

:where(.blog-page) .search__btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: background-color .2s ease;
}

:where(.blog-page) .search__btn img {
    width: 20px;
    height: 20px;
    transition: filter .2s ease;
}

:where(.blog-page) .search:not(.is-open) .search__btn:hover, :where(.blog-page) .search:not(.is-open) .search__btn:focus-visible {
    background: #09090b;
    outline: none;
}

:where(.blog-page) .search:not(.is-open) .search__btn:hover img, :where(.blog-page) .search:not(.is-open) .search__btn:focus-visible img {
    filter: invert(1);
}

:where(.blog-page) .search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 4px;
    border: 0;
    background: none;
    outline: none;
    opacity: 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 17px;
    color: #09090b;
    transition: opacity .2s ease .1s;
}

:where(.blog-page) .search__input::placeholder {
    color: #a1a1aa;
}

:where(.blog-page) .search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

:where(.blog-page) .search__clear {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: 5px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #52525b;
    cursor: pointer;
    opacity: 0;
    font-family: var(--font-inter);
    font-size: 24px;
    line-height: 1;
    transition: opacity .2s ease .1s, background-color .2s ease;
}

:where(.blog-page) .search__clear:hover, :where(.blog-page) .search__clear:focus-visible {
    background: #f4f4f5;
    color: #09090b;
    outline: none;
}

:where(.blog-page) .search.is-open .search__input, :where(.blog-page) .search.is-open .search__clear {
    opacity: 1;
}

/* article grid */
:where(.blog-page) .grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: max(40px, calc(72 * var(--u))) calc(24 * var(--u));
}

:where(.blog-page) .bcard {
    display: grid;
    gap: 20px;
    color: #09090b;
}

:where(.blog-page) .bcard[hidden] {
    display: none;
}

:where(.blog-page) .bcard.is-in {
    animation: bcard-in .4s ease both;
}

@keyframes bcard-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

:where(.blog-page) .bcard__media {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: max(14px, calc(20 * var(--u)));
    overflow: hidden;
    background: #f4f4f5;
    transition: transform .3s ease, filter .3s ease, box-shadow .3s ease;
}

:where(.blog-page) .bcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(.blog-page) .bcard__body {
    display: grid;
    justify-items: start;
    gap: 16px;
}

:where(.blog-page) .bcard__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
    letter-spacing: var(--ls-h6);
    text-decoration: underline transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color .2s ease;
}
:where(.blog-page) .bcard__title {
    min-height: calc(3 * var(--lh-h6) * var(--fs-h6));
}

/* hover / focus (Figma "Blog card (hover)"): the image lifts 4px and brightens, the title is underlined */
:where(.blog-page) .bcard:hover .bcard__media, :where(.blog-page) .bcard:focus-visible .bcard__media {
    transform: translateY(-4px);
    filter: brightness(1.06);
    box-shadow: 0 12px 32px rgba(9, 9, 11, .1);
}

:where(.blog-page) .bcard:hover .bcard__title, :where(.blog-page) .bcard:focus-visible .bcard__title {
    text-decoration-color: #09090b;
}

:where(.blog-page) .bcard:focus-visible {
    outline: none;
}

:where(.blog-page) .browse__empty {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.5;
    color: #52525b;
}

/* pagination (Figma "Pagination item"): 44 circles, current ink, hover grey, disabled light */
:where(.blog-page) .pages {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: calc(48 * var(--u));
}

:where(.blog-page) .pages:empty {
    display: none;
}

:where(.blog-page) .pages__item {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: #52525b;
    transition: background-color .2s ease, color .2s ease;
}

:where(.blog-page) .pages__item:hover:not(:disabled):not(.is-current), :where(.blog-page) .pages__item:focus-visible {
    background: #f4f4f5;
    color: #09090b;
    outline: none;
}

:where(.blog-page) .pages__item.is-current {
    background: #09090b;
    color: #fff;
    cursor: default;
}

:where(.blog-page) .pages__item:disabled {
    color: #d4d4d8;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    :where(.blog-page) .bcard.is-in {
        animation: none;
    }

    :where(.blog-page) .search, :where(.blog-page) .search__input, :where(.blog-page) .search__clear, :where(.blog-page) .bcard__media, :where(.blog-page) .bcard__title, :where(.blog-page) .readlink::after, :where(.blog-page) .readlink span, :where(.blog-page) .featured__image img {
        transition: none;
    }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
    :where(.blog-page) .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* mobile layout: narrow, portrait or short screens (matches the other pages' mobile breakpoint) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    :where(.blog-page) .bhero {
        gap: 18px;
        padding: 40px var(--gutter) 56px;
    }

    :where(.blog-page) .bhero__copy {
        gap: 18px;
    }

    :where(.blog-page) .featured {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
        padding-bottom: 64px;
    }

    :where(.blog-page) .featured__image {
        width: 100%;
        border-radius: 16px;
    }

    :where(.blog-page) .featured__text {
        gap: 22px;
    }

    :where(.blog-page) .featured__heading {
        gap: 14px;
    }

    :where(.blog-page) .browse {
        gap: 28px;
    }

    :where(.blog-page) .search.is-open {
        position: absolute;
        left: var(--gutter);
        right: var(--gutter);
        width: auto;
        z-index: 2;
    }

    :where(.blog-page) .browse__head {
        position: relative;
    }

    :where(.blog-page) .grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
        gap: 36px 20px;
    }

    :where(.blog-page) .bcard {
        gap: 16px;
    }

    :where(.blog-page) .bcard__body {
        gap: 12px;
    }

    :where(.blog-page) .pages {
        flex-wrap: wrap;
        padding-top: 24px;
    }
}

/* ================================================================================================================
   TESTIMONIALS (testimonials.html – Figma "Testimonials – Improved (Option B)")
   ================================================================================================================ */
/* Techrish testimonials – built from Figma "Testimonials – Improved (Option B)" (1920px desktop frame).
   The shared parts (nav incl. the light + static variants, mega menu, buttons, CTA, footer and WhatsApp come
   from there). Desktop sizes are Figma px × --u (one Figma pixel = 100vw / 1920) with minimums. */
.testimonials-page {
    --u: calc(100vw / 1920);
}

/* shared: section label, heading, highlight colours */
:where(.testimonials-page) .kicker {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label);
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #71717a;
}

:where(.testimonials-page) .kicker--light {
    color: rgba(255, 255, 255, .5);
}

:where(.testimonials-page) .t-h2 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

/* the phrases counted in the thread: Medium, 3px underline in the theme colour (blue Quality, red Partnership,
   green Communication, yellow Speed, orange Recommend) */
:where(.testimonials-page) .hl {
    background: none;
    color: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;
}

:where(.testimonials-page) .hl--quality {
    text-decoration-color: #00aeef;
}

:where(.testimonials-page) .hl--partnership {
    text-decoration-color: #ef4136;
}

:where(.testimonials-page) .hl--communication {
    text-decoration-color: #8dc63f;
}

:where(.testimonials-page) .hl--speed {
    text-decoration-color: #ffc20e;
}

:where(.testimonials-page) .hl--recommend {
    text-decoration-color: #f7941d;
}

/* 2px Techrish-gradient border (as the dark pill button) */
:where(.testimonials-page) .grad-border {
    --gb-bg: #f4f4f5;
    border: 2px solid transparent;
    background: linear-gradient(var(--gb-bg), var(--gb-bg)) padding-box, var(--grad-techrish) border-box;
}

/* ---------- HERO (Figma "Ask our clients" › Hero: 1920 × 894, padding 110 / 120) ---------- */
:where(.testimonials-page) .thero {
    display: grid;
    justify-items: center;
    gap: max(40px, calc(64 * var(--u)));
    padding: max(56px, calc(110 * var(--u))) var(--gutter) max(64px, calc(120 * var(--u)));
    background: #fff;
    color: #09090b;
    text-align: center;
}

:where(.testimonials-page) .thero__title {
    display: grid;
    justify-items: center;
    gap: 28px;
}

:where(.testimonials-page) .thero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 14px;
    border-radius: 999px;
    background: #f4f4f5;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    color: #3f3f46;
}

:where(.testimonials-page) .thero__eyebrow img {
    width: 8px;
    height: 8px;
}

:where(.testimonials-page) .thero h1 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
}

:where(.testimonials-page) .thero__sub {
    max-width: 820px;
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

/* prompt: 1080 × 88 pill, gradient border, send button; the chips under it */
:where(.testimonials-page) .prompt {
    display: grid;
    justify-items: center;
    gap: 24px;
    width: 100%;
}

:where(.testimonials-page) .prompt__bar {
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(100%, calc(1080 * var(--u)));
    min-width: min(100%, 720px);
    height: max(64px, calc(88 * var(--u)));
    padding: 0 14px 0 max(22px, calc(36 * var(--u)));
    border-radius: 999px;
    transition: box-shadow .2s ease;
}

:where(.testimonials-page) .prompt__bar:focus-within {
    box-shadow: 0 0 0 4px rgba(9, 9, 11, .06);
}

:where(.testimonials-page) .prompt__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    outline: none;
    caret-color: #09090b;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-lead-lg);
    letter-spacing: -.01em;
    color: #09090b;
}

:where(.testimonials-page) .prompt__input::placeholder {
    color: #a1a1aa;
}

:where(.testimonials-page) .prompt__send {
    flex: none;
    display: grid;
    place-items: center;
    width: max(44px, calc(56 * var(--u)));
    height: max(44px, calc(56 * var(--u)));
    border: 0;
    border-radius: 50%;
    background: #09090b;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-lead);
    line-height: 1;
    transition: background-color .2s ease, transform .2s ease;
}

:where(.testimonials-page) .prompt__send:hover, :where(.testimonials-page) .prompt__send:focus-visible {
    background: #27272a;
    transform: translateY(-1px);
}

:where(.testimonials-page) .prompt__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

:where(.testimonials-page) .chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px 13px 18px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: normal;
    color: #3f3f46;
    transition: background-color .25s ease, color .25s ease, opacity .25s ease, transform .25s ease;
}

:where(.testimonials-page) .chip img {
    width: 8px;
    height: 8px;
}

:where(.testimonials-page) .chip:hover, :where(.testimonials-page) .chip:focus-visible {
    background: #e4e4e7;
    outline: none;
}

:where(.testimonials-page) .chip.is-active {
    background: #09090b;
    color: #fff;
}

:where(.testimonials-page) .chip.is-dim {
    opacity: .35;
}

:where(.testimonials-page) .chip[hidden] {
    display: none;
}

:where(.testimonials-page) .prompt__hint {
    min-height: 1.2em;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: normal;
    color: #71717a;
}

:where(.testimonials-page) .prompt__hint:empty {
    display: none;
}

/* ---------- THREAD (Figma "Ask our clients" › Thread: black, 1080-wide conversation) ---------- */
:where(.testimonials-page) .thread-sec {
    background: #000;
    color: #fff;
    padding: max(64px, calc(120 * var(--u))) var(--gutter) max(80px, calc(160 * var(--u)));
}

:where(.testimonials-page) .thread {
    display: grid;
    gap: 24px;
    width: min(100%, calc(1080 * var(--u)));
    min-width: min(100%, 720px);
    margin: 0 auto;
}

:where(.testimonials-page) .thread[hidden] {
    display: none;
}

/* the visitor's question, right-aligned, white bubble with a small bottom-right corner */
:where(.testimonials-page) .thread__q {
    display: flex;
    justify-content: flex-end;
}

:where(.testimonials-page) .thread__q p {
    padding: 20px 30px;
    border-radius: 28px 28px 8px 28px;
    background: #fff;
    color: #09090b;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-lead);
    line-height: normal;
    letter-spacing: -.01em;
}

:where(.testimonials-page) .thread__count {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0 0 64px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: rgba(255, 255, 255, .5);
}

:where(.testimonials-page) .thread__count img {
    width: 8px;
    height: 8px;
}

/* an answer: monogram + bubble with a small top-left corner */
:where(.testimonials-page) .answer {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

:where(.testimonials-page) .answer__mono {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: #09090b;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
}

:where(.testimonials-page) .answer__mono--sm {
    font-size: 13px;
}

:where(.testimonials-page) .answer__bubble {
    display: grid;
    gap: 14px;
    width: min(100%, calc(840 * var(--u)));
    min-width: min(100%, 560px);
    padding: 26px 32px;
    border-radius: 8px 28px 28px 28px;
    background: #111113;
}

:where(.testimonials-page) .answer__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    line-height: normal;
}

:where(.testimonials-page) .answer__who strong {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -.01em;
    color: #fff;
}

:where(.testimonials-page) .answer__who span {
    font-family: var(--font-body);
    font-size: 16px;
    color: rgba(255, 255, 255, .5);
}

:where(.testimonials-page) .answer__quote {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .72);
}

:where(.testimonials-page) .answer__quote .hl {
    color: #fff;
}

:where(.testimonials-page) .answer__more {
    justify-self: start;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: rgba(255, 255, 255, .72);
    transition: color .2s ease;
}

:where(.testimonials-page) .answer__more:hover, :where(.testimonials-page) .answer__more:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* "Next is you?": dashed monogram and bubble, links to the contact page */
:where(.testimonials-page) .answer--next {
    align-items: center;
    color: #fff;
}

:where(.testimonials-page) .answer__mono--ask {
    background: none;
    border: 1px dashed rgba(255, 255, 255, .3);
    color: rgba(255, 255, 255, .5);
    font-size: 18px;
}

:where(.testimonials-page) .answer__next {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 22px 28px;
    border: 1px dashed rgba(255, 255, 255, .25);
    border-radius: 8px 28px 28px 28px;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    transition: border-color .2s ease, background-color .2s ease;
}

:where(.testimonials-page) .answer__next img {
    width: 36px;
    height: 8px;
}

:where(.testimonials-page) .answer__next strong {
    font-weight: 600;
    letter-spacing: -.01em;
}

:where(.testimonials-page) .answer--next:hover .answer__next, :where(.testimonials-page) .answer--next:focus-visible .answer__next {
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .04);
}

/* the thread swaps in: bubbles rise one after another */
:where(.testimonials-page) .thread.is-in > * {
    animation: thread-in .45s cubic-bezier(.2, .7, .2, 1) both;
}

:where(.testimonials-page) .thread.is-in > :nth-child(2) {
    animation-delay: .06s;
}

:where(.testimonials-page) .thread.is-in > :nth-child(3) {
    animation-delay: .14s;
}

:where(.testimonials-page) .thread.is-in > :nth-child(4) {
    animation-delay: .24s;
}

:where(.testimonials-page) .thread.is-in > :nth-child(5) {
    animation-delay: .34s;
}

:where(.testimonials-page) .thread.is-in > :nth-child(6) {
    animation-delay: .44s;
}

@keyframes thread-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- ALL REVIEWS (Figma "Reviews", 1920 × 1757) ---------- */
:where(.testimonials-page) .reviews {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: max(40px, calc(72 * var(--u)));
    padding: max(72px, calc(160 * var(--u))) var(--gutter);
    background: #fff;
    color: #09090b;
}

/* minmax(0, 1fr): the column may shrink below the filter row's min-content, so the tabs scroll instead of widening the page */
:where(.testimonials-page) .reviews__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

:where(.testimonials-page) .reviews__heading {
    display: grid;
    gap: calc(15 * var(--u));
}

:where(.testimonials-page) .reviews__lead {
    flex: none;
    width: calc(600 * var(--u));
    max-width: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

/* filter bar: tabs on a grey rule, the active one ink with a 2px underline sitting on the rule */
:where(.testimonials-page) .filter {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid #e4e4e7;
}

:where(.testimonials-page) .filter__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 calc(44 * var(--u));
}

:where(.testimonials-page) .filter__tab {
    margin-bottom: -1px;
    padding: 0 0 max(14px, calc(26 * var(--u)));
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: max(18px, calc(30 * var(--u)));
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #a1a1aa;
    transition: color .2s ease, border-color .2s ease;
}

:where(.testimonials-page) .filter__tab:hover, :where(.testimonials-page) .filter__tab:focus-visible {
    color: #52525b;
    outline: none;
}

:where(.testimonials-page) .filter__tab.is-active {
    color: #09090b;
    border-bottom-color: #09090b;
}

:where(.testimonials-page) .filter__kicker {
    padding-top: 0;
}

/* review wall: three 544-wide columns, 24 apart; the cards carry an order so they list in review order on mobile */
:where(.testimonials-page) .wall {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(24 * var(--u));
    align-items: start;
}

:where(.testimonials-page) .wall__col {
    display: grid;
    gap: calc(24 * var(--u));
}

:where(.testimonials-page) .rcard {
    --ink: #09090b;
    --grey: #52525b;
    --meta: #71717a;
    --rule: #e4e4e7;
    --tag: #fff;
    --tag-ink: #3f3f46;
    --mono: #09090b;
    --mono-ink: #fff;
    display: grid;
    gap: calc(28 * var(--u));
    padding: calc(40 * var(--u));
    border-radius: max(16px, calc(24 * var(--u)));
    background: #f4f4f5;
    color: var(--ink);
    font-family: var(--font-body);
    transition: background-color .3s ease, color .3s ease, transform .3s ease, opacity .3s ease;
    scroll-margin-top: 120px;
}

:where(.testimonials-page) .rcard[hidden] {
    display: none;
}

:where(.testimonials-page) .rcard.is-in {
    animation: thread-in .4s ease both;
}

:where(.testimonials-page) .rcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

:where(.testimonials-page) .rcard__mark {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 64px;
    line-height: 40px;
}

:where(.testimonials-page) .rcard__top img {
    height: 10px;
    width: auto;
}

:where(.testimonials-page) .rcard__quote {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--grey);
}

:where(.testimonials-page) .rcard__quote .hl {
    color: var(--ink);
}

:where(.testimonials-page) .rcard__rule {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--rule);
    transition: background-color .3s ease;
}

:where(.testimonials-page) .rcard__who {
    display: flex;
    align-items: center;
    gap: 16px;
}

:where(.testimonials-page) .rcard__who > span:last-child {
    display: grid;
    gap: 2px;
}

:where(.testimonials-page) .rcard__who strong {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-body-lg);
    line-height: normal;
    letter-spacing: -.01em;
}

:where(.testimonials-page) .rcard__who small {
    font-size: 16px;
    line-height: normal;
    color: var(--meta);
}

:where(.testimonials-page) .rcard__mono {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mono);
    color: var(--mono-ink);
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    transition: background-color .3s ease, color .3s ease;
}

:where(.testimonials-page) .rcard__mono--sm {
    font-size: 13px;
}

:where(.testimonials-page) .rcard__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

:where(.testimonials-page) .rcard__tags li {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--tag);
    color: var(--tag-ink);
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    transition: background-color .3s ease, color .3s ease;
}

/* hover (Figma "Review card (hover)"): the card turns ink, the text white, the highlights keep their colour */
:where(.testimonials-page) .rcard:hover, :where(.testimonials-page) .rcard.is-flash {
    --ink: #fff;
    --grey: rgba(255, 255, 255, .72);
    --meta: rgba(255, 255, 255, .5);
    --rule: rgba(255, 255, 255, .14);
    --tag: rgba(255, 255, 255, .1);
    --tag-ink: #fff;
    --mono: #fff;
    --mono-ink: #09090b;
    background: #09090b;
}

/* "Next is you?" slot: dashed card with an arrow */
:where(.testimonials-page) .slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: calc(40 * var(--u));
    border: 1.5px dashed #d4d4d8;
    border-radius: max(16px, calc(24 * var(--u)));
    color: #09090b;
    transition: border-color .25s ease, background-color .25s ease;
}

:where(.testimonials-page) .slot__copy {
    display: grid;
    gap: 8px;
}

:where(.testimonials-page) .slot__copy strong {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
}

:where(.testimonials-page) .slot__copy span {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.testimonials-page) .slot__arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #09090b;
    color: #fff;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    transition: transform .25s ease;
}

:where(.testimonials-page) .slot:hover, :where(.testimonials-page) .slot:focus-visible {
    border-color: #09090b;
    background: #fafafa;
    outline: none;
}

:where(.testimonials-page) .slot:hover .slot__arrow {
    transform: translateX(4px);
}

:where(.testimonials-page) .wall__empty {
    font-family: var(--font-body);
    font-size: 18px;
    color: #52525b;
}

:where(.testimonials-page) .wall__empty a {
    text-decoration: underline;
    text-underline-position: from-font;
}

/* ---------- NEXT CHAPTER (Figma "Next chapter", 1920 × 1108) ---------- */
:where(.testimonials-page) .next {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    padding: max(72px, calc(160 * var(--u))) var(--gutter);
    background: #000;
    color: #fff;
}

:where(.testimonials-page) .next__content {
    display: grid;
    gap: 28px;
    width: calc(720 * var(--u));
    max-width: 100%;
}

:where(.testimonials-page) .next__grad {
    background: var(--grad-techrish);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

:where(.testimonials-page) .next__body {
    max-width: calc(620 * var(--u));
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .72);
}

:where(.testimonials-page) .next__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 8px;
}

:where(.testimonials-page) .next__ghost {
    padding: 19px 31px;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    transition: border-color .2s ease, background-color .2s ease;
}

:where(.testimonials-page) .next__ghost:hover, :where(.testimonials-page) .next__ghost:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, .06);
}

/* open slots: 840 wide, dark cards; the first with the gradient border, the others dashed and fading */
:where(.testimonials-page) .slots {
    display: grid;
    gap: 24px;
    width: calc(840 * var(--u));
    max-width: 100%;
    flex: none;
}

:where(.testimonials-page) .oslot {
    display: grid;
    gap: 24px;
    padding: calc(36 * var(--u)) calc(40 * var(--u));
    border: 1px dashed rgba(255, 255, 255, .2);
    border-radius: max(16px, calc(24 * var(--u)));
    background: #111113;
}

:where(.testimonials-page) .oslot--lead {
    --gb-bg: #111113;
    border: 2px solid transparent;
    background: linear-gradient(var(--gb-bg), var(--gb-bg)) padding-box, var(--grad-techrish) border-box;
}

:where(.testimonials-page) .oslot__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

:where(.testimonials-page) .oslot__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
}

:where(.testimonials-page) .oslot__pill img {
    width: 8px;
    height: 8px;
}

:where(.testimonials-page) .oslot__status {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

:where(.testimonials-page) .oslot__lines {
    display: grid;
    gap: 12px;
}

:where(.testimonials-page) .oslot__lines span {
    display: block;
    height: 14px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .08);
}

:where(.testimonials-page) .oslot__lines span:last-child {
    width: 60.5%;
}

:where(.testimonials-page) .oslot--lead .oslot__lines span {
    background: linear-gradient(90deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .08) 100%) 0 0 / 200% 100%;
    animation: oslot-shimmer 2.4s linear infinite;
}

@keyframes oslot-shimmer {
    to {
        background-position: -200% 0;
    }
}

:where(.testimonials-page) .oslot__who {
    display: flex;
    align-items: center;
    gap: 16px;
}

:where(.testimonials-page) .oslot__who > span:last-child {
    display: grid;
    gap: 2px;
}

:where(.testimonials-page) .oslot__who strong {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 20px;
    line-height: normal;
    letter-spacing: -.01em;
}

:where(.testimonials-page) .oslot__who small {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: normal;
    color: rgba(255, 255, 255, .5);
}

:where(.testimonials-page) .oslot__mono {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px dashed rgba(255, 255, 255, .3);
    border-radius: 50%;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    color: rgba(255, 255, 255, .5);
}

@media (prefers-reduced-motion: reduce) {
    :where(.testimonials-page) .thread.is-in > *, :where(.testimonials-page) .rcard.is-in, :where(.testimonials-page) .oslot--lead .oslot__lines span {
        animation: none;
    }

    :where(.testimonials-page) .chip, :where(.testimonials-page) .rcard, :where(.testimonials-page) .slot, :where(.testimonials-page) .slot__arrow, :where(.testimonials-page) .prompt__send {
        transition: none;
    }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
    :where(.testimonials-page) .wall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(.testimonials-page) .next {
        flex-direction: column;
    }

    :where(.testimonials-page) .next__content, :where(.testimonials-page) .slots {
        width: auto;
    }
}

/* mobile layout: narrow, portrait or short screens (matches the other pages' mobile breakpoint) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    :where(.testimonials-page) .thero {
        gap: 36px;
        padding: 48px var(--gutter) 64px;
    }

    :where(.testimonials-page) .thero__title {
        gap: 20px;
    }

    :where(.testimonials-page) .prompt {
        gap: 16px;
    }

    :where(.testimonials-page) .prompt__bar {
        width: 100%;
        min-width: 0;
        height: 64px;
        padding: 0 8px 0 20px;
    }

    :where(.testimonials-page) .prompt__send {
        width: 46px;
        height: 46px;
    }

    :where(.testimonials-page) .prompt__chips {
        gap: 8px;
    }

    :where(.testimonials-page) .chip {
        padding: 10px 16px 10px 14px;
    }

    :where(.testimonials-page) .thread-sec {
        padding: 56px var(--gutter) 72px;
    }

    :where(.testimonials-page) .thread {
        width: 100%;
        min-width: 0;
        gap: 16px;
    }

    :where(.testimonials-page) .thread__q p {
        padding: 14px 20px;
    }

    :where(.testimonials-page) .thread__count {
        padding-left: 0;
        font-size: 14px;
    }

    :where(.testimonials-page) .answer {
        gap: 10px;
    }

    :where(.testimonials-page) .answer__mono {
        width: 40px;
        height: 40px;
        font-size: 13px;
    }

    :where(.testimonials-page) .answer__mono--sm {
        font-size: 11px;
    }

    :where(.testimonials-page) .answer__bubble {
        width: 100%;
        min-width: 0;
        padding: 18px 20px;
        gap: 10px;
    }

    :where(.testimonials-page) .answer__who strong {
        font-size: 16px;
    }

    :where(.testimonials-page) .answer__who span {
        font-size: 14px;
    }

    :where(.testimonials-page) .answer__more {
        font-size: 15px;
    }

    :where(.testimonials-page) .answer__next {
        padding: 16px 20px;
        font-size: 16px;
    }

    :where(.testimonials-page) .reviews {
        gap: 32px;
        padding: 72px var(--gutter);
    }

    :where(.testimonials-page) .reviews__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    :where(.testimonials-page) .reviews__heading {
        gap: 12px;
    }

    :where(.testimonials-page) .reviews__lead {
        width: auto;
    }

    :where(.testimonials-page) .filter {
        flex-direction: column;
        gap: 12px;
    }

    /* the tabs scroll sideways in one row instead of wrapping */
    :where(.testimonials-page) .filter__tabs {
        flex-wrap: nowrap;
        gap: 0 20px;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    :where(.testimonials-page) .filter__tabs::-webkit-scrollbar {
        display: none;
    }

    :where(.testimonials-page) .filter__tab {
        flex: none;
        white-space: nowrap;
    }

    :where(.testimonials-page) .filter__tab {
        padding-bottom: 12px;
        font-size: clamp(16px, 4.4vw, 20px);
    }

    :where(.testimonials-page) .filter__kicker {
        display: none;
    }

    /* one list in review order: the columns dissolve and the cards' order attribute sorts them */
    :where(.testimonials-page) .wall {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    :where(.testimonials-page) .wall__col {
        display: contents;
    }

    :where(.testimonials-page) .rcard {
        gap: 20px;
        padding: 24px;
        border-radius: 16px;
    }

    :where(.testimonials-page) .rcard__mark {
        font-size: 48px;
        line-height: 32px;
    }

    :where(.testimonials-page) .rcard__who small {
        font-size: 15px;
    }

    :where(.testimonials-page) .slot {
        padding: 24px;
        border-radius: 16px;
    }

    :where(.testimonials-page) .next {
        gap: 36px;
        padding: 72px var(--gutter);
    }

    :where(.testimonials-page) .next__content {
        gap: 18px;
    }

    :where(.testimonials-page) .next__body {
        max-width: none;
    }

    :where(.testimonials-page) .slots {
        gap: 14px;
    }

    :where(.testimonials-page) .oslot {
        gap: 18px;
        padding: 22px 20px;
        border-radius: 16px;
    }

    :where(.testimonials-page) .oslot__pill {
        font-size: 14px;
    }

    :where(.testimonials-page) .oslot__status {
        font-size: 13px;
    }

    :where(.testimonials-page) .oslot__who strong {
        font-size: 17px;
    }

    :where(.testimonials-page) .oslot__who small {
        font-size: 14px;
    }
}

@media (max-width: 560px) {
    :where(.testimonials-page) .next__ghost {
        padding: 15px 19px;
    }

    :where(.testimonials-page) .prompt__chips {
        justify-content: flex-start;
    }

    :where(.testimonials-page) .rcard__tags li {
        font-size: 14px;
    }
}

/* ================================================================================================================
   WORKS (works.html – Figma "Works – Improved")
   ================================================================================================================ */
/* Techrish works – built from Figma "Works – Improved" (1920px desktop frame).
   The shared parts (nav incl. the light variant, mega menu, buttons, the centred light hero (.shero), CTA,
   footer and WhatsApp are in COMMON COMPONENTS above). Desktop sizes are Figma px × --u (one Figma pixel = 100vw / 1920) with
   minimums. */
.works-page {
    --u: calc(100vw / 1920);
}

/* ---------- FEATURED WORKS REEL (Figma "Featured works reel (scroll)", 1920 × 1080, Step 1–5) ----------
   The section is five steps tall and the stage sticks to the viewport while the page scrolls through it (script.js
   picks the step). The centre screen is flat and sharp; the two above and the two below tilt towards the viewer, get
   shorter and blur. Left column: the active project's number, name and category. Right column: its summary and the
   View project button. */
/* the stage is laid out in Figma px × --u; here --u also shrinks with the viewport height so the 1080-tall layout
   always fits (short laptop screens) */
:where(.works-page) .reel {
    --u: min(calc(100vw / 1920), calc(100vh / 1080));
    position: relative;
    height: calc(100vh + 5 * 70vh);
    background: #050505;
    color: #fff;
}

:where(.works-page) .reel__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

/* small uppercase labels with a 48px rule (Figma: FEATURED WORK / SELECTED PROJECTS / SCROLL TO SEE MORE) */
:where(.works-page) .reel__label {
    position: absolute;
    z-index: 2;
    display: grid;
    gap: 18px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    white-space: nowrap;
}

:where(.works-page) .reel__label::before {
    content: "";
    width: 48px;
    height: 1px;
    background: rgba(255, 255, 255, .5);
}

:where(.works-page) .reel__label--featured {
    left: var(--gutter);
    top: calc(96 * var(--u));
    gap: 14px;
}

:where(.works-page) .reel__label--selected, :where(.works-page) .reel__label--scroll {
    right: var(--gutter);
    text-align: right;
    justify-items: end;
}

:where(.works-page) .reel__label--selected::before, :where(.works-page) .reel__label--scroll::before {
    order: 1;
}

/* rule under the text */
:where(.works-page) .reel__label--selected {
    top: calc(88 * var(--u));
}

:where(.works-page) .reel__label--scroll {
    top: calc(900 * var(--u));
}

/* the five screens: a 640 × 400 slot in the middle of the stage; each screen is positioned by its distance from the
   active one (is-c centre, is-u1/is-d1 one above / below, is-u2/is-d2 two away, is-u3/is-d3 out of sight). The outer
   edge of each tilted screen is the one nearest the viewer, so they project to Figma's 150 / 110 heights. */
:where(.works-page) .reel__screens {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(640 * var(--u));
    height: calc(400 * var(--u));
    transform: translate(-50%, -50%);
    perspective: calc(2400 * var(--u));
}

:where(.works-page) .reel__shot {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1), opacity .8s ease, filter .8s ease;
    will-change: transform;
}

:where(.works-page) .reel__shot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 6px;
}

/* the render is 801 × 561 for the 640 × 400 screen (its shadow runs past the edges) */
:where(.works-page) .reel__shot img {
    position: absolute;
    left: -12.58%;
    top: -12.63%;
    width: 125.16%;
    max-width: none;
    height: auto;
    pointer-events: none;
}

:where(.works-page) .reel__shot.is-c {
    z-index: 5;
    cursor: default;
}

:where(.works-page) .reel__shot.is-u1 {
    transform: translateY(calc(-291 * var(--u))) rotateX(-75deg);
    opacity: .92;
    filter: blur(1px);
    z-index: 4;
}

:where(.works-page) .reel__shot.is-d1 {
    transform: translateY(calc(291 * var(--u))) rotateX(75deg);
    opacity: .92;
    filter: blur(1px);
    z-index: 4;
}

:where(.works-page) .reel__shot.is-u2 {
    transform: translateY(calc(-437 * var(--u))) rotateX(-82deg);
    opacity: .7;
    filter: blur(3px);
    z-index: 3;
}

:where(.works-page) .reel__shot.is-d2 {
    transform: translateY(calc(437 * var(--u))) rotateX(82deg);
    opacity: .7;
    filter: blur(3px);
    z-index: 3;
}

:where(.works-page) .reel__shot.is-u3 {
    transform: translateY(calc(-560 * var(--u))) rotateX(-88deg);
    opacity: 0;
    filter: blur(4px);
    z-index: 1;
    pointer-events: none;
}

:where(.works-page) .reel__shot.is-d3 {
    transform: translateY(calc(560 * var(--u))) rotateX(88deg);
    opacity: 0;
    filter: blur(4px);
    z-index: 1;
    pointer-events: none;
}

/* left column (Figma "Active project": x 120, y 351, 440 wide): number, rule, name, category */
:where(.works-page) .reel__info {
    position: absolute;
    z-index: 2;
    left: max(var(--gutter), calc(50% - 840 * var(--u)));
    top: calc(351 * var(--u));
    width: calc(440 * var(--u));
    display: grid;
}

:where(.works-page) .reel__project {
    grid-area: 1 / 1;
    display: grid;
    gap: 28px;
    justify-items: start;
    opacity: 0;
    transform: translateY(24px);
    pointer-events: none;
    transition: opacity .6s ease, transform .6s ease;
}

:where(.works-page) .reel__project.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

:where(.works-page) .reel__num {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: max(72px, calc(136 * var(--u)));
    line-height: .9;
    letter-spacing: -.04em;
    color: rgba(255, 255, 255, .35);
}

:where(.works-page) .reel__rule {
    width: 48px;
    height: 1px;
    background: rgba(255, 255, 255, .5);
}

:where(.works-page) .reel__name {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    color: #fff;
}

:where(.works-page) .reel__cat {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

/* right column (Figma: vertical rule at x 1392, y 430, 220 tall; summary at x 1432, y 463, 360 wide) */
:where(.works-page) .reel__side {
    position: absolute;
    z-index: 2;
    left: calc(50% + 432 * var(--u));
    top: calc(430 * var(--u));
    display: flex;
    gap: calc(39 * var(--u));
}

:where(.works-page) .reel__vrule {
    flex: none;
    width: 1px;
    height: calc(220 * var(--u));
    background: rgba(255, 255, 255, .3);
}

:where(.works-page) .reel__summaries {
    display: grid;
    width: calc(360 * var(--u));
    padding-top: 33px;
}

:where(.works-page) .reel__summary {
    grid-area: 1 / 1;
    display: grid;
    gap: 32px;
    justify-items: start;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity .6s ease .1s, transform .6s ease .1s;
}

:where(.works-page) .reel__summary.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

:where(.works-page) .reel__summary p {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .72);
}

/* ---------- PROJECTS (Figma › Projects: filter bar, 2 × 828 grid 72 / 24 apart, load more; padding 120 / 160) ---------- */
:where(.works-page) .projects {
    display: grid;
    gap: max(40px, calc(64 * var(--u)));
    padding: max(64px, calc(120 * var(--u))) var(--gutter) max(80px, calc(160 * var(--u)));
    background: #fff;
    color: #09090b;
}

/* filter tabs (Figma "Works filter tab"): grey text, the active one ink with a 2px underline sitting on the grey rule */
:where(.works-page) .filters {
    display: flex;
    gap: 44px;
    border-bottom: 1px solid #e4e4e7;
    overflow-x: auto;
    scrollbar-width: none;
}

:where(.works-page) .filters::-webkit-scrollbar {
    display: none;
}

:where(.works-page) .filter {
    flex: none;
    margin-bottom: -1px;
    padding: 0 0 26px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: max(20px, calc(30 * var(--u)));
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #a1a1aa;
    white-space: nowrap;
    transition: color .2s ease, border-color .2s ease;
}

:where(.works-page) .filter:hover, :where(.works-page) .filter:focus-visible {
    color: #52525b;
    outline: none;
}

:where(.works-page) .filter.is-active {
    color: #09090b;
    border-color: #09090b;
}

:where(.works-page) .pgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: max(40px, calc(72 * var(--u))) calc(24 * var(--u));
}

:where(.works-page) .pcard {
    display: grid;
    gap: 28px;
    color: #09090b;
}

:where(.works-page) .pcard[hidden] {
    display: none;
}

:where(.works-page) .pcard:focus-visible {
    outline: none;
}

/* media tile (Figma "Project card": 828 × 560 tile; browser 600 × 388 at 63 / 85; phone 172 × 352 at 591 / 147).
   The tile is a size container, so everything inside is in cqw (1cqw = 1/100 of the tile = 8.28 Figma px). */
:where(.works-page) .pcard__media {
    position: relative;
    display: block;
    container-type: inline-size;
    aspect-ratio: 828 / 560;
    border: 1px solid #e4e4e7;
    border-radius: max(16px, calc(24 * var(--u)));
    background: #f4f4f5;
    overflow: hidden;
    transition: background-color .4s ease, border-color .4s ease;
}

:where(.works-page) .pcard__browser {
    position: absolute;
    left: 7.609cqw;
    top: 10.266cqw;
    width: 72.464cqw;
    height: 46.86cqw;
    border-radius: 1.449cqw;
    background: #fff;
    box-shadow: 0 2.899cqw 5.797cqw rgba(9, 9, 11, .16);
    overflow: hidden;
}

:where(.works-page) .pcard__bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4.348cqw;
    border-bottom: 1px solid #e4e4e7;
}

:where(.works-page) .pcard__bar img {
    position: absolute;
    top: 1.691cqw;
    width: .966cqw;
    height: .966cqw;
}

:where(.works-page) .pcard__bar img:nth-child(1) {
    left: 1.691cqw;
}

:where(.works-page) .pcard__bar img:nth-child(2) {
    left: 3.382cqw;
}

:where(.works-page) .pcard__bar img:nth-child(3) {
    left: 5.072cqw;
}

:where(.works-page) .pcard__bar::after {
    content: "";
    position: absolute;
    left: 21.014cqw;
    top: 1.087cqw;
    width: 30.435cqw;
    height: 2.174cqw;
    border-radius: 999px;
    background: #f4f4f5;
}

:where(.works-page) .pcard__capture {
    position: absolute;
    left: 0;
    top: 4.348cqw;
    width: 100%;
    height: 42.512cqw;
    overflow: hidden;
    background: #fff;
}

:where(.works-page) .pcard__capture img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .6s ease;
}

:where(.works-page) .pcard__phone {
    position: absolute;
    left: 71.377cqw;
    top: 17.754cqw;
    width: 20.773cqw;
    height: 42.512cqw;
    border-radius: 3.623cqw;
    background: #09090b;
    box-shadow: 0 2.899cqw 5.797cqw rgba(9, 9, 11, .22);
}

:where(.works-page) .pcard__phone .pcard__capture {
    left: .725cqw;
    top: .725cqw;
    width: 19.324cqw;
    height: 41.063cqw;
    border-radius: 2.899cqw;
}

:where(.works-page) .pcard__phone::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 7.609cqw;
    top: 1.691cqw;
    width: 5.556cqw;
    height: 1.449cqw;
    border-radius: 999px;
    background: #09090b;
}

/* island */
/* arrow button, shown on hover (top right of the tile) */
:where(.works-page) .pcard__go {
    position: absolute;
    z-index: 2;
    right: 2.899cqw;
    top: 2.899cqw;
    display: grid;
    place-items: center;
    width: max(44px, 6.763cqw);
    height: max(44px, 6.763cqw);
    border-radius: 50%;
    background: #fff;
    color: #09090b;
    font-family: var(--font-inter);
    font-size: 22px;
    line-height: 1;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
}

/* body: title, summary, tags */
:where(.works-page) .pcard__body {
    display: grid;
    gap: 22px;
    justify-items: start;
}

:where(.works-page) .pcard__copy {
    display: grid;
    gap: 10px;
}

:where(.works-page) .pcard__title {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
    text-decoration: underline transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    transition: text-decoration-color .2s ease;
}

:where(.works-page) .pcard__sum {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.works-page) .pcard__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

:where(.works-page) .ptag {
    padding: 7px 14px;
    border-radius: 999px;
    background: #f4f4f5;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    color: #3f3f46;
    white-space: nowrap;
}

/* HOVER (Figma "Project card (hover)"): the tile turns ink, the arrow button appears, the title underlines and the
   full-page captures scroll from top to bottom inside the browser and the phone (--dur is set per capture by
   script.js from its length); they return to the top on leave. The devices themselves do not move. */
:where(.works-page) .pcard:hover .pcard__media, :where(.works-page) .pcard:focus-visible .pcard__media {
    background: #09090b;
    border-color: #09090b;
}

:where(.works-page) .pcard:hover .pcard__go, :where(.works-page) .pcard:focus-visible .pcard__go {
    opacity: 1;
    transform: none;
}

:where(.works-page) .pcard:hover .pcard__title, :where(.works-page) .pcard:focus-visible .pcard__title {
    text-decoration-color: #09090b;
}

:where(.works-page) .pcard:hover .pcard__browser .pcard__capture img, :where(.works-page) .pcard:focus-visible .pcard__browser .pcard__capture img {
    transform: translateY(calc(-100% + 42.512cqw));
    transition: transform var(--dur, 6s) linear;
}

:where(.works-page) .pcard:hover .pcard__phone .pcard__capture img, :where(.works-page) .pcard:focus-visible .pcard__phone .pcard__capture img {
    transform: translateY(calc(-100% + 41.063cqw));
    transition: transform var(--dur, 6s) linear;
}

/* ENTERING (plays the first time a card is seen; script.js adds .is-in): the browser and the phone rise into place
   with a small overshoot and the text fades in */
.js:where(.works-page, .works-page *) .pcard__browser, .js:where(.works-page, .works-page *) .pcard__phone {
    opacity: 0;
    transform: translateY(10cqw);
}

.js:where(.works-page, .works-page *) .pcard__body {
    opacity: 0;
}

:where(.works-page) .pcard.is-in .pcard__browser {
    animation: pcard-rise .9s cubic-bezier(.34, 1.45, .64, 1) forwards;
}

:where(.works-page) .pcard.is-in .pcard__phone {
    animation: pcard-rise .9s cubic-bezier(.34, 1.45, .64, 1) .12s forwards;
}

:where(.works-page) .pcard.is-in .pcard__body {
    animation: pcard-fade .6s ease .35s forwards;
}

@keyframes pcard-rise {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pcard-fade {
    to {
        opacity: 1;
    }
}

/* load more (Figma "Load more": count + Discover more) */
:where(.works-page) .more {
    display: grid;
    justify-items: center;
    gap: 24px;
    padding-top: 16px;
    text-align: center;
}

:where(.works-page) .more__count {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.5;
    color: #71717a;
}

:where(.works-page) .projects__empty {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.5;
    color: #52525b;
}

@media (prefers-reduced-motion: reduce) {
    :where(.works-page) .reel__shot, :where(.works-page) .reel__project, :where(.works-page) .reel__summary, :where(.works-page) .pcard__media, :where(.works-page) .pcard__go, :where(.works-page) .pcard__title, :where(.works-page) .pcard__capture img, :where(.works-page) .filter {
        transition: none;
    }

    .js:where(.works-page, .works-page *) .pcard__browser, .js:where(.works-page, .works-page *) .pcard__phone, .js:where(.works-page, .works-page *) .pcard__body {
        opacity: 1;
        transform: none;
    }

    :where(.works-page) .pcard.is-in .pcard__browser, :where(.works-page) .pcard.is-in .pcard__phone, :where(.works-page) .pcard.is-in .pcard__body {
        animation: none;
    }

    :where(.works-page) .pcard:hover .pcard__capture img, :where(.works-page) .pcard:focus-visible .pcard__capture img {
        transform: none;
    }
}

/* ---------- RESPONSIVE ---------- */
/* mobile layout: narrow, portrait or short screens (matches the other pages' mobile breakpoint) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    /* reel: label, screens and the two text blocks flow top to bottom inside the stage */ :where(.works-page) .reel {
        height: calc(100vh + 5 * 60vh);
        height: calc(100svh + 5 * 60vh);
    }

    :where(.works-page) .reel__stage {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        gap: 14px;
        padding: 24px var(--gutter) 28px;
    }

    :where(.works-page) .reel__label {
        position: static;
    }

    :where(.works-page) .reel__label--selected, :where(.works-page) .reel__label--scroll {
        display: none;
    }

    :where(.works-page) .reel__label--featured {
        grid-template-columns: 32px auto;
        align-items: center;
        gap: 12px;
        font-size: 12px;
    }

    :where(.works-page) .reel__label--featured::before {
        width: 32px;
    }

    :where(.works-page) .reel__info {
        position: static;
        width: auto;
    }

    :where(.works-page) .reel__project {
        gap: 10px;
    }

    :where(.works-page) .reel__num {
        font-size: 48px;
    }

    :where(.works-page) .reel__rule {
        display: none;
    }

    :where(.works-page) .reel__name br {
        display: none;
    }

    :where(.works-page) .reel__cat {
        font-size: 12px;
    }

    :where(.works-page) .reel__screens {
        --u: calc(min(100vw - 2 * var(--gutter), 480px) / 640);
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        justify-self: center;
        align-self: center;
    }

    :where(.works-page) .reel__shot.is-u1 {
        transform: translateY(calc(-250 * var(--u))) rotateX(-75deg);
    }

    :where(.works-page) .reel__shot.is-d1 {
        transform: translateY(calc(250 * var(--u))) rotateX(75deg);
    }

    :where(.works-page) .reel__shot.is-u2 {
        transform: translateY(calc(-370 * var(--u))) rotateX(-82deg);
        opacity: .5;
    }

    :where(.works-page) .reel__shot.is-d2 {
        transform: translateY(calc(370 * var(--u))) rotateX(82deg);
        opacity: .5;
    }

    :where(.works-page) .reel__side {
        position: static;
    }

    :where(.works-page) .reel__vrule {
        display: none;
    }

    :where(.works-page) .reel__summaries {
        width: auto;
        padding-top: 0;
    }

    :where(.works-page) .reel__summary {
        gap: 14px;
    }

    /* projects: one column */
    :where(.works-page) .projects {
        gap: 28px;
    }

    :where(.works-page) .filters {
        gap: 24px;
    }

    :where(.works-page) .filter {
        padding-bottom: 14px;
        font-size: 18px;
    }

    :where(.works-page) .pgrid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    :where(.works-page) .pcard {
        gap: 18px;
    }

    :where(.works-page) .pcard__body {
        gap: 14px;
    }

    :where(.works-page) .ptag {
        padding: 6px 12px;
        font-size: 14px;
    }
}

/* ================================================================================================================
   PROJECT DETAIL (work-*.html – Figma "Project detail – Overlay")
   ================================================================================================================ */
/* Techrish project detail pages (work-*.html) – built from Figma "Project detail – Overlay (sample: Beaufort House)"
   (1920px desktop frame). The shared parts (buttons are in COMMON COMPONENTS above). The pages have no site header or footer,
   as in the design: a sticky top bar with Back / previous / next / close, then the project. Desktop sizes are
   Figma px × --u (one Figma pixel = 100vw / 1920) with minimums. */
.wdetail-page {
    --u: calc(100vw / 1920);
    background: #fff;
    color: #09090b;
}

:where(.wdetail-page) .wpage {
    position: relative;
}

/* small uppercase label (Figma: WORKS / TOURISM & HOSPITALITY, ABOUT THE PROJECT, WHAT WE DELIVERED, NEXT PROJECT) */
:where(.wdetail-page) .wlabel {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #52525b;
}

:where(.wdetail-page) .wlabel--light {
    color: rgba(255, 255, 255, .5);
}

:where(.wdetail-page) .wlabel__sep {
    margin: 0 .6em;
}

/* ---------- TOP BAR (Figma › Top bar (sticky): Back to works pill, previous / next / close circles) ---------- */
:where(.wdetail-page) .wbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: max(16px, calc(56 * var(--u))) var(--gutter) 16px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: padding .25s ease, box-shadow .25s ease;
}

/* once the page has scrolled under it (script.js adds .is-stuck) the bar closes up and gets a hairline */
:where(.wdetail-page) .wbar.is-stuck {
    padding-top: 16px;
    box-shadow: 0 1px 0 #e4e4e7;
}

:where(.wdetail-page) .wbar__back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 14px 24px 14px 20px;
    border-radius: 999px;
    background: #f4f4f5;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    color: #09090b;
    white-space: nowrap;
    transition: background-color .2s ease;
}

:where(.wdetail-page) .wbar__back:hover, :where(.wdetail-page) .wbar__back:focus-visible {
    background: #e4e4e7;
}

:where(.wdetail-page) .wbar__pager {
    flex: none;
    display: flex;
    gap: 12px;
}

:where(.wdetail-page) .wbar__btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f4f4f5;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    color: #09090b;
    transition: background-color .2s ease;
}

:where(.wdetail-page) .wbar__btn:hover, :where(.wdetail-page) .wbar__btn:focus-visible {
    background: #e4e4e7;
}

:where(.wdetail-page) .wbar__btn--close {
    background: #09090b;
    color: #fff;
}

:where(.wdetail-page) .wbar__btn--close:hover, :where(.wdetail-page) .wbar__btn--close:focus-visible {
    background: #27272a;
}

/* ---------- PROJECT HEAD (Figma › Project head: title block + Visit website; pt 64, pb 72) ---------- */
:where(.wdetail-page) .whead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding: max(24px, calc(40 * var(--u))) var(--gutter) max(40px, calc(72 * var(--u)));
}

:where(.wdetail-page) .whead__title {
    display: grid;
    gap: 32px;
    justify-items: start;
    min-width: 0;
}

:where(.wdetail-page) .whead h1 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    color: #09090b;
    overflow-wrap: anywhere;
}

:where(.wdetail-page) .wtags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

:where(.wdetail-page) .wtags li {
    padding: 10px 18px;
    border-radius: 999px;
    background: #f4f4f5;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    color: #09090b;
    white-space: nowrap;
}

:where(.wdetail-page) .whead .pbtn {
    flex: none;
}

/* ---------- SHOWCASE (Figma › Showcase: browser window 1232 × 772 + phone 400 × 772 on grey, px 120 py 96) ----------
   Both mockups are size containers (cqw = 1/100 of their width), so their chrome scales with them. The full-page
   captures scroll from top to bottom inside on hover (script.js sets --dur from their length). */
:where(.wdetail-page) .wshow {
    display: flex;
    align-items: flex-end;
    gap: calc(48 * var(--u));
    padding: max(40px, calc(96 * var(--u))) var(--gutter);
    background: #f4f4f5;
}

:where(.wdetail-page) .wbrowser {
    flex: 1 1 auto;
    min-width: 0;
    container-type: inline-size;
    border-radius: max(10px, calc(16 * var(--u)));
    background: #fff;
    overflow: hidden;
    box-shadow: 0 calc(32 * var(--u)) calc(80 * var(--u)) rgba(9, 9, 11, .14);
}

:where(.wdetail-page) .wbrowser__bar {
    display: flex;
    align-items: center;
    gap: 1.623cqw;
    height: 4.221cqw;
    padding: 0 1.948cqw;
    border-bottom: 1px solid #e4e4e7;
    background: #fff;
}

:where(.wdetail-page) .wbrowser__bar img {
    width: 4.221cqw;
    height: .974cqw;
    flex: none;
}

:where(.wdetail-page) .wbrowser__url {
    padding: .487cqw 1.299cqw;
    border-radius: 999px;
    background: #f4f4f5;
    font-family: var(--font-body);
    font-size: max(10px, 1.136cqw);
    line-height: normal;
    color: #71717a;
    white-space: nowrap;
}

:where(.wdetail-page) .wbrowser__view {
    height: 58.442cqw;
    overflow: hidden;
    background: #fff;
}

:where(.wdetail-page) .wbrowser__view img, :where(.wdetail-page) .wphone__view img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .6s ease;
}

:where(.wdetail-page) .wphone {
    flex: none;
    width: calc(400 * var(--u));
    min-width: 200px;
    container-type: inline-size;
    aspect-ratio: 400 / 772;
    background: #09090b;
    position: relative;
    border-radius: 14% / 7.254%;
    /* 56 of 400 × 772 – percentages, because an element cannot measure itself in cqw */
    box-shadow: 0 calc(32 * var(--u)) calc(80 * var(--u)) rgba(9, 9, 11, .14);
}

:where(.wdetail-page) .wphone__screen {
    position: absolute;
    inset: 3cqw;
    border-radius: 11cqw;
    background: #fff;
    overflow: hidden;
}

:where(.wdetail-page) .wphone__time {
    position: absolute;
    left: 8.5cqw;
    top: 5cqw;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 3.75cqw;
    line-height: normal;
    color: #09090b;
}

:where(.wdetail-page) .wphone::after {
    content: "";
    position: absolute;
    left: 36.5cqw;
    top: 6cqw;
    width: 27cqw;
    height: 7cqw;
    border-radius: 999px;
    background: #09090b;
}

/* island */
:where(.wdetail-page) .wphone__view {
    position: absolute;
    left: 0;
    right: 0;
    top: 14cqw;
    bottom: 0;
    overflow: hidden;
}

:where(.wdetail-page) .wbrowser:hover .wbrowser__view img, :where(.wdetail-page) .wbrowser.is-scrolling .wbrowser__view img {
    transform: translateY(calc(-100% + 58.442cqw));
    transition: transform var(--dur, 8s) linear;
}

:where(.wdetail-page) .wphone:hover .wphone__view img, :where(.wdetail-page) .wphone.is-scrolling .wphone__view img {
    transform: translateY(calc(-100% + 173cqw));
    transition: transform var(--dur, 8s) linear;
}

/* ---------- PROJECT OVERVIEW (Figma › Project overview: About 960 wide + facts card 600 wide, 120 apart) ---------- */
:where(.wdetail-page) .wover {
    display: flex;
    align-items: flex-start;
    gap: max(48px, calc(120 * var(--u)));
    padding: max(64px, calc(140 * var(--u))) var(--gutter) max(80px, calc(160 * var(--u)));
}

:where(.wdetail-page) .wabout {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: max(36px, calc(56 * var(--u)));
}

:where(.wdetail-page) .wabout__head {
    display: grid;
    gap: 20px;
}

:where(.wdetail-page) .wabout h2 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    color: #09090b;
}

:where(.wdetail-page) .wabout__lead {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.wdetail-page) .wdeliv ol {
    counter-reset: row;
}

:where(.wdetail-page) .wdeliv li {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid #e4e4e7;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
    color: #09090b;
}

:where(.wdetail-page) .wdeliv li:first-child {
    padding-top: 32px;
}

:where(.wdetail-page) .wdeliv li::before {
    counter-increment: row;
    content: "0" counter(row);
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    letter-spacing: 0;
    color: #a1a1aa;
}

:where(.wdetail-page) .wfacts {
    flex: none;
    width: calc(600 * var(--u));
    max-width: 100%;
    display: grid;
    gap: 24px;
    justify-items: start;
    padding: max(28px, calc(40 * var(--u)));
    border-radius: 24px;
    background: #f4f4f5;
}

:where(.wdetail-page) .wfacts dl {
    display: grid;
    gap: 24px;
    width: 100%;
    margin: 0;
}

:where(.wdetail-page) .wfacts dl > div {
    display: grid;
    gap: 8px;
}

:where(.wdetail-page) .wfacts dl > div + div {
    padding-top: 24px;
    border-top: 1px solid #d4d4d8;
}

:where(.wdetail-page) .wfacts dt {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #71717a;
}

:where(.wdetail-page) .wfacts dd {
    margin: 0;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    letter-spacing: -.01em;
    color: #09090b;
}

/* ---------- NEXT PROJECT (Figma › Next project: black band, p 120; copy left, 640 × 400 thumbnail right) ---------- */
:where(.wdetail-page) .wnext {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding: max(56px, calc(120 * var(--u))) var(--gutter);
    background: #000;
    color: #fff;
}

:where(.wdetail-page) .wnext__copy {
    display: grid;
    gap: 24px;
    justify-items: start;
    min-width: 0;
}

:where(.wdetail-page) .wnext__copy strong {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

:where(.wdetail-page) .wnext__link {
    display: inline-flex;
    gap: 10px;
    padding-top: 16px;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
}

:where(.wdetail-page) .wnext__link span {
    transition: transform .25s ease;
}

:where(.wdetail-page) .wnext:hover .wnext__link span, :where(.wdetail-page) .wnext:focus-visible .wnext__link span {
    transform: translateX(4px);
}

:where(.wdetail-page) .wnext__thumb {
    flex: none;
    display: block;
    width: calc(640 * var(--u));
    max-width: 100%;
    aspect-ratio: 640 / 400;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: max(16px, calc(24 * var(--u)));
    background: #111113;
    overflow: hidden;
}

:where(.wdetail-page) .wnext__thumb img {
    width: 100%;
    height: auto;
    transition: transform 1.2s ease;
}

:where(.wdetail-page) .wnext:hover .wnext__thumb img, :where(.wdetail-page) .wnext:focus-visible .wnext__thumb img {
    transform: translateY(-6%);
}

:where(.wdetail-page) .wnext:focus-visible {
    outline: none;
}

:where(.wdetail-page) .wnext:focus-visible .wnext__thumb {
    border-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    :where(.wdetail-page) .wbrowser__view img, :where(.wdetail-page) .wphone__view img, :where(.wdetail-page) .wnext__thumb img, :where(.wdetail-page) .wnext__link span, :where(.wdetail-page) .wbar__back, :where(.wdetail-page) .wbar__btn {
        transition: none;
    }

    :where(.wdetail-page) .wbrowser:hover .wbrowser__view img, :where(.wdetail-page) .wphone:hover .wphone__view img, :where(.wdetail-page) .wnext:hover .wnext__thumb img {
        transform: none;
    }
}

/* ---------- RESPONSIVE ---------- */
/* mobile layout: narrow, portrait or short screens (matches the other pages' mobile breakpoint) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    :where(.wdetail-page) .wbar {
        gap: 12px;
        padding: 12px var(--gutter);
    }

    :where(.wdetail-page) .wbar.is-stuck {
        padding-top: 12px;
    }

    :where(.wdetail-page) .wbar__back {
        gap: 8px;
        padding: 10px 16px 10px 12px;
        font-size: 15px;
    }

    :where(.wdetail-page) .wbar__pager {
        gap: 8px;
    }

    :where(.wdetail-page) .wbar__btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    :where(.wdetail-page) .whead {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 24px var(--gutter) 40px;
    }

    :where(.wdetail-page) .whead__title {
        gap: 18px;
    }

    :where(.wdetail-page) .wlabel {
        font-size: 13px;
    }

    :where(.wdetail-page) .wtags li {
        padding: 8px 14px;
        font-size: 15px;
    }

    :where(.wdetail-page) .wshow {
        flex-direction: column;
        align-items: center;
        gap: 32px;
        padding: 40px var(--gutter);
    }

    :where(.wdetail-page) .wbrowser {
        width: 100%;
        border-radius: 10px;
    }

    :where(.wdetail-page) .wphone {
        width: min(62vw, 280px);
        min-width: 0;
    }

    :where(.wdetail-page) .wover {
        flex-direction: column;
        gap: 40px;
        padding: 56px var(--gutter) 64px;
    }

    :where(.wdetail-page) .wabout {
        gap: 32px;
    }

    :where(.wdetail-page) .wabout__head {
        gap: 14px;
    }

    :where(.wdetail-page) .wdeliv li {
        gap: 16px;
        padding: 18px 0;
    }

    :where(.wdetail-page) .wdeliv li:first-child {
        padding-top: 24px;
    }

    :where(.wdetail-page) .wdeliv li::before {
        font-size: 15px;
    }

    :where(.wdetail-page) .wfacts {
        width: 100%;
        gap: 20px;
        padding: 24px;
        border-radius: 18px;
    }

    :where(.wdetail-page) .wfacts dl {
        gap: 18px;
    }

    :where(.wdetail-page) .wfacts dl > div + div {
        padding-top: 18px;
    }

    :where(.wdetail-page) .wnext {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 28px;
        padding: 48px var(--gutter) 56px;
    }

    :where(.wdetail-page) .wnext__copy {
        gap: 14px;
    }

    :where(.wdetail-page) .wnext__link {
        padding-top: 8px;
        font-size: 16px;
    }

    :where(.wdetail-page) .wnext__thumb {
        width: 100%;
        border-radius: 16px;
    }
}

/* small phones: the back pill keeps only "Back" so the bar never gets wider than the screen */
@media (max-width: 420px) {
    :where(.wdetail-page) .wbar__more {
        display: none;
    }

    :where(.wdetail-page) .wbar__back {
        padding: 10px 14px 10px 12px;
    }

    :where(.wdetail-page) .wbar__pager {
        gap: 6px;
    }

    :where(.wdetail-page) .wbar__btn {
        width: 42px;
        height: 42px;
    }
}

/* ================================================================================================================
   NOT FOUND (404.html)
   ================================================================================================================ */
/* Techrish 404 – a white page in the style of the hero sections (Inter headline, DM Sans copy, pill buttons).
   The shared parts (nav incl. the light variant, mega menu, buttons, WhatsApp and footer are in COMMON COMPONENTS above).
   Desktop sizes are Figma px × --u (one Figma pixel = 100vw / 1920) with minimums. */
:where(.notfound-page) .nf {
    --u: calc(100vw / 1920);
    position: relative;
    background: #fff;
    color: #09090b;
    text-align: center;
    overflow: hidden;
}

/* fills the first screen (nav included) so the footer starts below the fold */
:where(.notfound-page) .nf__stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: max(640px, 100svh);
    padding: calc(clamp(88px, 6.25vw, 120px) + 40px) var(--gutter) max(56px, calc(96 * var(--u)));
}

:where(.notfound-page) .nf__content {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 24px;
    max-width: 760px;
}

/* glows (the CTA card's), drifting slowly behind the number */
:where(.notfound-page) .nf__glow {
    position: absolute;
    z-index: 0;
    max-width: none;
    height: auto;
    pointer-events: none;
    opacity: .8;
    animation: nf-drift 16s ease-in-out infinite alternate;
}

:where(.notfound-page) .nf__glow--cool {
    width: max(420px, calc(760 * var(--u)));
    left: 50%;
    top: 50%;
    margin: calc(-24 * var(--u)) 0 0 calc(-12 * var(--u));
    transform: translate(-72%, -56%);
}

:where(.notfound-page) .nf__glow--warm {
    width: max(380px, calc(680 * var(--u)));
    left: 50%;
    top: 50%;
    transform: translate(-28%, -40%);
    animation-delay: -8s;
    animation-duration: 20s;
}

@keyframes nf-drift {
    from {
        translate: 0 0;
    }

    to {
        translate: calc(40 * var(--u)) calc(-30 * var(--u));
    }
}

/* the pieces rise in one after another (classic staggered fade-up) */
:where(.notfound-page) .nf__eyebrow, :where(.notfound-page) .nf__code, :where(.notfound-page) .nf h1, :where(.notfound-page) .nf__sub, :where(.notfound-page) .nf__actions, :where(.notfound-page) .nf__links {
    animation: nf-rise .8s cubic-bezier(.2, .7, .2, 1) both;
}

:where(.notfound-page) .nf__eyebrow {
    animation-delay: .05s;
}

:where(.notfound-page) .nf__code {
    animation-delay: .15s;
}

:where(.notfound-page) .nf h1 {
    animation-delay: .4s;
}

:where(.notfound-page) .nf__sub {
    animation-delay: .5s;
}

:where(.notfound-page) .nf__actions {
    animation-delay: .6s;
}

:where(.notfound-page) .nf__links {
    animation-delay: .7s;
}

@keyframes nf-rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

:where(.notfound-page) .nf__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 14px;
    border-radius: 999px;
    background: #f4f4f5;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    color: #3f3f46;
}

:where(.notfound-page) .nf__eyebrow img {
    width: 8px;
    height: 8px;
}

/* 404: Techrish-gradient digits; each digit drops in, then the sheen keeps moving across the number */
:where(.notfound-page) .nf__code {
    display: flex;
    gap: .02em;
    margin: 4px 0 -8px;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: max(120px, calc(240 * var(--u)));
    line-height: .9;
    letter-spacing: -.05em;
}

:where(.notfound-page) .nf__code span {
    display: inline-block;
    background: var(--grad-techrish) 0 0 / 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: nf-digit .9s cubic-bezier(.2, .7, .2, 1) both, nf-sheen 7s linear 1s infinite;
}

:where(.notfound-page) .nf__code span:nth-child(1) {
    animation-delay: .15s, 1s;
}

:where(.notfound-page) .nf__code span:nth-child(2) {
    animation-delay: .27s, 1s;
}

:where(.notfound-page) .nf__code span:nth-child(3) {
    animation-delay: .39s, 1s;
}

@keyframes nf-digit {
    from {
        opacity: 0;
        transform: translateY(40px) scale(.94);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes nf-sheen {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -300% 0;
    }
}

:where(.notfound-page) .nf h1 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

:where(.notfound-page) .nf__sub {
    max-width: 600px;
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.notfound-page) .nf__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding-top: 8px;
}

/* popular pages */
:where(.notfound-page) .nf__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    padding-top: 16px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
}

:where(.notfound-page) .nf__links span {
    color: #a1a1aa;
}

:where(.notfound-page) .nf__links a {
    color: #52525b;
    transition: color .2s ease;
}

:where(.notfound-page) .nf__links a:hover, :where(.notfound-page) .nf__links a:focus-visible {
    color: #09090b;
    text-decoration: underline;
    text-underline-position: from-font;
}

@media (prefers-reduced-motion: reduce) {
    :where(.notfound-page) .nf__glow, :where(.notfound-page) .nf__eyebrow, :where(.notfound-page) .nf__code, :where(.notfound-page) .nf__code span, :where(.notfound-page) .nf h1, :where(.notfound-page) .nf__sub, :where(.notfound-page) .nf__actions, :where(.notfound-page) .nf__links {
        animation: none;
    }
}

/* mobile layout: narrow, portrait or short screens (matches the other pages' mobile breakpoint) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    :where(.notfound-page) .nf__stage {
        min-height: 0;
        padding: calc(88px + 40px) var(--gutter) 64px;
    }

    :where(.notfound-page) .nf__content {
        gap: 18px;
    }

    :where(.notfound-page) .nf__code {
        font-size: clamp(96px, 28vw, 160px);
    }

    :where(.notfound-page) .nf__glow--cool {
        width: 360px;
    }

    :where(.notfound-page) .nf__glow--warm {
        width: 320px;
    }
}

@media (max-width: 560px) {
    :where(.notfound-page) .nf__actions .pbtn--outline {
        padding: 15px 19px;
    }

    :where(.notfound-page) .nf__links {
        gap: 6px 16px;
        font-size: 15px;
    }
}

/*About Page*/
.about-page .statement__text {
    font-size: max(24px, calc(48 * var(--u))) !important;
}

.about-page .tcard__photo img {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 119.403cqw;
    object-fit: cover;
    object-position: center 20%;
    transform: none;
    transition: object-position 0.45s ease;
}

.about-page .tcard__bio {
    margin-top: 16px;
    opacity: 0;
    transform: translateY(6px);
}

.about-page .tcard__social {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    opacity: 0;
    transform: translateY(6px);
}

@media (hover: hover) {
    .about-page .tcard:hover .tcard__bio, .about-page .tcard:hover .tcard__social {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.08s;
    }
}

.about-page .people__link:hover, .about-page .people__link:focus, .about-page .people__link:focus-visible {
    text-decoration: none !important;
}

:where(.about-page) .people__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
    pointer-events: none;
}

:where(.about-page) .people__link:hover::after,
:where(.about-page) .people__link:focus-visible::after {
    transform: scaleX(1);
}


@media (max-width: 1000px) {
  :where(.about-page) .people__link::after {
        width: 20%;
    }
}

@media (max-width: 768px) {
    :where(.about-page) .people__link::after {
        width: 23%;
    }
}

@media (max-width: 620px) {
    :where(.about-page) .people__link::after {
        width: 28%;
    }
}

@media (max-width: 550px) {
    :where(.about-page) .people__link::after {
        width: 30%;
    }
}

@media (max-width: 500px) {
    :where(.about-page) .people__link::after {
        width: 35%;
    }
}
@media (max-width: 425px) {
    :where(.about-page) .people__link::after {
        width: 43%;
    }
}
@media (max-width: 375px) {
    :where(.about-page) .people__link::after {
        width: 50%;
    }
}

.about-page .people.is-anim .people__link {
    opacity: var(--p);
    transform: translateY(calc(64 * var(--u) * (1 - var(--p))));
}

.about-page .people.is-anim .people__photo, .about-page .people.is-anim .people__frame {
    will-change: transform, clip-path;
}

:where(.about-page) .life__controls {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--u));
    margin-top: calc(82 * var(--u));
}

:where(.about-page) .life__btn-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max(48px, calc(64 * var(--u)));
    height: max(48px, calc(64 * var(--u)));
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50%;
    cursor: pointer;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: max(26px, calc(34 * var(--u)));
    line-height: 1;
    text-align: center;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}

:where(.about-page) .life__btn-nav--prev {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
}

:where(.about-page) .life__btn-nav--next {
    background: #fff;
    border: 1px solid #fff;
    color: #09090b;
}

:where(.about-page) .life__btn-nav--prev:hover:not(:disabled) {
    border-color: #fff;
    background: rgba(255, 255, 255, .1);
}

:where(.about-page) .life__btn-nav--next:hover:not(:disabled) {
    background: #e4e4e7;
    border-color: #e4e4e7;
}

:where(.about-page) .life__btn-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

:where(.about-page) .life__btn-nav:disabled {
    opacity: .4;
    cursor: not-allowed;
}

:where(.about-page) .life__btn-nav:disabled:hover {
    background: transparent;
    border-color: rgba(255, 255, 255, .3);
}

:where(.about-page) .life__btn-nav--next:disabled {
    background: #fff;
    border-color: #fff;
    color: #09090b;
    opacity: .4;
}

/* ================================================================================================================
   LEGAL (privacy-policy.html): the shared light hero (.shero) and a long-form text layout – an "On this page" list
   that stays beside the text on desktop (sticky) and sits above it on small screens
   ================================================================================================================ */
:where(.legal-page) .legal__updated {
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    line-height: normal;
    color: #71717a;
}

:where(.legal-page) .legal {
    --u: calc(100vw / 1920);
    display: grid;
    grid-template-columns: max(220px, calc(300 * var(--u))) minmax(0, max(640px, calc(880 * var(--u))));
    justify-content: center;
    align-items: start;
    column-gap: max(48px, calc(120 * var(--u)));
    background: #fff;
    color: #09090b;
    padding: max(24px, calc(40 * var(--u))) var(--gutter) max(72px, calc(160 * var(--u)));
    border-top: 1px solid #e4e4e7;
}

:where(.legal-page) .legal__toc {
    position: sticky;
    top: 32px;
    padding-top: max(24px, calc(40 * var(--u)));
}

:where(.legal-page) .legal__toc ol {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
    counter-reset: toc;
}

:where(.legal-page) .legal__toc li {
    counter-increment: toc;
}

:where(.legal-page) .legal__toc a {
    display: flex;
    gap: 12px;
    padding: 7px 0;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    line-height: 1.4;
    color: #52525b;
    transition: color .2s ease;
}

:where(.legal-page) .legal__toc a::before {
    content: counter(toc, decimal-leading-zero);
    flex: none;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: inherit;
    color: #a1a1aa;
    font-variant-numeric: tabular-nums;
}

:where(.legal-page) .legal__toc a:hover, :where(.legal-page) .legal__toc a:focus-visible {
    color: #09090b;
}

:where(.legal-page) .legal__body {
    padding-top: max(24px, calc(40 * var(--u)));
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: 1.65;
    color: #3f3f46;
}

:where(.legal-page) .legal__intro {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #09090b;
}

:where(.legal-page) .legal__body section {
    padding-top: max(36px, calc(56 * var(--u)));
    margin-top: max(36px, calc(56 * var(--u)));
    border-top: 1px solid #e4e4e7;
    scroll-margin-top: 24px;
}

:where(.legal-page) .legal__body h2 {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
    color: #09090b;
}

:where(.legal-page) .legal__body h2 span {
    flex: none;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-label);
    letter-spacing: .08em;
    color: #a1a1aa;
    font-variant-numeric: tabular-nums;
}

:where(.legal-page) .legal__body h3 {
    margin-top: 28px;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
    letter-spacing: var(--ls-h6);
    color: #09090b;
}

:where(.legal-page) .legal__body p, :where(.legal-page) .legal__body ul {
    margin-top: 16px;
}

:where(.legal-page) .legal__body h2 + p, :where(.legal-page) .legal__body h2 + ul {
    margin-top: 20px;
}

:where(.legal-page) .legal__body ul {
    padding-left: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

:where(.legal-page) .legal__body li {
    position: relative;
    padding-left: 26px;
}

:where(.legal-page) .legal__body li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--grad-techrish);
}

:where(.legal-page) .legal__body strong {
    font-weight: 600;
    color: #09090b;
}

:where(.legal-page) .legal__body a {
    color: #09090b;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #d4d4d8;
    transition: text-decoration-color .2s ease;
}

:where(.legal-page) .legal__body a:hover, :where(.legal-page) .legal__body a:focus-visible {
    text-decoration-color: #09090b;
}

:where(.legal-page) .legal__address {
    margin-top: 16px;
    padding: 20px 24px;
    border: 1px solid #e4e4e7;
    border-radius: 16px;
    background: #fafafa;
    font-style: normal;
    line-height: 1.65;
}

:where(.legal-page) .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    :where(.legal-page) .legal {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        padding-top: 16px;
    }

    :where(.legal-page) .legal__toc {
        position: static;
        padding: 24px 0 8px;
        border-bottom: 1px solid #e4e4e7;
    }

    :where(.legal-page) .legal__toc ol {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
    }

    :where(.legal-page) .legal__toc a {
        gap: 8px;
        padding: 8px 14px;
        border: 1px solid #e4e4e7;
        border-radius: 999px;
        background: #fff;
    }

    :where(.legal-page) .legal__toc a::before {
        color: #71717a;
    }

    :where(.legal-page) .legal__body {
        padding-top: 8px;
    }

    :where(.legal-page) .legal__body section {
        scroll-margin-top: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.legal-page) .legal__toc a, :where(.legal-page) .legal__body a {
        transition: none;
    }
}

/* ================================================================================================================
   PRODUCT LANDING (trixio.html, sharepay.html – Figma "Trixio – Improved" / "Sharepay – Improved", the "Landing – …"
   components): hero, intro chips, feature cards, dark steps, capability list, story rows, FAQ accordion; the closing
   CTA is the shared .cta card with product copy. Desktop sizes are Figma px × --u; mobile stacks to one column.
   ================================================================================================================ */
:where(.landing-page, .service-page) .ld {
    --u: calc(100vw / 1920);
    position: relative;
    background: #fff;
    color: #09090b;
    padding: max(72px, calc(160 * var(--u))) var(--gutter);
}

:where(.landing-page, .service-page) .ld--dark {
    background: #000;
    color: #fff;
}

:where(.landing-page, .service-page) .ld__eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label);
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #71717a;
}

:where(.landing-page, .service-page) .ld__eyebrow::after {
    content: "";
    width: 64px;
    height: 1px;
    background: #d4d4d8;
}

:where(.landing-page, .service-page) .ld--dark .ld__eyebrow {
    color: rgba(255, 255, 255, .5);
}

:where(.landing-page, .service-page) .ld--dark .ld__eyebrow::after {
    background: rgba(255, 255, 255, .24);
}

:where(.landing-page, .service-page) .ld__title {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

:where(.landing-page, .service-page) .ld__lead {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.landing-page, .service-page) .ld--dark .ld__lead {
    color: rgba(255, 255, 255, .72);
}

:where(.landing-page, .service-page) .ld .ld__index {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label);
    line-height: normal;
    letter-spacing: .12em;
    color: #71717a;
}

:where(.landing-page, .service-page) .ld .ld__index::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--grad-techrish);
}

/* section header: title block left, lead or button right, bottoms aligned */
:where(.landing-page, .service-page) .ld__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: max(40px, calc(72 * var(--u)));
}

:where(.landing-page, .service-page) .ld__head > div:first-child {
    display: grid;
    gap: 20px;
    max-width: max(520px, calc(900 * var(--u)));
}

:where(.landing-page, .service-page) .ld__head > .ld__lead {
    flex: none;
    width: min(100%, max(320px, calc(680 * var(--u))));
}

:where(.landing-page, .service-page) .ld__head > .pbtn {
    flex: none;
}

/* scroll reveal (script.js adds .is-in; --d staggers the children) */
:where(.landing-page, .service-page) .ld-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--d, 0s);
}

:where(.landing-page, .service-page) .ld-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* ---------- Hero (Figma "Landing – Hero": content left, visual 760 × 640 right, under the 120 header) ---------- */
:where(.landing-page, .service-page) .ldhero {
    --u: calc(100vw / 1920);
    position: relative;
    background: #fff;
    color: #09090b;
    padding: calc(clamp(88px, 6.25vw, 120px) + max(40px, calc(100 * var(--u)))) var(--gutter) max(64px, calc(140 * var(--u)));
    display: flex;
    align-items: center;
    gap: max(40px, calc(80 * var(--u)));
}

:where(.landing-page, .service-page) .ldhero__content {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: max(20px, calc(28 * var(--u)));
}

:where(.landing-page, .service-page) .ldhero__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 14px;
    border-radius: 999px;
    background: #f4f4f5;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    color: #3f3f46;
}

:where(.landing-page, .service-page) .ldhero__pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--grad-techrish);
}

:where(.landing-page, .service-page) .ldhero h1 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
}

:where(.landing-page, .service-page) .ldhero__sub {
    max-width: max(320px, calc(680 * var(--u)));
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.landing-page, .service-page) .ldhero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 12px;
}

:where(.landing-page, .service-page) .ldhero__visual {
    flex: none;
    width: max(360px, calc(760 * var(--u)));
    aspect-ratio: 760 / 640;
    border-radius: max(16px, calc(24 * var(--u)));
    overflow: hidden;
    background: #0b0b0b;
}

:where(.landing-page, .service-page) .ldhero__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Intro chips (Figma "Landing – Intro (highlights)": three per row, #f4f4f5, radius 24) ---------- */
:where(.landing-page, .service-page) .ldintro__chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: max(16px, calc(24 * var(--u)));
}

:where(.landing-page, .service-page) .ldchip {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: max(24px, calc(32 * var(--u)));
    border-radius: max(16px, calc(24 * var(--u)));
    background: #f4f4f5;
}

:where(.landing-page, .service-page) .ldchip h3 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
}

:where(.landing-page, .service-page) .ldchip p {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.landing-page, .service-page) .ldintro__note {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: max(40px, calc(72 * var(--u)));
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-lead);
    line-height: 1.35;
    letter-spacing: -.01em;
}

:where(.landing-page, .service-page) .ldintro__note::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--grad-techrish);
}

/* ---------- Feature cards (Figma "Landing – Features (cards)": three per row, #0b0b0b, radius 24, padding 40) ---------- */
:where(.landing-page, .service-page) .ldfeat .ld__head > div:first-child {
    max-width: max(520px, calc(1100 * var(--u)));
}

:where(.landing-page, .service-page) .ldfeat__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: max(16px, calc(24 * var(--u)));
}

:where(.landing-page, .service-page) .ldcard {
    display: grid;
    gap: 16px;
    align-content: start;
    padding: max(28px, calc(40 * var(--u))) max(24px, calc(40 * var(--u))) max(32px, calc(44 * var(--u)));
    border-radius: max(16px, calc(24 * var(--u)));
    background: #0b0b0b;
    color: #fff;
    transition: background-color .2s ease, transform .2s ease;
}

:where(.landing-page, .service-page) .ldcard:hover, :where(.landing-page, .service-page) .ldcard:focus-within {
    background: #18181b;
    transform: translateY(-4px);
}

:where(.landing-page, .service-page) .ldcard .ld__index {
    color: rgba(255, 255, 255, .5);
    padding-bottom: max(32px, calc(64 * var(--u)));
}

:where(.landing-page, .service-page) .ldcard h3 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
}

:where(.landing-page, .service-page) .ldcard p {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: rgba(255, 255, 255, .72);
}

/* ---------- Steps (Figma "Landing – Steps (3 cards, dark)": #111113 cards, gradient numbers) ---------- */
:where(.landing-page, .service-page) .ldsteps__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: max(16px, calc(24 * var(--u)));
}

:where(.landing-page, .service-page) .ldstep {
    background: #111113;
    min-height: max(240px, calc(360 * var(--u)));
}

:where(.landing-page, .service-page) .ldstep:hover, :where(.landing-page, .service-page) .ldstep:focus-within {
    background: #18181b;
    transform: none;
}

:where(.landing-page, .service-page) .ldcard .ldstep__num {
    padding-bottom: max(28px, calc(56 * var(--u)));
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: -.04em;
    background: var(--grad-techrish);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Capabilities (Figma "Landing – Capabilities (list)": sticky title left, ruled rows right) ---------- */
:where(.landing-page, .service-page) .ldcap {
    display: flex;
    align-items: flex-start;
    gap: max(48px, calc(120 * var(--u)));
}

:where(.landing-page, .service-page) .ldcap__title {
    position: sticky;
    top: 32px;
    flex: none;
    width: max(320px, calc(600 * var(--u)));
    display: grid;
    justify-items: start;
    gap: max(20px, calc(28 * var(--u)));
}

:where(.landing-page, .service-page) .ldcap__title .pbtn {
    margin-top: 12px;
}

:where(.landing-page, .service-page) .ldcap__list {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #e4e4e7;
}

:where(.landing-page, .service-page) .ldcap__row {
    display: flex;
    align-items: center;
    gap: max(20px, calc(40 * var(--u)));
    padding: max(20px, calc(32 * var(--u))) 0;
    border-top: 1px solid #e4e4e7;
}

:where(.landing-page, .service-page) .ldcap__row .ld__index {
    width: max(40px, calc(56 * var(--u)));
    flex: none;
    color: #a1a1aa;
    transition: color .2s ease;
}

:where(.landing-page, .service-page) .ldcap__row .ld__index::before {
    display: none;
}

:where(.landing-page, .service-page) .ldcap__row h3 {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-h5);
    line-height: 1.2;
    letter-spacing: -.02em;
    transition: transform .2s ease;
}

:where(.landing-page, .service-page) .ldcap__row:hover .ld__index, :where(.landing-page, .service-page) .ldcap__row:focus-within .ld__index {
    color: #09090b;
}

:where(.landing-page, .service-page) .ldcap__row:hover h3, :where(.landing-page, .service-page) .ldcap__row:focus-within h3 {
    transform: translateX(12px);
}

/* ---------- Stories (Figma "Landing – Stories": image 760 × 560 beside index, title, paragraph, link; sides alternate) ---------- */
:where(.landing-page, .service-page) .ldstories {
    display: grid;
    gap: max(56px, calc(120 * var(--u)));
}

:where(.landing-page, .service-page) .ldstory {
    display: flex;
    align-items: center;
    gap: max(40px, calc(120 * var(--u)));
}

:where(.landing-page, .service-page) .ldstory:nth-child(even) {
    flex-direction: row-reverse;
}

:where(.landing-page, .service-page) .ldstory__media {
    flex: none;
    width: max(360px, calc(760 * var(--u)));
    aspect-ratio: 760 / 560;
    border-radius: max(16px, calc(24 * var(--u)));
    overflow: hidden;
    background: #f4f4f5;
    display: grid;
    place-items: center;
}

:where(.landing-page, .service-page) .ldstory__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

:where(.landing-page, .service-page) .ldstory__media.ld-reveal {
    transform: none;
    opacity: 1;
}

:where(.landing-page, .service-page) .ldstory__media.ld-reveal img {
    transform: scale(1.04);
}

:where(.landing-page, .service-page) .ldstory__media.ld-reveal.is-in img {
    transform: scale(1);
}

:where(.landing-page, .service-page) .ldstory__media--contain img {
    object-fit: contain;
    padding: 8%;
    box-sizing: border-box;
}

:where(.landing-page, .service-page) .ldstory__text {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: max(16px, calc(24 * var(--u)));
}

:where(.landing-page, .service-page) .ldstory__text .ld__index {
    color: #a1a1aa;
}

:where(.landing-page, .service-page) .ldstory__text .ld__index::before {
    display: none;
}

:where(.landing-page, .service-page) .ldstory__text h3 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
}

:where(.landing-page, .service-page) .ldstory__text p {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    color: #52525b;
}

:where(.landing-page, .service-page) .ldlink {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0 6px;
    border-bottom: 1px solid #09090b;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: normal;
    color: #09090b;
    transition: gap .2s ease;
}

:where(.landing-page, .service-page) .ldlink:hover, :where(.landing-page, .service-page) .ldlink:focus-visible {
    gap: 16px;
}

/* ---------- FAQ (Figma "Landing – FAQ" + "FAQ item (accordion)": first open, one at a time) ---------- */
:where(.landing-page, .service-page) .ldfaq {
    display: flex;
    align-items: flex-start;
    gap: max(48px, calc(120 * var(--u)));
}

:where(.landing-page, .service-page) .ldfaq__title {
    flex: none;
    width: max(300px, calc(560 * var(--u)));
    display: grid;
    gap: 20px;
}

:where(.landing-page, .service-page) .ldfaq__items {
    flex: 1 1 0;
    min-width: 0;
    border-bottom: 1px solid #e4e4e7;
}

:where(.landing-page, .service-page) .ldfaq__item {
    border-top: 1px solid #e4e4e7;
}

:where(.landing-page, .service-page) .ldfaq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    width: 100%;
    padding: max(20px, calc(32 * var(--u))) 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: max(18px, calc(26 * var(--u)));
    line-height: 1.25;
    letter-spacing: -.01em;
    color: #09090b;
}

:where(.landing-page, .service-page) .ldfaq__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f4f4f5;
    color: #09090b;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    transition: background-color .2s ease, color .2s ease;
}

:where(.landing-page, .service-page) .ldfaq__icon::before {
    content: "+";
}

:where(.landing-page, .service-page) .ldfaq__q[aria-expanded="true"] .ldfaq__icon {
    background: #09090b;
    color: #fff;
}

:where(.landing-page, .service-page) .ldfaq__q[aria-expanded="true"] .ldfaq__icon::before {
    content: "–";
}

:where(.landing-page, .service-page) .ldfaq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}

:where(.landing-page, .service-page) .ldfaq__a > div {
    overflow: hidden;
}

:where(.landing-page, .service-page) .ldfaq__a p {
    padding: 0 max(0px, calc(120 * var(--u))) max(20px, calc(32 * var(--u))) 0;
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: 1.55;
    color: #52525b;
}

:where(.landing-page, .service-page) .ldfaq__item.is-open .ldfaq__a {
    grid-template-rows: 1fr;
}

/* ---------- closing CTA: the shared card with product copy ---------- */
:where(.landing-page, .service-page) .cta__eyebrow--plain {
    text-transform: none;
    letter-spacing: .12em;
}

:where(.landing-page, .service-page) .cta__outline {
    display: inline-flex;
    align-items: center;
    padding: 19px 31px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: clamp(16px, .94vw, 18px);
    line-height: normal;
    color: #fff;
    white-space: nowrap;
    transition: border-color .2s ease, background-color .2s ease;
}

:where(.landing-page, .service-page) .cta__outline:hover, :where(.landing-page, .service-page) .cta__outline:focus-visible {
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .08);
}

/* phones / tablets: the two CTA buttons share a row when their labels fit, otherwise the second drops to its own full-width row */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    :where(.landing-page, .service-page) .cta__actions {
        flex-wrap: wrap;
    }

    :where(.landing-page, .service-page) .cta__actions .pbtn, :where(.landing-page, .service-page) .cta__outline {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        min-height: 50px;
        padding: 0 16px;
        font-size: 15px;
    }
}

@media (max-width: 1200px) {
    :where(.landing-page, .service-page) .ldintro__chips, :where(.landing-page, .service-page) .ldfeat__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    :where(.landing-page, .service-page) .ld {
        padding: 72px var(--gutter);
    }

    :where(.landing-page, .service-page) .ld__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 36px;
    }

    :where(.landing-page, .service-page) .ld__head > .ld__lead {
        width: auto;
        max-width: 560px;
    }

    :where(.landing-page, .service-page) .ldhero {
        flex-direction: column;
        align-items: stretch;
        padding: calc(clamp(88px, 6.25vw, 120px) + 24px) var(--gutter) 64px;
        gap: 40px;
    }

    :where(.landing-page, .service-page) .ldhero__content {
        justify-items: start;
    }

    :where(.landing-page, .service-page) .ldhero__visual {
        width: 100%;
    }

    :where(.landing-page, .service-page) .ldintro__chips, :where(.landing-page, .service-page) .ldfeat__cards, :where(.landing-page, .service-page) .ldsteps__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    :where(.landing-page, .service-page) .ldintro__note {
        align-items: flex-start;
        margin-top: 40px;
    }

    :where(.landing-page, .service-page) .ldintro__note::before {
        margin-top: .5em;
    }

    :where(.landing-page, .service-page) .ldstep {
        min-height: 0;
    }

    :where(.landing-page, .service-page) .ldcap, :where(.landing-page, .service-page) .ldfaq {
        flex-direction: column;
        gap: 36px;
    }

    :where(.landing-page, .service-page) .ldcap__title, :where(.landing-page, .service-page) .ldfaq__title {
        position: static;
        width: auto;
    }

    :where(.landing-page, .service-page) .ldcap__list, :where(.landing-page, .service-page) .ldfaq__items {
        width: 100%;
    }

    :where(.landing-page, .service-page) .ldcap__row {
        padding: 20px 0;
    }

    :where(.landing-page, .service-page) .ldcap__row:hover h3 {
        transform: none;
    }

    :where(.landing-page, .service-page) .ldstories {
        gap: 64px;
    }

    :where(.landing-page, .service-page) .ldstory, :where(.landing-page, .service-page) .ldstory:nth-child(even) {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
    }

    :where(.landing-page, .service-page) .ldstory__media {
        width: 100%;
    }

    :where(.landing-page, .service-page) .ldfaq__q {
        gap: 16px;
        padding: 20px 0;
    }

    :where(.landing-page, .service-page) .ldfaq__icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    :where(.landing-page, .service-page) .ldfaq__a p {
        padding: 0 0 20px;
    }
}

@media (min-width: 641px) and (max-width: 900px), (min-width: 641px) and (orientation: portrait) {
    :where(.landing-page, .service-page) .ldintro__chips, :where(.landing-page, .service-page) .ldfeat__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.landing-page, .service-page) .ld-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    :where(.landing-page, .service-page) .ldstory__media.ld-reveal img {
        transform: none;
    }

    :where(.landing-page, .service-page) .ldcard, :where(.landing-page, .service-page) .ldcap__row h3, :where(.landing-page, .service-page) .ldcap__row .ld__index, :where(.landing-page, .service-page) .ldlink, :where(.landing-page, .service-page) .ldfaq__a, :where(.landing-page, .service-page) .ldfaq__icon, :where(.landing-page, .service-page) .cta__outline {
        transition: none;
    }
}

/* ================================================================================================================
   SERVICE DETAIL (services/<slug>/index.html, e.g. services/custom-website-development/ – built after the live
   techrish.com service pages): the landing components above (.ld, .ld__head, .ldcard, .ldfaq, .cta) plus the hero,
   the icon cards, the website-type list, the two-column feature / approach grids and the numbered process steps.
   The page sits two folders deep and carries <base href="../../">, so every path resolves from the site root.
   ================================================================================================================ */
:where(.service-page) .sdhero {
    --u: calc(100vw / 1920);
    position: relative;
    background: #fff;
    color: #09090b;
    display: flex;
    align-items: center;
    gap: max(40px, calc(96 * var(--u)));
    padding: calc(clamp(88px, 6.25vw, 120px) + max(40px, calc(80 * var(--u)))) var(--gutter) max(64px, calc(120 * var(--u)));
}

:where(.service-page) .sdhero__content {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: max(20px, calc(28 * var(--u)));
}

:where(.service-page) .sdhero h1 {
    max-width: max(520px, calc(980 * var(--u)));
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
}

:where(.service-page) .sd-muted {
    color: #a1a1aa;
    font-weight: 500;
}

:where(.service-page) .sdhero__sub {
    max-width: max(320px, calc(720 * var(--u)));
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #52525b;
}

:where(.service-page) .sdhero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 12px;
}

:where(.service-page) .sdhero__visual {
    flex: none;
    width: max(300px, calc(620 * var(--u)));
    display: grid;
    place-items: center;
}

:where(.service-page) .sdhero__visual img {
    width: 100%;
    height: auto;
    display: block;
}

/* section titles: the second half of a title in grey, as on the live pages */
:where(.service-page) .ld__title .sd-muted {
    font-weight: 500;
}

/* services grid: icon cards, three per row */
:where(.service-page) .sd-grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: max(16px, calc(24 * var(--u)));
}

:where(.service-page) .sd-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: max(16px, calc(24 * var(--u)));
}

:where(.service-page) .ldcard.sd-service {
    background: #111113;
    gap: 14px;
}

:where(.service-page) .sd-icon {
    width: max(56px, calc(72 * var(--u)));
    height: max(56px, calc(72 * var(--u)));
    margin-bottom: max(20px, calc(32 * var(--u)));
    object-fit: contain;
}

/* feature cards: dark with the Techrish gradient as a hairline on top */
:where(.service-page) .ldcard.sd-feature {
    position: relative;
    background: #111113;
}

:where(.service-page) .ldcard.sd-feature::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--grad-techrish);
    opacity: .9;
}

/* website types: a single-column list of bordered rows */
:where(.service-page) .sd-list {
    display: grid;
    gap: 16px;
    max-width: max(640px, calc(1200 * var(--u)));
    margin: 0 auto;
}

:where(.service-page) .sd-list > div {
    display: grid;
    gap: 10px;
    padding: max(22px, calc(28 * var(--u))) max(22px, calc(32 * var(--u)));
    border: 1px solid #e4e4e7;
    border-radius: max(14px, calc(20 * var(--u)));
    background: #fff;
    transition: border-color .2s ease, transform .2s ease;
}

:where(.service-page) .sd-list > div:hover {
    border-color: #a1a1aa;
    transform: translateY(-2px);
}

:where(.service-page) .sd-list h3, :where(.service-page) .sd-approach h3, :where(.service-page) .sd-why h3, :where(.service-page) .sd-step h3 {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
    letter-spacing: var(--ls-h6);
}

:where(.service-page) .sd-list p, :where(.service-page) .sd-approach p, :where(.service-page) .sd-step p {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: #52525b;
}

:where(.service-page) .ld__head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

:where(.service-page) .ld__head--center > div:first-child {
    justify-items: center;
}

:where(.service-page) .ld__head--center .ld__eyebrow::after {
    display: none;
}

/* design approach: two columns of ruled items with a gradient dot */
:where(.service-page) .sd-approach {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 max(40px, calc(80 * var(--u)));
}

:where(.service-page) .sd-approach > div {
    display: grid;
    gap: 12px;
    padding: max(24px, calc(32 * var(--u))) 0;
    border-top: 1px solid #e4e4e7;
}

:where(.service-page) .sd-approach h3 {
    position: relative;
    padding-left: 22px;
}

:where(.service-page) .sd-approach h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--grad-techrish);
}

/* why choose us: full-width dark rows */
:where(.service-page) .sd-why {
    display: grid;
    gap: 16px;
}

:where(.service-page) .sd-why > div {
    display: grid;
    gap: 10px;
    padding: max(22px, calc(28 * var(--u))) max(24px, calc(36 * var(--u)));
    border-radius: max(14px, calc(20 * var(--u)));
    background: #111113;
    transition: background-color .2s ease;
}

:where(.service-page) .sd-why > div:hover {
    background: #18181b;
}

:where(.service-page) .sd-why h3 {
    color: #fff;
}

:where(.service-page) .sd-why p {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: rgba(255, 255, 255, .72);
}

/* process: light section, white step cards with a large faint number */
:where(.service-page) .ld--light {
    background: #f4f4f5;
}

:where(.service-page) .sd-step {
    position: relative;
    display: grid;
    gap: 12px;
    align-content: start;
    min-height: max(180px, calc(240 * var(--u)));
    padding: max(28px, calc(40 * var(--u))) max(24px, calc(40 * var(--u))) max(28px, calc(40 * var(--u))) max(96px, calc(150 * var(--u)));
    border-radius: max(16px, calc(24 * var(--u)));
    background: #fff;
    overflow: hidden;
}

:where(.service-page) .sd-step__num {
    position: absolute;
    left: max(16px, calc(24 * var(--u)));
    top: max(8px, calc(12 * var(--u)));
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: max(64px, calc(120 * var(--u)));
    line-height: 1;
    letter-spacing: -.04em;
    color: #e4e4e7;
}

:where(.service-page) .sd-step h3, :where(.service-page) .sd-step p {
    position: relative;
}

/* FAQ on the light background: the closed icons stand out as white circles */
:where(.service-page) .ld--light .ldfaq__icon {
    background: #fff;
}

:where(.service-page) .ld--light .ldfaq__q[aria-expanded="true"] .ldfaq__icon {
    background: #09090b;
}

@media (max-width: 1200px) {
    :where(.service-page) .sd-grid3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    :where(.service-page) .sdhero {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        padding: calc(clamp(88px, 6.25vw, 120px) + 24px) var(--gutter) 56px;
    }

    :where(.service-page) .sdhero__visual {
        width: min(100%, 420px);
        margin: 0 auto;
    }

    :where(.service-page) .sd-grid3, :where(.service-page) .sd-grid2, :where(.service-page) .sd-approach {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    :where(.service-page) .sd-approach > div {
        padding: 20px 0;
    }

    :where(.service-page) .sd-step {
        min-height: 0;
        padding: 24px 22px 24px 84px;
    }

    :where(.service-page) .sd-step__num {
        font-size: 56px;
        left: 16px;
        top: 14px;
    }
}

@media (min-width: 641px) and (max-width: 900px), (min-width: 641px) and (orientation: portrait) {
    :where(.service-page) .sd-grid3, :where(.service-page) .sd-grid2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.service-page) .sd-list > div, :where(.service-page) .sd-why > div {
        transition: none;
    }
}

/* ================================================================================================================
   BLOG POST (blog/<slug>/index.html – built after the live techrish.com posts): featured image, title and date, then
   the article, all on the site's gutter width like every other page; the shared .cta card closes the page. The page
   sits two folders deep and carries <base href="../../">, so every path resolves from the site root.
   ================================================================================================================ */
:where(.post-page) .post {
    --u: calc(100vw / 1920);
    position: relative;
    background: #fff;
    color: #09090b;
    padding: calc(clamp(88px, 6.25vw, 120px) + max(32px, calc(60 * var(--u)))) var(--gutter) max(72px, calc(160 * var(--u)));
}

:where(.post-page) .post__media {
    margin: 0;
    border-radius: max(16px, calc(24 * var(--u)));
    overflow: hidden;
    background: #0b0b0b;
}

/* margin: 0 drops the browser’s default figure inset */
:where(.post-page) .post__media img {
    display: block;
    width: 100%;
    height: auto;
}

:where(.post-page) .post__head {
    display: grid;
    gap: max(14px, calc(20 * var(--u)));
    margin-top: max(32px, calc(56 * var(--u)));
}

:where(.post-page) .post h1 {
    max-width: max(640px, calc(1280 * var(--u)));
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

:where(.post-page) .post__meta {
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    line-height: normal;
    color: #71717a;
}

:where(.post-page) .post__body {
    margin-top: max(28px, calc(48 * var(--u)));
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: 1.7;
    color: #3f3f46;
}

:where(.post-page) .post__body > p:first-child {
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: #09090b;
}

:where(.post-page) .post__body h2 {
    margin-top: max(32px, calc(48 * var(--u)));
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
    color: #09090b;
}

:where(.post-page) .post__body h2 + p {
    margin-top: 16px;
}

:where(.post-page) .post__body p + p {
    margin-top: 20px;
}

:where(.post-page) .post__body a {
    color: #09090b;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #a1a1aa;
    transition: text-decoration-color .2s ease;
}

:where(.post-page) .post__body a:hover, :where(.post-page) .post__body a:focus-visible {
    text-decoration-color: #09090b;
}

@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    :where(.post-page) .post {
        padding: calc(clamp(88px, 6.25vw, 120px) + 20px) var(--gutter) 64px;
    }

    :where(.post-page) .post__head {
        margin-top: 28px;
    }

    :where(.post-page) .post__body {
        margin-top: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.post-page) .post__body a {
        transition: none;
    }
}

/* ================================================================================================================
   Service Page
   ================================================================================================================ */
:where(.services-page) .srow__link {
    display: inline-flex;
    position: relative;
    border-bottom: 2px solid transparent;
    text-decoration: none;
}

:where(.services-page) .srow__link::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

:where(.services-page) .srow__link:hover::after {
    transform: scaleX(1);
}

:where(.services-page) .tile__arrow {
    font-size: 28px;
    padding-bottom: 10px;
    transform: rotate(-45deg);
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

:where(.services-page) .tile:hover .tile__arrow, :where(.services-page) .tile:focus-visible .tile__arrow {
    background: #fff;
    color: #09090b;
    transform: rotate(0deg);
}

@media (max-width: 1200px) {
    .tech__title .br-lg {
        display: none;
    }
}
@media (max-width: 768px) {
    :where(.about-page) .people__shade {
        opacity: calc(.25 - .25 * var(--p));
    }
}
@media (max-width: 560px) {
    .footer__bottom {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .footer__bottom p {
        width: 100%;
        text-align: center;
    }

    .footer__bottom p:last-child {
        display: flex;
        justify-content: center;
    }
    .mega__product .mega__logo {
        right: 14px;
        width: 22px;
        height: 22px;

    }

}
@media (max-width: 560px), (orientation: portrait), (max-height: 540px) {
    :where(.home-page) .ise__stage {
        padding: 72px var(--gutter) 40px;
    }
}

/* ================================================================================================================
   INDUSTRIES (industries.html – Figma "Industries (V1)"): a centred light hero, then "the journey": a black band with
   one vertical route down the middle, seven stops (photo 760 × 500 on one side, text on the other, alternating) and
   the destination. Each stop is "ahead" (grey photo, faint text, hollow marker) until script.js marks it .is-arrived:
   the route fills through it in the industry colour (--c), the marker lights up and the photo turns to colour.
   ================================================================================================================ */
:where(.industries-page) .ihero { --u: calc(100vw / 1920); position: relative; background: #fff; color: #09090b; padding: calc(clamp(88px, 6.25vw, 120px) + max(56px, calc(110 * var(--u)))) var(--gutter) max(56px, calc(72 * var(--u))); }
:where(.industries-page) .ihero__content { display: flex; flex-direction: column; align-items: center; gap: max(20px, calc(28 * var(--u))); text-align: center; }
:where(.industries-page) .ihero__pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 14px; border-radius: 999px; background: #f4f4f5; font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: normal; color: #3f3f46; }
:where(.industries-page) .ihero__pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-techrish); }
:where(.industries-page) .ihero h1 { font-family: var(--font-inter); font-weight: 600; font-size: max(40px, calc(88 * var(--u))); line-height: .98; letter-spacing: -.04em; }
:where(.industries-page) .ihero__sub { max-width: max(320px, calc(720 * var(--u))); font-family: var(--font-body); font-size: var(--fs-lead); line-height: var(--lh-body); color: #52525b; }
:where(.industries-page) .ihero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding-top: 12px; }

:where(.industries-page) .journey { --u: calc(100vw / 1920); --rail: 50%; position: relative; background: #000; color: #fff; }
:where(.industries-page) .journey .pbtn--light { background: #fff; color: #09090b; }
/* labels shared by the start, the stops and the end */
:where(.industries-page) .jstart__eyebrow, :where(.industries-page) .jend__eyebrow { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label); line-height: normal; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }

/* ---------- start: eyebrow, heading, then the first piece of route with its marker and the SCROLL label ---------- */
:where(.industries-page) .jstart { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: max(80px, calc(150 * var(--u))) var(--gutter) 0; }
:where(.industries-page) .jstart h2 { font-family: var(--font-inter); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
:where(.industries-page) .jstart__route { position: relative; width: 1px; height: max(120px, calc(180 * var(--u))); margin-top: max(48px, calc(80 * var(--u))); background: rgba(255, 255, 255, .16); }
:where(.industries-page) .jstart__marker { position: absolute; left: 50%; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(255, 255, 255, .12); }
:where(.industries-page) .jstart__scroll { position: absolute; left: 24px; top: -8px; font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); white-space: nowrap; }

/* ---------- a stop ---------- */
:where(.industries-page) .jstop { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: max(80px, calc(320 * var(--u))); align-items: start; min-height: max(480px, calc(780 * var(--u))); padding: max(72px, calc(140 * var(--u))) var(--gutter); }
:where(.industries-page) .jstop--photo-right .jstop__photo { order: 2; }
:where(.industries-page) .jstop--photo-right .jstop__text { order: 1; }
:where(.industries-page) .jstop__route { position: absolute; left: var(--rail); top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .16); }
:where(.industries-page) .jstop__travelled { position: absolute; left: -1px; top: 0; width: 3px; height: 0; background: var(--c); transition: height 1.1s linear; }
:where(.industries-page) .jstop__marker { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); background: #000; transform: translate(-50%, -50%); transition: background-color .4s ease .5s, border-color .4s ease .5s, box-shadow .6s ease .5s; }
:where(.industries-page) .jstop__marker::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid var(--c); opacity: 0; transform: scale(.6); transition: opacity .5s ease .6s, transform .5s ease .6s; }
:where(.industries-page) .jstop__photo { position: relative; aspect-ratio: 760 / 500; border-radius: max(16px, calc(24 * var(--u))); overflow: hidden; background: #111113; }
:where(.industries-page) .jstop__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) brightness(.65); transform: scale(1.04); transition: filter .9s ease .3s, transform 1.2s cubic-bezier(.22, .61, .36, 1) .3s; }
:where(.industries-page) .jstop__text { display: grid; justify-items: start; gap: 0; max-width: max(320px, calc(680 * var(--u))); opacity: .4; transform: translateY(12px); transition: opacity .7s ease .35s, transform .7s ease .35s; }
:where(.industries-page) .jstop__eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
:where(.industries-page) .jstop__eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
:where(.industries-page) .jstop h2 { margin-top: 14px; font-family: var(--font-inter); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
:where(.industries-page) .jstop__tag { margin-top: 14px; font-family: var(--font-inter); font-weight: 500; font-size: var(--fs-h5); line-height: 1.2; letter-spacing: -.01em; }
:where(.industries-page) .jstop__copy { margin-top: 16px; max-width: max(300px, calc(640 * var(--u))); font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: 1.55; color: rgba(255, 255, 255, .72); }
:where(.industries-page) .jstop__label { margin-top: max(28px, calc(44 * var(--u))); font-family: var(--font-body); font-weight: 500; font-size: var(--fs-caption); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
:where(.industries-page) .jstop__built { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
:where(.industries-page) .jstop__built li { padding: 10px 18px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .06); font-family: var(--font-body); font-weight: 500; font-size: max(14px, calc(17 * var(--u))); line-height: normal; }
/* arrived */
:where(.industries-page) .jstop.is-arrived .jstop__travelled { height: 100%; }
:where(.industries-page) .jstop.is-arrived .jstop__marker { background: var(--c); border-color: var(--c); box-shadow: 0 0 0 6px rgba(255, 255, 255, .08), 0 0 24px var(--c); }
:where(.industries-page) .jstop.is-arrived .jstop__marker::after { opacity: 1; transform: scale(1); }
:where(.industries-page) .jstop.is-arrived .jstop__photo img { filter: none; transform: none; }
:where(.industries-page) .jstop.is-arrived .jstop__text { opacity: 1; transform: none; }

/* ---------- end: the last piece of route, the destination marker and the closing call ---------- */
:where(.industries-page) .jend { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 0 var(--gutter) max(96px, calc(170 * var(--u))); }
:where(.industries-page) .jend__route { position: relative; width: 1px; height: max(80px, calc(110 * var(--u))); margin-bottom: max(56px, calc(86 * var(--u))); background: rgba(255, 255, 255, .16); }
:where(.industries-page) .jend__marker { position: absolute; left: 50%; bottom: 0; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; background: #000; transform: translate(-50%, 50%); box-shadow: 0 0 0 8px rgba(255, 255, 255, .1); }
:where(.industries-page) .jend__marker::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--grad-techrish); }
:where(.industries-page) .jend h2 { font-family: var(--font-inter); font-weight: 600; font-size: max(36px, calc(88 * var(--u))); line-height: 1; letter-spacing: -.04em; }
:where(.industries-page) .jend__sub { max-width: max(320px, calc(760 * var(--u))); font-family: var(--font-body); font-size: var(--fs-lead); line-height: var(--lh-body); color: rgba(255, 255, 255, .72); }
:where(.industries-page) .jend__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding-top: 28px; }

@media (max-width: 1200px) {
  :where(.industries-page) .jstop { column-gap: max(64px, calc(200 * var(--u))); }
}
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
  :where(.industries-page) .ihero { padding: calc(clamp(88px, 6.25vw, 120px) + 24px) var(--gutter) 56px; }
  :where(.industries-page) .ihero h1 { font-size: clamp(32px, 9vw, 56px); }
  :where(.industries-page) .ihero h1 br { display: none; }
  :where(.industries-page) .journey { --rail: calc(var(--gutter) + 10px); }
  :where(.industries-page) .jstart { align-items: flex-start; text-align: left; padding: 64px var(--gutter) 0; }
  :where(.industries-page) .jstart h2 br { display: none; }
  :where(.industries-page) .jstart__route { margin-left: 10px; margin-top: 36px; height: 96px; }
  :where(.industries-page) .jstop { grid-template-columns: minmax(0, 1fr); row-gap: 24px; min-height: 0; padding: 40px var(--gutter) 56px calc(var(--gutter) + 44px); }
  :where(.industries-page) .jstop--photo-right .jstop__photo { order: 1; }
  :where(.industries-page) .jstop--photo-right .jstop__text { order: 2; }
  :where(.industries-page) .jstop__marker { top: 40px; transform: translate(-50%, 0); }
  :where(.industries-page) .jstop__marker::after { inset: -10px; }
  :where(.industries-page) .jstop__text { max-width: none; }
  :where(.industries-page) .jstop__label { margin-top: 24px; }
  :where(.industries-page) .jend { align-items: flex-start; text-align: left; padding: 0 var(--gutter) 72px; }
  :where(.industries-page) .jend__route { margin-left: 10px; height: 72px; margin-bottom: 48px; }
  :where(.industries-page) .jend h2 { font-size: clamp(32px, 9vw, 56px); }
  :where(.industries-page) .jend__actions { justify-content: flex-start; padding-top: 20px; gap: 12px; }
  :where(.industries-page) .jend__actions .pbtn, :where(.industries-page) .jend__actions .cta__wa { min-height: 50px; padding: 0 18px; font-size: 15px; gap: 8px; }   /* the pair stays the same height on phones */
  :where(.industries-page) .jend__actions .cta__wa img { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.industries-page) .jstop__travelled, :where(.industries-page) .jstop__marker, :where(.industries-page) .jstop__marker::after, :where(.industries-page) .jstop__photo img, :where(.industries-page) .jstop__text { transition: none; }
}

@media (max-width: 560px) {
    .cta__actions .pbtn,
    .cta__actions .cta__wa {
        padding: 0 19px;
        font-size: 12px;
    }
}
@media (min-width: 901px) and (max-width: 1200px) {

    :where(.home-page) .services__cards {
        margin-top: 50px;
    }
}

/*Blog Page*/
:where(.blog-page) .featured h2:hover {
    text-decoration: underline;
}

:where(.blog-page) .pages__item {
    width: 50px !important;
    height: 50px !important;
    font-size: 18px;
}

:where(.blog-page) .featured h2 {
    font-size: var(--fs-h3);
}

/*Work Page*/

:where(.about-page) .whatsapp {
    transition: bottom 0.5s ease-in-out;
}

:where(.works-page) .projects {
    padding: max(80px, calc(140 * var(--u))) var(--gutter) !important;
}

@media (max-width: 560px) and (orientation: portrait) {
    :where(.home-page) .hero {
        min-height: max(680px, 77svh);
    }
}

/*Career Page*/

:where(.careers-page) .pbtn--ink {
   --pbtn-bg: #09090b;
    border: 2px solid transparent;
    padding: 18px 30px;
    background: linear-gradient(var(--pbtn-bg), var(--pbtn-bg)) padding-box, var(--grad-techrish) border-box;
}

:where(.careers-page) .pbtn--ink:hover, :where(.careers-page) .pbtn--ink:focus-visible {
   --pbtn-bg: #27272a !important;
}

:where(.careers-page) .perks__grid {
    align-items: stretch;
}

:where(.careers-page) .perk {
    min-height: 0;
}

/*About Page*/
:where(.about-page) .people {
 padding-top: 0 !important;
}

:where(.about-page) .life__btn-nav--prev {
    padding-bottom: 10px;
}

:where(.about-page) .life__btn-nav--next {
    padding-bottom: 10px;
}

:where(.about-page) .people__shade {
    opacity: 0.1 !important;
}

@media (max-width: 560px) {
    :where(.about-page) .tcard.is-open .tcard__inner,
    :where(.about-page) .tcard:has(:focus-visible) .tcard__inner,
    :where(.about-page) .tcard:hover .tcard__inner {
        height: auto;
        min-height: 0;
        padding-bottom: 90px;
    }

    :where(.about-page) .tcard__bio {
        margin-top: 4cqw;
    }

    :where(.about-page) .tcard__social {
        bottom: 0;
    }
}

/* Product Page*/
.products-page .showcase__slide[aria-label="3 of 5"] > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
}

/* Home page*/
.home-page .pvideo__title span {
    display: inline;
    background: linear-gradient(
        90deg,
        #EF4136 0%,
        #FFC20E 33.33%,
        #8DC63F 61.89%,
        #00AEEF 95.22%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}