/* ============================================================
   FILAMENT LEGAL — Intellectual Property Counsel
   ------------------------------------------------------------
   Direction: understated luxury, concierge service.

   Typography follows how luxury houses actually set type: a
   neutral grotesk carries almost everything, and a Garamond
   italic appears only as an accent. Color is nearly absent.
   The one colour is the brand orange, measured off the logo,
   and it is spent on the mark, the filament, and the few
   places that need to read as active.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* paper */
  --bone:    #F7F5F0;
  --bone-2:  #F0ECE4;
  --bone-3:  #E3DDD1;   /* hairlines */
  --white:   #FDFCF9;

  /* dark */
  --noir:    #16150F;
  --noir-2:  #1E1C15;
  --noir-3:  #2A271E;

  /* ink */
  --ink:     #1B1A17;
  --ink-2:   #4A463E;
  --ink-3:   #7C766A;

  /* brand orange, measured off the logo artwork */
  --orange-deep:  #DE4A35;   /* left stop of the logo gradient   */
  --orange:       #F1753A;   /* centre stop                      */
  --orange-amber: #F59B3E;   /* right stop                       */

  /* surface-tuned accents. --accent carries enough weight to sit on bone
     at 5:1; --accent-lt is the brighter value for the dark sections. */
  --accent:     #BC4C1C;
  --accent-lt:  #F0913F;

  --filament:     #F1753A;
  --filament-hot: #F9B067;

  /* type */
  --sans:   "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:  "EB Garamond", "Adobe Garamond Pro", Garamond, Georgia, serif;
  --mono:   "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* rhythm */
  --gutter:  clamp(1.4rem, 5vw, 5rem);
  --measure: 1280px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;          /* 17px */
  font-weight: 400;
  line-height: 1.66;
  letter-spacing: .002em;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--ink); color: var(--bone); }

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

:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--ink); color: var(--bone);
  padding: .8rem 1.3rem;
  font: 500 .7rem/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  transition: top .2s var(--ease);
}
.skip:focus { top: .8rem; }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.1;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 4.3vw, 3.7rem); line-height: 1.06; }
h2 { font-size: clamp(1.75rem, 2.9vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.5vw, 1.32rem); letter-spacing: -.012em; line-height: 1.24; }
h4 { font-size: 1.05rem; letter-spacing: -.008em; }

p { text-wrap: pretty; }

/* the one serif on the site, used a few words at a time */
.accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--accent);
}

.lede {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.68;
  color: var(--ink-2);
  max-width: 58ch;
  font-weight: 400;
}
.lede--light { color: rgba(247, 245, 240, .68); }

.muted { color: var(--ink-3); }
.muted--light { color: rgba(247, 245, 240, .5); }

/* small tracked label, the only uppercase on the site */
.label {
  display: block;
  font-size: .68rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3);
}
.label--accent { color: var(--accent); }
.label--light { color: rgba(247, 245, 240, .5); }

/* ---------- 4. Layout ---------- */
.wrap {
  width: 100%; max-width: var(--measure);
  margin-inline: auto; padding-inline: var(--gutter);
}
.wrap--tight { max-width: 880px; }

.section { position: relative; padding-block: clamp(4.5rem, 8.5vw, 9rem); }
.section--slim { padding-block: clamp(3rem, 5vw, 5rem); }

.s-paper  { background: var(--bone); }
.s-paper2 { background: var(--bone-2); }
.s-dark   { background: var(--noir); color: var(--bone); }
.s-dark h1, .s-dark h2, .s-dark h3, .s-dark h4 { color: var(--bone); }

.s-head { max-width: 720px; margin-bottom: clamp(2.6rem, 4.5vw, 4.2rem); }
.s-head h2 + .lede { margin-top: 1.5rem; }
.s-head--center { margin-inline: auto; text-align: center; }
.s-head--center .lede { margin-inline: auto; }

