/* ============================================================
   & Ko. — Page sections (v2)
   ============================================================ */

/* ——— Hero (home) ——— */
.hero { padding: calc(var(--header-h) + clamp(1.5rem, 4vw, 3.5rem)) 0 clamp(3.5rem, 7vw, 6rem); }
.hero-grid { display: grid; gap: 2.8rem; align-items: center; }
@media (min-width: 1020px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 4rem; } }
.hero h1 { font-size: var(--text-hero); margin: 1.3rem 0 1.6rem; }
/* "follow-through." is longer than the old "execution." — a touch smaller
   keeps it beside "great" on phones and unwrapped on its line on desktop. */
.hero h1 .script { font-size: 0.85em; }
.hero .hero-lede {
  font-family: var(--font-script);
  color: var(--terra);
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  line-height: 1.3;
  max-width: 46ch;
}
.hero .hero-sub { color: var(--ink-soft); max-width: 52ch; margin-top: 1rem; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.2rem; margin-top: 2.4rem; }
.hero-photo { aspect-ratio: 4 / 3.1; border-radius: var(--radius); box-shadow: var(--shadow-warm); }
@media (min-width: 1020px) { .hero-photo { aspect-ratio: 4 / 3.4; } }
.hero-photo img { will-change: transform; }
/* Blended hero: the photo carries a baked torn-paper alpha edge, so the
   frame chrome comes off and the page paper shows through the dissolve. */
.frame.hero-photo { background: transparent; box-shadow: none; border-radius: 0; }

/* ——— Introduction ——— */
.intro-grid { display: grid; gap: 2.2rem; }
@media (min-width: 1020px) { .intro-grid { grid-template-columns: 1.35fr 1fr; gap: 5rem; } }
.intro h2 { font-size: var(--text-h2); margin-top: 1.2rem; }
.intro .intro-body p + p { margin-top: 1.15rem; }
.intro .intro-body { font-size: 1.08rem; color: var(--ink-soft); }
.intro .intro-body strong { color: var(--ink); }

/* ——— Services (home cards) ——— */
.svc-head { display: grid; gap: 1.6rem; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
@media (min-width: 1020px) { .svc-head { grid-template-columns: 1.4fr 1fr; align-items: end; } }
.svc-head h2 { font-size: var(--text-h2); margin-top: 1.2rem; }

/* ——— Services centrepiece: four disciplines around a giant & (ported from v1) ——— */
.amp-head { margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.amp-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 8.2;
  margin-top: clamp(1.2rem, 3vw, 2.2rem);
}
@media (max-width: 700px) { .amp-stage { aspect-ratio: 4 / 2.6; } }
.amp-glyph {
  display: block;
  height: clamp(8.8rem, 26.3vmin, 18.4rem);
  width: auto;
  user-select: none;
}
.amp-word {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
  font-size: clamp(1.5rem, 3.2vw, 2.7rem);
  line-height: 1;
  white-space: nowrap;
}
.amp-word-tl { top: 2%; left: 1%; transform: rotate(-2deg); }
.amp-word-tr { top: 2%; right: 1%; transform: rotate(1.5deg); }
.amp-word-bl { bottom: 2%; left: 1%; transform: rotate(1deg); }
.amp-word-br { bottom: 2%; right: 1%; transform: rotate(-1.5deg); }
.amp-signoff { text-align: center; margin-top: clamp(0.6rem, 2vw, 1.4rem); }
.amp-wordmark { width: clamp(160px, 20vw, 185px); height: auto; margin-inline: auto; }
.amp-line {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--terra);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.15;
  margin-top: 0.9rem;
}
/* ——— Phones: their own, tighter arrangement of the same
   centrepiece — shorter stage, smaller &, the four words drawn
   in close around it (two above, two below) and the signoff
   following immediately, so the section reads as one composed
   moment instead of four words lost in a tall empty stage.
   Desktop composition above is untouched. ——— */
