/* ============================================================
   ACE INTERIORS — COMPONENTS
   Reads every value from tokens.css. No raw hex here.
   ============================================================ */

/* ---------- RESET ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-body);
  background: var(--c-canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--c-accent); color: var(--c-on-dark); }

/* ---------- LAYOUT PRIMITIVES ---------------------------- */
.wrap { width: 100%; max-width: var(--w-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-section); }
.section--sand { background: var(--c-sand); }
.section--ink { background: var(--c-ink); color: var(--c-on-dark); }

/* ---------- TYPOGRAPHY ----------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--s-3);
}
.eyebrow::before {
  content: ""; display: inline-block;
  width: 26px; height: 1px; background: var(--c-accent);
  vertical-align: middle; margin-right: 0.7em;
}
.section--ink .eyebrow { color: var(--c-on-dark-muted); }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: var(--w-display);
  color: var(--c-ink);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--c-on-dark); }
.h-hero { font-size: var(--t-hero); line-height: var(--lh-tight); }
.h-lg   { font-size: var(--t-h2); }
.h-md   { font-size: var(--t-h3); }
em { font-style: normal; color: var(--c-accent-bright); }
/* Over photography and dark bands the deep green loses contrast —
   swap to the pale sage so the accent word stays readable. */
.hero em,
.section--ink em { color: var(--c-accent-light); }
.lead { font-size: var(--t-lead); max-width: var(--w-text); }

.section-head { max-width: 780px; margin-bottom: var(--s-7); }
.section-head p { font-size: var(--t-lead); margin-top: var(--s-3); }

/* ---------- BUTTONS -------------------------------------- */
.btn {
  --btn-bg: var(--c-accent);
  --btn-fg: var(--c-on-dark);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 1.05em 2em;
  border-radius: var(--r-pill);
  font-size: var(--t-small); font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
  will-change: transform;
}
.btn span { transition: transform var(--d-fast) var(--e-out); }
.btn:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.btn:hover span { transform: translateX(5px); }
/* sweep fill on hover */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c-ink);
  transform: translateY(101%);
  transition: transform var(--d-mid) var(--e-out);
}
.btn { z-index: 0; }
.btn:hover::after { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--c-ink);
  border: 1px solid var(--c-line);
}
.btn--ghost:hover { color: var(--c-on-dark); }
.section--ink .btn--ghost { --btn-fg: var(--c-on-dark); border-color: var(--c-on-dark-line); }
.section--ink .btn--ghost::after { background: var(--c-accent); }
.btn--sm { padding: 0.8em 1.5em; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: var(--t-small); font-weight: 600; color: var(--c-ink);
  padding-bottom: 3px; background-image: linear-gradient(var(--c-accent), var(--c-accent));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--d-mid) var(--e-out), color var(--d-fast) var(--e-out);
}
.link-arrow:hover { background-size: 100% 1px; color: var(--c-accent); }

/* ---------- HEADER --------------------------------------- */
/* Floating pill bar: rounded surface inset from the viewport,
   nav left · wordmark centred · solid CTA right. */
.header {
  position: fixed; inset: var(--s-3) 0 auto 0; z-index: 90;
  width: min(calc(100% - (var(--gutter) * 2)), var(--w-max));
  margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--s-4);
  padding: 0.55rem 0.55rem 0.55rem var(--s-4);
  background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  backdrop-filter: blur(16px);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--d-mid) var(--e-out), background var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}
.header.is-stuck { box-shadow: var(--sh-md); background: var(--c-surface); }
.header__logo {
  grid-column: 2; grid-row: 1;
  font-family: var(--f-display); font-weight: 500;
  font-size: 1.35rem; color: var(--c-accent);
  letter-spacing: var(--ls-tight); white-space: nowrap;
}
.header__logo span { color: var(--c-accent); }
.header__logo .mark { color: var(--c-accent-bright); margin-right: 0.35em; }
.header__nav { grid-column: 1; grid-row: 1; display: flex; gap: var(--s-4); }
.header__nav a {
  position: relative; font-size: var(--t-small); font-weight: 500; color: var(--c-ink);
  padding-block: 4px;
}
.header__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--c-accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--d-mid) var(--e-out);
}
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header__right { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); }

