/*
Theme Name:   Open Method Home
Theme URI:    https://openmethodstudios.com
Description:  Child theme carrying the Open Method Studios homepage template.
Author:       Open Method Studios
Template:     generatepress
Version:      0.11.0
*/

/* Everything below is scoped to .oms and its custom properties are namespaced
   --oms-*, so this file cannot leak into the rest of the site or be overridden
   by the parent theme's own tokens. */

.oms { box-sizing: border-box; }

/* ==========================================================================
   Open Method Studios — homepage prototype v2
   Warm editorial, typography-led. Light paper grounds with two dark anchors.
   The centrepiece is the build sequence: a specimen page assembled stage by
   stage as you scroll. No gradients, no glass, nothing decorative that does
   not carry meaning.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
.oms {
  /* The default canvas is warm paper, not clinical white. Dark sections use
     the same brown-black family, so the page changes pace without changing
     identity. Clay is used sparingly as a directional accent. */
  --oms-bg:            #F4F0E8;
  --oms-bg-well:       #E8E0D5;
  --oms-bg-deep:       #181411;
  --oms-bg-raised:     #FCF9F3;

  --oms-rule:          #B8AEA1;
  --oms-rule-soft:     #D8D0C5;

  --oms-ink:           #1C1815;
  --oms-ink-dim:       #5E564F;
  --oms-ink-mute:      #756C63;

  --oms-accent:        #B84D32;
  --oms-accent-lift:   #90341F;
  --oms-accent-wash:   rgba(184, 77, 50, 0.11);

  --oms-font-display:  'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --oms-font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --oms-font-mono:     'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

  --oms-shell:         76rem;
  --oms-gutter:        clamp(1.25rem, 5vw, 4rem);
  --oms-section-y:     clamp(5rem, 11vw, 10.5rem);
  --oms-measure:       36rem;

  --oms-ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The opening hero, build sequence and enquiry close act as dark anchors.
   Their local tokens let every existing component adapt without one-off
   colour rules. */
.oms .hero,
.oms .build,
.oms .section--contact,
.oms .footer {
  --oms-bg:            #181411;
  --oms-bg-well:       #211B17;
  --oms-bg-deep:       #181411;
  --oms-bg-raised:     #2A221D;
  --oms-rule:          #54483F;
  --oms-rule-soft:     #382F29;
  --oms-ink:           #F5EFE6;
  --oms-ink-dim:       #C0B5AA;
  --oms-ink-mute:      #988C80;
  --oms-accent:        #E17A58;
  --oms-accent-lift:   #F09372;
  --oms-accent-wash:   rgba(225, 122, 88, 0.14);
  color: var(--oms-ink);
}


/* ---------------------------------------------------------------- reset -- */
.oms *,
.oms *::before,
.oms *::after { box-sizing: border-box; }


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


.oms {
  margin: 0;
  background: var(--oms-bg);
  color: var(--oms-ink);
  font-family: var(--oms-font-sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


.oms h1,
.oms h2,
.oms h3 { margin: 0; font-weight: 400; }

.oms p { margin: 0 0 1.25em; }

.oms p:last-child { margin-bottom: 0; }

.oms ul,
.oms ol,
.oms dl,
.oms dd { margin: 0; padding: 0; }

.oms li { list-style: none; }

.oms img { max-width: 100%; height: auto; display: block; }

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


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


.oms ::selection { background: var(--oms-accent); color: #FFF9F2; }


.oms .shell {
  width: 100%;
  max-width: var(--oms-shell);
  margin-inline: auto;
  padding-inline: var(--oms-gutter);
}


.oms .skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--oms-ink);
  color: var(--oms-bg);
  padding: 0.75rem 1.25rem;
  font-size: 0.85rem;
}

.oms .skip-link:focus { left: 1rem; top: 1rem; }


/* ------------------------------------------------------- shared elements -- */
.oms .eyebrow,
.oms .marker,
.oms .queue__caption,
.oms .modes__default,
.oms .field__hint {
  font-family: var(--oms-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oms-ink-mute);
}


.oms .marker { color: var(--oms-accent); margin: 0 0 1.25rem; }


.oms .lede {
  font-family: var(--oms-font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  font-weight: 300;
  line-height: 1.42;
  color: var(--oms-ink);
  max-width: 34ch;
  margin-bottom: 2rem;
}


.oms .section__body p,
.oms .footnote { max-width: var(--oms-measure); color: var(--oms-ink-dim); }

.oms .section__body .lede { color: var(--oms-ink); }


.oms .footnote {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--oms-rule-soft);
  font-size: 0.9rem;
  color: var(--oms-ink-mute);
}


.oms .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--oms-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.95rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.25s var(--oms-ease), color 0.25s var(--oms-ease),
              border-color 0.25s var(--oms-ease);
}

.oms .btn--solid { background: var(--oms-accent); color: #FFF9F2; }

.oms .btn--solid:hover { background: var(--oms-accent-lift); }

.oms .btn--ghost { border-color: var(--oms-rule); color: var(--oms-ink); background: transparent; }

.oms .btn--ghost:hover { border-color: var(--oms-ink-mute); background: var(--oms-bg-raised); }


.oms .link-quiet {
  font-size: 0.875rem;
  color: var(--oms-ink-mute);
  border-bottom: 1px solid var(--oms-rule);
  padding-bottom: 2px;
  margin-left: 1.5rem;
  transition: color 0.2s var(--oms-ease), border-color 0.2s var(--oms-ease);
}

.oms .link-quiet:hover { color: var(--oms-ink); border-bottom-color: var(--oms-accent); }


/* -------------------------------------------------------------- masthead -- */
.oms .masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 240, 232, 0.94);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--oms-ease), color 0.35s var(--oms-ease), border-color 0.3s var(--oms-ease);
}

.oms .masthead.is-stuck { border-bottom-color: var(--oms-rule-soft); }

.oms .masthead.is-over-hero {
  --oms-bg:            #181411;
  --oms-bg-raised:     #2A221D;
  --oms-rule:          #54483F;
  --oms-rule-soft:     #382F29;
  --oms-ink:           #F5EFE6;
  --oms-ink-dim:       #C0B5AA;
  --oms-ink-mute:      #988C80;
  --oms-accent:        #E17A58;
  --oms-accent-lift:   #F09372;
  background: rgba(24, 20, 17, 0.96);
  color: var(--oms-ink);
}


@supports (backdrop-filter: blur(6px)) {
  .oms .masthead { backdrop-filter: blur(6px); }

}


.oms .masthead__inner {
  max-width: var(--oms-shell);
  margin-inline: auto;
  padding: 1.15rem var(--oms-gutter);
  display: flex;
  align-items: center;
  gap: 2rem;
}


.oms .wordmark { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; letter-spacing: 0.04em; white-space: nowrap; }

.oms .wordmark__mark { width: 9px; height: 9px; background: var(--oms-accent); border-radius: 1px; flex: none; }

.oms .wordmark__text { font-weight: 500; }

.oms .wordmark__text span { color: var(--oms-ink-mute); font-weight: 300; }


.oms .nav { margin-left: auto; }

.oms .nav__list { display: flex; gap: 1.8rem; }

.oms .nav__list a {
  font-size: 0.83rem;
  color: var(--oms-ink-dim);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--oms-ease), border-color 0.2s var(--oms-ease);
}

.oms .nav__list a:hover { color: var(--oms-ink); border-bottom-color: var(--oms-accent); }

.oms .nav__cta { display: none; }


.oms .masthead__actions { display: flex; align-items: center; gap: 0.75rem; }

.oms .masthead__cta { padding: 0.7rem 1.1rem; }


.oms .menu-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 1px solid var(--oms-rule);
  border-radius: 2px;
  color: var(--oms-ink);
  font-family: var(--oms-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.62rem 0.85rem;
  cursor: pointer;
}

.oms .menu-toggle__glyph { display: grid; gap: 4px; width: 14px; }

.oms .menu-toggle__glyph i { display: block; height: 1px; background: currentColor; transition: transform 0.25s var(--oms-ease); }

