/* Inter is served from this site (files from the @fontsource/inter package), not from Google.
   Latin covers English; Latin Extended covers names such as Åland, Côte d’Ivoire and Türkiye. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../node_modules/@fontsource/inter/files/inter-latin-ext-300-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../node_modules/@fontsource/inter/files/inter-latin-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../node_modules/@fontsource/inter/files/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../node_modules/@fontsource/inter/files/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../node_modules/@fontsource/inter/files/inter-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../node_modules/@fontsource/inter/files/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   Digital Gloss — shared stylesheet
   Mobile-first. Every rule states the one-column phone case unqualified and
   widens with min-width. Breakpoints (design.md):
   600 mobile · 768 tablet · 961 laptop · 1280 desktop · 1500 wide.
   Exactly three max-width queries exist, all overrides of a mobile-first base:
   the phone hero centring and the hidden header button (both below 768px),
   and the tablet orphan fix at 601–960.
   ========================================================================== */

:root {
  /* colours */
  --c-primary: #C1C1C1;
  --c-secondary: #8B8B8B;
  --c-text-soft: #B4B4BA;   /* small body copy: clearly softer than white, still easy to read on the dark surfaces */
  --c-tertiary: #E27B3D;      /* burnished copper accent, the site's warm accent — change here to update every glow */
  --glow-rgb: 226, 123, 61;   /* same orange as --c-tertiary, as R, G, B */
  --c-neutral: #18181B;
  --c-surface: #1F1F23;
  --c-on-surface: #FFFFFF;
  --c-error: #FF5A5F;
  --c-border: #374151;
  --c-muted: #2A2A30;
  --c-accent: #FFFFFF;
  --c-glow: rgba(var(--glow-rgb), 0.22);

  /* type */
  --f-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* accent labels & numerals, also Inter */

  /* radii */
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;

  /* spacing */
  --s-xs: 6px;
  --s-sm: 14px;
  --s-md: 24px;
  --s-lg: 36px;
  --s-xl: 80px;
  --gutter: 32px;

  /* layout */
  --page-pad: 20px;
  --container: 1320px;
  --header-h: 68px;
  --section-y: 56px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 601px) {
  :root { --page-pad: 32px; --section-y: 72px; }
}
@media (min-width: 961px) {
  :root { --header-h: 80px; --section-y: 96px; }
}
@media (min-width: 1500px) {
  :root { --container: 1440px; --page-pad: 48px; --section-y: 112px; }
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; } /* Lenis drives the easing; native smoothing would fight it */
body {
  margin: 0;
  background: var(--c-neutral);
  color: var(--c-on-surface);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 23px;
  font-weight: 300;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 300; }
[hidden] { display: none !important; }
::selection { background: var(--c-tertiary); color: var(--c-neutral); }

:focus-visible {
  outline: 2px solid var(--c-tertiary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--c-primary); color: var(--c-neutral);
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 400;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--page-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.display {
  font-size: 38px; line-height: 47px; font-weight: 300; letter-spacing: 0;
}
.headline-lg { font-size: 31px; line-height: 34px; }
.headline-md { font-size: 25px; line-height: 30px; }
.headline-sm { font-size: 20px; line-height: 24px; }
.body-lg { font-size: 18px; line-height: 26px; }
.body-sm { font-size: 15px; line-height: 22px; font-weight: 400; }
.label {
  font-family: var(--f-mono); font-size: 13px; line-height: 18px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-secondary); font-weight: 400;
}
@media (min-width: 768px) { .label { font-size: 14px; line-height: 20px; } }
/* section labels end with a short orange dash */
.label--dot::after {
  content: ""; display: inline-block; width: 12px; height: 2px; margin-left: .55em;
  border-radius: 1px; background: rgba(var(--glow-rgb), .7); vertical-align: .28em; /* the accent orange at 70%, so it sits quietly beside the grey text */
}
.mono { font-family: var(--f-mono); font-weight: 300; font-variant-numeric: tabular-nums; }
.muted { color: var(--c-secondary); }
.silver { color: var(--c-primary); }

@media (min-width: 601px) {
  .display { font-size: 48px; line-height: 56px; }
  .headline-lg { font-size: 36px; line-height: 42px; }
}
@media (min-width: 961px) {
  .display { font-size: 62px; line-height: 68px; letter-spacing: -0.015em; }
  .headline-lg { font-size: 44px; line-height: 50px; letter-spacing: -0.01em; }
  .headline-md { font-size: 28px; line-height: 34px; }
}
@media (min-width: 1280px) {
  .display { font-size: 76px; line-height: 82px; }
  .headline-lg { font-size: 52px; line-height: 58px; }
}
@media (min-width: 1500px) {
  .display { font-size: 88px; line-height: 92px; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 188px; height: 47px; padding: 14px 23px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  font-family: var(--f-sans); font-size: 15px; line-height: 22px; font-weight: 400;
  white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.btn:hover svg, .btn:focus-visible svg { transform: translateX(5px); } /* arrow glides forward */
.btn-primary {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--c-primary); color: var(--c-neutral);
  /* a fine, lighter edge along the top, and a barely-there lift underneath */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.28);
}
.btn-primary:hover { background: var(--c-accent); }
.btn-primary::before { /* soft top-to-bottom sheen */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 58%);
}
@media (prefers-reduced-motion: no-preference) {
  .btn-primary::after { /* a soft pool of light that glides across on hover or keyboard focus, feathered so it has no hard edge */
    content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 70%; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg,
      rgba(255, 255, 255, 0) 0%, rgba(255, 244, 236, 0.04) 22%, rgba(255, 244, 236, 0.16) 40%,
      rgba(255, 255, 255, 0.34) 50%,
      rgba(255, 244, 236, 0.16) 60%, rgba(255, 244, 236, 0.04) 78%, rgba(255, 255, 255, 0) 100%);
    filter: blur(2px); opacity: 0;
    transform: translateX(-110%) skewX(-14deg); transition: none;
  }
  .btn-primary:hover::after, .btn-primary:focus-visible::after {
    opacity: 1; transform: translateX(160%) skewX(-14deg);
    transition: transform 2.4s cubic-bezier(.4, 0, .2, 1), opacity .5s ease;
  }
}
.btn-secondary { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.btn-secondary:hover { color: var(--c-accent); border-color: var(--c-accent); }
.btn-tertiary {
  display: inline-flex; align-items: center; gap: 8px; padding: 0;
  color: var(--c-on-surface); font-size: 15px; line-height: 22px; font-weight: 400;
}
.btn-tertiary svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn-tertiary:hover svg { transform: translateX(4px); }
.btn-tertiary span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.btn-tertiary:hover span { background-size: 100% 1px; }
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.site-header.is-scrolled,
.site-header.is-menu-open {
  background: rgba(24, 24, 27, 0.92);
  border-bottom-color: rgba(55, 65, 81, 0.55);
}
/* glass: once scrolled, the page shows softly blurred behind the bar */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header.is-scrolled:not(.is-menu-open) {
    background: rgba(24, 24, 27, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border-bottom-color: rgba(255, 255, 255, 0.07);
  }
}
.site-header.is-menu-open { background: var(--c-neutral); }

.header-inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-md);
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img {
  height: 38px; width: auto;
}