.subhead {
  font-size: .7rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 1rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--bone-3);
}
.s-dark .subhead { color: rgba(247,245,240,.5); border-color: rgba(247,245,240,.14); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 50px;
  padding: 0 1.9rem;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease);
}
.btn svg { width: 13px; height: 13px; flex: none; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--solid { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: var(--bone); }

.btn--line { color: var(--ink); border-color: rgba(27, 26, 23, .3); }
.btn--line:hover { border-color: var(--ink); background: var(--ink); color: var(--bone); }

.btn--light { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn--light:hover { background: var(--accent); border-color: var(--accent); color: var(--bone); }

.btn--line-light { color: var(--bone); border-color: rgba(247, 245, 240, .32); }
.btn--line-light:hover { border-color: var(--bone); background: var(--bone); color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }

/* quiet text link */
.tlink {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--bone-3);
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.tlink:hover { color: var(--accent); border-color: var(--accent); }
.tlink svg { width: 12px; height: 12px; transition: transform .4s var(--ease); }
.tlink:hover svg { transform: translateX(4px); }
.tlink--light { color: var(--bone); border-color: rgba(247,245,240,.24); }
.tlink--light:hover { color: var(--accent-lt); border-color: var(--accent-lt); }

/* ---------- 6. Header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--noir) 94%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(247, 245, 240, .1);
  color: var(--bone);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: .9rem var(--gutter);
  max-width: var(--measure); margin-inline: auto;
}

.brand { display: flex; align-items: center; gap: 1.05rem; }
/* the traced mark is 166x246, so width follows height at 0.675 */
.brand-bulb { width: 38px; height: 56px; flex: none; }
.brand-name { display: flex; flex-direction: column; gap: .45rem; line-height: 1; }
.brand-name b {
  font-weight: 400; font-size: 1.55rem;
  letter-spacing: .012em;
  color: var(--bone);
  white-space: nowrap;
}
.brand-name span {
  font-size: .56rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--accent-lt);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .brand-bulb { width: 30px; height: 45px; }
  .brand-name b { font-size: 1.3rem; }
  .brand-name span { font-size: .5rem; letter-spacing: .26em; }
}

/* ---------- 6b. Nav with dropdowns ---------- */
.mainnav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.3rem); }
.navitem { position: relative; }

.navlink {
  position: relative;
  display: inline-flex; align-items: center; gap: .45rem;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247, 245, 240, .74);
  padding-block: .55rem;
  transition: color .35s var(--ease);
}
.navlink::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--accent-lt);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.navlink:hover, .navlink[aria-current="page"], .navitem.is-open > .navlink { color: var(--bone); }
.navlink:hover::after,
.navlink[aria-current="page"]::after,
.navitem.is-open > .navlink::after { transform: scaleX(1); }

.navlink .chev { width: 9px; height: 9px; opacity: .6; transition: transform .35s var(--ease); }
.navitem.is-open > .navlink .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + .7rem); left: -1.5rem;
  min-width: 250px;
  padding: 1.5rem 0;
  background: var(--noir-2);
  border: 1px solid rgba(247, 245, 240, .13);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index: 60;
}
.navitem.is-open > .dropdown { opacity: 1; visibility: visible; transform: none; }

.dropdown--wide {
  display: grid; grid-template-columns: repeat(3, minmax(198px, 1fr));
}
.dropcol { padding-inline: 1.6rem; }
.dropdown--wide .dropcol + .dropcol { border-left: 1px solid rgba(247, 245, 240, .1); }
.dropdown:not(.dropdown--wide) { padding-inline: 1.6rem; }

.drophead {
  display: block;
  font-size: .68rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-lt);
  padding-bottom: .85rem; margin-bottom: .85rem;
  border-bottom: 1px solid rgba(247, 245, 240, .12);
  transition: color .3s var(--ease);
}
.drophead:hover { color: var(--bone); }

.dropdown a:not(.drophead) {
  display: block; padding: .5rem 0;
  font-size: .92rem; line-height: 1.35;
  color: rgba(247, 245, 240, .66);
  transition: color .3s var(--ease);
}
.dropdown a:not(.drophead):hover { color: var(--bone); }

.topbar-cta { display: flex; align-items: center; gap: 1.2rem; }
.topbar-phone {
  display: inline-flex; align-items: center; gap: .6rem;
  white-space: nowrap;
  font-size: 1.02rem; font-weight: 500;
  letter-spacing: .01em;
  color: rgba(247, 245, 240, .88);
  transition: color .35s var(--ease);
}
.topbar-phone svg { width: 16px; height: 16px; color: var(--accent-lt); }
.topbar-phone:hover { color: var(--bone); }
.btn--nav { min-height: 42px; padding: 0 1.3rem; font-size: .66rem; }

.navtoggle {
  display: none; width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(247, 245, 240, .22);
}
.navtoggle span { display: block; position: relative; width: 17px; height: 1px; background: var(--bone); transition: background .2s; }
.navtoggle span::before, .navtoggle span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1px;
  background: var(--bone); transition: transform .3s var(--ease);
}
.navtoggle span::before { top: -5.5px; }
.navtoggle span::after  { top:  5.5px; }
body.nav-open .navtoggle span { background: transparent; }
body.nav-open .navtoggle span::before { transform: translateY(5.5px) rotate(45deg); }
body.nav-open .navtoggle span::after  { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1240px) { .topbar-phone { display: none; } }

