/*
Theme Name: BrandOmix
Theme URI: https://brandomix.studio
Author: BrandOmix
Author URI: https://brandomix.studio
Description: Dark, motion-first studio theme. Every section is a reusable template part with its own independent styling options in the Customizer. Projects and services are content types you edit in wp-admin (ACF friendly).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brandomix
Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, theme-options, translation-ready
*/

/* -------------------------------------------------------------------------
   HOW THIS FILE IS ORGANISED

   This is the original hand-written stylesheet, unchanged, with the theme
   header above and a small WordPress compatibility block at the very end.

   Do NOT put your own edits in here. Anything you change in the Customizer
   is printed separately, after this file, by inc/customizer-css.php — that
   way this file can be replaced on a theme update without losing settings.
   ------------------------------------------------------------------------- */

/* =========================================================================
   BRANDOMIX — stylesheet
   -------------------------------------------------------------------------
   Written with native CSS nesting. Every block owns its own children, states
   and breakpoints, so a component can be moved or deleted in one piece.

   Naming: BEM-ish — .block, .block__element, .block--modifier, plus .is-* /
   .has-* for JS-driven state. No single-word class names: those are the ones
   that collide once a project grows.

   00  FONT FACES
   01  DESIGN TOKENS
   02  BASE / RESET
   03  SHARED UTILITIES   (section headings, roll, .btn)
   04  BACKGROUND PATTERNS
   05  PRELOADER
   06  PAGE SHELL         (drawer tilt rig)
   07  SITE HEADER        (single fixed bar)
   08  MENU TOGGLE
   09  NAV DRAWER
   10  HERO
   11  HERO TICKER        (crossed marquee bars)
   12  CAPABILITIES       (bento grid)
   13  SERVICES INTRO
   14  SERVICES STACK     (pinned cards)
   15  BELIEFS
   16  WORK PAIR
   17  WORK SHOWCASE      (3D carousel)
   18  CASE STUDY OVERLAY
   19  FAQ                (two-column accordion)
   20  CLIENT LIST
   21  SERVICE INDEX      (services page)
   22  SITE FOOTER
   23  INNER PAGES        (about + contact)
   24  REDUCED MOTION
   26  WORK GRID          (work page)
   ========================================================================= */


/* =========================================================================
   00  FONT FACES
   Grift is the display face, self-hosted. Three weights, woff2 only
   (~70KB total). font-display:swap so headings are never invisible.
   ========================================================================= */
@font-face{
  font-family:'Grift';
  src:url('fonts/grift/Grift-Light.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Grift';
  src:url('fonts/grift/Grift-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Grift';
  src:url('fonts/grift/Grift-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}


/* =========================================================================
   01  DESIGN TOKENS
   ========================================================================= */
:root{
  /* --- palette ---------------------------------------------------------
     Four brand colours, nothing else. Everything that used to be a grey or
     a gradient is now one of these, or Pearl Grey at a lower alpha.

       #cd1750  Crimson Red     primary accent
       #e8e6e7  Pearl Grey      all type and hairlines
       #06202B  Greenish Black  every dark surface
       #f17a50  Orange          secondary accent
     --------------------------------------------------------------------- */
  --crimson:#cd1750;
  --pearl:#e8e6e7;
  --greenish-black:#06202B;
  --orange:#f17a50;

  --black:#000;                          /* the page is pure black     */

  /* The one colour outside the four brand colours. It is reserved for the
     "things went up" signals — the SEO chart and its badge — where orange
     would read as a warning rather than growth. */
  --color-green:#35c07a;

  /* roles — components reference these, never the raw hexes */
  --color-bg:var(--black);               /* page background            */
  --color-surface:var(--black);          /* shell behind the page      */
  --color-ink:var(--pearl);              /* primary text               */
  --color-accent:var(--crimson);
  --color-warm:var(--orange);            /* secondary accent           */
  --color-deep:var(--greenish-black);    /* raised surfaces that need to
                                            lift off the black          */

  /* Pearl Grey at reduced alpha — the only "greys" in the system */
  --color-muted:rgba(232,230,231,.58);
  --color-faint:rgba(232,230,231,.42);
  --color-hairline:rgba(232,230,231,.14);
  --color-line:rgba(232,230,231,.16);
  --color-lift:rgba(232,230,231,.05);    /* raised card surface        */
  --color-lift-strong:rgba(232,230,231,.09);

  /* --- background patterns -------------------------------------------
     SVG data URIs rather than repeating gradients: they tile exactly, stay
     crisp at any zoom, and give the empty black areas some structure. Pearl
     at very low alpha, so the background itself stays pure black.
     --------------------------------------------------------------------- */
  --pattern-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M72 0H0v72' fill='none' stroke='%23e8e6e7' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
  --pattern-checks:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect width='16' height='16' fill='%23e8e6e7' fill-opacity='.05'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%23e8e6e7' fill-opacity='.05'/%3E%3C/svg%3E");

  /* --- type --- */
  --font-ui:'Manrope',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-body:var(--font-ui);
  --font-display:'Grift','Manrope',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  /* --- easing --- */
  --ease-out-soft:cubic-bezier(.22,1,.36,1);
  --ease-roll:cubic-bezier(.76,0,.24,1);

	  /* --- container --- */
  --inner-container-width:1720px;
	
  /* --- chrome --- */
  --header-height:76px;

  /* --- drawer tilt rig (main.js reads these by name) --- */
  --drawer-width:400px;
  --drawer-gap:24px;
  --drawer-angle:22deg;
  --drawer-perspective:1600px;
  --drawer-dim:.55;
  --drawer-duration:.62;
  --drawer-stagger:.06;
  --drawer-direction:1;
  --drawer-peek:56px;

  /* --- component sizing --- */
  --service-card-width:min(1280px,90vw);
  --service-card-height:min(58vh,480px);
  --service-stack-offset:70px;
  --work-card-width:920px;       /* main.js overwrites per breakpoint */
  --work-card-height:580px;
}
@media (max-width:900px){
:root{
    --drawer-width:76vw;
    --drawer-gap:16px;
    --drawer-angle:16deg;
    --drawer-perspective:1200px;
    --header-height:62px
}
  }
@media (max-width:700px){
:root{
    --drawer-width:calc(100vw - var(--drawer-peek));
    --drawer-gap:0px;
    --drawer-angle:14deg;
    --drawer-perspective:900px
}
  }


/* =========================================================================
   02  BASE / RESET
   ========================================================================= */
*{ box-sizing:border-box }

html{
  background:var(--color-bg);
  scrollbar-gutter:stable;       /* no layout shift when a scroll lock lands */

  /* case overlay + preloader lock */

  /* drawer lock — the page becomes a fixed, tiltable slab */
}

html.is-scroll-locked,
  html.is-scroll-locked body{ overflow:hidden; overscroll-behavior:none }

html.is-drawer-open,
  html.is-drawer-open body{ overflow:hidden; height:100% }

html.is-dragging,
  html.is-dragging *{ cursor:grabbing !important }

/* while dragging the work carousel */

html.is-dragging{ user-select:none }

body{
  margin:0;
  position:relative;
  width:100%;
  /* never fake a weight or an oblique — if a cut is missing we want to see it */
  font-synthesis:none;
  background:var(--color-surface);
  color:var(--color-ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}

img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none }

::selection{ background:var(--color-accent); color:var(--greenish-black) }
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px }

::-webkit-scrollbar{ width:10px }
::-webkit-scrollbar-track{ background:var(--color-deep) }
::-webkit-scrollbar-thumb{ background:rgba(232,230,231,.2); border-radius:8px }


/* =========================================================================
   03  SHARED UTILITIES
   Reused by more than one section. A rule that only ever serves a single
   component belongs in that component's block instead.
   ========================================================================= */

/* small uppercase kicker above a heading */
.section-eyebrow{
  margin:0;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.5;
}

/* small caps label used above short facts: footer cells, about facts,
   contact details. Three identical rules used to live in three sections. */
.meta-label{
  display:block;
  margin-bottom:12px;
  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--color-faint);
}

/* the standard section heading */
.section-title{
  margin:18px 0 0;
  max-width:16ch;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(2rem,6vw,5rem);
  line-height:.98;
  letter-spacing:-.04em;
}
.section-title b{ font-weight:700; color:var(--color-accent) }

/* Roll: two stacked lines in a clipped box; the second slides up on demand.
   Shared by .btn, .menu-toggle and the footer email. This owns the mechanism
   only — each component decides what triggers it. */
.roll{
  --roll-height:1.1em;
  display:block;
  height:var(--roll-height);
  overflow:hidden;
}
.roll__line{
  display:block;
  height:var(--roll-height);
  line-height:var(--roll-height);
  white-space:nowrap;
  transition:transform .5s var(--ease-roll), color .35s ease;
}

/* Heading reveal. Every major heading is split into one mask per word and the
   word rises into place from below. The mask has to reach past the baseline or
   descenders (g, y, p) sit clipped at rest — hence the padding/margin pair.
   main.js owns the timing; this owns the shape. */
.reveal-mask{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  padding-bottom:.16em;
  margin-bottom:-.16em;
}
.reveal-mask__inner{
  display:inline-block;
  will-change:transform;
}

/* .btn — the single button in the system. Replaces the old gooey button,
   which needed an SVG filter (expensive repaint) and a bespoke markup
   shape. This is a plain pill, themed through custom properties. */
.btn{
  --btn-bg:var(--color-ink);
  --btn-fg:var(--greenish-black);
  --btn-bg-hover:var(--color-warm);
  --btn-fg-hover:var(--greenish-black);
  --btn-border:transparent;
  --btn-border-hover:var(--color-warm);

  position:relative;
  display:inline-flex;
  align-items:center;
  gap:16px;
  padding:17px 30px;
  border:1px solid var(--btn-border);
  border-radius:999px;
  cursor:pointer;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.btn:hover{
    background:var(--btn-bg-hover);
    color:var(--btn-fg-hover);
    border-color:var(--btn-border-hover);
  }
.btn:hover .roll__line{ transform:translateY(calc(var(--roll-height) * -1)) }
/* outlined — sits on dark without a filled slab, fills on hover */
.btn.btn--outline{
    --btn-bg:transparent;
    --btn-fg:var(--color-ink);
    --btn-border:var(--color-line);
  }
/* ghost — never fills. Border and label are the whole button, hover only
     brightens them. Used for the drawer close. */
.btn.btn--ghost{
    --btn-bg:transparent;
    --btn-fg:var(--color-ink);
    --btn-border:var(--color-line);
    --btn-bg-hover:transparent;
    --btn-fg-hover:var(--color-warm);
    --btn-border-hover:var(--color-warm);
  }
/* compact — header bar */
.btn.btn--small{
    gap:12px;
    padding:12px 22px;
    font-size:11px;
    letter-spacing:.18em;
  }
@media (max-width:700px){
.btn.btn--small{ gap:9px; padding:11px 16px; font-size:10px
  } }
.btn__icon{
  display:inline-flex;
  align-items:center;
  font-style:normal;
  font-size:15px;
}
/* The icon is either a character or a symbol from the sprite. When it is a
     symbol it takes its colour and size from the button, so one rule covers
     every variant and hover state without repeating itself. */
.btn__icon svg{
    display:block;
    width:1.2em;
    height:1.2em;
    fill:none;
    stroke:currentColor;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
  }


/* =========================================================================
   04  BACKGROUND PATTERNS
   The page is pure black with a fine grid (see .page-shell). These are the
   checkerboard accents that occupy the genuinely empty areas — the void to
   the right of a left-aligned heading, and the band under the FAQ.

   They are bounded blocks with a hairline edge, not faded washes, so they
   read as a deliberate swatch rather than a smudge. All decorative, all
   aria-hidden, none of them affect layout (absolute + pointer-events:none).
   ========================================================================= */
/* a full-width band of checks, used as a section divider */
.pattern-band{
  height:clamp(56px,7vw,96px);
  border-top:1px solid var(--color-hairline);
  border-bottom:1px solid var(--color-hairline);
  background-image:var(--pattern-checks);
  pointer-events:none;
}


/* =========================================================================
   05  PRELOADER  (home page only)
   ========================================================================= */
.preloader{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--black);
  contain:layout paint;
}

/* The curtain is the grid itself: every tile is opaque black with a hairline
   on two edges, so together they read as one black screen ruled into boxes.
   They fade in to draw the grid, then fade out one by one to dissolve it.
   Opacity only, and main.js removes the nodes once it is done. */
.preloader__grid{
  position:absolute;
  inset:0;
  display:grid;
  pointer-events:none;
}
.preloader__tile{
  background:var(--black);
  /* right + bottom only: a full inset ring would double every shared edge */
  border-right:1px solid rgba(232,230,231,.07);
  border-bottom:1px solid rgba(232,230,231,.07);
}

.preloader__brand{
  position:relative;
  z-index:2;
  padding:0 6vw;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(19px,3.2vw,38px);
  letter-spacing:.02em;
  text-transform:uppercase;
  text-align:center;
  color:var(--color-ink);
}
.preloader__counter{
  position:absolute;
  z-index:2;
  right:4vw;
  bottom:3vh;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(64px,12vw,170px);
  line-height:.8;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--color-ink);
}

/* The counter is three rolling columns rather than replaced text. Each
   column is a strip of 0-9 that slides; only a transform changes, so the
   browser never re-lays-out the page while it counts. */
.preloader__digit{
  display:inline-block;
  height:1em;
  overflow:hidden;
  vertical-align:top;
}
.preloader__digit i{
    display:block;
    height:1em;
    font-style:normal;
  }
.preloader__digit-strip{
  display:block;
  will-change:transform;
}


/* =========================================================================
   06  PAGE SHELL
   The drawer tilts the whole page like a slab: .page-stage supplies the
   perspective, .page-shell is the thing that rotates.
   ========================================================================= */
.page-stage{
  position:relative;
  z-index:1;
}
html.is-drawer-open .page-stage{
    position:fixed;
    inset:0;
    height:100dvh;
    overflow:hidden;

    /* No background here. This box covers the whole window and now sits ON
       TOP of the drawer, so an opaque fill would paint straight over the
       menu. The backdrop behind the tilted slab is the page background on
       <html>, which is the same colour anyway. */
    perspective:var(--drawer-perspective);
    perspective-origin:50% 50%;

    /* While open this box covers the whole window, including the part of
       the drawer now showing through the gap. Letting clicks pass means the
       menu underneath stays usable; .page-scrim switches them back on for
       itself so tapping the tilted page still closes the drawer. */
    pointer-events:none;
  }

.page-shell{
  position:relative;
  min-height:100vh;
  /* pure black, with a fine grid so the empty areas have structure.
     Sections below sit transparent so the grid runs straight through. */
  background-color:var(--color-surface);
  /* background-image:var(--pattern-grid); */
  transform-origin:left center;
  /* A fixed attachment forces the browser to repaint the background on
     every scroll frame. Desktops absorb that; cheap phones do not, and it
     is the single most expensive thing on the page. */
  background-attachment:fixed;
}

@media (max-width:900px), (hover:none){

.page-shell{
    background-attachment:scroll
}
  }

.page-shell{
  isolation:isolate;
}

html.is-drawer-open .page-shell{ height:100%; min-height:0; overflow:hidden }

.page-content{ position:relative }

/* click-catcher that dims the page while the drawer is open */
.page-scrim{
  position:absolute;
  inset:0;
  z-index:9;
  background:var(--black);
  opacity:0;
  pointer-events:none;
}
.page-scrim.is-active{ pointer-events:auto; cursor:pointer }
/* the drawer's own close button and links live outside this scrim */
html.is-drawer-open .page-scrim{ pointer-events:auto }


/* =========================================================================
   07  SITE HEADER
   One fixed bar: logo left, actions right. No mix-blend-mode — the page is
   dark end to end, so the difference blend bought nothing while forcing the
   bar to be split into two separately positioned pieces.
   ========================================================================= */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:30;
  color:var(--color-ink);
  border-bottom:1px solid transparent;
  transition:background .4s ease, border-color .4s ease;
}
/* frosted once the page has moved, so the bar survives light imagery */
.site-header.is-stuck{
    background:#000;
    /* -webkit-backdrop-filter:blur(12px); */
    /* backdrop-filter:blur(12px); */
    /* border-bottom-color:var(--color-hairline); */
  }
