/* ============================================================================================================
   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;
}

/* hover spotlight: a soft, sunlight-coloured radial glow (brand yellow into brand red) that follows the cursor inside
   the pill. script.js writes the cursor position into --sx/--sy; the glow is a pseudo-element clipped by the pill,
   so the button's size, padding and text never change, and it fades out on mouse leave. */
.pbtn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.pbtn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(130px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 194, 14, .32), rgba(239, 65, 54, .12) 45%, transparent 72%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: -1;
}

.pbtn:hover::after {
    opacity: 1;
}

.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;
}

/* hover and current page: no underline – a small multicoloured bubble (the brand gradient) sits centred under the
   text in the underscore position; it is a pseudo-element, so the row's spacing does not change */
.nav__links a {
    position: relative;
}

.nav__links a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--grad-techrish);
    transform: translateX(-50%) scale(0);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
    pointer-events: none;
}

.nav__links a:hover, .nav__links a.is-current {
    color: #fff;
    text-decoration: none;
}

.nav__links a:hover::after, .nav__links a.is-current::after {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

/* hover light: a copy of the label (::before, from data-text set by script.js) sits exactly over the text with a
   brand-gradient glow clipped to the glyphs. The glow is centred on the cursor: script.js writes the pointer's position
   across the link into --mx (0–100%), and the band of a 300%-wide gradient is placed under it. Only the letters are
   coloured; the dot (::after) and spacing are untouched. */
.nav__links a::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    white-space: nowrap;
    color: transparent;
    background-image: linear-gradient(100deg, transparent 36%, #ef4136 43%, #ffc20e 48%, #00aeef 53%, #8dc63f 58%, transparent 65%);
    background-size: 300% 100%;
    /* band centre at 50% of the image; position P puts it at 1.5w − 2w·P, so P = 75% − mx/2 puts it under the cursor */
    background-position: calc(75% - var(--mx, 50%) / 2) 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, background-position .12s linear;
}

.nav__links a:hover::before {
    opacity: 1;
}

/* 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);
}

/* hover: a multicolour brand-gradient ring (::before) rotating around the circular border in a continuous loop.
   The ring is a conic gradient masked to a 2px band and spun as a whole; it fades in on hover and out on mouse out,
   so the button's size and layout never change. */
.nav__phone {
    position: relative;
}

.nav__phone::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from 0deg, #ff6961, #f1de56, #40c5e4, #77dd77, #ff6961);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}

.nav__phone:hover, .nav__phone:focus-visible {
    border-color: transparent;
}

.nav__phone:hover::before, .nav__phone:focus-visible::before {
    opacity: 1;
    animation: nav-phone-spin 2.4s linear infinite;
}

@keyframes nav-phone-spin {
    to { transform: rotate(360deg); }
}

.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: 35px;
    bottom: 35px;
    z-index: 80;
    display: flex;
    align-items: center;
    padding: 14px;
    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: 32px;
    height: 32px;
    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;
    }

    .nav__phone::before {
        transition: none;
    }

    .nav__links a::before {
        transition: none;
    }

    .pbtn::after {
        transition: none;
    }

    .nav__phone:hover::before, .nav__phone:focus-visible::before {
        animation: 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: 80;
        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: transparent;
}

.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) ---------- */








/* 820 | 414 | 414 columns and two 442 rows, 16 apart; the large tile spans both rows */




/* tile (Figma "Service tile (hover)"): hover zooms the image, fades the description in and turns the arrow */








/* 20% black over the photos, then the bottom shade (72% black, 90% on hover) */




















/* description: no height until hover (grid 0fr → 1fr lets the title slide up smoothly) */








/* Figma: image inset −4% */








/* touch screens have no hover: descriptions always shown */


/* ---------- SERVICE LIST (Figma "Services (hover to expand)", 1920 × 1760; rows 150 collapsed / 472 open) ---------- */


















/* the script keeps the hovered row under the pointer, so the browser's own scroll anchoring stays out of it */






/* head: (01) at x 0, title at x 160, count and the 56px toggle on the right */












/* plus (two 20 × 2 bars); turns into × on the accent circle when open */






/* body: indented to the title; description (600) + link on the left, capability points (2 × 384) at x 880 */














/* points: two columns of four (first column fills first) */




/* the points link to the service pages: same look as the text, an underline on hover */




/* open */












