@layer reset, base, layout, components, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
  ul, ol { padding: 0; }
  img, picture { display: block; max-width: 100%; }
  button, input, select, textarea { color: inherit; font: inherit; }
  button, select, summary { cursor: pointer; }
  a { color: inherit; text-decoration: none; }
}

@layer base {
  :root {
    color-scheme: dark;
    --ink: #19130f;
    --ink-soft: #2b2119;
    --bark: #3b281c;
    --walnut: #68452e;
    --clay: #a8764d;
    --sand: #cda981;
    --paper: #f1e6d4;
    --paper-soft: #dfd0bb;
    --moss: #65705a;
    --line: color-mix(in srgb, var(--paper) 18%, transparent);
    --container: min(92vw, 84rem);
    --section-space: clamp(5rem, 10vw, 10rem);
    --display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --body: Inter, "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
    --shadow: 0 2.5rem 6rem rgb(0 0 0 / .22);
    --radius: 1.75rem;
  }
  ::selection { color: var(--ink); background: var(--sand); }
  body {
    min-width: 20rem; min-height: 100vh; overflow-x: clip; color: var(--paper);
    background: radial-gradient(circle at 15% 8%, rgb(104 69 46 / .22), transparent 26rem), var(--ink);
    font-family: var(--body); font-size: clamp(1rem, .96rem + .18vw, 1.1rem); line-height: 1.65;
    text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  }
  body::before {
    position: fixed; z-index: -1; inset: 0; background: url("/assets/grain.svg") 0 0 / 360px;
    content: ""; opacity: .16; pointer-events: none;
  }
  h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: .98; text-wrap: balance; }
  h1 { font-size: clamp(4rem, 11vw, 10.5rem); letter-spacing: -.065em; }
  h2 { font-size: clamp(3rem, 7.2vw, 7.25rem); letter-spacing: -.055em; }
  h3 { font-size: clamp(1.7rem, 3vw, 3rem); letter-spacing: -.035em; }
  p { max-width: 68ch; }
  :focus-visible { border-radius: .2rem; outline: .2rem solid #f8c78e; outline-offset: .3rem; }
  main { overflow: clip; }
}

