/* ==========================================================================
   MOMENTYX — assets/css/styles.css
   Independent Australian digital studio
   Version 1.2 · Mobile-first · No dependencies · No external requests

   CONTENTS
   01  Font loading (upgrade path, currently inactive)
   02  Design tokens
   03  Reset and base
   04  Typography
   05  Layout primitives
   06  Utilities
   07  Skip link
   08  Buttons and links
   09  Site header and navigation
   10  Hero
   11  Demo posters
   12  Positioning statement
   13  Featured work rows
   14  Service list
   15  Pricing
   16  Process
   17  Missed-call flow diagram
   18  Credibility and ownership
   19  FAQ
   20  CTA band
   21  Forms
   22  Breadcrumbs and page head
   23  Prose (legal and long-form pages)
   24  Site footer
   25  404
   26  Motion and reveal
   27  Print
   ========================================================================== */


/* ==========================================================================
   01  FONT LOADING — upgrade path
   --------------------------------------------------------------------------
   Ships with zero font requests. To adopt a licensed display face:
     1. Place the .woff2 in /assets/fonts/
     2. Uncomment the block below
     3. Prepend the family name to --font-display in section 02
   The override values are pre-set to hold current metrics, so the swap
   will not cause layout shift.
   ========================================================================== */

/*
@font-face {
  font-family: "Momentyx Display";
  src: url("/assets/fonts/momentyx-display.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
*/


/* ==========================================================================
   02  DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------ */
  --ivory:      #F7F4EF;
  --ivory-2:    #EFEAE2;
  --paper:      #FFFFFF;
  --ink:        #101418;
  --ink-70:     #55606B;
  --navy:       #0E1B2E;
  --navy-2:     #16263F;
  --cobalt:     #1F4FE0;
  --cobalt-dk:  #1740B8;
  --cobalt-lt:  #6E9BFF;
  --brass:      #A9682F;
  --brass-lt:   #C99055;

  --line:       rgba(16, 20, 24, .14);
  --line-soft:  rgba(16, 20, 24, .08);
  --line-inv:   rgba(255, 255, 255, .16);
  --line-inv-s: rgba(255, 255, 255, .09);

  --success:    #14663F;
  --alert:      #A32A17;

  /* Contextual — reassigned inside inverted sections */
  --bg:         var(--ivory);
  --fg:         var(--ink);
  --fg-muted:   var(--ink-70);
  --accent:     var(--cobalt);
  --rule:       var(--line);
  --rule-soft:  var(--line-soft);

  /* --- Typography -------------------------------------------------------- */
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
                  Georgia, "Times New Roman", serif;
  --font-ui:      system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas,
                  "Liberation Mono", monospace;

  --fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 5.25rem);
  --fs-h2:      clamp(1.9rem, 1.35rem + 2.5vw, 3.25rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + .85vw, 1.75rem);
  --fs-h4:      clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-lede:    clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
  --fs-body:    clamp(1rem, .97rem + .14vw, 1.075rem);
  --fs-small:   .8125rem;
  --fs-eyebrow: .6875rem;
  --fs-numeral: clamp(3.5rem, 2rem + 7vw, 9rem);

  --lh-tight:   1.04;
  --lh-snug:    1.22;
  --lh-body:    1.65;

  --measure:    68ch;
  --measure-sm: 54ch;

  /* --- Space ------------------------------------------------------------- */
  --gutter:     clamp(1rem, 3vw, 2rem);
  --container:  1320px;
  --s-1:  .25rem;
  --s-2:  .5rem;
  --s-3:  .75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.75rem;
  --s-8:  3.5rem;
  --s-9:  5rem;
  --s-10: 7rem;
  --section-y: clamp(3.5rem, 2rem + 7vw, 8rem);

  /* --- Form ------------------------------------------------------------- */
  --radius:     2px;
  --radius-lg:  3px;
  --tap:        44px;
  --tap-lg:     48px;

  /* --- Elevation (used sparingly) ---------------------------------------- */
  --shadow-1: 0 1px 2px rgba(16, 20, 24, .05),
              0 8px 24px rgba(16, 20, 24, .06);
  --shadow-2: 0 2px 8px rgba(16, 20, 24, .07),
              0 28px 64px rgba(16, 20, 24, .14);

  /* --- Motion ------------------------------------------------------------ */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-io:   cubic-bezier(.65, 0, .35, 1);
  --dur-fast:  160ms;
  --dur:       280ms;
  --dur-slow:  600ms;

  --header-h: 66px;
}

@media (min-width: 62rem) {
  :root { --header-h: 78px; }
}