/* opened from a tile link: no animation, so the page scrolls straight to the row's final place */




/* ---------- SERVICES PAGE: RESPONSIVE ---------- */
@media (max-width: 1200px) {
    /* bento: the large tile full width on top, the other four in a 2 × 2 grid */ 

    

    
}

/* mobile layout (same breakpoints as the home page) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    

    

    

    /* rows: number above the title, toggle on the right, count hidden; body in one column */
    

    

    

    

    

    

    

    

    

    

    
}



/* ================================================================================================================
   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. */










/* 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) */


/* headings keep their designed line breaks at every width (the shared stylesheet drops .br-lg below 1200px) */


/* ---------- HERO (Figma "Home – Improved" › Hero, 1920 × 1080: text block at x 120, y 380; badge 201 × 209 at x 1262, y 439) ---------- */


/* 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. */




/* keeps the text legible once it overlaps the video (mobile layout only) */








/* entrance: each word rises out of its own mask, one after another (--w is the word's place in the sentence) */




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





@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. */














@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;
    }
}





/* 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. */


@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;
    }
}







/* ---------- ABOUT (Figma › About, 1920 × 1524: label y 180, heading 226, copy 404, tour card 1686 × 766 at y 598) ---------- */






/* ---------- 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) ---------- */


/* the card: thick, soft frame round a white screen */




/* status pill, sitting on the bottom edge of the frame */










/* above the card: title, progress line, the four steps */














































/* 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. */




/* 80px grid; runs three cells past the scene's top and bottom so it also fills a taller canvas */






/* 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. */






/* text: a grey bar in the wireframe, the words once designed */


/* fills: brand gradient / ink once designed */






















































































































































/* wireframe look, until step 3 */
















































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













/* ---------- 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. ---------- */






/* ---------- 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) ---------- */


/* Step 0: the T sits in the middle at 580 × 566; it shrinks into its place on the left for steps 1–3 */








/* the colourless glass the colours flow back into */




/* 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 */










/* step 0: full colour */




/* step 1 Imagine: the red dot, the red foot and the orange of the stem */


/* step 2 Strategize: on through the yellow stem and curve to the blue end of the bar */






/* step 3 Execute: the green bar and the green dot complete the mark, then the glass is fully lit */








/* the glow behind the T takes the colour of the step (the asset is green) */


















































/* ---------- 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) ---------- */










/* each card after the first starts one screen down; script.js moves --t from 0 to 1 as it slides over the previous one */










/* button bottom at y 575 of the 640 card */


/* video holder */




/* the cloud and cybersecurity videos carry a blue and a red object; in greys they match the other three */






/* the list items link to the service pages: same look as the text, an underline on hover */




/* ---------- 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) ---------- */










/* script.js moves the frame from the slot to the full screen; this is its resting place without JS */




/* pause / play */








/* product artwork: short looping videos (already cropped to the portrait strip Figma shows), with the first frame as
   poster; icons from one sprite */




























/* ---------- 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) ---------- */








/* script.js sets --x (px): the distance the row still has to travel */




/* in the opening frame only the first card is on screen; the rest sit one gutter further out */




















/* the position bar and swipe hint exist only in the mobile / tablet layout (see the responsive block) */


/* ---------- INDUSTRIES (Figma "Industries (slider)", 1920 × 980: label y 140, heading 172, cards 600 × 500 at y 330, 24 apart, bar at y 886) ---------- */


















/* the row: native horizontal scroll with snap (buttons step it; touch can swipe it) */














/* darker wash behind the description while it is open */








/* description: opens on hover or focus (always open on the mobile layout) */














/* ---------- INSIGHTS (Figma "Home – Improved" › Blog, 1920 × 972: head at y 160, posts 544 × 436 at y 376, 24 apart) ---------- */






/* Figma "Link – View all insights (hover 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) ---------- */


























/* script.js duplicates each column's cards; one set is 8 × (128 + 20) = 1184 tall */




@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);
    }
}









































/* ---------- RESPONSIVE ---------- */
/* laptops narrower than the wall + text need: text above a full-width wall */
@media (max-width: 1200px) {
    

    

    

    

    

    

    /* 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 */
    
}