.oms .menu-toggle[aria-expanded="true"] .menu-toggle__glyph i:first-child { transform: translateY(2.5px) rotate(6deg); }

.oms .menu-toggle[aria-expanded="true"] .menu-toggle__glyph i:last-child { transform: translateY(-2.5px) rotate(-6deg); }


/* ------------------------------------------------------------------ hero -- */
.oms .hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--oms-bg);
  padding-top: clamp(1.5rem, 3vw, 2.75rem);
  padding-bottom: clamp(3.5rem, 6vw, 5.75rem);
  border-bottom: 1px solid var(--oms-rule-soft);
}

.oms .hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(23, 21, 18, 0.99) 0%, rgba(23, 21, 18, 0.96) 34%, rgba(23, 21, 18, 0.72) 58%, rgba(23, 21, 18, 0.24) 100%),
    linear-gradient(180deg, rgba(23, 21, 18, 0.18) 0%, rgba(23, 21, 18, 0.08) 42%, rgba(23, 21, 18, 0.96) 100%),
    radial-gradient(circle at 80% 25%, rgba(225, 122, 88, 0.12), transparent 32%);
  pointer-events: none;
}

.oms .hero__backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  background: #100f0e;
}

.oms .hero__backdrop img {
  position: absolute;
  top: clamp(-7rem, -8vw, -3rem);
  right: clamp(-15rem, -10vw, -5rem);
  width: clamp(48rem, 72vw, 86rem);
  height: auto;
  max-width: none;
  opacity: 0.72;
  filter: saturate(0.88) contrast(1.08) brightness(0.86);
  transform: scale(1.04);
  transform-origin: 72% 28%;
}

.oms .hero .shell { position: relative; z-index: 2; }

.oms .hero .eyebrow {
  margin: 0 0 clamp(0.35rem, 0.75vw, 0.65rem);
  color: #fff;
}

.oms .hero__grid {
  display: grid;
  grid-template-areas:
    "statement"
    "offer"
    "facts";
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.oms .hero__statement { grid-area: statement; }


.oms .hero__title {
  font-family: var(--oms-font-display);
  font-weight: 200;
  font-size: clamp(3.4rem, 1.6rem + 8.2vw, 7.75rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(1rem, 2vw, 1.6rem);
}

.oms .hero__line { display: block; }

.oms .hero__line--indent { padding-left: clamp(0rem, 8vw, 7.5rem); }


.oms .hero__support {
  font-family: var(--oms-font-display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  font-style: italic;
  font-weight: 300;
  color: var(--oms-accent-lift);
  margin: 0;
  padding-left: clamp(0rem, 8vw, 7.5rem);
}

.oms .hero__offer {
  grid-area: offer;
  position: relative;
  align-self: start;
  max-width: 33rem;
  margin-top: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 2.7vw, 2.15rem);
  overflow: hidden;
  background: rgba(37, 31, 27, 0.76);
  border: 1px solid rgba(255, 244, 234, 0.16);
  box-shadow: inset 3px 0 0 var(--oms-accent), 0 2rem 5rem rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  backdrop-filter: blur(16px) saturate(1.08);
}

.oms .hero .btn--solid { color: #181411; }

.oms .hero__offer-label {
  margin-bottom: 0.85rem;
  font-family: var(--oms-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oms-accent);
}

.oms .hero__offer-copy {
  margin-bottom: 1.15rem;
  font-family: var(--oms-font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  line-height: 1.35;
  color: var(--oms-ink);
}

.oms .hero__deliverables {
  display: grid;
  gap: 0.55rem 1.25rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--oms-rule-soft);
}

.oms .hero__deliverables li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.86rem;
  color: var(--oms-ink-dim);
}

.oms .hero__deliverables li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 5px;
  height: 5px;
  background: var(--oms-accent);
}

.oms .hero__actions { margin: 1.15rem 0 0; display: flex; align-items: center; flex-wrap: wrap; }

.oms .hero__reassurance {
  margin-top: 0.85rem;
  font-size: 0.78rem;
  color: var(--oms-ink-dim);
}


.oms .facts {
  grid-area: facts;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.oms .facts__item {
  min-height: 6.75rem;
  padding: 1.05rem 1.15rem;
  background: var(--oms-bg-raised);
  border: 1px solid var(--oms-rule-soft);
  box-shadow: inset 0 3px 0 var(--oms-accent);
}

.oms .facts dt {
  font-family: var(--oms-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oms-ink-mute);
  margin-bottom: 0.5rem;
}

.oms .facts dd { font-family: var(--oms-font-display); font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem); color: var(--oms-ink); }


/* -------------------------------------------------------------- sections -- */
.oms .section {
  padding-block: var(--oms-section-y);
  border-bottom: 1px solid var(--oms-rule-soft);
}

.oms .section--well { background: var(--oms-bg-well); border-bottom-color: var(--oms-rule-soft); }

.oms #delay {
  padding-block: clamp(4rem, 7vw, 7rem);
  background: var(--oms-bg-raised);
}

.oms #delay .section__grid { row-gap: clamp(2.25rem, 4vw, 3.5rem); }

.oms #included { background: var(--oms-bg-raised); }

.oms #timeline { background: var(--oms-bg-well); }

.oms .section--well + .section--well { border-top: 1px solid var(--oms-rule-soft); margin-top: -1px; }

.oms .section--contact { background: var(--oms-bg); border-bottom: none; }


.oms .section__grid { display: grid; gap: 3rem; }

.oms .craft-media {
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  background: #181411;
  border: 1px solid var(--oms-rule-soft);
  box-shadow: 0 1.5rem 4rem rgba(28, 24, 21, 0.1);
}

.oms .craft-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.5;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.03);
}

.oms .craft-media figcaption,
.oms .build__art figcaption {
  margin: 0;
  padding: 0.8rem 1rem;
  font-family: var(--oms-font-mono);
  font-size: 0.64rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.oms .craft-media figcaption {
  color: #D5CBC0;
  background: #181411;
  border-top: 1px solid #382F29;
}


.oms .section__title {
  font-family: var(--oms-font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.oms .delay__signals {
  display: grid;
  margin: clamp(2rem, 4vw, 3.25rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--oms-rule-soft);
  list-style: none;
}

.oms .delay__signals li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--oms-rule-soft);
  color: var(--oms-ink-dim);
  font-size: 0.88rem;
}

.oms .delay__signals span {
  font-family: var(--oms-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--oms-accent);
}


/* -------------------------------------------------------- queue  diagram -- */
.oms .queue {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--oms-rule-soft);
  border-radius: 2px;
  background: var(--oms-bg-raised);
}

.oms .queue__caption {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1.5rem;
}

.oms .queue__kicker {
  font-family: var(--oms-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oms-accent);
}

.oms .queue__caption strong {
  max-width: 31ch;
  font-family: var(--oms-font-display);
  font-size: clamp(1.35rem, 1.05rem + 1vw, 2rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--oms-ink);
}

.oms .queue__row { margin-bottom: 1.1rem; }

.oms .queue__label { margin: 0 0 0.5rem; font-size: 0.78rem; color: var(--oms-ink-mute); max-width: none; }

.oms .queue__row--ours .queue__label { color: var(--oms-ink); }


.oms .queue__track { display: flex; gap: 3px; height: 12px; }

.oms .queue__block,
.oms .queue__gap { width: var(--w); border-radius: 1px; }

.oms .queue__block { background: var(--oms-ink-mute); }

.oms .queue__block--full { background: var(--oms-accent); }

.oms .queue__gap {
  background: repeating-linear-gradient(135deg, var(--oms-rule) 0 1px, transparent 1px 5px);
  border: 1px solid var(--oms-rule);
}


/* The bars draw in left to right once, so the eye reads the fragmentation. */
.js .oms .queue .queue__block,
.js .oms .queue .queue__gap { transform: scaleX(0); transform-origin: left center; }

.js .oms .queue.is-visible .queue__block,
.js .oms .queue.is-visible .queue__gap {
  transform: scaleX(1);
  transition: transform 0.5s var(--oms-ease);
  transition-delay: calc(var(--i) * 90ms);
}


.oms .queue__key {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  font-family: var(--oms-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oms-ink-mute);
  max-width: none;
}