@layer layout {
  .container { width: var(--container); margin-inline: auto; }
  .section { position: relative; padding-block: var(--section-space); }
  .section--paper { color: var(--ink); background: var(--paper); }
  .section--soft { color: var(--ink); background: var(--paper-soft); }
  .section-heading {
    display: grid; grid-template-columns: minmax(0, .72fr) minmax(16rem, .28fr);
    align-items: end; gap: 2rem; margin-bottom: clamp(3rem, 6vw, 6rem);
  }
  .section-heading > p { justify-self: end; max-width: 30rem; }
  .eyebrow {
    display: flex; align-items: center; gap: .65rem; margin-bottom: 1.1rem;
    font-size: .75rem; font-weight: 750; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase;
  }
  .eyebrow::before { width: 1.8rem; height: 1px; background: currentColor; content: ""; opacity: .55; }
  .prose { display: grid; gap: 1.1rem; }
  .prose--large { font-family: var(--display); font-size: clamp(1.5rem, 2.5vw, 2.6rem); line-height: 1.24; }
  .grid { display: grid; gap: clamp(1rem, 2vw, 2rem); }
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@layer components {
  .skip-link { position: fixed; z-index: 1000; top: .75rem; left: .75rem; padding: .75rem 1rem; color: var(--ink); background: var(--paper); translate: 0 -180%; }
  .skip-link:focus { translate: 0; }
  .site-header { position: absolute; z-index: 20; top: 0; left: 0; width: 100%; padding-block: 1rem; }
  .site-header__inner { display: grid; grid-template-columns: 14rem 1fr auto; align-items: center; gap: 2rem; }
  .brand {
    display: inline-flex; align-items: center; width: fit-content; min-height: 3.75rem; padding: .55rem .8rem;
    border: 1px solid rgb(241 230 212 / .25); border-radius: .6rem; background: rgb(241 230 212 / .93);
    box-shadow: 0 .8rem 2rem rgb(0 0 0 / .16);
  }
  .brand img { width: 9.875rem; height: auto; }
  .site-nav { justify-self: center; }
  .site-nav ul { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); list-style: none; }
  .site-nav a {
    position: relative; padding-block: .7rem; font-size: .78rem; font-weight: 720;
    letter-spacing: .11em; text-transform: uppercase;
  }
  .site-nav a::after {
    position: absolute; bottom: .4rem; left: 0; width: 100%; height: 1px; background: currentColor;
    content: ""; scale: 0 1; transform-origin: right; transition: scale 240ms ease;
  }
  .site-nav a:hover::after, .site-nav a[aria-current="page"]::after { scale: 1; transform-origin: left; }
  .header-action, .button {
    display: inline-flex; align-items: center; justify-content: center; border: 1px solid currentColor;
    border-radius: 100vmax; font-size: .76rem; font-weight: 780; letter-spacing: .09em;
    text-transform: uppercase; transition: color 180ms ease, background 180ms ease, translate 180ms ease;
  }
  .header-action { min-height: 3rem; padding: .6rem 1rem; border-color: var(--line); }
  .header-action:hover { color: var(--ink); background: var(--paper); }
  .button { min-height: 3.5rem; padding: .8rem 1.25rem; }
  .button:hover { translate: 0 -.16rem; }
  .button--solid { border-color: var(--paper); color: var(--ink); background: var(--paper); }
  .button--solid:hover { background: var(--sand); }
  .button--dark { border-color: var(--ink); color: var(--paper); background: var(--ink); }
  .button--ghost { color: inherit; background: transparent; }
  .button-row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
  .menu-button {
    display: none; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem;
    padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--paper); background: rgb(25 19 15 / .7);
  }
  .menu-button span, .menu-button::before, .menu-button::after { width: 1.1rem; height: 1px; background: currentColor; content: ""; transition: rotate 180ms ease, translate 180ms ease, opacity 180ms ease; }
  .menu-button span { margin-inline: -1.1rem; }
  .menu-button::before { translate: 0 -.3rem; } .menu-button::after { translate: 0 .3rem; }
  .menu-button[aria-expanded="true"] span { opacity: 0; }
  .menu-button[aria-expanded="true"]::before { rotate: 45deg; translate: 0; }
  .menu-button[aria-expanded="true"]::after { rotate: -45deg; translate: 0; }

  .hero {
    position: relative; display: grid; min-height: 100svh; align-items: end; isolation: isolate;
    padding-block: 9rem clamp(3rem, 6vw, 5.5rem); background: #1e1712;
  }
  .hero::after {
    position: absolute; z-index: -1; inset: 0;
    background: linear-gradient(180deg, rgb(15 11 8 / .5), transparent 42%), linear-gradient(90deg, rgb(15 11 8 / .88), rgb(15 11 8 / .35) 53%, rgb(15 11 8 / .62)), linear-gradient(0deg, rgb(15 11 8 / .82), transparent 52%);
    content: "";
  }
  .hero__media { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero__content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 24rem); align-items: end; gap: 3rem; }
  .hero h1 { max-width: 8.5ch; }
  .hero h1 span { display: block; color: var(--sand); font-style: italic; text-indent: .7em; }
  .hero__aside { display: grid; gap: 2rem; padding-bottom: .5rem; }
  .hero__aside p { font-size: clamp(1rem, 1.3vw, 1.22rem); }
  .hero__meta { display: flex; flex-wrap: wrap; gap: .65rem; list-style: none; }
  .hero__meta li { padding: .48rem .75rem; border: 1px solid var(--line); border-radius: 100vmax; font-size: .68rem; font-weight: 730; letter-spacing: .08em; text-transform: uppercase; }
  .ticker { overflow: hidden; padding-block: 1rem; border-block: 1px solid var(--line); color: var(--paper-soft); background: var(--ink-soft); }
  .ticker__track { display: flex; width: max-content; animation: ticker 36s linear infinite; }
  .ticker__group { display: flex; align-items: center; gap: 1.2rem; padding-right: 1.2rem; list-style: none; }
  .ticker__group li { display: flex; align-items: center; gap: 1.2rem; font-family: var(--display); font-size: clamp(1.1rem, 2vw, 1.55rem); white-space: nowrap; }
  .ticker__group li::after { color: var(--clay); content: "✦"; font-size: .65em; }

  .intro-statement { display: grid; grid-template-columns: .32fr .68fr; gap: 3rem; align-items: start; }
  .intro-statement blockquote { max-width: 15ch; font-family: var(--display); font-size: clamp(2.4rem, 5.6vw, 5.8rem); letter-spacing: -.045em; line-height: 1.03; }
  .intro-statement blockquote em { color: var(--clay); font-weight: 400; }
  .intro-statement__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; padding-top: 1rem; }
  .fact { padding-top: 1.2rem; border-top: 1px solid currentColor; }
  .fact strong { display: block; margin-bottom: .35rem; font-family: var(--display); font-size: clamp(2.2rem, 5vw, 5rem); font-weight: 500; line-height: 1; }

  .material-lab {
    display: grid; grid-template-columns: minmax(16rem, .32fr) minmax(0, .68fr); min-height: 44rem;
    overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-soft); box-shadow: var(--shadow);
  }
  .material-tabs { display: grid; align-content: center; padding: clamp(1rem, 3vw, 3rem); border-right: 1px solid var(--line); }
  .material-tabs button {
    display: grid; grid-template-columns: 2rem 1fr; gap: .8rem; align-items: baseline; width: 100%;
    padding: 1.1rem 0; border: 0; border-bottom: 1px solid var(--line); color: var(--paper-soft);
    background: transparent; text-align: left; opacity: .5; transition: opacity 180ms ease, padding-left 180ms ease;
  }
  .material-tabs button:first-child { border-top: 1px solid var(--line); }
  .material-tabs button:hover, .material-tabs button[aria-selected="true"] { padding-left: .65rem; opacity: 1; }
  .material-tabs button span:first-child { font-size: .68rem; font-weight: 750; letter-spacing: .12em; }
  .material-tabs button span:last-child { font-family: var(--display); font-size: clamp(1.25rem, 2.4vw, 2rem); }
  .material-stage { position: relative; display: grid; min-height: 44rem; align-items: end; isolation: isolate; overflow: hidden; }
  .material-stage::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgb(15 11 8 / .94), transparent 70%); content: ""; }
  .material-stage img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 900ms cubic-bezier(.2,.7,.2,1); }
  .material-stage:hover img { scale: 1.035; }
  .material-stage__copy { display: grid; grid-template-columns: 1fr minmax(14rem, 22rem); gap: 2rem; align-items: end; padding: clamp(1.5rem, 5vw, 4.5rem); }
  .material-stage__copy h3 { max-width: 9ch; font-size: clamp(3rem, 6vw, 6rem); }
  .material-stage__copy aside { display: grid; gap: 1rem; }
  .arrow-link { display: inline-flex; align-items: center; gap: .6rem; width: fit-content; padding-bottom: .25rem; border-bottom: 1px solid; font-size: .78rem; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }
  .arrow-link::after { content: "↗"; transition: translate 180ms ease; } .arrow-link:hover::after { translate: .2rem -.2rem; }

  .assistant { display: grid; grid-template-columns: minmax(0, .48fr) minmax(0, .52fr); overflow: hidden; border-radius: var(--radius); background: var(--bark); box-shadow: var(--shadow); }
  .assistant__intro, .assistant__panel { padding: clamp(2rem, 5vw, 5rem); }
  .assistant__intro { position: relative; display: grid; align-content: space-between; min-height: 42rem; background: radial-gradient(circle at 20% 80%, rgb(205 169 129 / .25), transparent 18rem), var(--bark); }
  .assistant__intro h2 { max-width: 7ch; }
  .assistant__panel { color: var(--ink); background: var(--paper); }
  .assistant-form { display: grid; gap: 1.5rem; }
  .field { display: grid; gap: .55rem; }
  .field label { font-size: .72rem; font-weight: 780; letter-spacing: .11em; text-transform: uppercase; }
  .field input, .field select, .field textarea { width: 100%; min-height: 3.65rem; padding: .8rem 0; border: 0; border-bottom: 1px solid rgb(25 19 15 / .4); border-radius: 0; color: var(--ink); background: transparent; }
  .field textarea { min-height: 7rem; resize: vertical; }
  .field small { color: rgb(25 19 15 / .67); }
  .assistant-result { display: grid; gap: 1.25rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgb(25 19 15 / .3); outline: none; }
  .recommendation-list { display: grid; list-style: none; }
  .recommendation-list li { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding-block: .85rem; border-bottom: 1px solid rgb(25 19 15 / .2); }
  .recommendation-list span { font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
  .recommendation-list a { font-family: var(--display); font-size: 1.35rem; }
  .text-button { padding: .65rem; border: 0; border-bottom: 1px solid; color: inherit; background: transparent; font-size: .76rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }

  .application-map { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
  .application-card {
    position: relative; display: grid; min-height: 24rem; align-content: space-between; overflow: hidden;
    padding: 1.5rem; border: 1px solid rgb(25 19 15 / .18); border-radius: 1.2rem;
    background: rgb(255 255 255 / .16); transition: translate 220ms ease, background 220ms ease;
  }
  .application-card:nth-child(1), .application-card:nth-child(4) { grid-column: span 5; }
  .application-card:nth-child(2), .application-card:nth-child(3) { grid-column: span 7; }
  .application-card:hover { z-index: 1; background: rgb(255 255 255 / .36); translate: 0 -.35rem; }
  .application-card__number { display: flex; justify-content: space-between; font-size: .72rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
  .application-card h3 { max-width: 8ch; margin-bottom: 1rem; font-size: clamp(2rem, 4vw, 4rem); }
  .application-card ul { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; }
  .application-card li { padding: .35rem .6rem; border: 1px solid rgb(25 19 15 / .25); border-radius: 100vmax; font-size: .68rem; font-weight: 700; text-transform: uppercase; }

  .story { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
  .story__year { position: sticky; top: 2rem; font-family: var(--display); font-size: clamp(7rem, 19vw, 18rem); letter-spacing: -.09em; line-height: .75; }
  .story__copy { display: grid; gap: 3rem; padding-top: 2rem; }
  .timeline { display: grid; list-style: none; }
  .timeline li { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding-block: 1.25rem; border-top: 1px solid var(--line); }
  .timeline time { color: var(--sand); font-weight: 760; }
  .guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
  .guide-card { display: grid; min-height: 29rem; align-content: space-between; padding: clamp(1.4rem, 3vw, 2.5rem); border: 1px solid var(--line); border-radius: 1.2rem; background: var(--ink-soft); transition: border-color 180ms ease, translate 180ms ease; }
  .guide-card:hover { border-color: var(--sand); translate: 0 -.35rem; }
  .guide-card__meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .7rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
  .guide-card h3 { margin-block: auto 1.25rem; font-size: clamp(2rem, 3.4vw, 3.5rem); }

  .faq-list { border-top: 1px solid rgb(25 19 15 / .3); }
  .faq-list details { border-bottom: 1px solid rgb(25 19 15 / .3); }
  .faq-list summary { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding-block: 1.45rem; font-family: var(--display); font-size: clamp(1.25rem, 2.4vw, 2rem); list-style: none; }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::after { content: "+"; font-family: var(--body); font-size: 1.2rem; transition: rotate 180ms ease; }
  .faq-list details[open] summary::after { rotate: 45deg; }
  .faq-list details p { max-width: 55rem; padding: 0 3rem 1.5rem 0; }

  .contact-stage { display: grid; grid-template-columns: minmax(0, .62fr) minmax(18rem, .38fr); gap: 3rem; align-items: end; }
  .contact-stage h2 { max-width: 8ch; }
  .contact-card { display: grid; gap: 1.5rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1.2rem; background: var(--ink-soft); }
  .contact-list { display: grid; gap: 1rem; list-style: none; }
  .contact-list li { display: grid; gap: .15rem; padding-top: 1rem; border-top: 1px solid var(--line); }
  .contact-list small { color: var(--sand); font-size: .68rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }

  .site-footer { padding-block: 3rem; border-top: 1px solid var(--line); background: #100c09; }
  .site-footer__top { display: grid; grid-template-columns: .8fr repeat(2, .3fr); gap: 3rem; padding-bottom: 3rem; }
  .site-footer__brand { display: grid; gap: 1rem; max-width: 28rem; }
  .site-footer h3 { margin-bottom: 1rem; font-family: var(--body); font-size: .7rem; font-weight: 780; letter-spacing: .11em; text-transform: uppercase; }
  .site-footer ul { display: grid; gap: .55rem; list-style: none; }
  .site-footer a:hover { color: var(--sand); }
  .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: rgb(241 230 212 / .66); font-size: .78rem; }
  .cursor { position: fixed; z-index: 100; top: -.5rem; left: -.5rem; width: 1rem; height: 1rem; border: 1px solid var(--paper); border-radius: 50%; mix-blend-mode: difference; pointer-events: none; transition: width 180ms ease, height 180ms ease, top 180ms ease, left 180ms ease; }
  .cursor[data-active] { top: -1rem; left: -1rem; width: 2rem; height: 2rem; }

  .page-hero { position: relative; display: grid; min-height: 72svh; align-items: end; padding-block: 10rem 5rem; background: radial-gradient(circle at 80% 25%, rgb(168 118 77 / .26), transparent 25rem), var(--ink-soft); }
  .page-hero--image { isolation: isolate; }
  .page-hero--image::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(16 12 9 / .9), rgb(16 12 9 / .28) 75%), linear-gradient(0deg, rgb(16 12 9 / .78), transparent 60%); content: ""; }
  .page-hero__image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 2rem; list-style: none; font-size: .72rem; font-weight: 740; letter-spacing: .09em; text-transform: uppercase; }
  .breadcrumbs li:not(:last-child)::after { margin-left: .45rem; content: "/"; opacity: .55; }
  .page-hero__copy { display: grid; grid-template-columns: 1fr minmax(16rem, 28rem); gap: 3rem; align-items: end; }
  .page-hero__copy h1 { max-width: 9ch; }
  .page-hero__copy aside { display: grid; gap: 1.25rem; }
  .visual-orbit { position: absolute; top: 20%; right: 7%; width: clamp(12rem, 25vw, 24rem); aspect-ratio: 1; border: 1px solid rgb(241 230 212 / .16); border-radius: 50%; animation: rotate 24s linear infinite; }
  .visual-orbit::before, .visual-orbit::after { position: absolute; border: 1px solid rgb(241 230 212 / .15); border-radius: 50%; content: ""; }
  .visual-orbit::before { inset: 12%; } .visual-orbit::after { inset: 27%; }
  .visual-orbit span { position: absolute; top: 50%; left: 50%; width: .7rem; aspect-ratio: 1; border-radius: 50%; background: var(--sand); box-shadow: 0 0 2rem var(--sand); translate: -50% -50%; }

  .product-index { display: grid; border-top: 1px solid rgb(25 19 15 / .3); }
  .product-row { display: grid; grid-template-columns: 3.5rem minmax(12rem, .45fr) minmax(16rem, .55fr) 2rem; gap: 1.25rem; align-items: center; min-height: 9rem; padding-block: 1.25rem; border-bottom: 1px solid rgb(25 19 15 / .3); transition: padding-inline 220ms ease, background 220ms ease; }
  .product-row:hover { padding-inline: 1rem; background: rgb(255 255 255 / .2); }
  .product-row > span { font-size: .7rem; font-weight: 780; letter-spacing: .1em; }
  .product-row h2 { font-size: clamp(1.8rem, 4vw, 3.8rem); }
  .product-row p { max-width: 36rem; }
  .product-row::after { content: "↗"; font-size: 1.4rem; }
  .spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid rgb(25 19 15 / .25); border-radius: 1.2rem; }
  .spec { min-height: 11rem; padding: 1.4rem; border-right: 1px solid rgb(25 19 15 / .25); }
  .spec:last-child { border-right: 0; }
  .spec small { display: block; margin-bottom: 2rem; font-size: .66rem; font-weight: 780; letter-spacing: .1em; text-transform: uppercase; }
  .spec strong { font-family: var(--display); font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 500; line-height: 1.1; }
  .content-split, .article-layout { display: grid; grid-template-columns: minmax(14rem, .3fr) minmax(0, .7fr); gap: clamp(2rem, 8vw, 8rem); align-items: start; }
  .content-split__label, .article-aside { position: sticky; top: 2rem; }
  .content-stack, .article { display: grid; gap: 3rem; }
  .content-block { display: grid; gap: 1.1rem; padding-top: 2rem; border-top: 1px solid; }
  .content-block h2 { max-width: 14ch; font-size: clamp(2.2rem, 4vw, 4rem); }
  .check-list { display: grid; gap: .8rem; list-style: none; }
  .check-list li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .8rem; }
  .check-list li::before { color: var(--clay); content: "◆"; font-size: .55rem; translate: 0 .45rem; }
  .quote-panel { display: grid; grid-template-columns: minmax(0, .48fr) minmax(0, .52fr); overflow: hidden; border-radius: var(--radius); color: var(--ink); background: var(--paper); }
  .quote-panel__copy, .quote-panel form { padding: clamp(2rem, 5vw, 4.5rem); }
  .quote-panel__copy { color: var(--paper); background: var(--bark); }
  .quote-panel__copy h2 { margin-bottom: 1.5rem; font-size: clamp(3rem, 6vw, 6rem); }
  .quote-panel form { display: grid; align-content: center; gap: 1.4rem; }

  .article-layout { grid-template-columns: minmax(13rem, .26fr) minmax(0, .74fr); }
  .article-aside { display: grid; gap: 1rem; font-size: .84rem; }
  .article-aside ul { display: grid; gap: .55rem; padding-top: 1rem; border-top: 1px solid rgb(25 19 15 / .3); list-style: none; }
  .article { gap: 2rem; max-width: 51rem; }
  .article > h2 { margin-top: 2rem; font-size: clamp(2.2rem, 4.5vw, 4.5rem); }
  .article > h3 { margin-top: 1rem; font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.1; }
  .article > p, .article > ul, .article > ol { font-size: clamp(1rem, 1.25vw, 1.17rem); }
  .article > ul, .article > ol { display: grid; gap: .8rem; padding-left: 1.4rem; }
  .note { padding: 1.5rem; border-left: .3rem solid var(--clay); background: rgb(168 118 77 / .14); }
  .comparison { width: 100%; border-collapse: collapse; }
  .comparison th, .comparison td { padding: 1rem; border-bottom: 1px solid rgb(25 19 15 / .25); text-align: left; vertical-align: top; }
  .comparison th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
  .reading-progress { position: fixed; z-index: 40; top: 0; left: 0; width: 100%; height: .2rem; background: linear-gradient(90deg, var(--sand) calc(var(--reading-progress, 0) * 100%), transparent 0); pointer-events: none; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }
  [hidden] { display: none !important; }
  .muted { color: color-mix(in srgb, currentColor 68%, transparent); }
  .text-sand { color: var(--sand); }
}