/* ==========================================================================
   03  RESET AND BASE
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  tab-size: 4;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked {
  position: fixed;
  width: 100%;
  overflow: hidden;
  touch-action: none;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

svg { fill: currentColor; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; }

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

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

table { border-collapse: collapse; width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

::selection {
  background: var(--cobalt);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

:focus:not(:focus-visible) { outline: none; }


/* ==========================================================================
   04  TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.display,
h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -.028em;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -.026em;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.18;
  letter-spacing: -.018em;
}

h4, .h4 {
  font-family: var(--font-ui);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.01em;
}

p { text-wrap: pretty; }

p + p { margin-top: var(--s-4); }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: var(--measure);
}

.small { font-size: var(--fs-small); line-height: 1.6; }

.muted { color: var(--fg-muted); }

.eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--accent);
}

.eyebrow--muted { color: var(--fg-muted); }

.numeral {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-numeral);
  line-height: .82;
  letter-spacing: -.05em;
  color: var(--brass);
  font-variant-numeric: lining-nums tabular-nums;
}

.tag {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  padding: .5em .75em;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--fg-muted);
  white-space: nowrap;
}

.tag--accent {
  border-color: var(--accent);
  color: var(--accent);
}

.note {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: var(--measure);
}


/* ==========================================================================
   05  LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.container--narrow { width: min(58rem, 100% - (var(--gutter) * 2)); }
.container--prose  { width: min(46rem, 100% - (var(--gutter) * 2)); }

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

.section--alt { background: var(--ivory-2); }

.section--rule { border-top: 1px solid var(--rule); }

/* Inverted (navy) sections reassign contextual tokens */
.section--navy,
.inverse {
  background: var(--navy);
  --bg: var(--navy);
  --fg: #FFFFFF;
  --fg-muted: rgba(255, 255, 255, .72);
  --accent: var(--cobalt-lt);
  --rule: var(--line-inv);
  --rule-soft: var(--line-inv-s);
  color: #FFFFFF;
}

.section--navy .numeral,
.inverse .numeral { color: var(--brass-lt); }

/* Deep sections deferred until near viewport */
.section--defer {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

.section__head {
  display: grid;
  gap: var(--s-4);
  max-width: var(--measure);
  margin-bottom: clamp(2rem, 1.25rem + 3vw, 4rem);
}

.section__head .lede { margin-top: var(--s-1); }

.section__head--split {
  max-width: none;
  grid-template-columns: 1fr;
  align-items: end;
}

@media (min-width: 56rem) {
  .section__head--split {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr);
    gap: var(--s-7);
  }
  .section__head--split > :last-child { justify-self: end; }
}

/* 12-column fluid grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.stack { display: grid; gap: var(--s-4); align-content: start; }
.stack--sm { gap: var(--s-2); }
.stack--lg { gap: var(--s-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.hairline {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: var(--s-6);
}


/* ==========================================================================
   06  UTILITIES
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.measure    { max-width: var(--measure); }
.measure-sm { max-width: var(--measure-sm); }

.no-wrap { white-space: nowrap; }

[hidden] { display: none !important; }


/* ==========================================================================
   07  SKIP LINK
   ========================================================================== */

.skip-link {
  position: absolute;
  top: 0;
  left: var(--gutter);
  z-index: 1000;
  transform: translateY(-120%);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 600;
  padding: .875rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus { transform: translateY(0); }


/* ==========================================================================
   08  BUTTONS AND LINKS
   ========================================================================== */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: var(--rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625em;
  min-height: var(--tap);
  padding: .8125rem 1.375rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--cobalt);
  --btn-fg: #FFFFFF;
  --btn-bd: var(--cobalt);
}
.btn--primary:hover {
  --btn-bg: var(--cobalt-dk);
  --btn-bd: var(--cobalt-dk);
}

.btn--ink {
  --btn-bg: var(--ink);
  --btn-fg: #FFFFFF;
  --btn-bd: var(--ink);
}
.btn--ink:hover { --btn-bg: #000; --btn-bd: #000; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--rule); }
.btn--ghost:hover { --btn-bd: currentColor; }

.inverse .btn--ghost,
.section--navy .btn--ghost { --btn-bd: var(--line-inv); }
.inverse .btn--ghost:hover,
.section--navy .btn--ghost:hover {
  --btn-bg: #FFFFFF;
  --btn-fg: var(--navy);
  --btn-bd: #FFFFFF;
}

.btn--white { --btn-bg: #FFFFFF; --btn-fg: var(--navy); --btn-bd: #FFFFFF; }
.btn--white:hover { --btn-bg: var(--ivory-2); --btn-bd: var(--ivory-2); }

.btn--lg {
  min-height: var(--tap-lg);
  padding: 1rem 1.75rem;
  font-size: 1rem;
}

.btn--block { width: 100%; }

@media (max-width: 29.99rem) {
  .btn { width: 100%; }
  .btn--auto { width: auto; }
}

/* Text link */
.link {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-color var(--dur) var(--ease);
}
.link:hover { text-decoration-thickness: 2px; }

.link__arrow {
  transition: transform var(--dur) var(--ease);
  font-variant: none;
}
.link:hover .link__arrow { transform: translateX(3px); }

.link--quiet {
  color: var(--fg);
  text-decoration-color: var(--rule);
}
.link--quiet:hover { text-decoration-color: currentColor; }

/* Inline prose links */
.prose a,
.rich a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.prose a:hover,
.rich a:hover { text-decoration-thickness: 2px; }


/* ==========================================================================
   09  SITE HEADER AND NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ivory);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: color-mix(in srgb, var(--ivory) 88%, transparent);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
  }
  .site-header.is-stuck {
    background: color-mix(in srgb, var(--ivory) 96%, transparent);
  }
}

.site-header.is-stuck { border-bottom-color: var(--line); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--header-h);
}

/* --- Wordmark ----------------------------------------------------------- */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink);
  white-space: nowrap;
  padding-block: .5rem;
}

