/* ==================================================================
   Royal Empire — Option C layer (v21)
   Warm off-white ground, white cards, gold accents, black CTAs, Inter.
   Loads AFTER royal.css and restyles shared chrome; adds c-* components.
   ================================================================== */
:root {
  --c-ground: #f6f4ef;
  --c-card: #ffffff;
  --c-line: #e6e1d6;
  --c-ink: #121110;
  --c-muted: #6b665c;
  --c-gold: #c9a24a;
  --c-gold-bright: #e9c86a;
  --c-gold-deep: #9a7a2e;
  --c-dark: #141311;
  --c-dark-2: #1d1b17;
  --c-radius: 6px;
  --c-shadow: 0 18px 40px -28px rgba(18,17,16,.35);
}
body { background: var(--c-ground); color: var(--c-ink); }

/* ---------- Header: original theme, untouched */

/* ---------- Shared type + sections */
.section { background: transparent; border-bottom: 0; padding-top: 64px; padding-bottom: 64px; }
.c-wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px,5vw,72px); }
.c-section { padding: clamp(56px,7vw,88px) 0; }
.c-section + .c-section { padding-top: 0; }
.c-head { display: grid; grid-template-columns: minmax(260px,.9fr) minmax(0,1.6fr); gap: clamp(20px,4vw,56px); align-items: start; }
.c-head > div > p:not(.kicker) { margin: 12px 0 0; color: var(--c-muted); line-height: 1.7; max-width: 42ch; }
.c-head .c-btn { text-decoration: none; width: auto; align-self: flex-start; justify-self: start; }
.c-btn { text-decoration: none; width: auto; align-self: flex-start; justify-self: start; }
.c-card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--c-radius); transition: transform .32s ease, box-shadow .32s ease, border-color .3s ease; }
.c-card:hover { transform: translateY(-4px); box-shadow: var(--c-shadow); border-color: rgba(201,162,74,.6); }
.c-soft { background: #f1eee6; border: 1px solid var(--c-line); border-radius: var(--c-radius); }

/* ---------- Hero */
.c-hero { position: relative; min-height: min(78vh, 760px); display: grid; align-items: center; padding: clamp(56px,8vw,110px) clamp(20px,5vw,72px); overflow: hidden; isolation: isolate; background: var(--c-dark); color: var(--c-ink); }
.c-hero-bg { position: absolute; inset: 0; z-index: -2; }
.c-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; animation: re-kenburns 24s ease-in-out infinite alternate; }
.c-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(246,244,239,.96) 0%, rgba(246,244,239,.9) 34%, rgba(246,244,239,.35) 58%, rgba(246,244,239,0) 78%); }
.c-hero-inner { max-width: 1320px; margin: 0 auto; width: 100%; }
.c-hero-copy { max-width: 560px; }
.c-hero h1 { max-width: 12ch; }
.c-hero h1 em { font-style: normal; color: var(--c-gold-deep); }
.c-hero h1 .swap { display: inline-grid; color: var(--c-gold-deep); }
.c-hero h1 .swap span { grid-column: 1; grid-row: 1; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s ease; white-space: nowrap; }
.c-hero h1 .swap span.on { opacity: 1; transform: none; }
.c-hero p:not(.kicker) { margin: 18px 0 0; max-width: 46ch; color: #3f3a32; font-size: 17px; line-height: 1.65; }
.c-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.c-hero-tags { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); }
.c-hero-note { position: absolute; right: clamp(20px,5vw,72px); bottom: clamp(24px,4vw,44px); display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 18px; border-radius: 8px; background: #fff; color: var(--c-ink); box-shadow: 0 18px 40px -20px rgba(0,0,0,.4); text-decoration: none; font-weight: 900; font-size: 15px; line-height: 1.2; }
.c-hero-note i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--c-ink); color: var(--c-gold-bright); font-style: normal; transition: transform .25s ease; }
.c-hero-note:hover i { transform: translateX(4px); }
.c-hero-copy > * { animation: re-rise .8s cubic-bezier(.2,.8,.2,1) both; }
.c-hero-copy > :nth-child(2) { animation-delay: .08s; } .c-hero-copy > :nth-child(3) { animation-delay: .16s; } .c-hero-copy > :nth-child(4) { animation-delay: .24s; } .c-hero-copy > :nth-child(5) { animation-delay: .32s; }

