/*
 * Kinetic Workshop Editorial — MAS website system.
 * Asymmetric structure, editorial scale, tactile media, coral action, and precise motion-ready states.
 *
 * Carried over from the React build's index.css. Everything from ":root" down
 * to the media queries was already written as plain, semantic CSS —
 * .hero-copy, .project-tile, .contact-actions — so the design moved across
 * unchanged. Two things needed replacing: Tailwind's preflight, which is now
 * the reset below, and the shadcn/Radix components (dialog, sheet), whose
 * styles are in the "Overlays" section at the end. The [data-slot] hooks the
 * original CSS targeted are kept, and the PHP views emit the same attributes,
 * so those rules still apply unchanged.
 *
 * Source order matters: reset, then the design system, then the overlays.
 */

/* ===========================================================================
 * Fonts — self-hosted, so the site has no third-party font dependency and no
 * request leaves the server. Paths are relative to this file, so the site
 * works at a domain root and in a /macnet sub-folder alike.
 * ========================================================================= */
@import url("../fonts/mas-fonts.css");

/* ===========================================================================
 * Reset
 *
 * This replaces Tailwind's preflight, which the React build relied on. It is
 * deliberately a like-for-like replacement rather than a "better" reset: the
 * design was drawn against preflight's defaults, so anything that differs here
 * would show up as a spacing or weight change somewhere in the page.
 *
 * The rules that actually matter to this design:
 *   - headings inherit size and weight, so the few explicit clamp() sizes in
 *     the sections below are the ONLY thing setting heading scale;
 *   - buttons carry no chrome, because every button here is styled from
 *     scratch;
 *   - lists have no markers or padding;
 *   - links inherit their colour.
 * ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd,
fieldset {
  margin: 0;
}

/* Size and weight come from the component rules, never from the tag. */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

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

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

b, strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  letter-spacing: inherit;
  background-color: transparent;
  background-image: none;
}

button,
[type="button"],
[type="submit"],
[type="reset"] {
  -webkit-appearance: button;
  appearance: button;
}

/* Firefox shows a placeholder-coloured value on required-but-empty fields. */
:-moz-ui-invalid {
  box-shadow: none;
}

textarea {
  resize: vertical;
}

::placeholder {
  opacity: 1;
  color: color-mix(in oklab, currentColor 45%, transparent);
}

fieldset {
  padding: 0;
}

legend {
  padding: 0;
}

table {
  border-collapse: collapse;
  text-indent: 0;
  border-color: inherit;
}

summary {
  display: list-item;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

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

[hidden] {
  display: none !important;
}

/* ===========================================================================
 * Design system — carried over verbatim from the React build.
 * ========================================================================= */


:root {
  --burgundy: #6a152f;
  --burgundy-deep: #45101f;
  --coral: #ff6b61;
  --charcoal: #211d20;
  --warm-white: #f7f3ef;
  --stone: #ded5cf;
  --background: oklch(0.968 0.012 65);
  --foreground: oklch(0.215 0.018 345);
  --card: oklch(0.985 0.006 65);
  --card-foreground: oklch(0.215 0.018 345);
  --popover: oklch(0.985 0.006 65);
  --popover-foreground: oklch(0.215 0.018 345);
  --primary: oklch(0.405 0.13 358);
  --primary-foreground: oklch(0.985 0.006 65);
  --secondary: oklch(0.91 0.018 55);
  --secondary-foreground: oklch(0.26 0.025 345);
  --muted: oklch(0.93 0.012 55);
  --muted-foreground: oklch(0.48 0.025 345);
  --accent: oklch(0.7 0.17 30);
  --accent-foreground: oklch(0.985 0.006 65);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.84 0.017 55);
  --input: oklch(0.84 0.017 55);
  --ring: oklch(0.7 0.17 30);
  --radius: 1.25rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--warm-white);
  color: var(--charcoal);
  font-family: "DM Sans", sans-serif;
  text-rendering: optimizeLegibility;
}
button, a { -webkit-tap-highlight-color: transparent; }
button:not(:disabled), a[href] { cursor: pointer; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--coral); color: white; }