.primary-nav { display: none; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.btn-contact {
  min-width: 0; height: 40px; padding: 9px 18px;
}
/* header button is an outline so the hero's filled button is the one clear main action */
.btn-contact.btn-primary { background: transparent; color: var(--c-primary); border-color: rgba(193, 193, 193, 0.45); }
.btn-contact.btn-primary:hover { background: rgba(255, 255, 255, 0.07); color: var(--c-on-surface); border-color: var(--c-primary); }
/* header button: dark glass with a fine copper-to-silver edge; on hover a point of light travels once round the edge */
@property --glint { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn-contact.btn-primary { border: 0; color: #fff; background: rgba(255, 255, 255, 0.04); box-shadow: none; transition: background-color .35s var(--ease), box-shadow .5s var(--ease); }
.btn-contact.btn-primary:hover { background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 22px rgba(var(--glow-rgb), .22); border: 0; }
.btn-contact.btn-primary::before, .btn-contact.btn-primary::after {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; z-index: 1; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.btn-contact.btn-primary::before { background: linear-gradient(135deg, rgba(var(--glow-rgb), .85), rgba(193, 193, 193, .42) 45%, rgba(193, 193, 193, .14)); }
@media (prefers-reduced-motion: no-preference) {
  .btn-contact.btn-primary::after {
    width: auto; top: 0; bottom: 0; left: 0; filter: none; transform: none; opacity: 0; transition: opacity .4s ease;
    background: conic-gradient(from var(--glint), transparent 0 62%, rgba(255, 196, 160, .35) 78%, rgba(255, 238, 226, 1) 90%, transparent 96%);
  }
  .btn-contact.btn-primary:hover::after, .btn-contact.btn-primary:focus-visible::after {
    opacity: 1; transform: none; transition: opacity .4s ease; animation: glint-travel 2.8s linear infinite;
  }
}
@keyframes glint-travel { to { --glint: 360deg; } }
/* phones: the hamburger menu has its own "Get in touch" button, so the header copy is hidden */
@media (max-width: 767px) { .btn-contact { display: none; } }

.menu-toggle {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--c-border);
}
.menu-toggle span {
  display: block; width: 18px; height: 1px; background: var(--c-on-surface);
  transition: transform .35s var(--ease), opacity .2s;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu: full-screen sheet with centre-aligned buttons */
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--c-neutral);
  overflow-y: auto;
  padding: var(--s-lg) var(--page-pad) var(--s-xl);
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.mobile-menu::before {
  content: ""; position: absolute; left: 50%; top: 45%; width: 520px; height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--c-glow), transparent 70%);
  pointer-events: none; opacity: .26;
}
.mobile-menu.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s var(--ease), transform .35s var(--ease), visibility 0s;
}
.mobile-menu__list {
  position: relative;
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.mobile-menu__list > li { width: 100%; }
.mobile-btn {
  width: 100%; height: 54px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  font-size: 18px; line-height: 26px; font-weight: 300; text-align: center;
  background: rgba(31, 31, 35, 0.6);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.mobile-btn:hover, .mobile-btn:focus-visible { border-color: var(--c-primary); }
.mobile-btn[aria-current="true"] { border-color: var(--c-primary); }
.mobile-btn svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.mobile-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-sub {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease);
}
.mobile-sub.is-open { grid-template-rows: 1fr; }
.mobile-sub > ul { overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.mobile-sub.is-open > ul { padding-top: 8px; }
.mobile-sub a {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px;
  border-radius: var(--r-sm); background: var(--c-surface);
  font-size: 15px; font-weight: 400; color: var(--c-primary);
}
.mobile-sub a .mono { color: var(--c-tertiary); font-size: 12px; }
.mobile-sub a:hover { color: var(--c-on-surface); }
.mobile-menu__contact { margin-top: 12px; }
.mobile-menu__contact .btn { width: 100%; height: 54px; font-size: 16px; }
.mobile-menu__foot {
  position: relative; margin-top: var(--s-lg); text-align: center; color: var(--c-secondary);
  font-size: 14px; line-height: 20px;
}

@media (min-width: 768px) {
  .menu-toggle, .mobile-menu { display: none; }
  .primary-nav { display: block; }
  .nav-list { display: flex; align-items: center; gap: 4px; }
  .nav-link {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px; font-size: 15px; line-height: 22px; font-weight: 400;
    color: var(--c-primary); border-radius: var(--r-sm);
    transition: color .25s var(--ease);
  }
  .nav-link:hover, .nav-link.is-active { color: var(--c-on-surface); }
  .nav-link svg { width: 12px; height: 12px; transition: transform .3s var(--ease); }
  .has-dropdown { position: relative; }
  .has-dropdown.is-open .nav-link svg { transform: rotate(180deg); }

  .dropdown {
    position: absolute; top: calc(100% + 10px); left: 50%;
    width: 200px; padding: 6px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
    opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
    transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  }
  .dropdown::before { /* hover bridge */
    content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
  }
  .has-dropdown.is-open .dropdown {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s;
  }
  .dropdown a {
    display: block; padding: 8px 12px; border-radius: var(--r-md);
    transition: background-color .2s var(--ease);
  }
  .dropdown a:hover, .dropdown a:focus-visible { background: var(--c-muted); }
  .dropdown strong { font-weight: 400; font-size: 14px; line-height: 20px; }
  .dropdown small { display: none; }
}
@media (min-width: 768px) and (hover: hover) {
  .has-dropdown:hover .dropdown {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s;
  }
  .has-dropdown:hover .nav-link svg { transform: rotate(180deg); }
}
@media (min-width: 961px) {
  .brand img { height: 44px; }
  .nav-list { gap: 8px; }
  .btn-contact { height: 44px; padding: 11px 22px; min-width: 120px; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: 48px;
  display: flex; flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-neutral);
}
.hero__grid {
  flex: 1;
  display: grid; gap: 28px; align-content: center;
}
/* studio photo: bottom centre of the hero, edges and top feathered into the page background */
.hero__photo { display: block; width: min(98vw, 1320px); margin: 24px auto calc(-1 * 48px); position: relative; z-index: 0; }
.hero__photo img { display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
.hero__eyebrow {
  /* glow image sits halfway between the eyebrow and the headline */
  position: relative; display: block; padding-bottom: 28px; margin-bottom: 28px;
}
.hero__eyebrow::after {
  /* spans exactly the width of "High performance websites" (≈12.4em of the headline), flattened for a thinner, sharper glow */
  content: ""; position: absolute; left: 0; bottom: 0; width: min(100%, calc(var(--hero-fs, 40px) * 12.4)); aspect-ratio: 710 / 24;
  background: url("../Images/hero-glow-line-4x.png?v=5") center / 100% 100% no-repeat;
  pointer-events: none;
  transform: translateY(50%);
}

.hero__title { max-width: 15ch; }
@media (min-width: 768px) { .hero__title { max-width: none; } }
.hero__title .line { display: block; }
.hero__title .muted { text-wrap: balance; }
.hero__title .muted { color: var(--c-secondary); }
/* tablet and up: the first line is the statement, the second a smaller, quieter line beneath it */
@media (min-width: 768px) { .hero__title .muted { font-size: .5em; line-height: 1.35; margin-top: .45em; } }

/* "High performance": stays white like the rest of the headline; a soft copper sheen sweeps across the words every few seconds */
.gloss-word {
  background: linear-gradient(100deg, #fff 0%, #fff 38%, #F2B48A 50%, #fff 62%, #fff 100%) 100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gloss-shimmer 5s ease-in-out 2s infinite;
}
@keyframes gloss-shimmer { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---- Hero entrance: the beam draws out from the centre, then the headline eases in from a faint blur and the copy
   fades in behind it, one piece after another. No sliding. Plays once on load; skipped for reduced-motion visitors
   and when JavaScript is off. ---- */
.hero__title .line__in { display: block; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js) .hero__eyebrow { animation: hero-fade .55s cubic-bezier(.33, 0, .2, 1) .05s both; }
  html:not(.no-js) .hero__eyebrow::after { animation: hero-rule 1.9s cubic-bezier(.45, 0, .25, 1) .05s both; }
  html:not(.no-js) .hero__title .line__in { animation: hero-focus .75s cubic-bezier(.33, 0, .2, 1) both; }
  html:not(.no-js) .hero__title .line:nth-child(1) .line__in { animation-delay: .3s; }
  html:not(.no-js) .hero__title .line:nth-child(2) .line__in { animation-delay: .4s; }
  html:not(.no-js) .hero__lede { animation: hero-fade .65s cubic-bezier(.33, 0, .2, 1) .65s both; }
  html:not(.no-js) .hero__actions { animation: hero-fade .65s cubic-bezier(.33, 0, .2, 1) .75s both; }
  html:not(.no-js) .hero__location { animation: hero-fade .65s cubic-bezier(.33, 0, .2, 1) .85s both; } /* last in, just after the buttons */
}
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-focus { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
@keyframes hero-rule { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }

.hero__side { display: grid; gap: 28px; }
.hero__lede { max-width: 34em; color: var(--c-primary); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__actions .btn { flex: 1 1 180px; }
.hero__location { font-size: 12px; line-height: 18px; margin-top: -6px; } /* a quiet sign-off under the buttons */
.label__dash { display: inline-block; width: 12px; height: 2px; margin: 0 .8em; border-radius: 1px; background: var(--c-tertiary); vertical-align: .28em; } /* the orange dash that separates the two halves */
.hero__location .label__dash { background: currentColor; } /* in the sign-off the dash takes the text colour, not the accent */
@media (min-width: 961px) {
  .hero { --hero-fs: clamp(44px, 5.4vw, 84px); }
  .hero__title.display { font-size: var(--hero-fs); line-height: 1.1; }
  .hero__actions .btn { flex: 0 0 auto; min-width: 176px; }
  @media (orientation: portrait) {
    .hero { min-height: 0; }
  }
}
@media (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
  /* landscape windows 768px+ wide (laptops, monitors, landscape tablets, narrower desktop windows): headline size follows
     the smaller of the window's width and its height (16:9), so the copy never outgrows the screen */
  .hero {
    --hero-w: min(100vw, (100svh - var(--header-h) - 8px) * 1.771);
    --hero-fs: clamp(32px, var(--hero-w) * 0.04, 76px); /* ≈58px on a 1440 laptop */
    /* extra room between the nav bar and the eyebrow: a little on tablet-sized screens, up to 28px on large ones */
    --hero-drop: clamp(8px, calc((100vw - 1000px) / 20), 28px);
    padding-top: calc(var(--header-h) + 24px + var(--hero-drop));
  }
  .hero__title.display { font-size: var(--hero-fs); line-height: 1.1; }
  .hero__eyebrow { padding-bottom: 18px; margin-bottom: 18px; }
  .hero__actions .btn { flex: 0 0 auto; min-width: 0; padding-inline: clamp(14px, var(--hero-fs) * 0.6, 23px); } /* natural widths keep both buttons on one row on small tablets */
  .hero__lede { font-size: clamp(15px, var(--hero-fs) * 0.46, 18px); line-height: 1.45; }
}
/* older browsers without the svh unit: fall back to vh for the hero height and headline size */
@supports not (height: 100svh) {
  .hero { min-height: 100vh; }
  @media (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
    .hero { --hero-w: min(100vw, (100vh - var(--header-h) - 8px) * 1.771); }
  }
}
/* phones: everything centred too */
@media (max-width: 767px) {
  .hero__grid { text-align: center; justify-items: center; }
  .hero__title { max-width: none; }
  .hero__eyebrow::after { left: 50%; transform: translate(-50%, 50%); }
  .hero__side { justify-items: center; }
  .hero__actions { justify-content: center; width: 100%; }
  .hero__location { text-align: center; }
  .hero__photo { margin-bottom: -80px; } /* the photo's bottom fade is see-through, so tuck it up and close the dead space above the next section */
}
/* hero copy centred on the page (tablet and up): wider headline box, intro and buttons beneath it on the same centre line */
@media (min-width: 768px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "side"; justify-items: center; text-align: center; align-content: start; gap: 22px 0; }
  .hero__head { width: min(100%, calc(var(--hero-fs, 40px) * 27)); }
  .hero__eyebrow { text-align: center; }
  .hero__eyebrow::after { left: 50%; transform: translate(-50%, 50%); }
  .hero__side { width: min(100%, 640px); text-align: center; justify-items: center; gap: 28px; }
  .hero__actions { justify-content: center; }
  .hero__location { text-align: center; }
}

/* --------------------------------------------------------------------------
   Sections — shared
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section-y) 0; position: relative; } /* one rhythm: every section starts --section-y below the content above it (sections only pad their top, so gaps never stack up) */
.section-head { display: grid; gap: 16px; margin-bottom: 40px; }
.section-head p.intro { color: var(--c-primary); max-width: 36em; }
@media (min-width: 961px) {
  .section-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--gutter); margin-bottom: 52px; }
  .section-head .label { grid-column: 1 / -1; }
  .section-head p.intro { justify-self: end; }
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal--left { transform: translateX(-120px); transition-duration: 1.2s, 1.2s; transition-timing-function: var(--ease), cubic-bezier(.16, 1, .3, 1); }
.reveal--right { transform: translateX(120px); transition-duration: 1.2s, 1.2s; transition-timing-function: var(--ease), cubic-bezier(.16, 1, .3, 1); }
.reveal--up { transform: translateY(120px); transition-duration: 1s, 1s; transition-timing-function: var(--ease), cubic-bezier(.16, 1, .3, 1); }
/* footer: slower, even fade with its contents drifting up (the footer itself stays put, so the page length never changes) */
.reveal--fade { transform: none; transition: opacity 1.6s cubic-bezier(.45, 0, .25, 1); }
.site-footer.reveal--fade { overflow: clip; }
.site-footer.reveal--fade > .container { transform: translateY(56px); transition: transform 1.6s cubic-bezier(.16, 1, .3, 1); }
.site-footer.reveal--fade.is-visible > .container { transform: none; }
.about { overflow-x: clip; }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
.no-js .site-footer.reveal--fade > .container { transform: none; }
.reveal--reset, .reveal--reset > * { transition: none !important; }

/* --------------------------------------------------------------------------
   About + plain-language translator
   -------------------------------------------------------------------------- */
.about__grid { display: grid; gap: 48px; }
.about__copy p { color: var(--c-primary); }
.about__copy p + p { margin-top: 16px; }
.about__copy h2 { margin: 16px 0 24px; }
.values { margin-top: 36px; display: grid; gap: 0; border-top: 1px solid var(--c-border); }
.values li {
  display: grid; gap: 4px; padding: 18px 0;
  border-bottom: 1px solid var(--c-border);
}
.values h3 { font-size: 20px; line-height: 24px; }
.values p { color: var(--c-text-soft); font-size: 16px; line-height: 25px; }

.translator {
  background: linear-gradient(180deg, #25252a 0%, #1c1c20 55%, #19191c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -24px rgba(0, 0, 0, .65); /* raised glass, same as the step cards */
  border: 1px solid var(--c-border); border-radius: var(--r-xl);
  padding: 20px; position: relative; overflow: hidden;
}
.translator__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.switch {
  display: inline-flex; padding: 4px; border-radius: var(--r-md);
  background: var(--c-neutral); border: 1px solid var(--c-border);
}
.switch button {
  padding: 8px 14px; border-radius: var(--r-sm); font-size: 14px; line-height: 20px; font-weight: 400;
  color: var(--c-secondary); transition: background-color .25s var(--ease), color .25s var(--ease);
}
.switch button[aria-pressed="true"] { background: var(--c-primary); color: var(--c-neutral); }
.translations { display: grid; gap: 10px; }
.translations li {
  position: relative; padding: 16px 16px 16px 48px; border-radius: var(--r-md);
  background: var(--c-neutral); border: 1px solid rgba(55, 65, 81, .6);
  min-height: 76px;
}
.translations li::before { content: ""; position: absolute; left: 20px; top: 24px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-tertiary); }
.translations .t { display: block; font-size: 16px; line-height: 23px; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.translations .t-jargon { color: var(--c-secondary); font-family: var(--f-mono); font-size: 14px; line-height: 21px; }
.translations .t-plain { color: var(--c-on-surface); }
.translator[data-mode="plain"] .t-jargon,
.translator[data-mode="jargon"] .t-plain { display: none; }
.translator.is-swapping .t { opacity: 0; transform: translateY(4px); }
.translator__note { margin-top: 16px; color: var(--c-text-soft); font-size: 14px; line-height: 20px; }
.translator__note b { color: var(--c-tertiary); font-weight: 400; }

.about__aside { display: grid; gap: 24px; }
.about__media img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-xl); border: 1px solid var(--c-border);
  filter: brightness(.8) contrast(1.02) saturate(.74) sepia(.24); /* toned-down warm grade so this photo sits with the darker page and the Services photos */
}
/* notched shape: a rounded rectangle is cut from the top-left and bottom-right corners,
   every corner (outer and inner) keeps the 16px radius. Older browsers keep the plain rounded image. */
@supports (clip-path: shape(from 0 0, line to 1px 1px)) {
  .about__media {
    display: block;
    /* 1px outline that follows the clipped shape */
    filter: drop-shadow(1px 0 0 var(--c-border)) drop-shadow(-1px 0 0 var(--c-border))
            drop-shadow(0 1px 0 var(--c-border)) drop-shadow(0 -1px 0 var(--c-border));
  }
  .about__media img {
    --r: var(--r-xl); --nw: 30%; --nh: 20%;
    border: 0; border-radius: 0;
    clip-path: shape(from calc(var(--nw) + var(--r)) 0,
      hline to calc(100% - var(--r)),
      arc to 100% var(--r) of var(--r) cw,
      vline to calc(100% - var(--nh) - var(--r)),
      arc to calc(100% - var(--r)) calc(100% - var(--nh)) of var(--r) cw,
      hline to calc(100% - var(--nw) + var(--r)),
      arc to calc(100% - var(--nw)) calc(100% - var(--nh) + var(--r)) of var(--r) ccw,
      vline to calc(100% - var(--r)),
      arc to calc(100% - var(--nw) - var(--r)) 100% of var(--r) cw,
      hline to var(--r),
      arc to 0 calc(100% - var(--r)) of var(--r) cw,
      vline to calc(var(--nh) + var(--r)),
      arc to var(--r) var(--nh) of var(--r) cw,
      hline to calc(var(--nw) - var(--r)),
      arc to var(--nw) calc(var(--nh) - var(--r)) of var(--r) ccw,
      vline to var(--r),
      arc to calc(var(--nw) + var(--r)) 0 of var(--r) cw,
      close);
  }
}

@media (min-width: 601px) {
  .translator { padding: 28px; }
}
@media (min-width: 961px) {
  .about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: calc(var(--gutter) * 2); align-items: start; }
  /* values rows share out the extra height so the list ends level with the image */
  .about__copy { align-self: stretch; display: flex; flex-direction: column; }
  .values { flex: 1; grid-auto-rows: 1fr; }
  .values li { align-content: center; }
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
.card-grid { display: grid; gap: 16px; }
@media (min-width: 601px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 961px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
/* tablet orphan fix: third card spans the row (max-width #2 of 2) */
@media (min-width: 601px) and (max-width: 960px) {
  .card-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .card-grid > .service:last-child:nth-child(odd) .service__list { columns: 2; column-gap: 32px; }
  .card-grid > .service:last-child:nth-child(odd) .service__list li { break-inside: avoid; }
}

.service {
  position: relative; display: flex; flex-direction: column;
  padding: 24px; border-radius: var(--r-xl);
  background: linear-gradient(180deg, #25252a 0%, #1c1c20 55%, #19191c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -24px rgba(0, 0, 0, .65);
  border: 1px solid var(--c-border);
  transition: border-color .35s var(--ease), transform .45s var(--ease), box-shadow .5s var(--ease);
  overflow: hidden; isolation: isolate;
}
.service::before {
  content: ""; position: absolute; z-index: -1; right: -40%; top: -50%; width: 90%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(var(--glow-rgb), .16), transparent 70%);
  opacity: 0; transition: opacity .5s var(--ease);
}
/* keep the fly-up reveal (opacity + slow transform) alongside the hover transitions */
.service.reveal { transition: opacity 1s var(--ease), transform 1s cubic-bezier(.16, 1, .3, 1), border-color .35s var(--ease), box-shadow .5s var(--ease); }
.service:hover { border-color: rgba(var(--glow-rgb), .5); transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 18px 40px -24px rgba(0, 0, 0, .65), 0 30px 70px -30px rgba(var(--glow-rgb), .38); }
.service:hover::before { opacity: 1; }
.service__top { display: flex; align-items: flex-start; justify-content: flex-end; margin-bottom: 28px; }
.service__icon { width: 84px; height: 84px; object-fit: contain; transition: transform .6s var(--ease); }
.service:hover .service__icon { transform: rotate(-6deg) scale(1.05); }
.service h3 { margin-bottom: 12px; }
/* title slot: two lines tall on 3-column layouts, with a one-line title centred in it, so the photos line up across the cards */
.service__head { margin-bottom: 12px; }
.service__head h3 { margin-bottom: 0; }
@media (min-width: 601px) { .service__head { display: flex; align-items: center; justify-content: center; min-height: 60px; } } /* two 30px lines */
@media (min-width: 961px) { .service__head { min-height: 68px; } } /* two 34px lines */
.service__photo { /* photo that takes the icon's place: one fixed-shape box, so every card's photo can match */
  display: block; margin: 20px -12px 4px; aspect-ratio: 3 / 2; overflow: hidden; /* 12px wider each side than the text, and a touch taller, so the photo leads the card */
  border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-neutral);
}
.service__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; transition: transform .8s var(--ease); }
.service:hover .service__photo img { transform: scale(1.04); }
/* toning: the bright daylight photos get a slightly deeper, warmer grade so they sit with the dark page and the orange accent */
.service__photo { position: relative; isolation: isolate; }
.service__photo img { filter: brightness(.92) contrast(1.08) saturate(.86) sepia(.26); }
.service__photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(226, 123, 61, .10), rgba(226, 123, 61, 0) 45%),   /* a breath of the accent orange from the top */
    linear-gradient(180deg, rgba(24, 24, 27, 0) 50%, rgba(24, 24, 27, .38));        /* deepens towards the card's dark surface */
}
.service > p { color: var(--c-primary); font-size: 15px; line-height: 22px; font-weight: 400; }
.service--centered { --body-gap: 16px; }                                  /* photo → body text: the same space as the title sits above the photo */
@media (min-width: 601px) { .service--centered { --body-gap: 31px; } }  /* 16px + half of the 30px of spare title room */
@media (min-width: 961px) { .service--centered { --body-gap: 41px; } }  /* 24px + half of the 34px of spare title room */
.service__more { display: flex; flex-direction: column; flex: 1; } /* body copy + link: always visible on touch screens; collapsible on screens with a mouse (see below) */
.service__more > .service__text { /* body copy: left-aligned, 16/26, regular weight and a slightly softened white, in short paragraphs, so long text is easy to read */
  margin: calc(var(--body-gap, 20px) - 4px) 0 24px; text-align: left;
  color: rgba(255, 255, 255, .88); font-size: 16px; line-height: 26px; font-weight: 400;
}
.service__text p + p { margin-top: 12px; }
.service__list { margin: 24px 0 28px; border-top: 1px solid var(--c-border); }
.service__list li {
  display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(55, 65, 81, .6);
  font-size: 15px; line-height: 22px; color: var(--c-on-surface);
}
.service__list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-secondary); flex: none; transition: background-color .3s; }
.service:hover .service__list li::before { background: var(--c-tertiary); }
.service .btn-tertiary { margin-top: auto; }
.service--centered { text-align: center; }                       /* a card whose text is centred: title, list and link */
.service--centered .service__list li { justify-content: center; }
.service--centered .btn-tertiary { align-self: flex-start; } /* the link lines up with the left-aligned body copy */

