/* Who We Are (our-story.html), rebuilt one section at a time with Hodge.
   Manrope throughout. The nav, footer and opening come from site-shell.css,
   footer.css and page-opening.css. about.js adds .ab-motion; without it every
   section renders complete. */

:root {
  color-scheme: light;
  --ab-paper: #f4efeb;
  --ab-ink: #2c2830;
  --ab-purple: #4c3074;
  --ab-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ab-ease: cubic-bezier(.22, 1, .36, 1);
  --ab-gutter: clamp(1rem, 1.35vw, 1.5rem);
  /* Tokens the shared shell and footer read. */
  --font-ui: var(--ab-sans);
  --violet: #4c3074;
  --w-regular: 400;
  --w-medium: 500;
  --w-demi: 500;
  --w-semibold: 600;
  --w-bold: 600;
}

* { box-sizing: border-box; }
body.ab-page { margin: 0; background: var(--ab-paper); color: var(--ab-ink); font: 400 1rem/1.55 var(--ab-sans); -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
:where(.ab-page main) :where(h1, h2, h3, p, figure, ul, ol, blockquote) { margin: 0; }
:where(.ab-page main) img { display: block; max-width: 100%; }
.ab-page :where(a, button):focus-visible { outline: 2px solid var(--ab-purple); outline-offset: 4px; }
.ab-skip { position: fixed; z-index: 100; top: .75rem; left: 1rem; padding: .75rem 1rem; background: var(--ab-purple); color: #fff; transform: translateY(-200%); }
.ab-skip:focus { transform: none; }

/* ——— 1. The origin — supplied editorial composition, rebuilt responsively. */
.ab-lead {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  min-height: 100vh;
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.25rem, 3.8vw, 4.5rem);
  overflow: hidden;
  background: var(--ab-paper);
}
.ab-story-one__canvas { display: contents; }
.ab-story-one__label {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  align-self: start;
  color: rgba(44, 40, 48, .72);
  font: 600 .6rem/1 var(--ab-sans);
  letter-spacing: .32em;
  text-transform: uppercase;
}
.ab-story-one__label i { display: block; width: 5rem; height: 1px; background: rgba(44, 40, 48, .4); }
.ab-story-one__copy { position: relative; z-index: 3; }
.ab-story-one__eyebrow {
  color: var(--ab-purple);
  font: 650 .63rem/1 var(--ab-sans);
  letter-spacing: .27em;
  text-transform: uppercase;
}
.ab-story-one__copy h2 {
  margin-top: 1rem;
  color: var(--ab-ink);
  font: 300 clamp(3.1rem, 7.2vw, 7.4rem)/.9 var(--ab-sans);
  letter-spacing: -.065em;
}
.ab-story-one__body {
  display: grid;
  gap: 1.1rem;
  max-width: 37rem;
  margin-top: clamp(2rem, 4vw, 3.8rem);
  color: rgba(44, 40, 48, .72);
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  line-height: 1.6;
}
.ab-story-one__visual {
  position: relative;
  min-height: clamp(32rem, 112vw, 45rem);
  isolation: isolate;
}
.ab-story-one__landscape,
.ab-story-one__sarah { position: absolute; overflow: hidden; background: #e8edf0; }
.ab-story-one__landscape {
  z-index: 1;
  top: 0;
  right: -10%;
  width: 94%;
  height: 57%;
  clip-path: inset(0);
}
.ab-story-one__landscape img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
.ab-story-one__sarah {
  z-index: 2;
  left: 1%;
  bottom: 0;
  width: 72%;
  height: auto;
  aspect-ratio: 1122 / 1402;
  border: 5px solid #fff;
  background: #dce9f1;
}
.ab-story-one__sarah img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.ab-story-one__quote {
  position: relative;
  align-self: end;
  padding-left: 2.8rem;
}
.ab-story-one__quote > span {
  position: absolute;
  top: -.45rem;
  left: 0;
  color: var(--ab-purple);
  font: 400 4rem/.8 var(--font-accent, "Inter", sans-serif);
}
.ab-story-one__quote p { font: 300 clamp(1.9rem, 4vw, 3.2rem)/1.04 var(--ab-sans); letter-spacing: -.045em; }
.ab-story-one__quote p::after {
  content: "”";
  color: var(--ab-purple);
  font: 400 1em/.8 var(--font-accent, "Inter", sans-serif);
}
.ab-story-one__quote footer {
  width: fit-content;
  margin-top: 1.5rem;
  padding-top: .8rem;
  border-top: 2px solid var(--ab-purple);
  color: rgba(44, 40, 48, .48);
  font: 600 .54rem/1 var(--ab-sans);
  letter-spacing: .28em;
  text-transform: uppercase;
}
.ab-story-one__read-more {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1.25rem;
  padding: .25rem 0 .4rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--ab-purple);
  font: 600 .78rem/1.2 var(--ab-sans);
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
}
.ab-story-one__read-more span:last-child { font-size: 1rem; }
/* The landscape wipes fully from right to left. Only once that completes does
   Sarah rise from below, creating the stepped silhouette through overlap. */
.ab-motion .ab-story-one__visual { opacity: 1 !important; transform: none !important; }
.ab-motion .ab-story-one__visual .ab-story-one__landscape {
  clip-path: inset(0 0 0 100%);
  transform: none;
  transition: clip-path 1.1s var(--ab-ease);
}
.ab-motion .ab-story-one__visual .ab-story-one__sarah {
  clip-path: inset(100% 0 0 0);
  transform: translate3d(0, 10%, 0);
  transform-origin: 50% 100%;
  transition: clip-path 1.05s 1.02s var(--ab-ease), transform 1.2s 1s var(--ab-ease);
}
.ab-motion .ab-story-one__visual.is-in .ab-story-one__landscape {
  clip-path: inset(0);
  transform: none;
}
.ab-motion .ab-story-one__visual.is-in .ab-story-one__sarah { clip-path: inset(0 round 0); transform: none; }

@media (min-width: 900px) {
  .ab-lead.ab-story-one {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100svh;
    min-height: 0;
    padding: 0;
  }
  .ab-story-one__canvas {
    position: relative;
    display: block;
    flex: none;
    width: min(100vw, 177.683svh);
    height: min(100svh, 56.28vw);
    container-type: inline-size;
  }
  .ab-story-one__label {
    position: absolute;
    z-index: 5;
    top: 6.4%;
    left: 3.8%;
  }
  .ab-story-one__copy {
    position: absolute;
    z-index: 5;
    top: 12.5%;
    left: 3.8%;
    width: 27%;
  }
  .ab-story-one__copy h2 {
    margin-top: 1.2cqw;
    font-size: 4.2cqw;
    line-height: .92;
    white-space: nowrap;
  }
  .ab-story-one__body {
    width: 23cqw;
    max-width: none;
    margin-top: 3.15cqw;
    font-size: .94cqw;
    line-height: 1.55;
  }
  .ab-story-one__eyebrow { font-size: .62cqw; }
  .ab-story-one__visual {
    position: absolute;
    z-index: 2;
    inset: 0;
    min-height: 0;
    pointer-events: none;
  }
  .ab-story-one__landscape {
    top: 6.4%;
    right: auto;
    left: 41.4%;
    width: 50.9%;
    height: 62.5%;
  }
  .ab-story-one__sarah {
    top: 33.2%;
    bottom: auto;
    left: 29.7%;
    width: 28.9%;
    height: 62.5%;
    aspect-ratio: auto;
    border-width: .3cqw;
  }
  .ab-story-one__quote {
    position: absolute;
    z-index: 5;
    top: 72.5%;
    left: 71.4%;
    width: 25.5%;
    margin: 0;
    padding-left: 3.4cqw;
  }
  .ab-story-one__quote p { font-size: 2.1cqw; }
  .ab-story-one__quote footer { font-size: .5cqw; }
}

/* ——— Film dialog ——— */
.ab-dialog { width: min(1100px, 94vw); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.ab-dialog::backdrop { background: rgba(13, 11, 16, .92); }
.ab-dialog__frame { position: relative; }
.ab-dialog video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.ab-dialog__name { margin: .9rem 0 0; color: #f3ecf8; font: 500 .8rem/1.4 var(--ab-sans); }
.ab-dialog__close { position: absolute; top: -3.4rem; right: 0; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }

/* ——— Motion: text rises in, the photograph unmasks upwards ——— */
.ab-motion [data-ab-reveal]:not([data-ab-reveal="image"]) { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 1s ease, transform 1.2s var(--ab-ease); }
.ab-motion [data-ab-reveal="image"] { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ab-ease); }
.ab-motion [data-ab-reveal="image"] img { transform: scale(1.08); transition: transform 1.8s var(--ab-ease); }
/* Only the image reveal masks. A clip on text reveals cropped "The moment on the
   mountain." to its column at laptop widths, cutting the final n. */
.ab-motion [data-ab-reveal].is-in { opacity: 1; transform: none; }
.ab-motion [data-ab-reveal="image"].is-in { clip-path: inset(0); }
.ab-motion [data-ab-reveal].is-in img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ab-page *, .ab-page *::before, .ab-page *::after { transition: none !important; animation: none !important; }
}

/* ——— 4. Our values (after Symbol Studio's "Why us?") ———
   A heading on the left and a short line in the second column, then six
   quiet cards on a four-column grid: three on the right, three on the left.
   The plus opens each card's line. */
.ab-values { padding: clamp(4rem, 8vw, 8rem) var(--ab-gutter) clamp(5rem, 10vw, 10rem); background: var(--ab-paper); }
.ab-values__head { display: grid; gap: 1.2rem; margin-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.ab-values__head h2 { font: 500 clamp(1.9rem, 2.6vw, 2.6rem)/1 var(--ab-sans); letter-spacing: -.03em; text-transform: uppercase; }
.ab-values__head p { max-width: 27rem; font-size: .9375rem; line-height: 1.45; }
.ab-values__grid { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ab-value { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; min-height: clamp(13rem, 22vw, 20rem); padding: 1rem 1rem 1.1rem; border-radius: 6px; background: #ebe5e0; transition: background .4s ease; }
.ab-value__num { font-size: .75rem; color: rgba(44, 40, 48, .5); font-variant-numeric: tabular-nums; }
.ab-value h3 { margin-top: .35rem; font: 500 clamp(1.1rem, 1.3vw, 1.35rem)/1.2 var(--ab-sans); letter-spacing: -.02em; }
.ab-value p { align-self: end; max-width: 30ch; margin-bottom: 1rem; font-size: .875rem; line-height: 1.45; color: rgba(44, 40, 48, .78); opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .6s var(--ab-ease); }
.ab-value button { justify-self: start; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ab-purple); cursor: pointer; transition: transform .45s var(--ab-ease), background .3s, color .3s; }
.ab-value button span { position: relative; width: 10px; height: 10px; }
.ab-value button span::before,
.ab-value button span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.ab-value button span::after { transform: translate(-50%, -50%) rotate(90deg); }
.ab-value.is-open { background: #e3dbd4; }
.ab-value.is-open p { opacity: 1; transform: none; }
.ab-value.is-open button { transform: rotate(45deg); background: var(--ab-purple); color: #fff; }
@media (hover: hover) {
  .ab-value:hover p { opacity: 1; transform: none; }
  .ab-value:hover button { background: var(--ab-purple); color: #fff; }
}

@media (min-width: 900px) {
  .ab-values__head { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 7px; align-items: start; }
  .ab-values__head h2 { grid-column: 1; }
  .ab-values__head p { grid-column: 2 / 4; padding-top: .2rem; }
  .ab-values__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ab-value:nth-child(1) { grid-column: 2; }
  .ab-value:nth-child(4) { grid-column: 1; }
  .ab-value { aspect-ratio: 475 / 322; min-height: 0; }
}
@media (min-width: 600px) and (max-width: 899px) { .ab-values__grid { grid-template-columns: 1fr 1fr; } }

/* ——— 2. How it started (after Yucca Packaging's company page) ———
   A large light heading on the left, Sarah's photograph in the right-hand
   column from the same top line, and the story set lower and indented so it
   finishes level with the bottom of the photograph. A dashed arrow leads on. */
.ab-start { position: relative; display: grid; gap: 2.5rem; padding: clamp(3rem, 6vw, 6rem) var(--ab-gutter) clamp(5rem, 9vw, 9rem); background: var(--ab-paper); }
.ab-start__title { max-width: 11ch; color: var(--ab-ink); font: 300 clamp(2.8rem, 5.6vw, 5.8rem)/1.12 var(--ab-sans); letter-spacing: -.018em; }
.ab-start__image { aspect-ratio: 644 / 800; overflow: hidden; background: #e6ded8; }
.ab-start__image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ab-start__copy { display: grid; gap: 1.4rem; max-width: 40rem; }
.ab-start__copy h3 { font: 400 clamp(1.6rem, 2.6vw, 2.6rem)/1.25 var(--ab-sans); letter-spacing: -.025em; color: var(--ab-ink); }
.ab-start__copy p { font-size: 1.0625rem; line-height: 1.6; }
.ab-start__arrow { display: none; color: var(--ab-ink); }
.ab-start__arrow svg { width: 2.5rem; height: auto; overflow: visible; }
.ab-start__arrow path { fill: none; stroke: currentColor; stroke-width: 2; }
.ab-motion .ab-start__arrow path { animation: ab-arrow 2.4s var(--ab-ease) infinite; }
@keyframes ab-arrow { 0%, 100% { transform: none; } 50% { transform: translateY(6px); } }

@media (min-width: 900px) {
  .ab-start { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: clamp(1rem, 2vw, 2rem); row-gap: 0; }
  .ab-start__title { grid-column: 1 / 8; grid-row: 1; align-self: start; margin-top: -.12em; }
  .ab-start__image { grid-column: 8 / 13; grid-row: 1 / 4; }
  .ab-start__copy { grid-column: 3 / 8; grid-row: 3; align-self: end; padding-top: 4rem; }
  .ab-start__arrow { display: block; grid-column: 1 / 2; grid-row: 3; align-self: end; justify-self: start; margin-left: 1.5rem; }
}

/* White page and more room between later sections (Hodge, 2026-09-15). */
:root { --ab-paper: #ffffff; --ab-gap: clamp(8rem, 16vw, 16rem); }
.ab-start { padding-block: 0 var(--ab-gap); }
.ab-values { padding-block: 0 var(--ab-gap); }
.ab-value { background: #f5f5f6; }
.ab-value.is-open { background: #efeff1; }
.ab-lead__image, .ab-start__image { background: #f2f2f3; }