/*
 Theme Name:   Empyria
 Theme URI:    https://empyria.io/
 Description:  Empyria Studio child theme for Bricks. This stylesheet is the
               single source of truth for the entire design system: fonts,
               tokens, base styles, every global class, and every runtime
               state. Bricks holds class NAMES only.
 Author:       Empyria Studio
 Author URI:   https://empyria.io/
 Template:     bricks
 Version:      2.0.0
 Text Domain:  bricks
*/

/* ============================================================================
   EMPYRIA DESIGN SYSTEM
   ----------------------------------------------------------------------------
   WHY EVERYTHING LIVES HERE

   Bricks' "HTML & CSS to Bricks" converter was the source of six distinct
   silent failures on this project: it dropped every shorthand containing a
   var(), appended the literal word "function" to line-height values, wrapped
   font-family values in quotes so they named a font that does not exist,
   emitted nothing at all for classes only added at runtime, inverted the
   bottom of the generated type scale, and duplicated classes on re-import.
   Each one looked correct in the Style Manager and wrong on the front end.

   So Bricks no longer owns any styling. It owns structure: elements, tags,
   attributes, templates and conditions. Class names exist in the Bricks Class
   Manager purely so they can be applied to elements; their style panels are
   empty. Everything visual is in this file, in source control, readable.

   REQUIRED BRICKS AND SERVER SETTINGS
   This file cannot win against styles that no longer exist, but it also
   cannot win against a leftover global class or a stripped stylesheet. Three
   settings are mandatory and are covered in the setup guide:
     1. Every global class must have its styles reset (Bricks emits global
        class CSS OUTSIDE its cascade layer, so a leftover style beats this
        file on source order).
     2. Bricks > Settings > Performance > Disable class chaining: ON.
     3. LiteSpeed > Page Optimization > CSS Settings > Generate UCSS: OFF.
        UCSS strips selectors it cannot see in the HTML, which silently
        deleted every .is-* rule in section 09.

   ORDER OF SECTIONS
     01  Fonts, self-hosted
     02  Tokens
     03  Bricks and browser reset
     04  Base elements
     05  Layout classes          .l-
     06  Typography classes      .t-
     07  Component classes       .c-
     08  Chrome classes          header, nav, menu, footer
     09  Runtime state classes   .is-
     10  Utilities               .u-
     11  Responsive
   ============================================================================ */


/* ============================================================================
   01  FONTS
   ----------------------------------------------------------------------------
   Self-hosted variable fonts. One file per family instead of six static
   weights, which is smaller over the wire and gives the whole weight range.

   The Bricks Font Manager is NOT used. It produced 78 @font-face rules for
   these three families, mapped the 100 and 200 weight files onto 400 and 500,
   and emitted six subset files per weight with no unicode-range, so only the
   last one could ever win. Delete every font from the Font Manager.

   format() is plain "woff2", not "woff2-variations". The latter is a legacy
   string that a browser which does not recognise it will treat as an unknown
   format and skip the source entirely, leaving no font at all. Every browser
   that supports variable fonts supports variable WOFF2 under the plain string.

   SOFT and WONK are pinned to 0 in the files themselves, so Fraunces renders
   in its classic form rather than the quirky one Google ships as the default.
   opsz stays variable: font-optical-sizing is auto by default, so the face
   adapts from a 10px label to a 76px hero without any declaration.

   Files live in  /wp-content/themes/bricks-child/fonts/
   ============================================================================ */

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-variable-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}


/* ============================================================================
   02  TOKENS
   ----------------------------------------------------------------------------
   The Bricks Variables Manager is not used either. Nothing in Bricks needs to
   resolve these, because nothing in Bricks is styled. Editing a value here
   changes the whole site and is versioned with the theme.

   Every clamp() is calculated against a 16px root across a 480 to 1440px
   viewport. Check that the third argument is always LARGER than the first
   before editing: an inverted clamp is valid CSS that renders smaller the
   wider the screen gets, which is how --emp-text-3xs ended up at 6.56px.
   ============================================================================ */

:root:root {
  /* Doubled deliberately. Bricks emits its own variables at :root, one class
     of specificity, and its stylesheet can load after this one. :root:root is
     two classes, so these values win at any load order. Remove the doubling
     only once the Bricks Variables Manager is verified empty AND its CSS files
     have been regenerated -- deleting variables without regenerating leaves the
     old block on disk and live. */

  --emp-ink: #0E0B08;
  --emp-ink-raised: #1A1512;
  --emp-ink-sunken: #070604;
  --emp-gold: #D4A537;
  --emp-gold-light: #ECC76C;
  --emp-gold-deep: #9C7A28;
  --emp-ivory: #EEE6D6;
  --emp-ivory-dim: #B7AC97;
  --emp-ivory-faint: #968874;
  --emp-line: rgba(212, 165, 55, 0.14);
  --emp-line-strong: rgba(212, 165, 55, 0.34);
  --emp-line-quiet: rgba(238, 230, 214, 0.08);
  --emp-font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;
  --emp-font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --emp-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --emp-leading-display: 0.98;
  --emp-leading-heading: 1.1;
  --emp-leading-body: 1.7;
  --emp-leading-ui: 1.2;
  --emp-tracking-display: -0.01em;
  --emp-tracking-eyebrow: 0.32em;
  --emp-tracking-ui: 0.06em;
  --emp-width-page: 1280px;
  --emp-width-prose: 65ch;
  --emp-width-narrow: 640px;
  --emp-gutter: clamp(1.5rem, -0.375rem + 6.25vw, 5.25rem);
  --emp-dur: 420ms;
  --emp-dur-fast: 200ms;
  --emp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --emp-lift: -3px;
  --emp-radius: 2px;
  --emp-radius-pill: 999px;
  --emp-border: 1px;
  --emp-focus-offset: 4px;
  --emp-text-3xs: clamp(0.625rem, 0.5938rem + 0.1042vw, 0.6875rem);
  --emp-text-2xs: clamp(0.6875rem, 0.6562rem + 0.1042vw, 0.75rem);
  --emp-text-xs: clamp(0.75rem, 0.7188rem + 0.1042vw, 0.8125rem);
  --emp-text-s: clamp(0.875rem, 0.8438rem + 0.1042vw, 0.9375rem);
  --emp-text-m: clamp(1rem, 0.9688rem + 0.1042vw, 1.062rem);
  --emp-text-l: clamp(1.062rem, 1rem + 0.2083vw, 1.188rem);
  --emp-text-xl: clamp(1.25rem, 1.125rem + 0.4167vw, 1.5rem);
  --emp-text-2xl: clamp(1.625rem, 1.438rem + 0.625vw, 2rem);
  --emp-text-3xl: clamp(2rem, 1.562rem + 1.458vw, 2.875rem);
  --emp-text-4xl: clamp(2.375rem, 1.312rem + 3.542vw, 4.5rem);
  --emp-text-5xl: clamp(3rem, 0.5rem + 8.333vw, 8rem);
  --emp-space-3xs: clamp(0.25rem, 0.1875rem + 0.2083vw, 0.375rem);
  --emp-space-2xs: clamp(0.5rem, 0.375rem + 0.4167vw, 0.75rem);
  --emp-space-xs: clamp(0.75rem, 0.625rem + 0.4167vw, 1rem);
  --emp-space-s: clamp(1rem, 0.75rem + 0.8333vw, 1.5rem);
  --emp-space-m: clamp(1.5rem, 1.125rem + 1.25vw, 2.25rem);
  --emp-space-l: clamp(2rem, 1.5rem + 1.667vw, 3rem);
  --emp-space-xl: clamp(3rem, 2.5rem + 1.667vw, 4rem);
  --emp-space-2xl: clamp(3.5rem, 2.625rem + 2.917vw, 5.25rem);
  --emp-space-3xl: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  --emp-space-4xl: clamp(6rem, 3.75rem + 7.5vw, 10.5rem);
}