.oms .queue__swatch { width: 11px; height: 11px; border-radius: 1px; display: inline-block; }

.oms .queue__swatch--work { background: var(--oms-ink-mute); }

.oms .queue__swatch--wait { border: 1px solid var(--oms-rule); margin-left: 1rem; }

.oms .queue__note { margin: 0.75rem 0 0; font-size: 0.78rem; color: var(--oms-ink-mute); max-width: none; }


/* ------------------------------------------------------------- row lists -- */
.oms .rows { border-top: 1px solid var(--oms-rule-soft); }

.oms .rows__item { display: grid; gap: 0.4rem 2.5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--oms-rule-soft); }

.oms .rows dt { font-size: 0.95rem; font-weight: 500; color: var(--oms-ink); }

.oms .rows dd { color: var(--oms-ink-dim); max-width: var(--oms-measure); }


/* ------------------------------------------------------- involvement tabs -- */
.oms .modes { margin-top: 1rem; }

.oms .modes__tabs { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; border-bottom: 1px solid var(--oms-rule); }

.oms .modes {
  margin-top: 2.5rem;
  padding: clamp(1.35rem, 3vw, 2.25rem);
  background: var(--oms-bg-raised);
  border: 1px solid var(--oms-rule-soft);
}

.oms .modes__tab {
  background: none;
  border: 0;
  padding: 0 0 0.9rem;
  margin-bottom: -1px;
  color: var(--oms-ink-mute);
  font-family: var(--oms-font-sans);
  font-size: 0.95rem;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.22s var(--oms-ease), border-color 0.22s var(--oms-ease);
}

.oms .modes__tab:hover { color: var(--oms-ink-dim); }

.oms .modes__tab[aria-selected="true"] { color: var(--oms-ink); border-bottom-color: var(--oms-accent); }


.oms .modes__default {
  font-family: var(--oms-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oms-accent);
  border: 1px solid var(--oms-accent-wash);
  background: var(--oms-accent-wash);
  border-radius: 2px;
  padding: 0.2rem 0.4rem;
  margin-left: 0.5rem;
  vertical-align: 1px;
}


.oms .modes__panel { padding-top: 2rem; }

.oms .modes__panel[hidden] { display: none; }

.oms .modes__lead { font-family: var(--oms-font-display); font-size: 1.35rem; font-weight: 300; color: var(--oms-ink); margin-bottom: 0.9rem; }


.oms .modes__spec { margin-top: 2rem; border-top: 1px solid var(--oms-rule-soft); }

.oms .modes__spec > div { display: grid; gap: 0.2rem 2rem; padding: 0.95rem 0; border-bottom: 1px solid var(--oms-rule-soft); }

.oms .modes__spec dt { font-family: var(--oms-font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oms-ink-mute); }

.oms .modes__spec dd { color: var(--oms-ink-dim); font-size: 0.95rem; }


/* --------------------------------------------------------- includes list -- */
.oms .includes { display: grid; border-top: 1px solid var(--oms-rule-soft); counter-reset: inc; }

.oms .includes__item { padding: 1.5rem 0; border-bottom: 1px solid var(--oms-rule-soft); counter-increment: inc; display: grid; gap: 0.35rem; }

.oms .includes__item h3 { font-size: 0.95rem; font-weight: 500; color: var(--oms-ink); display: flex; align-items: baseline; gap: 0.85rem; }

.oms .includes__item h3::before {
  content: counter(inc, decimal-leading-zero);
  font-family: var(--oms-font-mono);
  font-size: 0.68rem;
  color: var(--oms-accent);
  letter-spacing: 0.08em;
}

.oms .includes__item p { color: var(--oms-ink-dim); font-size: 0.95rem; margin: 0; padding-left: 2.15rem; max-width: var(--oms-measure); }


/* ======================================================= THE BUILD SEQUENCE */
.oms .build {
  background: var(--oms-bg-deep);
  border-block: 1px solid var(--oms-rule-soft);
}


.oms .build__intro { padding-block: var(--oms-section-y) 0; }

.oms .build__title {
  font-family: var(--oms-font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.oms .build__intro .lede { color: var(--oms-ink-dim); }

.oms .build__art {
  position: relative;
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
  overflow: hidden;
  border: 1px solid var(--oms-rule-soft);
  background: #100f0e;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.28);
}

.oms .build__visual {
  position: relative;
  aspect-ratio: 16 / 8.5;
  overflow: hidden;
  perspective: 1200px;
  background: #0D0C0B;
}

.oms .build__base,
.oms .build__layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}

.oms .build__base {
  opacity: 0.24;
  filter: saturate(0.88) contrast(1.03);
  transform: scale(1.018);
  transition: opacity 1.2s var(--oms-ease), filter 1.2s var(--oms-ease), transform 1.6s var(--oms-ease);
}

.oms .build__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform 0.28s var(--oms-ease);
}

.oms .build__layer-mask {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transform: translate3d(var(--oms-enter-x, 0), var(--oms-enter-y, 2.5rem), 0) scale(0.97);
  filter: brightness(0.72);
  transition: opacity 0.8s var(--oms-ease), transform 1.25s var(--oms-ease), filter 1.2s var(--oms-ease);
  transition-delay: var(--oms-layer-delay, 0s);
}

.oms .build__layer--01 { --oms-enter-x: 1.4rem; --oms-enter-y: -2.8rem; --oms-layer-delay: 0.08s; }
.oms .build__layer--02 { --oms-enter-x: -1rem; --oms-enter-y: -0.8rem; --oms-layer-delay: 0.2s; }
.oms .build__layer--03 { --oms-enter-x: 1rem; --oms-enter-y: 1.2rem; --oms-layer-delay: 0.32s; }
.oms .build__layer--04 { --oms-enter-x: -1.2rem; --oms-enter-y: 3rem; --oms-layer-delay: 0.44s; }

.oms .build__layer--01 .build__layer-mask { clip-path: polygon(21% 3%, 84% 19%, 69% 45%, 19% 29%); }
.oms .build__layer--02 .build__layer-mask { clip-path: polygon(20% 30%, 83% 45%, 70% 65%, 20% 49%); }
.oms .build__layer--03 .build__layer-mask { clip-path: polygon(20% 49%, 82% 64%, 70% 82%, 20% 67%); }
.oms .build__layer--04 .build__layer-mask { clip-path: polygon(20% 66%, 82% 80%, 70% 98%, 20% 83%); }

.oms .build__art.is-visible .build__base {
  opacity: 0.32;
  filter: saturate(0.8) contrast(1.06) blur(0.5px);
  transform: scale(1.005);
}

.oms .build__art.is-visible .build__layer-mask {
  opacity: 1;
  transform: none;
  filter: brightness(1);
}

.oms .build__sheen {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(112deg, transparent 36%, rgba(231, 121, 88, 0.04) 44%, rgba(231, 121, 88, 0.2) 49%, transparent 56%);
  transform: translateX(-70%) skewX(-12deg);
}

.oms .build__art.is-visible .build__sheen {
  animation: oms-build-sheen 7s var(--oms-ease) 1.5s infinite;
}

@keyframes oms-build-sheen {
  0%, 18% { opacity: 0; transform: translateX(-70%) skewX(-12deg); }
  28% { opacity: 0.8; }
  42% { opacity: 0; transform: translateX(70%) skewX(-12deg); }
  100% { opacity: 0; transform: translateX(70%) skewX(-12deg); }
}

.oms .build__art figcaption {
  color: var(--oms-ink-dim);
  background: var(--oms-bg-well);
  border-top: 1px solid var(--oms-rule-soft);
}

.oms .build__track--legacy { display: none !important; }

.oms .process-path {
  padding-block: clamp(3.5rem, 7vw, 6.5rem) var(--oms-section-y);
}

.oms .process-path__head {
  display: grid;
  gap: 1.5rem 4rem;
  align-items: end;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid #44382F;
}

.oms .process-path__eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--oms-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oms-accent);
}

.oms .process-path__title {
  max-width: 15ch;
  font-family: var(--oms-font-display);
  font-size: clamp(2rem, 1.25rem + 2.4vw, 3.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--oms-ink);
}

