/* =====================================================================================
   R&R Lotion: v2 worker-led design system (2026-10-11)
   Brand foundation: Montserrat (display, eyebrows) + Poppins (headlines/body), charcoal #1A1A1A on white,
   one family colour per product. Signature: the label stripe (a vertical family-colour bar broken by
   "R&R LOTION / USA") from the I.C. bottle labels.
   ===================================================================================== */

:root {
  --ink: #111417;          /* utility bar, footer, dark bands */
  --ink-2: #1b2024;
  --char: #1a1a1a;         /* brand charcoal: text */
  --steel: #5e6871;        /* muted text */
  --mist: #9aa3ab;
  --paper: #f3f1ec;        /* warm off-white section background */
  --stone: #e6e1d8;
  --line: #ddd8ce;
  --white: #ffffff;
  --brand: #2d5c88;        /* R&R blue (current site): links, small accents */
  --ok: #2f7d4f;
  /* family colours (Brand Style Guide; sunscreen = measured label stripe PMS 1235 C) */
  --f-sun: #ffb81d; --f-repel: #61b146; --f-ivyc: #779c4a; --f-ivyb: #3f4728; --f-itch: #e9272b;
  --f-waterless: #ef5625; --f-pumice: #f58320; --f-abhc: #fcb448; --f-foam: #00b2e1; --f-sancream: #00aeef;
  --f-clean: #c1c3c4; --f-cream: #8c9091; --f-antistat: #9e57a3; --f-wsc: #9078b7; --f-esdlotion: #6acbde; --f-tip: #6e6f71;
  --c: var(--brand);       /* current accent, set per section */
  --display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --wrap: 1320px;
  --gut: 40px;
  --r: 4px;                /* the reference sites keep corners tight */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body { margin: 0; font: 400 16px/1.6 var(--text); color: var(--char); background: var(--white); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.eyebrow { font: 600 12px/1.2 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--steel); margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ''; width: 6px; height: 18px; background: var(--c); flex: 0 0 auto; }
.on-dark .eyebrow { color: #d7dbde; }
.display { font: 900 clamp(38px, 5vw, 72px)/.95 var(--display); letter-spacing: -.01em; text-transform: uppercase; margin: 0; }
.h2 { font: 800 clamp(28px, 3.4vw, 44px)/1 var(--display); text-transform: uppercase; letter-spacing: -.005em; margin: 0 0 14px; }
.h3 { font: 700 20px/1.25 var(--text); margin: 0 0 8px; }
.lede { font: 400 18px/1.6 var(--text); color: var(--steel); max-width: 640px; margin: 0; }
.on-dark { color: var(--white); }
.on-dark .lede { color: #cfd4d8; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 28px; border-radius: var(--r); font: 700 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn--solid { background: var(--char); color: var(--white); }
.btn--solid:hover { background: #000; }
.btn--light { background: var(--white); color: var(--char); }
.btn--light:hover { background: var(--paper); }
.btn--ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn--ghost:hover { background: rgba(255,255,255,.1); }
.btn--accent { background: var(--c); color: var(--char); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.link-arrow { font: 700 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: 10px; align-items: center; border-bottom: 2px solid var(--c); padding-bottom: 6px; }

/* ---------- the label stripe (signature) ---------- */
.stripe { position: absolute; top: 0; bottom: 0; width: 14px; background: linear-gradient(to bottom, var(--c) 0 58%, transparent 58% 67%, var(--c) 67% 100%); pointer-events: none; }
.stripe__mark { position: absolute; top: 58%; height: 9%; right: -2px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; font: 500 11px/1.15 'Helvetica Neue', Arial, sans-serif; letter-spacing: .02em; color: inherit; white-space: nowrap; }
.stripe__mark b { font-weight: 500; }
.stripe__mark span { padding: 0; }
.edge { position: relative; }
.edge::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 6px; background: var(--c); }

/* ---------- photo slot (where no real R&R worker photo exists yet) ---------- */
.slot { position: relative; background: repeating-linear-gradient(135deg, #e9e5dd 0 14px, #e2ddd3 14px 28px); color: var(--char); display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; min-height: 260px; border: 1px dashed #b9b2a5; }
.slot__tag { position: absolute; top: 12px; left: 12px; background: var(--char); color: var(--white); font: 700 10px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; padding: 7px 9px; }
.slot b { font: 700 14px/1.3 var(--text); display: block; margin-bottom: 4px; }
.slot p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #4b5258; }
.ai-tag { position: absolute; z-index: 3; right: 10px; bottom: 10px; background: rgba(17,20,23,.72); color: #e8eaec; font: 600 9.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 6px 8px; border-radius: 2px; }

/* =====================================================================================
   HEADER
   ===================================================================================== */
.u-bar { background: var(--ink); color: #c9ced2; font: 600 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; position: relative; z-index: 60; }
.u-bar .wrap { display: flex; justify-content: space-between; align-items: center; height: 36px; gap: 20px; }
.u-bar a { text-decoration: none; color: inherit; }
.u-bar a:hover { color: var(--white); }
.u-bar__biz { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.u-bar__biz a { display: inline-flex; align-items: center; gap: 8px; }
.u-bar__biz a::before { content: ''; width: 4px; height: 12px; background: var(--f-sun); }
.u-bar__biz a + i { width: 1px; height: 14px; background: #3a4147; }
.u-bar__util { display: flex; gap: 22px; white-space: nowrap; }

.m-bar { position: relative; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); transition: background .25s, border-color .25s, box-shadow .25s; }
.m-bar .wrap { display: flex; align-items: center; height: 78px; gap: 36px; }
.logo { display: block; flex: 0 0 auto; }
.logo img { height: 46px; width: auto; }
.logo .logo--light { display: none; }
.nav { flex: 1; display: flex; gap: 4px; height: 100%; }
.nav > button, .nav > a { background: none; border: 0; height: 100%; padding: 0 16px; font: 700 13px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--char); text-decoration: none; cursor: pointer; position: relative; display: flex; align-items: center; }
.nav > button::after, .nav > a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 22px; height: 2px; background: var(--c); transform: scaleX(0); transition: transform .2s; transform-origin: left; }
.nav > button:hover::after, .nav > a:hover::after, .nav > button[aria-expanded="true"]::after, .nav > .is-current::after { transform: scaleX(1); }
.icons { display: flex; gap: 6px; align-items: center; }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--char); cursor: pointer; position: relative; text-decoration: none; }
.icon-btn svg { width: 22px; height: 22px; }
.cart-count { position: absolute; top: 5px; right: 3px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--f-sun); color: var(--char); font: 700 10px/18px var(--display); text-align: center; padding: 0 4px; }
.burger { display: none; }

/* transparent header over a hero photo (Home) */
.hdr--over { position: absolute; left: 0; right: 0; top: auto; }
.hdr--over .m-bar { background: linear-gradient(to bottom, rgba(10,12,14,.55), rgba(10,12,14,0)); border-color: transparent; }
.hdr--over .nav > button, .hdr--over .nav > a, .hdr--over .icon-btn { color: var(--white); }
.hdr--over .logo .logo--dark { display: none; }
.hdr--over .logo .logo--light { display: block; }
.hdr--over.is-solid { position: fixed; top: 0; }
.hdr--over.is-solid .m-bar, .m-bar.is-open { background: var(--white); border-color: var(--line); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.hdr--over.is-solid .nav > button, .hdr--over.is-solid .nav > a, .hdr--over.is-solid .icon-btn,
.hdr--over .m-bar.is-open .nav > button, .hdr--over .m-bar.is-open .icon-btn { color: var(--char); }
.hdr--over.is-solid .logo .logo--dark, .hdr--over .m-bar.is-open .logo .logo--dark { display: block; }
.hdr--over.is-solid .logo .logo--light, .hdr--over .m-bar.is-open .logo .logo--light { display: none; }

/* mega menus */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 24px 40px rgba(0,0,0,.12); display: none; }
.mega.is-open { display: block; }
.mega .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 1.3fr; gap: 32px; padding-top: 32px; padding-bottom: 36px; }
.mega h4 { font: 700 11px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--steel); margin: 0 0 16px; }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li a { display: flex; align-items: center; gap: 10px; padding: 7px 0; font: 500 14.5px/1.3 var(--text); text-decoration: none; color: var(--char); }
.mega li a i { width: 4px; height: 16px; background: var(--fc, var(--line)); flex: 0 0 auto; }
.mega li a:hover { color: var(--brand); }
.mega__feature { position: relative; min-height: 260px; color: var(--white); text-decoration: none; display: flex; align-items: flex-end; padding: 20px; overflow: hidden; }
.mega__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega__feature::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0) 60%); z-index: 1; }
.mega__feature span { position: relative; z-index: 2; font: 800 18px/1.1 var(--display); text-transform: uppercase; }
.mega--ind .wrap { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mega-tile { position: relative; aspect-ratio: 4/5; overflow: hidden; color: var(--white); text-decoration: none; display: flex; align-items: flex-end; padding: 14px; }
.mega-tile img, .mega-tile .slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.mega-tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 55%); z-index: 1; }
.mega-tile span { position: relative; z-index: 2; font: 800 13px/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.mega__all { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 20px; border-top: 1px solid var(--line); padding-top: 18px; font-size: 13.5px; }
.mega__all a { text-decoration: none; color: var(--steel); }
.mega__all a:hover { color: var(--char); }

/* phone drawer */
.drawer { position: fixed; inset: 0; z-index: 200; background: var(--white); transform: translateX(-100%); transition: transform .3s ease-out; overflow-y: auto; display: flex; flex-direction: column; }
body.drawer-open .drawer { transform: none; }
body.drawer-open { overflow: hidden; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; height: 64px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.drawer__top img { height: 34px; }
.drawer__biz { background: var(--ink); padding: 14px 16px; display: grid; gap: 10px; }
.drawer__biz a { color: var(--white); text-decoration: none; font: 700 12px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; display: flex; gap: 10px; align-items: center; }
.drawer__biz a::before { content: ''; width: 4px; height: 14px; background: var(--f-sun); }
.drawer details { border-bottom: 1px solid var(--line); }
.drawer summary, .drawer > nav > a { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 16px; font: 800 16px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-decoration: none; color: var(--char); border-bottom: 1px solid var(--line); }
.drawer details summary { border-bottom: 0; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: '+'; font-weight: 400; font-size: 22px; }
.drawer details[open] summary::after { content: '\2013'; }
.drawer details ul { list-style: none; margin: 0; padding: 0 16px 14px; }
.drawer details li a { display: flex; gap: 10px; align-items: center; padding: 9px 0; text-decoration: none; color: var(--char); font: 500 15px/1.3 var(--text); }
.drawer details li a i { width: 4px; height: 16px; background: var(--fc, var(--line)); }
.drawer__util { padding: 18px 16px 30px; display: grid; gap: 12px; font: 600 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.drawer__util a { color: var(--steel); text-decoration: none; }

/* =====================================================================================
   FOOTER
   ===================================================================================== */
.ftr { background: var(--ink); color: #c4c9cd; }
.ftr a { color: inherit; text-decoration: none; }
.ftr a:hover { color: var(--white); }
.ftr__top { border-bottom: 1px solid #2a3035; }
.ftr__top .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; padding-top: 64px; padding-bottom: 56px; }
.ftr__claim { font: 900 clamp(34px, 4.2vw, 56px)/.95 var(--display); text-transform: uppercase; color: var(--white); margin: 0; }
.ftr__claim span { display: block; color: var(--f-sun); }
.ftr__signup h4 { font: 700 12px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--white); margin: 0 0 10px; }
.ftr__signup p { margin: 0 0 16px; font-size: 14px; }
.ftr__signup form { display: flex; gap: 8px; }
.ftr__signup input { flex: 1; min-width: 0; height: 50px; border: 1px solid #3a4147; background: #0b0d0f; color: var(--white); padding: 0 16px; border-radius: var(--r); font: 400 15px var(--text); }
.ftr__signup .btn { height: 50px; }
.ftr__cols .wrap { display: grid; grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)); gap: 32px; padding-top: 56px; padding-bottom: 48px; }
.ftr__brand img { height: 52px; width: auto; margin-bottom: 18px; }
.ftr__brand p { margin: 0 0 4px; font-size: 14px; line-height: 1.6; }
.ftr__social { display: flex; gap: 10px; margin-top: 18px; }
.ftr__social a { width: 38px; height: 38px; border: 1px solid #3a4147; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ftr__social svg { width: 16px; height: 16px; }
.ftr h4 { font: 700 11px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--white); margin: 6px 0 18px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.ftr__regs { border-top: 1px solid #2a3035; }
.ftr__regs .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; padding-top: 28px; padding-bottom: 28px; }
.ftr__regs img { height: 40px; width: auto; }
/* 0.3.65 footer badges (Fletcher 2026-10-13): live text in the GSA badge style, square 40px tiles, no white box */
.reg-badge { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.reg-badge__mark { flex: none; display: flex; align-items: center; justify-content: center; height: 40px; min-width: 40px; }
.reg-badge__mark svg { display: block; height: 40px; width: auto; }
.reg-badge__mark--gsa { width: 40px; background: #1d4f91; color: #fff; font: 800 13px/1 var(--display); letter-spacing: .04em; }
.reg-badge__mark--flag { width: 40px; }
.reg-badge__mark--flag svg { width: 40px; height: auto; }
.reg-badge__txt { display: block; min-width: 0; font: 500 12px/1.4 var(--text); color: #8d969d; white-space: nowrap; }
.ftr__regs .reg-text { flex-basis: 100%; }
@media (max-width: 560px) { .ftr__regs .reg-badge { flex-basis: 100% !important; } }
.reg-badge__txt b { display: block; font: 800 11px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
a.reg-badge:hover .reg-badge__txt b { color: var(--yellow, #ffb81d); }
.ftr__regs .reg-text { font: 600 11px/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #8d969d; }
.ftr__legal { background: #0b0d0f; font-size: 12.5px; color: #8d969d; }
.ftr__legal .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 18px; padding-bottom: 18px; }
.ftr__legal nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* =====================================================================================
   SHARED SECTIONS
   ===================================================================================== */
.hero { position: relative; min-height: 760px; display: flex; align-items: flex-end; color: var(--white); overflow: hidden; background: var(--ink); }
.hero > img, .hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,12,.88) 0%, rgba(8,10,12,.7) 34%, rgba(8,10,12,.25) 58%, rgba(8,10,12,0) 72%), linear-gradient(to top, rgba(8,10,12,.6), rgba(8,10,12,0) 45%); z-index: 1; }
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-bottom: 96px; padding-top: 160px; }
.hero__copy { max-width: 760px; position: relative; padding-right: 72px; }
.hero__copy .stripe { right: 0; top: -40px; bottom: -40px; color: var(--white); }
.hero .lede { margin-top: 22px; color: #e3e7ea; }
.hero .eyebrow, .cta-band .eyebrow { color: #e3e7ea; }
.cta-band .lede { color: #dfe3e6; }

.band { padding: 96px 0; }
.band--paper { background: var(--paper); }
.band--ink { background: var(--ink); color: var(--white); }
.band__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; }
.band__head .lede { margin-top: 8px; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tile { position: relative; aspect-ratio: 4/5; overflow: hidden; display: flex; align-items: flex-end; color: var(--white); text-decoration: none; background: var(--ink-2); }
.tile > img, .tile > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tile:hover > img, .tile:hover > video { transform: scale(1.04); }
.tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.1) 48%, rgba(0,0,0,0) 70%); z-index: 1; }
.tile__txt { position: relative; z-index: 2; padding: 22px 22px 24px; width: 100%; }
.tile__txt small { display: block; font: 600 10.5px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: #d6dadd; margin-bottom: 8px; }
.tile__txt b { display: block; font: 800 22px/1.05 var(--display); text-transform: uppercase; }
.tile::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); z-index: 2; }
.tile.slot { padding: 0; min-height: 0; }
.tile.slot::before { display: none; }
.tile.slot .tile__txt { color: var(--char); }
.tile.slot .tile__txt small { color: var(--steel); }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--char); display: flex; flex-direction: column; position: relative; transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: 0 14px 30px rgba(17,20,23,.1); transform: translateY(-2px); }
.card__img { background: #f6f5f2; aspect-ratio: 1/1; position: relative; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: contain; padding: 18px; mix-blend-mode: multiply; }
.card__img::after { content: ''; position: absolute; top: 0; bottom: 0; right: 22px; width: 8px; background: var(--c); }
.card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__line { font: 600 10.5px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); }
.card__name { font: 600 16.5px/1.3 var(--text); }
.card__meta { font-size: 13.5px; color: var(--steel); }
.card__price { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; font: 600 15px var(--text); }
.card__price .stars { color: #e3a008; font-size: 13px; letter-spacing: 1px; }
.card .btn { height: 44px; margin-top: 12px; }

.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; }
.split__img { position: relative; overflow: hidden; min-height: 420px; }
.split__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__txt { display: flex; flex-direction: column; justify-content: center; padding: 80px clamp(32px, 6vw, 96px); position: relative; }
.split__txt .stripe { right: 48px; color: inherit; }

.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof > div { padding: 34px 26px; border-left: 1px solid var(--line); }
.proof > div:first-child { border-left: 0; }
.proof b { display: block; font: 900 34px/1 var(--display); text-transform: uppercase; margin-bottom: 10px; }
.proof span { font-size: 14px; color: var(--steel); line-height: 1.5; display: block; }
.band--ink .proof, .band--ink .proof > div { border-color: #2a3035; }
.band--ink .proof span { color: #aeb5bb; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stat { background: var(--white); border: 1px solid var(--line); padding: 28px; position: relative; }
.stat::before { content: ''; position: absolute; left: 0; top: 28px; width: 6px; height: 46px; background: var(--c); }
.stat b { display: block; font: 900 46px/1 var(--display); margin-bottom: 10px; }
.stat p { margin: 0; color: var(--steel); font-size: 14.5px; }
.stat small { display: block; margin-top: 12px; font-size: 12px; color: var(--mist); }

.field { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 300px 300px; gap: 14px; }
.field > * { position: relative; overflow: hidden; }
.field > *:first-child { grid-row: 1 / 3; }
.field img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.field .slot { min-height: 0; height: 100%; }
.field figcaption { position: absolute; left: 14px; bottom: 12px; z-index: 2; color: var(--white); font: 700 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

.cta-band { position: relative; color: var(--white); overflow: hidden; }
.cta-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,12,.82), rgba(8,10,12,.35) 70%, rgba(8,10,12,.2)); z-index: 1; }
.cta-band .wrap { position: relative; z-index: 2; padding-top: 140px; padding-bottom: 140px; }
/* 0.3.42 split CTA: paper band, copy left, photo right */
.cta-split__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.cta-split .eyebrow { color: var(--muted, #5b636b); }
.cta-split .btn--ghost { color: var(--char); }
.cta-split .btn--ghost:hover { background: rgba(0,0,0,.05); }
.cta-split__img { margin: 0; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; border-top: 4px solid var(--c); box-shadow: 0 18px 40px rgba(17,17,17,.12); }
.cta-split__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .cta-split__grid { grid-template-columns: 1fr; gap: 28px; } .cta-split__img { max-width: 520px; } }

.biz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.biz a { border: 1px solid var(--line); background: var(--white); padding: 26px 24px; text-decoration: none; color: var(--char); display: flex; flex-direction: column; gap: 8px; position: relative; }
.biz a::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--c); }
.biz b { font: 800 16px/1.15 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.biz span { font-size: 14px; color: var(--steel); }
.biz em { margin-top: auto; padding-top: 14px; font: 700 11px/1 var(--display); font-style: normal; letter-spacing: .16em; text-transform: uppercase; }

.faq { max-width: 880px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font: 600 17px/1.4 var(--text); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 6px; top: 16px; font: 300 28px/1 var(--text); }
.faq details[open] summary::after { content: '\2013'; }
.faq details > div { padding: 0 0 22px; color: var(--steel); font-size: 15.5px; max-width: 760px; }

.articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.article { border: 1px solid var(--line); background: var(--white); padding: 24px; text-decoration: none; color: var(--char); display: flex; flex-direction: column; gap: 10px; position: relative; }
.article::before { content: ''; position: absolute; top: 24px; left: 0; width: 4px; height: 22px; background: var(--c); }
.article small { font: 600 10.5px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); }
.article b { font: 600 17px/1.35 var(--text); }
.article em { margin-top: auto; font: 700 11px/1 var(--display); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); padding-top: 8px; }

.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.review { background: var(--white); border: 1px solid var(--line); padding: 26px; }
.review .stars { color: #e3a008; letter-spacing: 2px; }
.review p { margin: 12px 0 16px; font-size: 15.5px; line-height: 1.6; }
.review b { font-size: 13.5px; }
.review small { color: var(--ok); font-weight: 600; margin-left: 8px; font-size: 12px; }

.mock-note { background: #fff6df; border-bottom: 1px solid #f1d58a; color: #5c4300; font-size: 12.5px; line-height: 1.45; text-align: center; padding: 8px 16px; position: relative; z-index: 70; }

/* =====================================================================================
   RESPONSIVE
   ===================================================================================== */
@media (max-width: 1100px) {
  .nav > button, .nav > a { padding: 0 10px; }
  .tiles, .cards, .biz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__cols .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr__brand { grid-column: 1 / -1; }
  .mega .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega--ind .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  :root { --gut: 16px; }
  body { font-size: 15px; }
  .u-bar { font-size: 9px; letter-spacing: .04em; }
  .u-bar__biz { gap: 8px; }
  .u-bar__biz a { gap: 6px; }
  .u-bar .wrap { height: 34px; overflow-x: auto; }
  .u-bar__util { display: none; }
  .u-bar__biz { gap: 10px; }
  .nav { display: none; }
  .burger { display: inline-flex; }
  .m-bar .wrap { height: 64px; gap: 8px; }
  .logo { margin-right: auto; }
  .logo img { height: 36px; }
  .icons .acct { display: none; }
  .hdr--over { top: auto; }
  .display { font-size: 33px; }
  .hero__copy { padding-right: 30px; }
  .hero__copy .stripe { right: -6px; width: 10px; }
  .hero__copy .stripe__mark { font-size: 9.5px; }
  .hero { min-height: 640px; }
  .hero::before { background: linear-gradient(to top, rgba(8,10,12,.88) 0%, rgba(8,10,12,.45) 48%, rgba(8,10,12,.15) 75%); }
  .hero .wrap { padding-bottom: 56px; }
  .hero__copy { padding-right: 36px; }
  .band { padding: 64px 0; }
  .band__head { flex-direction: column; align-items: flex-start; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile__txt { padding: 14px 14px 16px; }
  .tile__txt b { font-size: 16px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card__body { padding: 14px; }
  .card__name { font-size: 14.5px; }
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split__img { min-height: 360px; }
  .split__txt { padding: 48px 16px 56px; }
  .split__txt .stripe { display: none; }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof > div { padding: 22px 16px; }
  .proof > div:nth-child(3) { border-left: 0; }
  .proof > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .proof b { font-size: 24px; }
  .stats { grid-template-columns: 1fr; }
  .field { grid-template-columns: 1fr 1fr; grid-template-rows: 280px 180px 180px; gap: 8px; }
  .field > *:first-child { grid-column: 1 / 3; grid-row: auto; }
  .cta-band .wrap { padding-top: 90px; padding-bottom: 90px; }
  .biz { grid-template-columns: 1fr; }
  .articles, .reviews { grid-template-columns: 1fr; }
  .ftr__top .wrap { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; padding-bottom: 40px; }
  .ftr__signup form { flex-direction: column; }
  .ftr__cols .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .ftr__regs img { height: 32px; }
  .ftr__regs .wrap { gap: 16px 24px; }
  .ftr__regs .reg-badge { flex: 1 1 calc(50% - 12px); min-width: 0; }
  .reg-badge__txt { white-space: normal; }
  .mega { display: none !important; }
}

/* ---------- join the community (education by trade + webinar + future ambassador program) ---------- */
.community { background: var(--ink); color: var(--white); padding: 96px 0; }
.community .wrap { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: start; }
.community .lede { color: #c9ced2; }
.trades { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 22px; }
.trades button { background: transparent; border: 1px solid #3a4147; color: #d7dbde; padding: 10px 14px; font: 700 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; border-radius: 2px; }
.trades button.is-active { background: var(--white); color: var(--char); border-color: var(--white); }
.learn-list { display: grid; gap: 10px; }
.learn-list a { display: flex; gap: 14px; align-items: center; padding: 16px 18px; background: var(--ink-2); border: 1px solid #2a3035; color: var(--white); text-decoration: none; }
.learn-list a:hover { border-color: #4a535a; }
.learn-list a i { width: 4px; align-self: stretch; background: var(--c); flex: 0 0 auto; }
.learn-list small { display: block; font: 600 10px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #8d969d; margin-bottom: 6px; }
.learn-list b { font: 600 15px/1.35 var(--text); }
.panel { background: var(--white); color: var(--char); padding: 28px; position: relative; }
.panel + .panel { margin-top: 14px; }
.panel h3 { font: 800 18px/1.15 var(--display); text-transform: uppercase; margin: 0 0 8px; }
.panel p { margin: 0 0 16px; font-size: 14.5px; color: var(--steel); }
.panel form { display: grid; gap: 8px; }
.panel input, .panel select { height: 48px; border: 1px solid var(--line); padding: 0 14px; font: 400 15px var(--text); border-radius: var(--r); background: var(--white); color: var(--char); }
.panel .btn { height: 48px; }
.panel--soon { background: var(--paper); border: 1px dashed #b9b2a5; }
.panel--soon .tag { position: absolute; top: 16px; right: 16px; background: var(--f-sun); color: var(--char); font: 800 10px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; padding: 7px 9px; }
.panel--soon ul { margin: 0 0 16px; padding-left: 18px; font-size: 14px; color: #3b4247; display: grid; gap: 4px; }
@media (max-width: 860px) {
  .community { padding: 64px 0; }
  .community .wrap { grid-template-columns: 1fr; gap: 28px; }
  .panel { padding: 20px; }
}