.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.burger span { display: block; width: 24px; height: 1.5px; background: var(--c-ink); transition: transform var(--d-fast) var(--e-out), opacity var(--d-fast); }
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- MOBILE MENU ---------------------------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 89;
  background: var(--c-ink); color: var(--c-on-dark);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-8) var(--gutter);
  clip-path: circle(0% at calc(100% - 3rem) 3rem);
  transition: clip-path 0.75s var(--e-inout);
  pointer-events: none;
}
.mobile-menu.is-open { clip-path: circle(150% at calc(100% - 3rem) 3rem); pointer-events: auto; }
.mobile-menu a { font-family: var(--f-display); font-size: clamp(2rem, 1.2rem + 3.6vw, 3.2rem); color: var(--c-on-dark); display: block; padding-block: 0.22em; }
.mobile-menu a:hover { color: var(--c-accent); }
.mobile-menu__foot { margin-top: var(--s-6); color: var(--c-on-dark-muted); font-size: var(--t-small); display: grid; gap: 4px; }

/* ---------- HERO ----------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: -8% 0 0 0; z-index: -2; }
.hero__media img { width: 100%; height: 116%; object-fit: cover; }
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    var(--c-veil-45) 0%,
    var(--c-veil-55) 45%,
    var(--c-veil-75) 100%);
}
.hero__inner { position: relative; width: 100%; max-width: var(--w-max); margin-inline: auto; padding: 0 var(--gutter) var(--s-7); color: var(--c-on-dark); }
.hero .eyebrow { color: var(--c-on-dark); }
.hero__title { color: var(--c-on-dark); max-width: 16ch; font-weight: var(--w-display); line-height: var(--lh-tight); }
/* wheel sits at the end of the first headline line */
.hero .wheel { top: 8%; right: var(--gutter); }
@media (max-width: 820px) { .hero .wheel { top: auto; bottom: 100%; right: var(--gutter); width: 96px; } }

/* hero foot: sub-copy left, CTA right — matches the bar rhythm */
.hero__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-5); }
/* line-mask reveal wrapper */
.mask { display: block; overflow: hidden; }
.mask > span { display: block; }
.hero__sub { color: var(--c-on-dark); opacity: 0.86; max-width: 56ch; margin-top: var(--s-4); font-size: var(--t-lead); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.hero__scroll {
  position: absolute; right: var(--gutter); bottom: var(--s-5);
  font-size: var(--t-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--c-on-dark); opacity: 0.62; writing-mode: vertical-rl;
}

/* ---------- PANEL-WIPE IMAGE REVEAL ---------------------- */
/* The panel is a real element laid over the photo and scaled
   away by GSAP. The image itself is never clipped or hidden, so
   if the animation never runs the photo is still fully visible. */
.img-reveal { position: relative; overflow: hidden; border-radius: inherit; }
.img-reveal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-reveal__panel {
  position: absolute; inset: 0; z-index: 2;
  background: var(--c-sand);
  transform-origin: top center;
  pointer-events: none;
}
.no-js .img-reveal__panel { display: none; }

/* ---------- SPLIT SECTION HEAD --------------------------- */
.section-head--split {
  max-width: none; display: grid;
  grid-template-columns: 1.15fr 1fr; gap: var(--s-5);
  align-items: end;
}
.section-head--split p { font-size: var(--t-lead); max-width: 46ch; }

/* ---------- STATS BAND (tighter than a full section) ----- */
.band { padding-block: clamp(2.75rem, 1.8rem + 3.6vw, 4.5rem); }

/* ---------- STICKY PROCESS LAYOUT ------------------------ */
.process__layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: start; }
.process__aside { align-self: start; }
.process__aside p { margin-top: var(--s-3); max-width: 34ch; }

/* ---------- ROTATING SEAL / WHEEL BADGE ------------------ */
/* Circular text ring that rotates continuously. The text is
   laid out along an SVG <textPath>; the whole <svg> spins.   */