.oms .process-path__head > p {
  max-width: 42rem;
  margin: 0;
  color: var(--oms-ink-dim);
}

.oms .process-path__grid {
  position: relative;
  display: grid;
  gap: 0.8rem;
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.oms .process-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: clamp(1.2rem, 2.5vw, 1.6rem);
  overflow: hidden;
  border: 1px solid #3F352E;
  background:
    linear-gradient(145deg, rgba(231, 121, 88, 0.055), transparent 42%),
    #211B17;
  box-shadow: inset 0 2px var(--oms-accent);
}

.oms .process-card::after {
  content: "";
  position: absolute;
  right: -2.5rem;
  bottom: -3rem;
  width: 8rem;
  height: 8rem;
  border: 1px solid rgba(231, 121, 88, 0.09);
  transform: rotate(35deg);
  transition: transform 0.7s var(--oms-ease), border-color 0.5s var(--oms-ease);
}

.oms .process-card:hover::after {
  border-color: rgba(231, 121, 88, 0.22);
  transform: rotate(28deg) translate(-0.4rem, -0.4rem);
}

.oms .process-card__num {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-family: var(--oms-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--oms-accent);
}

.oms .process-card h4 {
  margin: 0 0 0.7rem;
  font-family: var(--oms-font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.75rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--oms-ink);
}

.oms .process-card > p:not(.process-card__num) {
  position: relative;
  z-index: 1;
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--oms-ink-dim);
}

.oms .process-card > span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid #3F352E;
  font-family: var(--oms-font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oms-accent);
}

.oms .process-card > span::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  background: var(--oms-accent);
}

.js .oms .process-card.reveal {
  transition-delay: calc(var(--i) * 70ms);
}


/* Without JS the track is an ordinary block and all eight stages read as a
   list. The pinning only exists once the controller is running. */
.oms .build__track { padding-block: 4rem var(--oms-section-y); }

.js .oms .build__track { padding-block: 0; height: 660vh; }


.oms .build__pin { padding-block: 4rem; }

.js .oms .build__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Clears the sticky masthead so the layout centres in the space below it. */
  padding: 4.75rem 0 1.5rem;
  overflow: hidden;
}


.oms .build__layout { display: grid; gap: 3rem; align-items: center; width: 100%; }


/* ----- stage rail ----- */
.oms .build__stages { display: grid; gap: 0; }


.oms .stage {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--oms-rule-soft);
}

.oms .stage__num {
  font-family: var(--oms-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--oms-rule);
  margin: 0.15rem 0 0;
  max-width: none;
  transition: color 0.3s var(--oms-ease);
}

.oms .stage__text h3 {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--oms-ink-mute);
  transition: color 0.3s var(--oms-ease);
}

.oms .stage__text p { margin: 0; color: var(--oms-ink-dim); font-size: 0.9rem; max-width: 34rem; }


.js .oms .stage__text p {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--oms-ease), opacity 0.35s var(--oms-ease), margin-top 0.45s var(--oms-ease);
}

.js .oms .stage.is-current .stage__text p { max-height: 8rem; opacity: 1; margin-top: 0.45rem; }

.js .oms .stage.is-current .stage__num { color: var(--oms-accent); }

.js .oms .stage.is-current .stage__text h3 { color: var(--oms-ink); }

.js .oms .stage.is-done .stage__num { color: var(--oms-ink-mute); }

.js .oms .stage.is-done .stage__text h3 { color: var(--oms-ink-dim); }


/* ----- the specimen ----- */
.oms .spec {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  background: #1B1714;
  border: 1px solid #4A3B33;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.025);
}


.oms .spec__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--oms-rule-soft);
  font-family: var(--oms-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oms-ink-mute);
}

.oms .spec__identity,
.oms .spec__status { display: flex; align-items: center; }

.oms .spec__identity { gap: 0.5rem; }

.oms .spec__identity i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 1px;
  background: var(--oms-accent);
  box-shadow: 0 0 1rem var(--oms-accent-wash);
}

.oms .spec__status { gap: 0.7rem; }

.oms .spec__count { color: var(--oms-rule); }

.oms .spec__state { color: var(--oms-accent); }

.oms .spec__meter { display: block; height: 2px; background: #302721; }

.oms .spec__meter i {
  display: block;
  width: 12.5%;
  height: 100%;
  background: var(--oms-accent);
  transform-origin: left center;
  transition: width 0.55s var(--oms-ease);
}


.oms .spec__page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  min-height: 20rem;
  background:
    linear-gradient(rgba(231, 121, 88, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 121, 88, 0.025) 1px, transparent 1px),
    #151310;
  background-size: 2rem 2rem;
}


/* Elements switched on by the controller as their stage arrives. */
.oms .spec__page [data-from] { opacity: 0; transition: opacity 0.45s var(--oms-ease), transform 0.45s var(--oms-ease); }

.oms .spec__page [data-from].is-on { opacity: 1; }


/* -- brief sheet (stages 1-2) -- */
.oms .spec__brief {
  position: absolute;
  inset: 1rem;
  border: 1px solid #44362E;
  background: linear-gradient(145deg, #1C1815 0%, #171411 100%);
  border-radius: 2px;
  padding: clamp(0.9rem, 2vw, 1.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transform: translateY(6px);
  box-shadow: inset 3px 0 var(--oms-accent), 0 1.25rem 3rem rgba(0, 0, 0, 0.18);
}

.oms .spec__brief.is-on { transform: none; }

.oms .spec__stamp {
  font-family: var(--oms-font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oms-ink-mute);
  margin: 0;
  max-width: none;
}

.oms .spec__briefhead,
.oms .spec__sourcehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.oms .spec__lock,
.oms .spec__sourcehead {
  font-family: var(--oms-font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.oms .spec__lock {
  flex: 0 0 auto;
  color: var(--oms-accent);
  border: 1px solid var(--oms-accent-wash);
  background: var(--oms-accent-wash);
  padding: 0.2rem 0.35rem;
}

.oms .spec__brieftitle {
  max-width: 17ch;
  font-family: var(--oms-font-display);
  font-size: clamp(1.3rem, 1rem + 0.8vw, 1.75rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--oms-ink);
}

.oms .spec__briefsummary {
  max-width: 39ch;
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--oms-ink-dim);
}

.oms .spec__briefgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.oms .spec__briefgrid > div {
  min-width: 0;
  padding: 0.55rem;
  border: 1px solid #3A302A;
  background: rgba(255, 255, 255, 0.018);
}

.oms .spec__briefgrid span,
.oms .spec__briefgrid strong {
  display: block;
}

.oms .spec__briefgrid span {
  margin-bottom: 0.3rem;
  font-family: var(--oms-font-mono);
  font-size: 0.43rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oms-accent);
}

.oms .spec__briefgrid strong {
  font-size: 0.64rem;
  line-height: 1.35;
  font-weight: 400;
  color: var(--oms-ink-dim);
}

.oms .spec__source {
  display: grid;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid #3A302A;
}

.oms .spec__sourcehead { color: var(--oms-ink-mute); }

.oms .spec__sourcehead span:last-child { color: var(--oms-accent); }

.oms .spec__briefline { display: block; height: 3px; border-radius: 1px; background: #5A4E46; width: 92%; }

.oms .spec__briefline:nth-child(3) { width: 78%; }

.oms .spec__briefline:nth-child(4) { width: 85%; }

.oms .spec__briefline:nth-child(5) { width: 61%; }

.oms .spec__briefline:nth-child(6) { width: 71%; }


.oms .spec__objectives {
  position: absolute;
  left: clamp(0.9rem, 2vw, 1.2rem);
  right: clamp(0.9rem, 2vw, 1.2rem);
  bottom: clamp(0.8rem, 2vw, 1rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  transform: translateY(4px);
}

.oms .spec__objectives.is-on { transform: none; }

.oms .spec__objectives span {
  font-family: var(--oms-font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oms-accent);
  border: 1px solid var(--oms-accent-wash);
  background: var(--oms-accent-wash);
  border-radius: 2px;
  padding: 0.2rem 0.35rem;
}


/* -- page blocks -- */
.oms .spec__block {
  position: relative;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 0.55rem;
  transform: translateY(5px);
  transition: opacity 0.45s var(--oms-ease), transform 0.45s var(--oms-ease),
              border-color 0.5s var(--oms-ease), background-color 0.5s var(--oms-ease);
}

.oms .spec__block.is-on { transform: none; }


.oms .spec__nav { display: flex; align-items: center; gap: 0.4rem; }

.oms .spec__hero { display: flex; flex-direction: column; gap: 0.4rem; padding-block: 1.1rem; }

.oms .spec__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }

.oms .spec__grid .col { display: flex; flex-direction: column; gap: 0.3rem; }

.oms .spec__media { height: 3.5rem; }

.oms .spec__foot { display: flex; align-items: center; gap: 0.5rem; }

.oms .spec__mini-brand,
.oms .spec__mini-nav,
.oms .spec__mini-cta,
.oms .spec__mini-eyebrow,
.oms .spec__mini-title,
.oms .spec__mini-copy,
.oms .spec__mini-button,
.oms .spec__mini-index,
.oms .spec__grid strong,
.oms .spec__mini-rule,
.oms .spec__mini-footcopy {
  opacity: 0.2;
  transition: opacity 0.45s var(--oms-ease), color 0.45s var(--oms-ease), background-color 0.45s var(--oms-ease);
}

.oms .spec__mini-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--oms-font-mono);
  font-size: 0.46rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oms-ink);
}