@layer motion {
  @keyframes ticker { to { translate: -50% 0; } }
  @keyframes rotate { to { rotate: 1turn; } }
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 180ms ease both fade-out; }
  ::view-transition-new(root) { animation: 320ms ease 80ms both fade-in; }
  @keyframes fade-out { to { opacity: 0; } }
  @keyframes fade-in { from { opacity: 0; } }
  .js [data-reveal] { opacity: 0; translate: 0 2.5rem; transition: opacity 700ms ease, translate 700ms cubic-bezier(.2,.7,.2,1); }
  .js [data-reveal][data-visible] { opacity: 1; translate: 0; }
  @supports (animation-timeline: view()) {
    .story__year { animation: year-tone linear both; animation-range: entry 10% cover 70%; animation-timeline: view(); }
    @keyframes year-tone { from { color: var(--paper); } to { color: var(--clay); } }
  }
}

@media (max-width: 68rem) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-nav { position: fixed; inset: 0; display: grid; align-content: center; justify-items: center; padding: 7rem 2rem 2rem; background: rgb(25 19 15 / .98); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
  .site-nav[data-open] { opacity: 1; pointer-events: auto; }
  .site-nav ul { flex-direction: column; }
  .site-nav a { font-family: var(--display); font-size: clamp(2rem, 8vw, 4rem); font-weight: 500; letter-spacing: -.03em; text-transform: none; }
  .header-action { display: none; } .menu-button { z-index: 2; display: flex; }
  body[data-menu-open] { overflow: hidden; }
  .hero__content, .page-hero__copy, .section-heading, .contact-stage { grid-template-columns: 1fr; }
  .hero__aside, .page-hero__copy aside, .section-heading > p { justify-self: start; max-width: 36rem; }
  .intro-statement, .story, .content-split, .article-layout { grid-template-columns: 1fr; }
  .story__year, .content-split__label, .article-aside { position: static; }
  .material-lab, .assistant, .quote-panel { grid-template-columns: 1fr; }
  .material-tabs { grid-template-columns: repeat(3, 1fr); border-right: 0; border-bottom: 1px solid var(--line); }
  .material-tabs button { grid-template-columns: 1fr; padding: 1rem; border-right: 1px solid var(--line); }
  .material-tabs button:first-child { border-top: 0; }
  .material-tabs button span:last-child { font-family: var(--body); font-size: .74rem; font-weight: 720; }
  .material-stage__copy { grid-template-columns: 1fr; }
  .guides { grid-template-columns: 1fr; } .guide-card { min-height: 22rem; }
  .site-footer__top { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec:nth-child(2) { border-right: 0; } .spec:nth-child(-n + 2) { border-bottom: 1px solid rgb(25 19 15 / .25); }
}

@media (max-width: 44rem) {
  :root { --container: min(90vw, 84rem); --section-space: 4.5rem; }
  h1 { font-size: clamp(3.4rem, 19vw, 5.9rem); } h2 { font-size: clamp(2.8rem, 14vw, 4.8rem); }
  .brand { min-height: 3.25rem; } .brand img { width: 8rem; } .hero { padding-top: 8rem; } .hero h1 span { text-indent: 0; }
  .intro-statement__side, .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .material-tabs { display: flex; overflow-x: auto; padding: .5rem; scroll-snap-type: x mandatory; }
  .material-tabs button { min-width: 9rem; border: 0; scroll-snap-align: start; }
  .material-stage, .material-lab { min-height: 36rem; }
  .application-map { grid-template-columns: 1fr; }
  .application-card:nth-child(n) { grid-column: auto; min-height: 19rem; }
  .product-row { grid-template-columns: 2rem 1fr auto; } .product-row p { grid-column: 2 / -1; }
  .spec-grid { grid-template-columns: 1fr; }
  .spec, .spec:nth-child(2) { border-right: 0; border-bottom: 1px solid rgb(25 19 15 / .25); } .spec:last-child { border-bottom: 0; }
  .site-footer__top { grid-template-columns: 1fr; } .site-footer__brand { grid-column: auto; }
  .comparison { font-size: .82rem; } .comparison th, .comparison td { padding: .65rem; }
  .cursor, .visual-orbit { display: none; }
}

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

@media (forced-colors: active) {
  .hero::after, .page-hero--image::after { background: transparent; }
  .button, .header-action, .brand, .material-lab, .guide-card, .contact-card { border: 1px solid CanvasText; }
}

.guide-card__title { margin-block: auto 1.25rem; font-size: clamp(2.2rem, 4vw, 4rem); }

.table-scroll { overflow-x: auto; }