:root {
  --ink: #24241f;
  --sand: #c7ad7e;
  --limestone: #d8d0bd;
  --ecru: #eee8db;
  --tobacco: #755038;
  --clay: #a65f45;
  --olive: #676b4e;
  --cobalt: #315f76;
  --deep-olive: #292c25;
  --paper: #e9e1d2;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: #1b1b18;
  color: var(--ink);
  font-family: Helvetica, Arial, sans-serif;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
}

button { font: inherit; }
.phone-shell {
  position: relative;
  width: min(100vw, 430px);
  height: min(100svh, 880px);
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 28px 90px rgba(0,0,0,.42);
}
.book {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.book::-webkit-scrollbar { display: none; }
.page {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  padding: max(26px, env(safe-area-inset-top)) 26px 82px;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: var(--paper);
}
.folio {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.page:not(.cover) .folio { align-items:flex-start; min-height:34px; }
.page:not(.cover) .folio > span:first-child { max-width:88%; font-size:38px; line-height:.86; letter-spacing:-.055em; }
.page:not(.cover) .folio > span:last-child { position:absolute; top:0; right:0; font-size:9px; letter-spacing:.18em; }
.folio.light, .eyebrow.light { color: rgba(255,255,255,.88); }
.eyebrow {
  position: relative;
  z-index: 3;
  margin: 52px 0 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.35;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h2 {
  position: relative;
  z-index: 3;
  margin-bottom: 20px;
  font-size: clamp(44px, 13vw, 60px);
  line-height: .9;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.caption {
  margin: 12px 0 0;
  font-size: 10px;
  line-height: 1.35;
  opacity: .62;
}

.cover {
  color: var(--ink);
  background: #7ec4e2;
}
.cover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.1);
  transform-origin: 50% 42%;
}
.cover-photo.cover-city-photo { transform:none; object-position:center; }
.cover-photo.cover-cliff-photo { transform:none; object-position:center; }
.cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 48%, rgba(19,17,14,.12)); pointer-events:none; }
.cover-copy { position: absolute; z-index: 2; left: 26px; right: 26px; top: 82px; }
.cover .eyebrow { margin: 0 0 13px; }
.cover h1 {
  margin: 0;
  font-size: clamp(72px, 22vw, 96px);
  line-height: .78;
  letter-spacing: -.09em;
}
.tagline {
  position: absolute;
  z-index: 3;
  left: 26px;
  bottom: 94px;
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
}