.wheel {
  position: absolute; z-index: 2;
  width: clamp(112px, 9vw, 168px); aspect-ratio: 1;
  display: grid; place-items: center;
  pointer-events: none;
}
.wheel__ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: wheel-spin var(--d-wheel) linear infinite;
  will-change: transform;
}
.wheel__ring text {
  font-family: var(--f-body);
  font-size: 8.4px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  fill: var(--c-on-dark);
}
.wheel__disc {
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c-on-dark) 38%, transparent);
  display: grid; place-items: center;
  color: var(--c-on-dark); font-size: 1.15rem;
}
/* Dark-on-light variant for use over pale sections */
.wheel--ink .wheel__ring text { fill: var(--c-accent); }
.wheel--ink .wheel__disc { border-color: color-mix(in srgb, var(--c-accent) 40%, transparent); color: var(--c-accent); }

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

@media (prefers-reduced-motion: reduce) {
  .wheel__ring { animation: none; }
}

/* ---------- MARQUEE -------------------------------------- */
.marquee { overflow: hidden; border-block: 1px solid var(--c-line); padding-block: var(--s-3); background: var(--c-canvas); }
.marquee__track { display: flex; gap: var(--s-5); width: max-content; will-change: transform; }
.marquee__track span {
  font-family: var(--f-display); font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.7rem);
  color: var(--c-muted); display: inline-flex; align-items: center; gap: var(--s-5);
}
.marquee__track span::after { content: "◆"; font-size: 0.55em; color: var(--c-accent); }

/* ---------- ABOUT ---------------------------------------- */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: center; }
.about__media { position: relative; }
.about__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-lg); }
.about__badge {
  position: absolute; right: -14px; bottom: var(--s-5);
  background: var(--c-surface); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); box-shadow: var(--sh-md);
  display: grid; gap: 2px;
}
.about__badge b { font-family: var(--f-display); font-size: 1.3rem; color: var(--c-accent); }
.about__badge span { font-size: var(--t-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.about__body p { margin-top: var(--s-3); max-width: var(--w-text); }
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-5); }
.principle__i { color: var(--c-accent); font-size: 1.1rem; }
.principle b { display: block; font-family: var(--f-display); font-size: 1.08rem; color: var(--c-ink); margin-block: 6px 4px; }
.principle p { font-size: var(--t-small); }

/* ---------- SERVICES ------------------------------------- */
.svc-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.svc {
  background: var(--c-surface); border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out);
}
.svc:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.svc__media { overflow: hidden; aspect-ratio: 16/11; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.85s var(--e-out); }
.svc:hover .svc__media img { transform: scale(1.07); }
.svc__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.svc__num { font-family: var(--f-display); font-size: var(--t-small); color: var(--c-accent); letter-spacing: 0.1em; }
.svc h3 { font-size: var(--t-h3); }
.svc p { font-size: var(--t-small); flex: 1; }

.svc-more { margin-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.svc-more > span { font-size: var(--t-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-muted); }
.svc-more em {
  font-style: normal; font-size: var(--t-small); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  padding: 0.45em 1em; transition: border-color var(--d-fast), color var(--d-fast), background var(--d-fast);
}
.svc-more em:hover { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-soft); }

/* ---------- WORK ----------------------------------------- */
.work__filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.work__filters button {
  font-size: var(--t-small); font-weight: 600;
  padding: 0.55em 1.35em; border-radius: var(--r-pill);
  border: 1px solid var(--c-line); color: var(--c-body);
  transition: all var(--d-fast) var(--e-out);
}
.work__filters button:hover { border-color: var(--c-accent); color: var(--c-accent); }
.work__filters button.is-active { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); }