.oms .spec__mini-brand i {
  width: 0.35rem;
  height: 0.35rem;
  background: var(--oms-accent);
}

.oms .spec__mini-nav {
  font-family: var(--oms-font-mono);
  font-size: 0.38rem;
  letter-spacing: 0.06em;
  color: var(--oms-ink-dim);
}

.oms .spec__mini-cta {
  margin-left: auto;
  padding: 0.22rem 0.38rem;
  font-family: var(--oms-font-mono);
  font-size: 0.38rem;
  letter-spacing: 0.05em;
  color: #160C08;
  background: var(--oms-accent);
}

.oms .spec__mini-eyebrow {
  font-family: var(--oms-font-mono);
  font-size: 0.42rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oms-accent);
}

.oms .spec__mini-title {
  max-width: 14ch;
  font-family: var(--oms-font-display);
  font-size: clamp(1rem, 0.78rem + 0.7vw, 1.35rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--oms-ink);
}

.oms .spec__mini-copy {
  max-width: 38ch;
  font-size: 0.46rem;
  line-height: 1.45;
  color: var(--oms-ink-dim);
}

.oms .spec__mini-button {
  align-self: flex-start;
  padding: 0.26rem 0.45rem;
  font-family: var(--oms-font-mono);
  font-size: 0.4rem;
  letter-spacing: 0.04em;
  color: #160C08;
  background: var(--oms-accent);
}

.oms .spec__mini-index {
  font-family: var(--oms-font-mono);
  font-size: 0.38rem;
  letter-spacing: 0.08em;
  color: var(--oms-accent);
}

.oms .spec__grid strong {
  font-size: 0.5rem;
  font-weight: 400;
  color: var(--oms-ink);
}

.oms .spec__mini-rule {
  width: 72%;
  height: 2px;
  margin-top: 0.15rem;
  background: var(--oms-rule);
}

.oms .spec__media {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 65% 45%, rgba(231, 121, 88, 0.16), transparent 36%), #171411;
}

.oms .spec__mini-plane {
  position: absolute;
  left: 20%;
  width: 62%;
  height: 42%;
  border: 1px solid #5A4034;
  background: rgba(231, 121, 88, 0.035);
  transform: skewX(-18deg) rotate(-2deg);
  box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.24);
}

.oms .spec__mini-plane--01 { top: 10%; }
.oms .spec__mini-plane--02 { top: 31%; left: 17%; opacity: 0.72; }
.oms .spec__mini-plane--03 { top: 52%; left: 14%; opacity: 0.44; }

.oms .spec__foot { justify-content: space-between; }

.oms .spec__mini-footcopy {
  font-family: var(--oms-font-mono);
  font-size: 0.36rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oms-ink-mute);
}


/* bars */
.oms .b { display: block; height: 5px; width: var(--w, 100%); border-radius: 1px; background: var(--oms-ink-mute); transition: opacity 0.4s var(--oms-ease), background-color 0.5s var(--oms-ease); }

.oms .b--mark { width: 7px; height: 7px; border-radius: 1px; background: var(--oms-accent); }

.oms .b--h1 { height: 11px; }

.oms .b--sub { height: 6px; }

.oms .b--btn { width: 46px; height: 14px; border-radius: 2px; background: var(--oms-accent); margin-top: 0.35rem; }

.oms .b--cta { height: 9px; border-radius: 2px; background: var(--oms-accent); margin-left: auto; }

.oms .b--tag { width: 16px; height: 4px; background: var(--oms-accent); }


/* ----- specimen modes ----- */
/* Wireframe: dashed outlines, labelled, content only sketched. */
.oms .spec[data-mode="wire"] .spec__block { border-color: var(--oms-rule); border-style: dashed; }

.oms .spec[data-mode="wire"] .b { opacity: 0.16; background: var(--oms-ink-mute); }

.oms .spec[data-mode="wire"] .spec__mini-brand,
.oms .spec[data-mode="wire"] .spec__mini-nav,
.oms .spec[data-mode="wire"] .spec__mini-cta,
.oms .spec[data-mode="wire"] .spec__mini-eyebrow,
.oms .spec[data-mode="wire"] .spec__mini-title,
.oms .spec[data-mode="wire"] .spec__mini-copy,
.oms .spec[data-mode="wire"] .spec__mini-button,
.oms .spec[data-mode="wire"] .spec__mini-index,
.oms .spec[data-mode="wire"] .spec__grid strong,
.oms .spec[data-mode="wire"] .spec__mini-rule,
.oms .spec[data-mode="wire"] .spec__mini-footcopy { opacity: 0.12; }

.oms .spec[data-mode="wire"] .spec__media { background: repeating-linear-gradient(135deg, var(--oms-rule-soft) 0 1px, transparent 1px 6px); }

.oms .spec[data-mode="wire"] .spec__block::after {
  content: attr(data-label);
  position: absolute;
  top: -0.5rem;
  left: 0.4rem;
  padding: 0 0.25rem;
  background: var(--oms-bg-raised);
  font-family: var(--oms-font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oms-ink-mute);
}


/* Design direction: the system arrives, outlines resolve. */
.oms .spec[data-mode="design"] .spec__block { border-color: var(--oms-rule-soft); background: rgba(255,255,255,0.012); }

.oms .spec[data-mode="design"] .b { opacity: 0.4; }

.oms .spec[data-mode="design"] .spec__mini-brand,
.oms .spec[data-mode="design"] .spec__mini-nav,
.oms .spec[data-mode="design"] .spec__mini-cta,
.oms .spec[data-mode="design"] .spec__mini-eyebrow,
.oms .spec[data-mode="design"] .spec__mini-title,
.oms .spec[data-mode="design"] .spec__mini-copy,
.oms .spec[data-mode="design"] .spec__mini-button,
.oms .spec[data-mode="design"] .spec__mini-index,
.oms .spec[data-mode="design"] .spec__grid strong,
.oms .spec[data-mode="design"] .spec__mini-rule,
.oms .spec[data-mode="design"] .spec__mini-footcopy { opacity: 0.56; }


/* Development onward: content fills in. */
.oms .spec[data-mode="dev"] .spec__block,
.oms .spec[data-mode="review"] .spec__block,
.oms .spec[data-mode="qa"] .spec__block,
.oms .spec[data-mode="live"] .spec__block { border-color: var(--oms-rule-soft); background: rgba(255,255,255,0.012); }


.oms .spec[data-mode="dev"] .b { opacity: 1; transition-delay: calc(var(--i, 0) * 110ms); }

.oms .spec[data-mode="review"] .b,
.oms .spec[data-mode="qa"] .b,
.oms .spec[data-mode="live"] .b { opacity: 1; }