.wordmark__glyph {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--cobalt);
}

.wordmark__sub {
  display: none;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-70);
  padding-left: .625rem;
  margin-left: .125rem;
  border-left: 1px solid var(--line);
}

@media (min-width: 75rem) {
  .wordmark__sub { display: inline; }
}

.inverse .wordmark,
.site-footer .wordmark { color: #FFFFFF; }
.inverse .wordmark__glyph,
.site-footer .wordmark__glyph { color: var(--cobalt-lt); }
.site-footer .wordmark__sub {
  color: rgba(255, 255, 255, .6);
  border-left-color: var(--line-inv);
}

/* --- Desktop nav --------------------------------------------------------- */

.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.25rem, 1vw, 1rem);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: .5rem .625rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-70);
  border-radius: var(--radius);
  transition: color var(--dur) var(--ease);
  position: relative;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: .625rem;
  right: .625rem;
  bottom: .5rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--cobalt);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.site-header__actions .btn { width: auto; }

.header-cta { display: none; }

@media (min-width: 62rem) {
  .nav { display: block; }
  .header-cta { display: inline-flex; }
}

/* --- Nav toggle ---------------------------------------------------------- */

.nav-toggle {
  position: relative;
  width: var(--tap);
  height: var(--tap);
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}

.nav-toggle:hover { border-color: var(--ink); }

.nav-toggle__bar {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  margin-left: -9px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease),
              opacity var(--dur-fast) var(--ease);
}

.nav-toggle__bar:nth-child(1) { top: 15px; }
.nav-toggle__bar:nth-child(2) { top: 21px; }
.nav-toggle__bar:nth-child(3) { top: 27px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(.4);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 62rem) {
  .nav-toggle { display: none; }
}

/* --- Mobile panel -------------------------------------------------------- */

.nav-panel {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--ivory);
  border-top: 1px solid var(--line);
  padding: var(--s-5) var(--gutter) max(var(--s-8), env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}

.nav-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.nav-panel__list {
  display: grid;
  border-top: 1px solid var(--line);
}

.nav-panel__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: .875rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: -.02em;
  color: var(--ink);
}

.nav-panel__link[aria-current="page"] { color: var(--cobalt); }

.nav-panel__index {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink-70);
}

.nav-panel__foot {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-3);
}

.nav-panel__contact {
  font-size: var(--fs-small);
  color: var(--ink-70);
  line-height: 1.7;
}

@media (min-width: 62rem) {
  .nav-panel { display: none; }
}


/* ==========================================================================
   10  HERO
   ========================================================================== */

.hero {
  position: relative;
  padding-top: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  padding-bottom: clamp(3rem, 2rem + 6vw, 7rem);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 6vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.hero__title { margin-top: var(--s-4); }

.hero__title em {
  font-style: italic;
  color: var(--cobalt);
}

.hero__lede {
  margin-top: var(--s-5);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.hero__meta {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-3);
  font-size: var(--fs-small);
  color: var(--ink-70);
}

.hero__meta li {
  display: flex;
  align-items: baseline;
  gap: .625rem;
}

.hero__meta li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: .1em;
  background: var(--brass);
  transform: rotate(45deg);
}

@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
  }
}

/* --- Hero poster stack --------------------------------------------------- */

.hero__stack {
  position: relative;
  display: grid;
  isolation: isolate;
  padding-block: clamp(1rem, 4vw, 2rem);
  padding-inline: clamp(.5rem, 3vw, 0rem);
}

.hero__stack > .poster { grid-area: 1 / 1; }

.hero__stack .poster {
  transition: transform var(--dur-slow) var(--ease),
              box-shadow var(--dur-slow) var(--ease);
}

.hero__stack .poster:nth-child(1) {
  z-index: 3;
  transform: translate(0, 0);
  box-shadow: var(--shadow-2);
}
.hero__stack .poster:nth-child(2) {
  z-index: 2;
  transform: translate(4%, -5%) scale(.94);
  opacity: .96;
  box-shadow: var(--shadow-1);
}
.hero__stack .poster:nth-child(3) {
  z-index: 1;
  transform: translate(8%, -10%) scale(.88);
  opacity: .9;
  box-shadow: var(--shadow-1);
}

.hero__stack .poster:nth-child(1):hover { transform: translateY(-4px); }

@media (min-width: 48rem) {
  .hero__stack .poster:nth-child(1) { transform: translate(-4%, 8%) rotate(-1.1deg); }
  .hero__stack .poster:nth-child(2) { transform: translate(3%, -2%) scale(.95) rotate(.7deg); }
  .hero__stack .poster:nth-child(3) { transform: translate(9%, -12%) scale(.9) rotate(1.6deg); }

  .hero__stack .poster:nth-child(1):hover {
    transform: translate(-4%, 5%) rotate(-1.1deg);
  }
  .hero__stack .poster:nth-child(2):hover {
    transform: translate(3%, -5%) scale(.95) rotate(.7deg);
  }
  .hero__stack .poster:nth-child(3):hover {
    transform: translate(9%, -15%) scale(.9) rotate(1.6deg);
  }
}