/* ---------- Stats band */
.c-stats { background: var(--c-dark); color: #fff; }
.c-stats .c-wrap { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.c-stat { display: flex; align-items: center; gap: 16px; padding: 26px 22px; border-left: 1px solid rgba(255,255,255,.1); }
.c-stat:first-child { border-left: 0; }
.c-stat i { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; color: var(--c-gold-bright); }
.c-stat i svg { width: 26px; height: 26px; }
.c-stat strong { display: block; font-size: 28px; font-weight: 900; line-height: 1; color: var(--c-gold-bright); font-variant-numeric: tabular-nums; }
.c-stat span { display: block; margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.72); }

/* ---------- Gold ticker */
.c-ticker { display: flex; overflow: hidden; background: var(--c-gold); color: var(--c-ink); border-top: 1px solid rgba(0,0,0,.12); border-bottom: 1px solid rgba(0,0,0,.12); }
.c-ticker span { flex: 0 0 auto; padding: 12px 0; font-size: 12px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; animation: ticker 40s linear infinite; }
.c-ticker:hover span { animation-play-state: paused; }
.c-ticker b { margin: 0 22px; font-weight: 400; opacity: .5; }

/* ---------- What we do */
.c-what { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(20px,4vw,72px); align-items: start; }
.c-what p { margin: 0; color: var(--c-muted); font-size: 16px; line-height: 1.75; }

/* ---------- Index tabs */
.c-index { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); border: 1px solid var(--c-line); border-radius: var(--c-radius); background: #fff; overflow: hidden; }
.c-index a { position: relative; display: grid; gap: 6px; padding: 16px 18px; border-left: 1px solid var(--c-line); text-decoration: none; color: var(--c-ink); font-weight: 800; font-size: 14px; transition: background .2s ease; }
.c-index a:first-child { border-left: 0; }
.c-index a span { font-size: 11px; font-weight: 900; letter-spacing: .12em; color: var(--c-gold-deep); }
.c-index a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c-gold); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.c-index a:hover::after, .c-index a.active::after { transform: scaleX(1); }
.c-index a:hover { background: #faf8f3; }

/* ---------- Studio model: soft card + photo tiles */
.c-model { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.5fr); gap: 16px; align-items: stretch; }
.c-model-lead { padding: clamp(24px,3vw,34px); display: flex; flex-direction: column; justify-content: center; }
.c-model-lead p { margin: 12px 0 0; color: var(--c-muted); line-height: 1.7; }
.c-model-lead .c-btn { text-decoration: none; width: auto; align-self: flex-start; justify-self: start; }
.c-tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.c-tile { position: relative; aspect-ratio: 1 / .92; border-radius: var(--c-radius); overflow: hidden; background: var(--c-dark); text-decoration: none; color: #fff; }
.c-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.c-tile:hover img { transform: scale(1.05); }
.c-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,.08) 55%); }
.c-tile span { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 900; letter-spacing: .04em; }
.c-tile span i { font-style: normal; color: var(--c-gold-bright); transition: transform .25s ease; }
.c-tile:hover span i { transform: translateX(4px); }