/* 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) {
    

    /* hero: text at the bottom, the element fills the screen behind it */
    

    /* the mobile action bar sits over the bottom of the screen */
    

    

    

    /* drifts across the top, above the text */
    

    

    

    /* about + tour: steps in two columns */
    

    

    

    

    

    

    

    

    

    

    /* pinned sections become normal flow */
    

    

    

    /* how we work: full-colour T, then the three words with their copy */
    

    

    

    

    

    

    

    

    

    

    

    /* services: cards in normal flow; title, video, list, button */
    

    

    

    

    

    

    

    

    

    

    

    

    /* product video: text above the frame */
    

    

    

    

    

    

    /* products: a swipeable row of cards at their Figma size */
    

    

    

    

    

    

    

    

    

    

    /* narrow windows with a mouse (no touch, scrollbar hidden): the row can be dragged; script.js adds .is-dragging while it is */
    

    

    

    /* 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 */
    

    

    /* swipe hint: a pointing hand nudging sideways with chevrons lighting up towards the hidden cards; fades out after the first swipe */
    

    

    

    

    

    

    

    

    @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 */
    

    

    

    

    

    

    

    

    /* insights */
    

    

    

    

    /* tech stack */
    
}

@media (max-width: 700px) {
    

    

    

    /* the next card peeks in from the right (about 36px on a 390px screen) */
    

    
}



/* landscape phones (short landscape screens): hero text beside the element instead of stacked below it */
@media (max-height: 540px) and (orientation: landscape) {
    

    

    

    

    

    

    

    /* clear of the WhatsApp button */
    

    
}





/* ================================================================================================================
   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. */


/* 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) ---------- */














/* ---------- WHO WE ARE (Figma "About statement (scroll reveal)", 1920 × 1102) ---------- */




/* JS wraps each word; the words start dim (Step 0) and light up with the scroll (Step 1–8) */




/* stats: columns at x 0 / 576 / 1152 of 1680 */








/* ---------- 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 */














/* 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) */




/* "Meet the team": bottom right of the full frame (x 1628, y 1096), rises in with the photo */








/* ---------- OUR VALUES (Figma "Our values", 1920 × 1211; rows = "Value row (hover)") ---------- */








/* row: 140 collapsed / 220 expanded at 1680; description column 640 at x 1040 */














/* title: centred when collapsed, slides to x 96 when expanded */




/* description: the row grows with it (grid rows 0fr → 1fr) and it fades / rises in */










/* ---------- HOW WE WORK (Figma "How we work (orbit)", 1920 × 1400; ring 960 at x 480, y 220) ---------- */






/* quarter arcs (480 × 480): 0–90° top right, 90–180° bottom right, 180–270° bottom left; lit on arrival (JS) */










/* the arm spans the ring; turning it (--a, degrees clockwise from the top) carries the dot round the ring */












/* centre text */






/* stage chips: centred on the ring's top / right / bottom / left points */




















/* active stage: 2px border (1px border + 1px inset ring, so nothing shifts), badge in the stage colour */






/* ---------- LEADERSHIP TEAM (Figma "Leadership team", 1920 × 2505; cards = "Team card (hover)", 402 × 600) ---------- */










/* sizes inside the card are Figma px of the 402-wide card, in container units (100cqw = card width; 1px = .24876cqw) */




/* photo frame 480 tall; shrinks to 260 on hover, the photo stays 480 and centred (y -110) */
















/* email / LinkedIn: bottom of the card (y 548), 52px circles 12 apart */










/* open: arrow button / tap (is-open), keyboard focus (own rule: browsers without :has() skip only that one), hover */














/* ---------- LIFE AT TECHRISH (Figma "Life at Techrish slider", 1920 × 1200; strip of 800 × 880 photos 32 apart at x 760) ---------- */


/* left mask (x 0–744): photos sliding left pass under it */










































/* the ends keep their Figma look (as the home Industries slider) */












/* ---------- RESPONSIVE ---------- */


/* mobile layout: narrow, portrait or short screens (matches the home page's mobile breakpoint) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    

    

    

    

    

    

    /* people: heading, copy, then the rounded photo in the gutters (no scroll growth) */
    

    

    

    

    

    

    

    

    

    /* rows: badge + title on one line, the description opens under them */
    

    

    

    

    

    

    /* orbit: heading, then the four stages as a list (the active one cycles) */
    

    

    

    

    

    

    

    

    

    

    

    

    

    /* life: intro, the photo strip (next photo peeks in), then the caption and arrows */
    

    

    

    

    

    

    

    

    

    

    

    
}