/* the drawer turns the page into a fixed slab; the bar rides along with it */
html.is-drawer-open .site-header{
    position:absolute;
    background:none;
    border-bottom-color:transparent;
    backdrop-filter:none;
  }

.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:var(--header-height);
  padding:0 28px;
}

@media (max-width:700px){

.site-header__inner{ padding:0 18px
} }

.site-header__logo{
  display:block;
  max-width:180px;
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--color-ink);
}

.site-header__logo img{ width:100% }

@media (max-width:700px){

.site-header__logo{ max-width:132px
} }

.site-header__actions{
  display:flex;
  align-items:center;
  gap:14px;
}


/* =========================================================================
   08  MENU TOGGLE
   Both words live in one clipped column that slides exactly its own height,
   so nothing can fall out of the mask.
   ========================================================================= */
.menu-toggle{
  position:relative;
  height:48px;
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:0 24px;
  background:transparent;
  color:var(--color-ink);
  border:1px solid rgba(232,230,231,.32);
  border-radius:999px;
  cursor:pointer;
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  transition:border-color .3s ease;
}
.menu-toggle:hover{ border-color:rgba(232,230,231,.7) }
/* open: roll to "Close", bars become an X */
.menu-toggle.is-open .roll__line{ transform:translateY(calc(var(--roll-height) * -1)) }
.menu-toggle.is-open .menu-toggle__bars i:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.menu-toggle.is-open .menu-toggle__bars i:nth-child(2){ opacity:0; transform:scaleX(.2) }
.menu-toggle.is-open .menu-toggle__bars i:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }
@media (max-width:700px){
.menu-toggle{ height:42px; gap:10px; padding:0 16px; letter-spacing:.16em
} }

.menu-toggle__bars{
  position:relative;
  display:block;
  width:16px;
  height:14px;
}

.menu-toggle__bars i{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    border-radius:1px;
    background:currentColor;
    transition:transform .4s var(--ease-roll), opacity .2s ease;
  }

.menu-toggle__bars i:nth-child(1){ top:0 }

.menu-toggle__bars i:nth-child(2){ top:6px }

.menu-toggle__bars i:nth-child(3){ top:12px }


/* =========================================================================
   09  NAV DRAWER
   ========================================================================= */
.nav-drawer{
  position:fixed;
  top:0;
  right:0;
  z-index:0;            /* below .page-stage, which is 1 */
  height:100dvh;
  width:var(--drawer-width);
  max-width:100vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:44px;
  padding:56px 48px;
  color:var(--color-ink);
  overflow-y:auto;
  overscroll-behavior:contain;

  /* The drawer sits BEHIND the page, always. The slab tilts away to reveal
     it and slides back to cover it, so closing reads as the page returning
     over the top rather than the menu dissolving in front of it. */
  pointer-events:none;
}
html.is-drawer-open .nav-drawer{ pointer-events:auto }
@media (max-width:700px){
.nav-drawer{ padding:44px 24px; gap:30px
} }

/* logo and close share one row, baseline-aligned to each other */
.nav-drawer__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.nav-drawer__brand{
  display:block;
  flex:none;
  max-width:150px;
}
.nav-drawer__brand img{ width:100% }
@media (max-width:700px){
.nav-drawer__brand{ max-width:124px
} }

.nav-drawer__menu{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.nav-drawer__menu a{
    display:block;
    padding:8px 0;
    font-family:var(--font-display);
    font-size:clamp(24px,4.2vw,40px);
    font-weight:700;
    line-height:1.1;
    letter-spacing:-.03em;
    color:var(--color-ink);
    transition:color .25s ease;
  }

.nav-drawer__menu a:hover,
    .nav-drawer__menu a[aria-current="page"]{ color:var(--color-accent) }

.nav-drawer__social{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  font-family:var(--font-ui);
  font-size:13px;
}

.nav-drawer__social a{
    opacity:.7;
    transition:color .25s ease, opacity .25s ease;
  }

.nav-drawer__social a:hover{ color:var(--color-accent); opacity:1 }


/* =========================================================================
   10  HERO
   ========================================================================= */
.hero-screen{
  height:100svh;
  display:flex;
  flex-direction:column;
}

.hero{
  position:relative;
  flex:1 1 auto;
  /* full width of the page box, NOT 100vw — with scrollbar-gutter:stable,
     100vw is wider than the content box and leaves a bare strip on the right */
  width:100%;
  height:100svh;
  /* overflow-y:hidden; */
}

/* When the shader is skipped — a low-powered phone, or reduced motion —
     the hero still needs its picture, so the same photograph the shader
     would have distorted is used as a plain background. inc/customizer-css
     supplies the url. The flat scrim keeps the headline readable on it. */

.hero.is-static-hero{
    background-image:var(--hero-image);
    background-size:cover;
    background-position:center;
  }

.hero.is-static-hero::after{
      content:"";
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.5);
      pointer-events:none;
    }

/* three.js sizes the drawing buffer only (updateStyle:false), so the element
     itself must be stretched or a <canvas> falls back to its intrinsic width */

.hero canvas{
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
    display:block;
  }

/* vignette that keeps the headline readable over any frame of the shader */

.hero::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:radial-gradient(120% 78% at 50% 50%,
      rgba(0,0,0,.74) 0%, rgba(0,0,0,.46) 42%, rgba(0,0,0,0) 78%);
  }

.hero__ui{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  padding:clamp(1.1rem,3vw,2rem);
  will-change:transform;
}

.hero__type{
  width:min(1180px,92vw);
  text-align:center;
  transform:translateZ(0);
}

.hero__headline{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.3rem,8.6vw,8.2rem);
  line-height:.92;
  letter-spacing:-.045em;
  text-transform:uppercase;
  color:var(--color-ink);
}

/* one masked row per line — characters rise out of it on entrance */
.hero__headline-line{
  display:block;
  overflow:hidden;
  padding-bottom:.04em;
}
.hero__headline-line-inner{
  display:block;
  perspective:800px;
  will-change:transform;
}
.hero__char{
  display:inline-block;
  backface-visibility:hidden;
  will-change:transform,opacity;
}

/* the rotating end word */
.hero__word-slot{
  display:inline-block;
  height:.92em;
  overflow:hidden;
  vertical-align:bottom;
  text-align:left;
}
.hero__word-roll{ display:block; will-change:transform }
.hero__word{
  display:block;
  height:.92em;
  line-height:.92;
  white-space:nowrap;
  color:var(--color-accent);
}


/* =========================================================================
   11  HERO TICKER
   Two crossed bars. The wrapper is only a positioning box — both bars are
   over-wide and rotate about their own centre, so the tilted ends always run
   off screen instead of leaving triangular gaps at the edges.
   ========================================================================= */
.hero-ticker{
  margin-top:25px;
  --ticker-height:clamp(52px,7.2vh,78px);
  --ticker-tilt:1.6deg;
  z-index:3;
  pointer-events:none;
  user-select:none;

  /* The wrapper is a zero-height marker: both bars are absolute, so they add
     nothing to the flow. It still has to be the thing they are positioned
     against. Until now that happened by accident — GSAP leaves a transform
     here during the hero entrance, and a transform makes an element the
     containing block for absolute children. If that animation is ever skipped
     the bars would jump to the page instead. Saying position:relative makes
     the same result deliberate. */
  position:relative;
  height:0;

  /* The bars are 112% wide on purpose, so their tilted ends run off screen
     instead of leaving triangular gaps at the edges. That overhang used to
     widen the document and let the whole page scroll sideways on a phone.

     `clip` on one axis only is the reason this works: it trims the sideways
     overhang while leaving the vertical axis visible, so the rotated bars —
     including the one behind — are still drawn in full. `hidden` cannot do
     this. Pairing `hidden` with `visible` is not allowed by CSS, the visible
     axis silently becomes `auto`, and the zero height then clips both bars
     away completely. */
  overflow-x:clip;
  overflow-y:visible;
}
@media (max-width:700px){
.hero-ticker{ --ticker-height:46px; --ticker-tilt:2.2deg 
}}

/* decorative bar behind, tilted the opposite way */
.hero-ticker__shadow,
.hero-ticker__bar{
  position:absolute;
  left:-6%;
  right:-6%;
  top:50%;
  height:var(--ticker-height);
}
.hero-ticker__shadow{
  background:var(--color-accent);
  transform:translateY(-50%) rotate(var(--ticker-tilt));
}
.hero-ticker__bar{
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--color-warm);
  color:var(--greenish-black);
  transform:translateY(-50%);
}

.hero-ticker__row{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  white-space:nowrap;
  will-change:transform;
}
.hero-ticker__item{
  display:inline-flex;
  align-items:center;
  gap:clamp(18px,2.6vw,38px);
  padding-right:clamp(18px,2.6vw,38px);
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(15px,1.9vw,24px);
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.hero-ticker__item i{
    font-style:normal;
    font-size:.6em;
    color:var(--color-accent);
    transform:translateY(-.04em);
  }


/* =========================================================================
   12  CAPABILITIES
   Bento grid of the six disciplines. Card spans vary so the grid reads as a
   composition rather than a table, and every card carries a small abstract
   visual built out of divs — no extra image requests.
   ========================================================================= */
.capabilities{
  position:relative;
  overflow:hidden;
  padding:clamp(90px,15vh,180px) max(24px,6vw) clamp(70px,12vh,140px);
}

.capabilities__inner{
  position:relative;
  z-index:1;
  max-width:var(--inner-container-width);
  margin:0 auto;
}

.capabilities__head{ max-width:860px }

.capabilities__lead{
  margin:clamp(22px,3vw,32px) 0 0;
  max-width:56ch;
  font-size:clamp(.92rem,1.25vw,1.06rem);
  line-height:1.75;
  color:var(--color-muted);
}

.capabilities__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,1.6vw,22px);
  margin-top:clamp(44px,7vh,80px);
}

@media (min-width:768px){

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

@media (min-width:1024px){

.capabilities__grid{ grid-template-columns:repeat(3,minmax(0,1fr))
} }

.capability-card{
  display:flex;
  flex-direction:column;
  min-height:320px;
  padding:clamp(22px,2.2vw,30px);
  overflow:hidden;
  border:1px solid var(--color-hairline);
  border-radius:22px;
  background:#0D0D0D;
  transition:transform .5s var(--ease-out-soft), border-color .5s ease, background-color .5s ease;
}

.capability-card:hover{
    transform:translateY(-6px);
    border-color:rgba(232,230,231,.2);
    background:rgba(232,230,231,.055);
  }

.capability-card:hover .capability-card__icon{ transform:rotate(-6deg) scale(1.08) }

.capability-card:hover .capability-card__arrow{ opacity:1; transform:none; color:var(--color-warm) }

/* the wide cards are what stop the grid reading as a plain 3-up */

@media (min-width:768px){

.capability-card.capability-card--wide{ grid-column:span 2
  } }

.capability-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

.capability-card__icon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:14px;
  color:var(--greenish-black);
  box-shadow:0 12px 24px rgba(0,0,0,.45);
  transition:transform .5s var(--ease-out-soft);
}

.capability-card__icon svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

/* three flat tints, cycled down the grid — one per brand colour */

.capability-card__icon.capability-card__icon--crimson{ background:var(--color-accent); color:var(--pearl) }

.capability-card__icon.capability-card__icon--orange{ background:var(--color-warm); color:var(--greenish-black) }

.capability-card__icon.capability-card__icon--pearl{ background:var(--pearl); color:var(--greenish-black) }

.capability-card__arrow{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:var(--color-faint);
  opacity:0;
  transform:translate(-4px,4px);
  transition:opacity .5s var(--ease-out-soft), transform .5s var(--ease-out-soft), color .5s ease;
}