.hero__stack-note {
  position: relative;
  z-index: 4;
  grid-area: 2 / 1;
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  color: var(--ink-70);
  text-align: center;
}

@media (min-width: 48rem) {
  .hero__stack-note { text-align: right; }
}


/* ==========================================================================
   11  DEMO POSTERS
   --------------------------------------------------------------------------
   Coded stand-ins for screenshots. Each renders in its own concept palette
   and requires no network request. To promote a real screenshot later,
   uncomment the <picture> inside the poster markup — .poster__shot covers
   .poster__art automatically.

   Expected markup:
     <a class="poster poster--driftwren" href="/demos/driftwren/"
        target="_blank" rel="noopener">
       <span class="poster__chrome" aria-hidden="true">
         <span class="poster__dots"><i></i><i></i><i></i></span>
         <span class="poster__url">momentyx.com.au/demos/driftwren/</span>
       </span>
       <span class="poster__canvas">
         <span class="poster__art" aria-hidden="true"></span>
         <span class="poster__body">
           <span class="poster__tag">Concept Design</span>
           <span class="poster__name">Driftwren</span>
           <span class="poster__industry">Hospitality</span>
         </span>
       </span>
     </a>
   ========================================================================== */

.poster {
  --p-bg:    var(--ivory-2);
  --p-fg:    var(--ink);
  --p-muted: var(--ink-70);
  --p-a:     var(--cobalt);
  --p-b:     var(--brass);
  --p-font:  var(--font-display);

  position: relative;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.poster:hover { box-shadow: var(--shadow-2); }

.poster:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 4px;
}

/* Browser chrome */
.poster__chrome {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .75rem;
  background: var(--ivory-2);
  border-bottom: 1px solid var(--line);
}

.poster__dots { display: flex; gap: 4px; flex: none; }

.poster__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(16, 20, 24, .18);
}