@media (max-width: 700px) {
  .amp-head { margin-bottom: 1.8rem; }
  .amp-stage { margin-top: 0.9rem; }
  .amp-glyph { height: clamp(5.7rem, 26.3vw, 7rem); }
  .amp-word { font-size: clamp(1.18rem, 5.4vw, 1.42rem); letter-spacing: 0.02em; }
  .amp-word-tl { top: 4%; left: 2%; }
  .amp-word-tr { top: 4%; right: 2%; }
  .amp-word-bl { bottom: 4%; left: 2%; }
  .amp-word-br { bottom: 4%; right: 2%; }
  .amp-signoff { margin-top: 0.2rem; }
  .amp-wordmark { width: 150px; }
  .amp-line { font-size: 2rem; margin-top: 0.7rem; }
}
.svc-cards { display: grid; gap: 1.6rem; }
@media (min-width: 700px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .svc-cards { grid-template-columns: repeat(4, 1fr); } }
.svc-card {
  background: #FFFDF8; border: 1px solid var(--paper-deep); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.svc-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-warm); }
.svc-card .card-photo { aspect-ratio: 16 / 10.5; }
.svc-card .card-band { padding: 1.15rem 1.4rem 1.25rem; color: var(--ink); }
.svc-card .card-band .num { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.3em; display: block; margin-bottom: 0.45rem; }
.svc-card .card-band h3 { font-family: var(--font-display); font-size: 1.28rem; font-weight: 400; text-transform: uppercase; line-height: 1.15; }
.svc-card .band-apricot { background: var(--apricot); }
.svc-card .band-rose { background: var(--rose); }
.svc-card .band-teal { background: var(--teal); color: var(--paper); }
.svc-card .band-butter { background: var(--butter); }
.svc-card .card-body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 0.8rem; flex: 1; }
.svc-card .card-body p { font-size: 0.97rem; color: var(--ink-soft); }
.svc-card .card-body .link-arrow { margin-top: auto; padding-top: 0.6rem; align-self: flex-start; }