.capability-card__title{
  margin:clamp(20px,2.4vw,26px) 0 0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.1rem,1.7vw,1.4rem);
  letter-spacing:-.02em;
  color:var(--color-ink);
}

.capability-card__text{
  margin:12px 0 0;
  font-size:14px;
  line-height:1.7;
  color:var(--color-muted);
}

/* every visual is pushed to the bottom of its card */
.capability-card__visual{ margin-top:auto; padding-top:32px }

/* --- identity: colour chips + a type specimen --- */
.capability-visual--identity{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.capability-swatches{ display:flex; gap:8px }
.capability-swatch{
  width:32px;
  height:32px;
  border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(232,230,231,.15);
  transition:transform .3s ease;
}
.capability-card:hover .capability-swatch{ transform:translateY(-4px) }
.capability-visual__note{
  margin:10px 0 0;
  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--color-faint);
}
.capability-specimen{
  margin:0;
  font-family:var(--font-display);
  font-weight:300;
  font-size:3.6rem;
  line-height:1;
  color:var(--color-warm);
}

/* --- social: four content tiles --- */
.capability-visual--social{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.capability-tile{
  display:grid;
  place-items:center;
  aspect-ratio:1;
  border-radius:8px;
  background:var(--color-lift-strong);
  box-shadow:inset 0 0 0 1px var(--color-line);
  color:var(--color-ink);
  transition:background .3s ease;
}
.capability-tile svg{
    width:14px;
    height:14px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
.capability-tile:hover{ background:var(--color-accent); color:var(--color-ink) }

/* --- motion: a phone and a waveform --- */
.capability-visual--motion{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.capability-phone{
  position:relative;
  display:grid;
  place-items:center;
  width:64px;
  height:96px;
  border-radius:12px;
  background:var(--color-lift-strong);
  box-shadow:inset 0 0 0 1px rgba(232,230,231,.12);
}
.capability-phone svg{ width:20px; height:20px; fill:currentColor; stroke:none; color:var(--color-ink) }
.capability-phone__progress{
  position:absolute;
  inset-inline:8px;
  bottom:8px;
  height:2px;
  border-radius:999px;
  background:rgba(232,230,231,.15);
  overflow:hidden;
}
.capability-phone__progress i{
    display:block;
    height:100%;
    width:100%;
    background:var(--color-warm);
    transform-origin:left center;
    animation:capability-progress 2.6s ease-in-out infinite;
  }
@keyframes capability-progress{ 0%{ transform:scaleX(0) } 70%,100%{ transform:scaleX(1) } }
.capability-wave{
  display:flex;
  flex:1;
  align-items:flex-end;
  justify-content:space-between;
  gap:6px;
  height:64px;
}
.capability-wave i{
    width:100%;
    height:100%;
    border-radius:999px;
    background:var(--color-accent);
    transform-origin:bottom;
    animation:capability-wave 1.6s ease-in-out infinite;
  }
@keyframes capability-wave{
  0%,100%{ transform:scaleY(.35) }
  50%    { transform:scaleY(1) }
}

/* --- web: a browser chrome mock --- */
.capability-browser{
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 0 0 1px rgba(232,230,231,.12);
}
.capability-browser__bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  background:rgba(232,230,231,.06);
}
.capability-browser__dot{ width:8px; height:8px; border-radius:50% }
.capability-browser__url{
  flex:1;
  height:14px;
  margin-left:8px;
  border-radius:999px;
  background:rgba(232,230,231,.07);
}
.capability-browser__body{
  display:grid;
  gap:10px;
  padding:16px;
  background:rgba(232,230,231,.02);
}
.capability-browser__nav{ display:flex; justify-content:space-between }
.capability-browser__line{
  display:block;
  height:8px;
  border-radius:999px;
  background:rgba(232,230,231,.12);
}
.capability-browser__headline{
  display:block;
  width:75%;
  height:14px;
  border-radius:999px;
  background:var(--color-accent);
}
.capability-browser__buttons{ display:flex; gap:8px; padding-top:4px }
.capability-browser__btn{
  width:64px;
  height:20px;
  border-radius:999px;
  background:var(--color-ink);
}
.capability-browser__btn.capability-browser__btn--ghost{
    background:rgba(232,230,231,.12);
    box-shadow:inset 0 0 0 1px rgba(232,230,231,.15);
  }

/* --- seo: a chart that grows on hover --- */
.capability-chart{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
  height:90px;
}
/* Each bar grows from the baseline. --i is the bar's position, set in the
     template, and it staggers the start so the chart draws left to right
     rather than all at once.

     The state is a class rather than :hover, because the chart has to play
     when it scrolls into view as well — and a class can be taken off and put
     back to replay it, which :hover cannot. */
.capability-chart i{
    width:100%;
    border-radius:6px 6px 0 0;
    background:var(--color-green);
    transform:scaleY(0);
    transform-origin:bottom;
    transition:transform .8s var(--ease-out-soft);
    transition-delay:calc(var(--i, 0) * 70ms);
  }
.capability-chart.is-charted i{ transform:scaleY(1) }
/* reduced motion: no growing, just show the finished chart */
@media (prefers-reduced-motion:reduce){
    .capability-chart i{ transform:scaleY(1); transition:none }
  }
.capability-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(53,192,122,.1);
  box-shadow:inset 0 0 0 1px rgba(53,192,122,.28);
  font-size:12px;
  font-weight:600;
  color:var(--color-green);
}
.capability-chip svg{
    width:14px;
    height:14px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

/* --- campaigns: two overlapping placards --- */
.capability-visual--campaign{ position:relative; height:112px }
.capability-placard{
  position:absolute;
  top:12px;
  left:0;
  width:58%;
  height:80px;
  padding:12px;
  border-radius:12px;
  background:rgba(232,230,231,.05);
  box-shadow:inset 0 0 0 1px var(--color-line);
  transform:rotate(-3deg);
  transition:transform .5s var(--ease-out-soft);
}
.capability-card:hover .capability-placard{ transform:rotate(0) }
.capability-placard b{
    display:block;
    height:8px;
    width:66%;
    border-radius:999px;
    background:rgba(232,230,231,.22);
  }
.capability-placard i{
    display:block;
    height:6px;
    width:50%;
    margin-top:8px;
    border-radius:999px;
    background:rgba(232,230,231,.12);
  }
.capability-placard.capability-placard--accent{
    top:0;
    left:auto;
    right:0;
    background:var(--color-accent);
    box-shadow:inset 0 0 0 1px rgba(232,230,231,.16);
    transform:rotate(2deg);
  }
.capability-placard.capability-placard--accent h4{
      margin:0;
      font-family:var(--font-display);
      font-size:12px;
      font-weight:700;
      letter-spacing:.05em;
      color:var(--color-ink);
    }
.capability-placard.capability-placard--accent i{ background:rgba(232,230,231,.28) }


/* =========================================================================
   13  SERVICES INTRO
   The heading block that introduces the pinned card stack below it.
   ========================================================================= */
.services-intro{
  
	max-width:var(--inner-container-width);
	margin:0 auto;
}
@media (mmax-width:1750px){
.services-intro{
		padding:20vh max(24px,6vw)
}
	}
.services-intro__text{
  margin:clamp(24px,3.4vw,38px) 0 0;
  max-width:56ch;
  font-size:clamp(.92rem,1.25vw,1.06rem);
  line-height:1.75;
  color:var(--color-muted);
}


/* =========================================================================
   14  SERVICES STACK
   Cards stack up as the section scrolls; each one lifts and dims the pile
   underneath it. The viewport is what gets pinned.
   ========================================================================= */
.services-stack{ position:relative }

.services-stack__viewport{
  position:relative;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.services-stack__deck{
  position:relative;
  width:var(--service-card-width);
  height:var(--service-card-height);
  margin-top:var(--service-stack-offset);
  perspective:1400px;
}

.services-stack__counter{
  position:absolute;
  right:max(20px,4vw);
  bottom:24px;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.18em;
  opacity:.5;
}

/* Each card carries its own palette via --card-surface / --card-ink,
   set inline in the markup. */
.service-card{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  border-radius:18px;
  overflow:hidden;
  background:var(--card-surface);
  color:var(--card-ink);
  box-shadow:0 40px 80px -28px rgba(0,0,0,.8);
  will-change:transform;
  contain:layout paint;
}

.service-card__meta{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:38px;
  padding:0 clamp(18px,3vw,28px);
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-bottom:1px solid color-mix(in srgb, var(--card-ink) 16%, transparent);
}

.service-card__meta b{ font-weight:400; opacity:.55 }

.service-card__body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
  padding:clamp(20px,4vw,42px) clamp(18px,3vw,28px);
}

.service-card__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(32px,6vw,72px);
  line-height:.9;
  letter-spacing:-.04em;
  text-transform:uppercase;
}

.service-card__text{
  margin:0;
  max-width:44ch;
  font-size:clamp(14px,1.7vw,17px);
  line-height:1.5;
  opacity:.8;
}

.service-card__spec{
  margin:0;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.6;
}

/* darkens a card as later cards land on top of it */
.service-card__veil{
  position:absolute;
  inset:0;
  background:var(--black);
  opacity:0;
  pointer-events:none;
  border-radius:inherit;
}


/* =========================================================================
   15  BELIEFS
   ========================================================================= */
.beliefs{
  position:relative;
  padding:18vh max(24px,6vw) 16vh;
}
.beliefs__inner{ max-width:var(--inner-container-width); margin:0 auto }

.beliefs__heading{
  margin:20px 0 0;
  max-width:17ch;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2rem,5.8vw,4.8rem);
  line-height:1.06;
  letter-spacing:-.03em;
  color:var(--color-ink);
}

/* the shared heading reveal supplies the word masks; this only colours them */

.beliefs__heading em{ font-style:normal }

.beliefs__heading em .reveal-mask__inner{ color:var(--color-accent) }

.beliefs__columns{
  margin-top:7vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(22px,4vw,64px);
}

@media (max-width:820px){

.beliefs__columns{ grid-template-columns:1fr
} }
.beliefs__column{
  margin:0;
  font-size:clamp(.95rem,1.25vw,1.08rem);
  line-height:1.75;
  color:var(--color-muted);
}

.beliefs__rule{
  margin:9vh 0 0;
  height:1px;
  background:var(--color-hairline);
  transform:scaleX(0);
  transform-origin:left center;
}

.beliefs__list{ margin:0; padding:0; list-style:none }

.beliefs__row{
  display:grid;
  grid-template-columns:auto minmax(0,300px) 1fr;
  align-items:baseline;
  gap:clamp(16px,3vw,44px);
  padding:1.5rem 0;
  border-bottom:1px solid var(--color-hairline);
}

@media (max-width:820px){

.beliefs__row{ grid-template-columns:auto 1fr; row-gap:6px
} }

.beliefs__index{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.1rem,2vw,1.6rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--color-accent);
  font-variant-numeric:tabular-nums;
}

.beliefs__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.1rem,2.2vw,1.7rem);
  letter-spacing:-.02em;
  color:var(--color-ink);
}

.beliefs__detail{
  max-width:46ch;
  font-family:var(--font-ui);
  font-size:clamp(.85rem,1.15vw,1rem);
  line-height:1.6;
  color:var(--color-muted);
  justify-self:end;
  text-align:right;
}

@media (max-width:820px){

.beliefs__detail{ grid-column:2; justify-self:start; text-align:left
} }


/* =========================================================================
   16  WORK PAIR
   Two frames that morph from tall slivers into landscape plates, then split.
   ========================================================================= */
.work-pair{ position:relative }

.work-pair__viewport{
  position:relative;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.work-pair__deck{
  position:relative;
  width:min(1150px,92vw);
  height:100%;
}

.work-pair__frame{
  position:absolute;
  left:50%;
  top:50%;
  margin:0;
  overflow:hidden;
  border-radius:8px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  will-change:transform,width,height;
}

/* A 90px blur recomputed while the frame is also resizing is far too much
     for a phone GPU. The shadow is decoration, so it goes. */

@media (max-width:900px), (hover:none){

.work-pair__frame{
    box-shadow:0 18px 30px -18px rgba(0,0,0,.8)
}
  }

.work-pair__frame{
  contain:layout paint;
}

.work-pair__frame img,
  .work-pair__frame video{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
  }

.work-pair__frame.work-pair__frame--front{ z-index:2 }

/* A frame holds either a photograph or a silent looping video. Both are
     cropped from the centre, which is what makes the tall "reel" stage show
     the middle of the shot rather than the top of it. */

.work-pair__frame.work-pair__frame--back{ z-index:1 }

.work-pair__label{
  position:absolute;
  z-index:3;
  margin:0;
  font-family:var(--font-ui);
  font-size:12px;
  line-height:1.6;
  letter-spacing:.02em;
  opacity:.55;
}

.work-pair__label.work-pair__label--lead{
    top:clamp(1.2rem,4vw,2.4rem);
    left:clamp(1.2rem,4vw,2.4rem);
  }

.work-pair__label.work-pair__label--lead b{ font-weight:400; opacity:.6; margin-right:.5em }

.work-pair__label.work-pair__label--trail{
    right:clamp(1.2rem,4vw,2.4rem);
    bottom:clamp(1.2rem,4vw,2.4rem);
    text-align:right;
  }


/* =========================================================================
   17  WORK SHOWCASE
   A 3D ring of project cards driven by scroll, drag and the arrow buttons.
   ========================================================================= */
.work-showcase{
  position:relative;
  height:100svh;
  overflow:hidden;
  /* stays opaque: this section is pinned, so anything transparent would let
     the rest of the document show through while it is held in place */
  background-color:var(--color-bg);
  /* background-image:var(--pattern-grid); */
  color:var(--color-ink);
  font-family:var(--font-body);
}

/* outlined project name sitting behind the ring */
.work-showcase__ghost{
  position:absolute;
  left:50%;
  top:54%;
  z-index:1;
  pointer-events:none;
  user-select:none;
}
.work-showcase__ghost-text{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(80px,21vw,260px);
  line-height:1;
  letter-spacing:-.02em;
  text-transform:uppercase;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(232,230,231,.13);
}

.work-showcase__head{
  position:absolute;
  top:clamp(86px,12vh,140px);
  left:5vw;
  right:5vw;
  z-index:10;
  pointer-events:none;
}
.work-showcase__eyebrow{
  margin-bottom:18px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-muted);
}
.work-showcase__title{
  margin:0;
  overflow:hidden;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(42px,8vw,124px);
  line-height:.92;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.work-showcase__title sup{ font-size:.28em; color:var(--color-accent) }
.work-showcase__title-inner{ display:inline-block; will-change:transform }

.work-showcase__intro{
  margin-top:18px;
  max-width:420px;
  font-size:12px;
  line-height:1.6;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--color-muted);
}