@media (max-width: 1080px) {
  .navtoggle { display: flex; }
  .mainnav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--noir-2);
    border-bottom: 1px solid rgba(247, 245, 240, .14);
    padding: .5rem var(--gutter) 1.8rem;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    max-height: 78dvh; overflow-y: auto;
  }
  body.nav-open .mainnav { opacity: 1; transform: none; pointer-events: auto; }
  .navitem { width: 100%; }
  .navlink {
    width: 100%; justify-content: space-between;
    padding: 1.15rem 0; font-size: .78rem;
    border-bottom: 1px solid rgba(247, 245, 240, .09);
  }
  .navlink::after { display: none; }
  .navlink .chev { width: 12px; height: 12px; }
  .dropdown {
    position: static; min-width: 0; width: 100%;
    display: none; grid-template-columns: 1fr;
    opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0;
    padding: .5rem 0 1.1rem;
  }
  .navitem.is-open > .dropdown { display: block; }
  .dropdown--wide { display: none; }
  .navitem.is-open > .dropdown--wide { display: grid; }
  .dropcol { padding-inline: 0; }
  .dropdown--wide .dropcol + .dropcol { border-left: 0; margin-top: 1.2rem; }
  .dropdown:not(.dropdown--wide) { padding-inline: 0; }
  .drophead { padding-top: .8rem; }
  .dropdown a:not(.drophead) { padding: .6rem 0 .6rem 1rem; }
}
@media (max-width: 560px) { .btn--nav { display: none; } }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  background: var(--noir); color: var(--bone);
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 8rem);
}
/* a single soft light, no pattern behind it */
.hero::after {
  content: ""; position: absolute;
  right: 2%; top: 50%; transform: translateY(-50%);
  width: 54vw; height: 54vw; max-width: 680px; max-height: 680px;
  background: radial-gradient(circle,
    rgba(241, 117, 58, .20) 0%,
    rgba(241, 117, 58, .08) 34%,
    rgba(241, 117, 58, 0) 68%);
  pointer-events: none;
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}

.hero-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--measure); margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero h1 { margin-bottom: 1.8rem; }
.hero .lede { max-width: 50ch; }

/* One credential per row at every width. Spelled-out values plus their labels
   are too wide to sit two across without the labels wrapping. */
.hero-creds {
  display: grid;
  grid-template-columns: 1fr;
  gap: .95rem;
  margin-top: 3rem; padding-top: 2.2rem;
  border-top: 1px solid rgba(247, 245, 240, .14);
  max-width: 640px;
}
/* number and label share a line, sitting on a common baseline */
.hero-cred { display: flex; align-items: baseline; gap: .75rem; }
/* Spelled out, the values run from "Two" to "Seventeen", so the label column
   is held open by a fixed width sized to the longest word. In em, so it tracks
   the clamped font size. Words also carry more weight than figures, so the
   display size steps down from what the numerals used. */
.hero-cred b {
  flex: none;
  min-width: 5.2em;   /* "Seventeen", the longest value, measures 4.78em */
  font-weight: 400; font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  letter-spacing: -.015em;
  color: var(--bone);
}
.hero-cred span {
  font-size: .66rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247, 245, 240, .48);
  line-height: 1.55;
}

.hero-figure { position: relative; justify-self: center; width: 100%; max-width: 400px; }
.hero-figure svg { width: 100%; height: auto; overflow: visible; }
.figcap {
  margin-top: 1.6rem; text-align: center;
  font-family: var(--mono);
  font-size: .64rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(247, 245, 240, .34);
}

/* patent-drawing conventions */
.pd-line { fill: none; stroke: rgba(247,245,240,.42); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.pd-thin { fill: none; stroke: rgba(247,245,240,.2); stroke-width: .9; }
.pd-lead { fill: none; stroke: rgba(247,245,240,.26); stroke-width: .8; stroke-dasharray: 3 3; }
.pd-num  { font-family: var(--mono); font-size: 10px; fill: rgba(247,245,240,.5); letter-spacing: .06em; }
.pd-hot  { fill: none; stroke: var(--filament-hot); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
           filter: drop-shadow(0 0 5px rgba(249,176,103,.8)); }
.pd-hot.is-drawing {
  stroke-dasharray: 300; stroke-dashoffset: 300;
  animation: draw 2.2s var(--ease) .4s forwards, glow 4s ease-in-out 2.8s infinite;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(249,176,103,.75)); }
  50%      { filter: drop-shadow(0 0 11px rgba(249,176,103,1)); }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-figure { max-width: 280px; order: -1; margin-bottom: .5rem; }
  .hero::after { top: 18%; right: -25%; }
}