.work__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.proj { display: block; border-radius: var(--r-lg); overflow: hidden; position: relative; }
.proj.is-hidden { display: none; }
.proj__media { overflow: hidden; aspect-ratio: 4/5; }
.proj__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--e-out); }
.proj:hover .proj__media img { transform: scale(1.08); }
.proj__meta {
  position: absolute; inset: auto 0 0 0; padding: var(--s-4);
  color: var(--c-on-dark);
  background: linear-gradient(0deg, var(--c-veil-75) 0%, var(--c-veil-0) 100%);
}
.proj__meta span { font-size: var(--t-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.proj__meta h3 { color: var(--c-on-dark); font-size: var(--t-h3); margin-block: 4px 2px; }
.proj__meta small { opacity: 0.72; font-size: var(--t-small); }

/* ---------- IMPACT / COUNTERS ---------------------------- */
.impact__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-top: var(--s-6); }
.impact__stats b { display: block; font-family: var(--f-display); font-size: var(--t-numeral); color: var(--c-accent); line-height: 1; }
.impact__stats span { display: block; margin-top: var(--s-2); font-size: var(--t-small); color: var(--c-on-dark-muted); }

/* ---------- PROCESS -------------------------------------- */
.steps { display: grid; gap: 0; position: relative; }
.step {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--s-5);
  padding-block: var(--s-5);
  border-top: 1px solid var(--c-line);
  transition: background var(--d-mid) var(--e-out);
}
.step:last-child { border-bottom: 1px solid var(--c-line); }
.step:hover { background: var(--c-sand); }
.step__n { font-family: var(--f-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); color: var(--c-accent); line-height: 1; }
.step h3 { font-size: var(--t-h3); margin-bottom: 6px; }
.step p { max-width: var(--w-text); }

/* ---------- WHY ------------------------------------------ */
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.why__card {
  background: var(--c-surface); border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--c-line);
  transition: transform var(--d-mid) var(--e-out), border-color var(--d-mid), box-shadow var(--d-mid);
}
.why__card:hover { transform: translateY(-6px); border-color: var(--c-accent); box-shadow: var(--sh-md); }
.why__card > span { font-family: var(--f-display); font-size: var(--t-small); color: var(--c-accent); letter-spacing: 0.1em; }
.why__card b { display: block; font-family: var(--f-display); font-size: var(--t-h3); font-weight: 400; color: var(--c-ink); margin-block: var(--s-2) 6px; }
.why__card p { font-size: var(--t-small); }

/* ---------- FAQ ------------------------------------------ */
.faq { max-width: 900px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding-block: var(--s-4); text-align: left;
  font-family: var(--f-display); font-size: var(--t-h3); color: var(--c-ink);
  transition: color var(--d-fast) var(--e-out);
}
.faq__q:hover { color: var(--c-accent); }
.faq__icon { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--c-line); border-radius: 50%; position: relative; transition: transform var(--d-mid) var(--e-out), border-color var(--d-fast); }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  background: var(--c-accent); transform: translate(-50%, -50%);
  transition: opacity var(--d-fast) var(--e-out);
}
.faq__icon::before { width: 12px; height: 1.5px; }
.faq__icon::after  { width: 1.5px; height: 12px; }
.faq__item.is-open .faq__icon { transform: rotate(180deg); border-color: var(--c-accent); }
.faq__item.is-open .faq__icon::after { opacity: 0; }
.faq__a { overflow: hidden; height: 0; }
.faq__a p { padding-bottom: var(--s-4); max-width: var(--w-text); }