/* ——— Approach ——— */
.approach { background: #FFFDF8; border-block: 1px solid var(--paper-deep); }
.approach h2 { font-size: var(--text-h2); margin: 1.2rem 0 1.4rem; max-width: 20ch; }
.approach .approach-intro { max-width: 62ch; color: var(--ink-soft); }
.approach .approach-intro p + p { margin-top: 1rem; }
.steps { display: grid; gap: 0; margin-top: clamp(2.4rem, 5vw, 4rem); border-top: 2px solid var(--ink); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { padding: 1.8rem 1.6rem 2.2rem 0; border-bottom: 1px solid var(--paper-deep); }
@media (min-width: 900px) { .step { border-bottom: 0; border-right: 1px solid var(--paper-deep); padding-left: 1.6rem; } .step:first-child { padding-left: 0; } .step:last-child { border-right: 0; } }
.step .step-num { font-family: var(--font-display); font-size: 2.6rem; font-weight: 400; line-height: 1; }
.step:nth-child(1) .step-num { color: var(--apricot); }
.step:nth-child(2) .step-num { color: var(--terra); }
.step:nth-child(3) .step-num { color: var(--teal); }
.step:nth-child(4) .step-num { color: #B98A1F; }
.step h3 { font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase; margin: 0.9rem 0 0.6rem; font-weight: 400; }
.step p { font-size: 0.97rem; color: var(--ink-soft); }

/* ——— Featured work (home) ——— */
.work-band-photo { aspect-ratio: 16 / 7.5; border-radius: var(--radius); margin-top: clamp(2rem, 4vw, 3.2rem); }
.work-cta-row { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; margin-top: 2.2rem; }
.work-feature h2 { font-size: var(--text-h2); margin-top: 1.2rem; max-width: 22ch; }
.work-feature p { color: var(--ink-soft); max-width: 58ch; margin-top: 1.2rem; }

/* ——— About preview (home) ——— */
.about-preview { background: var(--teal); color: var(--paper); overflow: hidden; }
.about-preview .eyebrow { color: var(--butter); }
.about-preview-grid { display: grid; gap: 2.6rem; align-items: center; }
@media (min-width: 1020px) { .about-preview-grid { grid-template-columns: 1fr 1.15fr; gap: 4.5rem; } }
.about-preview h2 { font-size: var(--text-h2); margin: 1.2rem 0 1.3rem; }
.about-preview p { color: rgba(247, 240, 228, 0.88); max-width: 54ch; }
.about-preview p + p { margin-top: 1rem; }
.about-preview .ap-photo { aspect-ratio: 4 / 4.6; border-radius: var(--radius); box-shadow: 0 30px 60px rgba(0,0,0,0.28); }
@media (max-width: 1019px) { .about-preview .ap-photo { aspect-ratio: 4 / 3; } }

/* ——— Page hero (inner pages) ——— */
.page-hero { position: relative; padding: calc(var(--header-h) + clamp(2rem, 5vw, 4rem)) 0 clamp(3rem, 6vw, 5rem); }
.page-hero h1 { font-size: var(--text-h1); margin: 1.3rem 0 1.5rem; max-width: 18ch; }
.page-hero .hero-lede { font-size: var(--text-lede); max-width: 56ch; }
.page-hero p { color: var(--ink-soft); max-width: 60ch; }
.page-hero p + p { margin-top: 1rem; }
.page-hero-photo { aspect-ratio: 16 / 8.2; border-radius: var(--radius); margin-top: clamp(2.2rem, 5vw, 3.6rem); box-shadow: var(--shadow-warm); }

/* ——— Services overview ——— */
.svc-rows { display: grid; gap: 1.8rem; }
.svc-row {
  display: grid; gap: 1.8rem; background: #FFFDF8; border: 1px solid var(--paper-deep);
  border-radius: var(--radius); padding: clamp(1.7rem, 3.6vw, 2.8rem);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.svc-row:hover { transform: translateY(-5px); box-shadow: var(--shadow-warm); }
@media (min-width: 960px) { .svc-row { grid-template-columns: 0.9fr 1.6fr; gap: 3.2rem; } }
.svc-row .row-num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 400; line-height: 1; }
.svc-row h2 { font-family: var(--font-display); font-size: var(--text-h3); text-transform: uppercase; font-weight: 400; line-height: 1.18; margin-top: 0.8rem; }
.svc-row .row-lead { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.3; font-weight: 400; margin-bottom: 1rem; }
.svc-row p { color: var(--ink-soft); }
.svc-row p + p { margin-top: 0.9rem; }
.svc-row .btn { margin-top: 1.5rem; }
.acc-apricot { color: var(--apricot); } .acc-terra { color: var(--terra); }
.acc-teal { color: var(--teal); } .acc-rose { color: #C97F7B; } .acc-sea { color: #4E8F8C; }
.svc-start { background: var(--butter); }
.svc-start h2 { font-size: var(--text-h2); margin: 1.2rem 0 1.2rem; max-width: 20ch; }
.svc-start p { max-width: 52ch; }

/* ——— Service detail template ——— */
.help-grid { display: grid; gap: 3rem; }
@media (min-width: 1020px) { .help-grid { grid-template-columns: 1fr 1.5fr; gap: 5rem; } }
.help-list { list-style: none; display: grid; gap: 0; }
@media (min-width: 640px) { .help-list { grid-template-columns: 1fr 1fr; column-gap: 2.4rem; } }
.help-list li {
  padding: 0.95rem 0 0.95rem 2rem; border-bottom: 1px solid var(--paper-deep); position: relative;
  font-size: 1.02rem;
}
.help-list li::before {
  content: "&"; font-family: var(--font-script); color: var(--terra);
  position: absolute; left: 0.1rem; top: 0.55rem; font-size: 1.35rem; transform: rotate(-4deg);
}
.statement-band { color: var(--paper); overflow: hidden; }
.statement-band h2 { font-size: var(--text-h2); max-width: 20ch; }
.statement-band p { color: rgba(247, 240, 228, 0.88); max-width: 58ch; margin-top: 1.3rem; }
.statement-band p + p { margin-top: 1rem; }
.band-teal { background: var(--teal); } .band-terra { background: var(--terra); }
.band-ink { background: var(--ink); } .band-apricot { background: var(--apricot); color: var(--ink); }
.band-apricot p { color: rgba(48, 37, 33, 0.82); }
.band-rose { background: var(--rose); color: var(--ink); } .band-rose p { color: rgba(48, 37, 33, 0.82); }
.band-butter { background: var(--butter); color: var(--ink); } .band-butter p { color: rgba(48, 37, 33, 0.82); }
.band-sea { background: var(--sea); color: var(--ink); } .band-sea p { color: rgba(48, 37, 33, 0.85); }
.related h2 { font-size: var(--text-h3); margin-bottom: 1.6rem; }
.related-grid { display: grid; gap: 1.2rem; }
@media (min-width: 800px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
.related-card {
  display: block; text-decoration: none; background: #FFFDF8; border: 1px solid var(--paper-deep);
  border-top: 5px solid var(--terra); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.7rem;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.related-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-warm); }
.related-card .r-num { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.3em; }
.related-card h3 { font-family: var(--font-display); font-size: 1.22rem; text-transform: uppercase; font-weight: 400; line-height: 1.2; margin: 0.6rem 0 0.5rem; }
.related-card p { font-size: 0.95rem; color: var(--ink-soft); }
.related-card .go { display: inline-flex; gap: 0.4rem; margin-top: 1rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terra); }

/* ——— Websites: built-sites portfolio strip (quiet, supporting) ——— */
.built-sites h2 { font-size: var(--text-h3); margin: 1rem 0 0.6rem; }
.built-intro { color: var(--ink-soft); max-width: 56ch; margin-bottom: 1.4rem; }
.built-list { list-style: none; display: grid; gap: 0; }
@media (min-width: 800px) { .built-list { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.built-list a {
  display: grid; gap: 0.15rem; padding: 1.05rem 0; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--paper-deep);
}
.built-list .b-name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.25; transition: color 0.3s ease; }
.built-list .b-desc { font-size: 0.95rem; color: var(--ink-soft); }
.built-list .b-url { margin-top: 0.35rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terra); }
.built-list a:hover .b-name, .built-list a:focus-visible .b-name { color: var(--teal); }

/* ——— Work page ——— */
.cat-grid { display: grid; gap: 1.8rem; }
@media (min-width: 800px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
.cat-card { background: #FFFDF8; border: 1px solid var(--paper-deep); border-radius: var(--radius); overflow: hidden; transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); display: flex; flex-direction: column; }
.cat-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-warm); }
.cat-card .card-photo { aspect-ratio: 16 / 9.5; }
.cat-card .cat-body { padding: 1.8rem 1.8rem 2.1rem; }
.cat-card h2 { font-family: var(--font-display); font-size: 1.55rem; text-transform: uppercase; font-weight: 400; line-height: 1.15; }
.cat-card .cat-lead { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; line-height: 1.35; margin: 0.8rem 0 0.9rem; }
.cat-card p { color: var(--ink-soft); font-size: 0.99rem; }
.work-approach { background: var(--teal); color: var(--paper); }
.work-approach h2 { font-size: var(--text-h2); max-width: 22ch; }
.work-approach .wa-lede { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.4; max-width: 46ch; margin-top: 1.4rem; }
.work-approach p { color: rgba(247, 240, 228, 0.85); margin-top: 1.1rem; max-width: 52ch; }

/* ——— Insights ——— */
.topic-grid { display: grid; gap: 1.6rem; }
@media (min-width: 700px) { .topic-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1120px) { .topic-grid { grid-template-columns: repeat(4, 1fr); } }
.topic-card { border-radius: var(--radius); padding: 1.9rem 1.6rem 2.1rem; transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); }
.topic-card:hover { transform: translateY(-7px) rotate(-0.5deg); box-shadow: var(--shadow-warm); }
.topic-card .t-num { font-family: var(--font-display); font-weight: 400; font-size: 1rem; letter-spacing: 0.2em; }
.topic-card h2 { font-family: var(--font-display); font-size: 1.4rem; text-transform: uppercase; font-weight: 400; line-height: 1.18; margin: 1rem 0 0.8rem; }
.topic-card p { font-size: 0.97rem; }
.topic-apricot { background: var(--apricot); color: var(--ink); }
.topic-rose { background: var(--rose); color: var(--ink); }
.topic-teal { background: var(--teal); color: var(--paper); }
.topic-butter { background: var(--butter); color: var(--ink); }
.insights-note { text-align: center; max-width: 56ch; margin-inline: auto; }
.insights-note h2 { font-size: var(--text-h3); margin-bottom: 1rem; }

/* ——— About ——— */
.about-hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.9rem); max-width: 16ch; }
.meet-grid { display: grid; gap: 2.8rem; align-items: start; }
@media (min-width: 1020px) { .meet-grid { grid-template-columns: 0.92fr 1.3fr; gap: 4.5rem; } }
.portrait-frame { aspect-ratio: 4 / 5.1; border-radius: 999px 999px var(--radius) var(--radius); box-shadow: var(--shadow-warm); }
.portrait-frame img { object-position: center 18%; }
.portrait-caption { font-size: 0.9rem; color: var(--ink-faint); margin-top: 0.9rem; text-align: center; }
.meet-copy h2 { font-size: var(--text-h2); margin-bottom: 0.4rem; }
.meet-copy .role { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--terra); margin-bottom: 1.6rem; }
.meet-copy p { color: var(--ink-soft); }
.meet-copy p + p { margin-top: 1.05rem; }
.meet-copy p strong { color: var(--ink); }
.story-grid { display: grid; gap: 2.4rem; }
@media (min-width: 1020px) { .story-grid { grid-template-columns: 1fr 1fr; gap: 4.5rem; } }
.story-grid h2 { font-size: var(--text-h3); margin-bottom: 1.2rem; }
.story-grid p { color: var(--ink-soft); }
.story-grid p + p { margin-top: 1.05rem; }
.big-statement { background: var(--ink); color: var(--paper); text-align: center; }
.big-statement .statement-text {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.16; max-width: 24ch; margin-inline: auto;
}
.big-statement .statement-text .script { font-size: 1.25em; }
.team-title { font-size: clamp(2.4rem, 5.4vw, 4.2rem); margin: 1.1rem 0 0.6rem; }
.team-title .amp-big {
  font-family: var(--font-script); color: var(--terra); font-weight: 400; text-transform: none;
  font-size: 1.35em; display: inline-block; transform: rotate(-3deg); padding-inline: 0.05em;
}
.team-statement { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 400; line-height: 1.3; max-width: 34ch; }
.team-body { columns: 1; max-width: 68ch; color: var(--ink-soft); margin-top: 1.6rem; }
.team-body p + p { margin-top: 1.05rem; }
.values-grid { display: grid; gap: 1.4rem; }
@media (min-width: 700px) { .values-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1120px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
.value-card { background: #FFFDF8; border: 1px solid var(--paper-deep); border-radius: var(--radius); padding: 1.8rem 1.7rem 2rem; transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); }
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-warm); }
.value-card .v-mark { font-family: var(--font-script); font-size: 1.9rem; color: var(--terra); line-height: 1; display: block; margin-bottom: 0.9rem; transform: rotate(-3deg); }
.value-card h3 { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; font-weight: 400; margin-bottom: 0.6rem; }
.value-card p { font-size: 0.97rem; color: var(--ink-soft); }
.note-card {
  background: #FFFDF8; border: 1px solid var(--paper-deep); border-radius: var(--radius);
  padding: clamp(2rem, 4.5vw, 3.4rem); box-shadow: var(--shadow-warm); max-width: 820px; margin-inline: auto;
}
.note-card h2 { font-size: var(--text-h3); margin-bottom: 1.4rem; }
.note-card p { color: var(--ink-soft); }
.note-card p + p { margin-top: 1.05rem; }
.signature { font-family: var(--font-script); color: var(--terra); font-size: 2.6rem; margin-top: 1.8rem; transform: rotate(-2deg); display: inline-block; }