/* ============================================================================
   03  BRICKS AND BROWSER RESET
   ----------------------------------------------------------------------------
   Bricks' own element defaults sit inside its "bricks" cascade layer, and an
   un-layered rule beats a layered one regardless of specificity or source
   order. Everything in this file is un-layered, so these overrides hold
   without !important and without chaining onto .brxe- classes.

   The one exception is the margin reset below. Margins do not collapse inside
   flex or grid, so a heading's margin ADDS to the parent's gap rather than
   overlapping it. If a Bricks Theme Style is ever created it scopes typography
   to #brx-content, which is ID specificity and outranks any class here, so
   this reset keeps !important deliberately.
   ============================================================================ */

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

/* Bricks' frontend.css ships html { font-size: 62.5% } so that 1rem is 10px.
   Every clamp() in section 02 is calculated against a 16px root, so leaving it
   renders the entire site at 62.5% of its intended size. A Bricks Theme Style
   used to override this, and deleting the theme styles removed the correction
   along with everything else that was wrong in them.

   :root is one class of specificity and beats Bricks' bare html selector at any
   load order. This is safe: Bricks' own frontend CSS uses rem exactly once in
   32KB, so nothing of theirs depends on the 62.5% root. */
:root {
  font-size: 100%;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
}

/* Spacing between siblings belongs to the parent's gap, never to the child. */
.l-stack > *,
.l-cluster > *,
.l-grid > *,
.l-split > *,
.c-footer__top > *,
.c-footer__base > * {
  margin-block: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================================
   04  BASE ELEMENTS
   ----------------------------------------------------------------------------
   This is what Bricks Theme Styles would otherwise do. Doing it here means
   there is no #brx-content ID-specificity rule to fight later, and the builder
   canvas shows the same result as the front end because the child stylesheet
   is enqueued for the canvas too.
   ============================================================================ */

body {
  margin: 0;
  background-color: var(--emp-ink);
  color: var(--emp-ivory);
  font-family: var(--emp-font-body);
  font-size: var(--emp-text-m);
  line-height: var(--emp-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--emp-font-display);
  font-weight: 400;
  line-height: var(--emp-leading-heading);
  color: var(--emp-ivory);
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--emp-gold);
}

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

::selection {
  background-color: var(--emp-gold);
  color: var(--emp-ink);
}

:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--emp-gold);
  outline-offset: var(--emp-focus-offset);
}

/* The display face is the only place a second family appears. Everything
   else inherits Manrope from body, which is why no class sets a font. */
.t-display,
.t-h1,
.t-h2,
.t-h3,
.c-menu__link {
  font-family: var(--emp-font-display);
}

.t-mono {
  font-family: var(--emp-font-mono);
}


/* ============================================================================
   05  LAYOUT CLASSES
   ----------------------------------------------------------------------------
   Own display, grid, flex, gap, padding, max-width and position.
   Never colour, font or border. flex-direction is always explicit.
   ============================================================================ */

.l-section {
  padding-top: var(--emp-space-3xl);
  padding-right: var(--emp-gutter);
  padding-bottom: var(--emp-space-3xl);
  padding-left: var(--emp-gutter);
  position: relative;
}

.l-section--tight {
  padding-top: var(--emp-space-2xl);
  padding-bottom: var(--emp-space-2xl);
}

.l-section--hero {
  padding-top: var(--emp-space-4xl);
  padding-bottom: var(--emp-space-4xl);
  min-height: 90svh;
}

.l-container {
  width: 100%;
  max-width: var(--emp-width-page);
  margin-right: auto;
  margin-left: auto;
}

.l-prose {
  max-width: var(--emp-width-prose);
}

.l-narrow {
  max-width: var(--emp-width-narrow);
}

.l-stack {
  display: flex;
  flex-direction: column;
  row-gap: var(--emp-space-m);
  column-gap: var(--emp-space-m);
}

.l-stack--s {
  row-gap: var(--emp-space-s);
  column-gap: var(--emp-space-s);
}

.l-stack--l {
  row-gap: var(--emp-space-xl);
  column-gap: var(--emp-space-xl);
}

.l-cluster {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--emp-space-s);
  column-gap: var(--emp-space-s);
}

/* Always pair .l-grid with an explicit count -- .l-grid--2 or .l-grid--3.
   On its own, auto-fit derives the column count from the container's width,
   which means the Bricks editor canvas (narrower by the width of the panel)
   and the front end can legitimately disagree: three columns in the builder,
   four on the live page. Nothing else in this system behaves that way. */
.l-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  row-gap: var(--emp-space-m);
  column-gap: var(--emp-space-m);
}

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

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

.l-grid--hairline {
  row-gap: 1px;
  column-gap: 1px;
  background-color: var(--emp-line);
  border-top-width: var(--emp-border);
  border-top-style: solid;
  border-top-color: var(--emp-line);
  border-right-width: var(--emp-border);
  border-right-style: solid;
  border-right-color: var(--emp-line);
  border-bottom-width: var(--emp-border);
  border-bottom-style: solid;
  border-bottom-color: var(--emp-line);
  border-left-width: var(--emp-border);
  border-left-style: solid;
  border-left-color: var(--emp-line);
}

.l-split {
  display: grid;
  grid-template-columns: 200px 1fr;
  row-gap: var(--emp-space-m);
  column-gap: var(--emp-space-m);
}


/* ============================================================================
   06  TYPOGRAPHY CLASSES
   ----------------------------------------------------------------------------
   Own size, weight, line-height, tracking and text colour.
   Family comes from section 04, so no class repeats it.
   ============================================================================ */

.t-display {
  font-size: var(--emp-text-5xl);
  font-weight: 400;
  line-height: var(--emp-leading-display);
  letter-spacing: var(--emp-tracking-display);
  color: var(--emp-ivory);
  text-wrap: balance;
}

.t-h1 {
  font-size: var(--emp-text-4xl);
  font-weight: 400;
  line-height: var(--emp-leading-display);
  color: var(--emp-ivory);
  text-wrap: balance;
}

.t-h2 {
  font-size: var(--emp-text-3xl);
  font-weight: 500;
  line-height: var(--emp-leading-heading);
  color: var(--emp-ivory);
  text-wrap: balance;
}

.t-h3 {
  font-size: var(--emp-text-xl);
  font-weight: 500;
  line-height: var(--emp-leading-heading);
  color: var(--emp-ivory);
}

.t-lede {
  font-size: var(--emp-text-l);
  font-weight: 400;
  line-height: var(--emp-leading-body);
  color: var(--emp-ivory-dim);
  max-width: var(--emp-width-prose);
}

.t-body {
  font-size: var(--emp-text-m);
  font-weight: 400;
  line-height: var(--emp-leading-body);
  color: var(--emp-ivory-dim);
}

.t-meta {
  font-size: var(--emp-text-s);
  color: var(--emp-ivory-faint);
}

.t-eyebrow {
  font-size: var(--emp-text-2xs);
  font-weight: 700;
  line-height: var(--emp-leading-ui);
  letter-spacing: var(--emp-tracking-eyebrow);
  color: var(--emp-gold);
  text-transform: uppercase;
  text-indent: var(--emp-tracking-eyebrow);
}

.t-eyebrow--quiet {
  color: var(--emp-ivory-faint);
}

.t-mono {
  font-size: var(--emp-text-xs);
  color: var(--emp-ivory-faint);
}