@media (max-width: 560px) {
    

    

    

    

    /* each card already keeps room below for its bio */
    
}

/* ================================================================================================================
   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) ---------- */














/* secondary pill (Figma "Secondary button": white, 1px #d4d4d8) */




/* ---------- SHOWCASE (Figma "Showcase Slider", 1920 × 820: 1000 × 625 slides at y 40, controls at y 748) ---------- */




/* 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 */














/* slides 3–4: artwork tile 914.894 × 1240.426 at y -308 (units: cqw = 1% of the slide width) */


















/* ---------- PRODUCTS (Figma › Products, 1920 × 1126: header, then four 402 × 560 cards, 24 apart) ---------- */
















/* inner sizes scale with the card (Figma card = 402 wide; 1cqw = 4.02 Figma px), capped at the Figma size */


/* artwork tile: 413.036 × 560 at x -25 of the 402 card (Figma leaves a dark strip on the right) */




/* top gradient (whole card) + bottom gradient (y 340–560) */








/* Figma "Card CTA": glass pill (338 × 56) with a white arrow disc (40) */










/* scroll reveal (JS adds .is-pending, then removes it once the card is on screen) */


/* ---------- STATISTICS (Figma › Statistics, 1920 × 621) ---------- */








/* 1 × 120 divider between stats */






/* ---------- RESPONSIVE ---------- */


/* mobile layout: narrow, portrait or short screens (same query as styles.css) */






/* ================================================================================================================
   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. */


/* 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) ---------- */










/* photo frame: 980 × 720 at x 610, y 40 (Step 0) → the whole stage (Step 1) */








/* 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 */












/* pinned (desktop, JS): the stage fills the screen so the photo can grow to a full-screen Step 1 */




/* ---------- ALBUM (Figma "Album – 3D flipbook", 1920 × 1180; book 1200 × 720 at x 360, y 300) ---------- */




/* book sizes are Figma px × --b; --b = --u on desktop, the book shrinks with the screen below */


























/* right page: two tilted polaroids and the caption (Figma "Photo A" 320 × 360 at 48, 40 / "Photo B" 270 × 310 at 268, 250) */














/* the turning leaf: hinged on the spine; front = the page it lifts, back = the page it lands as */




















/* edges of the pages still to come (Figma "Side 2–5": 44 wide at x 1572 + 40 n, 40 shorter each) */




























/* ---------- MOMENTS (Figma "Moments by year (list)": one list of event rows per year) ---------- */






















/* 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% */














@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. */








/* black & white copy on top (grayscale also covers the events whose B&W fill is the colour photo); hover wipes it away */










@keyframes moment-wipe {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(200%);
    }
}













/* "View gallery": bottom of the row, rises in on hover (Figma y 356 → 336 of 400) */










/* "More moments coming soon" (Figma ghost row: 200 tall, dimmed, no cover) */






/* dark variant (black background): remove the moments--dark class in life.html to go back to the white Figma version */
































/* ---------- 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;
}





























/* opened from the dark moments section */










/* ---------- JOIN (Figma "Join our team", 1920 × 1040; photo 600 × 760 at x 1080, badge 220 at x 1570, y 790) ---------- */












/* the photo fills exactly the height of the text column (the HTML height attribute must not win: height is set here) */




/* rotating badge: white disc, turning ring of text, black core with the arrow */








@keyframes badge-spin {
    to {
        transform: rotate(360deg);
    }
}









/* ---------- RESPONSIVE ---------- */


/* 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 */ 

    

    

    

    

    

    

    

    

    

    /* album: the two pages stack, one book-page wide; spreads fade instead of turning */
    

    

    

    

    

    

    

    

    

    

    

    

    

    /* moments: year tabs under the heading; rows = small cover beside the text */
    

    

    

    

    

    /* on narrow phones the years scroll sideways instead of widening the page */
    

    

    

    /* rows: the cover across the top, then the index and text with the arrow button beside them */
    

    

    

    

    

    

    

    

    

    

    

    /* gallery: three columns on tablets, two on phones (script.js); title above the meta */
    

    

    /* join: text, then the photo with the badge on its corner */
    

    

    

    

    

    

    

    

    /* inside the photo's edge: nothing hangs past the viewport */
    
}

/* ================================================================================================================
   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. */


/* 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 */