/* ——— Contact ——— */
/* Contact hero: headline copy beside the postcard portrait (arch frame);
   stacked copy-then-image below the desktop breakpoint. */
.contact-hero-grid { display: grid; gap: 2.6rem; align-items: center; }
@media (min-width: 1020px) { .contact-hero-grid { grid-template-columns: 1fr 0.78fr; gap: 4.5rem; } }
.contact-grid { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 1020px) { .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 5rem; } }
.contact-copy h2 { font-size: var(--text-h3); margin: 2.2rem 0 1rem; }
.contact-copy p { color: var(--ink-soft); }
.contact-copy p + p { margin-top: 1rem; }
.not-sure { background: rgba(131, 184, 182, 0.30); border-radius: var(--radius); padding: 1.7rem 1.8rem; margin-top: 2.4rem; }
.not-sure h2 { margin-top: 0; }
.not-sure p { color: rgba(48, 37, 33, 0.85); }

/* ——— Legal ——— */
.legal { max-width: 760px; }
.legal h2 { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; margin: 2.2rem 0 0.8rem; font-weight: 400; }
.legal p { color: var(--ink-soft); }
.legal p + p { margin-top: 0.9rem; }
.draft-note {
  display: inline-block; background: var(--butter); border-radius: var(--radius);
  padding: 0.7rem 1.1rem; font-size: 0.9rem; font-weight: 600; margin-bottom: 1.6rem;
}