/* Below ~530px the paired buttons no longer fit on one line. Once they stack,
   matching their label widths looks accidental, so both take the full column
   instead. Applies to the homepage hero and to every interior page header
   (patents, trademarks, technologies), which use the same pairing. */
@media (max-width: 560px) {
  .hero .btn-row,
  .pagehead .btn-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem;
  }
  .hero .btn-row .btn,
  .pagehead .btn-row .btn { width: 100%; }
}

/* ---------- 8. Capability row (static, not a marquee) ---------- */
.caps {
  background: var(--noir-2);
  border-bottom: 1px solid rgba(247, 245, 240, .09);
  padding-block: 2.2rem;
  color: rgba(247, 245, 240, .58);
}
.caps-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 2.5rem;
}
@media (max-width: 900px) { .caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .caps-grid { grid-template-columns: 1fr; } }
.caps-grid li {
  font-size: .74rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- 9. Grids and cards ---------- */
.grid { display: grid; gap: clamp(1.25rem, 2vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* cards sit in a hairline lattice rather than floating as boxes */
.grid--ruled {
  gap: 0;
  border-top: 1px solid var(--bone-3);
  border-left: 1px solid var(--bone-3);
}
.grid--ruled > * {
  border-right: 1px solid var(--bone-3);
  border-bottom: 1px solid var(--bone-3);
}
.s-dark .grid--ruled { border-color: rgba(247,245,240,.13); }
.s-dark .grid--ruled > * { border-color: rgba(247,245,240,.13); }

.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.8rem, 2.6vw, 2.6rem);
  background: transparent;
  transition: background-color .5s var(--ease);
}
.card:hover { background: var(--white); }
.s-dark .card:hover, .card--dark:hover { background: var(--noir-2); }

.card-num.card-num {
  font-family: var(--mono);
  font-size: .68rem; font-weight: 400;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: 1.4rem;
}
.card h3 { margin-bottom: .85rem; }
.card p { color: var(--ink-2); font-size: .96rem; }
.card p a { color: var(--ink); border-bottom: 1px solid var(--accent); }
.card p a:hover { color: var(--accent); }
.s-dark .card p { color: rgba(247, 245, 240, .64); }
.card .tlink { margin-top: auto; align-self: flex-start; }
.card .tlink:not(:first-child) { margin-top: 1.8rem; }

/* a whole card that is itself a link */
a.card { color: inherit; }
a.card:hover .tlink { color: var(--accent); border-color: var(--accent); }
a.card:hover .tlink svg { transform: translateX(4px); }

/* boxed variant for sidebars */
.panel {
  padding: clamp(1.8rem, 2.6vw, 2.4rem);
  background: var(--white);
  border: 1px solid var(--bone-3);
}
.panel h3 { margin-bottom: 1.2rem; }
.panel footer {
  font-size: .66rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}
.s-dark .panel { background: var(--noir-2); border-color: rgba(247,245,240,.13); }

/* the credential panel on the dark side of a light section */
.panel--dark {
  background: var(--noir); border-color: var(--noir-3); color: var(--bone);
}
.panel--dark h3 { color: var(--bone); }
.portrait { margin: 0 0 1.8rem; }
.portrait img { display: block; width: 100%; max-width: 260px; height: auto; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.portrait figcaption { margin-top: .7rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .05em; color: var(--ink-3); }
.panel--dark .portrait figcaption { color: rgba(247, 245, 240, .45); }
.panel--dark .ticks li { color: rgba(247, 245, 240, .74); }
.panel--dark footer { color: var(--accent-lt); }

.ticks { display: grid; gap: .8rem; }
.ticks li {
  position: relative; padding-left: 1.4rem;
  font-size: .94rem; color: var(--ink-2); line-height: 1.55;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 5px; background: var(--accent);
}
.s-dark .ticks li { color: rgba(247, 245, 240, .68); }

/* ---------- 10. Split ---------- */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- 11. Process ladder ---------- */
.ladder { display: grid; }
.step {
  display: grid; grid-template-columns: 80px minmax(0, 1fr) 190px;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  padding-block: clamp(1.8rem, 2.8vw, 2.4rem);
  border-top: 1px solid var(--bone-3);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--bone-3); }
.s-dark .step { border-color: rgba(247,245,240,.13); }
.step-n {
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .14em;
  color: var(--accent);
  padding-top: .35rem;
}
.step h3 { margin-bottom: .7rem; }
.step p { color: var(--ink-2); max-width: 58ch; font-size: .97rem; }
.s-dark .step p { color: rgba(247,245,240,.64); }
.step-meta.step-meta {
  font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  padding-top: .4rem;
}
.s-dark .step-meta.step-meta { color: var(--accent-lt); }
@media (max-width: 860px) {
  .step { grid-template-columns: 60px minmax(0, 1fr); }
  .step-meta { grid-column: 2; padding-top: .8rem; }
}
@media (max-width: 520px) {
  .step { grid-template-columns: 1fr; gap: .6rem; }
  .step-meta { grid-column: 1; }
}

/* ---------- 12. People ---------- */
.person {
  display: grid; grid-template-columns: 140px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.8rem);
  align-items: start;
  padding: clamp(1.8rem, 2.8vw, 2.6rem);
  background: var(--white);
  border: 1px solid var(--bone-3);
}
.person-plate {
  position: relative; aspect-ratio: 3 / 4;
  display: grid; place-items: center;
  background: var(--noir);
  overflow: hidden;
}
.person-plate::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 34%, rgba(241,117,58,.22), transparent 62%);
}
.person-plate b {
  position: relative; z-index: 1;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 2.6rem; letter-spacing: .02em;
  color: var(--accent-lt);
}
/* a real headshot covers the initials plate and its glow */
.person-plate img {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
}
.person-name { margin-bottom: .5rem; }
.person-role.person-role {
  font-size: .68rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.3rem;
}
.person p { color: var(--ink-2); font-size: .97rem; }