.poster__url {
  flex: 1;
  min-width: 0;
  padding: .1875rem .5rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .01em;
  color: var(--ink-70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Canvas */
.poster__canvas {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  background: var(--p-bg);
  overflow: hidden;
}

.poster__art {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.poster__shot {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.poster__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: grid;
  gap: .3rem;
  padding: clamp(.875rem, 2.5vw, 1.5rem);
}

.poster__tag {
  justify-self: start;
  font-family: var(--font-ui);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  padding: .375rem .5rem;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  color: var(--p-muted);
  margin-bottom: .25rem;
}

.poster__name {
  font-family: var(--p-font);
  font-size: clamp(1.375rem, 1rem + 2.2vw, 2.125rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--p-fg);
}

.poster__industry {
  font-family: var(--font-ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--p-muted);
}

/* --- 01 Driftwren — hospitality, warm serif ------------------------------ */

.poster--driftwren {
  --p-bg:    #FBF6EF;
  --p-fg:    #2A2320;
  --p-muted: #8A7A6D;
  --p-a:     #C0603C;
  --p-b:     #5E7355;
  --p-font:  var(--font-display);
}

.poster--driftwren .poster__art {
  background:
    radial-gradient(120% 90% at 78% 8%,
      rgba(192, 96, 60, .26) 0%, rgba(192, 96, 60, 0) 58%),
    radial-gradient(90% 80% at 8% 92%,
      rgba(94, 115, 85, .22) 0%, rgba(94, 115, 85, 0) 60%),
    linear-gradient(168deg, #FBF6EF 0%, #F2E9DC 100%);
}

.poster--driftwren .poster__art::before {
  content: "";
  position: absolute;
  right: 8%;
  top: 12%;
  width: 42%;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(192, 96, 60, .5);
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(160deg,
    rgba(235, 196, 155, .5), rgba(192, 96, 60, .18));
}

.poster--driftwren .poster__art::after {
  content: "";
  position: absolute;
  left: 8%;
  bottom: 0;
  width: 34%;
  height: 62%;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(42, 35, 32, .13) 0 1px,
      transparent 1px 13px
    );
}

/* --- 02 Wattlebank — trades, structured navy ----------------------------- */

.poster--wattlebank {
  --p-bg:    #0A1420;
  --p-fg:    #FFFFFF;
  --p-muted: rgba(255, 255, 255, .66);
  --p-a:     #5AA0FF;
  --p-b:     #B87B3E;
  --p-font:  var(--font-ui);
}

.poster--wattlebank .poster__name {
  font-weight: 800;
  letter-spacing: -.035em;
}

.poster--wattlebank .poster__art {
  background:
    radial-gradient(100% 80% at 82% 12%,
      rgba(90, 160, 255, .34) 0%, rgba(90, 160, 255, 0) 62%),
    radial-gradient(80% 70% at 12% 88%,
      rgba(184, 123, 62, .24) 0%, rgba(184, 123, 62, 0) 60%),
    linear-gradient(150deg, #16304C 0%, #0A1420 78%);
}

.poster--wattlebank .poster__art::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 28px 28px;
}

.poster--wattlebank .poster__art::after {
  content: "";
  position: absolute;
  left: 9%;
  top: 16%;
  width: 46%;
  height: 3px;
  background: linear-gradient(90deg, #B87B3E, rgba(184, 123, 62, 0));
  box-shadow:
    0 22px 0 -1px rgba(90, 160, 255, .55),
    0 44px 0 -1px rgba(255, 255, 255, .16);
}

.poster--wattlebank .poster__tag { color: rgba(255, 255, 255, .62); }

/* --- 03 Vellamere — beauty, soft arch ------------------------------------ */

.poster--vellamere {
  --p-bg:    #FFFBF6;
  --p-fg:    #221E1B;
  --p-muted: #7A6E64;
  --p-a:     #C98F6E;
  --p-b:     #2F4034;
  --p-font:  var(--font-display);
}

.poster--vellamere .poster__art {
  background:
    radial-gradient(100% 85% at 20% 6%,
      rgba(201, 143, 110, .28) 0%, rgba(201, 143, 110, 0) 60%),
    radial-gradient(90% 80% at 88% 90%,
      rgba(47, 64, 52, .2) 0%, rgba(47, 64, 52, 0) 62%),
    linear-gradient(170deg, #FFFBF6 0%, #F4EDE4 100%);
}

.poster--vellamere .poster__art::before {
  content: "";
  position: absolute;
  right: 10%;
  bottom: -18%;
  width: 46%;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(165deg,
    rgba(92, 122, 99, .8), rgba(47, 64, 52, .92));
}

.poster--vellamere .poster__art::after {
  content: "";
  position: absolute;
  right: 22%;
  bottom: 34%;
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(140deg, #EFD3B6, #C98F6E);
  opacity: .9;
}


/* ==========================================================================
   12  POSITIONING STATEMENT
   ========================================================================== */

.statement {
  padding-block: clamp(3rem, 2rem + 6vw, 7rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.statement__text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 3.1vw, 3rem);
  line-height: 1.18;
  letter-spacing: -.024em;
  max-width: 24ch;
  text-wrap: balance;
}

.statement__text b {
  font-weight: 400;
  color: var(--cobalt);
}

.statement__aside {
  margin-top: var(--s-6);
  max-width: var(--measure-sm);
  color: var(--fg-muted);
}

@media (min-width: 56rem) {
  .statement__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 5rem);
    align-items: end;
  }
  .statement__aside { margin-top: 0; }
}


/* ==========================================================================
   13  FEATURED WORK ROWS
   ========================================================================== */

.work { display: grid; }

.work__row {
  display: grid;
  gap: clamp(1.5rem, 1rem + 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  border-top: 1px solid var(--rule);
  align-items: center;
}

.work__row:last-child { border-bottom: 1px solid var(--rule); }

@media (min-width: 60rem) {
  .work__row {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  }
  .work__row:nth-child(even) .work__media { order: 2; }
  .work__row:nth-child(even) .work__body  { order: 1; }
}

.work__media { position: relative; }

.work__body { display: grid; gap: var(--s-4); align-content: start; }

.work__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
}

.work__num {
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 3.5vw, 5rem);
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--brass);
  font-variant-numeric: lining-nums tabular-nums;
}

.work__labels { display: grid; gap: .35rem; padding-top: .25rem; }

.work__industry {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.work__title { margin-top: 0; }

.work__caps {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: var(--s-1);
}

.work__caps li {
  font-size: var(--fs-small);
  line-height: 1;
  padding: .5rem .625rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--fg-muted);
}

.work__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  margin-top: var(--s-2);
}

.work__disclaimer {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
}

/* Portfolio index variant */
.work-grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
}

@media (min-width: 52rem) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid > :first-child { grid-column: 1 / -1; }
}


/* ==========================================================================
   14  SERVICE LIST (editorial rows, not cards)
   ========================================================================== */

.svc-list {
  display: grid;
  border-top: 1px solid var(--rule);
}