/* Script accents on dark grounds switch to butter for legibility
   (on paper they stay terracotta, per the design system) */
.site-footer .script, .final-cta .script, .about-preview .script,
.big-statement .script, .band-teal .script, .band-terra .script,
.band-ink .script { color: var(--butter); }

/* ============================================================
   Creative layer — ghost words, badge, fan cards (heavy pass)
   ============================================================ */

/* ——— Ghost words: outlined Libre Baskerville drifting behind sections ——— */
.has-ghost { overflow: hidden; }
.has-ghost > .wrap { position: relative; z-index: 1; }
.ghost-word {
  position: absolute; top: 1.6rem; left: 0; z-index: 0;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(7rem, 19vw, 16.5rem); line-height: 0.82; letter-spacing: 0.01em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(48, 37, 33, 0.10);
  white-space: nowrap; pointer-events: none; user-select: none;
  will-change: transform;
}
/* Phones: ghost words shrink to sit inside their section
   instead of bleeding past both edges of a narrow screen. */
@media (max-width: 700px) {
  .ghost-word { font-size: clamp(3.6rem, 15.5vw, 5.2rem); top: 1.1rem; }
}

/* ——— Hero photo wrap + rotating badge ——— */
.hero-photo-wrap { position: relative; }
.hero-badge {
  position: absolute; left: -26px; bottom: -26px; z-index: 4;
  width: clamp(98px, 9vw, 124px); aspect-ratio: 1;
  background: var(--paper); border-radius: 50%; box-shadow: var(--shadow-warm);
  display: grid; place-items: center;
}
.hero-badge svg { display: block; width: 94%; height: 94%; animation: badge-spin 18s linear infinite; }
.hero-badge svg text {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 2.6px; fill: var(--terra); text-transform: uppercase;
}
.hero-badge .badge-logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 60%; height: auto; display: block;
}
@keyframes badge-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .hero-badge { left: -8px; bottom: -14px; } }