.person-facts {
  display: grid; gap: .7rem;
  margin-top: 1.7rem; padding-top: 1.5rem;
  border-top: 1px solid var(--bone-3);
}
.person-facts div {
  display: grid; grid-template-columns: 128px minmax(0, 1fr);
  gap: 1rem; align-items: baseline;
  font-size: .9rem;
}
.person-facts dt {
  font-size: .62rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); line-height: 1.6;
}
.person-facts dd { color: var(--ink-2); }
@media (max-width: 620px) {
  .person { grid-template-columns: 1fr; }
  .person-plate { width: 104px; }
  .person-facts div { grid-template-columns: 1fr; gap: .15rem; }
}

/* ---------- 13. FAQ ---------- */
.faq { border-top: 1px solid var(--bone-3); }
.s-dark .faq, .s-dark .faq-item { border-color: rgba(247,245,240,.13); }
.faq-item { border-bottom: 1px solid var(--bone-3); }
.faq-q {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 2rem; width: 100%;
  padding: 1.7rem 0;
  text-align: left;
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  letter-spacing: -.012em; line-height: 1.35;
  color: var(--ink);
  transition: color .35s var(--ease);
}
.s-dark .faq-q { color: var(--bone); }
.faq-q:hover { color: var(--accent); }
.faq-sign { position: relative; flex: none; width: 18px; height: 18px; margin-top: .3rem; }
.faq-sign::before, .faq-sign::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--accent); transform: translate(-50%, -50%);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.faq-sign::before { width: 13px; height: 1px; }
.faq-sign::after  { width: 1px; height: 13px; }
.faq-q[aria-expanded="true"] .faq-sign::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }

.js .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.js .faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }
.js .faq-a > div { overflow: hidden; }
.faq-a p { color: var(--ink-2); max-width: 70ch; padding-bottom: 1.8rem; font-size: 1rem; }
.s-dark .faq-a p { color: rgba(247,245,240,.66); }
.faq-a p + p { padding-top: 1rem; }

/* ---------- 13b. Question and answer ----------
   The FAQ page keeps every answer open and every question in a heading.
   Retrieval systems quote a passage, and a passage they cannot see
   because it sits behind a click is a passage they will not quote. */
.qa { border-top: 1px solid var(--bone-3); padding-block: clamp(1.8rem, 2.6vw, 2.4rem); }
.qa:last-child { border-bottom: 1px solid var(--bone-3); }
.qa h2 {
  font-size: clamp(1.12rem, 1.55vw, 1.35rem);
  letter-spacing: -.012em; line-height: 1.32;
  margin-bottom: 1rem;
}
.qa p { color: var(--ink-2); max-width: 72ch; font-size: 1rem; line-height: 1.72; }
.qa p + p { margin-top: 1rem; }
.qa ul { display: grid; gap: .6rem; margin-top: 1rem; }
.qa ul li { position: relative; padding-left: 1.4rem; color: var(--ink-2); line-height: 1.6; }
.qa ul li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 5px; background: var(--accent);
}

/* ---------- 13c. Technology tag list ----------
   A quiet index of capability terms. Hairline separators rather than pills,
   so it reads as a list of facts and not as a row of buttons. */