/* ---------- Services: tab row on top, panel copy + photo */
.c-services .service-system { display: block; }
.c-services .service-tabs { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.c-services .service-tabs button { display: grid; justify-items: center; gap: 8px; min-height: 76px; padding: 12px; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: #fff; color: var(--c-ink); font-weight: 900; font-size: 13px; text-align: center; position: relative; overflow: hidden; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.c-services .service-tabs button svg { width: 22px; height: 22px; color: var(--c-gold-deep); }
.c-services .service-tabs button:hover { transform: translateY(-2px); border-color: var(--c-gold); background: #fff; }
.c-services .service-tabs button.active { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.c-services .service-tabs button.active svg { color: var(--c-gold-bright); }
.c-services .service-tabs button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c-gold); transform: scaleX(0); transform-origin: left; }
.c-services .service-tabs button.active.timing::after { animation: re-fill 7s linear forwards; }
.c-services .service-panels { border: 1px solid var(--c-line); border-radius: var(--c-radius); background: #fff; overflow: hidden; }
.c-services .service-panels article { display: none; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); min-height: 380px; padding: 0; }
.c-services .service-panels article.active { display: grid; }
.c-services .service-panels .copy { padding: clamp(24px,3.4vw,40px); display: flex; flex-direction: column; justify-content: center; }
.c-services .service-panels .copy > span { color: var(--c-gold-deep); font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.c-services .service-panels p { margin: 12px 0 0; color: var(--c-muted); line-height: 1.7; max-width: 48ch; }
.c-services .service-panels ul { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; max-width: 420px; }
.c-services .service-panels li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.c-services .service-panels li::before { content: "\2713"; flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--c-gold); color: var(--c-ink); font-size: 11px; font-weight: 900; }
.c-services .service-panels .copy .c-btn { text-decoration: none; width: auto; align-self: flex-start; justify-self: start; }
.c-services .service-panels figure { margin: 0; position: relative; min-height: 300px; background: var(--c-dark); }
.c-services .service-panels figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.c-services .service-panels figcaption { position: absolute; left: 14px; bottom: 14px; padding: 7px 10px; border-radius: 4px; background: rgba(18,17,16,.82); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Engagements: photo cards */
.c-engage { display: grid; grid-template-columns: minmax(240px,.75fr) repeat(3, minmax(0,1fr)); gap: 14px; align-items: start; }
.c-engage-card { display: flex; flex-direction: column; overflow: hidden; }
.c-engage-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.c-engage-card div { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 20px; }
.c-engage-card small { font-size: 11px; font-weight: 900; letter-spacing: .16em; color: var(--c-gold-deep); }
.c-engage-card p { margin: 8px 0 0; color: var(--c-muted); font-size: 14px; line-height: 1.6; flex: 1; }
.c-engage-card .c-btn { text-decoration: none; width: auto; align-self: flex-start; justify-self: start; }

/* ---------- Pricing preview */
.c-pricing { display: grid; grid-template-columns: minmax(240px,.7fr) minmax(0,1.3fr) minmax(200px,.6fr); gap: 14px; align-items: stretch; }
.c-pricing-copy p { margin: 10px 0 0; color: var(--c-muted); line-height: 1.7; }
.c-pricing-copy .c-btn { text-decoration: none; width: auto; align-self: flex-start; justify-self: start; }
.c-est { padding: clamp(20px,3vw,28px); }
.c-est strong { display: block; font-size: 20px; }
.c-est > p { margin: 6px 0 0; color: var(--c-muted); font-size: 14px; }
.c-est .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.c-est .chips button { padding: 9px 13px; border: 1px solid var(--c-line); border-radius: 4px; background: #fff; color: var(--c-ink); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.c-est .chips button:hover { border-color: var(--c-gold); transform: translateY(-1px); }
.c-est .chips button.on { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.c-est .total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.c-est .total span { font-size: 13px; color: var(--c-muted); }
.c-est .total strong { font-size: 30px; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.c-est .c-btn { text-decoration: none; width: auto; align-self: flex-start; justify-self: start; }
.c-photo { position: relative; min-height: 260px; border-radius: var(--c-radius); overflow: hidden; background: var(--c-dark); }
.c-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Store strip */
.c-store { display: grid; grid-template-columns: minmax(220px,.7fr) repeat(4, minmax(0,1fr)) minmax(120px,.55fr); gap: 12px; align-items: stretch; }
.c-store-copy p { margin: 10px 0 0; color: var(--c-muted); line-height: 1.65; font-size: 15px; }
.c-store-copy .c-btn { text-decoration: none; width: auto; align-self: flex-start; justify-self: start; }
.c-product-tile { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--c-ink); }
.c-product-tile .shot { aspect-ratio: 1; background: #f1eee6; overflow: hidden; }
.c-product-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.c-product-tile:hover img { transform: scale(1.05); }
.c-product-tile span { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-size: 13px; font-weight: 900; }
.c-product-tile span i { font-style: normal; color: var(--c-gold-deep); transition: transform .25s ease; }
.c-product-tile:hover span i { transform: translateX(4px); }
.c-gold-tile { display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border-radius: var(--c-radius); background: var(--c-gold); color: var(--c-ink); text-decoration: none; font-size: 17px; font-weight: 900; line-height: 1.25; letter-spacing: .02em; text-transform: uppercase; transition: background .2s ease, transform .3s ease; }
.c-gold-tile i { width: 40px; height: 40px; display: grid; place-items: center; border: 1.5px solid var(--c-ink); border-radius: 50%; font-style: normal; margin-top: 18px; transition: background .2s ease, color .2s ease; }
.c-gold-tile:hover { background: var(--c-gold-bright); transform: translateY(-4px); }
.c-gold-tile:hover i { background: var(--c-ink); color: var(--c-gold-bright); }

/* ---------- Selected work: laptop frames */
.c-work { display: grid; grid-template-columns: minmax(220px,.7fr) repeat(4, minmax(0,1fr)); gap: 12px; align-items: start; }
.c-work-copy p { margin: 10px 0 0; color: var(--c-muted); line-height: 1.65; font-size: 15px; }
.c-work-copy .c-btn { text-decoration: none; width: auto; align-self: flex-start; justify-self: start; }
.c-laptop { display: block; text-decoration: none; color: var(--c-ink); }
.c-laptop .screen { position: relative; aspect-ratio: 16 / 10; border-radius: 8px 8px 2px 2px; border: 5px solid #1b1a18; border-bottom-width: 12px; background: #1b1a18; overflow: hidden; box-shadow: var(--c-shadow); transition: transform .35s ease; }
.c-laptop .screen::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 46px; height: 5px; margin-left: -23px; border-radius: 0 0 4px 4px; background: #3a3833; }
.c-laptop .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s ease; }
.c-laptop:hover .screen { transform: translateY(-4px); }
.c-laptop:hover .screen img { transform: scale(1.03); }
.c-laptop .base { height: 8px; margin: 0 -6px; border-radius: 0 0 10px 10px; background: linear-gradient(#d9d5cc, #b9b4a8); }
.c-laptop .meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.c-laptop .meta strong { display: block; font-size: 15px; }
.c-laptop .meta small { display: block; color: var(--c-muted); font-size: 12px; margin-top: 2px; }
.c-laptop .meta i { flex: 0 0 auto; font-style: normal; color: var(--c-gold-deep); font-weight: 900; }

/* ---------- Build notes */
.c-notes { display: grid; grid-template-columns: minmax(220px,.7fr) repeat(3, minmax(0,1fr)); gap: 12px; align-items: start; }
.c-notes-copy p { margin: 10px 0 0; color: var(--c-muted); line-height: 1.65; font-size: 15px; }
.c-notes-copy .c-btn { text-decoration: none; width: auto; align-self: flex-start; justify-self: start; }
.c-note { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--c-ink); }
.c-note .shot { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-dark); }
.c-note .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s ease; }
.c-note:hover .shot img { transform: scale(1.04); }
.c-note .shot em { position: absolute; left: 0; bottom: 0; padding: 6px 10px; background: var(--c-gold); color: var(--c-ink); font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.c-note .foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 0 16px 16px; font-size: 12px; color: var(--c-muted); }
.c-note .foot i { font-style: normal; color: var(--c-ink); font-weight: 900; }

/* ---------- Sectors + method */
.c-sectors { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(0,2.3fr); gap: 12px; align-items: start; }
.c-sectors-copy p { margin: 10px 0 0; color: var(--c-muted); line-height: 1.65; font-size: 14px; }
.c-icon-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.c-icon-item { display: flex; align-items: center; gap: 12px; padding: 14px 14px; font-size: 14px; font-weight: 800; }
.c-icon-item i { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--c-line); color: var(--c-gold-deep); font-style: normal; }
.c-icon-item i svg { width: 18px; height: 18px; }
.c-method { display: grid; grid-template-columns: minmax(220px,.7fr) repeat(4, minmax(0,1fr)); gap: 12px; align-items: start; }
.c-step { padding: 18px; }
.c-step .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.c-step .row i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--c-line); color: var(--c-gold-deep); font-style: normal; }
.c-step .row i svg { width: 18px; height: 18px; }
.c-step .row em { font-style: normal; color: var(--c-gold-deep); font-weight: 900; }
.c-step strong { display: block; margin-top: 12px; font-size: 16px; }
.c-step small { display: block; margin-top: 4px; font-size: 11px; font-weight: 900; letter-spacing: .12em; color: var(--c-gold-deep); }
.c-step p { margin: 6px 0 0; color: var(--c-muted); font-size: 13px; line-height: 1.55; }

/* ---------- Contact */
.c-contact { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(0,1.6fr) minmax(200px,.6fr); gap: 14px; align-items: stretch; }
.c-contact-copy p { margin: 10px 0 0; color: var(--c-muted); line-height: 1.65; font-size: 14px; }
.c-contact-copy a { color: var(--c-gold-deep); font-weight: 800; }
.c-contact .brief { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; padding: clamp(18px,2.6vw,26px); background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); }
.c-contact .brief label { font-size: 11px; font-weight: 900; letter-spacing: .1em; color: var(--c-ink); }
.c-contact .brief input, .c-contact .brief select, .c-contact .brief textarea { background: #fff; color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 4px; font-weight: 500; transition: border-color .2s ease, box-shadow .2s ease; }
.c-contact .brief input:focus, .c-contact .brief select:focus, .c-contact .brief textarea:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 4px rgba(201,162,74,.2); }
.c-contact .brief label.full { grid-column: 1 / -1; }
.c-contact .brief textarea { min-height: 96px; }
.c-contact .brief button { grid-column: 1 / -1; }
.c-contact .brief .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.c-contact .brief-status { grid-column: 1 / -1; color: var(--c-ink); }

/* ---------- Footer */
.site-footer { background: var(--c-dark); }
.footer-socials a { border-radius: 4px; }
.footer-socials a:hover { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); }
.footer-feed a:hover { color: var(--c-gold-bright); }