.svc-item {
  display: grid;
  gap: var(--s-4);
  padding-block: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

@media (min-width: 56rem) {
  .svc-item {
    grid-template-columns:
      minmax(0, .16fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .55fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: baseline;
  }
}

.svc-item__index {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: .1em;
  color: var(--fg-muted);
}

.svc-item__title { margin: 0; }

.svc-item__desc {
  color: var(--fg-muted);
  max-width: var(--measure-sm);
}

.svc-item__meta {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}

@media (min-width: 56rem) {
  .svc-item__meta { justify-items: end; text-align: right; }
}

.svc-item__price {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
}

.svc-item__price small {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  letter-spacing: 0;
  color: var(--fg-muted);
  margin-top: .35rem;
}

.svc-item--soon { opacity: .78; }

.svc-item--soon .svc-item__price {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}


/* ==========================================================================
   15  PRICING
   --------------------------------------------------------------------------
   Care tiers: source order is Hosting, Website Care, Website Care Plus.
   On mobile, Website Care is pulled to first position with `order` so the
   recommended tier leads. DOM order stays logical for screen readers.
   Label wording is "Recommended" only — never a popularity claim.
   ========================================================================== */

.price-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 42rem) {
  .price-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 58rem) {
  .price-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 68rem) {
  .price-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mobile ordering for the care row: recommended tier first */
.price-grid--care { display: flex; flex-direction: column; gap: var(--s-4); }

.price-grid--care .price-tier--recommended { order: -1; }

@media (min-width: 58rem) {
  .price-grid--care {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .price-grid--care .price-tier--recommended { order: 0; }
}

.price-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.inverse .price-tier,
.section--navy .price-tier {
  background: var(--navy-2);
  border-color: var(--line-inv);
}

/* Recommended tier — emphasis by design, not by claim */
.price-tier--recommended {
  border-color: var(--cobalt);
  border-width: 1px;
  box-shadow: inset 0 0 0 1px var(--cobalt), var(--shadow-1);
  padding-top: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
}

.inverse .price-tier--recommended,
.section--navy .price-tier--recommended {
  border-color: var(--cobalt-lt);
  box-shadow: inset 0 0 0 1px var(--cobalt-lt);
}

.price-tier__flag {
  position: absolute;
  top: 0;
  left: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  transform: translateY(-50%);
  padding: .375rem .625rem;
  background: var(--cobalt);
  color: #FFFFFF;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.inverse .price-tier__flag,
.section--navy .price-tier__flag {
  background: var(--cobalt-lt);
  color: var(--navy);
}

.price-tier__name {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.price-tier--recommended .price-tier__name { color: var(--accent); }

.price-tier__figure {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.875rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: lining-nums tabular-nums;
}

.price-tier__unit {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg-muted);
  margin-top: .4rem;
}

.price-tier__reason {
  font-size: .9375rem;
  color: var(--fg-muted);
  max-width: 34ch;
}

.price-tier__list {
  display: grid;
  gap: .625rem;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: .9375rem;
  color: var(--fg-muted);
  flex: 1;
}

.price-tier__list li {
  position: relative;
  padding-left: 1.25rem;
}

.price-tier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 6px;
  height: 6px;
  background: var(--brass);
  transform: rotate(45deg);
}

.price-tier--recommended .price-tier__list li::before { background: var(--accent); }

.price-tier__list li.is-excluded::before {
  background: none;
  border-top: 1px solid var(--fg-muted);
  width: 8px;
  height: 0;
  top: .78em;
  transform: none;
}

.price-tier .btn { margin-top: auto; }

/* Comparison table — stacks into blocks on narrow screens */
.price-table caption {
  text-align: left;
  font-size: var(--fs-small);
  color: var(--fg-muted);
  padding-bottom: var(--s-3);
}

.price-table th,
.price-table td {
  text-align: left;
  padding: .875rem 1rem .875rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-size: .9375rem;
}

.price-table thead th {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.price-table td:last-child,
.price-table th:last-child { padding-right: 0; }

.price-table .is-figure {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: -.02em;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 45.99rem) {
  .price-table,
  .price-table tbody,
  .price-table tr,
  .price-table td { display: block; width: 100%; }

  .price-table thead { display: none; }

  .price-table tr {
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--rule);
  }

  .price-table td {
    border: 0;
    padding: .25rem 0;
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
  }

  .price-table td::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fg-muted);
    padding-top: .3em;
  }

  .price-table td[data-label=""]::before { content: none; }
}

.price-footnote {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--brass);
  border-radius: var(--radius);
  font-size: .9375rem;
  color: var(--fg-muted);
  max-width: var(--measure);
}

.price-footnote strong { color: var(--fg); font-weight: 600; }


/* ==========================================================================
   16  PROCESS
   ========================================================================== */

.process {
  display: grid;
  border-top: 1px solid var(--rule);
  counter-reset: step;
}

.process__row {
  display: grid;
  gap: var(--s-3);
  padding-block: clamp(1.5rem, 1.25rem + 2vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  counter-increment: step;
  align-items: start;
}

@media (min-width: 52rem) {
  .process__row {
    grid-template-columns: minmax(0, .22fr) minmax(0, .9fr) minmax(0, 1.4fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: baseline;
  }
}

.process__num::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--brass);
  font-variant-numeric: lining-nums tabular-nums;
}

.process__title { margin: 0; }

.process__desc {
  color: var(--fg-muted);
  max-width: var(--measure);
}


/* ==========================================================================
   17  MISSED-CALL FLOW DIAGRAM
   ========================================================================== */

.flow {
  display: grid;
  gap: var(--s-4);
  counter-reset: flow;
}

@media (min-width: 52rem) {
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
}

.flow__step {
  position: relative;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  counter-increment: flow;
  background: var(--paper);
}

.inverse .flow__step,
.section--navy .flow__step { background: var(--navy-2); }

.flow__step::before {
  content: counter(flow);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: .1em;
  color: var(--accent);
}

@media (min-width: 52rem) {
  .flow__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--s-3) * -1);
    width: var(--s-3);
    height: 1px;
    background: var(--rule);
  }
}