.site-shell { min-height: 100vh; overflow: clip; background: var(--warm-white); }
.reading-progress { position: fixed; z-index: 90; top: 0; left: 0; width: 100%; height: 4px; transform-origin: left; background: var(--coral); }
.site-header {
  position: fixed;
  z-index: 60;
  top: 18px;
  left: 50%;
  width: min(1180px, calc(100% - 44px));
  min-height: 72px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 12px 10px 18px;
  background: rgba(247, 243, 239, 0.9);
  border: 1px solid rgba(106, 21, 47, 0.12);
  border-radius: 24px;
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 55px rgba(54, 24, 35, 0.1);
}
.brand-lockup { display: inline-grid; grid-template-columns: 60px 1fr; width: 284px; align-items: center; gap: 14px; color: var(--burgundy); text-decoration: none; }
.brand-lockup img { width: 60px; height: 60px; object-fit: contain; }
.brand-lockup > span { display: flex; flex-direction: column; line-height: 1; }
.brand-lockup > span strong { font-family: "Space Grotesk"; font-size: 24px; letter-spacing: .09em; }
.brand-lockup > span small { margin-top: 5px; font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.brand-lockup--compact { display: inline-flex; width: 62px; }
.brand-lockup--compact img { width: 62px; height: 62px; }
.desktop-nav { display: flex; gap: 32px; align-items: center; }
.desktop-nav a { color: var(--charcoal); font-size: 14px; font-weight: 600; text-decoration: none; }
.header-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 19px;
  background: var(--burgundy);
  color: white;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 17px;
}
.mobile-menu-trigger { display: none; justify-self: end; color: var(--burgundy); }
.chapter-rail {
  position: fixed;
  z-index: 40;
  left: max(14px, calc((100vw - 1540px) / 2 + 14px));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 27px;
  width: 94px;
  padding: 24px 14px 24px 27px;
  border-left: 4px solid var(--coral);
  background: rgba(247,243,239,.93);
  box-shadow: 0 18px 48px rgba(50,22,33,.14);
  backdrop-filter: blur(14px);
}
.chapter-rail__line { position: absolute; left: 10px; top: 28px; bottom: 28px; width: 1px; background: rgba(106,21,47,.25); }
.chapter-rail__item { position: relative; display: flex; flex-direction: column; color: var(--burgundy); text-decoration: none; }
.chapter-rail__item::before { content: ""; position: absolute; left: -22px; top: 9px; width: 7px; height: 7px; background: var(--coral); }
.chapter-rail__item span { font-family: "Space Grotesk"; font-size: 10px; opacity: .55; }
.chapter-rail__item strong { margin-top: 2px; font-family: "Space Grotesk"; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.chapter-rail__item { opacity: .45; transition: opacity 180ms var(--ease-out, cubic-bezier(.23,1,.32,1)), transform 180ms var(--ease-out, cubic-bezier(.23,1,.32,1)); }
.chapter-rail__item.is-active { opacity: 1; transform: translateX(3px); }
.chapter-rail__item.is-active::before { width: 11px; height: 11px; left: -24px; top: 7px; box-shadow: 0 0 0 5px rgba(255,107,97,.18); }
.mobile-chapter-indicator { display: none; }

.chapter-section { scroll-margin-top: 110px; }
.hero-section {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(45px, 6vw, 92px);
  align-items: center;
  padding: 150px max(7vw, 92px) 76px max(11vw, 150px);
  position: relative;
}
.hero-section::before { content: ""; position: absolute; inset: 0 50% 0 auto; width: 25vw; background: linear-gradient(180deg, rgba(255,107,97,.08), transparent 70%); transform: skewX(-10deg); transform-origin: top; }
.eyebrow { margin: 0 0 22px; color: var(--coral); font-family: "Space Grotesk"; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Space Grotesk", sans-serif; }
.hero-copy { position: relative; z-index: 1; max-width: 750px; }
.hero-brand-signal { display: inline-grid; grid-template-columns: 58px 1fr; align-items: center; gap: 14px; margin-bottom: 28px; padding: 9px 16px 9px 9px; border: 1px solid rgba(106,21,47,.13); border-radius: 18px 4px 18px 4px; background: rgba(255,255,255,.45); }
.hero-brand-signal img { width: 58px; height: 58px; object-fit: contain; }
.hero-brand-signal span { display: flex; flex-direction: column; gap: 3px; }
.hero-brand-signal strong { color: var(--burgundy); font-family: "Space Grotesk"; font-size: 13px; letter-spacing: .02em; }
.hero-brand-signal small { color: #786b70; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.hero-copy h1 { margin-bottom: 30px; font-size: clamp(58px, 7.3vw, 112px); line-height: .91; letter-spacing: -.065em; font-weight: 650; }
.hero-copy h1 em, .section-heading h2 em, .contact-title h2 em { display: block; color: var(--burgundy); font-family: "DM Sans"; font-weight: 400; letter-spacing: -.055em; }
.hero-intro { max-width: 610px; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.5; color: #5b5155; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 38px; }
.primary-action { display: inline-flex; align-items: center; gap: 32px; min-height: 60px; padding: 0 22px 0 25px; background: var(--coral); color: white; border-radius: 20px; font-family: "Space Grotesk"; font-weight: 700; text-decoration: none; }
.primary-action svg { width: 24px; height: 24px; }
.text-action { display: inline-flex; align-items: center; gap: 10px; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--burgundy); background: transparent; color: var(--burgundy); font-weight: 600; }
.hero-proof { display: flex; gap: 38px; margin-top: 60px; }
.hero-proof div { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; border-left: 3px solid var(--coral); }
.hero-proof strong { font-family: "Space Grotesk"; font-size: 18px; }
.hero-proof span { color: #756a6e; font-size: 13px; }
.hero-media { position: relative; z-index: 1; justify-self: end; width: min(460px, 100%); }
.hero-media__frame { position: relative; aspect-ratio: 9/14; overflow: hidden; border-radius: 48px 8px 48px 8px; background: var(--charcoal); box-shadow: 24px 28px 0 rgba(106,21,47,.12), 0 36px 90px rgba(33,29,32,.24); }
.hero-media__frame::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.28); border-radius: 34px 5px 34px 5px; pointer-events: none; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08) 40%, rgba(18,11,14,.76) 100%); pointer-events: none; }
.hero-media__label { position: absolute; left: 34px; bottom: 38px; display: flex; gap: 12px; color: white; font-family: "Space Grotesk"; font-weight: 600; }
.hero-media__label span { color: var(--coral); }
.hero-media__controls { position: absolute; right: 32px; bottom: 28px; display: flex; gap: 8px; }
.hero-media__controls button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(20,15,17,.38); color: white; backdrop-filter: blur(12px); }
.hero-media__note { width: 78%; margin: 32px 0 0 auto; color: #6c6266; font-size: 14px; line-height: 1.5; }

.journey-path { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4,1fr); padding: 0 max(7vw,92px) 0 max(11vw,150px); background: var(--warm-white); border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone); }
.journey-path a { position: relative; display: grid; grid-template-columns: 32px 1fr; align-items: center; min-height: 78px; color: #887b80; text-decoration: none; }
.journey-path a span { color: var(--coral); font-family: "Space Grotesk"; font-size: 11px; font-weight: 700; }
.journey-path a strong { font-family: "Space Grotesk"; font-size: 14px; letter-spacing: .11em; text-transform: uppercase; }
.journey-path a i { position: absolute; right: 24px; width: calc(100% - 120px); height: 1px; background: var(--stone); }
.journey-path a i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--burgundy); border-right: 1px solid var(--burgundy); transform: rotate(45deg); }
.journey-path a.is-active { color: var(--burgundy); }
.journey-path a.is-active::after { content:""; position:absolute; left:0; right:24px; bottom:-1px; height:4px; background:var(--coral); transform-origin:left; }
.capability-ticker { display: flex; justify-content: center; align-items: center; gap: 23px; overflow: hidden; white-space: nowrap; min-height: 66px; padding: 0 26px; background: var(--charcoal); color: white; font-family: "Space Grotesk"; font-size: clamp(13px,1.2vw,17px); font-weight: 700; letter-spacing: .08em; }
.capability-ticker i { width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }

.capabilities-section { position: relative; overflow: hidden; padding: 130px max(7vw, 92px) 120px max(11vw, 150px); background: var(--burgundy); color: white; }
.capabilities-section::before { content: "02"; position: absolute; right: 2vw; top: 54px; color: rgba(255,255,255,.055); font-family: "Space Grotesk"; font-size: clamp(150px,18vw,300px); font-weight: 700; line-height: .8; letter-spacing: -.08em; }
.capabilities-section > * { position: relative; z-index: 1; }
.section-heading { display: grid; grid-template-columns: 1.1fr .7fr; column-gap: 8vw; align-items: end; max-width: 1150px; }
.section-heading .eyebrow { grid-column: 1/-1; }
.section-heading h2 { margin-bottom: 0; font-size: clamp(46px, 5.4vw, 78px); line-height: .98; letter-spacing: -.055em; }
.section-heading > p:last-child { margin-bottom: 7px; max-width: 390px; line-height: 1.6; }
.section-heading--light h2 em { color: var(--coral); }
.section-heading--light > p:last-child { color: rgba(255,255,255,.66); }
.capability-workbench { display: grid; grid-template-columns: .82fr 1.18fr; gap: 42px; margin-top: 80px; }
.capability-selector { border-top: 1px solid rgba(255,255,255,.2); }
.capability-selector button { width: 100%; display: grid; grid-template-columns: 44px 1fr 24px; gap: 14px; align-items: center; padding: 23px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.2); background: transparent; color: rgba(255,255,255,.55); text-align: left; }
.capability-selector button span { color: var(--coral); font-family: "Space Grotesk"; font-size: 12px; }
.capability-selector button strong { font-family: "Space Grotesk"; font-size: clamp(19px,2vw,27px); font-weight: 500; }
.capability-selector button svg { opacity: 0; }
.capability-selector button.is-active { color: white; }
.capability-selector button.is-active svg { opacity: 1; color: var(--coral); }
.capability-selector button { transition: color 180ms cubic-bezier(.23,1,.32,1), padding-left 180ms cubic-bezier(.23,1,.32,1); }
.capability-selector button:hover, .capability-selector button:focus-visible { color: white; padding-left: 8px; }
.capability-feature { position: relative; min-height: 635px; overflow: hidden; border-radius: 8px 52px 8px 52px; background: var(--charcoal); }
.capability-feature > img { width: 100%; height: 100%; object-fit: cover; }
.capability-feature__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,18,22,.05) 30%, rgba(26,16,20,.93) 100%); }
.capability-feature__copy { position: absolute; left: clamp(26px,4vw,58px); right: clamp(26px,4vw,58px); bottom: clamp(28px,4vw,54px); }
.capability-feature__copy > span { color: var(--coral); font-family: "Space Grotesk"; font-size: 13px; }
.capability-feature__copy h3 { margin: 8px 0 18px; font-size: clamp(36px,4vw,62px); letter-spacing: -.05em; }
.capability-feature__copy p { max-width: 580px; font-size: 19px; line-height: 1.5; }
.capability-feature__copy small { display: block; max-width: 600px; color: rgba(255,255,255,.66); font-size: 14px; line-height: 1.5; }