/* ---------- Inner-page harmonisation */
.checkout-hero, .store-hero, .ceo-hero, .portfolio-hero, .legal-hero { background: linear-gradient(180deg, #fff, var(--c-ground)); }
.price-card, .product-card, .research-grid article, .engagement-grid article, .sector-grid article, .method-grid article, .ceo-career article, .cart-panel, .estimate-form, .checkout-summary-mini, .pricing-preview-card { border-radius: var(--c-radius); background: #fff; }
.price-card:hover, .product-card:hover, .research-grid article:hover { transform: translateY(-4px); box-shadow: var(--c-shadow); border-color: rgba(201,162,74,.6); }
.estimate-result { border-radius: var(--c-radius); }
.service-modal-card, .product-modal-card { border-radius: 10px; }

/* ---------- Motion */
@keyframes re-kenburns { from { transform: scale(1); } to { transform: scale(1.06) translate(-1%, -1%); } }
@keyframes re-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes re-fill { to { transform: scaleX(1); } }
@keyframes re-bump { 40% { transform: scale(1.08); } }
@keyframes ticker { to { transform: translateX(-100%); } }
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } .c-hero-bg img, .c-hero-copy > * { animation: none; } }

/* ---------- Responsive */
@media (max-width: 1100px) {
  .c-engage, .c-work, .c-notes, .c-method { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .c-engage > :first-child, .c-work > :first-child, .c-notes > :first-child, .c-method > :first-child { grid-column: 1 / -1; }
  .c-store { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .c-store > :first-child { grid-column: 1 / -1; }
  .c-pricing, .c-contact { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); }
  .c-pricing .c-photo, .c-contact .c-photo { display: none; }
  .c-index { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .c-index a:nth-child(4) { border-left: 0; }
  .c-icon-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 800px) {
  .c-hero { min-height: 0; }
  .c-hero::before { background: linear-gradient(0deg, rgba(246,244,239,.98) 0%, rgba(246,244,239,.9) 55%, rgba(246,244,239,.35) 100%); }
  .c-hero-note { position: static; margin-top: 24px; display: inline-flex; }
  .c-stats .c-wrap { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .c-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .c-what, .c-model, .c-head, .c-pricing, .c-contact, .c-sectors { grid-template-columns: minmax(0,1fr); }
  .c-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .c-services .service-tabs { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .c-services .service-panels article { grid-template-columns: minmax(0,1fr); }
  .c-services .service-panels figure { order: -1; min-height: 200px; aspect-ratio: 16 / 9; }
  .c-contact .brief { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .c-engage, .c-work, .c-notes, .c-method, .c-store, .c-tiles, .c-icon-grid, .c-index { grid-template-columns: minmax(0,1fr); }
  .c-index a { border-left: 0; border-top: 1px solid var(--c-line); }
  .c-services .service-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .c-contact .brief { grid-template-columns: minmax(0,1fr); }

}

/* ==================================================================
   C3 — bold contrast: alternating dark / cream bands, gold rules
   ================================================================== */
.c-band-dark { background: var(--c-dark); color: #fff; padding: clamp(56px,7vw,88px) 0; position: relative; }
.c-band-dark + .c-band-dark { padding-top: 0; }
.c-section + .c-band-dark, .c-band-dark + .c-section { padding-top: clamp(56px,7vw,88px); }
.c-band-dark::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--c-gold), transparent 60%); }
.c-band-dark .kicker { color: var(--c-gold-bright); }
.c-band-dark h2, .c-band-dark h3, .c-band-dark strong { color: #fff; }
.c-band-dark p, .c-band-dark .c-pricing-copy p, .c-band-dark .c-notes-copy p, .c-band-dark .c-sectors-copy p, .c-band-dark .c-step p, .c-band-dark .c-note .foot, .c-band-dark .c-est > p, .c-band-dark .c-est .total span { color: rgba(255,255,255,.72); }
.c-band-dark .c-card { background: var(--c-dark-2); border-color: rgba(255,255,255,.12); color: #fff; }
.c-band-dark .c-card:hover { border-color: rgba(201,162,74,.7); box-shadow: 0 24px 50px -30px rgba(0,0,0,.8); }
.c-band-dark .c-btn { text-decoration: none; width: auto; align-self: flex-start; justify-self: start; }
.c-band-dark .c-band-dark .c-band-dark .c-band-dark .c-est .chips button { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.18); }
.c-band-dark .c-est .chips button.on { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); }
.c-band-dark .c-est .total { border-top-color: rgba(255,255,255,.14); }
.c-band-dark .c-est .total strong { color: var(--c-gold-bright); }
.c-band-dark .c-note .shot em { background: var(--c-gold); }
.c-band-dark .c-note .foot i { color: var(--c-gold-bright); }
.c-band-dark .c-step .row i { border-color: rgba(255,255,255,.18); color: var(--c-gold-bright); }
.c-band-dark .c-step small { color: var(--c-gold-bright); }
.c-band-dark .c-sectors-copy h2, .c-band-dark .c-band-dark .c-photo { border: 1px solid rgba(255,255,255,.12); }

/* C3 hero: dark, white type, gold momentum */
.c-hero.dark { color: #fff; }
.c-hero.dark::before { background: linear-gradient(90deg, rgba(14,13,11,.92) 0%, rgba(14,13,11,.82) 34%, rgba(14,13,11,.45) 60%, rgba(14,13,11,.15) 100%), linear-gradient(0deg, rgba(14,13,11,.6), transparent 40%); }
.c-hero.dark .kicker { color: var(--c-gold-bright); }
.c-hero.dark h1 { color: #fff; }
.c-hero.dark h1 em { color: var(--c-gold-bright); }
.c-hero.dark p:not(.kicker) { color: rgba(255,255,255,.8); }
.c-hero.dark .button.dark { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); }
.c-hero.dark .actions .button.light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.c-hero.dark .c-hero-tags { color: rgba(255,255,255,.6); }
.c-hero.dark .c-hero-note { background: var(--c-gold); }
.c-hero.dark .c-hero-note i { background: var(--c-ink); color: var(--c-gold-bright); }
.c-hero.dark + .c-stats { border-top: 1px solid rgba(255,255,255,.1); }

/* Oversized section titles for C3 */
.c-engage > div:first-child h2, .c-store-copy h2, .c-work-copy h2, .c-notes-copy h2, .c-sectors-copy h2, @media (max-width: 800px) { .c-hero.dark::before { background: linear-gradient(0deg, rgba(14,13,11,.96) 0%, rgba(14,13,11,.88) 55%, rgba(14,13,11,.4) 100%); } }

/* ---------- Collection v2 product cards: colour swatches + front/back hover */
.product-shot { position: relative; aspect-ratio: 1; overflow: hidden; background: #f4f1ea; }
.product-shot img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease, transform .6s ease; }
.product-shot img.alt { position: absolute; inset: 0; opacity: 0; }
.product-card:hover .product-shot img.alt:not([hidden]) { opacity: 1; }
.product-card:hover .product-shot img.main { transform: scale(1.02); }
.product-colors { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.swatch { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; background: #ccc; transition: transform .2s ease, box-shadow .2s ease; }
.swatch:hover { transform: scale(1.1); }
.swatch.on { box-shadow: 0 0 0 2px var(--gold); }
.swatch-name { font-size: 12px; color: var(--muted); font-weight: 700; margin-left: 4px; }
.swatch-black, .swatch-washed { background: #17160f; }
.swatch-cream, .swatch-ivory { background: #efe7d6; }
.swatch-forest, .swatch-emerald { background: #143d2f; }
.swatch-chocolate, .swatch-vintage { background: #5a3d2c; }
.swatch-sage, .swatch-olive { background: #6f7a5a; }
.swatch-sand { background: #d9c7a4; }
.swatch-royal { background: #4a2a7a; }
.swatch-mustard, .swatch-gold { background: #c9a24a; }
.product-card .product-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch-crimson { background: #a3252b; }

/* ---------- Breathing room pass: consistent rhythm, fewer elements per view */
.c-section { padding: clamp(88px, 10vw, 136px) 0; }
.c-section + .c-section { padding-top: clamp(88px, 10vw, 136px); }
.c-band-dark { padding: clamp(88px, 10vw, 136px) 0; }
.c-band-dark + .c-band-dark { padding-top: clamp(88px, 10vw, 136px); }
.c-section + .c-band-dark, .c-band-dark + .c-section { padding-top: clamp(88px, 10vw, 136px); }
.c-wrap { max-width: 1240px; }
.c-what { gap: clamp(32px, 6vw, 96px); }
.c-model { gap: 24px; }
.c-tiles { gap: 16px; }
.c-head { gap: clamp(32px, 5vw, 72px); }
.c-services .service-tabs { gap: 12px; margin-bottom: 18px; }
.c-engage { gap: 20px; }
.c-engage > div:first-child { padding-right: 12px; }
.c-pricing { gap: 20px; }
.c-store { gap: 16px; }
.c-work { gap: 20px; }
.c-method { gap: 16px; }
.c-contact { gap: 20px; }
.c-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.12); }
.c-chips-label { font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--c-gold-bright); margin-right: 8px; }
.c-chips span:not(.c-chips-label) { padding: 8px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.85); }
.c-stats .c-stat { padding: 30px 26px; }
.c-hero { min-height: min(84vh, 820px); }
.site-footer { padding-top: clamp(64px, 8vw, 96px); }
@media (max-width: 800px) { .c-section, .c-band-dark, .c-section + .c-section, .c-section + .c-band-dark, .c-band-dark + .c-section { padding: 64px 0; } }
/* services panel: keep the statement headline in proportion to the narrower copy column */
.c-services .service-panels article { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); min-height: 420px; }
.c-services .service-panels h3 { font-size: clamp(26px, 2.4vw, 38px); }
.c-services .service-panels .copy { padding: clamp(28px, 3.6vw, 44px); }