.tags { display: flex; flex-wrap: wrap; gap: 0; }
.tags li {
  font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247, 245, 240, .66);
  padding: .55rem 1.15rem;
  border: 1px solid rgba(247, 245, 240, .14);
  margin: -1px 0 0 -1px;
}
.s-paper .tags li, .s-paper2 .tags li {
  color: var(--ink-2);
  border-color: var(--bone-3);
}

/* a technology family: heading, framing paragraph, then the specific work */
.tech { border-top: 1px solid var(--bone-3); padding-block: clamp(2.4rem, 4vw, 3.6rem); }
.tech:last-of-type { border-bottom: 1px solid var(--bone-3); }
.tech-head { max-width: 60ch; margin-bottom: 2.2rem; }
.tech-head h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); margin-bottom: 1rem; }
.tech-head p { color: var(--ink-2); }
.tech-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 760px) { .tech-grid { grid-template-columns: 1fr; } }
.tech-item h3 {
  font-size: 1.02rem; margin-bottom: .5rem;
  color: var(--ink);
}
.tech-item p { font-size: .93rem; color: var(--ink-2); line-height: 1.6; }

/* ---------- 14. Lifecycle ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .62rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
}
.pill::before { content: ""; width: 5px; height: 5px; background: currentColor; }
.pill--filed   { color: #8A7A5C; }
.pill--pending { color: #BC4C1C; }
.pill--opposed { color: #9A5236; }
.pill--live    { color: #4C7355; }
.pill--renewal { color: #7C766A; }

.lifecycle {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--bone-3);
  border-left: 1px solid var(--bone-3);
}
@media (max-width: 900px) { .lifecycle { grid-template-columns: 1fr; } }
.lifecycle > div {
  padding: 1.7rem 1.5rem;
  border-right: 1px solid var(--bone-3);
  border-bottom: 1px solid var(--bone-3);
}
.lifecycle h4 { margin-block: 1rem .6rem; }
.lifecycle p { font-size: .9rem; color: var(--ink-2); line-height: 1.6; }

/* ---------- 15. CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--noir); color: var(--bone);
  padding-block: clamp(4.5rem, 7.5vw, 7.5rem);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 105% at 50% 120%, rgba(241,117,58,.22), transparent 62%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 1.5rem; }
.cta-band .lede { margin-inline: auto; }

/* auto-fit so the band stays balanced whatever number of rows it holds */
.contact-rows {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 3.5rem;
  border-top: 1px solid rgba(247, 245, 240, .14);
  text-align: left;
}
@media (max-width: 720px) { .contact-rows { grid-template-columns: 1fr; } }
.contact-row {
  padding: 1.7rem 1.6rem 1.7rem 0;
  border-bottom: 1px solid rgba(247, 245, 240, .14);
}
.contact-row + .contact-row { padding-left: 1.6rem; border-left: 1px solid rgba(247,245,240,.14); }
@media (max-width: 720px) { .contact-row + .contact-row { padding-left: 0; border-left: 0; } }
.contact-row .label { margin-bottom: .8rem; color: var(--accent-lt); }
.contact-row a, .contact-row span:not(.label) {
  font-size: .98rem; color: var(--bone); word-break: break-word;
}
.contact-row a:hover { color: var(--accent-lt); }

/* ---------- 16. Forms ---------- */
.form { display: grid; gap: 1.4rem; }
.field { display: grid; gap: .6rem; }
.field label {
  font-size: .64rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
}
.field input, .field textarea, .field select {
  width: 100%; padding: .95rem 1.1rem;
  font: 400 .98rem/1.5 var(--sans);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--bone-3);
  border-radius: 0;
  transition: border-color .35s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: .84rem; color: var(--ink-3); line-height: 1.6; }

/* ---------- 17. Notice ---------- */
.notice {
  padding: 1.5rem 1.7rem;
  background: var(--bone-2);
  border: 1px solid var(--bone-3);
  font-size: .94rem; line-height: 1.65;
  color: var(--ink-2);
}
.notice strong { color: var(--ink); font-weight: 500; }

.pull {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.36; letter-spacing: 0;
  color: var(--ink);
  max-width: 26ch;
}

/* ---------- 18. Page header ---------- */
.pagehead {
  position: relative; overflow: hidden;
  background: var(--noir); color: var(--bone);
  padding-block: clamp(3.5rem, 6vw, 6rem) clamp(3rem, 5vw, 5rem);
}
.pagehead::after {
  content: ""; position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
  width: 42vw; height: 42vw; max-width: 480px; max-height: 480px;
  background: radial-gradient(circle, rgba(241,117,58,.16), transparent 66%);
  pointer-events: none;
}
.pagehead > * { position: relative; z-index: 1; }
.pagehead h1 { margin-block: 1.6rem 1.6rem; }
.pagehead .lede { max-width: 60ch; }