/* ---- Collapsed cards (screens with a mouse or trackpad): only the title and photo show. Hovering a card, or tabbing to its link,
   unfolds the body copy and link in a panel that continues the card downward, over the content below (so nothing on the page jumps).
   Touch screens have no hover, so they keep the full cards above. Screen readers always get the full text. ---- */
@media (hover: hover) and (pointer: fine) {
  .service { --card-pad: 24px; --spring: cubic-bezier(.34, 1.15, .64, 1); overflow: visible; transition: border-color .35s var(--ease), transform .45s var(--ease), border-radius .3s var(--ease); }
  .service::before { inset: 0; right: auto; top: auto; width: auto; aspect-ratio: auto; border-radius: inherit; background: linear-gradient(90deg, transparent 4%, rgba(255, 201, 176, .9) 32%, rgba(214, 218, 230, .75) 68%, transparent 96%) top / 100% 1px no-repeat, radial-gradient(70% 55% at 95% 0%, rgba(var(--glow-rgb), .16), transparent 70%); }
  .service:hover, .service:focus-within { z-index: 20; box-shadow: 0 0 0 1px rgba(var(--glow-rgb), .14); border-bottom-color: var(--c-surface); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .service__more {
    position: absolute; left: -1px; right: -1px; top: 100%; display: block;
    padding: max(0px, calc(var(--body-gap, 20px) - var(--card-pad))) var(--card-pad) calc(var(--card-pad) + 4px); text-align: left;
    background: var(--c-surface); border: 1px solid #4b5563; border-top: 0; border-radius: 0 0 var(--r-xl) var(--r-xl);
    box-shadow: 0 28px 48px -12px rgba(0, 0, 0, .55), 0 40px 90px -30px rgba(var(--glow-rgb), .38); /* soft orange glow beneath */
    opacity: 0; pointer-events: none; clip-path: inset(0 -80px 100% -80px);
    transition: opacity .45s var(--ease), clip-path 1.5s var(--spring);
  }
  .service:hover .service__more, .service:focus-within .service__more { opacity: 1; pointer-events: auto; clip-path: inset(0 -80px -90px -80px); }
  .service__more > .service__text { margin: 0 0 28px; }
  .service__more .btn-tertiary { margin-top: 0; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 961px) { .service { --card-pad: 32px; } }

/* ---- Premium touches for the collapsing cards (mouse screens): a short hover-intent pause, a staggered reveal, a focus effect on the
   neighbours, a photo that "wakes up", and a small + that turns into an x. Every opening effect waits 0.12s, so a mouse sweeping across the
   cards doesn't set them off; closing is immediate. ---- */
@media (hover: hover) and (pointer: fine) {
  /* 1. staggered reveal: each paragraph, then the link, rises in a beat after the one before */
  .service__more > .service__text p, .service__more .btn-tertiary { opacity: 0; transform: translateY(14px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .service:hover .service__more > .service__text p, .service:focus-within .service__more > .service__text p,
  .service:hover .service__more .btn-tertiary, .service:focus-within .service__more .btn-tertiary { opacity: 1; transform: none; transition: opacity .75s var(--ease), transform 1.1s var(--spring); }
  .service:hover .service__text p:nth-child(1), .service:focus-within .service__text p:nth-child(1) { transition-delay: .34s; }
  .service:hover .service__text p:nth-child(2), .service:focus-within .service__text p:nth-child(2) { transition-delay: .46s; }
  .service:hover .service__text p:nth-child(3), .service:focus-within .service__text p:nth-child(3) { transition-delay: .58s; }
  .service:hover .service__more .btn-tertiary, .service:focus-within .service__more .btn-tertiary { transition-delay: .70s; }

  /* hover intent: the panel, border and corners wait a beat before opening */
  .service:hover .service__more, .service:focus-within .service__more { transition-delay: .12s, .12s; }

  /* 2. the neighbours step back so the open card has the stage */
  .service.reveal { transition: opacity 1s var(--ease), transform 1s cubic-bezier(.16, 1, .3, 1), border-color .35s var(--ease), border-radius .3s var(--ease), filter .5s var(--ease), scale .6s var(--ease); }
  .service:hover, .service:focus-within { transition: opacity 1s var(--ease), transform .95s var(--spring), border-color .35s var(--ease) .12s, border-radius .3s var(--ease) .12s, filter .5s var(--ease), scale .6s var(--ease); }
  .card-grid:has(.service:hover, .service:focus-within) .service:not(:hover):not(:focus-within) { filter: brightness(.58) saturate(.8); scale: .985; transition-delay: 0s, 0s, 0s, 0s, .12s, .12s; }

  /* 3. the photo wakes up: its toning lifts and it zooms in a little */
  .service__photo img { transition: transform 1.15s var(--ease), filter 1.15s var(--ease); }
  .service__photo::after { transition: opacity 1.15s var(--ease); }
  .service:hover .service__photo img, .service:focus-within .service__photo img { filter: brightness(1.02) contrast(1.03) saturate(1.05); transform: scale(1.05); transition-delay: .12s; }
  .service:hover .service__photo::after, .service:focus-within .service__photo::after { opacity: 0; transition-delay: .12s; }

  /* 5. a small ↗ arrow in the corner shows the card opens; it turns to ↘ as it does */
  .service::after {
    content: ""; position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; z-index: 2; pointer-events: none;
    border-radius: 50%; border: 1px solid rgba(var(--glow-rgb), .5); color: var(--c-tertiary);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23E27B3D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.5l7-7M3.5 2.5h6v6'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
    transition: transform .95s var(--spring), background-color .5s var(--ease), border-color .5s var(--ease);
  }
  .service:hover::after, .service:focus-within::after { transform: rotate(90deg); background-color: rgba(var(--glow-rgb), .14); border-color: rgba(var(--glow-rgb), .8); transition-delay: .12s; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 961px) { .service::after { top: 18px; right: 18px; } }
@media (min-width: 961px) { .service { padding: 32px; } }
/* the photo cards: the gap above the title and the gap between the title and the photo are the same (--card-top) */
.service.service--centered { --card-top: 16px; padding-top: var(--card-top); }
.service--centered .service__photo { margin-top: calc(var(--card-top) - 12px); } /* 12px is the title's own bottom margin */
@media (min-width: 961px) { .service.service--centered { --card-top: 24px; } }

/* --------------------------------------------------------------------------
   Audience
   -------------------------------------------------------------------------- */
.audience { padding-top: calc(var(--section-y) * .75); } /* a strip that belongs to Services, so it sits a little closer */
.audience__grid { display: grid; gap: 0; border-top: 1px solid var(--c-border); }
.audience__item { padding: 28px 0; border-bottom: 1px solid var(--c-border); display: grid; gap: 10px; align-content: start; }
.audience__item .label { color: var(--c-tertiary); }
.audience__item p { color: var(--c-text-soft); font-size: 16px; line-height: 25px; }
@media (min-width: 768px) {
  .audience__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--c-border); }
  .audience__item { padding: 32px 28px; border-bottom: 0; border-left: 1px solid var(--c-border); }
  .audience__item:first-child { border-left: 0; padding-left: 0; }
}

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */
.process { isolation: isolate; }
.process::before { /* tinted band: reaches half a gap above and below the steps without adding any layout space */
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: 0; right: 0;
  top: calc(var(--section-y) * .5); bottom: calc(var(--section-y) * -.5);
  background: linear-gradient(180deg, transparent, rgba(31, 31, 35, .6) 20%, rgba(31, 31, 35, .6) 80%, transparent);
}
.cta-section { padding-top: var(--section-y); }
.steps { display: grid; gap: 16px; counter-reset: step; position: relative; }
.step {
  position: relative; padding: 24px; border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  /* raised glass: lighter at the top, fading to the page's dark, with a bright hairline on the top edge and a soft shadow beneath */
  background: linear-gradient(180deg, #25252a 0%, #1c1c20 55%, #19191c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -24px rgba(0, 0, 0, .65);
}
.step.reveal { transition: opacity 1s var(--ease), transform 1s cubic-bezier(.16, 1, .3, 1), border-color .35s var(--ease), box-shadow .5s var(--ease); }
.step::after { /* the orange-to-silver sheen along the top edge, same as the Services cards */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: linear-gradient(90deg, transparent 4%, rgba(255, 201, 176, .9) 32%, rgba(214, 218, 230, .75) 68%, transparent 96%);
}
.step:hover { transform: translateY(-4px); border-color: rgba(var(--glow-rgb), .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 18px 40px -24px rgba(0, 0, 0, .65), 0 30px 70px -30px rgba(var(--glow-rgb), .38); }
.step:hover::after { opacity: 1; }
/* a large, thin numeral in a soft orange-to-grey gradient */
.step p.step__num {
  font-family: var(--f-mono); font-size: 56px; line-height: 1; font-weight: 200; letter-spacing: -.03em; margin-bottom: 28px; display: block; width: fit-content;
  color: transparent; background: linear-gradient(135deg, #f3caa9 0%, var(--c-tertiary) 38%, #77777f 100%) 100% 100% / 160% 160%; /* at rest: softer, settling into grey */
  -webkit-background-clip: text; background-clip: text;
  transition: background-position .8s var(--ease), filter .5s var(--ease);
}
.step:hover p.step__num { background-position: 0 0; filter: brightness(1.1) saturate(1.15); } /* on hover it warms up to the full peach-orange */
.step h3 { margin-bottom: 10px; }
.step p { color: var(--c-text-soft); font-size: 16px; line-height: 25px; }
@media (min-width: 601px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1280px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 34px; } .step { padding: 28px; } }

/* the journey: on the four-across layout a thin line runs over the cards and draws itself in, with an orange dot above each step */
@media (min-width: 1280px) {
  .steps::before {
    content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, rgba(var(--glow-rgb), .65), rgba(255, 255, 255, .16) 55%, rgba(255, 255, 255, 0));
    transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.65, 0, .25, 1) .15s;
  }
  .steps:has(.step.is-visible)::before { transform: scaleX(1); }
  .step::before {
    content: ""; position: absolute; top: -33px; left: 28px; width: 9px; height: 9px; border-radius: 50%; pointer-events: none;
    background: var(--c-tertiary); box-shadow: 0 0 0 5px rgba(var(--glow-rgb), .16), 0 0 14px rgba(var(--glow-rgb), .55);
    opacity: 0; transform: scale(.4); transition: opacity .6s var(--ease) .35s, transform .7s cubic-bezier(.34, 1.3, .64, 1) .35s;
  }
  .step.is-visible::before { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-full);
  border: 1px solid var(--c-border); font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-primary);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl); border: 1px solid var(--c-border);
  padding: 40px 24px; background: var(--c-surface);
  display: grid; gap: 28px;
}
.cta-band::before {
  content: ""; position: absolute; z-index: -1; right: -20%; bottom: -80%; width: 90%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(var(--glow-rgb), .22), transparent 70%);
}
.cta-band p { color: var(--c-primary); margin-top: 14px; max-width: 30em; }
.cta-band__actions { display: grid; gap: 10px; }
@media (min-width: 601px) {
  .cta-band { padding: 56px 40px; }
  .cta-band__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; }
}
@media (min-width: 961px) {
  .cta-band { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 72px 64px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--c-border); padding-top: 64px; margin-top: var(--section-y); position: relative; isolation: isolate; }