@media (max-width:720px){

.work-showcase__intro{ display:none
} }

/* pan-y keeps native vertical scrolling on phones; horizontal is ours to drag */
.work-carousel{
  position:absolute;
  inset:0;
  z-index:2;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.work-carousel__tilt{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}
.work-carousel__ring{
  position:absolute;
  left:50%;
  top:54%;
  transform-style:preserve-3d;
  will-change:transform;
}

/* one slot per card, rotated around the ring */
.work-card-slot{
  position:absolute;
  left:50%;
  top:50%;
  transform-style:preserve-3d;
  will-change:transform;
}

.work-card{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--work-card-width);
  height:var(--work-card-height);
  border-radius:20px;
  overflow:hidden;
  background:var(--color-deep);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
  backface-visibility:hidden;
  will-change:transform;
  /* the whole card is drag surface — only the open button takes a click */
  pointer-events:none;
}

/* only the card facing the viewer accepts the pointer; rotated neighbours
     sit in the same screen space and would otherwise swallow the click */

.work-card.is-live .work-card__open{
    pointer-events:auto;
    cursor:pointer;
  }

.work-card.is-live .work-card__open:hover,
    .work-card.is-live .work-card__open:focus-visible{
      background:var(--color-accent);
      border-color:var(--color-accent);
      color:var(--greenish-black);
/*       transform:rotate(45deg); */
      outline:none;
    }

.work-card.is-live .work-card__open:active{ transform:rotate(45deg) scale(.9) }

.work-card.is-live .work-card__open::before{
		  content:'';
		  display:block;
		  position:absolute;
		  inset:0;
		  width:960px;
		  height:auto;
		  aspect-ration:1/1;
		  left:-960px !important;
		  top:-960px !important;
/* 		  background:red !important; */
		  z-index:77 !important;
		  pointer-events:none !important;
	  }

.work-card__media{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
}

.work-card__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    backface-visibility:hidden;
    will-change:transform;
  }

.work-card__scrim{
  position:absolute;
  inset:0;
  /* kept: a legibility scrim over photography, not decoration.
     Reduced from two stacked fades to one. */
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.1) 52%,transparent 70%);
}

/* depth veil instead of a per-frame blur() — same read, none of the cost */
.work-card__depth{
  position:absolute;
  inset:0;
  background:var(--black);
  opacity:0;
  pointer-events:none;
  will-change:opacity;
}

.work-card__meta{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:clamp(18px,3vw,34px);
  backface-visibility:hidden;
  will-change:opacity;
}
.work-card__row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.work-card__tag{
  padding:8px 13px;
  border:1px solid var(--color-line);
  border-radius:99px;
  background:rgba(10,10,10,.4);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--color-muted);
}
.work-card__year{
  font-size:12px;
  letter-spacing:.14em;
  color:var(--color-muted);
  font-variant-numeric:tabular-nums;
}
.work-card__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(26px,3.6vw,48px);
  line-height:1;
  letter-spacing:-.02em;
}
.work-card__open{
  flex:none;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid var(--color-line);
  border-radius:50%;
  background:rgba(10,10,10,.8);
  pointer-events:none;
  touch-action:manipulation;
  transition:background .35s, color .35s, transform .35s, border-color .35s;

  /* above the card's scrim and meta row, so nothing sits over the target */
/*   position:relative; */
  z-index:3;
}
.work-card__open svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    pointer-events:none;   /* the button is the target, not the drawing */
  }
/* An invisible ring around the circle. A 52px target is the documented
     minimum and this card moves while you reach for it, so the catchable
     area is grown past the visible edge without moving anything. */
.work-card__open::after{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius:50%;
  }
@media (max-width:720px){
.work-card__open{
    width:46px;
    height:46px
}

    .work-card__open svg{ width:18px; height:18px }
    .work-card__open::after{ inset:-16px }
  }

/* --- heads-up display along the bottom --- */
.work-hud{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:10;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:0 5vw 5vh;
}
@media (max-width:720px){
.work-hud{ gap:12px
} }

.work-hud__counter{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-family:var(--font-display);
}

@media (max-width:720px){

.work-hud__counter{ gap:6px
} }
.work-hud__counter-value{
  font-size:clamp(30px,4.4vw,56px);
  font-weight:700;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
@media (max-width:720px){
.work-hud__counter-value{ font-size:26px
} }
.work-hud__counter-total{
  font-size:14px;
  color:var(--color-muted);
  font-variant-numeric:tabular-nums;
}
.work-hud__counter-label{
  margin-left:8px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-muted);
}
@media (max-width:720px){
.work-hud__counter-label{ display:none
} }

.work-hud__center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.work-hud__hint{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--color-muted);
}

.work-hud__hint::before{
    content:'';
    width:34px;
    height:1px;
    background:var(--color-muted);
    animation:work-hint-pulse 2s infinite;
  }

@media (max-width:720px){

.work-hud__hint{ display:none
} }
@keyframes work-hint-pulse{
  0%,100%{ transform:scaleX(1);  opacity:.9  }
  50%    { transform:scaleX(.4); opacity:.35 }
}

.work-hud__progress{
  width:min(30vw,320px);
  height:2px;
  background:var(--color-line);
  overflow:hidden;
}
.work-hud__progress-fill{
  width:100%;
  height:100%;
  background:var(--color-accent);
  transform:scaleX(0);
  transform-origin:0 50%;
}

.work-hud__nav{ display:flex; gap:10px }
.work-hud__nav-btn{
  width:54px;
  height:54px;
  border:1px solid var(--color-line);
  border-radius:50%;
  cursor:pointer;
  transition:background .35s, color .35s, border-color .35s, transform .15s;

  /* The button is the circle, so the icon inside is a bare arrow. Grid is
     what centres it exactly — a text arrow used to sit slightly high
     because glyphs carry their own line box. */
  display:grid;
  place-items:center;
  padding:0;
}
.work-hud__nav-btn svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
.work-hud__nav-btn:hover{ background:var(--color-accent); border-color:var(--color-accent); color:var(--greenish-black) }
.work-hud__nav-btn:active{ transform:scale(.92) }
@media (max-width:720px){
.work-hud__nav-btn{
    width:44px;
    height:44px
}

    .work-hud__nav-btn svg{ width:17px; height:17px }
  }


/* =========================================================================
   18  CASE STUDY OVERLAY
   A horizontal track of full-screen panels. Each .case-layer moves at its own
   speed for parallax; main.js writes the transforms.
   ========================================================================= */
.case-study{
  position:fixed;
  inset:0;
  z-index:400;
  display:none;
}
.case-study.is-open{ display:block }

/* the card image that flies up into a full-screen cover and back again */
.case-study__cover{
  position:fixed;
  overflow:hidden;
  border-radius:20px;
  background:var(--black);
  will-change:transform,width,height;
}
.case-study__cover img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    will-change:transform;
  }

.case-study__body{
  position:fixed;
  inset:0;
  background-color:var(--color-bg);
  /* background-image:var(--pattern-grid); */
}

/* touch-action:none — the overlay owns every gesture, both axes */
.case-study__viewport{
  position:absolute;
  inset:0;
  overflow:hidden;
  cursor:grab;
  touch-action:none;
  overscroll-behavior:contain;
  -webkit-tap-highlight-color:transparent;
}
.case-study__viewport.is-grabbing{ cursor:grabbing }

.case-study__track{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  display:flex;
  will-change:transform;
}

.case-study__close{
  position:absolute;
  top:26px;
  left:28px;
  z-index:30;
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 20px 9px 10px;
  border:1px solid var(--color-line);
  border-radius:99px;
  background:rgba(10,10,10,.55);
  cursor:pointer;
  transition:border-color .3s;
}

.case-study__close:hover{
    border-color:var(--color-accent);
  }

.case-study__close:hover .case-study__close-icon{ transform:rotate(135deg) }

@media (max-width:820px){

.case-study__close{ top:16px; left:16px; padding:7px 16px 7px 8px
} }
.case-study__close-icon{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--color-accent);
  color:var(--greenish-black);
  font-size:13px;
  font-weight:700;
  transition:transform .5s var(--ease-out-soft);
}
.case-study__close-label{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--color-ink);
}

.case-study__project{
  position:absolute;
  top:38px;
  right:5vw;
  z-index:30;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--color-muted);
}

@media (max-width:820px){

.case-study__project{ display:none
} }

.case-study__progress{
  position:absolute;
  left:5vw;
  right:5vw;
  bottom:34px;
  z-index:30;
  height:2px;
  background:var(--color-line);
  overflow:hidden;
}

@media (max-width:820px){

.case-study__progress{ bottom:22px
} }
.case-study__progress-fill{
  width:100%;
  height:100%;
  background:var(--color-accent);
  transform:scaleX(0);
  transform-origin:0 50%;
}

/* --- panels --- */
.case-panel{
  position:relative;
  flex:none;
  width:100vw;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}
/* story panel: copy beside a tall plate */
.case-panel.case-panel--story{
    display:grid;
    grid-template-columns:minmax(0,46vw) 1fr;
    align-items:center;
    gap:5vw;
    padding:12vh 5vw 0;
  }
@media (max-width:820px){
.case-panel.case-panel--story{
      grid-template-columns:1fr;
      align-content:center;
      gap:4vh;
      padding-top:16vh
  }
    }
/* detail panel: wide plate, then stats and service chips */
.case-panel.case-panel--detail{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5vh;
    padding:12vh 5vw 0;
  }
@media (max-width:820px){
.case-panel.case-panel--detail{ gap:3.5vh
  } }
/* outro panel: centred next-project call to action */
.case-panel.case-panel--outro{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4.5vh;
    padding:0 5vw;
    text-align:center;
  }

.case-layer{ will-change:transform }

.case-panel__index{
  position:absolute;
  top:38%;
  right:3vw;
  z-index:1;
  pointer-events:none;
  user-select:none;
  font-family:var(--font-display);
  font-weight:700;
  font-size:24vw;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(232,230,231,.09);
}

@media (max-width:820px){

.case-panel__index{ top:30%; font-size:40vw
} }

/* --- hero panel --- */
.case-hero__media{
  position:absolute;
  top:-8%;
  bottom:-8%;
  left:-22vw;
  right:-22vw;
}
.case-hero__media img{ width:100%; height:100%; object-fit:cover }
.case-hero__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.25) 45%,transparent 72%);
}
.case-hero__copy{
  position:absolute;
  left:5vw;
  bottom:10vh;
  z-index:3;
  max-width:84vw;
}
.case-hero__tag{
  display:inline-block;
  padding:9px 15px;
  border:1px solid var(--color-line);
  border-radius:99px;
  background:rgba(10,10,10,.45);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--color-ink);
}
.case-hero__title{
  margin:22px 0 0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(54px,10.5vw,170px);
  line-height:.9;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.case-hero__hint{
  margin-top:22px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--color-muted);
}

/* --- story panel --- */
.case-story__copy{ z-index:2 }
.case-story__eyebrow{
  margin-bottom:22px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--color-accent);
}
.case-story__title{
  margin-bottom:26px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(28px,3.6vw,54px);
  line-height:1.06;
  letter-spacing:-.02em;
}
.case-story__body p{
    margin-bottom:18px;
    max-width:54ch;
    font-size:15px;
    line-height:1.75;
    color:var(--color-muted);
  }
@media (max-width:820px){
.case-story__body p{ font-size:14px
  } }
/* second image: a full-height strip on the right edge of the panel, square corners */
.case-story__media{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:36vw;
}
.case-story__media .case-layer{ position:absolute; inset:0 }
.case-story__media img{ width:100%; height:100%; object-fit:cover; object-position:center; border-radius:0; display:block }
/* phones: the image sits behind the text, full panel, dimmed so the copy stays readable */
@media (max-width:820px){
.case-panel.case-panel--story{ padding-right:5vw }
.case-story__media{ top:0; right:0; bottom:0; left:0; width:auto; z-index:0 }
.case-story__media::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.58); pointer-events:none }
.case-story__copy{ position:relative; z-index:2 }
}

/* --- quote panel --- */
.case-quote__media{
  position:absolute;
  top:-8%;
  bottom:-8%;
  left:-22vw;
  right:-22vw;
}
.case-quote__media img{ width:100%; height:100%; object-fit:cover; object-position:65% 50% }
.case-quote__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 62%,rgba(0,0,0,.5) 100%);
}
.case-quote__copy{
  position:absolute;
  left:5vw;
  top:50%;
  z-index:3;
  max-width:640px;
  transform:translateY(-50%);
}
.case-quote__text{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(24px,3.2vw,44px);
  line-height:1.3;
  letter-spacing:-.01em;
}
.case-quote__text b{ font-weight:500; color:var(--color-accent) }
.case-quote__source{
  margin-top:22px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--color-muted);
}

/* --- detail panel --- */
.case-detail__media .case-layer{ position:relative; height:36vh; width:128%; margin-left:-14% }
.case-detail__media img{ width:100%; height:100%; object-fit:cover; border-radius:16px }
.case-detail__stats{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:7vw;
}
@media (max-width:820px){
.case-detail__stats{ gap:9vw
} }
.case-stat b{
    display:block;
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(34px,4.6vw,70px);
    line-height:1;
    letter-spacing:-.02em;
    color:var(--color-accent);
  }