.flow__title {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.flow__desc {
  font-size: .9375rem;
  color: var(--fg-muted);
}

.disclosure-list {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-size: .9375rem;
  color: var(--fg-muted);
  max-width: var(--measure);
}

.disclosure-list li {
  position: relative;
  padding-left: 1.5rem;
}

.disclosure-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 10px;
  height: 1px;
  background: var(--brass);
}


/* ==========================================================================
   18  CREDIBILITY AND OWNERSHIP
   ========================================================================== */

.claims {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 52rem) {
  .claims { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
}

.claims__col { display: grid; gap: var(--s-4); align-content: start; }

.claims__title {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}

.claims__list { display: grid; gap: var(--s-3); }

.claims__list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--fg-muted);
}

.claims__list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.claims__list--do li { color: var(--fg); }
.claims__list--do li::before { content: "—"; color: var(--accent); }
.claims__list--dont li::before { content: "—"; color: var(--fg-muted); }

/* Ownership block */
.ownership {
  display: grid;
  gap: var(--s-5);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--brass);
  border-radius: var(--radius);
  background: var(--paper);
}

.inverse .ownership,
.section--navy .ownership { background: var(--navy-2); }

@media (min-width: 56rem) {
  .ownership { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
  .ownership__head { grid-column: 1 / -1; }
}

.ownership__item { display: grid; gap: var(--s-2); align-content: start; }

.ownership__item h3 {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.005em;
}

.ownership__item p {
  color: var(--fg-muted);
  font-size: .9375rem;
}


/* ==========================================================================
   19  FAQ  (native details/summary — works without JavaScript)
   ========================================================================== */

.faq {
  display: grid;
  border-top: 1px solid var(--rule);
  max-width: 56rem;
}

.faq__item { border-bottom: 1px solid var(--rule); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--tap-lg);
  padding-block: 1.125rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem);
  line-height: 1.3;
  letter-spacing: -.018em;
  transition: color var(--dur) var(--ease);
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { color: var(--accent); }

.faq__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.faq__icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
  border-radius: 1px;
  transition: transform var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}

.faq__icon::before {
  top: 7.5px; left: 0;
  width: 16px; height: 1.5px;
}

.faq__icon::after {
  top: 0; left: 7.25px;
  width: 1.5px; height: 16px;
}

.faq__item[open] .faq__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.faq__a {
  padding-bottom: 1.5rem;
  padding-right: clamp(0rem, 4vw, 3rem);
  color: var(--fg-muted);
  max-width: var(--measure);
}

.faq__a > * + * { margin-top: var(--s-3); }


/* ==========================================================================
   20  CTA BAND
   ========================================================================== */

.cta-band {
  padding-block: clamp(3rem, 2rem + 6vw, 7rem);
}

.cta-band__inner {
  display: grid;
  gap: var(--s-6);
  align-items: end;
}

@media (min-width: 58rem) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    gap: clamp(2rem, 5vw, 5rem);
  }
}