.site-footer::before { /* a slight orange hue that starts at the left edge and fades out towards the centre; the bottom bar below paints over it, so that strip stays plain black */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--glow-rgb), .12), rgba(var(--glow-rgb), .045) 28%, transparent 50%);
}
.footer-grid { display: grid; gap: 40px; }
.footer-brand img { height: 36px; width: auto; }
.footer-brand p { margin-top: 18px; color: var(--c-text-soft); font-size: 16px; line-height: 25px; max-width: 26em; }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
.footer-heading { font-family: var(--f-sans); font-size: 13px; line-height: 18px; letter-spacing: .12em; font-weight: 400; color: var(--c-secondary); margin-bottom: 18px; }
.footer-col ul { display: grid; gap: 12px; }
.footer-col a { color: var(--c-primary); font-size: 15px; line-height: 22px; font-weight: 400; transition: color .2s; display: inline-flex; align-items: center; gap: 8px; }
.footer-col a:hover { color: var(--c-on-surface); }
.footer-col a svg { width: 14px; height: 14px; }
.footer-bottom {
  position: relative; margin-top: 56px; padding-block: 24px 32px;
  display: flex; flex-direction: column; gap: 14px;
  font-size: 14px; line-height: 20px; color: var(--c-secondary);
  background: var(--c-neutral); box-shadow: 0 0 0 100vmax var(--c-neutral); clip-path: inset(0 -100vmax); /* full-width plain strip, no hue */
}
.footer-bottom::before { content: ""; position: absolute; top: 0; left: -100vmax; right: -100vmax; height: 1px; background: var(--c-border); } /* divider runs edge to edge */
.footer-bottom .location { color: var(--c-primary); display: flex; gap: 10px; align-items: flex-start; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-bottom a:hover { color: var(--c-on-surface); }
@media (min-width: 601px) {
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 961px) {
  .footer-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter); }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* --------------------------------------------------------------------------
   Inner page header (contact, release notes)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative; isolation: isolate; overflow-x: clip; overflow-y: visible;
  padding-top: calc(var(--header-h) + 56px); padding-bottom: 48px;
}
.page-hero::before {
  content: ""; position: absolute; z-index: -1; right: -30%; top: -30%; width: 110vw; max-width: 1000px; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(var(--glow-rgb), .16), transparent 70%);
  pointer-events: none;
}
.page-hero h1 { margin-top: 18px; max-width: 16ch; }
.page-hero h1.headline-lg { max-width: 22ch; }
.br-wide { display: none; }
@media (min-width: 768px) { .br-wide { display: inline; } }
.page-hero p { margin-top: 20px; color: var(--c-primary); max-width: 36em; }
.breadcrumb { display: flex; gap: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--c-secondary); letter-spacing: .06em; text-transform: uppercase; }
.breadcrumb a:hover { color: var(--c-on-surface); }
@media (min-width: 961px) { .page-hero { padding-top: calc(var(--header-h) + 96px); padding-bottom: 72px; } }