.oms .spec[data-mode="dev"] .spec__mini-brand,
.oms .spec[data-mode="dev"] .spec__mini-nav,
.oms .spec[data-mode="dev"] .spec__mini-cta,
.oms .spec[data-mode="dev"] .spec__mini-eyebrow,
.oms .spec[data-mode="dev"] .spec__mini-title,
.oms .spec[data-mode="dev"] .spec__mini-copy,
.oms .spec[data-mode="dev"] .spec__mini-button,
.oms .spec[data-mode="dev"] .spec__mini-index,
.oms .spec[data-mode="dev"] .spec__grid strong,
.oms .spec[data-mode="dev"] .spec__mini-rule,
.oms .spec[data-mode="dev"] .spec__mini-footcopy,
.oms .spec[data-mode="review"] .spec__mini-brand,
.oms .spec[data-mode="review"] .spec__mini-nav,
.oms .spec[data-mode="review"] .spec__mini-cta,
.oms .spec[data-mode="review"] .spec__mini-eyebrow,
.oms .spec[data-mode="review"] .spec__mini-title,
.oms .spec[data-mode="review"] .spec__mini-copy,
.oms .spec[data-mode="review"] .spec__mini-button,
.oms .spec[data-mode="review"] .spec__mini-index,
.oms .spec[data-mode="review"] .spec__grid strong,
.oms .spec[data-mode="review"] .spec__mini-rule,
.oms .spec[data-mode="review"] .spec__mini-footcopy,
.oms .spec[data-mode="qa"] .spec__mini-brand,
.oms .spec[data-mode="qa"] .spec__mini-nav,
.oms .spec[data-mode="qa"] .spec__mini-cta,
.oms .spec[data-mode="qa"] .spec__mini-eyebrow,
.oms .spec[data-mode="qa"] .spec__mini-title,
.oms .spec[data-mode="qa"] .spec__mini-copy,
.oms .spec[data-mode="qa"] .spec__mini-button,
.oms .spec[data-mode="qa"] .spec__mini-index,
.oms .spec[data-mode="qa"] .spec__grid strong,
.oms .spec[data-mode="qa"] .spec__mini-rule,
.oms .spec[data-mode="qa"] .spec__mini-footcopy,
.oms .spec[data-mode="live"] .spec__mini-brand,
.oms .spec[data-mode="live"] .spec__mini-nav,
.oms .spec[data-mode="live"] .spec__mini-cta,
.oms .spec[data-mode="live"] .spec__mini-eyebrow,
.oms .spec[data-mode="live"] .spec__mini-title,
.oms .spec[data-mode="live"] .spec__mini-copy,
.oms .spec[data-mode="live"] .spec__mini-button,
.oms .spec[data-mode="live"] .spec__mini-index,
.oms .spec[data-mode="live"] .spec__grid strong,
.oms .spec[data-mode="live"] .spec__mini-rule,
.oms .spec[data-mode="live"] .spec__mini-footcopy { opacity: 1; }


.oms .spec[data-mode="dev"] .spec__media,
.oms .spec[data-mode="review"] .spec__media,
.oms .spec[data-mode="qa"] .spec__media,
.oms .spec[data-mode="live"] .spec__media { background: var(--oms-rule-soft); }


/* ----- design system overlay ----- */
.oms .spec__tokens {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 9.5rem;
  padding: 0.6rem;
  border: 1px solid var(--oms-rule);
  border-radius: 2px;
  background: var(--oms-bg);
  transform: translateY(8px);
  display: grid;
  gap: 0.5rem;
}

.oms .spec__tokens.is-on { transform: none; }

.oms .spec__tokenhead {
  font-family: var(--oms-font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oms-ink-mute);
  margin: 0;
  max-width: none;
}

.oms .spec__swatches { display: flex; gap: 0.25rem; }

.oms .spec__swatches span { width: 1.1rem; height: 1.1rem; border-radius: 2px; background: var(--c); border: 1px solid var(--oms-rule-soft); }

.oms .spec__typescale { display: flex; align-items: flex-end; gap: 0.25rem; height: 1rem; }

.oms .spec__typescale span { width: 5px; height: var(--h); background: var(--oms-ink-mute); border-radius: 1px; }

.oms .spec__spacing { display: flex; align-items: center; gap: 0.25rem; }

.oms .spec__spacing span { height: 4px; width: var(--s); background: var(--oms-accent); border-radius: 1px; opacity: 0.6; }


/* ----- client review ----- */
.oms .spec__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 1.15rem;
  height: 1.15rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--oms-accent);
  background: var(--oms-bg);
  color: var(--oms-accent);
  font-family: var(--oms-font-mono);
  font-size: 0.55rem;
  transform: scale(0.6);
  transition: opacity 0.35s var(--oms-ease), transform 0.35s var(--oms-ease);
  transition-delay: calc(var(--i) * 130ms);
}

.oms .spec__pin.is-on { transform: scale(1); }


.oms .spec__note {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 10.5rem;
  padding: 0.7rem;
  border: 1px solid #694637;
  border-radius: 2px;
  background: rgba(26, 21, 18, 0.96);
  display: grid;
  gap: 0.38rem;
  transform: translateY(8px);
  box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.3);
}

.oms .spec__note.is-on { transform: none; }

.oms .spec__notehead { font-family: var(--oms-font-mono); font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oms-accent); }

.oms .spec__note strong {
  font-family: var(--oms-font-display);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.1;
  color: var(--oms-ink);
}

.oms .spec__notecopy {
  font-size: 0.5rem;
  line-height: 1.45;
  color: var(--oms-ink-dim);
}

.oms .spec__notestatus {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  font-family: var(--oms-font-mono);
  font-size: 0.42rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oms-accent);
}

.oms .spec__notestatus i {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--oms-accent);
  box-shadow: 0 0 0.8rem var(--oms-accent-wash);
}

.oms .spec__noteline { height: 4px; width: var(--w); background: var(--oms-rule); border-radius: 1px; }


/* ----- quality assurance ----- */
.oms .spec__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--oms-accent);
  box-shadow: 0 0 14px 1px var(--oms-accent-wash);
}

.oms .spec__scan.is-on { animation: scan 2.4s var(--oms-ease) infinite; }

@keyframes scan {
  0%   { transform: translateY(0);    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(20rem); opacity: 0; }
}


.oms .spec__badges { position: absolute; left: 0.75rem; bottom: 0.75rem; display: flex; gap: 0.3rem; }

.oms .spec__badges span {
  font-family: var(--oms-font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oms-ink-dim);
  border: 1px solid var(--oms-rule);
  border-radius: 2px;
  padding: 0.2rem 0.35rem;
  background: var(--oms-bg);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s var(--oms-ease), transform 0.3s var(--oms-ease), color 0.3s var(--oms-ease), border-color 0.3s var(--oms-ease);
  transition-delay: calc(var(--i) * 180ms);
}

.oms .spec__badges.is-on span { opacity: 1; transform: none; color: var(--oms-accent); border-color: var(--oms-accent-wash); }


/* ----- launched ----- */
.oms .spec__live {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  font-family: var(--oms-font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #120A06;
  background: var(--oms-accent);
  border-radius: 2px;
  padding: 0.2rem 0.4rem;
  transform: translateY(-4px);
}

.oms .spec__live.is-on { transform: none; }


.oms .spec__baseline {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--oms-accent);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 1;
  transition: transform 0.9s var(--oms-ease);
}

.oms .spec__baseline.is-on { transform: scaleX(1); }


/* ----- progress ----- */
.oms .build__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--oms-rule-soft); }

.oms .build__progressfill { display: block; height: 100%; width: 0; background: var(--oms-accent); }

html:not(.js) .oms .build__progress { display: none; }


/* ---------------------------------------------------------- timeline bar -- */
.oms .scale { margin: 3rem 0 2.5rem; }

.oms .scale__bar { height: 3px; background: var(--oms-rule); border-radius: 2px; overflow: hidden; }

.oms .scale__fill { display: block; height: 100%; width: 100%; background: var(--oms-accent); transform-origin: left center; }

.oms .scale__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 0.75rem;
  font-family: var(--oms-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oms-ink-mute);
}