.image-page { color: #fff; }
.image-page > img, .final-image img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.brand-idea-page { background: #d4cec2; }
.image-page > .brand-idea-image {
  top: -2.5%;
  bottom: auto;
  height: 95%;
  transform: rotate(180deg);
}
.image-page > .brand-idea-overhead { top:0; height:100%; transform:none; }
.image-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,16,.4), rgba(20,20,16,.04) 35%, rgba(20,20,16,.78)); }
.image-copy { position: absolute; z-index: 3; left: 26px; right: 26px; bottom: 104px; }
.image-copy .eyebrow { margin: 0 0 10px; }
.image-copy h2 { margin-bottom: 14px; font-size: 32px; }
.image-copy p:last-child { max-width: 330px; margin: 0; font-size: 13px; line-height: 1.45; }
.silhouette-points { margin:0; padding:0; list-style:none; font-size:9px; font-weight:700; line-height:1.6; text-transform:uppercase; }
.story-page .look-story-one { object-position: 50% 42%; }
.story-page .look-story-two { object-position: 50% 40%; }
.story-page .ritual-story { object-position: center; }
.story-page .cards-story { object-position: 50% 48%; }
.silhouette-carousel-page { background:#dedddb; }
.silhouette-carousel { position:absolute; inset:0; overflow:hidden; }
.silhouette-slide { position:absolute; inset:0; transform:translateX(100%); transition:transform .45s ease; }
.silhouette-slide.is-active { transform:translateX(0); }
.silhouette-slide img { width:100%; height:100%; object-fit:contain; object-position:center; background:#dedddb; }
.silhouette-carousel-page .image-shade { z-index:1; }
.silhouette-carousel-page .folio { position:relative; z-index:4; }
.silhouette-carousel-page .image-copy { z-index:4; }
.silhouette-arrow { position:absolute; z-index:5; bottom:73px; width:30px; height:30px; border:1px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(20,20,17,.18); color:#fff; cursor:pointer; }
.silhouette-arrow-prev { left:22px; }
.silhouette-arrow-next { right:22px; }
.styling-carousel-page { background:#24231f; }
.styling-carousel { position:absolute; inset:0; overflow:hidden; }
.styling-slide { position:absolute; inset:0; transform:translateX(100%); transition:transform .45s ease; }
.styling-slide.is-active { transform:translateX(0); }
.styling-slide img { width:100%; height:100%; object-fit:cover; object-position:center; }
.styling-carousel-page .image-shade { z-index:1; }
.styling-carousel-page .folio { position:relative; z-index:4; }
.styling-carousel-page .image-copy { z-index:4; }
.styling-arrow { position:absolute; z-index:5; bottom:73px; width:30px; height:30px; border:1px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(20,20,17,.18); color:#fff; cursor:pointer; }
.styling-arrow-prev { left:22px; }
.styling-arrow-next { right:22px; }
.image-page > .silhouette-pan-image {
  right: auto;
  width: auto;
  max-width: none;
  height: 100%;
  object-fit: fill;
  animation: silhouette-pan 14s ease-in-out infinite alternate;
  will-change: left, transform;
}
@keyframes silhouette-pan {
  0%, 10% { left: 0; transform: translateX(0); }
  90%, 100% { left: 100%; transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .image-page > .silhouette-pan-image { left: 50%; transform: translateX(-50%); animation: none; }
}

.statement { background: var(--ecru); }
.statement h2 { font-size: 34px; }
.lead { max-width: 330px; font-size: 18px; font-weight: 700; line-height: 1.22; }
.statement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 28px; }
.statement-grid article { min-height: 84px; padding: 13px; border: 1px solid rgba(36,36,31,.26); display: flex; flex-direction: column; justify-content: space-between; }
.statement-grid strong { font-size: 13px; text-transform: uppercase; }
.statement-grid span { font-size: 10px; line-height: 1.2; opacity: .66; }
.side-note { position: absolute; right: 27px; bottom: 98px; text-align: right; font-size: 10px; font-weight: 700; line-height: 1.35; text-transform: uppercase; }
.statement-image { color:#fff; }
.statement-image > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:56% center; transform:scale(1.16); transform-origin:56% 100%; }
.statement-shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,18,15,.16), rgba(18,18,15,.08) 38%, rgba(18,18,15,.42)); }
.statement-image .eyebrow { margin-top:28px; }
.statement-image h2 { text-shadow:none; }
.statement-image .lead { position:relative; z-index:3; max-width:315px; font-size:16px; }
.statement-image .statement-grid { position:relative; z-index:3; column-gap:18px; row-gap:2px; margin-top:18px; }
.statement-image .statement-grid article { min-height:54px; padding:8px 0 7px; border:0; border-bottom:1px solid rgba(255,255,255,.58); background:transparent; }
.target-points {
  position: relative;
  z-index: 3;
  max-width: 340px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.target-points li {
  position: relative;
  padding: 8px 0 8px 15px;
  border-bottom: 1px solid rgba(255,255,255,.48);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.28;
}
.target-points li::before {
  content: "•";
  position: absolute;
  left: 0;
}
.statement-image .statement-grid strong { color:#fff; }
.statement-image .statement-grid span { margin-top:5px; opacity:.82; }
.statement-image .side-note { display:block; z-index:3; color:#fff; }

.looks { color: #fff; background: #25251f; padding-left: 0; padding-right: 0; }
.looks .folio { margin: 0 26px; }
.look-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1.08fr .92fr; gap: 3px; }
.look { position: relative; margin: 0; overflow: hidden; }
.look img { width: 100%; height: 100%; object-fit: cover; }
.look-one img { object-position: 51% center; }
.look-two img { object-position: 48% center; }
.look::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,20,17,.06), rgba(20,20,17,.08) 48%, rgba(20,20,17,.82)); }
.looks-copy { position: absolute; z-index: 4; left: 26px; right: 26px; bottom: 96px; }
.looks-copy .eyebrow { margin: 0 0 9px; }
.looks-copy h2 { margin-bottom: 18px; font-size: 51px; }
.look-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.look-tags span { padding: 6px 9px; border: 1px solid rgba(255,255,255,.5); border-radius: 99px; font-size: 8px; font-weight: 700; text-transform: uppercase; }

.palette { color:#fff; background:#231f19; }
.influence-carousel { position:absolute; inset:0; overflow:hidden; background:#231f19; }
.influence-slide { position:absolute; inset:0; transform:translateX(100%); transition:transform .45s ease; }
.influence-slide.is-active { transform:translateX(0); }
.influence-slide img { width:100%; height:100%; object-fit:cover; }
.collage-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(17,15,12,.68), rgba(17,15,12,.12) 46%, rgba(17,15,12,.72)); pointer-events:none; }
.collage-page .folio { position:relative; z-index:4; }
.collage-copy { position:absolute; z-index:4; top:142px; left:26px; right:26px; }
.collage-copy .eyebrow { margin:0 0 11px; }
.collage-copy h2 { margin-bottom:14px; font-size:30px; }
.collage-copy > p:last-child { max-width:300px; margin:0; font-size:11px; line-height:1.45; }
.palette-key { position:absolute; z-index:4; left:26px; right:26px; bottom:102px; margin:0; font-size:8px; font-weight:700; letter-spacing:.09em; line-height:1.5; text-transform:uppercase; }
.influence-arrow { position:absolute; z-index:5; bottom:73px; width:30px; height:30px; border:1px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(20,20,17,.18); color:#fff; cursor:pointer; }
.influence-arrow-prev { left:22px; }
.influence-arrow-next { right:22px; }

.material { color: #efe9dd; background: #34372d; }
.material h2 { font-size: 32px; }
.fabric-stack { position: relative; height: 365px; margin-top: 24px; }
.fabric-card { position: absolute; width: 100%; min-height: 132px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 15px 26px rgba(0,0,0,.17); }
.fabric-card > span { font-size: 9px; font-weight: 700; }
.fabric-card h3 { margin: 18px 0 7px; font-size: 18px; text-transform: uppercase; }
.fabric-card p { max-width: 310px; margin: 0; font-size: 10px; line-height: 1.4; }
.fabric-card.ripstop { top: 0; left: 0; transform: rotate(-2deg); background-color: #686c50; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 16px 16px; }
.fabric-card.canvas { top: 108px; left: 8px; transform: rotate(2deg); background: #9c6148; }
.fabric-card.woven { top: 216px; left: -2px; transform: rotate(-1deg); background-color: #526b72; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 2px, transparent 2px 7px); }
.detail-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.detail-row span { padding: 7px 9px; border: 1px solid rgba(255,255,255,.24); border-radius: 99px; font-size: 8px; text-transform: uppercase; }

.silhouette { background: var(--sand); }
.fit-carousel-page { color:#fff; background:#171612; }
.fit-carousel, .fit-carousel-shade { position:absolute; inset:0; }
.fit-carousel { z-index:0; }
.fit-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .4s ease; }
.fit-slide.is-active { opacity:1; }
.fit-slide-cord { transform:scale(1.1); transform-origin:50% 38%; }
.fit-carousel-shade { z-index:1; background:linear-gradient(180deg, rgba(12,12,10,.35), rgba(12,12,10,.2) 44%, rgba(12,12,10,.72)); pointer-events:none; }
.fit-carousel-page .folio { position:relative; z-index:4; }
.trouser-wrap { position: absolute; left: -6px; bottom: 55px; width: 68%; height: 72%; }
.trouser-wrap svg { width: 100%; height: 100%; filter: drop-shadow(0 20px 20px rgba(55,38,25,.14)); }
.trouser-fill { fill: #6f7152; }
.trouser-line, .drawcord { fill: none; stroke: #282921; stroke-width: 2.2; stroke-linecap: round; }
.trouser-line.thin { stroke-width: 1.1; opacity: .75; }
.trouser-line.pocket { stroke-width: 1.2; }
.drawcord { stroke-width: 2; }
.trouser-wrap circle { fill: #282921; }
.silhouette-copy { position:absolute; z-index:3; width:52%; top:110px; right:23px; text-align:right; }
.fit-carousel-page .silhouette-copy { z-index:4; width:62%; top:142px; }
.silhouette-copy .eyebrow { margin:0 0 11px; }
.silhouette-copy h2 { font-size:38px; }
.silhouette-copy ul { margin:40px 0 0; padding:0; list-style:none; font-size:9px; line-height:1.6; text-transform:uppercase; }
.fit-carousel-page .silhouette-copy h2 { font-size:32px; }
.fit-carousel-page .silhouette-copy ul { margin-top:34px; }
.fit-carousel-dots { position:absolute; z-index:5; left:50%; bottom:108px; display:flex; gap:8px; align-items:center; transform:translateX(-50%); }
.fit-carousel-dots button { width:8px; height:8px; padding:0; border:1px solid rgba(255,255,255,.9); border-radius:50%; background:transparent; cursor:pointer; transition:width .2s ease, border-radius .2s ease, background .2s ease; }
.fit-carousel-dots button.is-active { width:24px; border-radius:99px; background:#fff; }

.ritual-carousel-page { color:#fff; background:#292c25; padding-left:0; padding-right:0; }
.ritual-carousel-page .folio { margin:0 26px; }
.ritual-carousel { position:absolute; inset:0; overflow:hidden; }
.ritual-slide { position:absolute; inset:0; transform:translateX(100%); transition:transform .45s ease; }
.ritual-slide.is-active { transform:translateX(0); }
.ritual-slide > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ritual-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.24); font-size:11px; font-weight:700; letter-spacing:.18em; }
.ritual-tone-one { background:#5f6652; }
.ritual-tone-two { background:#755038; }
.ritual-tone-three { background:#a65f45; }
.ritual-tone-four { background:#315f76; }
.ritual-tone-five { background:#80705b; }
.ritual-tone-six { background:#4d4b43; }
.ritual-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(17,17,14,.34), transparent 42%, rgba(17,17,14,.7)); pointer-events:none; }
.ritual-carousel-page .folio > span:first-child { font-size:32px; }
.ritual-subtitle { position:absolute; z-index:4; top:91px; left:26px; margin:0; font-size:13px; font-weight:700; letter-spacing:.08em; }
.ritual-description { position:absolute; z-index:4; top:122px; left:26px; max-width:330px; margin:0; font-size:11px; font-weight:700; line-height:1.45; }
.ritual-arrow { position:absolute; z-index:5; bottom:73px; width:30px; height:30px; border:1px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(20,20,17,.18); color:#fff; cursor:pointer; }
.ritual-arrow-prev { left:22px; }
.ritual-arrow-next { right:22px; }

.geography { background:#d9d3c5; }
.geography-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.geography-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(239,236,228,.48), rgba(239,236,228,.2) 48%, rgba(239,236,228,.58)); pointer-events:none; }
.geography .folio, .geography > .eyebrow, .geography > h2, .geography .place-list, .geography .caption { position:relative; z-index:2; }
.geography h2 { font-size: 32px; }
.place-list { margin-top: 38px; border-top: 1px solid var(--ink); }
.place-list article { display: grid; grid-template-columns: 28px 1fr; gap: 7px; padding: 12px 0; border-bottom: 1px solid rgba(36,36,31,.35); }
.place-list span { grid-row: 1 / 3; font-size: 8px; }
.place-list strong { font-size: 17px; text-transform: uppercase; }
.place-list em { font-size: 9px; font-style: normal; opacity: .64; text-transform: uppercase; letter-spacing: .08em; }
.geography .caption { margin-top: 18px; font-weight: 700; text-transform: uppercase; }

.photo-board { color:#fff; background:#26251f; padding-left:0; padding-right:0; }
.photo-board .folio { margin:0 26px; }
.mood-grid { position:absolute; inset:0; display:grid; grid-template-columns:1.2fr .8fr; grid-template-rows:1.2fr .85fr 1fr; gap:4px; background:#26251f; }
.mood-grid figure { position:relative; margin:0; overflow:hidden; }
.mood-grid img { width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(.96); }
.mood-a { grid-row:1 / 3; }
.mood-a img { object-position:52% center; }
.mood-b img { object-position:50% 26%; }
.mood-c { grid-column:1 / 3; }
.mood-c img { object-position:center 49%; }
.mood-d { grid-column:2; grid-row:2; }
.mood-d img { object-position:50% 28%; }
.mood-grid::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,20,17,.4), rgba(20,20,17,.08) 52%, rgba(20,20,17,.82)); pointer-events:none; }
.mood-label { position:absolute; z-index:4; left:26px; right:26px; bottom:94px; }
.mood-label .eyebrow { margin:0 0 8px; }
.mood-label h2 { margin:0; font-size:32px; }

.final-page { color: #fff; }
.final-image { position: absolute; inset: 0; }
.final-image::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(24,24,20,.4), rgba(24,24,20,.15) 37%, rgba(24,24,20,.9)); }
.final-copy { position: absolute; z-index: 3; left: 26px; right: 26px; bottom: 100px; }
.final-copy .eyebrow { margin: 0 0 12px; }
.final-copy h2 { font-size: 32px; }
.final-copy > p:not(.eyebrow) { max-width: 315px; font-size: 12px; line-height: 1.45; }
.end-mark { margin-top: 30px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.5); font-size: 22px; font-weight: 700; line-height: .95; }
.end-mark span { font-size: 9px; letter-spacing: .08em; }

.brand-codes { background:var(--ecru); }
.brand-codes .eyebrow { margin-top:34px; }
.brand-codes h2 { font-size:32px; }
.code-list { margin-top:30px; border-top:1px solid rgba(36,36,31,.55); }
.code-list article { display:grid; grid-template-columns:34px 1fr; gap:10px; padding:14px 0; border-bottom:1px solid rgba(36,36,31,.32); }
.code-list article > span { padding-top:2px; font-size:9px; font-weight:700; letter-spacing:.12em; }
.code-list strong { display:block; font-size:14px; text-transform:uppercase; }
.code-list p { max-width:300px; margin:5px 0 0; font-size:10px; line-height:1.35; opacity:.7; }

.construction-page { background:#d5c59f; }
.construction-page .eyebrow { margin-top:30px; }
.construction-page h2 { font-size:30px; }
.construction-figure { position:absolute; left:-22px; bottom:58px; width:69%; height:57%; }
.construction-figure svg { width:100%; height:100%; filter:drop-shadow(0 20px 20px rgba(55,38,25,.14)); }
.construction-list { position:absolute; z-index:3; top:290px; right:22px; width:47%; margin:0; padding:0; list-style:none; border-top:1px solid rgba(36,36,31,.5); }
.construction-list li { padding:10px 0; border-bottom:1px solid rgba(36,36,31,.28); font-size:9px; font-weight:700; line-height:1.2; text-transform:uppercase; }

.product-world { color:#fff; background:#24241f; padding-left:0; padding-right:0; }
.product-world .folio { margin:0 26px; }
.product-carousel { position:absolute; inset:0; overflow:hidden; }
.product-slide { position:absolute; inset:0; transform:translateX(100%); transition:transform .45s ease; }
.product-slide.is-active { transform:translateX(0); }
.product-slide img { width:100%; height:100%; object-fit:contain; object-position:center; background:#d7d2c7; filter:saturate(.88) contrast(.96); }
.product-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(17,17,14,.55), rgba(17,17,14,.06) 44%, rgba(17,17,14,.86)); }
.product-copy { position:absolute; z-index:4; left:26px; right:26px; bottom:96px; }
.product-copy .eyebrow { margin:0 0 10px; }
.product-copy h2 { margin-bottom:13px; font-size:30px; }
.product-copy > p:last-child { max-width:330px; margin:0; font-size:11px; line-height:1.4; }
.product-arrow { position:absolute; z-index:5; bottom:73px; width:30px; height:30px; border:1px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(20,20,17,.18); color:#fff; cursor:pointer; }
.product-arrow-prev { left:22px; }
.product-arrow-next { right:22px; }

.book-nav {
  position: absolute;
  z-index: 20;
  left: 0; right: 0; bottom: 0;
  min-height: 64px;
  padding: 9px 18px max(9px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  background: rgba(21,21,18,.92);
  color: #fff;
  backdrop-filter: blur(14px);
}
.book-nav button { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.book-nav button:disabled { opacity: .25; cursor: default; }
.progress { display: grid; grid-template-columns: 26px 1fr 26px; gap: 8px; align-items: center; text-align: center; font-size: 9px; font-weight: 700; }
.progress i { height: 1px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; }
.progress i::after { content:""; position:absolute; inset:0; background:#fff; transform:scaleX(var(--progress, .11)); transform-origin:left; transition:transform .25s ease; }

@media (min-width: 600px) {
  .phone-shell { border: 10px solid #0d0d0c; border-radius: 46px; }
}
@media (max-height: 720px) {
  .page { padding-top: 20px; }
  .eyebrow { margin-top: 35px; }
  h2 { font-size: 42px; }
  .statement-grid article { min-height: 68px; }
  .pattern { height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .book { scroll-behavior: auto; }
}