:root {
  --ink: #0b0a09;
  --ink-soft: #11100e;
  --ivory: #f2eee6;
  --muted: #a9a397;
  --gold: #cba45c;
  --line: rgba(242, 238, 230, .16);
  --display: "Italiana", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 82px; }
body { margin: 0; background: var(--ink); color: var(--ivory); font-family: var(--sans); font-size: 16px; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
em { color: var(--gold); font-style: italic; font-weight: 400; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 200; background: var(--ivory); color: var(--ink); padding: .8rem 1rem; }
.skip-link:focus { top: 1rem; }
.grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }

.site-header { position: fixed; inset: 0 0 auto; height: 82px; z-index: 80; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 4vw; border-bottom: 1px solid transparent; transition: background .4s, border-color .4s, height .4s; }
.site-header.scrolled { height: 68px; background: rgba(11,10,9,.82); backdrop-filter: blur(18px); border-color: var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: .75rem; width: max-content; font-size: .88rem; letter-spacing: .11em; text-transform: uppercase; }
.wordmark em { font-family: var(--display); letter-spacing: .03em; text-transform: none; }
.wordmark-mark { width: 36px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(203,164,92,.65); border-radius: 50%; font-family: var(--display); font-size: .72rem; color: var(--gold); }
.brand-monogram { display: block; width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.brand-lockup { display: block; width: clamp(150px, 18vw, 215px); height: auto; object-fit: contain; }
.footer-brand { width: auto; }
.desktop-nav { display: flex; gap: 2.25rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.desktop-nav a { position: relative; color: rgba(242,238,230,.82); }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.55rem; height: 1px; background: var(--gold); transition: right .3s; }
.desktop-nav a:focus-visible::after { right: 0; }
@media (hover: hover) {
  .desktop-nav a:hover::after { right: 0; }
}
.header-actions { justify-self: end; display: flex; align-items: center; gap: 1rem; }
.icon-button, .bag-button, .menu-button { background: none; border: 0; cursor: pointer; }
.icon-button { width: 44px; height: 44px; padding: 10px; }
.icon-button svg { fill: none; stroke: currentColor; stroke-width: 1.4; }
/* Header controls answer the press itself, since the hover tint below is
   pointer-only and a touch tap would otherwise give no feedback at all. */
.icon-button:active, .menu-button:active { color: var(--gold); }
.bag-button { display: flex; align-items: center; gap: .6rem; text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; }
/* The Bag's own hover, focus and pressed states belong to the control defined in
   storefront-mobile.css, which owns it at every width; only the target size that
   styles.css already guaranteed is kept here. */
.bag-button { min-height: 44px; }
.menu-button { display: none; width: 44px; height: 44px; padding: 13px 9px; }
.menu-button span { display: block; height: 1px; background: currentColor; margin: 5px 0; transition: transform .3s; }
/* visibility must flip the instant the menu opens, or its links stay unfocusable for the whole
   fade; delaying it only on close is what keeps the fade-out. */
.mobile-menu { position: fixed; inset: 0; z-index: 70; background: var(--ink); padding: 120px 6vw 3rem; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.mobile-menu.open { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
/* The menu's composition — grouped navigation, type scale, open motion — lives
   in storefront-mobile.css, which owns the shared storefront shell. */
.mobile-menu nav { display: block; }
.mobile-menu p { color: var(--muted); margin-top: 2rem; }

.hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; align-items: center; padding: 8rem 7vw 5rem; isolation: isolate; }
.hero-image { position: absolute; inset: -5%; z-index: -3; background: url("assets/hero-jewellery.png") center/cover no-repeat; transform: scale(1.04); will-change: transform; }
.hero-scrim { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(5,4,3,.94) 0%, rgba(5,4,3,.72) 40%, rgba(5,4,3,.08) 78%), linear-gradient(0deg, rgba(5,4,3,.5), transparent 42%); }
.hero-orbit { position: absolute; width: min(42vw, 680px); aspect-ratio: 1; border: 1px solid rgba(203,164,92,.28); border-radius: 50%; left: 42%; top: 15%; animation: breathe 7s ease-in-out infinite; }
.hero-orbit::before { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(242,238,230,.12); border-radius: 50%; }
.hero-content { width: min(690px, 70vw); position: relative; z-index: 2; }
.eyebrow { margin: 0 0 1.5rem; text-transform: uppercase; letter-spacing: .25em; font-size: .72rem; color: var(--gold); }
.hero-eyebrow { opacity: 0; animation: rise .8s .2s forwards; }
.hero h1, .section h2, .site-footer h2 { font-family: var(--display); font-weight: 400; line-height: .88; letter-spacing: -.035em; margin: 0; }
.hero h1 { font-size: clamp(4.5rem, 10vw, 9.3rem); opacity: 0; animation: rise 1s .35s forwards; }
.hero-copy { width: min(470px, 100%); font-weight: 300; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.7; color: rgba(242,238,230,.72); margin: 2rem 0 2.5rem; opacity: 0; animation: rise .9s .55s forwards; }
.hero-actions { display: flex; align-items: center; gap: 2rem; opacity: 0; animation: rise .9s .7s forwards; }
.primary-cta { width: max-content; display: inline-flex; align-items: center; gap: 2.5rem; padding: .9rem .9rem .9rem 1.25rem; border: 1px solid rgba(242,238,230,.35); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; transition: background .3s, color .3s, border-color .3s; }
.primary-cta b { width: 35px; aspect-ratio: 1; display: grid; place-items: center; background: var(--gold); color: var(--ink); font-size: 1rem; font-weight: 400; transition: transform .3s; }
.primary-cta:focus-visible { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.primary-cta:focus-visible b { transform: rotate(45deg); }
.primary-cta:active { background: rgba(203,164,92,.24); border-color: rgba(203,164,92,.6); }
@media (hover: hover) {
  .primary-cta:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
  .primary-cta:hover b { transform: rotate(45deg); }
}
.text-link { min-height: 44px; display: inline-flex; align-items: center; font-size: .8rem; color: rgba(242,238,230,.7); border-bottom: 1px solid var(--line); }
.text-link span { margin-left: .6rem; }
.hero-index { position: absolute; left: 4vw; bottom: 2.2rem; display: flex; align-items: center; gap: .8rem; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); writing-mode: vertical-rl; }
.hero-index i { width: 1px; height: 40px; background: var(--line); }
.editorial-note { position: absolute; right: 3vw; bottom: 2rem; margin: 0; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(242,238,230,.45); }

.marquee { border-block: 1px solid var(--line); overflow: hidden; background: #0f0e0c; }
.marquee-track { width: max-content; display: flex; align-items: center; gap: 0; animation: marquee var(--marquee-duration, 48s) linear infinite; font-family: var(--display); text-transform: uppercase; font-size: 1.05rem; letter-spacing: .16em; }
.marquee-group { box-sizing: border-box; width: max-content; min-width: 100vw; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-around; gap: 2.4rem; padding: 1.15rem 2.4rem 1.15rem 0; white-space: nowrap; }
.marquee-track i { color: var(--gold); font-size: .65rem; }

.section { padding: clamp(6rem, 10vw, 10rem) 6vw; }
.section-heading { display: grid; grid-template-columns: 1fr minmax(260px, .45fr); gap: 3rem; align-items: end; margin-bottom: 5rem; }
.section-heading h2 { font-size: clamp(3.4rem, 7vw, 6.8rem); }
.section-heading > p { max-width: 380px; color: var(--muted); line-height: 1.7; font-weight: 300; }
.categories { background: var(--ivory); color: var(--ink); }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 360px; gap: 1px; background: rgba(11,10,9,.22); border: 1px solid rgba(11,10,9,.2); }
.category-card { position: relative; width: 100%; min-width: 0; overflow: hidden; padding: 1.5rem; border: 0; background: #dcd7ce; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; text-align: left; cursor: pointer; transition: color .35s; }
.category-card--wide { grid-column: span 2; }
.category-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 60% 45%, color-mix(in srgb, var(--tone) 58%, transparent), transparent 38%), linear-gradient(135deg, #e7e2d8, #c9c2b7); transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s; }
.category-card::after { content: ""; position: absolute; z-index: -1; width: 48%; aspect-ratio: 1; border: 1px solid rgba(11,10,9,.25); border-radius: 50%; right: 12%; top: 18%; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.category-card-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.category-card--photographic { color: var(--ivory); background: #171513; }
.category-card--photographic::after { inset: 0; width: auto; aspect-ratio: auto; border: 0; border-radius: 0; background: linear-gradient(180deg, rgba(5,4,3,.38), rgba(5,4,3,.1) 38%, rgba(5,4,3,.78)); }
.category-card--photographic:focus-visible .category-card-photo { transform: scale(1.04); }
.category-card--photographic p { opacity: .9; }
.category-card--photographic b { border-color: rgba(242,238,230,.65); }
.category-card:active::before { transform: scale(1.04); }
.category-number { font-size: .7rem; letter-spacing: .15em; }
.category-card p { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .5rem; opacity: .65; }
.category-card h3 { font-family: var(--display); font-size: clamp(2rem, 3vw, 3.6rem); font-weight: 400; margin: 0; }
.category-card b { position: absolute; right: 1.5rem; bottom: 1.5rem; width: 40px; aspect-ratio: 1; border: 1px solid rgba(11,10,9,.3); border-radius: 50%; display: grid; place-items: center; font-weight: 400; transition: transform .3s, background .3s; }
/* Decorative hover lives behind `hover: hover` throughout this file. On a touch
   screen `:hover` is latched by the tap and then *stays* latched, so a card the
   visitor brushed past keeps its scale and lift applied and animates as it
   scrolls away. `:focus-visible` is deliberately left outside the guard so
   keyboard users still get the same treatment, and each control gains an
   `:active` state for the immediate press feedback touch actually needs. */
@media (hover: hover) {
  .category-card:hover::before { transform: scale(1.08); filter: contrast(1.06); }
  .category-card:hover::after { transform: scale(1.15) translateX(-10%); }
  .category-card--photographic:hover::after { transform: none; }
  .category-card:hover b { transform: rotate(45deg); background: var(--ink); color: var(--ivory); }
  .category-card--photographic:hover .category-card-photo { transform: scale(1.04); }
}
.more-categories { border-top: 1px solid rgba(11,10,9,.2); margin-top: 3rem; }
.more-categories summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; padding: 1.5rem 0; text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; }
.more-categories summary::-webkit-details-marker { display: none; }
.more-categories[open] summary span { transform: rotate(45deg); }
.category-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(11,10,9,.2); }
.category-list-button { width: 100%; display: flex; justify-content: space-between; font-family: var(--display); font-size: 1.5rem; padding: 1.4rem 1rem 1.4rem 0; border: 0; border-bottom: 1px solid rgba(11,10,9,.15); background: none; text-align: left; cursor: pointer; }

.editorial { display: grid; grid-template-columns: .75fr 1.25fr; gap: 7vw; align-items: center; min-height: 800px; background: #0e0d0b; }
.editorial-copy h2 { font-size: clamp(3.7rem, 6.5vw, 7rem); }
.editorial-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.8; max-width: 500px; }
.outline-cta { margin-top: 1.5rem; padding: 1rem 1.2rem; border: 1px solid var(--line); background: transparent; text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; cursor: pointer; transition: background-color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.outline-cta { display: inline-flex; align-items: center; min-height: 48px; }
.outline-cta span { display: inline-block; padding-left: 1.8rem; color: var(--gold); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.outline-cta:focus-visible { background: rgba(242,238,230,.07); border-color: rgba(203,164,92,.65); }
.outline-cta:focus-visible span { transform: translate(3px,-3px); }
.outline-cta:active { transform: translateY(1px); background: rgba(203,164,92,.14); }
@media (hover: hover) {
  .outline-cta:hover { background: rgba(242,238,230,.07); border-color: rgba(203,164,92,.65); }
  .outline-cta:hover span { transform: translate(3px,-3px); }
}
.editorial-stack { position: relative; min-height: 570px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.editorial-card { height: 420px; padding: 1.3rem; background: linear-gradient(145deg, #16130f, #2b2116 55%, #0f0e0c); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-4deg); transition: transform .5s, border-color .4s; }
.editorial-card:nth-child(3) { transform: rotate(4deg); }
.editorial-card--middle { height: 520px; z-index: 2; transform: translateY(-15px); background: radial-gradient(circle at 50% 40%, rgba(203,164,92,.32), transparent 34%), linear-gradient(160deg,#181410,#070706); }
.editorial-card:active { border-color: rgba(203,164,92,.4); }
@media (hover: hover) {
  .editorial-card:hover { transform: rotate(0) translateY(-12px); border-color: rgba(203,164,92,.55); }
  .editorial-card--middle:hover { transform: translateY(-28px); }
}
.editorial-card span { color: var(--gold); font-size: .7rem; }
.editorial-card p { font-family: var(--display); font-size: 1.25rem; line-height: 1.25; }
.editorial-card--product { position: relative; overflow: hidden; background: #1a1713; isolation: isolate; }
.editorial-card--product img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.editorial-card--product::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.22), transparent 35%, rgba(0,0,0,.72)); }
.editorial-card--product:focus-visible img { transform: scale(1.04); }
@media (hover: hover) {
  .editorial-card--product:hover img { transform: scale(1.04); }
}
.editorial-card--product p { margin: 0; color: var(--ivory); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.editorial-card--product span { color: var(--ivory); }

.finishes { background: #171513; }
.finish-list { border-top: 1px solid var(--line); }
.finish-row { width: 100%; display: grid; grid-template-columns: 60px 1fr 1fr 60px; gap: 1rem; align-items: center; padding: 1.5rem 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; position: relative; isolation: isolate; overflow: hidden; }
.finish-row::before { content: ""; position: absolute; inset: 0 100% 0 0; z-index: -1; background: var(--finish); transition: right .55s cubic-bezier(.2,.7,.2,1); opacity: .78; }
/* On touch the colour wipe is driven by `:active`, so the label has to invert
   with it — a filled row under unchanged muted text would be unreadable for as
   long as the press lasts. */
.finish-row:active { color: var(--ink); }
.finish-row:active::before { right: 0; }
.finish-row:active p, .finish-row:active > span { color: var(--ink); }
.finish-row > span { font-size: .68rem; color: var(--muted); }
.finish-row h3 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4vw, 4rem); margin: 0; }
.finish-row p { color: var(--muted); line-height: 1.7; }
@media (hover: hover) {
  .finish-row:hover { color: var(--ink); }
  .finish-row:hover::before { right: 0; }
  .finish-row:hover p, .finish-row:hover > span { color: var(--ink); }
}
.finish-row b { justify-self: end; font-weight: 400; }

.story { position: relative; min-height: 720px; display: grid; place-content: center; text-align: center; padding: 8rem 6vw; overflow: hidden; }
.story-line { position: absolute; width: 650px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(203,164,92,.18); left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 100px rgba(203,164,92,.06) inset; }
.story-line::after { content: ""; position: absolute; inset: 11%; border-radius: 50%; border: 1px solid var(--line); }
.story blockquote { margin: 0; font-family: var(--display); font-size: clamp(3rem, 6vw, 6.5rem); line-height: 1.02; letter-spacing: -.035em; position: relative; }
.story-copy { width: min(540px, 90vw); margin: 2.5rem auto 0; color: var(--muted); line-height: 1.8; position: relative; }
.service-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.service-strip article { min-height: 220px; padding: 2rem; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; }
.service-strip article:last-child { border: 0; }
.service-strip span { margin-bottom: auto; color: var(--gold); font-size: .7rem; }
.service-strip h3 { font-family: var(--display); font-size: 1.8rem; font-weight: 400; margin: 0 0 .5rem; }
.service-strip p { color: var(--muted); margin: 0; line-height: 1.7; }

.site-footer { padding: 7rem 6vw 2rem; background: #070706; }
.footer-top { display: flex; align-items: end; justify-content: space-between; gap: 3rem; padding-bottom: 6rem; border-bottom: 1px solid var(--line); }
.footer-top h2 { font-size: clamp(4rem, 8vw, 8rem); }
/* The footer used to carry two columns of contact/social and store-information
   buttons. None of them had a real destination — no WhatsApp number, Instagram
   handle, contact address or policy page exists in the project — so they were
   removed rather than pointed at a placeholder notice. What is left is the brand
   block and the copyright, so the grid collapses to a single column instead of
   leaving two empty tracks beside the brand. */
.footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; padding-top: 2.5rem; font-size: .78rem; }
.footer-brand-block { display: grid; gap: .9rem; }
.footer-note { margin: 0; color: var(--muted); font-size: .72rem; letter-spacing: .05em; }
.footer-copyright { grid-column: 1 / -1; margin: 1.25rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--line); color: var(--muted); }

.reveal { opacity: 1; transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal { opacity: 0; transform: translateY(36px); }
.js .reveal.visible { opacity: 1; transform: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

@keyframes rise { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(25px); } }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .55; } }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav { display: none; }
  .menu-button { display: block; }
  .bag-button { display: flex; }
  .hero-content { width: min(700px, 88vw); }
  .hero-scrim { background: linear-gradient(90deg,rgba(5,4,3,.94),rgba(5,4,3,.58) 70%,rgba(5,4,3,.3)); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .category-card--wide { grid-column: span 1; }
  .editorial { grid-template-columns: 1fr; }
  .editorial-copy { max-width: 720px; }
}

@media (max-width: 700px) {
  section[id] { scroll-margin-top: 70px; }
  .site-header { height: 70px; padding-inline: 5vw; }
  .wordmark > span:last-child { font-size: .68rem; }
  .hero { align-items: end; padding: 7rem 5vw 6rem; min-height: 92svh; }
  .hero-image { background-position: 62% center; }
  .hero-scrim { background: linear-gradient(0deg,rgba(5,4,3,.96) 4%,rgba(5,4,3,.55) 65%,rgba(5,4,3,.35)); }
  /* The orbit is a halo around the jewellery on desktop, where the content
     column and the circle occupy different halves of the screen. Below this
     width the content column takes the full width and the hero aligns to the
     bottom, so the circle has nothing left to frame: it clips against the top
     edge and cuts through the eyebrow. Removed rather than repositioned —
     there is no room left in this composition for it to mean anything. */
  .hero-orbit { display: none; }
  .hero h1 { font-size: clamp(3.35rem, 14vw, 5.5rem); }
  .hero-copy { font-size: 1rem; margin-block: 1.5rem; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .hero-index, .editorial-note { display: none; }
  .section { padding: 6rem 5vw; }
  .section-heading { grid-template-columns: 1fr; margin-bottom: 3rem; }
  .section-heading h2 { font-size: clamp(2.7rem, 11vw, 4.25rem); }
  .category-grid { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .category-list { grid-template-columns: 1fr; }
  .editorial { gap: 3rem; min-height: 0; }
  .editorial-copy h2 { font-size: clamp(2.8rem, 11vw, 4.5rem); }
  .editorial-stack { min-height: 0; grid-template-columns: 1fr; gap: .75rem; }
  .editorial-card, .editorial-card--middle, .editorial-card:nth-child(3) { height: 150px; padding: 1rem; transform: none; }
  @media (hover: hover) {
    .editorial-card:hover, .editorial-card--middle:hover { transform: translateY(-4px); }
  }
  .finish-row { grid-template-columns: 40px 1fr 35px; }
  .finish-row p { display: none; }
  .story { min-height: 500px; }
  .story blockquote { font-size: clamp(2.5rem, 10vw, 4rem); }
  .story-line { width: 125vw; }
  .service-strip { grid-template-columns: 1fr; }
  .service-strip article { min-height: 180px; border-right: 0; border-bottom: 1px solid var(--line); }
  .footer-top { align-items: flex-start; flex-direction: column; }
  .footer-top h2 { font-size: clamp(3.1rem, 12vw, 5rem); }
  .footer-bottom { grid-template-columns: minmax(0, 1fr); }
  .footer-brand-block, .footer-copyright { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
  .wordmark { gap: .35rem; }
  .wordmark > span:last-child { font-size: .6rem; letter-spacing: .06em; }
  .header-actions { gap: .25rem; }
  .hero h1 { font-size: clamp(3.2rem, 14vw, 3.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Delays are zeroed as well as durations: a staggered reveal would otherwise
     still make a reduced-motion visitor wait out the stagger. */
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
  .marquee-track { width: 100%; flex-wrap: wrap; justify-content: center; }
  .marquee-group { width: 100%; min-width: 0; flex-wrap: wrap; justify-content: center; gap: .8rem 1.2rem; padding: 1rem; white-space: normal; }
  .marquee-group:nth-child(2), .marquee-group:first-child > :nth-child(n+9) { display: none; }
}