/* Figma "Button" on the white sections: ink pill, 2px red border (66 tall) */


/* ---------- BANNER (Figma "Banner", 1920 × 1510: label at y 70, headline 130, sub 362, button 468, video 610) ---------- */








/* video: poster, 30% shade, 180 play button in the centre, caption at 48 / 48 from the bottom left, duration at 32 / 32 */






/* Figma "Play button (hover)": the disc grows (r 60 → 66) and a soft ring expands behind it (r 90, white 25%) */




















/* playing (script.js): the player takes over the frame */


/* ---------- OPEN POSITIONS (Figma "Open positions", 1920 × 1558; job grid 2 × 828, 24 apart) ---------- */










/* Join our team (general application): the black band continues under the open positions; the invitation on the
   left, the application form (the job pages' .jform) on the right, 120 apart. Stacks on small screens. */








/* 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 "→". */






























/* Figma "Self-application": dashed card, description 560 wide, underlined link at the bottom */












/* ---------- 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. */






@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) */




@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 */




/* 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) */


/* value cards: accent dot, number and title, shown only while the card is at the front */








@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 */




@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;
    }
}







/* ---------- PERKS (Figma "Perks & benefits", 1920 × 1201; grid 3 × 544, 24 apart, cards 330 tall) ---------- */




















/* ---------- NOT ONLY ABOUT WORK (Figma "Not only about work (photo slider)", 1920 × 1262) ---------- */








/* 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. */










@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. */


/* ---------- RESPONSIVE ---------- */


/* 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 */ 

    

    

    

    

    

    /* open positions: one card per row; "View role & apply" always shows (no hover on touch) */
    

    

    

    

    /* values: label, words, the fan across the page, then the active value */
    

    

    

    

    

    

    /* perks: heading above the copy */
    

    

    /* not only about work: heading above the copy; a larger collage */
    

    

    
}



/* =====================================================================================================
   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) ---------- */




/* the arrows come from a fallback font with a taller line: keep them from stretching the pill, button and link */


















/* ---------- JOB BODY (Figma "Job body", 1920 × 1699: role description 960 wide, form 600 wide, 120 apart) ---------- */


/* role description: a rule on top, then the sections 64 apart */










/* Figma "Bullet": 8 × 32, the dot on the middle of the first line (32 = one 20px line at 1.6) */




/* Figma "Application form": grey card, 40 padding, fields 24 apart; inputs 60 tall, textarea 150, dashed dropzone */
































/* validation (script.js) */






















/* bot trap: a "Company" field people never see (api/apply.php drops applications that fill it in) */






/* ---------- OTHER POSITIONS (Figma "Other positions", 1920 × 719: heading row at y 140, two job cards at 263) ---------- */
















/* mobile layout: the role description, then the form across the page */


/* ================================================================================================================
   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. */


/* shared: section label and heading */
/* .kicker / .kicker--light / .a-h2: see COMMON COMPONENTS (identical on Home, About, Life, Careers and Contact) */


/* ---------- HERO (Figma › Hero, 1920 × 635: navigation 120 + content 515) ---------- */














/* ---------- 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) */




/* rows: 160 tall, 1px lines between (and after) them */










/* the coloured line that runs along the top of the active row (0 → 720 in 4.5 s, script.js) */





@keyframes path-progress {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}





















/* form card (white, radius 24, padding 48); the three cards swap in place */








@keyframes pcard-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}





/* fields: two 360-wide columns 24 apart; label 16/500, input 60 tall, textarea 230 */
















/* honeypot: off screen for people, a normal field for bots */


/* validation (script.js) */






/* actions: dark pill + "Prefer chat?" note; the career card has two pills */







.pcard__submit span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.pcard__submit:hover span {
    transform: translateX(5px);
}



.pcard__secondary span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.pcard__secondary:hover span {
    transform: translateX(5px);
}

















/* career card: 744 × 460 photo, radius 16 */




/* ---------- REACH US DIRECTLY (Figma "Direct contact", 1920 × 1327) ---------- */








/* contact cards: 544 × 300, radius 24; hover turns the card ink and fills the arrow */






















/* social block: rule, centred heading, five 120-wide links 24 apart */






















/* ---------- OFFICE LOCATIONS (Figma "Office locations (reveal)", 1920 × 984; cards 544 × 480 at y 344) ---------- */










/* mobile / default layout: everything in flow (region, drawing, name, address, link) */


