.case-stat span{
    display:block;
    margin-top:10px;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--color-muted);
  }
.case-detail__services{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.case-detail__services span{
    padding:10px 17px;
    border:1px solid var(--color-line);
    border-radius:99px;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--color-muted);
  }

/* --- outro panel --- */
.case-outro__eyebrow{
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--color-muted);
}
.case-outro__next{
  font-family:var(--font-display);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.03em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .4s, letter-spacing .4s;
}
.case-outro__next:hover{ color:var(--color-accent); letter-spacing:-.015em }
.case-outro__link{
  padding-bottom:6px;
  border-bottom:1px solid var(--color-line);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:color .3s, border-color .3s;
}
.case-outro__link:hover{ color:var(--color-accent); border-color:var(--color-accent) }
/* the next-project name never leaves the screen: it scales to the width of the
   panel and wraps onto more lines, instead of running off the edge */
.case-panel--outro .case-outro__next{
  font-size:min(120px,13vw) !important;
  max-width:86vw;
  white-space:normal;
  overflow-wrap:break-word;
  text-align:center;
  line-height:.95;
}

/* no "View all our Works" button in the case study on the /work/ page itself */
body.page-template-page-work .case-outro__all{ display:none }

/* stack the outro items so the "View all our Works" button sits on its own line */
.case-panel--outro > .case-layer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3vh;
}


/* =========================================================================
   19  FAQ
   Two independent columns rather than one stacked list. Items flow in reading
   order (left, right, left…) and the grid uses align-items:start so opening
   one answer never stretches its neighbour.
   ========================================================================= */
.faq{
  padding:clamp(80px,13vh,150px) max(24px,6vw) clamp(80px,13vh,150px);
}
.faq__inner{ max-width:var(--inner-container-width); margin:0 auto }
.faq__head{ max-width:760px }
.faq__lead{
  margin:clamp(22px,3vw,32px) 0 0;
  max-width:54ch;
  font-size:clamp(.92rem,1.25vw,1.06rem);
  line-height:1.75;
  color:var(--color-muted);
}

.faq__grid{
  display:grid;
  grid-template-columns:1fr;
  align-items:start;             /* each item keeps its own height */
  gap:14px;
  margin-top:clamp(40px,6vh,64px);
}

@media (min-width:860px){

.faq__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px clamp(20px,2.4vw,32px)
}
  }

.faq__item{
  overflow:hidden;
  border:1px solid var(--color-hairline);
  border-radius:16px;
  background:rgba(232,230,231,.04);
  transition:border-color .5s ease, background-color .5s ease;
}

.faq__item:hover{ border-color:rgba(232,230,231,.18) }

.faq__item.is-open{
    border-color:color-mix(in srgb, var(--color-accent) 50%, transparent);
    background:rgba(232,230,231,.055);
  }

.faq__item.is-open .faq__question{ color:var(--color-ink) }

.faq__item.is-open .faq__icon{
      transform:rotate(45deg);
      background:var(--color-accent);
      color:var(--color-ink);
      box-shadow:none;
    }

.faq__item.is-open .faq__answer{ grid-template-rows:1fr; opacity:1 }

.faq__question{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px clamp(18px,2vw,24px);
  text-align:left;
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(.95rem,1.15vw,1.08rem);
  line-height:1.35;
  color:var(--color-ink);
  transition:color .3s ease;
}

.faq__icon{
  display:grid;
  place-items:center;
  flex:none;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(232,230,231,.06);
  box-shadow:inset 0 0 0 1px var(--color-line);
  color:var(--color-muted);
  transition:transform .5s var(--ease-out-soft), background-color .5s ease, color .5s ease;
}

.faq__icon svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.5;
    stroke-linecap:round;
  }

/* 0fr -> 1fr animates cleanly without measuring scrollHeight in JS */
.faq__answer{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .45s var(--ease-out-soft), opacity .35s ease;
}
.faq__answer > div{ overflow:hidden }
.faq__answer p{
    margin:0;
    padding:0 clamp(18px,2vw,24px) 22px;
    font-size:14px;
    line-height:1.7;
    color:var(--color-muted);
  }

.faq__help{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:clamp(30px,4.5vh,44px);
  padding:22px clamp(20px,2.4vw,28px);
  border:1px solid var(--color-hairline);
  border-radius:20px;
  background:rgba(232,230,231,.04);
  text-align:center;
}

.faq__help p{
    margin:0;
    font-size:14px;
    color:var(--color-muted);
  }

.faq__help p b{ color:var(--color-ink); font-weight:600 }

@media (min-width:640px){

.faq__help{ flex-direction:row; text-align:left
} }


/* =========================================================================
   20  CLIENT LIST
   ========================================================================= */
.client-list{
  padding:8vh max(24px,6vw);
  border-top:1px solid var(--color-hairline);
  overflow:hidden;
}
.client-list__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(22px,4vw,56px);
}
.client-list__item{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.4rem,3vw,2.6rem);
  letter-spacing:-.02em;
  white-space:nowrap;
  color:var(--color-ink);
  opacity:.35;
  transition:opacity .3s ease, color .3s ease;
}
.client-list__item:hover{ opacity:1; color:var(--color-accent) }


/* =========================================================================
   21  SERVICE INDEX  (services page)
   One row per service: index, name and description on the left, what you
   actually receive on the right. Flat colour only — the hover state swaps
   the row to Crimson rather than tinting it.
   ========================================================================= */
.service-index{
  padding:0 max(24px,6vw) clamp(80px,14vh,170px);
}
.service-index__inner{
  max-width:1240px;
  margin:0 auto;
  border-top:1px solid var(--color-hairline);
}

.service-index__row{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(18px,3.5vw,56px);
  padding:clamp(26px,3.6vw,46px) clamp(14px,2vw,26px);
  border-bottom:1px solid var(--color-hairline);
  transition:background-color .4s ease;
}

@media (hover:hover) and (pointer:fine){
    .service-index__row:hover{
      background:var(--color-lift);
    }

      .service-index__row:hover .service-index__number{ color:var(--color-warm) }
      .service-index__row:hover .service-index__title{ transform:translateX(clamp(4px,.6vw,10px)) }
  }

@media (max-width:860px){

.service-index__row{
    grid-template-columns:auto minmax(0,1fr);
    gap:12px 18px
}
  }

.service-index__number{
  font-family:var(--font-ui);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--color-faint);
  font-variant-numeric:tabular-nums;
  padding-top:.4em;
  transition:color .35s ease;
}

.service-index__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.3rem,2.6vw,2.1rem);
  line-height:1.08;
  letter-spacing:-.025em;
  color:var(--color-ink);
  transition:transform .45s var(--ease-out-soft);
}
.service-index__text{
  margin:14px 0 0;
  max-width:44ch;
  font-size:clamp(.88rem,1.1vw,.98rem);
  line-height:1.7;
  color:var(--color-muted);
}

@media (max-width:860px){

.service-index__detail{ grid-column:2
} }

/* what you receive */
.service-index__deliverables{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.service-index__deliverables li{
    padding:8px 14px;
    border:1px solid var(--color-line);
    border-radius:999px;
    font-family:var(--font-ui);
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--color-muted);
  }

.service-index__timing{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:18px 0 0;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-faint);
}

.service-index__timing b{
    font-family:var(--font-display);
    font-weight:500;
    font-size:13px;
    letter-spacing:.04em;
    text-transform:none;
    color:var(--color-accent);
  }

/* closing call to action */
.service-outro{
  padding:0 max(24px,6vw) clamp(80px,14vh,170px);
}
.service-outro__inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(20px,3vh,30px);
  max-width:1240px;
  margin:0 auto;
  padding:clamp(34px,5vw,60px);
  border:1px solid var(--color-hairline);
  border-radius:22px;
  background:var(--color-lift);
}
.service-outro__title{
  margin:0;
  max-width:20ch;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.6rem,3.6vw,2.8rem);
  line-height:1.06;
  letter-spacing:-.03em;
  color:var(--color-ink);
}
.service-outro__text{
  margin:0;
  max-width:52ch;
  font-size:clamp(.92rem,1.2vw,1.04rem);
  line-height:1.75;
  color:var(--color-muted);
}


/* =========================================================================
   22  SITE FOOTER
   Status, the address at display size, then the detail columns. Plain black —
   the page grid stops here so the footer reads as a separate slab.
   ========================================================================= */
.site-footer{
  position:relative;
  overflow:hidden;
  padding:clamp(70px,13vh,150px) max(24px,6vw) 0;
  background:var(--black);          /* plain: no pattern behind the footer */
  border-top:1px solid var(--color-hairline);
}
.site-footer__inner{
  position:relative;
  z-index:2;
  max-width:var(--inner-container-width);
  margin:0 auto;
}

.site-footer__status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--color-muted);
}
.site-footer__pulse{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--color-warm);
  box-shadow:0 0 0 0 rgba(241,122,80,.55);
  animation:footer-pulse 2.4s ease-out infinite;
}
@keyframes footer-pulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(.6); opacity:.55 } }

/* the address rolls to a second line on hover — one transform, no reflow */
.site-footer__email{
  display:block;
  margin:clamp(22px,3.5vh,40px) 0 clamp(44px,7vh,86px);
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.75rem,6.4vw,5.4rem);
  line-height:1.02;
  letter-spacing:-.04em;
  color:var(--color-ink);
}
.site-footer__email .roll{ --roll-height:1.02em }
.site-footer__email:hover .roll__line{
    transform:translateY(calc(var(--roll-height) * -1));
    color:var(--color-accent);
  }

.site-footer__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(26px,4vw,60px);
  padding-bottom:clamp(34px,5vh,58px);
  border-bottom:1px solid var(--color-hairline);
}
.site-footer__cell p{ margin:0; font-size:14px; line-height:1.7; color:var(--color-ink) }
.site-footer__cell.site-footer__cell--links p{
    display:flex;
    flex-wrap:wrap;
    gap:6px 20px;
  }
.site-footer__cell.site-footer__cell--links a{
    color:var(--color-muted);
    transition:color .25s ease;
  }
.site-footer__cell.site-footer__cell--links a:hover{ color:var(--color-warm) }

.site-footer__legal{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  margin:clamp(20px,3vh,30px) 0 0;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.04em;
  color:rgba(232,230,231,.38);
}

@media (max-width:700px){

.site-footer__legal{ flex-direction:column
} }

/* stroked wordmark, cropped by the footer's bottom edge */
.site-footer__wordmark{
  position:relative;
  z-index:1;
  margin-top:clamp(30px,6vh,70px);
  line-height:.74;
  text-align:center;
  pointer-events:none;
  user-select:none;
}
.site-footer__wordmark-text{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(3.4rem,16.2vw,26rem);
  letter-spacing:-.045em;
  text-transform:uppercase;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(232,230,231,.17);
  transform:translateY(.19em);
}


/* =========================================================================
   23  INNER PAGES  (about + contact)
   ========================================================================= */
.page-head{
  padding:calc(var(--header-height) + clamp(80px,16vh,190px)) max(24px,6vw) clamp(40px,7vh,80px);
}
.page-head__inner{ max-width:1240px; margin:0 auto }
.page-head__title{
  margin:22px 0 0;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(2.4rem,7vw,6rem);
  line-height:1;
  letter-spacing:-.04em;
  color:var(--color-ink);
}
.page-head__title em{ font-style:normal; font-weight:700; color:var(--color-accent) }

/* --- about --- */
.page-prose{
  padding:0 max(24px,6vw) clamp(80px,14vh,170px);
}
.page-prose__inner{
  max-width:760px;
  margin:0 auto;
  padding-top:clamp(40px,6vh,70px);
  border-top:1px solid var(--color-hairline);
}
.page-prose__inner p{
    margin:0 0 1.5em;
    font-size:clamp(.95rem,1.25vw,1.06rem);
    line-height:1.8;
    color:var(--color-muted);
  }
/* nested at the same depth as the body copy above, so it wins on
     specificity without needing !important */
.page-prose__inner .page-prose__lead{
    margin:0 0 clamp(26px,3.4vw,38px);
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(1.2rem,2.3vw,1.75rem);
    line-height:1.4;
    letter-spacing:-.02em;
    color:var(--color-ink);
  }
.page-prose__inner .btn{ margin-top:clamp(40px,6vh,64px) }
.page-prose__facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(20px,3vw,40px);
  margin:clamp(40px,6vh,64px) 0 0;
  padding-top:clamp(28px,4vh,40px);
  border-top:1px solid var(--color-hairline);
}
.page-prose__fact p{
    margin:0;
    font-family:var(--font-display);
    font-weight:500;
    font-size:1.05rem;
    color:var(--color-ink);
  }

/* --- contact --- */
.contact-section{
  padding:0 max(24px,6vw) clamp(80px,14vh,160px);
}
.contact-section__inner{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);
  gap:clamp(36px,6vw,96px);
  padding-top:clamp(40px,6vh,70px);
  border-top:1px solid var(--color-hairline);
}
@media (max-width:860px){
.contact-section__inner{ grid-template-columns:1fr; gap:clamp(40px,7vh,64px)
} }

.contact-section__aside{
  display:flex;
  flex-direction:column;
  gap:clamp(24px,3.4vh,36px);
}
.contact-section__cell p{ margin:0; font-size:14px; line-height:1.7; color:var(--color-muted) }
.contact-section__link{
  padding-bottom:3px;
  border-bottom:1px solid var(--color-hairline);
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1rem,1.35vw,1.18rem);
  color:var(--color-ink);
  transition:color .28s ease, border-color .28s ease;
}
.contact-section__link:hover{ color:var(--color-warm); border-color:var(--color-warm) }

.contact-form__alert{
  margin:0 0 26px;
  padding:13px 18px;
  border:1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-radius:10px;
  background:color-mix(in srgb, var(--color-accent) 16%, transparent);
  font-size:13px;
  color:var(--color-ink);
}
.contact-form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(18px,3vw,38px);
}
@media (max-width:860px){
.contact-form__row{ grid-template-columns:1fr; gap:0
} }