/* --------------------------------------------------------------------------
   Legal pages (privacy policy)
   -------------------------------------------------------------------------- */
.legal-layout { display: grid; padding-bottom: 24px; }
.legal-index { display: none; }
.legal { max-width: 46rem; }
.legal-updated { margin-top: 20px; color: var(--c-secondary); font-size: 13px; }
.legal-summary {
  padding: 24px; margin-bottom: 8px; border-radius: var(--r-xl);
  background: var(--c-surface); border: 1px solid var(--c-border);
}
.legal-summary h2 { margin-bottom: 14px; }
.legal__section { padding-top: 48px; }
.legal__section h2 { font-size: 25px; line-height: 30px; display: flex; gap: 14px; align-items: baseline; margin-bottom: 18px; }
.legal__section h2 .mono { font-size: 13px; color: var(--c-tertiary); flex: none; }
.legal h3 { font-size: 18px; line-height: 26px; margin: 28px 0 8px; }
.legal p, .legal li { color: var(--c-primary); font-size: 16px; line-height: 26px; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 14px; }
.legal strong { font-weight: 400; color: var(--c-on-surface); }
.legal a { color: var(--c-on-surface); text-decoration: underline; text-decoration-color: rgba(var(--glow-rgb), .6); text-underline-offset: 3px; transition: text-decoration-color .2s var(--ease); }
.legal a:hover { text-decoration-color: var(--c-tertiary); }
.legal ul { display: grid; gap: 10px; }
.legal li { position: relative; padding-left: 22px; }
.legal li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-tertiary); }
.legal-summary li { font-size: 15px; line-height: 23px; }
.legal-summary li::before { top: 9px; }
.legal-table { margin: 20px 0; overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.legal-table table { width: 100%; min-width: 620px; border-collapse: collapse; }
.legal-table th, .legal-table td { padding: 14px 16px; text-align: left; vertical-align: top; font-size: 15px; line-height: 22px; border-bottom: 1px solid var(--c-border); }
.legal-table th { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; color: var(--c-secondary); background: var(--c-surface); }
.legal-table td { color: var(--c-primary); }
.legal-table td:first-child { color: var(--c-on-surface); }
.legal-table tr:last-child td { border-bottom: 0; }
@media (min-width: 961px) {
  .legal-layout { grid-template-columns: 250px minmax(0, 1fr); gap: calc(var(--gutter) * 1.5); align-items: start; }
  .legal-index { display: block; position: sticky; top: calc(var(--header-h) + 32px); max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto; }
  .legal-index ol { display: grid; gap: 2px; border-left: 1px solid var(--c-border); }
  .legal-index a { display: flex; gap: 10px; padding: 7px 14px; margin-left: -1px; color: var(--c-secondary); font-size: 14px; line-height: 20px; border-left: 1px solid transparent; }
  .legal-index a .mono { font-size: 12px; flex: none; padding-top: 1px; }
  .legal-index a:hover, .legal-index a.is-active { color: var(--c-on-surface); border-left-color: var(--c-tertiary); }
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: 40px; }
.contact-list { display: grid; gap: 12px; }
.contact-item {
  display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; align-items: center;
  padding: 16px; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border);
  transition: border-color .25s var(--ease);
}
a.contact-item:hover { border-color: var(--c-primary); }
.contact-item__icon {
  grid-row: span 2; width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--c-neutral); border: 1px solid var(--c-border); color: var(--c-tertiary);
}
.contact-item__icon svg { width: 20px; height: 20px; }
.contact-item .label { font-size: 12px; }
.contact-item strong { font-weight: 400; font-size: 16px; line-height: 22px; word-break: break-word; }
.contact-aside__note { margin-top: 28px; padding: 20px; border-left: 1px solid var(--c-tertiary); color: var(--c-primary); font-size: 15px; line-height: 22px; }