.process-section { position: relative; display: grid; grid-template-columns: .84fr 1.16fr; min-height: 780px; overflow: hidden; background: var(--warm-white); }
.process-section::after { content: "MAKE"; position: absolute; right: -14px; bottom: -18px; color: rgba(106,21,47,.055); font-family: "Space Grotesk"; font-size: clamp(110px,14vw,240px); font-weight: 700; letter-spacing: -.08em; pointer-events: none; }
.process-section > * { position: relative; z-index: 1; }
.process-visual { position: relative; min-height: 680px; overflow: hidden; }
.process-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(33,29,32,.45),transparent 55%); }
.process-visual img { width: 100%; height: 100%; object-fit: cover; }
.process-visual > span { position: absolute; z-index: 1; left: 42px; bottom: 42px; color: white; font-family: "Space Grotesk"; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.process-copy { padding: 110px max(7vw, 90px) 90px clamp(55px,7vw,112px); }
.process-copy h2 { max-width: 700px; margin-bottom: 26px; font-size: clamp(46px,5vw,76px); line-height: 1; letter-spacing: -.055em; }
.process-intro { max-width: 620px; color: #685e62; font-size: 18px; line-height: 1.6; }
.process-steps { margin-top: 48px; border-top: 1px solid var(--stone); }
.process-steps article { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--stone); }
.process-steps article::before { content:""; position:absolute; left:18px; top:45px; bottom:-25px; width:1px; background:linear-gradient(var(--coral),var(--stone)); }
.process-steps article:last-child::before { display:none; }
.process-steps article > span { color: var(--coral); font-family: "Space Grotesk"; font-size: 13px; font-weight: 700; }
.process-steps h3 { margin: 0 0 5px; font-size: 23px; }
.process-steps p { margin: 0; color: #6c6266; line-height: 1.5; }

.projects-section { position: relative; overflow: hidden; padding: 130px max(7vw, 92px) 140px max(11vw, 150px); background: var(--charcoal); color: white; }
.projects-section::before { content: "03"; position: absolute; right: 2vw; top: 58px; color: rgba(255,255,255,.045); font-family: "Space Grotesk"; font-size: clamp(170px,20vw,330px); font-weight: 700; line-height: .78; letter-spacing: -.09em; }
.projects-section > * { position: relative; z-index: 1; }
.section-heading--dark h2 em { color: var(--coral); }
.section-heading--dark > p:last-child { color: rgba(255,255,255,.62); }
.projects-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 34px; margin: 55px 0 38px; }
.project-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.project-filters button { padding: 11px 17px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: transparent; color: rgba(255,255,255,.68); font-size: 13px; }
.project-filters button.is-active { border-color: var(--coral); background: var(--coral); color: white; }
.project-count { display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto; margin: 0; color: rgba(255,255,255,.56); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.project-count strong { color: var(--coral); font-family: "Space Grotesk"; font-size: 29px; letter-spacing: -.05em; }
.projects-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 86px; gap: 20px; }
.project-tile { position: relative; overflow: hidden; padding: 0; border: 0; background: #151214; color: white; text-align: left; }
.project-tile--0 { grid-column: span 7; grid-row: span 6; border-radius: 2px 42px 2px 8px; }
.project-tile--1 { grid-column: span 5; grid-row: span 5; border-radius: 30px 2px 8px 2px; }
.project-tile--2 { grid-column: span 5; grid-row: span 5; border-radius: 2px 8px 2px 30px; }
.project-tile img { width: 100%; height: 100%; object-fit: cover; }
.project-tile img { transition: transform 420ms cubic-bezier(.23,1,.32,1); }
.project-tile:hover img, .project-tile:focus-visible img { transform: scale(1.035); }
.project-tile__wash { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 30%,rgba(18,12,15,.88) 100%); }
.project-tile__index { position: absolute; top: 13px; left: 20px; color: rgba(255,107,97,.88); font-family: "Space Grotesk"; font-size: clamp(34px,4.2vw,70px); font-weight: 700; line-height: 1; letter-spacing: -.08em; }
.project-tile__source { position: absolute; top: 24px; right: 22px; padding: 7px 10px; background: rgba(27,22,25,.78); color: white; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; backdrop-filter: blur(10px); }
.project-tile__copy { position: absolute; left: 26px; right: 26px; bottom: 26px; display: flex; flex-direction: column; gap: 9px; }
.project-tile__copy small { color: var(--coral); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.project-tile__copy strong { max-width: 650px; font-family: "Space Grotesk"; font-size: clamp(21px,2.5vw,34px); line-height: 1.1; }
.project-tile__copy i { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; font-style: normal; opacity: .7; }
.project-tile__copy i svg { width: 15px; height: 15px; }

.contact-section { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; gap: 7vw; padding: 140px max(7vw, 92px) 130px max(11vw, 150px); background: var(--warm-white); color: var(--burgundy); }
.contact-section::before { content: "04"; position: absolute; left: 2vw; bottom: -30px; color: rgba(106,21,47,.055); font-family: "Space Grotesk"; font-size: clamp(180px,22vw,350px); font-weight: 700; line-height: .8; letter-spacing: -.09em; }
.contact-section > * { position: relative; z-index: 1; }
.contact-title h2 { margin-bottom: 0; font-size: clamp(56px,7vw,104px); line-height: .9; letter-spacing: -.065em; }
.contact-title h2 em { color: var(--coral); }
.contact-copy > p { max-width: 600px; margin-bottom: 42px; font-size: 20px; line-height: 1.55; }
.contact-actions { border-top: 1px solid rgba(106,21,47,.24); }
.contact-actions > a { display: grid; grid-template-columns: 36px 1fr 24px; align-items: center; gap: 14px; padding: 22px 0; border-bottom: 1px solid rgba(106,21,47,.24); color: var(--burgundy); text-decoration: none; }
.contact-actions > a > svg:first-child { color: var(--coral); }
.contact-actions span { display: flex; flex-direction: column; gap: 3px; font-family: "Space Grotesk"; font-size: 18px; font-weight: 600; }
.contact-actions small { font-family: "DM Sans"; font-size: 11px; font-weight: 500; letter-spacing: .12em; opacity: .7; text-transform: uppercase; }
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; min-height: 130px; padding: 26px max(7vw,92px); background: var(--burgundy-deep); color: white; }
.site-footer .brand-lockup { width: 250px; color: white; }
.site-footer .brand-lockup img { filter: brightness(0) invert(1); }
.site-footer p { margin: 0; font-family: "Space Grotesk"; font-size: 17px; }
.site-footer > span { justify-self: end; font-size: 12px; opacity: .62; }

.film-dialog { width: min(94vw, 520px); border: 0; background: var(--charcoal); color: white; }
.film-dialog video { max-height: 72vh; margin: 0 auto; border-radius: 22px 5px 22px 5px; }
.film-dialog [data-slot="dialog-description"] { color: rgba(255,255,255,.62); }
.project-dialog { width: min(94vw, 1120px); max-width: 1120px; max-height: 90vh; overflow: auto; display: grid; grid-template-columns: 1.2fr .8fr; gap: 0; padding: 0; border: 0; background: var(--warm-white); }
.project-dialog__gallery { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; min-height: 630px; background: var(--charcoal); }
.project-dialog__gallery img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.project-dialog__gallery img:first-child:last-child, .project-dialog__gallery img:first-child:nth-last-child(2) { grid-column: 1/-1; }
.project-dialog__body { padding: clamp(34px,5vw,64px); align-self: center; }
.project-dialog__body h2 { font-family: "Space Grotesk"; font-size: clamp(34px,4vw,54px); line-height: 1; letter-spacing: -.045em; }
.project-dialog__body [data-slot="dialog-description"] { color: #6b6165; font-size: 16px; line-height: 1.55; }
.project-dialog__proof { display: flex; flex-direction: column; margin: 32px 0; border-top: 1px solid var(--stone); }
.project-dialog__proof span { padding: 14px 0; border-bottom: 1px solid var(--stone); font-weight: 600; }
.project-dialog__body > a { display: inline-flex; align-items: center; gap: 8px; color: var(--burgundy); font-weight: 700; text-decoration: none; }

.mobile-sheet { background: var(--burgundy); color: white; border: 0; }
.mobile-sheet .brand-lockup { filter: brightness(0) invert(1); width: 62px; }
.mobile-nav { display: flex; flex-direction: column; margin-top: 70px; }
.mobile-nav a { display: grid; grid-template-columns: 38px 1fr 24px; align-items: center; gap: 12px; padding: 21px 0; border-bottom: 1px solid rgba(255,255,255,.22); color: white; font-family: "Space Grotesk"; font-size: 28px; text-decoration: none; }
.mobile-nav a span { color: var(--coral); font-size: 11px; }
.mobile-sheet__contact { display: flex; flex-direction: column; gap: 8px; margin-top: 46px; }
.mobile-sheet__contact a { color: white; text-decoration: none; }

.primary-action, .header-cta, .text-action, .hero-media__controls button, .project-filters button, .contact-actions > a {
  transition: transform 160ms cubic-bezier(.23,1,.32,1), background-color 180ms cubic-bezier(.23,1,.32,1), color 180ms cubic-bezier(.23,1,.32,1), border-color 180ms cubic-bezier(.23,1,.32,1);
}
.primary-action:active, .header-cta:active, .text-action:active, .hero-media__controls button:active, .project-filters button:active, .contact-actions > a:active { transform: scale(.97); }
.primary-action:hover, .header-cta:hover { background: var(--burgundy-deep); }
.contact-actions > a:hover, .contact-actions > a:focus-visible { padding-left: 10px; padding-right: 10px; background: rgba(106,21,47,.07); }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(255,107,97,.65); outline-offset: 4px; }

@media (max-width: 1260px) {
  .chapter-rail { display: none; }
  .hero-section, .capabilities-section, .projects-section, .contact-section, .journey-path { padding-left: 7vw; }
  .site-header { width: calc(100% - 34px); }
}

@media (max-width: 960px) {
  .desktop-nav, .header-cta { display: none; }
  .mobile-menu-trigger { display: inline-flex; }
  .site-header { grid-template-columns: 1fr auto; }
  .brand-lockup { width: 230px; }
  .hero-section { grid-template-columns: 1fr; padding-top: 145px; }
  .hero-copy { max-width: 820px; }
  .hero-media { justify-self: center; width: min(440px,75vw); margin-top: 24px; }
  .section-heading { grid-template-columns: 1fr; }
  .section-heading > p:last-child { margin-top: 26px; }
  .capability-workbench { grid-template-columns: 1fr; }
  .capability-feature { min-height: 560px; }
  .process-section { grid-template-columns: 1fr; }
  .process-visual { min-height: 560px; }
  .contact-section { grid-template-columns: 1fr; }
  .project-dialog { grid-template-columns: 1fr; }
  .project-dialog__gallery { min-height: 460px; }
  .projects-toolbar { align-items: flex-start; flex-direction: column; gap: 18px; }
}

@media (max-width: 720px) {
  .site-header { top: 10px; width: calc(100% - 20px); min-height: 64px; padding-left: 14px; border-radius: 18px; }
  .brand-lockup { grid-template-columns: 42px 1fr; width: 205px; gap: 9px; }
  .brand-lockup img { width: 42px; height: 42px; }
  .brand-lockup > span strong { font-size: 18px; }
  .brand-lockup > span small { font-size: 7px; }
  .hero-brand-signal { grid-template-columns: 50px 1fr; margin-bottom: 24px; }
  .hero-brand-signal img { width: 50px; height: 50px; }
  .mobile-chapter-indicator { position: fixed; z-index: 55; top: 84px; right: 16px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(106,21,47,.12); border-radius: 999px; background: rgba(247,243,239,.88); color: var(--burgundy); backdrop-filter: blur(14px); }
  .mobile-chapter-indicator span { color: var(--coral); font-family: "Space Grotesk"; font-size: 10px; }
  .mobile-chapter-indicator strong { font-family: "Space Grotesk"; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
  .hero-section, .capabilities-section, .projects-section, .contact-section { padding-left: 20px; padding-right: 20px; }
  .hero-section { padding-top: 120px; padding-bottom: 66px; gap: 42px; }
  .hero-copy h1 { font-size: clamp(58px,18vw,78px); }
  .hero-intro { font-size: 17px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-proof { gap: 20px; flex-direction: column; margin-top: 42px; }
  .hero-media { width: min(100%,390px); }
  .hero-media__frame { border-radius: 36px 6px 36px 6px; }
  .hero-media__note { width: 92%; }
  .capability-ticker { justify-content: flex-start; gap: 14px; }
  .journey-path { grid-template-columns: repeat(4,minmax(108px,1fr)); overflow-x: auto; padding: 0 20px; }
  .journey-path a { min-height: 66px; }
  .journey-path a i { display:none; }
  .capability-ticker span:nth-of-type(n+4), .capability-ticker i:nth-of-type(n+4) { display: none; }
  .capabilities-section, .projects-section { padding-top: 92px; padding-bottom: 100px; }
  .section-heading h2 { font-size: 48px; }
  .capability-workbench { margin-top: 55px; }
  .capability-selector button { padding: 18px 0; }
  .capability-feature { min-height: 500px; }
  .process-visual { min-height: 500px; }
  .process-copy { padding: 78px 20px; }
  .process-copy h2 { font-size: 48px; }
  .process-steps article { grid-template-columns: 44px 1fr; }
  .projects-toolbar { margin-top: 38px; }
  .project-filters { width: calc(100vw - 40px); overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; scrollbar-width: none; }
  .project-filters::-webkit-scrollbar { display: none; }
  .project-filters button { flex: 0 0 auto; white-space: nowrap; }
  .projects-grid { display: flex; flex-direction: column; }
  .project-tile { min-height: 480px; border-radius: 6px 34px 6px 34px; }
  .project-tile__copy strong { font-size: 28px; }
  .contact-section { padding-top: 96px; padding-bottom: 90px; }
  .contact-title h2 { font-size: 60px; }
  .contact-copy > p { font-size: 17px; }
  .site-footer { grid-template-columns: 1fr; justify-items: start; padding: 38px 20px; }
  .site-footer p { justify-self: start; }
  .site-footer > span { justify-self: start; }
  .project-dialog__gallery { min-height: 380px; }
  .project-dialog__body { padding: 30px 24px 38px; }
}

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

/* ===========================================================================
 * Overlays, forms and motion
 *
 * What Radix used to supply. The dialogs are native <dialog> elements opened
 * with showModal(), which gives the focus trap, the Escape key, inert
 * background content and the ::backdrop for free — all things the React build
 * was pulling in a library for.
 *
 * The class names and the [data-slot] hooks match what the ported CSS above
 * already targets, so .project-dialog, .film-dialog and .mobile-sheet keep
 * their original rules and only need the plumbing added here.
 * ========================================================================= */

dialog {
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
}

dialog::backdrop {
  background: rgba(33, 29, 32, 0.68);
  backdrop-filter: blur(5px);
}

/* Set on <body> while any dialog is open, so the page behind cannot scroll. */
body.has-dialog {
  overflow: hidden;
}

dialog[open] {
  animation: dialog-in 240ms cubic-bezier(0.23, 1, 0.32, 1);
}

dialog[open]::backdrop {
  animation: backdrop-in 240ms ease;
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dialog-close {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(247, 243, 239, 0.92);
  color: var(--charcoal);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(54, 24, 35, 0.16);
}

.dialog-close svg { width: 19px; height: 19px; }
.dialog-close:hover { background: white; }

.film-dialog { position: relative; padding: 26px; border-radius: 26px; }
.film-dialog h2 { margin-bottom: 6px; font-family: "Space Grotesk"; font-size: 23px; letter-spacing: -.02em; }
.film-dialog [data-slot="dialog-description"] { margin-bottom: 18px; font-size: 14px; }
.film-dialog .dialog-close { background: rgba(255,255,255,.14); color: white; }
.film-dialog .dialog-close:hover { background: rgba(255,255,255,.26); }

.project-dialog { position: relative; border-radius: 30px; }
.project-dialog__gallery { border-radius: 30px 0 0 30px; overflow: hidden; }

/* ---------------------------------------------------------------------------
 * The mobile menu, as a sheet sliding in from the right.
 * ------------------------------------------------------------------------- */

.mobile-sheet {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(430px, 88vw);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 26px 26px 40px;
  overflow-y: auto;
  border-radius: 0;
}

.mobile-sheet[open] { animation: sheet-in 280ms cubic-bezier(0.23, 1, 0.32, 1); }

@keyframes sheet-in {
  from { transform: translateX(100%); }
  to   { transform: none; }
}

.mobile-sheet .dialog-close { background: rgba(255,255,255,.14); color: white; }
.mobile-sheet .dialog-close:hover { background: rgba(255,255,255,.26); }

/* ---------------------------------------------------------------------------
 * Let's talk — the enquiry dialog
 * ------------------------------------------------------------------------- */

.talk-dialog {
  position: relative;
  width: min(94vw, 620px);
  max-height: 92dvh;
  overflow-y: auto;
  padding: clamp(30px, 4vw, 46px);
  border-radius: 30px;
  background: var(--warm-white);
  color: var(--burgundy);
  box-shadow: 0 30px 90px rgba(54, 24, 35, 0.3);
}

.talk-dialog h2 {
  margin-bottom: 10px;
  font-family: "Space Grotesk";
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
}

.talk-dialog [data-slot="dialog-description"] {
  margin-bottom: 26px;
  max-width: 46ch;
  color: rgba(106, 21, 47, .74);
  font-size: 15px;
  line-height: 1.5;
}

.talk-form { display: grid; gap: 16px; }
.talk-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 7px; }

.field label {
  font-family: "Space Grotesk";
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(106, 21, 47, .72);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid rgba(106, 21, 47, .2);
  border-radius: 15px;
  background: white;
  color: var(--charcoal);
  font-size: 16px; /* 16px or iOS zooms the page on focus */
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field textarea { min-height: 128px; line-height: 1.5; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a152f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 17px;
  padding-right: 44px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 107, 97, .22);
}

.field--error input,
.field--error select,
.field--error textarea { border-color: #c0392b; }

.field__error { color: #c0392b; font-size: 13px; font-weight: 500; }

/*
 * The honeypot. Hidden with CSS and moved off-screen rather than
 * type="hidden": bots that skip hidden inputs still fill this one, and a
 * screen reader is told to ignore it.
 */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.talk-form__error {
  padding: 14px 16px;
  border-left: 3px solid #c0392b;
  background: rgba(192, 57, 43, .08);
  color: #8e2a20;
  font-size: 14px;
  line-height: 1.5;
}

.talk-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  margin-top: 6px;
  padding: 0 26px;
  border-radius: 18px;
  background: var(--burgundy);
  color: white;
  font-family: "Space Grotesk";
  font-size: 16px;
  font-weight: 700;
}

.talk-form__submit svg { width: 20px; height: 20px; }
.talk-form__submit:hover { background: var(--burgundy-deep); }

.talk-form__note {
  color: rgba(106, 21, 47, .62);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * The thank-you panel, shown in place of the contact list after an enquiry.
 * ------------------------------------------------------------------------- */

.enquiry-sent {
  display: grid;
  gap: 14px;
  padding: 28px;
  border-left: 4px solid var(--coral);
  border-radius: 0 20px 20px 0;
  background: rgba(106, 21, 47, .06);
}

.enquiry-sent strong { font-family: "Space Grotesk"; font-size: 21px; letter-spacing: -.02em; }
.enquiry-sent p { font-size: 15.5px; line-height: 1.55; }

.enquiry-sent a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 16px;
  background: #25d366;
  color: #07301a;
  font-family: "Space Grotesk";
  font-weight: 700;
}

.enquiry-sent a svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------------
 * The floating WhatsApp bubble
 * ------------------------------------------------------------------------- */

.talk-bubble {
  position: fixed;
  z-index: 70;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 22px 0 19px;
  border-radius: 999px;
  background: #25d366;
  color: #07301a;
  font-family: "Space Grotesk";
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 14px 38px rgba(16, 92, 51, .38);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 260ms cubic-bezier(.23,1,.32,1), opacity 260ms ease, background-color 180ms ease;
}

/* Held back until the hero has been scrolled past — it would otherwise cover
   the hero's own call to action on a phone. */
.talk-bubble.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.talk-bubble:hover { background: #1fbe5a; }
.talk-bubble:active { transform: scale(.97); }
.talk-bubble svg { width: 25px; height: 25px; }

@media (max-width: 720px) {
  .talk-bubble { right: 14px; bottom: 14px; height: 54px; padding: 0 18px 0 16px; font-size: 14px; }
  .talk-form__row { grid-template-columns: 1fr; }
  .talk-dialog { border-radius: 24px; }
}

/* ---------------------------------------------------------------------------
 * Motion
 *
 * framer-motion drove these in the React build. The shapes are the same: a
 * short rise and fade, staggered by position, played once when the element
 * first comes into view.
 * ------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 620ms cubic-bezier(.23, 1, .32, 1),
    transform 620ms cubic-bezier(.23, 1, .32, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal--x { transform: translateX(18px); }
.reveal--right { transform: translateX(34px); }
.reveal.is-visible { opacity: 1; transform: none; }

/* The hero animates on load rather than on scroll — it is already in view. */
.hero-copy, .hero-media { animation: hero-in 720ms cubic-bezier(.23, 1, .32, 1) both; }
.hero-media { animation-name: hero-in-right; animation-duration: 820ms; animation-delay: 120ms; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes hero-in-right {
  from { opacity: 0; transform: translateX(34px); }
  to   { opacity: 1; transform: none; }
}

.project-tile { transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
.project-tile:hover { transform: translateY(-6px); }

/*
 * Anything driven by JS that has not run yet must still be usable. If the
 * script fails to load, .reveal elements would otherwise stay invisible — so
 * the no-js class the script removes on boot turns the animation off entirely.
 */
.no-js .reveal { opacity: 1; transform: none; }
.no-js .talk-bubble { opacity: 1; transform: none; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-copy, .hero-media { animation: none; }
  dialog[open], dialog[open]::backdrop, .mobile-sheet[open] { animation: none; }
  .project-tile:hover { transform: none; }
}

/* ===========================================================================
 * Icon sizing
 *
 * The SVGs render at 24×24 and inherit currentColor. The React build passed a
 * `size` prop per icon; these rules are the same numbers, kept next to the
 * components they belong to rather than scattered through the markup.
 * ========================================================================= */

.header-cta svg { width: 16px; height: 16px; }
.primary-action svg { width: 22px; height: 22px; }
.text-action svg { width: 17px; height: 17px; }
.mobile-menu-trigger svg { width: 24px; height: 24px; }
.hero-media__controls svg { width: 17px; height: 17px; }
.hero-media__controls span { display: grid; place-items: center; }
.capability-selector button svg { width: 24px; height: 24px; }
.mobile-nav a svg { width: 22px; height: 22px; }
.contact-actions > a > svg:first-child { width: 24px; height: 24px; }
.contact-actions > a > svg:last-child { width: 20px; height: 20px; }
.project-dialog__body > a svg { width: 16px; height: 16px; }
.talk-bubble svg { width: 25px; height: 25px; }

/* The mobile sheet's "Let's talk" button is a .primary-action, which is laid
   out for a label followed by an arrow. Here the icon leads, so the gap that
   pushes the two apart has to go. */
.mobile-sheet__contact .primary-action { flex-direction: row-reverse; gap: 12px; }

/* ===========================================================================
 * Skip link
 *
 * Hidden until focused. The header is fixed and the chapter rail is a dozen
 * links, so without this a keyboard user tabs through the whole apparatus
 * before reaching the page.
 * ========================================================================= */

.skip-link {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 50%;
  padding: 14px 22px;
  border-radius: 0 0 14px 14px;
  background: var(--burgundy);
  color: white;
  font-family: "Space Grotesk";
  font-weight: 700;
  text-decoration: none;
  transform: translate(-50%, -120%);
  transition: transform 180ms cubic-bezier(.23, 1, .32, 1);
}

.skip-link:focus-visible { transform: translate(-50%, 0); }