/* Floating label is pure CSS off :placeholder-shown — no JS, no reflow.
   The inputs carry placeholder=" " so the selector has something to match. */
.form-field{
  position:relative;
  margin-bottom:clamp(26px,4vh,40px);

  /* Autofill.
     Chrome paints its own pale yellow/white background on a field it has
     filled, and refuses to let `background` override it. The only thing it
     does respect is an inset shadow, so a very large one is used to repaint
     the field in the page colour. -webkit-text-fill-color is likewise the
     only way to recolour autofilled text; plain `color` is ignored.
     The absurd transition delay stops Chrome flashing its colour back in
     for a frame when the field regains focus. */

  /* lift the label when the field is focused or filled */
}
.form-field input,
  .form-field textarea{
    display:block;
    width:100%;
    padding:22px 0 12px;
    border:0;
    border-bottom:1px solid var(--color-hairline);
    outline:none;
    background:none;
    color:var(--color-ink);
    font-family:var(--font-ui);
    font-size:clamp(.95rem,1.2vw,1.05rem);
    line-height:1.5;
    transition:border-color .3s ease;
  }
.form-field textarea{ resize:vertical; min-height:110px }
/* A dropdown cannot use the floating label — it always shows a value — so
     its label is stacked above instead. */
.form-field.form-field--select .form-field__stacked-label{
      position:static;
      display:block;
      margin-bottom:2px;
      font-family:var(--font-ui);
      font-size:11px;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:var(--color-faint);
      transform:none;
    }
.form-field.form-field--select select{
      display:block;
      width:100%;
      padding:14px 0 12px;
      border:0;
      border-bottom:1px solid var(--color-hairline);
      outline:none;
      background:transparent;
      color:var(--color-ink);
      font-family:var(--font-ui);
      font-size:clamp(.95rem,1.2vw,1.05rem);
      cursor:pointer;
    }
/* the menu itself is drawn by the operating system, so it needs a
         readable pair of its own rather than inheriting the dark page */
.form-field.form-field--select select option{ background:var(--color-deep); color:var(--color-ink) }
.form-field input:-webkit-autofill,
  .form-field input:-webkit-autofill:hover,
  .form-field input:-webkit-autofill:focus,
  .form-field input:-webkit-autofill:active,
  .form-field textarea:-webkit-autofill,
  .form-field textarea:-webkit-autofill:hover,
  .form-field textarea:-webkit-autofill:focus,
  .form-field select:-webkit-autofill{
    -webkit-text-fill-color:var(--color-ink);
    -webkit-box-shadow:0 0 0 1000px var(--color-bg) inset;
    box-shadow:0 0 0 1000px var(--color-bg) inset;
    caret-color:var(--color-ink);
    transition:background-color 100000s ease-in-out 0s;
  }
.form-field label{
    position:absolute;
    left:0;
    top:22px;
    pointer-events:none;
    transform-origin:left top;
    font-family:var(--font-ui);
    font-size:clamp(.95rem,1.2vw,1.05rem);
    color:var(--color-faint);
    transition:transform .32s var(--ease-out-soft), color .32s ease;
  }
.form-field label span{ opacity:.55 }
.form-field input:focus + label,
  .form-field textarea:focus + label,
  .form-field input:not(:placeholder-shown) + label,
  .form-field textarea:not(:placeholder-shown) + label{
    transform:translateY(-21px) scale(.68);
    color:rgba(232,230,231,.6);
  }
.form-field input:focus + label,
  .form-field textarea:focus + label{ color:var(--color-warm) }
.form-field input:focus ~ .form-field__underline,
  .form-field textarea:focus ~ .form-field__underline{ transform:scaleX(1) }
.form-field.has-error input,
  .form-field.has-error textarea{ border-bottom-color:var(--color-accent) }
/* server-side validation failure */
.form-field.has-error .form-field__underline{ background:var(--color-accent) }

/* the underline that draws in from the left on focus */
.form-field__underline{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--color-warm);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--ease-out-soft);
}
.form-field__error{
  position:absolute;
  left:0;
  top:100%;
  margin-top:7px;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--color-accent);
}

.option-group{
  margin:0 0 clamp(26px,4vh,38px);
  padding:0;
  border:0;
  min-inline-size:0;
}
.option-group__legend{
  padding:0;
  margin-bottom:15px;
  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--color-faint);
}
.option-group__set{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* the native input stays in the DOM for keyboard + form semantics, and the
   sibling span is what actually gets painted */
.option-chip{
  position:relative;
  cursor:pointer;
}
.option-chip input{ position:absolute; width:0; height:0; opacity:0 }
.option-chip span{
    display:block;
    padding:11px 18px;
    border:1px solid var(--color-line);
    border-radius:999px;
    font-family:var(--font-ui);
    font-size:12px;
    letter-spacing:.06em;
    color:var(--color-muted);
    transition:background .28s ease, color .28s ease,
               border-color .28s ease, transform .28s ease;
  }
.option-chip:hover span{ border-color:var(--color-muted); color:var(--color-ink) }
/* A chosen chip goes to the page's own text colour with dark type on it.
     Orange competed with the accent elsewhere on the form; Pearl reads as
     "this one is picked" without adding a third colour to the page. */
.option-chip input:checked + span{
    background:var(--color-ink);
    border-color:var(--color-ink);
    color:var(--color-bg);
    transform:translateY(-1px);
  }
.option-chip input:focus-visible + span{ outline:2px solid var(--color-accent); outline-offset:3px }

.contact-success{
  max-width:46ch;
}
.contact-success__icon{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin-bottom:26px;
  border-radius:50%;
  background:var(--color-warm);
  color:var(--greenish-black);
  font-size:22px;
}
.contact-success__title{
  margin:0 0 16px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.8rem,4vw,3rem);
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--color-ink);
}
.contact-success__text{
  margin:0 0 clamp(30px,5vh,44px);
  font-size:1rem;
  line-height:1.75;
  color:var(--color-muted);
}


/* =========================================================================
   24  REDUCED MOTION
   26  WORK GRID          (work page)
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .work-hud__hint::before{ animation:none }
  .site-footer__pulse{ animation:none }
  .hero-ticker__row{ will-change:auto }

  /* the accordion still opens, it just does not animate */
  .faq__answer{ transition:none }

  /* headings are never split when motion is reduced, but belt and braces */
  .reveal-mask{ overflow:visible }
  .capability-wave i,
  .capability-phone__progress i{ animation:none }
  .capability-chart i{ transform:scaleY(1) }
}


/* reCAPTCHA, when it is switched on. The v2 tick box is an iframe we cannot
   restyle, so it is only given room to breathe; the v3 note is ours. */
.contact-form__captcha{
  margin:clamp(6px,1vh,12px) 0;
  min-height:78px;
}
.contact-form__captcha-note{
  margin:0 0 clamp(6px,1vh,12px);
  font-family:var(--font-ui);
  font-size:11px;
  line-height:1.6;
  color:var(--color-faint);
}
.contact-form__captcha-note a{
    color:var(--color-muted);
    text-decoration:underline;
    text-underline-offset:.2em;
  }
.contact-form__captcha-note a:hover{ color:var(--color-warm) }


.contact-form__other{
  /* Closed by default and opened by a class, animating the row height rather
     than a pixel height — no measuring, and it survives a resize. */
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease-out-soft), opacity .3s ease;
  opacity:0;
}


.contact-form__other > *{ overflow:hidden; min-height:0 }


.contact-form__other.is-open{
    grid-template-rows:1fr;
    opacity:1;
  }


/* the field inside carries the group's own bottom spacing */


.contact-form__other .form-field{ margin-bottom:0; padding-top:clamp(10px,1.6vh,18px) }


@media (prefers-reduced-motion:reduce){


.contact-form__other{ transition:none
} }

/* "Get this service" — the link at the end of every services page row */
.service-index__cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:clamp(16px,2vw,22px);
  font-family:var(--font-ui);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-ink);
  transition:color .3s ease, gap .3s var(--ease-out-soft);
}
.service-index__cta svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:color .3s ease;
  }
.service-index__cta:hover{
    color:var(--color-accent);
    gap:14px;
  }


/* =========================================================================
   25b COMING SOON
   A standalone holding page. It shares the tokens and the fonts with the
   site, so it is unmistakably the same brand, but it loads no scripts and
   none of the section styles above.
   ========================================================================= */
body.brandomix-soon{
  min-height:100dvh;
  margin:0;
  background-color:var(--color-bg);
  background-image:var(--pattern-grid);
  color:var(--color-ink);
  font-family:var(--font-ui);
}

.soon{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(30px,6vh,60px);
  min-height:100dvh;
  padding:clamp(24px,4vw,56px);
}

.soon__top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.soon__logo{ width:clamp(130px,14vw,185px); height:auto; display:block }

.soon__status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--color-muted);
}
.soon__pulse{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--color-warm);
  animation:footer-pulse 2.4s ease-out infinite;
}

.soon__body{
  position:relative;
  z-index:2;
  align-self:center;
/*   max-width:24ch; */
}
.soon__eyebrow{
  margin:0 0 clamp(16px,2.6vh,26px);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--color-faint);
}
.soon__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.4rem,7.4vw,5.6rem);
  line-height:.98;
  letter-spacing:-.035em;
  color:var(--color-ink);
}
.soon__title em{ font-style:normal; color:var(--color-accent) }
.soon__text{
  max-width:46ch;
  margin:clamp(20px,3vh,32px) 0 0;
  font-size:clamp(.92rem,1.2vw,1.04rem);
  line-height:1.75;
  color:var(--color-muted);
}

.soon__email{
  display:inline-block;
  margin-top:clamp(26px,4vh,44px);
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.3rem,3.4vw,2.4rem);
  line-height:1.02;
  letter-spacing:-.03em;
  color:var(--color-ink);
}

.soon__email .roll{ --roll-height:1.02em }

.soon__email:hover .roll__line{
    transform:translateY(calc(var(--roll-height) * -1));
    color:var(--color-accent);
  }

.soon__foot{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  font-size:11px;
  letter-spacing:.04em;
  color:var(--color-faint);
}

/* the same cropped wordmark the footer uses, so the page is recognisable */
.soon__wordmark{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  line-height:.74;
  text-align:center;
  pointer-events:none;
  user-select:none;
}
.soon__wordmark span{
    display:block;
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(3.4rem,15.5vw,15rem);
    letter-spacing:-.045em;
    text-transform:uppercase;
    white-space:nowrap;
    color:transparent;
    -webkit-text-stroke:1px rgba(232,230,231,.1);
    transform:translateY(.22em);
  }


/* =========================================================================
   26  WORK GRID  (work page)
   The same projects as the 3D carousel, laid flat. Hovering a tile lifts the
   image and reveals the open icon; clicking it hands off to the very same
   case study overlay the carousel uses, so there is one viewer, not two.
   ========================================================================= */
.work-page{
  padding:0 max(24px,6vw) clamp(80px,14vh,170px);
}

.work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));
  gap:clamp(18px,2.4vw,34px);
  max-width:1240px;
  margin:0 auto;
}

.work-tile{
  position:relative;
  overflow:hidden;
  border:1px solid var(--color-hairline);
  border-radius:20px;
  background:var(--color-deep);
  cursor:pointer;
  transition:border-color .4s ease, transform .5s var(--ease-out-soft);
}

/* the whole tile is the button, so it needs a visible keyboard ring */

.work-tile:focus-visible{
    outline:2px solid var(--color-accent);
    outline-offset:3px;
  }

@media (hover:hover) and (pointer:fine){
    .work-tile:hover{
      border-color:var(--color-line);
      transform:translateY(-4px);
    }

      .work-tile:hover .work-tile__media img{ transform:scale(1.06) }
      .work-tile:hover .work-tile__open{ opacity:1; transform:none }
      .work-tile:hover .work-tile__title{ color:var(--color-accent) }
  }

.work-tile__media{
  position:relative;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:var(--color-lift);
}

.work-tile__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .7s var(--ease-out-soft);
  }

/* the icon that appears on hover */
.work-tile__open{
  position:absolute;
  top:clamp(14px,1.6vw,20px);
  right:clamp(14px,1.6vw,20px);
  z-index:2;
  display:grid;
  place-items:center;
  width:clamp(42px,3.4vw,52px);
  height:clamp(42px,3.4vw,52px);
  border-radius:50%;
  background:var(--color-accent);
  color:var(--pearl);
  opacity:0;
  transform:translateY(-6px) scale(.9);
  transition:opacity .35s ease, transform .35s var(--ease-out-soft);
  pointer-events:none;
}
/* the tile itself takes the click */
.work-tile__open svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
/* touch devices have no hover, so the icon is simply always there */
@media (hover:none){
.work-tile__open{
    opacity:1;
    transform:none
}
  }

.work-tile__meta{
  display:grid;
  gap:6px;
  padding:clamp(18px,2vw,26px);
}
.work-tile__index{
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--color-faint);
  font-variant-numeric:tabular-nums;
}
.work-tile__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.9rem);
  line-height:1.1;
  letter-spacing:-.025em;
  color:var(--color-ink);
  transition:color .3s ease;
}
.work-tile__tag{
  display:flex;
  flex-wrap:wrap;
  gap:4px 12px;
  margin:0;
  font-family:var(--font-ui);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--color-muted);
}
.work-tile__tag b{ font-weight:500; color:var(--color-faint) }


/* =========================================================================
   25  WORDPRESS CORE CLASSES
   WordPress prints these class names itself (image alignment, captions,
   galleries, the admin bar, the skip link). A theme has to style them or
   the editor's output looks broken. Nothing here affects the sections
   above — it only applies inside post/page content.
   ========================================================================= */
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
/* keyboard users must be able to see the skip link once it is focused */
.screen-reader-text:focus{
    position:fixed !important;
    top:16px; left:16px;
    z-index:100000;
    width:auto; height:auto;
    padding:14px 22px;
    clip:auto;
    background:var(--color-accent);
    color:var(--pearl);
    font-family:var(--font-ui);
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    border-radius:999px;
  }