.form-card { padding: 22px; border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-border); position: relative; }
.form-card h2 { margin-bottom: 8px; }
#form-wrap > p { color: var(--c-text-soft); font-size: 15px; line-height: 22px; margin-bottom: 28px; }
.form-grid { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; align-content: start; }
.field label, .field legend { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--c-primary); padding: 0; }
.field .req { color: var(--c-tertiary); }
.field .opt { color: var(--c-secondary); font-weight: 300; }
.input, .textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--c-neutral); color: var(--c-on-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  font: 300 16px/23px var(--f-sans);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #6b6b72; }
.input:hover, .textarea:hover { border-color: #4b5563; }
.input:focus, .textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(193, 193, 193, .12); }
.textarea { min-height: 200px; resize: vertical; } /* tall enough for the whole placeholder on a phone */
.field.has-error .input, .field.has-error .textarea, .field.has-error .phone { border-color: var(--c-error); }
.error-msg { color: var(--c-error); font-size: 13px; line-height: 18px; min-height: 0; }
.field:not(.has-error) .error-msg { display: none; }
.hint { color: var(--c-text-soft); font-size: 13px; line-height: 18px; }

/* phone with country code */
.phone {
  display: flex; align-items: stretch; min-height: 48px;
  border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-neutral);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.phone:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(193, 193, 193, .12); }