/* Prose lists ------------------------------------------------------------- */
/* The system had no list styling at all, so a <ul> inside .l-prose fell all the
   way through to the browser default: 40px of padding, a marker in body Ivory,
   and li text at the root size rather than the body size -- brighter and
   smaller than the paragraphs either side of it. Handled here rather than by
   putting .t-body on every li, because every prose page after this one will
   hit the same thing.

   li + li rather than a gap, so the list does not need .l-stack on it. If one
   is there anyway, .l-stack > * zeroes this margin and the row-gap takes over,
   so the two cannot double up. .c-cell is listed alongside .l-prose because a
   hairline-grid cell holds prose too. */
.l-prose ul,
.l-prose ol,
.c-cell ul,
.c-cell ol {
  padding-left: 1.3em;
  margin-top: 0;
  margin-bottom: 0;
}

.l-prose li,
.c-cell li {
  font-size: var(--emp-text-m);
  line-height: var(--emp-leading-body);
  color: var(--emp-ivory-dim);
}

.l-prose li + li,
.c-cell li + li {
  margin-top: var(--emp-space-s);
}

.l-prose li::marker,
.c-cell li::marker {
  color: var(--emp-gold);
}

/* ============================================================================
   07  COMPONENT CLASSES
   ----------------------------------------------------------------------------
   Own everything inside their own box. Never outer margin:
   spacing between things belongs to the parent's gap.
   ============================================================================ */