/* Figma's line breaks only at the desktop card width */




/* 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) {
    

    

    

    

    

    

    

    

    /* Art state (before the reveal, and again once the cards have scrolled away) */
    

    

    

    
}



/* ---------- RESPONSIVE ---------- */
/* laptops: the paths card sits under the rows at full width */


/* mobile layout: narrow, portrait or short screens (matches the other pages' mobile breakpoint) */




/* ================================================================================================================
   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. */


/* shared: kicker, topic tag (outlined pill with the topic colour as a dot), date · reading time */










/* ---------- BANNER (Figma › Banner, 1920 × 538: padding 70 / 110) ---------- */












/* ---------- FEATURED ARTICLE (Figma › Featured article: 720 × 405 image, text column, 140 below) ---------- */


















/* "Read article →" (Figma "Link – Read article (hover underline)"): a 4px gradient underline grows in on hover */










/* ---------- BROWSE ALL (Figma › Browse all: heading row, 3 × 544 grid 72 / 24 apart, pagination) ---------- */






/* search (Figma "Blog search (expand)"): a 56 circle that grows leftwards into a 480 × 56 field */
























/* article grid */








@keyframes bcard-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}










/* hover / focus (Figma "Blog card (hover)"): the image lifts 4px and brightens, the title is underlined */








/* pagination (Figma "Pagination item"): 44 circles, current ink, hover grey, disabled light */














/* ---------- RESPONSIVE ---------- */


/* mobile layout: narrow, portrait or short screens (matches the other pages' mobile breakpoint) */


/* ================================================================================================================
   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. */


/* shared: section label, heading, highlight colours */






/* the phrases counted in the thread: Medium, 3px underline in the theme colour (blue Quality, red Partnership,
   green Communication, yellow Speed, orange Recommend) */












/* 2px Techrish-gradient border (as the dark pill button) */


/* ---------- HERO (Figma "Ask our clients" › Hero: 1920 × 894, padding 110 / 120) ---------- */












/* prompt: 1080 × 88 pill, gradient border, send button; the chips under it */
































/* ---------- THREAD (Figma "Ask our clients" › Thread: black, 1080-wide conversation) ---------- */






/* the visitor's question, right-aligned, white bubble with a small bottom-right corner */








/* an answer: monogram + bubble with a small top-left corner */






















/* "Next is you?": dashed monogram and bubble, links to the contact page */












/* the thread swaps in: bubbles rise one after another */












@keyframes thread-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- ALL REVIEWS (Figma "Reviews", 1920 × 1757) ---------- */


/* minmax(0, 1fr): the column may shrink below the filter row's min-content, so the tabs scroll instead of widening the page */






/* filter bar: tabs on a grey rule, the active one ink with a 2px underline sitting on the rule */












/* review wall: three 544-wide columns, 24 apart; the cards carry an order so they list in review order on mobile */






































/* hover (Figma "Review card (hover)"): the card turns ink, the text white, the highlights keep their colour */


/* "Next is you?" slot: dashed card with an arrow */


















/* ---------- NEXT CHAPTER (Figma "Next chapter", 1920 × 1108) ---------- */














/* open slots: 840 wide, dark cards; the first with the gradient border, the others dashed and fading */






















@keyframes oslot-shimmer {
    to {
        background-position: -200% 0;
    }
}













/* ---------- RESPONSIVE ---------- */


/* mobile layout: narrow, portrait or short screens (matches the other pages' mobile breakpoint) */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    /* the tabs scroll sideways in one row instead of wrapping */
    

    

    

    

    

    /* one list in review order: the columns dissolve and the cards' order attribute sorts them */
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
}



/* ================================================================================================================
   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: var(--gutter);
    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. */




/* small uppercase label (Figma: WORKS / TOURISM & HOSPITALITY, ABOUT THE PROJECT, WHAT WE DELIVERED, NEXT PROJECT) */






/* ---------- TOP BAR (Figma › Top bar (sticky): Back to works pill, previous / next / close circles) ---------- */


/* once the page has scrolled under it (script.js adds .is-stuck) the bar closes up and gets a hairline */
















/* ---------- PROJECT HEAD (Figma › Project head: title block + Visit website; pt 64, pb 72) ---------- */












/* ---------- 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). */






















/* island */