/* ——— Approach: terracotta hairline draws over the ink rule ——— */
.steps { position: relative; }
.steps::before {
  content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; z-index: 1;
  background: var(--terra); transform-origin: 0 50%;
  transform: scaleX(var(--steps-draw, 1));
}

/* ——— Fan-in cards: GSAP drives transforms; CSS hover stays clean ——— */
[data-fan].animating { transition: none !important; }

/* ——— Pointer tilt targets ——— */
[data-tilt] { will-change: transform; }

/* ——— Work cards: image zoom under the clip reveal ——— */
.cat-card .card-photo img { transition: transform 0.9s var(--ease-out); }
.cat-card:hover .card-photo img { transform: scale(1.06); }

/* ——— Service cards (home): image zoom on hover ——— */
.svc-card .card-photo img { transition: transform 0.9s var(--ease-out); }
.svc-card:hover .card-photo img { transform: scale(1.06); }

/* ——— Help-with lists: items + script markers stagger in ——— */
.help-list li {
  transition: opacity 0.7s var(--ease-out) var(--ld, 0s),
              transform 0.7s var(--ease-out) var(--ld, 0s);
}
.help-list li::before {
  transition: opacity 0.5s ease var(--md, 0.05s),
              transform 0.6s var(--ease-out) var(--md, 0.05s);
}
html.anim .help-list li.pre-item { opacity: 0; transform: translateX(-18px); }
html.anim .help-list li.pre-item::before { opacity: 0; transform: rotate(-42deg) scale(0.3); }