.c-btn {
  display: inline-flex;
  flex-direction: row;
  flex-shrink: 0;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  font-size: var(--emp-text-s);
  font-weight: 600;
  line-height: var(--emp-leading-ui);
  letter-spacing: var(--emp-tracking-ui);
  text-transform: uppercase;
  text-decoration-line: none;
  cursor: pointer;
  padding-top: 14px;
  padding-right: 30px;
  padding-bottom: 14px;
  padding-left: 30px;
  border-top-width: var(--emp-border);
  border-top-style: solid;
  border-top-color: transparent;
  border-right-width: var(--emp-border);
  border-right-style: solid;
  border-right-color: transparent;
  border-bottom-width: var(--emp-border);
  border-bottom-style: solid;
  border-bottom-color: transparent;
  border-left-width: var(--emp-border);
  border-left-style: solid;
  border-left-color: transparent;
  border-top-left-radius: var(--emp-radius);
  border-top-right-radius: var(--emp-radius);
  border-bottom-right-radius: var(--emp-radius);
  border-bottom-left-radius: var(--emp-radius);
  transition-property: background-color, border-color, color;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

.c-btn--primary {
  background-color: var(--emp-gold);
  color: var(--emp-ink);
  border-top-color: var(--emp-gold);
  border-right-color: var(--emp-gold);
  border-bottom-color: var(--emp-gold);
  border-left-color: var(--emp-gold);
}

.c-btn--primary:hover,
.c-btn--primary:focus-visible {
  background-color: var(--emp-gold-light);
  color: var(--emp-ink);
  border-top-color: var(--emp-gold-light);
  border-right-color: var(--emp-gold-light);
  border-bottom-color: var(--emp-gold-light);
  border-left-color: var(--emp-gold-light);
}

.c-btn--ghost {
  background-color: transparent;
  color: var(--emp-ivory);
  border-top-color: var(--emp-line-strong);
  border-right-color: var(--emp-line-strong);
  border-bottom-color: var(--emp-line-strong);
  border-left-color: var(--emp-line-strong);
}

.c-btn--ghost:hover,
.c-btn--ghost:focus-visible {
  color: var(--emp-gold);
  border-top-color: var(--emp-gold);
  border-right-color: var(--emp-gold);
  border-bottom-color: var(--emp-gold);
  border-left-color: var(--emp-gold);
}

.c-card {
  /* A card is sometimes a Div and sometimes a Div tagged <a>. These two lines
     are what stop the linked version arriving with browser-default underlines
     on every line of text inside it. */
  text-decoration-line: none;
  color: inherit;
  background-color: var(--emp-ink-raised);
  border-top-width: var(--emp-border);
  border-top-style: solid;
  border-top-color: var(--emp-line);
  border-right-width: var(--emp-border);
  border-right-style: solid;
  border-right-color: var(--emp-line);
  border-bottom-width: var(--emp-border);
  border-bottom-style: solid;
  border-bottom-color: var(--emp-line);
  border-left-width: var(--emp-border);
  border-left-style: solid;
  border-left-color: var(--emp-line);
  border-top-left-radius: var(--emp-radius);
  border-top-right-radius: var(--emp-radius);
  border-bottom-right-radius: var(--emp-radius);
  border-bottom-left-radius: var(--emp-radius);
  padding-top: var(--emp-space-m);
  padding-right: var(--emp-space-m);
  padding-bottom: var(--emp-space-m);
  padding-left: var(--emp-space-m);
  transition-property: border-color;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

/* Only a linked card gets the heading colour shift, so a static card does not
   light up under the cursor as if it were going somewhere. */
a.c-card:hover h2,
a.c-card:hover h3,
a.c-card:focus-visible h2,
a.c-card:focus-visible h3 {
  color: var(--emp-gold);
}

.c-card:hover {
  border-top-color: var(--emp-line-strong);
  border-right-color: var(--emp-line-strong);
  border-bottom-color: var(--emp-line-strong);
  border-left-color: var(--emp-line-strong);
}

.c-pill {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  /* Every place a pill is used, it sits inside a column flex container --
     .c-card .l-stack, .c-cell -- where the default align-items: stretch turns
     it into a full-width bar. This is the one line that keeps it a pill. */
  align-self: flex-start;
  font-size: var(--emp-text-3xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--emp-tracking-eyebrow);
  color: var(--emp-gold);
  padding-top: 7px;
  padding-right: 14px;
  padding-bottom: 7px;
  padding-left: 14px;
  border-top-width: var(--emp-border);
  border-top-style: solid;
  border-top-color: var(--emp-line-strong);
  border-right-width: var(--emp-border);
  border-right-style: solid;
  border-right-color: var(--emp-line-strong);
  border-bottom-width: var(--emp-border);
  border-bottom-style: solid;
  border-bottom-color: var(--emp-line-strong);
  border-left-width: var(--emp-border);
  border-left-style: solid;
  border-left-color: var(--emp-line-strong);
  border-top-left-radius: var(--emp-radius);
  border-top-right-radius: var(--emp-radius);
  border-bottom-right-radius: var(--emp-radius);
  border-bottom-left-radius: var(--emp-radius);
}

.c-field__label {
  display: block;
  font-size: var(--emp-text-3xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--emp-ivory-faint);
  margin-bottom: var(--emp-space-2xs);
}

.c-field__input {
  width: 100%;
  font-size: var(--emp-text-m);
  color: var(--emp-ivory);
  background-color: var(--emp-ink-raised);
  border-top-width: var(--emp-border);
  border-top-style: solid;
  border-top-color: var(--emp-line-strong);
  border-right-width: var(--emp-border);
  border-right-style: solid;
  border-right-color: var(--emp-line-strong);
  border-bottom-width: var(--emp-border);
  border-bottom-style: solid;
  border-bottom-color: var(--emp-line-strong);
  border-left-width: var(--emp-border);
  border-left-style: solid;
  border-left-color: var(--emp-line-strong);
  border-top-left-radius: var(--emp-radius);
  border-top-right-radius: var(--emp-radius);
  border-bottom-right-radius: var(--emp-radius);
  border-bottom-left-radius: var(--emp-radius);
  padding-top: 14px;
  padding-right: 16px;
  padding-bottom: 14px;
  padding-left: 16px;
  transition-property: border-color;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

.c-field__input:focus {
  border-top-color: var(--emp-gold);
  border-right-color: var(--emp-gold);
  border-bottom-color: var(--emp-gold);
  border-left-color: var(--emp-gold);
  outline-style: none;
}

.c-rule {
  height: 1px;
  background-color: var(--emp-line);
  border-top-width: 0;
  border-top-style: none;
  border-right-width: 0;
  border-right-style: none;
  border-bottom-width: 0;
  border-bottom-style: none;
  border-left-width: 0;
  border-left-style: none;
}

.c-link {
  position: relative;
  display: inline-block;
  color: var(--emp-ivory);
  text-decoration-line: none;
  padding-bottom: 6px;
  transition-property: color;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

.c-link:hover,
.c-link:focus-visible {
  color: var(--emp-gold);
}

.c-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition-property: transform;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

.c-link:hover::after,
.c-link:focus-visible::after {
  transform: scaleX(1);
}

/* Work: a portfolio item. Promoted here from section 12 -- /work/ reuses it,
   which is what the c- prefix was reserved for. ------------------------ */
.c-work {
  display: flex;
  flex-direction: column;
  row-gap: var(--emp-space-s);
  text-decoration-line: none;
  color: var(--emp-ivory);
}

.c-work__frame {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--emp-ink-raised);
  background-image: linear-gradient(140deg, rgba(212, 165, 55, 0.10), rgba(212, 165, 55, 0) 58%);
  border-top-width: var(--emp-border);
  border-top-style: solid;
  border-top-color: var(--emp-line);
  border-right-width: var(--emp-border);
  border-right-style: solid;
  border-right-color: var(--emp-line);
  border-bottom-width: var(--emp-border);
  border-bottom-style: solid;
  border-bottom-color: var(--emp-line);
  border-left-width: var(--emp-border);
  border-left-style: solid;
  border-left-color: var(--emp-line);
  border-top-left-radius: var(--emp-radius);
  border-top-right-radius: var(--emp-radius);
  border-bottom-right-radius: var(--emp-radius);
  border-bottom-left-radius: var(--emp-radius);
  transition-property: border-color, transform;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

/* Placeholder monogram. Replace the whole ::after with a real image when the
   photography exists; nothing else in the class needs to change. */
.c-work__frame::after {
  content: attr(data-mark);
  position: absolute;
  right: 6%;
  bottom: 4%;
  font-family: var(--emp-font-display);
  font-size: clamp(3rem, 1rem + 8vw, 7rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(212, 165, 55, 0.09);
}

/* Real screenshots. The image sits above the monogram rather than replacing
   it, so a frame with an image hides the placeholder and a frame without one
   still draws it. object-position pins the top of the shot -- centring a
   website screenshot crops away the header, which is the part worth showing. */
.c-work__frame img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  /* A bright screenshot on an Ink page is a glaring rectangle. Held slightly
     back at rest and released on hover, which also gives the card something
     to do that is not just a border colour. */
  filter: saturate(0.9) brightness(0.86);
  transition-property: transform, filter;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

/* A narrow wash top and bottom, so the image sits in the palette rather than
   on top of it. :has() scopes it to frames that actually hold an image, which
   leaves the homepage's monogram frames exactly as they were. */
.c-work__frame:has(img)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: linear-gradient(180deg, rgba(212, 165, 55, 0.10), rgba(212, 165, 55, 0) 30%, rgba(14, 11, 8, 0) 68%, rgba(14, 11, 8, 0.38));
  pointer-events: none;
}

.c-work:hover .c-work__frame img {
  transform: scale(1.03);
  filter: none;
}

/* 16/9 for a case study hero, where a 4/3 frame would push the first
   paragraph off a laptop screen. */
.c-work__frame--wide {
  aspect-ratio: 16 / 9;
}

/* A portrait is not a website screenshot: taller, and cropped toward the top
   third rather than pinned to the very top, which on a person removes the head. */
.c-work__frame--portrait {
  aspect-ratio: 4 / 5;
  /* Capped rather than filling its grid column. At 4/5 a half-width column is
     850px tall, which makes a headshot the loudest thing on the page. */
  max-width: 380px;
}

.c-work__frame--portrait img {
  object-position: 50% 25%;
}


.c-work:hover .c-work__frame {
  border-top-color: var(--emp-line-strong);
  border-right-color: var(--emp-line-strong);
  border-bottom-color: var(--emp-line-strong);
  border-left-color: var(--emp-line-strong);
}

.c-work__meta {
  display: flex;
  flex-direction: column;
  row-gap: 7px;
}

.c-work__sector {
  font-size: var(--emp-text-3xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emp-ivory-faint);
}

.c-work__title {
  font-family: var(--emp-font-display);
  font-size: var(--emp-text-xl);
  font-weight: 500;
  line-height: var(--emp-leading-heading);
  color: var(--emp-ivory);
  transition-property: color;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

.c-work:hover .c-work__title {
  color: var(--emp-gold);
}

.c-work__note {
  font-size: var(--emp-text-s);
  line-height: var(--emp-leading-body);
  color: var(--emp-ivory-dim);
  max-width: 42ch;
}


/* Answer block and facts strip. Both were written for the case study and both
   turned out to be page-type-agnostic -- a service page wants exactly the same
   quotable opener and the same four-up strip -- so they are promoted here and
   renamed off the p-case prefix. ---------------------------------------- */
.c-answer {
  max-width: 62ch;
  font-size: var(--emp-text-l);
  line-height: var(--emp-leading-body);
  color: var(--emp-ivory-dim);
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: var(--emp-gold);
  padding-left: var(--emp-space-m);
}
.c-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--emp-space-m);
  row-gap: var(--emp-space-m);
  padding-top: var(--emp-space-m);
  padding-bottom: var(--emp-space-m);
  border-top-width: var(--emp-border);
  border-top-style: solid;
  border-top-color: var(--emp-line);
  border-bottom-width: var(--emp-border);
  border-bottom-style: solid;
  border-bottom-color: var(--emp-line);
}
.c-facts__item {
  display: flex;
  flex-direction: column;
  row-gap: var(--emp-space-3xs);
}

/* A cell for .l-grid--hairline, which draws its rules with a 1px gap over a
   line-coloured background. The cell therefore paints the page colour and
   carries no border of its own -- adding one doubles every internal rule. */
.c-cell {
  display: flex;
  flex-direction: column;
  row-gap: var(--emp-space-2xs);
  background-color: var(--emp-ink);
  padding-top: var(--emp-space-m);
  padding-right: var(--emp-space-m);
  padding-bottom: var(--emp-space-m);
  padding-left: var(--emp-space-m);
}

/* ============================================================================
   08  CHROME CLASSES
   ----------------------------------------------------------------------------
   Header, nav, mobile menu and footer. Used only by the two
   Bricks templates.
   ============================================================================ */

.c-header {
  background-color: var(--emp-ink);
  border-bottom-width: var(--emp-border);
  border-bottom-style: solid;
  border-bottom-color: transparent;
  transition-property: border-color;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

/* The cap is the CONTENT width, so the gutter is added on the outside rather
   than eaten out of the middle. Without the calc the inner box is
   --emp-width-page wide and the padding comes out of that, leaving the brand
   and nav sitting one full gutter inboard of where .l-container puts page
   content on the same screen. That misalignment is invisible until a section
   is placed underneath, and then it is impossible to unsee. */
.c-header__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: calc(var(--emp-width-page) + 2 * var(--emp-gutter));
  height: 84px;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--emp-gutter);
  padding-left: var(--emp-gutter);
}

.c-brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  color: var(--emp-ivory);
  text-decoration-line: none;
  flex-shrink: 0;
  column-gap: 11px;
  transition-property: color;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

.c-brand:hover,
.c-brand:focus-visible {
  color: var(--emp-gold);
}

.c-brand__mark {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}

.c-brand__word {
  height: 13px;
  width: auto;
  display: block;
}

.c-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 34px;
}

.c-nav__link {
  position: relative;
  font-size: var(--emp-text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emp-ivory-dim);
  text-decoration-line: none;
  white-space: nowrap;
  padding-bottom: 6px;
  transition-property: color;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

.c-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition-property: transform;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

.c-nav__link:hover,
.c-nav__link:focus-visible {
  color: var(--emp-ivory);
}

.c-nav__link:hover::after,
.c-nav__link:focus-visible::after {
  transform: scaleX(1);
}

.c-btn--sm {
  font-size: var(--emp-text-xs);
  padding-top: 12px;
  padding-right: 24px;
  padding-bottom: 12px;
  padding-left: 24px;
}

/* The three bars are drawn with the button's own background plus its two
   pseudo-elements, so the element needs no children at all. That is not a
   stylistic choice: the Bricks Button element has no children slot, so a
   nested-span hamburger cannot be built in the builder. Nothing to add in
   Bricks beyond the class.

   The bars are right-aligned and the bottom one is deliberately short; it
   evens up on hover. A perfectly symmetrical hamburger is the most generic
   mark on the web, and this costs nothing. */
.c-header__toggle {
  display: none;
  position: relative;
  width: 30px;
  height: 30px;
  color: var(--emp-ivory);
  background-color: transparent;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 22px 1px;
  background-position: right center;
  cursor: pointer;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border-top-width: 0;
  border-top-style: none;
  border-right-width: 0;
  border-right-style: none;
  border-bottom-width: 0;
  border-bottom-style: none;
  border-left-width: 0;
  border-left-style: none;
  transition-property: color;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

.c-header__toggle::before,
.c-header__toggle::after {
  content: "";
  position: absolute;
  right: 0;
  height: 1px;
  background-color: currentColor;
  transition-property: width;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

.c-header__toggle::before {
  top: 8px;
  width: 22px;
}

.c-header__toggle::after {
  bottom: 8px;
  width: 14px;
}

.c-header__toggle:hover {
  color: var(--emp-gold);
}

.c-header__toggle:hover::after {
  width: 22px;
}

.c-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  background-color: var(--emp-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  padding-top: var(--emp-space-4xl);
  padding-right: var(--emp-gutter);
  padding-bottom: var(--emp-space-3xl);
  padding-left: var(--emp-gutter);
  transition-property: opacity, visibility;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

.c-menu__list {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  row-gap: var(--emp-space-s);
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

.c-menu__link {
  font-size: var(--emp-text-3xl);
  font-weight: 400;
  line-height: var(--emp-leading-heading);
  color: var(--emp-ivory);
  text-decoration-line: none;
  display: inline-block;
  transform: translateY(12px);
  opacity: 0;
  transition-property: color, transform, opacity;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

.c-menu__link:hover,
.c-menu__link:focus-visible {
  color: var(--emp-gold);
}

/* The X is two rotated pseudo-elements, for the same reason as the hamburger:
   a Bricks Button cannot hold an Icon. Putting an Icon element beside the
   button instead leaves a real element sitting in the menu's flex column,
   which both crowds the links and does nothing when clicked, because it is
   not the button. */
.c-menu__close {
  position: absolute;
  top: 27px;
  right: var(--emp-gutter);
  display: block;
  width: 30px;
  height: 30px;
  color: var(--emp-ivory);
  background-color: transparent;
  cursor: pointer;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border-top-width: 0;
  border-top-style: none;
  border-right-width: 0;
  border-right-style: none;
  border-bottom-width: 0;
  border-bottom-style: none;
  border-left-width: 0;
  border-left-style: none;
  transition-property: color;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

.c-menu__close::before,
.c-menu__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 1px;
  background-color: currentColor;
}

.c-menu__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.c-menu__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.c-menu__close:hover {
  color: var(--emp-gold);
}

.c-footer {
  background-color: var(--emp-ink-sunken);
  border-top-width: var(--emp-border);
  border-top-style: solid;
  border-top-color: var(--emp-line);
  padding-top: var(--emp-space-3xl);
  padding-bottom: var(--emp-space-l);
}

.c-footer__inner {
  width: 100%;
  max-width: calc(var(--emp-width-page) + 2 * var(--emp-gutter));
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--emp-gutter);
  padding-left: var(--emp-gutter);
}
.c-footer__top {
  display: grid;
  width: 100%;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  align-items: start;
  row-gap: var(--emp-space-xl);
  column-gap: var(--emp-space-l);
}

.c-footer__heading {
  font-size: var(--emp-text-3xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emp-ivory-faint);
  margin-bottom: var(--emp-space-s);
}

.c-footer__bio {
  max-width: 38ch;
}
.c-footer__list {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  row-gap: 11px;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

.c-footer__link {
  font-size: var(--emp-text-s);
  color: var(--emp-ivory-dim);
  text-decoration-line: none;
  transition-property: color;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

.c-footer__link:hover,
.c-footer__link:focus-visible {
  color: var(--emp-gold);
}

.c-footer__base {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-size: var(--emp-text-xs);
  color: var(--emp-ivory-faint);
  row-gap: var(--emp-space-2xs);
  column-gap: var(--emp-space-m);
  border-top-width: var(--emp-border);
  border-top-style: solid;
  border-top-color: var(--emp-line);
  margin-top: var(--emp-space-xl);
  padding-top: var(--emp-space-s);
}

.c-footer__legal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--emp-space-2xs);
  column-gap: var(--emp-space-s);
}
.c-footer__wordmark {
  display: block;
  width: 100%;
  height: auto;
  color: var(--emp-line);
  margin-top: var(--emp-space-xl);
}


/* ============================================================================
   09  RUNTIME STATE CLASSES
   ----------------------------------------------------------------------------
   Added by js/empyria.js at runtime, so Bricks can never emit
   them: it only generates CSS for classes on a rendered element.
   LiteSpeed UCSS deletes them too, for the same reason. Keep
   Generate UCSS off, or these five rules disappear and the
   hairline, the current-page underline and the whole mobile
   menu stop working.
   ============================================================================ */

.c-header.is-scrolled {
  border-bottom-color: var(--emp-line);
}

.c-nav__link.is-current {
  color: var(--emp-gold);
}

.c-nav__link.is-current::after {
  transform: scaleX(1);
}

.c-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.c-menu.is-open .c-menu__link {
  transform: translateY(0);
  opacity: 1;
}

body.is-locked {
  overflow: hidden;
}


/* ============================================================================
   10  UTILITIES
   ----------------------------------------------------------------------------
   One property each. Nothing else, ever.
   ============================================================================ */

.u-hairline-top {
  border-top-width: var(--emp-border);
  border-top-style: solid;
  border-top-color: var(--emp-line);
}

.u-tabular {
  font-variant-numeric: tabular-nums;
}

.u-scroll-x {
  overflow-x: auto;
}

.u-invert {
  background-color: var(--emp-ivory);
  color: var(--emp-ink);
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  margin-top: -1px;
  margin-right: -1px;
  margin-bottom: -1px;
  margin-left: -1px;
  border-top-width: 0;
  border-top-style: none;
  border-right-width: 0;
  border-right-style: none;
  border-bottom-width: 0;
  border-bottom-style: none;
  border-left-width: 0;
  border-left-style: none;
}


/* ============================================================================
   11  RESPONSIVE
   ----------------------------------------------------------------------------
   Matches the Bricks default breakpoints so builder-set responsive
   values and these rules never disagree: 991px tablet portrait,
   767px mobile landscape.
   ============================================================================ */

@media (max-width: 991px) {
  .l-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .l-split   { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .l-grid--2 { grid-template-columns: 1fr; }
  .l-grid--3 { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
  .c-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .c-header__inner { height: 64px; }
  .c-nav { display: none; }
  .c-header__toggle { display: block; }
  .c-footer__top { grid-template-columns: 1fr; }
  .c-footer__wordmark { margin-top: var(--emp-space-l); }
}

@media (prefers-reduced-motion: reduce) {
  .c-menu__link { transform: translateY(0); opacity: 1; }
}


/* ============================================================================
   12  HOMEPAGE
   ----------------------------------------------------------------------------
   Eighteen classes used by the homepage and nothing else yet.

   The c- prefix on the work component is deliberate: /work/ will reuse it, so
   it is a real component. Everything with a p- prefix is a one-page layout
   arrangement. If a second page needs one, rename it to c- and move it up into
   section 07 rather than leaving a page-scoped name doing general work.

   This section sits after the responsive block on purpose. Its own media
   queries are at the end of it, so they land after section 11 and win at equal
   specificity without needing to be merged into it.
   ============================================================================ */

/* Hero ------------------------------------------------------------------- */
.p-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* --emp-text-5xl is a one-or-two-word size. This headline is seven words, so
   it takes 4xl and caps its own measure. Constraining the whole stack instead
   would drag the eyebrow and the lede in with it. */
.p-hero .t-display {
  font-size: var(--emp-text-4xl);
  max-width: 15ch;
}

.p-hero .t-lede {
  max-width: 52ch;
}

.p-hero__cta {
  margin-top: var(--emp-space-s);
}

/* The hairline that closes the hero. Sits inside the gutter so it lines up
   with the content column rather than running edge to edge. */
.p-hero__rule {
  position: absolute;
  left: var(--emp-gutter);
  right: var(--emp-gutter);
  bottom: 0;
  height: 1px;
  background-color: var(--emp-line);
}

/* Answer block ----------------------------------------------------------- */
.p-answer .t-lede {
  color: var(--emp-ivory);
}

/* A well: a band that sits beneath the page rather than on it. */
.p-well {
  background-color: var(--emp-ink-sunken);
  border-top-width: var(--emp-border);
  border-top-style: solid;
  border-top-color: var(--emp-line);
  border-bottom-width: var(--emp-border);
  border-bottom-style: solid;
  border-bottom-color: var(--emp-line);
}

/* Numbered needs --------------------------------------------------------- */
.p-needs {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: var(--emp-space-xl);
  column-gap: var(--emp-space-xl);
  counter-reset: need;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

/* A sequence rather than a set. .p-needs is a two-column grid because the
   homepage uses it for five parallel items; a numbered process is read in
   order, and two columns make the eye zigzag 01-02, 03-04, 05-nothing. */
.p-needs--flow {
  grid-template-columns: 1fr;
  row-gap: var(--emp-space-l);
}

.p-needs > li {
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: var(--emp-space-s);
  row-gap: 9px;
  counter-increment: need;
}

.p-needs > li::before {
  content: counter(need, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--emp-font-mono);
  font-size: var(--emp-text-xs);
  line-height: 1.6;
  color: var(--emp-gold);
  padding-top: 4px;
}

.p-needs > li > h3 { grid-column: 2; grid-row: 1; }
.p-needs > li > p  { grid-column: 2; grid-row: 2; max-width: 46ch; }

/* In a single column the 46ch measure that suits a two-column grid leaves half
   the page empty. Placed after .p-needs > li > p rather than beside --flow,
   because the two selectors are the same specificity and order decides. */
.p-needs--flow > li > p { max-width: 62ch; }

/* A dated chronology rather than a numbered one. Same grid, but the number in
   column one is content (a year) instead of a counter, because 01 to 05 sitting
   next to 2008 to 2026 is two numbering systems doing one job. */
.p-needs--dated { counter-reset: none; }

.p-needs--dated > li {
  grid-template-columns: 62px 1fr;
}

.p-needs--dated > li::before { content: none; }

.p-needs__year {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--emp-font-mono);
  font-size: var(--emp-text-xs);
  line-height: 1.6;
  color: var(--emp-gold);
  padding-top: 4px;
}

/* Principles ------------------------------------------------------------- */
.p-principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: var(--emp-space-xl);
  column-gap: var(--emp-space-xl);
}

.p-principles p { max-width: 44ch; }

/* FAQ -------------------------------------------------------------------- */
.p-faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: var(--emp-space-xl);
  column-gap: var(--emp-space-xl);
}

.p-faq__item {
  display: flex;
  flex-direction: column;
  row-gap: 11px;
  padding-top: var(--emp-space-m);
  border-top-width: var(--emp-border);
  border-top-style: solid;
  border-top-color: var(--emp-line);
}

.p-faq__item p { max-width: 48ch; }

/* The one thing on this page that is not decided yet. Deliberately loud. */
.p-tbd {
  font-family: var(--emp-font-mono);
  font-size: 0.86em;
  color: var(--emp-gold);
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: var(--emp-gold-deep);
  padding-bottom: 1px;
}

.p-tbd::before { content: "["; }
.p-tbd::after  { content: "]"; }

/* Close ------------------------------------------------------------------ */
.p-close {
  text-align: center;
}

.p-close .l-stack {
  margin-right: auto;
  margin-left: auto;
  align-items: center;
}

.p-close__head {
  font-size: var(--emp-text-4xl);
}

.p-close .t-lede {
  max-width: 52ch;
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 991px) {
  .p-needs,
  .p-principles,
  .p-faq { grid-template-columns: 1fr; }
  .p-hero .t-display { max-width: none; }
}

@media (max-width: 767px) {
  .p-needs > li { grid-template-columns: 34px 1fr; }
  /* A year needs more room than a two-digit counter, at every width. */
  .p-needs--dated > li { grid-template-columns: 54px 1fr; }
}


/* ============================================================================
   13  SUREFORMS BRIDGE
   ----------------------------------------------------------------------------
   SureForms has no per-field class setting, so .c-field__label and
   .c-field__input cannot be put on its fields. The first version of this
   section therefore restyled its classes directly -- and lost, because
   SureForms' own selectors are longer than anything scoped sensibly under
   .srfm-form-container and its stylesheets load after the child theme.
   Measured on the live page: only #srfm-submit-btn won, because an ID beats
   every class selector. Everything else silently kept SureForms' defaults.

   What actually drives a SureForms form is 130-odd CSS custom properties
   declared in an inline <style> block scoped to one class -- a form-instance
   class like .srfm-form-container-142-bricks-ijoqlu -- plus a handful of
   structural defaults at :root in form.min.css. Every visual rule in the
   plugin reads those variables rather than hard-coding values.

   So this section does not fight the rules. It redefines the variables, on a
   selector doubled to (0,2,0) so it outranks the single-class inline block at
   any load order, and inherits down to every field. SureForms' own CSS then
   paints the Empyria design system for us, including the widgets we do not
   control: Tom Select for dropdowns and intlTelInput for the phone field.

   Two consequences worth knowing:

   1. Do not undouble .srfm-form-container.srfm-form-container. One class is
      a tie with the inline block, and the inline block is later in the
      document, so it would win.

   2. The instance class changes if the form is rebuilt or placed on another
      page. Nothing here references it, which is the point.

   Bricks emits its own #brxe-<id> .srfm-form-container block for the
   SureForms element (form padding, button and field border widths and radii).
   That is an ID selector and outranks this one, but every variable it sets is
   read only by .srfm-custom-stylings rules, and this form does not carry that
   class -- so it is inert. If a future SureForms update starts adding
   .srfm-custom-stylings, the radii here will stop applying and the fix is to
   clear those values in the Bricks element settings, not to add !important.

   Leave SureForms' own styling panel alone. Setting values there writes into
   that inline block and creates a second source of truth.
   ============================================================================ */

.srfm-form-container.srfm-form-container {

  /* Surfaces -------------------------------------------------------------- */
  /* .srfm-bg-color paints the container white by default, which is a white
     slab in the middle of a dark page. Transparent lets the section show. */
  --srfm-bg-color: transparent;
  --srfm-expandable-menu-background: var(--emp-ink-raised);

  /* Scheme: primary drives the submit button, focus rings and active states */
  --srfm-color-scheme-primary: var(--emp-gold);
  --srfm-color-scheme-text-on-primary: var(--emp-ink);
  --srfm-color-scheme-text: var(--emp-ivory);

  /* Field colour ---------------------------------------------------------- */
  --srfm-color-input-label: var(--emp-ivory-faint);
  --srfm-color-input-description: var(--emp-ivory-faint);
  --srfm-color-input-placeholder: var(--emp-ivory-faint);
  --srfm-color-input-text: var(--emp-ivory);
  --srfm-color-input-prefix: var(--emp-ivory-dim);
  --srfm-color-input-background: var(--emp-ink-raised);
  --srfm-color-input-background-hover: var(--emp-ink-raised);
  --srfm-color-input-background-disabled: var(--emp-ink-sunken);
  --srfm-color-input-border: var(--emp-line-strong);
  --srfm-color-input-border-disabled: var(--emp-line);
  --srfm-color-input-border-hover: var(--emp-gold);
  --srfm-color-input-border-focus-glow: rgba(212, 165, 55, 0.18);
  --srfm-color-input-selected: rgba(212, 165, 55, 0.12);
  --srfm-color-multi-choice-svg: var(--emp-ivory-dim);

  /* Field metrics --------------------------------------------------------- */
  --srfm-input-field-font-size: var(--emp-text-m);
  --srfm-input-field-font-weight: 400;
  --srfm-input-field-line-height: var(--emp-leading-body);
  --srfm-input-field-padding: 14px 16px;
  --srfm-input-field-border-radius: var(--emp-radius);
  --srfm-input-field-margin-top: var(--emp-space-2xs);
  --srfm-input-field-margin-bottom: 0px;
  /* auto rather than 44px: the field then sizes from its own padding and
     line-height, so inputs and the Tom Select control end up the same height
     as the type scale moves. */
  --srfm-input-height: auto;
  --srfm-flag-section-padding: 14px 0 14px 16px;

  /* Labels and descriptions ----------------------------------------------- */
  --srfm-label-font-size: var(--emp-text-3xs);
  --srfm-label-font-weight: 600;
  --srfm-label-line-height: var(--emp-leading-ui);
  --srfm-description-font-size: var(--emp-text-xs);
  --srfm-description-line-height: var(--emp-leading-body);

  /* Rhythm ---------------------------------------------------------------- */
  --srfm-row-gap-between-blocks: var(--emp-space-s);
  --srfm-column-gap-between-blocks: var(--emp-space-s);

  /* Submit button --------------------------------------------------------- */
  --srfm-btn-padding: 14px 30px;
  --srfm-btn-font-size: var(--emp-text-s);
  --srfm-btn-font-weight: 600;
  --srfm-btn-line-height: var(--emp-leading-ui);
  --srfm-btn-border-radius: var(--emp-radius);
  --srfm-btn-color-hover: var(--emp-gold-light);
  --srfm-btn-color-disabled: var(--emp-gold-deep);

  /* Dropdowns are Tom Select widgets, not native selects ------------------- */
  --srfm-dropdown-font-size: var(--emp-text-m);
  --srfm-dropdown-padding-right: 16px;
  --srfm-dropdown-input-background-hover: var(--emp-ink-raised);
  --srfm-dropdown-option-text-color: var(--emp-ivory-dim);
  --srfm-dropdown-option-selected-text: var(--emp-ivory);
  --srfm-dropdown-option-background-hover: rgba(212, 165, 55, 0.12);
  --srfm-dropdown-option-background-selected: rgba(212, 165, 55, 0.18);
  --srfm-dropdown-option-selected-icon: var(--emp-gold);
  --srfm-dropdown-menu-border-color: var(--emp-line-strong);
  --srfm-dropdown-placeholder-color: var(--emp-ivory-faint);
  --srfm-dropdown-icon-color: var(--emp-ivory-dim);
  --srfm-dropdown-icon-disabled: var(--emp-ivory-faint);
  --srfm-dropdown-badge-background: rgba(212, 165, 55, 0.12);
  --srfm-dropdown-badge-background-hover: rgba(212, 165, 55, 0.2);

  /* Validation ------------------------------------------------------------ */
  /* SureForms ships #dc2626, which is a UI red rather than an Empyria one. */
  --srfm-error-color: #C96A4A;
  --srfm-error-color-border: #C96A4A;
  --srfm-error-color-border-glow: rgba(201, 106, 74, 0.18);
  --srfm-error-font-size: var(--emp-text-xs);
  --srfm-error-font-weight: 500;
  --srfm-error-line-height: var(--emp-leading-ui);
}


/* The four things variables cannot express -------------------------------- */

/* 1. Uppercase labels. SureForms sets size, weight, line-height and colour on
   .srfm-block-label -- all variables, handled above -- but never touches
   text-transform or letter-spacing, so a short selector is enough. The
   dropdown's label is a <legend>, not a <label>, hence the second selector. */
.srfm-form-container .srfm-block-label,
.srfm-form-container .srfm-block-legend {
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* 2. The required marker. Gold rather than red: nothing has gone wrong yet.
   form.min.css hard-codes rgb(220, 38, 38) at three classes, so this one is
   doubled to four. */
.srfm-form-container.srfm-form-container .srfm-form .srfm-required {
  color: var(--emp-gold);
}

/* 3. The textarea. --srfm-input-height only reaches .srfm-input-input. */
.srfm-form-container .srfm-input-textarea {
  min-height: 160px;
  resize: vertical;
}

/* 4. The submit button's uppercase treatment and transition. Colour, padding
   and radius all arrive through the variables above. */
.srfm-form-container #srfm-submit-btn {
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: var(--emp-tracking-ui);
  transition-property: background-color, border-color, color;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}


/* Focus ------------------------------------------------------------------- */
/* SureForms' own focus rule is variable-driven and would already land on gold.
   This restates it at (0,6,0) so the focus state does not depend on a plugin
   rule surviving an update -- it is the one state that has to be right. */
.srfm-form-container.srfm-form-container .srfm-form .srfm-block .srfm-input-common:focus,
.srfm-form-container.srfm-form-container .srfm-form .srfm-block .ts-wrapper.input-active .ts-control {
  border-color: var(--emp-gold);
  box-shadow: 0 0 0 3px var(--srfm-color-input-border-focus-glow);
  outline: none;
}


/* intlTelInput ------------------------------------------------------------ */
/* The phone field's country list is intlTelInput's own markup. SureForms
   themes its container and search box from the variables above, but the list
   items keep the library's light-mode colours, which are invisible on Ink. */
.srfm-form-container .iti__country {
  color: var(--emp-ivory-dim);
}

.srfm-form-container .iti__country.iti__highlight {
  background-color: rgba(212, 165, 55, 0.12);
  color: var(--emp-ivory);
}

.srfm-form-container .iti__dial-code {
  color: var(--emp-ivory-faint);
}

.srfm-form-container .iti__search-input::placeholder {
  color: var(--emp-ivory-faint);
  opacity: 1;
}


/* Confirmation ------------------------------------------------------------ */
/* Only reachable if the form is ever switched off the redirect confirmation.
   The live setting is a redirect to /contact/thank-you/, which is what makes
   the conversion measurable. */
.srfm-form-container .srfm-success-box,
.srfm-form-container .srfm-thank-you-message {
  font-size: var(--emp-text-m);
  color: var(--emp-ivory);
  background-color: var(--emp-ink-raised);
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: var(--emp-gold);
  padding-top: var(--emp-space-s);
  padding-right: var(--emp-space-s);
  padding-bottom: var(--emp-space-s);
  padding-left: var(--emp-space-s);
}


/* ============================================================================
   14  CONTACT
   ============================================================================ */

.p-contact {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  column-gap: var(--emp-space-2xl);
  row-gap: var(--emp-space-xl);
  align-items: start;
}

.p-contact__aside {
  display: flex;
  flex-direction: column;
  row-gap: var(--emp-space-l);
  padding-top: var(--emp-space-m);
  border-top-width: var(--emp-border);
  border-top-style: solid;
  border-top-color: var(--emp-line);
}

.p-contact__aside p {
  max-width: 40ch;
}

/* .p-needs is a two-column grid by default, which is right in a full-width
   section and wrong in a 556px aside — the media query never fires because the
   viewport is wide even though the column is not. Container queries would be
   the modern answer; this is one line and does not need a polyfill. */
.p-contact__aside .p-needs {
  grid-template-columns: 1fr;
  row-gap: var(--emp-space-m);
}

@media (max-width: 991px) {
  .p-contact { grid-template-columns: 1fr; }
}



/* ============================================================================
   15  WORK INDEX
   ----------------------------------------------------------------------------
   /work/ is four projects, so the architecture calls for one curated page
   rather than a filtered archive. That means the index cannot just be the
   homepage's work grid at a different URL -- if it were, there would be no
   reason to click through to it.

   So the index gives each project a full-width row instead of a card: a larger
   frame, a summary, and the two or three things that project actually had to
   solve. Rows alternate sides. The DOM order inside every row is frame first,
   then text, in both directions -- the swap is done with grid-column, not with
   order or row-reverse, so reading order and visual order never disagree.
   ============================================================================ */

.p-work {
  display: flex;
  flex-direction: column;
  row-gap: var(--emp-space-3xl);
  list-style-type: none;
  counter-reset: work;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.p-work__item {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  column-gap: var(--emp-space-2xl);
  row-gap: var(--emp-space-m);
  align-items: center;
  counter-increment: work;
}

/* The alternation. Children keep their DOM order; only the column moves. */
.p-work__item > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.p-work__item > *:nth-child(2) { grid-column: 2; grid-row: 1; }
.p-work__item:nth-child(even) > *:nth-child(1) { grid-column: 2; }
.p-work__item:nth-child(even) > *:nth-child(2) { grid-column: 1; }

.p-work__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--emp-space-s);
}

.p-work__sector {
  font-size: var(--emp-text-3xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emp-ivory-faint);
}

/* The 01-04 numerals are generated, like .p-needs. Reordering renumbers. */
.p-work__sector::before {
  content: counter(work, decimal-leading-zero) "  \00B7  ";
  color: var(--emp-gold);
}

.p-work__title {
  font-family: var(--emp-font-display);
  font-size: var(--emp-text-3xl);
  font-weight: 500;
  line-height: var(--emp-leading-heading);
  color: var(--emp-ivory);
}

/* Stretched link. The whole row is clickable, but only one link exists in the
   accessibility tree -- wrapping the frame, heading, paragraph and pill list
   in a single <a> would make a screen reader announce the entire row as one
   link name. The trade is that text inside a row cannot be selected by drag.

   Targeted as .p-work__title a rather than a class on the anchor, because
   Bricks' Heading element generates that <a> from its Link field and gives you
   no way to put a class on it. */
.p-work__title a {
  color: inherit;
  text-decoration-line: none;
  transition-property: color;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

.p-work__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
}

.p-work__summary {
  max-width: 46ch;
}

.p-work__more {
  font-size: var(--emp-text-s);
  font-weight: 600;
  letter-spacing: var(--emp-tracking-ui);
  text-transform: uppercase;
  color: var(--emp-ivory-faint);
  transition-property: color;
  transition-duration: var(--emp-dur);
  transition-timing-function: var(--emp-ease);
}

.p-work__more::after {
  content: "  \2192";
}

/* Row-level hover and keyboard focus drive every child. :focus-within is what
   makes the keyboard path match the mouse path -- without it the row would
   light up on hover and stay dead on Tab. */
.p-work__item:hover .p-work__title a,
.p-work__item:focus-within .p-work__title a,
.p-work__item:hover .p-work__more,
.p-work__item:focus-within .p-work__more {
  color: var(--emp-gold);
}

.p-work__item:hover .c-work__frame,
.p-work__item:focus-within .c-work__frame {
  border-top-color: var(--emp-line-strong);
  border-right-color: var(--emp-line-strong);
  border-bottom-color: var(--emp-line-strong);
  border-left-color: var(--emp-line-strong);
}

.p-work__item:hover .c-work__frame img,
.p-work__item:focus-within .c-work__frame img {
  transform: scale(1.03);
  filter: none;
}

.p-work__item:focus-within .c-work__frame {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--emp-gold);
  outline-offset: var(--emp-focus-offset);
}


/* ============================================================================
   16  CASE STUDY
   ----------------------------------------------------------------------------
   One template, used four times. The section order is the one from the site
   architecture: eyebrow, outcome, a self-contained summary, then situation,
   decisions, build, result.

   The summary paragraph is the load-bearing one. It is the passage an answer
   engine quotes, so it names the client, the sector and the outcome inside
   40 to 60 words and makes sense with nothing around it.
   ============================================================================ */




.p-case__quote {
  /* 2xl on a 26ch measure rather than xl on 44ch. At the wider measure it set
     three long lines and read as a stray lede; the short measure is what makes
     it read as a pull quote, and it can carry the larger size because it is the
     only thing in its section and never sits beside an h2. */
  max-width: 26ch;
  font-family: var(--emp-font-display);
  font-size: var(--emp-text-2xl);
  font-weight: 400;
  line-height: 1.35;
  color: var(--emp-ivory);
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: var(--emp-gold);
  padding-left: var(--emp-space-m);
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

/* Bricks cannot put a bare text node inside a Div, so the quote text needs its
   own child element. It carries no class -- everything above inherits into it,
   which is what stops a second source of truth appearing for quote type. */
.p-case__quote > p {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

.p-case__cite {
  display: block;
  margin-top: var(--emp-space-s);
  font-family: var(--emp-font-body);
  font-size: var(--emp-text-3xs);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emp-ivory-faint);
}

.p-case__next {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: var(--emp-space-m);
  row-gap: var(--emp-space-s);
  padding-top: var(--emp-space-l);
  border-top-width: var(--emp-border);
  border-top-style: solid;
  border-top-color: var(--emp-line);
}

.p-case__next-title {
  font-family: var(--emp-font-display);
  font-size: var(--emp-text-2xl);
  font-weight: 500;
  line-height: var(--emp-leading-heading);
}


/* ============================================================================
   17  WORK AND CASE STUDY, RESPONSIVE
   ============================================================================ */

@media (max-width: 991px) {
  /* One column, and the alternation is switched off rather than overridden
     per-row -- at this width every row is frame above text. */
  .p-work__item,
  .p-work__item:nth-child(even) {
    grid-template-columns: 1fr;
  }
  .p-work__item > *:nth-child(1),
  .p-work__item:nth-child(even) > *:nth-child(1) { grid-column: 1; grid-row: 1; }
  .p-work__item > *:nth-child(2),
  .p-work__item:nth-child(even) > *:nth-child(2) { grid-column: 1; grid-row: 2; }

  .p-work { row-gap: var(--emp-space-2xl); }

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

@media (max-width: 767px) {
  .c-facts { grid-template-columns: 1fr; }
  .p-case__next  { grid-template-columns: 1fr; align-items: start; }
}