/* ---------- PROJECT OVERVIEW (Figma › Project overview: About 960 wide + facts card 600 wide, 120 apart) ---------- */






























/* ---------- NEXT PROJECT (Figma › Next project: black band, p 120; copy left, 640 × 400 thumbnail right) ---------- */
























/* ---------- RESPONSIVE ---------- */
/* mobile layout: narrow, portrait or short screens (matches the other pages' mobile breakpoint) */


/* small phones: the back pill keeps only "Back" so the bar never gets wider than the screen */


/* ================================================================================================================
   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. */


/* fills the first screen (nav included) so the footer starts below the fold */




/* glows (the CTA card's), drifting slowly behind the number */






@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) */














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

    to {
        opacity: 1;
        transform: none;
    }
}





/* 404: Techrish-gradient digits; each digit drops in, then the sheen keeps moving across the number */










@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;
    }
}







/* popular pages */










/* mobile layout: narrow, portrait or short screens (matches the other pages' mobile breakpoint) */




/*About Page*/





















































/* ================================================================================================================
   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
   ================================================================================================================ */




















































/* ================================================================================================================
   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.
   ================================================================================================================ */


/* two white sections in a row share one rhythm: the second one starts closer (a dark section keeps its full
   padding on both sides, the background change already separates it) */






















/* section header: title block left, lead or button right, bottoms aligned */








/* scroll reveal (script.js adds .is-in; --d staggers the children) */




/* ---------- Hero (Figma "Landing – Hero": content left, visual 760 × 640 right, under the 120 header) ---------- */


















/* ---------- App logo grid (Zapier page: the tools it connects; same tile style as the chips) ---------- */






/* ---------- Intro chips (Figma "Landing – Intro (highlights)": three per row, #f4f4f5, radius 24) ---------- */












/* ---------- Feature cards (Figma "Landing – Features (cards)": three per row, #0b0b0b, radius 24, padding 40) ---------- */














/* ---------- Steps (Figma "Landing – Steps (3 cards, dark)": #111113 cards, gradient numbers) ---------- */








/* ---------- Capabilities (Figma "Landing – Capabilities (list)": sticky title left, ruled rows right) ---------- */




















/* ---------- Stories (Figma "Landing – Stories": image 760 × 560 beside index, title, paragraph, link; sides alternate) ---------- */
































/* ---------- FAQ (Figma "Landing – FAQ" + "FAQ item (accordion)": first open, one at a time) ---------- */


























/* ---------- closing CTA: the shared card with product copy ---------- */






/* phones / tablets: the two CTA buttons share a row when their labels fit, otherwise the second drops to its own full-width row */










/* ================================================================================================================
   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.
   ================================================================================================================ */
















/* section titles: the second half of a title in grey, as on the live pages */


/* services grid: icon cards, three per row */








/* feature cards: dark with the Techrish gradient as a hairline on top */




/* website types: a single-column list of bordered rows */
















/* design approach: two columns of ruled items with a gradient dot */








/* why choose us: full-width dark rows */










/* process: light section, white step cards with a large faint number */








/* FAQ on the light background: the closed icons stand out as white circles */












/* ================================================================================================================
   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.
   ================================================================================================================ */




/* margin: 0 drops the browser’s default figure inset */


























/* ================================================================================================================
   Service Page
   ================================================================================================================ */










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

@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;

    }

}


/* ================================================================================================================
   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.
   ================================================================================================================ */










/* labels shared by the start, the stops and the end */


/* ---------- start: eyebrow, heading, then the first piece of route with its marker and the SCROLL label ---------- */






/* ---------- a stop ---------- */


















/* arrived */






/* ---------- end: the last piece of route, the destination marker and the closing call ---------- */









@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
     /* the pair stays the same height on phones */
  
}


@media (max-width: 560px) {
    .cta__actions .pbtn,
    .cta__actions .cta__wa {
        padding: 0 19px;
        font-size: 12px;
    }
}


/*Blog Page*/






/*Work Page*/



:where(.works-page) .projects {
    padding: max(80px, calc(140 * var(--u))) var(--gutter) !important;
}



/*Career Page*/









/*About Page*/










/* Product Page*/


/* Home page*/










:where(.works-page) .reel__summary .pbtn {
    max-height: 60px;
}

/* Testimonals page */





/* Privacy Policy Page */




/*  Service Page */












/*  Blog Page */




/* Single Product Page */