/* ---------- CONTACT -------------------------------------- */
.contact__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 1rem + 5vw, 5rem); }
.contact__details { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.contact__details li { display: grid; gap: 2px; padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-on-dark-line); }
.contact__details span { font-size: var(--t-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-on-dark-muted); }
.contact__details b { font-weight: 500; font-size: var(--t-lead); color: var(--c-on-dark); }
.contact__details a:hover { color: var(--c-accent); }
.contact__social { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
.contact__social a { font-size: var(--t-small); color: var(--c-on-dark-muted); border-bottom: 1px solid var(--c-on-dark-line); padding-bottom: 3px; transition: color var(--d-fast), border-color var(--d-fast); }
.contact__social a:hover { color: var(--c-accent); border-color: var(--c-accent); }

.contact__form { display: grid; gap: var(--s-3); align-content: start; }
.contact__form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.contact__form input, .contact__form select, .contact__form textarea {
  width: 100%; padding: 1.05em 1.15em;
  background: transparent; color: var(--c-on-dark);
  border: 1px solid var(--c-on-dark-line); border-radius: var(--r-md);
  transition: border-color var(--d-fast) var(--e-out), background var(--d-fast);
}
.contact__form ::placeholder { color: var(--c-on-dark-muted); }
.contact__form select { color: var(--c-on-dark-muted); }
.contact__form option { color: var(--c-ink); }
.contact__form :is(input, select, textarea):focus {
  outline: none; border-color: var(--c-accent);
  background: color-mix(in srgb, var(--c-on-dark) 4%, transparent);
}
.contact__form textarea { resize: vertical; }
.contact__form .btn { justify-self: start; margin-top: var(--s-2); }
.contact__note { font-size: var(--t-small); color: var(--c-accent); }

/* ---------- FOOTER --------------------------------------- */
.footer { background: var(--c-ink); color: var(--c-on-dark-muted); padding: var(--s-7) 0 var(--s-4); }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-5); padding-bottom: var(--s-6); }
.footer__logo { font-family: var(--f-display); font-size: 1.5rem; color: var(--c-on-dark); }
.footer__logo span { color: var(--c-accent); font-style: italic; }
.footer__brand p { margin-top: var(--s-2); font-size: var(--t-small); max-width: 34ch; }
.footer__col h4 { font-size: var(--t-small); color: var(--c-on-dark); margin-bottom: var(--s-3); font-family: var(--f-body); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.footer__col a { display: block; font-size: var(--t-small); padding-block: 5px; transition: color var(--d-fast), transform var(--d-fast) var(--e-out); }
.footer__col a:hover { color: var(--c-accent); transform: translateX(4px); }
.footer__bar {
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between;
  border-top: 1px solid var(--c-on-dark-line); padding-top: var(--s-4); font-size: var(--t-small);
}
.footer__bar div { display: flex; gap: var(--s-3); }
.footer__bar a:hover { color: var(--c-accent); }

/* ---------- SCROLL PROGRESS + CURSOR --------------------- */
.progress { position: fixed; inset: 0 auto auto 0; height: 2px; width: 0; background: var(--c-accent); z-index: 100; }
.cursor {
  position: fixed; top: 0; left: 0; z-index: 99;
  width: 34px; height: 34px; border: 1px solid var(--c-accent); border-radius: 50%;
  pointer-events: none; opacity: 0;
  transition: opacity var(--d-fast), width var(--d-fast) var(--e-out), height var(--d-fast) var(--e-out), background var(--d-fast);
  will-change: transform;
}
.cursor.is-active { width: 58px; height: 58px; background: color-mix(in srgb, var(--c-accent) 18%, transparent); }
@media (hover: none) { .cursor { display: none; } }

/* ---------- REVEAL BASE (JS adds the motion) -------------- */
.reveal { opacity: 0; }
.no-js .reveal, .reveal.is-in { opacity: 1; }

/* ============================================================
   RESPONSIVE — mirrors the desktop hierarchy, does not just stack
   ============================================================ */
@media (max-width: 1024px) {
  .svc-list, .work__grid, .why__grid { grid-template-columns: repeat(2, 1fr); }
  .impact__stats { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .process__layout { grid-template-columns: 1fr; }
  .section-head--split { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 820px) {
  .header__nav { display: none; }
  .header { grid-template-columns: auto 1fr auto; }
  .header__logo { grid-column: 1; justify-self: start; }
  .header__right { grid-column: 3; }
  .burger { display: flex; }
  .about__grid { grid-template-columns: 1fr; }
  .about__media img { aspect-ratio: 3/2; }
  .about__badge { right: var(--s-3); }
  .contact__grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 64px 1fr; gap: var(--s-3); }
  .hero__scroll { display: none; }
}

@media (max-width: 560px) {
  .svc-list, .work__grid, .why__grid { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
  .contact__form .row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}

/* ---------- REDUCED MOTION ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none !important; transform: none !important; }
  .cursor { display: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ============================================================
   ACE ORNATE — REBRAND LAYER
   Layout-only additions on top of the v4 template: the AO
   monogram lockup in the header, the script treatment for red
   accent words, and caps-friendly tracking for the Cinzel
   display face. All colour still comes from tokens.css.
   ============================================================ */

/* Cinzel is a caps face — give headings a little air, not the
   tight negative tracking the old grotesque wanted. */
h1, h2, h3, h4 { letter-spacing: 0.015em; }
.h-hero { letter-spacing: 0.01em; }

/* Red accent words (the <em> inside headings) render in the
   flowing script — the "Playlist Script" role from the brand
   sheet. Colour is inherited from the existing `em` rules
   (oxblood on light, muted clay on dark). */
.hero__title em,
h1 em, h2 em, h3 em {
  font-family: var(--f-script);
  font-weight: 600;
  font-style: normal;
  font-size: 1.15em;
  letter-spacing: 0;
  line-height: 0.9;
}

/* Header logo: AO monogram + wordmark lockup */
.header__logo {
  display: inline-flex; align-items: center; gap: 0.6em;
  white-space: nowrap;
}
.header__logo-mark { height: 30px; width: auto; }
.header__logo-word {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: 0.06em;
  color: var(--c-ink);
}
@media (max-width: 400px) { .header__logo-word { display: none; } }

/* Current page in the nav */
.header__nav a.is-current { color: var(--c-accent); }
.header__nav a.is-current::after { transform: scaleX(1); transform-origin: left; }

/* ============================================================
   ACE ORNATE — INNER PAGES
   Compact hero, four-up service grid, blog listing + article,
   and portfolio galleries. All colour from tokens.css.
   ============================================================ */

/* Page hero (inner pages sit below the fixed pill header) */
.page-hero {
  padding-top: calc(var(--s-8) + 2.5rem);
  padding-bottom: var(--s-6);
  background: var(--c-sand);
  border-bottom: 1px solid var(--c-line);
}
.h-xl { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem); line-height: var(--lh-snug); }
.page-hero h1 { margin-top: var(--s-2); }
.page-hero p { margin-top: var(--s-4); max-width: 60ch; font-size: var(--t-lead); color: var(--c-body); }
.back-link {
  display: inline-block; margin-bottom: var(--s-3);
  font-size: var(--t-small); color: var(--c-muted);
  transition: color var(--d-fast);
}
.back-link:hover { color: var(--c-accent); }

/* Four-up grid variant for the 14 services */
.why__grid--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .why__grid--four { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .why__grid--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .why__grid--four { grid-template-columns: 1fr; } }

/* Portfolio galleries */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.gallery .img-reveal { border-radius: var(--r-md); }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 720px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* Blog listing */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.post-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out);
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.post-card__media { aspect-ratio: 16/11; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.85s var(--e-out); }
.post-card:hover .post-card__media img { transform: scale(1.06); }
.post-card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.post-card__tag { font-size: var(--t-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-accent); }
.post-card h3 { font-size: var(--t-h3); }
.post-card p { font-size: var(--t-small); flex: 1; }
.post-card .link-arrow { margin-top: var(--s-2); }
@media (max-width: 1024px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .post-grid { grid-template-columns: 1fr; } }

/* Blog article */
.post { max-width: 760px; margin-inline: auto; }
.post__media { border-radius: var(--r-lg); overflow: hidden; }
.post__media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.prose { margin-top: var(--s-5); }
.prose .post__lead { font-size: var(--t-lead); color: var(--c-ink); }
.prose p { margin-top: var(--s-3); }
.prose h2 { font-size: var(--t-h3); margin-top: var(--s-5); }
.prose ul { margin-top: var(--s-3); display: grid; gap: var(--s-2); }
.prose li { position: relative; padding-left: 1.5em; }
.prose li::before { content: "\25C6"; color: var(--c-accent); position: absolute; left: 0; top: 0.15em; font-size: 0.7em; }