.crumbs {
  display: flex; align-items: center; gap: .6rem;
  font-size: .66rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(247, 245, 240, .42);
}
.crumbs a:hover { color: var(--accent-lt); }


/* ---------- 18b. Page header with artwork ----------
   The art carries its own darkness on the left, so the overlay only has to
   guarantee the copy column rather than flatten the whole image. */
.pagehead--art {
  background-image: var(--art);
  background-size: cover;
  background-position: 74% center;
  min-height: 460px;
  display: flex; align-items: center;
}
.pagehead--art > .wrap { width: 100%; }
/* Only the copy column needs protecting. Past it the art runs almost clear. */
.pagehead--art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(95deg,
    rgba(22,21,15,.97) 0%,
    rgba(22,21,15,.92) 30%,
    rgba(22,21,15,.62) 46%,
    rgba(22,21,15,.14) 64%,
    rgba(22,21,15,0) 100%);
}
/* the ambient orange glow would double up on the artwork */
.pagehead--art::after { display: none; }

/* Credit for the drawing. The artwork is built from real expired US patents,
   so the sheet it came from is worth naming. Beats .pagehead > * on
   specificity, which would otherwise force it back to static flow. */
.pagehead--art > .art-credit {
  position: absolute; z-index: 2;
  right: clamp(1rem, 4vw, 2.6rem); bottom: .9rem; margin: 0;
  max-width: min(52ch, 56%); text-align: right;
  font-family: var(--mono); font-size: .64rem; line-height: 1.5;
  letter-spacing: .05em; color: rgba(247, 245, 240, .40);
}
.pagehead--art > .art-credit em { font-style: italic; color: rgba(247, 245, 240, .52); }

@media (max-width: 860px) {
  /* The band goes tall and narrow here, so `cover` shows only a slim vertical
     slice. Framing at 62% lands on empty field and crops the lit figure out
     entirely; every layout puts it around 0.77-0.85 across. */
  .pagehead--art { min-height: 0; background-position: 82% center; background-size: cover; }
  .pagehead--art::before {
    background: linear-gradient(180deg, rgba(22,21,15,.62) 0%, rgba(22,21,15,.80) 45%, rgba(22,21,15,.93) 100%);
  }
  /* No room to float it over the art once the copy fills the band. The
     pagehead is a flex row, so returning it to flow is not enough -- without
     wrapping it stays a flex sibling of .wrap and gets squeezed to whatever
     width is left over. */
  .pagehead--art { flex-wrap: wrap; }
  .pagehead--art > .art-credit {
    position: static; flex: 0 0 100%;
    text-align: left; max-width: var(--measure);
    margin: 1.8rem auto 0; padding-inline: var(--gutter);
  }
}

/* ---------- 19. Prose ---------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.4rem; }
.prose h2 { margin-top: 3.4rem; }
.prose h3 { margin-top: 2.4rem; }
.prose p { color: var(--ink-2); font-size: 1.04rem; line-height: 1.75; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose ul { display: grid; gap: .8rem; }
.prose ul li { position: relative; padding-left: 1.5rem; color: var(--ink-2); line-height: 1.7; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 5px; height: 5px; background: var(--accent);
}
.prose a:not(.btn):not(.tlink) { color: var(--ink); border-bottom: 1px solid var(--accent); }
.prose a:not(.btn):not(.tlink):hover { color: var(--accent); }

/* ---------- 20. Footer ---------- */
.footer {
  background: var(--noir);
  color: rgba(247, 245, 240, .58);
  padding-block: clamp(4rem, 6vw, 5.5rem) 2rem;
  border-top: 1px solid rgba(247, 245, 240, .1);
}
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3.2rem;
  border-bottom: 1px solid rgba(247, 245, 240, .1);
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer .brand { margin-bottom: 1.4rem; }
.footer-tag {
  font-family: var(--serif); font-style: italic;
  font-size: 1.15rem; color: var(--accent-lt);
  margin-bottom: 1.2rem;
}
.footer-blurb { font-size: .91rem; line-height: 1.7; max-width: 36ch; }

.footer-col h4 {
  font-size: .64rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-lt);
  margin-bottom: 1.4rem;
}
.footer-col ul { display: grid; gap: .8rem; }
.footer-col a { font-size: .92rem; transition: color .3s var(--ease); }
.footer-col a:hover { color: var(--bone); }