/* the admin bar pushes the whole document down 32px (46px on phones) */
body.admin-bar .site-header{ top:32px }
body.admin-bar .nav-drawer{ top:32px }
@media (max-width:782px){
    body.admin-bar .site-header{ top:46px }
    body.admin-bar .nav-drawer{ top:46px }
  }

/* editor content: images, captions, galleries */
.page-prose__inner img,.entry-content img{ max-width:100%; height:auto }
.page-prose__inner .alignleft,.entry-content .alignleft{ float:left; margin:.4em 1.6em 1em 0 }
.page-prose__inner .alignright,.entry-content .alignright{ float:right; margin:.4em 0 1em 1.6em }
.page-prose__inner .aligncenter,.entry-content .aligncenter{ display:block; margin-inline:auto }
.page-prose__inner .alignwide,
  .page-prose__inner .alignfull,
  .entry-content .alignwide,
  .entry-content .alignfull{ max-width:none; width:100% }
.page-prose__inner .wp-caption,.entry-content .wp-caption{ max-width:100% }
.page-prose__inner .wp-caption-text,
  .page-prose__inner figcaption,
  .entry-content .wp-caption-text,
  .entry-content figcaption{
    margin-top:10px;
    font-family:var(--font-ui);
    font-size:12px;
    letter-spacing:.06em;
    color:var(--color-faint);
  }
.page-prose__inner blockquote,.entry-content blockquote{
    margin:clamp(24px,4vh,40px) 0;
    padding-left:clamp(18px,2.4vw,30px);
    border-left:2px solid var(--color-accent);
    font-family:var(--font-display);
    font-size:clamp(1.1rem,1.9vw,1.5rem);
    line-height:1.4;
    color:var(--color-ink);
  }
.page-prose__inner ul, .page-prose__inner ol, .entry-content ul, .entry-content ol{ padding-left:1.3em; line-height:1.8; color:var(--color-muted) }
.page-prose__inner li,.entry-content li{ margin-bottom:.5em }
/* Editor links are underlined so they read as links inside a block of
     prose. A .btn is already a button — underlining it puts a line through
     the rolling label and the arrow, so it is excluded. */
.page-prose__inner a:not(.btn),.entry-content a:not(.btn){ color:var(--color-warm); text-decoration:underline; text-underline-offset:.22em }
.page-prose__inner code, .page-prose__inner pre, .entry-content code, .entry-content pre{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:.88em;
    background:var(--color-lift);
  }
.page-prose__inner pre,.entry-content pre{ padding:18px 20px; border-radius:12px; overflow:auto }
.page-prose__inner table,.entry-content table{ width:100%; border-collapse:collapse; font-size:.92rem }
.page-prose__inner th, .page-prose__inner td, .entry-content th, .entry-content td{ padding:10px 12px; border-bottom:1px solid var(--color-hairline); text-align:left }

/* comments and pagination are intentionally plain — this is a studio site,
   not a blog, but the markup has to be readable if someone turns them on */
.bmx-basic-list{
  margin:0; padding:0;
  list-style:none;
}
.bmx-basic-list li{ padding:14px 0; border-bottom:1px solid var(--color-hairline) }
.bmx-pagination{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:clamp(30px,5vh,50px);
  font-family:var(--font-ui);
  font-size:13px;
}
.bmx-pagination .page-numbers{
    padding:10px 16px;
    border:1px solid var(--color-hairline);
    border-radius:999px;
    color:var(--color-muted);
    transition:color .25s ease, border-color .25s ease;
  }
.bmx-pagination .page-numbers:hover{ color:var(--color-ink); border-color:var(--color-line) }
.bmx-pagination .page-numbers.current{ color:var(--pearl); border-color:var(--color-accent); background:var(--color-accent) }

/* =========================================================================
   BMX CONTAINER — one width and one side padding for every section.
   Each section keeps its own top and bottom spacing (Customizer). This block
   only unifies the width and the left and right padding of the content.
   ========================================================================= */
:root{
  --bmx-container-max:1400px;
  --bmx-container-pad:clamp(20px,5vw,72px);
}
.bmx-container{
  width:100%;
  max-width:var(--bmx-container-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--bmx-container-pad);
  padding-right:var(--bmx-container-pad);
  box-sizing:border-box;
}
/* the section wrappers stop adding their own side padding and width:
   the container inside them does it now */
.capabilities,
.beliefs,
.faq,
.client-list,
.services-intro,
.site-footer{
  padding-left:0;
  padding-right:0;
  max-width:none;
}
.hero__ui{ padding-left:0; padding-right:0 }
.hero__type.bmx-container{ width:100% }
.work-showcase__head.bmx-container,
.work-hud.bmx-container{ left:0; right:0 }

/* =========================================================================
   SERVICE CARD: picture + size options
   Sizes come from the Customizer (inline on .services-stack). The picture
   sits in its own column on the right, or the left, and drops above the
   text on phones.
   ========================================================================= */
.service-card--has-image{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,var(--service-image-width,44%));
  grid-template-rows:auto minmax(0,1fr);
}
.service-card--has-image .service-card__meta{ grid-column:1 / -1; grid-row:1 }
.service-card--has-image .service-card__body{ grid-column:1; grid-row:2; min-width:0 }
.service-card--has-image .service-card__image{ grid-column:2; grid-row:2 }
.service-card--image-left .service-card__body{ grid-column:2 }
.service-card--image-left .service-card__image{ grid-column:1 }
.service-card__image{
  margin:0;
  min-height:0;
  overflow:hidden;
  background:rgba(0,0,0,.12);
}
.service-card__image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
@media (max-width:700px){
  .service-card--has-image{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,38%) minmax(0,1fr);
  }
  .service-card--has-image .service-card__body,
  .service-card--image-left .service-card__body{ grid-column:1; grid-row:3 }
  .service-card--has-image .service-card__image,
  .service-card--image-left .service-card__image{ grid-column:1; grid-row:2 }
}

/* Whole carousel card is tappable to open its case study. */
.work-card{ cursor:pointer }

/* The live card takes the pointer (drag and tap); the open button no longer
   covers the whole card, so a drag that starts on the card moves the stage. */
.work-card.is-live{ pointer-events:auto }

/* =========================================================================
   CAPABILITIES: REFINED
   Monochrome glass cards on black, one accent (crimson) for emphasis only.
   Overrides the bento block above; the markup and copy are unchanged.
   The pointer-follow light is set by main.js (--mx / --my on each card).
   ========================================================================= */
.capabilities{
  --cap-line:rgba(232,230,231,.09);
  --cap-line-hi:rgba(232,230,231,.20);
  --cap-text:rgba(232,230,231,.62);
}

.capabilities__grid{ gap:clamp(14px,1.4vw,20px) }

.capability-card{
  position:relative;
  min-height:340px;
  padding:clamp(24px,2.4vw,34px);
  border-radius:28px;
  border:1px solid var(--cap-line);
  background:linear-gradient(180deg,rgba(232,230,231,.06),rgba(232,230,231,.015)),#0b0b0c;
  box-shadow:inset 0 1px 0 rgba(232,230,231,.07),0 40px 80px -48px rgba(0,0,0,.9);
  transition:transform .6s var(--ease-out-soft),border-color .6s ease;
}
/* the light that follows the pointer */
.capability-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(232,230,231,.10),transparent 62%);
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}
.capability-card:hover{
  transform:translateY(-4px);
  border-color:var(--cap-line-hi);
  background:linear-gradient(180deg,rgba(232,230,231,.08),rgba(232,230,231,.02)),#0b0b0c;
}
.capability-card:hover::before{ opacity:1 }
.capability-card > *{ position:relative; z-index:1 }
.capability-card--wide{ min-height:340px }

@media (max-width:767px){
  .capability-card{ min-height:0 }
}

/* one icon style for every card: a frosted chip, pearl glyph */
.capability-card__icon,
.capability-card__icon--crimson,
.capability-card__icon--orange,
.capability-card__icon--pearl{
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(232,230,231,.08);
  color:var(--pearl);
  box-shadow:inset 0 0 0 1px rgba(232,230,231,.14);
}
.capability-card:hover .capability-card__icon{
  background:var(--pearl);
  color:var(--greenish-black);
  box-shadow:none;
}
.capability-card:hover .capability-card__arrow{ color:var(--color-accent) }

.capability-card__title{
  font-size:clamp(1.25rem,1.9vw,1.6rem);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.15;
}
.capability-card__text{
  font-size:15px;
  line-height:1.65;
  color:var(--cap-text);
}

/* identity: brand colours as tidy discs, a pearl type specimen */
.capability-swatch{
  width:28px;
  height:28px;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(232,230,231,.22);
}
.capability-specimen{
  font-weight:300;
  font-size:4rem;
  background:linear-gradient(180deg,var(--pearl),rgba(232,230,231,.35));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* social: glass tiles */
.capability-tile{
  border-radius:16px;
  background:rgba(232,230,231,.035);
  box-shadow:inset 0 0 0 1px var(--cap-line);
  color:rgba(232,230,231,.7);
}

/* motion: pearl bars, no accent */
.capability-wave i{
  background:linear-gradient(180deg,var(--pearl),rgba(232,230,231,.22));
}

/* web: the one accent bar, everything else is quiet */
.capability-browser{ box-shadow:inset 0 0 0 1px var(--cap-line) }
.capability-browser__headline{
  background:linear-gradient(90deg,var(--pearl),rgba(232,230,231,.35));
}
.capability-browser__btn{ background:rgba(232,230,231,.10) }
.capability-browser__btn--ghost{ background:rgba(232,230,231,.05) }

/* growth chip: glass, with the green kept only on the arrow */
.capability-chip{
  background:rgba(232,230,231,.07);
  box-shadow:inset 0 0 0 1px var(--cap-line);
  color:var(--pearl);
}
.capability-chip svg{ color:var(--color-green) }

/* campaigns: two glass placards, the front one pearl */
.capability-placard{
  background:rgba(232,230,231,.05);
  box-shadow:inset 0 0 0 1px var(--cap-line);
}
.capability-placard--accent{
  background:linear-gradient(135deg,var(--pearl),rgba(232,230,231,.78));
  color:var(--greenish-black);
  box-shadow:0 24px 40px -20px rgba(0,0,0,.8);
}
.capability-placard--accent h4,
.capability-placard--accent b{ color:var(--greenish-black) }
.capability-placard--accent i{ background:rgba(6,32,43,.22) }

@media (prefers-reduced-motion:reduce){
  .capability-card,.capability-card::before{ transition:none }
}

/* specificity fix: the nested tone and placard rules are 0,2,0; these beat them */
.capability-card .capability-card__icon.capability-card__icon--crimson,
.capability-card .capability-card__icon.capability-card__icon--orange,
.capability-card .capability-card__icon.capability-card__icon--pearl{
  background:rgba(232,230,231,.08);
  color:var(--pearl);
  box-shadow:inset 0 0 0 1px rgba(232,230,231,.14);
}
.capability-card:hover .capability-card__icon.capability-card__icon--crimson,
.capability-card:hover .capability-card__icon.capability-card__icon--orange,
.capability-card:hover .capability-card__icon.capability-card__icon--pearl{
  background:var(--pearl);
  color:var(--greenish-black);
  box-shadow:none;
}
.capability-card .capability-placard.capability-placard--accent{
  background:linear-gradient(135deg,var(--pearl),rgba(232,230,231,.78));
  color:var(--greenish-black);
}
.capability-card .capability-phone__progress i{ background:var(--pearl) }

/* the accent placard is pearl now: all of its text takes the dark ink */
.capability-card .capability-placard.capability-placard--accent *{ color:var(--greenish-black) }
.capability-card .capability-placard.capability-placard--accent i{ background:rgba(6,32,43,.22) }

/* =========================================================================
   BUTTONS: TWO
   The site has exactly two button styles now.
     .btn           filled pearl pill, the primary action
     .btn--outline  hairline pill, the secondary action
   Both turn black with white text on hover. The icon sits in a round chip
   that inverts on hover. Size (.btn--small) is a modifier, not a new style.
   The old .btn--ghost is an alias of the outline.
   ========================================================================= */
.btn{
  --btn-h:54px;
  --chip:40px;
  --btn-bg:#e8e6e7;
  --btn-fg:#06202b;
  --btn-border:transparent;
  --btn-bg-hover:#000;
  --btn-fg-hover:#fff;
  --btn-border-hover:transparent;
  --chip-bg:#06202b;
  --chip-fg:#e8e6e7;
  --chip-bg-hover:#fff;
  --chip-fg-hover:#000;

  height:var(--btn-h);
  gap:18px;
  padding:0 7px 0 26px;
  border-radius:999px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-border);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1;
  text-transform:none;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .5s cubic-bezier(.22,1,.36,1), color .5s cubic-bezier(.22,1,.36,1),
             border-color .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.btn:hover{
  background:var(--btn-bg-hover);
  color:var(--btn-fg-hover);
  border-color:var(--btn-border-hover);
}
.btn:active{ transform:scale(.97) }

/* the label rolls as before; the roll height follows the new size */
.btn .roll{ --roll-height:1.2em }

/* outlined: the same pill with a hairline; the chip is a soft glass disc */
.btn.btn--outline,
.btn.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:#e8e6e7;
  --btn-border:rgba(232,230,231,.34);
  --btn-bg-hover:#000;
  --btn-fg-hover:#fff;
  --btn-border-hover:#fff;
  --chip-bg:rgba(232,230,231,.12);
  --chip-fg:#e8e6e7;
  --chip-bg-hover:#fff;
  --chip-fg-hover:#000;
}