/* ——— Business Systems: spinning record + tracklist share the hero ———
   The record is decoration (aria-hidden) and sits beside the help list:
   disc left, tracks right on desktop; stacked on mobile (record first,
   then the list) so the reading order never changes. The list carries
   the content and keeps its help-list / data-help stagger. */
.record-layout { margin-top: clamp(2.2rem, 5vw, 3.6rem); }
.record-side { margin-top: clamp(2rem, 5vw, 3rem); }
@media (min-width: 1020px) {
  .record-layout {
    display: grid; grid-template-columns: min(520px, 44%) 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start;
  }
  .record-layout .record-stage { width: 100%; }
  .record-side { margin-top: 0; }
}
.record-stage {
  position: relative; aspect-ratio: 1; width: min(520px, 86vw);
}
.record-stage::before { /* static vinyl sheen over the spinning disc */
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 32% 26%, rgba(247, 240, 228, 0.22), rgba(247, 240, 228, 0) 46%);
  pointer-events: none;
}
.record-disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: url("../img/record-disc.webp") center / cover no-repeat;
  box-shadow: var(--shadow-warm), inset 0 0 0 1px rgba(48, 37, 33, 0.08);
  animation: record-spin 18s linear infinite; will-change: transform;
}
@keyframes record-spin { to { transform: rotate(360deg); } }
.record-label {
  position: absolute; inset: 0; margin: auto; width: 34%; aspect-ratio: 1;
  border-radius: 50%; background: var(--butter); border: 2px solid var(--terra);
}
.record-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.record-ring text {
  font-family: var(--font-body); font-size: 7.4px; font-weight: 600;
  letter-spacing: 1.1px; fill: var(--ink); text-transform: uppercase;
}
.record-wordmark {
  position: absolute; left: 50%; top: 23%; transform: translateX(-50%);
  width: 56%; height: auto;
}
.record-speed {
  position: absolute; left: 50%; top: 59%; transform: translateX(-50%);
  font-family: var(--font-body); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.08em; color: var(--ink); white-space: nowrap;
}
.record-spindle {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--ink);
}
.record-spindle::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--paper);
}
.record-arm {
  position: absolute; right: -5%; bottom: -4%; width: 46%; height: auto; z-index: 3;
  pointer-events: none; filter: drop-shadow(0 8px 10px rgba(48, 37, 33, 0.28));
}
.arm-tube { stroke: var(--ink); stroke-width: 4.6; stroke-linecap: round; }
.arm-shell { fill: var(--ink); }
.arm-cart { fill: var(--terra); }
.arm-base { fill: var(--ink); }
.arm-pivot { fill: var(--terra); }

/* Solutions as record tracks: numbers replace the script-& markers
   only on this page's tracklist; the stagger reveal still applies. */
.help-list.track-list { grid-template-columns: 1fr; counter-reset: track; }
.help-list.track-list li {
  counter-increment: track;
  padding: 1.02rem 0 1.02rem 3.1rem;
}
.help-list.track-list li::before {
  content: counter(track, decimal-leading-zero);
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  left: 0; top: 50%; transform: translateY(-50%);
}

/* ——— About: the big script ampersand breathes ——— */
.team-title .amp-big { animation: amp-breathe 4.6s ease-in-out infinite alternate; }
@keyframes amp-breathe {
  from { transform: rotate(-3.5deg) scale(1); }
  to   { transform: rotate(-1deg) scale(1.055); }
}

/* ——— About statement: words illuminate on scroll (spans via JS) ——— */
.statement-text .w { will-change: opacity; }