.dial { position: relative; flex: none; display: flex; align-items: center; border-right: 1px solid var(--c-border); }
.dial__display {
  display: flex; align-items: center; gap: 8px; padding: 0 12px 0 14px; pointer-events: none;
  font-family: var(--f-mono); font-size: 15px; color: var(--c-on-surface); white-space: nowrap;
}
.dial__display .flag { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 18px; line-height: 1; }
.dial__display svg { width: 12px; height: 12px; color: var(--c-secondary); }
.dial select {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  font-size: 16px; /* prevents iOS zoom */
}
.dial select:focus-visible + .dial__display, .dial:focus-within .dial__display { color: var(--c-tertiary); }
.phone .input { border: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; box-shadow: none; min-width: 0; flex: 1; background: transparent; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.chips legend { margin-bottom: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-full);
  border: 1px solid var(--c-border); background: var(--c-neutral); color: var(--c-primary);
  font-size: 14px; font-weight: 400; transition: all .2s var(--ease);
}
.chip span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--c-secondary); transition: all .2s; }
.chip input:checked + span { border-color: var(--c-primary); color: var(--c-on-surface); background: var(--c-muted); }
.chip input:checked + span::before { background: var(--c-tertiary); border-color: var(--c-tertiary); }
.chip input:focus-visible + span { outline: 2px solid var(--c-tertiary); outline-offset: 2px; }

.form-actions { display: grid; gap: 14px; margin-top: 8px; }
.form-actions p { color: var(--c-text-soft); font-size: 13px; line-height: 18px; }
.form-actions .form-privacy a { color: var(--c-primary); text-decoration: underline; text-decoration-color: rgba(var(--glow-rgb), .6); text-underline-offset: 3px; }
.form-actions .form-privacy a:hover { color: var(--c-on-surface); }
.form-success { text-align: left; padding: 8px 0; }
.form-success .check-ring {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 20px;
  border: 1px solid var(--c-tertiary); color: var(--c-tertiary);
}
.form-success .check-ring svg { width: 24px; height: 24px; }
.form-success p { color: var(--c-primary); margin-top: 12px; max-width: 32em; }
.form-success .btn { margin-top: 28px; }

@media (min-width: 601px) {
  .form-card { padding: 36px; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .field--full { grid-column: 1 / -1; }
  .form-actions { grid-template-columns: auto 1fr; align-items: center; gap: 20px; }
  .contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 961px) {
  .contact-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: calc(var(--gutter) * 1.5); align-items: start; }
  .contact-list { grid-template-columns: 1fr; }
  .contact-aside { position: sticky; top: calc(var(--header-h) + 32px); }
  .form-card { padding: 48px; }
}

/* --------------------------------------------------------------------------
   Release notes
   -------------------------------------------------------------------------- */