/* the round chip that holds the arrow or the close mark */
.btn__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:var(--chip);
  height:var(--chip);
  border-radius:50%;
  background:var(--chip-bg);
  color:var(--chip-fg);
  font-style:normal;
  font-size:15px;
  transition:background-color .5s cubic-bezier(.22,1,.36,1), color .5s cubic-bezier(.22,1,.36,1);
}
.btn__icon svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.btn:hover .btn__icon{ background:var(--chip-bg-hover); color:var(--chip-fg-hover) }
.btn:hover .btn__icon svg{ transform:translate(2px,-2px) }

/* small: header bar and drawer close */
.btn.btn--small{
  --btn-h:44px;
  --chip:32px;
  gap:12px;
  padding:0 5px 0 20px;
  font-size:14px;
  letter-spacing:-.01em;
}
@media (max-width:700px){
  .btn.btn--small{ --btn-h:42px; --chip:30px; gap:10px; padding:0 5px 0 16px; font-size:13px; letter-spacing:-.01em }
}

/* the menu toggle is the same outline pill, with the bars in place of the chip */
.menu-toggle{
  height:54px;
  padding:0 26px;
  gap:14px;
  border:1px solid rgba(232,230,231,.34);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  text-transform:none;
  transition:background-color .5s cubic-bezier(.22,1,.36,1), color .5s cubic-bezier(.22,1,.36,1), border-color .5s cubic-bezier(.22,1,.36,1);
}
.menu-toggle:hover{
  background:#000;
  color:#fff;
  border-color:#fff;
}
@media (max-width:700px){
  .menu-toggle{ height:44px; padding:0 18px; gap:10px; font-size:13px; letter-spacing:-.01em }
}

/* =========================================================================
   BUTTONS: REFINED
   - Header "Hire Us" is the same height as the "Menu" pill at each width.
   - The filled button shows a white border on hover.
   ========================================================================= */
.btn{ --btn-border-hover:#fff }

.btn.site-header__cta{
  --btn-h:54px;
  --chip:40px;
  gap:16px;
  padding:0 7px 0 24px;
  font-size:15px;
}
@media (max-width:700px){
  .btn.site-header__cta{ --btn-h:44px; --chip:34px; gap:10px; padding:0 5px 0 18px; font-size:14px }
}

/* =========================================================================
   HERO: STATEMENT
   The second hero (Customizer -> Hero -> Hero style). It uses the same moving
   background as the classic hero: the shader draws into #hero. Only the type,
   the layout and the highlight blocks are different.
   ========================================================================= */
.hero--statement .hs{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  /* room above for the fixed header, and room below before the ticker */
  padding:clamp(104px,16vh,140px) 0 clamp(56px,10vh,110px);
  pointer-events:none;
}
.hero--statement .hs__wrap{ width:100% }

.hero--statement .hs__eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 clamp(18px,2.6vw,30px);
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--color-warm);
}
.hero--statement .hs__eyebrow::before{
  content:"";
  width:32px;
  height:1px;
  background:currentColor;
}

.hero--statement .hs__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.1rem,6.4vw,5.6rem);
  line-height:.96;
  letter-spacing:-.045em;
  text-transform:none;
  color:var(--color-ink);
}

/* each line is a mask; the text rises out of it on entrance */
.hero--statement .hs__line{
  display:block;
  overflow:hidden;
  padding:.06em 0 .12em;
  margin:-.06em 0 -.12em;
}
.hero--statement .hs__line-in{
  display:block;
  will-change:transform;
}

/* highlight block: a chamfered rectangle, not a pill. The two blocks cut
   opposite corners, so they read as a pair without matching exactly. */
.hero--statement .hs__mark{
  position:relative;
  display:inline-block;
  isolation:isolate;
  padding:.03em .26em .1em;
  margin:0 .04em;
  color:var(--pearl);
  clip-path:polygon(.2em 0, 100% 0, 100% calc(100% - .2em), calc(100% - .2em) 100%, 0 100%, 0 .2em);
}
.hero--statement .hs__mark--orange{
  color:var(--greenish-black);
  clip-path:polygon(0 0, calc(100% - .2em) 0, 100% .2em, 100% 100%, .2em 100%, 0 calc(100% - .2em));
}
.hero--statement .hs__mark-text{ position:relative }

/* the fill wipes in from the left; a pale band sweeps across afterwards */
.hero--statement .hs__fill{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background:var(--crimson);
  transform-origin:0 50%;
}
.hero--statement .hs__mark--orange .hs__fill{ background:var(--orange) }
.hero--statement .hs__fill::after{
  content:"";
  position:absolute;
  top:-12%;
  bottom:-12%;
  left:-50%;
  width:50%;
  background:linear-gradient(100deg, transparent 20%, rgba(232,230,231,.38) 50%, transparent 80%);
  transform:translateX(0) skewX(-14deg);
}
.hero--statement.is-live .hs__fill::after{
  animation:hsSheen 6s cubic-bezier(.45,0,.2,1) infinite;
  animation-delay:var(--sheen-delay, 0s);
}
@keyframes hsSheen{
  0%, 38%{ transform:translateX(0) skewX(-14deg) }
  100%{ transform:translateX(300%) skewX(-14deg) }
}

/* sub line and the two buttons, set under the headline */
.hero--statement .hs__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px 48px;
  margin-top:clamp(30px,4.2vw,60px);
}
.hero--statement .hs__sub{
  margin:0;
  max-width:400px;
  font-family:var(--font-ui);
  font-size:clamp(15px,1.15vw,17px);
  line-height:1.65;
  color:var(--color-muted);
}
.hero--statement .hs__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  pointer-events:auto;
}

@media (max-width:699px){
  .hero--statement .hs__foot{ flex-direction:column; align-items:stretch }
  .hero--statement .hs__sub{ max-width:none }
  .hero--statement .hs__actions{ width:100% }
  .hero--statement .hs__actions .btn{ flex:1 1 auto; justify-content:space-between }
}

@media (prefers-reduced-motion:reduce){
  .hero--statement .hs__fill::after{ animation:none }
}

/* =========================================================================
   HERO: STATEMENT — WORD CYCLE
   The highlighted words stack in one box. The box is as wide as the widest
   word, so the line never reflows; each word sits centred inside it and rolls
   in and out (hero-statement.js drives it).
   ========================================================================= */
.hero--statement .hs__cycle{
  position:relative;
  display:inline-block;
  vertical-align:bottom;
  height:1.12em;
  overflow:hidden;
  white-space:nowrap;
  text-align:center;
}
.hero--statement .hs__cycle-word{
  position:absolute;
  left:50%;
  top:0;
  height:1.12em;
  line-height:1.12em;
  white-space:nowrap;
  visibility:hidden;
  opacity:0;
}
.hero--statement .hs__cycle-word:first-child{
  visibility:visible;
  opacity:1;
}


/* =========================================================================
   SERVICE CARD: TAGS
   The meta row is gone, so the picture and the text move up into the first
   grid row. Tags sit under the title as outlined pills in the card's own ink.
   The card surface is untouched.
   ========================================================================= */
.service-card--has-image{ grid-template-rows:minmax(0,1fr) }
.service-card--has-image .service-card__body{ grid-row:1 }
.service-card--has-image .service-card__image{ grid-row:1 }

.service-card__tags{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.service-card__tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px 8px 12px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--card-ink) 26%, transparent);
  background:color-mix(in srgb, var(--card-ink) 4%, transparent);
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
  color:var(--card-ink);
  transition:border-color .4s ease, background-color .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.service-card__tag::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  opacity:.55;
  flex:0 0 auto;
}
.service-card__tag:hover{
  border-color:color-mix(in srgb, var(--card-ink) 60%, transparent);
  background:color-mix(in srgb, var(--card-ink) 10%, transparent);
  transform:translateY(-1px);
}

@media (max-width:700px){
  .service-card--has-image{ grid-template-rows:minmax(0,38%) minmax(0,1fr) }
  .service-card--has-image .service-card__image{ grid-row:1 }
  .service-card--has-image .service-card__body,
  .service-card--image-left .service-card__body{ grid-row:2 }
}


/* Heading and tags stay together at the top; the copy and spec sit at the bottom. */
.service-card__body{ justify-content:flex-start }
.service-card__text{ margin-top:auto }


/* =========================================================================
   SERVICE CARD: TEXTURE + EYEBROW
   Surface colour is untouched. A fine grain sits over it, and a hairline
   gradient frames the edge in the card's own ink. The eyebrow is a small
   tracked label with a short rule.
   ========================================================================= */
.service-card{
  box-shadow:0 40px 80px -28px rgba(0,0,0,.8), inset 0 1px 0 color-mix(in srgb, var(--card-ink) 10%, transparent);
}
.service-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  opacity:.16;
}
.service-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--card-ink) 30%, transparent),
    color-mix(in srgb, var(--card-ink) 4%, transparent) 38%,
    color-mix(in srgb, var(--card-ink) 4%, transparent) 62%,
    color-mix(in srgb, var(--card-ink) 16%, transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.service-card__eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 16px;
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--card-ink);
  opacity:.75;
}
.service-card__eyebrow::before{
  content:"";
  width:26px;
  height:1px;
  background:currentColor;
  opacity:.7;
}


/* =========================================================================
   CAPABILITY CARD: SERVICE LINK
   The top-right arrow links to the card's service page. It sits in a
   small pearl ring, fills on hover or keyboard focus, and stays visible
   on touch screens, which have no hover.
   ========================================================================= */
.capability-card__go{
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  margin:-8px -8px 0 0;
  border-radius:50%;
  color:inherit;
  text-decoration:none;
  box-shadow:none;
  transition:background-color .5s var(--ease-out-soft), box-shadow .5s var(--ease-out-soft), transform .5s var(--ease-out-soft);
}
/* the outline only appears while the card is hovered */
.capability-card:hover .capability-card__go{ box-shadow:inset 0 0 0 1px rgba(232,230,231,.16) }
.capability-card__go:hover,
.capability-card__go:focus-visible{
  background:var(--pearl);
  box-shadow:none;
  transform:rotate(-8deg) scale(1.06);
}
.capability-card__go:hover .capability-card__arrow,
.capability-card__go:focus-visible .capability-card__arrow{
  color:var(--greenish-black);
  opacity:1;
  transform:none;
}
.capability-card__go:focus-visible{ outline:2px solid var(--color-warm); outline-offset:3px }
.capability-card:focus-within .capability-card__arrow{ opacity:1; transform:none }
@media (hover:none){
  .capability-card__arrow{ opacity:1; transform:none }
}


/* =========================================================================
   SERVICE INDEX: TAGS
   The same outlined pills as the home page cards, in the page's ink colour.
   ========================================================================= */
.service-index__tags{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.service-index__tags li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px 8px 12px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--color-ink) 26%, transparent);
  background:color-mix(in srgb, var(--color-ink) 4%, transparent);
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
  color:var(--color-ink);
  transition:border-color .4s ease, background-color .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.service-index__tags li::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  opacity:.55;
  flex:0 0 auto;
}
.service-index__tags li:hover{
  border-color:color-mix(in srgb, var(--color-ink) 60%, transparent);
  background:color-mix(in srgb, var(--color-ink) 10%, transparent);
  transform:translateY(-1px);
}


/* =========================================================================
   LIGHT MOBILE RENDERING
   Large blurred shadows are repainted on every frame while a card moves, and
   that was the main cause of stutter on iPhones and older Android phones.
   Phones, tablets and narrow windows keep the flat design with no shadows and
   no grain overlay. Desktop keeps its depth.
   ========================================================================= */
@media (max-width:1024px), (hover:none){
  *, *::before, *::after{ box-shadow:none !important }
  .service-card::before{ display:none }
}

.page-head__intro{
  max-width:52ch;
  margin:22px 0 0;
  font-size:clamp(.98rem,1.3vw,1.15rem);
  line-height:1.65;
  color:var(--color-muted);
}


/* =========================================================================
   FOOTER SOCIAL ICONS
   The same links the menu drawer shows ("Drawer social links").
   Style and size come from Customizer -> Footer, through the modifier class
   and the --social-size variable. Hover matches the button system: a black
   fill, a white icon and a white ring. Transform only, so it stays cheap.
   ========================================================================= */
.site-footer__social{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.site-footer__social li{ margin:0; padding:0 }

.site-footer__social-link{
  --s-bg:transparent;
  --s-fg:#e8e6e7;
  --s-border:rgba(232,230,231,.34);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--social-size,44px);
  height:var(--social-size,44px);
  box-sizing:border-box;
  border:1px solid var(--s-border);
  border-radius:50%;
  background:var(--s-bg);
  color:var(--s-fg);
  text-decoration:none;
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
}

.site-footer__social-link:hover{
    background:#000;
    color:#fff;
    border-color:#fff;
    transform:translateY(-2px);
  }

.site-footer__social-link:active{ transform:scale(.96) }

.site-footer__social-icon{
  width:42%;
  height:42%;
  fill:currentColor;
  flex:none;
  pointer-events:none;
}

/* a link the theme does not know: its own name, in a small pill */
.site-footer__social-link--text{
  width:auto;
  height:var(--social-size,44px);
  padding:0 clamp(14px,1.6vw,20px);
  border-radius:999px;
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}
.site-footer__social-text{ line-height:1 }

/* filled: a solid pearl disc with a dark glyph */
.site-footer__social--filled .site-footer__social-link{
  --s-bg:#e8e6e7;
  --s-fg:#000;
  --s-border:#e8e6e7;
}

/* plain: the glyph alone, larger, warm on hover like the footer links */
.site-footer__social--plain .site-footer__social-link{
  --s-border:transparent;
  width:auto;
  height:auto;
  padding:6px;
  border-color:transparent;
  background:transparent;
  color:var(--color-muted);
}
.site-footer__social--plain .site-footer__social-link:hover{
  background:transparent;
  border-color:transparent;
  color:var(--color-warm);
}
.site-footer__social--plain .site-footer__social-icon{
  width:calc(var(--social-size,44px) * .58);
  height:calc(var(--social-size,44px) * .58);
}

@media (prefers-reduced-motion: reduce){
  .site-footer__social-link,
  .site-footer__social-link:hover,
  .site-footer__social-link:active{ transform:none; transition:none }
}