.cta-band__title {
  font-size: clamp(1.875rem, 1.25rem + 3.2vw, 3.5rem);
  max-width: 18ch;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

@media (min-width: 58rem) {
  .cta-band__actions { justify-content: flex-end; }
}

.cta-band__note {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  color: var(--fg-muted);
}


/* ==========================================================================
   21  FORMS
   ========================================================================== */

.form { display: grid; gap: var(--s-5); }

.form__row {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
  .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field { display: grid; gap: .5rem; }

.field__label {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.field__label .req { color: var(--alert); margin-left: .2em; }

.field__hint {
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

.field__control {
  width: 100%;
  min-height: var(--tap-lg);
  padding: .8125rem 1rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem; /* 16px minimum prevents iOS zoom on focus */
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  appearance: none;
}

textarea.field__control {
  min-height: 8rem;
  resize: vertical;
}

select.field__control {
  cursor: pointer;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2355606B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.field__control::placeholder { color: #93A0AC; opacity: 1; }

.field__control:focus {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(31, 79, 224, .16);
}

.field__control:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 1px;
}

.field.is-invalid .field__control { border-color: var(--alert); }

.field__error {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--alert);
}

.field__error:empty { display: none; }

/* Checkbox */
.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  cursor: pointer;
  font-size: .9375rem;
  color: var(--fg-muted);
  padding-block: .25rem;
  min-height: var(--tap);
}

.check input[type="checkbox"] {
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: .15em;
  flex: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.check input[type="checkbox"]::before {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform var(--dur-fast) var(--ease);
}

.check input[type="checkbox"]:checked {
  background: var(--cobalt);
  border-color: var(--cobalt);
}

.check input[type="checkbox"]:checked::before {
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}

.check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

/* Form status — never a success state on the static build */
.form__status {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--brass);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: .9375rem;
  color: var(--fg);
}

.form__status:empty { display: none; }

.form__status strong { font-weight: 700; }

.form__status a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.form__notice {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  max-width: var(--measure);
}


/* ==========================================================================
   22  BREADCRUMBS AND PAGE HEAD
   ========================================================================== */

.breadcrumbs {
  padding-top: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  font-size: var(--fs-small);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  color: var(--fg-muted);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.breadcrumbs li + li::before {
  content: "/";
  color: var(--rule);
}

.breadcrumbs a {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: .2em;
}

.breadcrumbs a:hover { text-decoration-color: currentColor; }

.breadcrumbs [aria-current="page"] { color: var(--fg); }

.page-head {
  padding-block: clamp(2rem, 1.5rem + 4vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
}

.page-head__inner {
  display: grid;
  gap: var(--s-4);
  max-width: var(--measure);
}

.page-head__title { margin-top: var(--s-1); }


/* ==========================================================================
   23  PROSE (legal and long-form pages)
   ========================================================================== */

.prose {
  max-width: var(--measure);
  font-size: var(--fs-body);
}

.prose > * + * { margin-top: var(--s-4); }

.prose h2 {
  font-size: var(--fs-h3);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

.prose h3 {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 700;
  margin-top: var(--s-6);
}

.prose ul,
.prose ol {
  display: grid;
  gap: var(--s-2);
  padding-left: 1.35rem;
  color: var(--fg-muted);
}

.prose ul { list-style: none; }

.prose ul li { position: relative; }

.prose ul li::before {
  content: "";
  position: absolute;
  left: -1.35rem;
  top: .62em;
  width: 6px;
  height: 6px;
  background: var(--brass);
  transform: rotate(45deg);
}

.prose ol { list-style: decimal; }
.prose ol li::marker { color: var(--brass); font-variant-numeric: tabular-nums; }

.prose dl { display: grid; gap: var(--s-3); }
.prose dt { font-weight: 700; }
.prose dd { margin: 0; color: var(--fg-muted); }

.prose blockquote {
  padding: var(--s-4) var(--s-5);
  border-left: 2px solid var(--brass);
  background: var(--ivory-2);
  border-radius: var(--radius);
}

.legal-meta {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

.legal-meta strong { color: var(--fg); }

.toc {
  display: grid;
  gap: .5rem;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: .9375rem;
}

.toc__title {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: .25rem;
}

.toc a {
  display: inline-block;
  padding-block: .3rem;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: .2em;
}

.toc a:hover { text-decoration-color: currentColor; }


/* ==========================================================================
   24  SITE FOOTER
   ========================================================================== */

.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, .72);
  --fg: #FFFFFF;
  --fg-muted: rgba(255, 255, 255, .72);
  --accent: var(--cobalt-lt);
  --rule: var(--line-inv);
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem) var(--s-6);
}

.site-footer__grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  padding-bottom: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  border-bottom: 1px solid var(--line-inv);
}

@media (min-width: 42rem) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  }
}

.site-footer__id { display: grid; gap: var(--s-4); align-content: start; }

.site-footer__desc {
  font-size: .9375rem;
  color: rgba(255, 255, 255, .72);
  max-width: 34ch;
}

.site-footer__details {
  display: grid;
  gap: .4rem;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .62);
}

.site-footer__details a { color: #FFFFFF; }

.site-footer__details a:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.site-footer__col { display: grid; gap: var(--s-3); align-content: start; }

.site-footer__heading {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.site-footer__list { display: grid; gap: .125rem; }

.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-block: .25rem;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .72);
  transition: color var(--dur) var(--ease);
}

.site-footer__list a:hover { color: #FFFFFF; }
.site-footer__list a[aria-current="page"] { color: #FFFFFF; font-weight: 600; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-5);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .5);
}

.site-footer__bottom a { color: rgba(255, 255, 255, .7); }
.site-footer__bottom a:hover { color: #FFFFFF; }


/* ==========================================================================
   25  404
   ========================================================================== */

.error-page {
  display: grid;
  align-content: center;
  min-height: clamp(24rem, 60vh, 40rem);
  padding-block: var(--section-y);
}

.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 2rem + 12vw, 10rem);
  line-height: .85;
  letter-spacing: -.05em;
  color: var(--brass);
  font-variant-numeric: lining-nums tabular-nums;
}

.error-page__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}


/* ==========================================================================
   26  MOTION AND REVEAL
   --------------------------------------------------------------------------
   Progressive enhancement: .reveal only starts hidden once main.js adds
   .js to <html>. Without JavaScript, everything renders visible.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js .reveal--d1 { transition-delay: 70ms; }
.js .reveal--d2 { transition-delay: 140ms; }
.js .reveal--d3 { transition-delay: 210ms; }
.js .reveal--d4 { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .btn:hover,
  .poster:hover,
  .hero__stack .poster:hover { transform: none !important; }
}


/* ==========================================================================
   27  PRINT
   ========================================================================== */

@media print {
  .site-header,
  .nav-panel,
  .skip-link,
  .cta-band,
  .hero__stack,
  .site-footer__list,
  .nav-toggle { display: none !important; }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .section,
  .hero { padding-block: 1.5rem; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
  }

  .faq__a { display: block !important; }

  .price-tier,
  .ownership { break-inside: avoid; }
}

/* ==========================================================================
   End of stylesheet
   ========================================================================== */