.rn-toolbar {
  display: grid; gap: 16px; padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--c-border);
}
.rn-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.rn-filter {
  height: 36px; padding: 0 14px; border-radius: var(--r-full); border: 1px solid var(--c-border);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--c-primary);
  transition: all .2s var(--ease);
}
.rn-filter:hover { border-color: var(--c-primary); }
.rn-filter[aria-pressed="true"] { background: var(--c-primary); color: var(--c-neutral); border-color: var(--c-primary); }
.rn-count { font-family: var(--f-mono); font-size: 13px; color: var(--c-secondary); }
.rn-month { padding-top: 36px; }
.rn-month__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 16px; margin-bottom: 8px;
}
.rn-month__head .mono { color: var(--c-secondary); font-size: 13px; }
.rn-list { display: grid; }
.rn-entry {
  display: grid; gap: 10px; padding: 22px 0; border-top: 1px solid rgba(55, 65, 81, .6);
}
.rn-entry__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rn-entry time { font-family: var(--f-mono); font-size: 14px; color: var(--c-primary); }
.rn-entry h3 { font-size: 20px; line-height: 26px; }
.rn-entry p { color: var(--c-secondary); font-size: 15px; line-height: 23px; max-width: 44em; }
.tag--new { border-color: rgba(var(--glow-rgb), .55); color: var(--c-tertiary); }
.rn-empty { padding: 32px 0; color: var(--c-secondary); }
.rn-layout { display: grid; gap: 0; }
.rn-index { display: none; }
@media (min-width: 768px) {
  .rn-toolbar { grid-template-columns: 1fr auto; align-items: center; }
  .rn-entry { grid-template-columns: 180px minmax(0, 1fr); column-gap: var(--gutter); padding: 28px 0; }
  .rn-entry__meta { flex-direction: column; align-items: flex-start; gap: 10px; grid-row: span 2; }
}
@media (min-width: 1280px) {
  .rn-layout { grid-template-columns: 220px minmax(0, 1fr); gap: calc(var(--gutter) * 1.5); }
  .rn-index { display: block; position: sticky; top: calc(var(--header-h) + 32px); align-self: start; padding-top: 44px; }
  .rn-index ol { display: grid; gap: 4px; border-left: 1px solid var(--c-border); }
  .rn-index a { display: flex; justify-content: space-between; padding: 8px 14px; color: var(--c-secondary); font-size: 15px; margin-left: -1px; border-left: 1px solid transparent; }
  .rn-index a:hover, .rn-index a.is-active { color: var(--c-on-surface); border-left-color: var(--c-tertiary); }
  .rn-index .mono { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .site-footer.reveal--fade > .container { transform: none; }
  .gloss-word { animation: none; background: none; -webkit-text-fill-color: currentColor; color: var(--c-on-surface); }
}

/* --------------------------------------------------------------------------
   Questions and answers: a sticky intro on the left, and on the right one card with topic tabs, numbered questions that open to
   show their answers (main.js toggles .is-open and filters by topic), and a closing "still have a question?" panel
   -------------------------------------------------------------------------- */
.faq-layout { display: grid; gap: 36px; align-items: start; }
.faq-intro .intro { margin-top: 18px; max-width: 26em; color: var(--c-primary); }
.faq-intro .btn { margin-top: 28px; }
.faq-intro h2 { margin-top: 16px; }
@media (min-width: 961px) {
  .faq-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: calc(var(--gutter) * 1.5); }
  .faq-intro { position: sticky; top: calc(var(--header-h) + 40px); }
}
/* the questions are separate bars, one per question, on the same dark surface (no outer card) */
.faq { position: relative; }
/* topic tabs */
.faq__tabs { position: relative; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 16px; }
.faq__tab {
  padding: 7px 16px; border-radius: 999px; border: 1px solid var(--c-border); background: rgba(255, 255, 255, .03);
  color: var(--c-secondary); font-size: 14px; line-height: 20px; font-weight: 400;
  transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.faq__tab:hover { color: var(--c-on-surface); border-color: #4b5563; }
.faq__tab.is-active { color: #fff; background: rgba(var(--glow-rgb), .14); border-color: rgba(var(--glow-rgb), .6); }
.faq__tab:focus-visible { outline: 2px solid rgba(var(--glow-rgb), .8); outline-offset: 3px; }
.faq__list { position: relative; display: grid; gap: 8px; }
.faq__item { position: relative; padding-inline: 24px; border-radius: var(--r-sm); background: #2a2a30; border: 1px solid transparent; transition: background-color .5s var(--ease), border-color .5s var(--ease); }
.faq__item[hidden] { display: none; }
.faq__item::before { /* the orange bar that marks the open question */
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #f3caa9, var(--c-tertiary)); opacity: 0; transform: scaleY(.3); transition: opacity .4s var(--ease), transform .7s cubic-bezier(.34, 1.15, .64, 1);
}
.faq__item:hover { background: #303037; }
.faq__item.is-open { background: linear-gradient(90deg, rgba(var(--glow-rgb), .14), rgba(var(--glow-rgb), .05) 60%, #2a2a30); border-color: rgba(var(--glow-rgb), .28); }
.faq__item.is-open::before { opacity: 1; transform: none; }
.faq__q { margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; }
.faq__q button {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  padding: 22px 0; color: var(--c-on-surface); font-size: 18px; line-height: 26px; font-weight: 300;
  transition: color .3s var(--ease);
}
.faq__qtext { flex: 1; }
.faq__q button:hover { color: #fff; }
.faq__q button:focus-visible { outline: 2px solid rgba(var(--glow-rgb), .8); outline-offset: 4px; border-radius: var(--r-md); }
.faq__icon { /* a small circled ↗ arrow that turns to ↘ when its question is open */
  position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; color: var(--c-tertiary);
  border: 1px solid rgba(var(--glow-rgb), .5);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23E27B3D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.5l7-7M3.5 2.5h6v6'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  transition: transform .6s cubic-bezier(.34, 1.15, .64, 1), background-color .4s var(--ease), border-color .4s var(--ease);
}
.faq__item.is-open .faq__icon, .faq__q button:hover .faq__icon { background-color: rgba(var(--glow-rgb), .14); border-color: rgba(var(--glow-rgb), .8); }
.faq__item.is-open .faq__icon { transform: rotate(90deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.16, 1, .3, 1); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-in { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s .5s; }
.faq__item.is-open .faq__a-in { visibility: visible; transition-delay: 0s; }
.faq__a-in p { max-width: 46em; padding: 0 4px 24px 0; color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 26px; font-weight: 400; opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.faq__item.is-open .faq__a-in p { opacity: 1; transform: none; transition: opacity .5s var(--ease) .12s, transform .6s cubic-bezier(.16, 1, .3, 1) .12s; }
.faq__a-in p:not(:last-child) { padding-bottom: 12px; }
/* the closing panel */
.faq__foot { position: relative; margin-top: 8px; padding: 26px 24px 28px; border-radius: var(--r-sm); background: linear-gradient(90deg, rgba(var(--glow-rgb), .09), #2a2a30 70%); }
.faq__foot-title { color: var(--c-on-surface); font-size: 20px; line-height: 28px; font-weight: 300; }
.faq__foot p:last-child { margin-top: 6px; color: var(--c-primary); font-size: 16px; line-height: 26px; }
.faq__foot a { color: var(--c-on-surface); text-decoration: underline; text-decoration-color: rgba(var(--glow-rgb), .6); text-underline-offset: 3px; transition: text-decoration-color .2s var(--ease); }
.faq__foot a:hover { text-decoration-color: var(--c-tertiary); }
@media (min-width: 768px) {
  .faq__item { padding-inline: 32px; }
  .faq__q button { padding: 26px 0; font-size: 20px; line-height: 28px; }
  .faq__a-in p { padding-right: 56px; }
  .faq__foot { padding: 30px 32px 34px; }
}

/* ---- Services page: each service gets its own section with room for content ---- */
.service-detail__body { min-height: 240px; }
.service-detail__body p { color: var(--c-primary); max-width: 36em; }
.service-detail:last-of-type { padding-bottom: var(--section-y); min-height: calc(100svh - var(--header-h)); } /* enough room below Branding for its link to scroll it right to the top */

/* ---- Services page hero strip: the three service photos, each a link down to its section ---- */
.svc-strip { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 768px) { .svc-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; } }
.svc-strip__item {
  position: relative; display: block; overflow: hidden; isolation: isolate; border-radius: var(--r-xl);
  border: 1px solid var(--c-border); background: var(--c-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -24px rgba(0, 0, 0, .65);
  transition: border-color .35s var(--ease), transform .45s var(--ease), box-shadow .5s var(--ease);
}
.svc-strip__item picture { display: block; aspect-ratio: 4 / 3; }
.svc-strip__item img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.9) contrast(1.05) saturate(.86) sepia(.2); transition: transform .9s var(--ease), filter .9s var(--ease); }
.svc-strip__item::after { /* fades the photo into the dark so the label sits on it */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(24, 24, 27, 0) 45%, rgba(24, 24, 27, .82));
}
.svc-strip__label {
  position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; display: flex; align-items: center; gap: 10px;
  color: var(--c-on-surface); font-size: 17px; line-height: 24px;
}
.svc-strip__label .mono { color: var(--c-tertiary); font-size: 13px; }
.svc-strip__label svg { width: 16px; height: 16px; margin-left: auto; color: var(--c-tertiary); transition: transform .4s var(--ease); }
.svc-strip__item:hover, .svc-strip__item:focus-visible { border-color: rgba(var(--glow-rgb), .5); transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 18px 40px -24px rgba(0, 0, 0, .65), 0 30px 70px -30px rgba(var(--glow-rgb), .38); }
.svc-strip__item:hover img, .svc-strip__item:focus-visible img { transform: scale(1.04); filter: brightness(1) contrast(1.03) saturate(1.02) sepia(.1); }
.svc-strip__item:hover .svc-strip__label svg, .svc-strip__item:focus-visible .svc-strip__label svg { transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) { .svc-strip__item, .svc-strip__item img, .svc-strip__label svg { transition: none; } }
.service-detail__body p + p { margin-top: 16px; }
.detail-list { margin-top: 32px; max-width: 36em; border-top: 1px solid var(--c-border); }
.detail-list li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(55, 65, 81, .6); font-size: 16px; line-height: 24px; color: var(--c-on-surface); }
.detail-list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-tertiary); flex: none; }