.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.2rem;
  padding-top: 2.2rem;
  font-size: .78rem;
}
.footer-legal { max-width: 70ch; line-height: 1.7; color: rgba(247, 245, 240, .4); }
.footer-credit { flex-basis: 100%; color: rgba(247, 245, 240, .4); }
.footer-credit a { color: rgba(247, 245, 240, .6); transition: color .3s var(--ease); }
.footer-credit a:hover { color: var(--bone); }
.footer-social { display: flex; gap: .8rem; }
.footer-social a {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid rgba(247, 245, 240, .18);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.footer-social a:hover { border-color: var(--accent-lt); color: var(--accent-lt); }
.footer-social svg { width: 15px; height: 15px; }


/* ---------- accent on dark grounds ----------
   --accent is tuned for bone (4.6:1) and is too dark on noir (3.6:1), so every
   dark context swaps in --accent-lt, which reaches 7.7:1 on the same ground. */
.s-dark .accent, .hero .accent, .pagehead .accent, .cta-band .accent,
.panel--dark .accent { color: var(--accent-lt); }

.s-dark .card-num.card-num, .panel--dark .card-num.card-num { color: var(--accent-lt); }
.s-dark .person-role.person-role { color: var(--accent-lt); }
.s-dark .faq-q:hover { color: var(--accent-lt); }
.s-dark .faq-sign::before, .s-dark .faq-sign::after { background: var(--accent-lt); }
.s-dark .ticks li::before, .panel--dark .ticks li::before { background: var(--accent-lt); }
.s-dark .tlink:hover { color: var(--accent-lt); border-color: var(--accent-lt); }
.s-dark .subhead { color: rgba(247,245,240,.5); }
.hero :focus-visible, .s-dark :focus-visible,
.pagehead :focus-visible, .cta-band :focus-visible,
.footer :focus-visible { outline-color: var(--accent-lt); }

/* ---------- 20c. Video ----------
   The watch page keeps its header compact so the player lands in the first
   screen: Google only treats a page as a video's watch page when the video is
   the main thing on it. */
.pagehead--watch { padding-block: clamp(1.8rem, 3vw, 2.8rem) clamp(3rem, 5vw, 4.5rem); }
.pagehead--watch h1 { margin-block: 1rem 1.6rem; font-size: clamp(1.9rem, 3.4vw, 3rem); }
.pagehead--watch .lede { margin-top: 2rem; }

.watch { margin: 0; }
.watch-frame {
  aspect-ratio: 1280 / 624;
  background: var(--noir-2);
  border: 1px solid rgba(247, 245, 240, .13);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7);
}
.watch-frame video { display: block; width: 100%; height: 100%; scroll-margin-top: 110px; }
.watch-meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
  margin-top: 1rem;
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(247, 245, 240, .5);
}
.watch-meta span:first-child { color: var(--accent-lt); }
.watch-meta a { color: var(--accent-lt); }
.watch-meta a:hover { color: var(--bone); }

.watch-body {
  display: grid; grid-template-columns: 270px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5.5rem); align-items: start;
}
.watch-chapters { position: sticky; top: 7rem; }
.watch-label.watch-label {
  font-family: var(--sans); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.2rem;
}
.watch-chapters ol { border-top: 1px solid var(--bone-3); }
.watch-chapters a {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr);
  padding: .75rem 0 .75rem .9rem;
  border-bottom: 1px solid var(--bone-3);
  border-left: 2px solid transparent;
  font-size: .92rem; color: var(--ink-2);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.watch-chapters time { font-family: var(--mono); font-size: .74rem; color: var(--accent); padding-top: .15rem; }
.watch-chapters a:hover { color: var(--ink); }
.watch-chapters a.is-current { color: var(--ink); border-left-color: var(--accent); }
@media (max-width: 900px) {
  .watch-body { grid-template-columns: 1fr; }
  .watch-chapters { position: static; }
}
.prose.transcript a.ts {
  font-family: var(--mono); font-size: .74rem; font-weight: 400;
  color: var(--accent); border-bottom: 0;
  margin-right: .7rem; vertical-align: .15em;
}
.prose.transcript a.ts:hover { color: var(--ink); }

/* the same video, embedded beside related content on a service page */
.watch--inline { margin-bottom: clamp(2.6rem, 4.5vw, 4.2rem); }

/* ---------- 21. Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .1s; }
.reveal[data-d="2"] { transition-delay: .2s; }
.reveal[data-d="3"] { transition-delay: .3s; }
.reveal[data-d="4"] { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero::after, .pd-hot.is-drawing { animation: none !important; }
  .pd-hot.is-drawing { stroke-dashoffset: 0; }
  * { transition-duration: .01ms !important; }
}