.oms .scale__caption { margin-top: 1.5rem; font-size: 0.9rem; color: var(--oms-ink-mute); max-width: var(--oms-measure); }


/* ------------------------------------------------------------------ form -- */
.oms .form { margin-top: 2.5rem; }

.oms .form__trap {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.oms .form__grid { display: grid; gap: 1.5rem; }


.oms .field { margin: 0 0 1.5rem; display: grid; gap: 0.55rem; }

.oms .field > label,
.oms .field > legend {
  font-family: var(--oms-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oms-ink-mute);
  padding: 0;
}

.oms .field__hint { text-transform: none; letter-spacing: 0.04em; color: var(--oms-rule); }


.oms .field > input,
.oms .field > textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--oms-rule);
  color: var(--oms-ink);
  font-family: var(--oms-font-sans);
  font-size: 1rem;
  font-weight: 300;
  padding: 0.6rem 0;
  border-radius: 0;
  transition: border-color 0.22s var(--oms-ease);
}

.oms .field > input:hover,
.oms .field > textarea:hover { border-bottom-color: var(--oms-ink-mute); }

.oms .field > input:focus,
.oms .field > textarea:focus { outline: none; border-bottom-color: var(--oms-accent); }

.oms .field > textarea { resize: vertical; line-height: 1.6; }


.oms .field--choice { border: 0; padding: 0; margin-top: 0.5rem; }

.oms .choices { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.oms .choice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--oms-rule);
  border-radius: 2px;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  color: var(--oms-ink-dim);
  cursor: pointer;
  transition: border-color 0.2s var(--oms-ease), color 0.2s var(--oms-ease);
}

.oms .choice input { accent-color: var(--oms-accent); margin: 0; }

.oms .choice:hover { border-color: var(--oms-ink-mute); color: var(--oms-ink); }

.oms .choice:has(input:checked) { border-color: var(--oms-accent); color: var(--oms-ink); background: var(--oms-accent-wash); }


.oms .form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--oms-rule-soft);
}

.oms .form__status { margin: 0; font-size: 0.85rem; color: var(--oms-ink-mute); max-width: none; }

.oms .form__status[data-state="error"] { color: var(--oms-accent-lift); }

.oms .form__status[data-state="success"] { color: var(--oms-accent); }

.oms .form .btn:disabled { cursor: wait; opacity: 0.68; }

.oms .section--contact .btn--solid { color: #181411; }


/* ---------------------------------------------------------------- footer -- */
.oms .footer {
  background: var(--oms-bg);
  border-top: 1px solid var(--oms-rule-soft);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.oms .footer__inner { display: grid; gap: 3rem; }

.oms .footer__name { font-family: var(--oms-font-display); font-size: 1.35rem; margin-bottom: 0.6rem; }

.oms .footer__promise { margin-bottom: 0.2rem; color: var(--oms-ink-dim); }

.oms .footer__support { font-family: var(--oms-font-display); font-style: italic; color: var(--oms-accent-lift); margin: 0; }

.oms .footer__nav ul { display: grid; gap: 0.7rem; }

.oms .footer__nav a { font-size: 0.9rem; color: var(--oms-ink-dim); transition: color 0.2s var(--oms-ease); }

.oms .footer__nav a:hover { color: var(--oms-ink); }

.oms .footer__meta {
  font-family: var(--oms-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oms-ink-mute);
  margin: 0;
}

.oms .footer__proto { display: block; margin-top: 0.5rem; color: var(--oms-rule); }


/* ------------------------------------------------------------- reveal fx -- */
.js .oms .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s var(--oms-ease), transform 0.55s var(--oms-ease);
}

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

/* The opening sequence is paced rather than flashy: the promise assembles,
   the commercial panel opens, then its proof arrives in reading order. */
.js .oms .hero__title.reveal,
.js .oms .facts.reveal { opacity: 1; transform: none; }

.js .oms .hero__title .hero__line {
  opacity: 0;
  transform: translateY(0.34em);
  transition: opacity 0.65s var(--oms-ease), transform 0.8s var(--oms-ease);
}

.js .oms .hero__title.is-visible .hero__line { opacity: 1; transform: none; }

.js .oms .hero__title.is-visible .hero__line:nth-child(2) { transition-delay: 0.11s; }

.js .oms .hero__offer.reveal {
  opacity: 1;
  transform: translateX(1.25rem);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s var(--oms-ease), transform 0.8s var(--oms-ease);
}

.js .oms .hero__offer.reveal.is-visible { transform: none; clip-path: inset(0); }

.oms .hero__offer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--oms-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--oms-ease) 0.45s;
}

.js .oms .hero__offer.is-visible::after { transform: scaleX(1); }

.js .oms .hero__offer > .hero__offer-label,
.js .oms .hero__offer > .hero__offer-copy,
.js .oms .hero__offer > .hero__actions,
.js .oms .hero__offer > .hero__reassurance,
.js .oms .hero__deliverables li {
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 0.45s var(--oms-ease), transform 0.55s var(--oms-ease);
}

.js .oms .hero__offer.is-visible > .hero__offer-label,
.js .oms .hero__offer.is-visible > .hero__offer-copy,
.js .oms .hero__offer.is-visible > .hero__actions,
.js .oms .hero__offer.is-visible > .hero__reassurance,
.js .oms .hero__offer.is-visible .hero__deliverables li { opacity: 1; transform: none; }

.js .oms .hero__offer.is-visible > .hero__offer-label { transition-delay: 0.3s; }
.js .oms .hero__offer.is-visible > .hero__offer-copy { transition-delay: 0.38s; }
.js .oms .hero__offer.is-visible > .hero__actions { transition-delay: 0.46s; }
.js .oms .hero__offer.is-visible > .hero__reassurance { transition-delay: 0.54s; }
.js .oms .hero__offer.is-visible .hero__deliverables li:nth-child(1) { transition-delay: 0.61s; }
.js .oms .hero__offer.is-visible .hero__deliverables li:nth-child(2) { transition-delay: 0.67s; }
.js .oms .hero__offer.is-visible .hero__deliverables li:nth-child(3) { transition-delay: 0.73s; }
.js .oms .hero__offer.is-visible .hero__deliverables li:nth-child(4) { transition-delay: 0.79s; }

.js .oms .hero__backdrop img {
  opacity: 0;
  transform: scale(1.1) translateX(2rem);
  animation: oms-hero-backdrop-in 1.25s var(--oms-ease) 0.12s forwards;
}

@keyframes oms-hero-backdrop-in {
  to { opacity: 0.72; transform: scale(1.04) translateX(0); }
}

.js .oms .facts .facts__item {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.5s var(--oms-ease), transform 0.65s var(--oms-ease);
}

.js .oms .facts.is-visible .facts__item { opacity: 1; transform: none; }
.js .oms .facts.is-visible .facts__item:nth-child(2) { transition-delay: 0.1s; }
.js .oms .facts.is-visible .facts__item:nth-child(3) { transition-delay: 0.2s; }

.oms .hero__actions .btn--solid { position: relative; overflow: hidden; }

.oms .hero__actions .btn--solid::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.65rem;
  transition: transform 0.25s var(--oms-ease);
}

.oms .hero__actions .btn--solid:hover::after { transform: translate(2px, -2px); }


.js .oms .scale .scale__fill { transform: scaleX(0); transition: transform 1.1s var(--oms-ease) 0.1s; }

.js .oms .scale.is-visible .scale__fill { transform: scaleX(1); }


/* =========================================================== breakpoints == */

/* Tablet — 640px and up */
@media (min-width: 40rem) {
  .oms .hero__deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .oms .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .oms .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }

  .oms .rows__item { grid-template-columns: 13rem minmax(0, 1fr); }

  .oms .modes__spec > div { grid-template-columns: 9rem minmax(0, 1fr); }

  .oms .includes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }

  .oms .footer__inner { grid-template-columns: 1fr auto; align-items: start; column-gap: 4rem; }

  .oms .footer__meta { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid var(--oms-rule-soft); }

  .oms .footer__nav ul { grid-template-columns: repeat(2, auto); column-gap: 3rem; }

  .oms .spec__page { min-height: 22rem; }

  .oms .process-path__head { grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.85fr); }

  .oms .process-path__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .oms .process-card { min-height: 14rem; }

}


/* Desktop — 1024px and up */
@media (min-width: 64rem) {
  .oms .section__grid { grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 7rem); }

  .oms .section__rail { position: sticky; top: 7.5rem; align-self: start; }

  /* This rail shares its grid with a full-width comparison panel. Keeping it
     sticky would carry the headline into the panel as the section scrolls. */
  .oms #delay .section__rail { position: static; }

  .oms #delay .queue {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
    gap: 0 2rem;
  }

  .oms #delay .queue__caption,
  .oms #delay .queue__key,
  .oms #delay .queue__note { grid-column: 1 / -1; }

  .oms #delay .queue__row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 0.75rem 0;
  }

  .oms #delay .queue__label { margin: 0; }

  .oms .hero__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(24rem, 0.75fr);
    grid-template-areas:
      "statement offer"
      "facts offer";
    column-gap: clamp(3.5rem, 5vw, 4.75rem);
    row-gap: clamp(1.5rem, 2.5vw, 2.25rem);
  }

  .oms .hero__offer { left: clamp(2rem, 3vw, 3.25rem); }

  .oms .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }

  .oms .includes { column-gap: 4rem; }


  .oms .build__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(3rem, 6vw, 6rem); }

  .oms .spec { max-width: 36rem; margin-inline: 0; }

  .oms .spec__page { min-height: 24rem; }

  .oms .process-path__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

}

@media (max-width: 63.99rem) {
  .oms .hero::before {
    background:
      linear-gradient(90deg, rgba(23, 21, 18, 0.98) 0%, rgba(23, 21, 18, 0.87) 58%, rgba(23, 21, 18, 0.48) 100%),
      linear-gradient(180deg, rgba(23, 21, 18, 0.2) 0%, rgba(23, 21, 18, 0.86) 58%, var(--oms-bg) 100%);
  }

  .oms .hero__backdrop img {
    top: -2rem;
    right: -22rem;
    width: 62rem;
    opacity: 0.5;
  }

  .oms .hero__offer {
    max-width: 38rem;
    margin-top: 0;
  }
}


/* Mobile navigation — below 900px */
@media (max-width: 56.24rem) {
  .oms .menu-toggle { display: inline-flex; }

  .oms .masthead__cta { display: none; }

  .oms .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--oms-bg);
    border-block: 1px solid var(--oms-rule-soft);
    padding: 0.5rem var(--oms-gutter) 1.5rem;
    display: none;
  }

  .oms .nav.is-open { display: block; }

  .oms .nav__list { flex-direction: column; gap: 0; }

  .oms .nav__list a { display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--oms-rule-soft); font-size: 0.95rem; }

  .oms .nav__list a:hover { border-bottom-color: var(--oms-rule-soft); }

  .oms .nav__list li:last-child a { border-bottom: 0; }

  .oms .nav__cta { display: block; margin-top: 1.25rem; }

  .oms .nav__cta a {
    background: var(--oms-accent);
    color: #FFF9F2;
    font-weight: 500;
    text-align: center;
    border-radius: 2px;
    padding: 0.95rem 1.25rem;
    border-bottom: 0;
  }


  /* The specimen leads on narrow screens; the stage list follows it. Both have
     to fit inside one pinned viewport, so the rail tightens up. */
  .oms .build__layout { gap: 1.5rem; }

  .oms .spec { order: -1; }

  .js .oms .build__track { height: 560vh; }

  .oms .spec__page { min-height: 25rem; }

  .oms .stage { padding: 0.45rem 0; grid-template-columns: 2.25rem minmax(0, 1fr); }

  .oms .stage__text h3 { font-size: 0.9rem; }

  .oms .stage__text p { font-size: 0.85rem; line-height: 1.5; }

  .js .oms .stage.is-current .stage__text p { max-height: 7rem; }

}


/* Small phones */
@media (max-width: 26rem) {
  .oms .facts { grid-template-columns: 1fr; gap: 1.25rem; }

  .oms .facts__item { min-height: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }

  .oms .facts dt { margin-bottom: 0; }

  .oms .queue { padding: 1.25rem; }

  .oms .link-quiet { margin-left: 0; }

  .oms .hero__actions { gap: 1rem; }

  .oms .spec__page { min-height: 24rem; padding: 0.75rem; gap: 0.45rem; }

  .oms .spec__hero { padding-block: 0.75rem; }

  .oms .spec__media { height: 2.5rem; }

  .oms .spec__tokens,
.oms .spec__note { width: 7.5rem; }

}


/* --------------------------------------------------------- reduced motion -- */
/* The pinned sequence is scroll-linked rather than autoplaying, but anyone who
   has asked for less movement gets the whole thing as a plain list instead. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .oms *,
.oms *::before,
.oms *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .oms .reveal { opacity: 1; transform: none; }
  .js .oms .hero__backdrop img { opacity: 0.72; transform: scale(1.04); animation: none; }

  .js .oms .build__track { height: auto; padding-block: 4rem var(--oms-section-y); }

  .js .oms .build__pin { position: static; height: auto; padding-block: 0; overflow: visible; }

  .js .oms .stage__text p { max-height: none; opacity: 1; overflow: visible; margin-top: 0.45rem; }

  .js .oms .queue .queue__block,
.js .oms .queue .queue__gap { transform: scaleX(1); }

  .js .oms .scale .scale__fill { transform: scaleX(1); }

  .oms .spec__scan { display: none; }

  .oms .build__layer { transform: none !important; }
  .oms .build__layer-mask { opacity: 1; transform: none; filter: none; }
  .oms .build__sheen { display: none; }

}


/* ------------------------------------------------------------------ print -- */
@media print {
  .oms .masthead,
.oms .menu-toggle,
.oms .footer__nav,
.oms .spec { display: none; }

  .oms { background: #fff; color: #000; }

  .js .oms .reveal { opacity: 1; transform: none; }

  .js .oms .build__track { height: auto; }

  .js .oms .build__pin { position: static; height: auto; }

  .js .oms .stage__text p { max-height: none; opacity: 1; }

}


/* ==========================================================================
   WordPress integration
   ========================================================================== */

/* The wrapper is a div, so the page body needs the same ground behind it —
   otherwise the theme's background shows through above and below. */
body.oms-page {
  margin: 0;
  padding: 0;
  background: #F4F0E8;
}

/* The admin bar is fixed at the top for logged-in users; move the sticky
   masthead below it so the two do not overlap in the editor preview. */
body.admin-bar .oms .masthead { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .oms .masthead { top: 46px; }
}

/* Some themes constrain or pad the content area. The template bypasses
   get_header()/get_footer() entirely, but this keeps the wrapper honest if
   the template is ever nested inside theme markup. */
.oms { width: 100%; max-width: none; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   Armour against the parent theme.

   Scoping under .oms wins every specificity contest against a theme's own
   class rules (.oms .btn beats .btn). It does NOT protect against a theme
   styling bare elements, because inheritance always loses to a direct rule:
   a theme's `p { color: #900 }` beats a colour inherited from .oms, however
   specific .oms is.

   These resets restore the intended cascade. Every rule in this stylesheet
   carries at least one class beyond .oms, so all of them outrank this block.
   -------------------------------------------------------------------------- */
.oms h1, .oms h2, .oms h3, .oms h4, .oms h5, .oms h6,
.oms p, .oms ul, .oms ol, .oms li, .oms dl, .oms dt, .oms dd,
.oms a, .oms span, .oms i, .oms em, .oms strong,
.oms div, .oms figure, .oms figcaption,
.oms header, .oms footer, .oms nav, .oms section, .oms main, .oms article,
.oms form, .oms fieldset, .oms legend, .oms label,
.oms button, .oms input, .oms textarea, .oms select {
  color: inherit;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  float: none;
  max-width: none;
}

.oms ul, .oms ol { list-style: none; }
.oms button, .oms input, .oms textarea, .oms select { font-size: inherit; }
.oms img, .oms svg { max-width: 100%; height: auto; }