/* Apex Interiors site styles.
   Spacing steps follow the Fibonacci sequence (8 13 21 34 55 89 144 px) and the type scale follows the golden ratio
   (16 26 42 68 110 px). Colors: black, white, yellow accent. Display headlines in Anton, everything else in Montserrat. */
:root {
  --black: #111; --white: #fff; --yellow: #f2c230; --gold: #a87c00; --grey: #f3f3f3; --muted: #555; --line: #e8e8e8;
  --s1: 8px; --s2: 13px; --s3: 21px; --s4: 34px; --s5: 55px; --s6: 89px; --s7: 144px;
  --fs0: 16px; --fs1: 26px; --fs2: 42px; --fs3: 68px; --fs4: 110px;
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --container: 1200px; --gutter: 21px; --radius: 18px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --shadow-hover: 0 2px 4px rgba(0,0,0,.06), 0 18px 40px rgba(0,0,0,.16);
  --header-h: 144px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: var(--fs0); line-height: 1.55; color: var(--black); background: #fff; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; }
p { margin: 0 0 var(--s3); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--yellow); color: var(--black); padding: 8px 13px; border-radius: 6px; font-weight: 700; }
.skip:focus { left: 8px; }
.display, .sec__title, .phero h1, .hero h1 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s2); }
.link { color: var(--black); font-weight: 700; text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 3px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 55px; padding: 0 var(--s4); border-radius: 999px; border: 2px solid transparent; font: 700 14px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; text-align: center; transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); outline: none; }
.btn--yellow { background: var(--yellow); color: var(--black); }
.btn--black { background: var(--black); color: #fff; }
.btn--white { background: #fff; color: var(--black); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: #fff; color: var(--black); border-color: #fff; }
.btn--sm { min-height: 44px; padding: 0 var(--s3); font-size: 13px; }

/* header */
.hdr { position: relative; z-index: 1000; height: var(--header-h); display: flex; align-items: center; background: var(--black); box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; }
.hdr__logo img { height: 123px; width: auto; }
.hdr__menu { display: flex; align-items: center; gap: var(--s5); margin-left: auto; }
.hdr__nav { display: flex; align-items: center; gap: var(--s4); }
.hdr__nav a { color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 0; border-bottom: 2px solid transparent; transition: border-color .2s; }
.hdr__nav a:hover, .hdr__nav a[aria-current="page"] { border-color: var(--yellow); }
.hdr__cta { display: flex; align-items: center; gap: var(--s3); }
.hdr__phone { color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; white-space: nowrap; }
.hdr__phone:hover { color: var(--yellow); }
.hdr__cart { order: 5; position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: #fff; cursor: pointer; border-radius: 999px; font: 700 13px/1 var(--font); }
.hdr__cart:hover, .hdr__cart:focus-visible { background: rgba(255,255,255,.1); outline: none; }
.hdr__cart svg { width: 24px; height: 24px; }
.hdr__cart-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--yellow); color: var(--black); font: 700 12px/22px var(--font); text-align: center; letter-spacing: 0; }
.hdr__cart-n[data-empty] { display: none; }
.hdr__burger { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.hdr__burger span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .25s; }
@media (max-width: 980px) {
  :root { --header-h: 89px; }
  .hdr__logo img { height: 68px; }
  .hdr__burger { display: flex; order: 3; }
  .hdr__cart { order: 2; margin-left: auto; padding: 0 8px; }
  .hdr__menu { display: none; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; background: var(--black); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--s4); padding: var(--s4) var(--gutter); overflow: auto; }
  .hdr.is-open { position: sticky; top: 0; background: var(--black); }
  .hdr.is-open .hdr__menu { display: flex; }
  .hdr.is-open .hdr__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hdr.is-open .hdr__burger span:nth-child(2) { opacity: 0; }
  .hdr.is-open .hdr__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hdr__nav { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .hdr__nav a { font-size: 21px; }
  .hdr__cta { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .hdr__cta .btn { width: 100%; }
}

/* home hero: the finished house video; the front door sits on the golden point (see the JS camera shift) */
.hero { position: relative; min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; overflow: hidden; background: #111; color: #fff; padding: var(--s5) 0 var(--s7); }
.hero__cam { position: absolute; inset: -4%; transform-origin: 63.3% 65.3%; will-change: transform; }
.hero__cam img, .hero__cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 63.3% 65.3%; opacity: 0; transition: opacity 1.2s ease; }
.hero__cam .is-on { opacity: 1; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,17,17,.78) 0%, rgba(17,17,17,.55) 34%, rgba(17,17,17,.18) 62%, rgba(17,17,17,.3) 100%); }
/* the text sits in the open sky on the left (the house fills the right side), so it hugs the viewport edge, not the centered container */
.hero__in { position: relative; z-index: 2; max-width: none; margin: 0; padding-left: clamp(21px, 6vw, 120px); }
.hero__text { max-width: 580px; }
.hero__eyebrow { color: var(--yellow); }
.hero h1 { font-size: clamp(var(--fs2), 7.4vw, var(--fs4)); line-height: .95; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero__sub { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; margin: var(--s3) 0 var(--s4); color: rgba(255,255,255,.92); max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.hero__tags { position: absolute; left: 50%; bottom: 34px; z-index: 3; transform: translateX(-50%); display: flex; gap: 21px; padding: 8px 21px; border-radius: 999px; background: rgba(17,17,17,.55); color: #fff; font-size: 13px; line-height: 21px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.hero__tags span { display: flex; align-items: center; gap: 8px; opacity: .55; transition: opacity .4s, color .4s; }
.hero__tags span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hero__tags span.is-on { opacity: 1; color: var(--yellow); }
@media (max-width: 767px) {
  .hero { min-height: calc(92svh - var(--header-h)); padding: var(--s4) 0 var(--s6); }
  .hero__shade { background: linear-gradient(180deg, rgba(17,17,17,.55) 0%, rgba(17,17,17,.35) 45%, rgba(17,17,17,.7) 100%); }
  .hero__actions .btn { width: 100%; }
  .hero__tags { bottom: 21px; gap: 13px; padding: 5px 13px; font-size: 8px; line-height: 13px; letter-spacing: .1em; }
  .hero__tags span { gap: 5px; }
  .hero__tags span::before { width: 5px; height: 5px; }
}

/* trust strip under the hero */
.trust { background: var(--black); color: #fff; padding: var(--s4) 0; }
.trust__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.trust__item { display: flex; gap: var(--s2); align-items: flex-start; }
.trust__item svg { width: 34px; height: 34px; flex: none; color: var(--yellow); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trust__item b { display: block; font-size: 15px; line-height: 1.3; }
.trust__item span { font-size: 13px; color: rgba(255,255,255,.72); }
@media (max-width: 980px) { .trust__in { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust__in { grid-template-columns: 1fr; } }

/* sections */
.sec { padding: var(--s6) 0; }
.sec--grey { background: var(--grey); }
.sec--black { background: var(--black); color: #fff; }
.sec__head { text-align: center; max-width: 720px; margin: 0 auto var(--s5); }
.sec__title { font-size: clamp(34px, 4.6vw, 55px); line-height: 1.05; margin: 0 0 var(--s2); }
.sec__sub { margin: 0; font-size: 17px; line-height: 1.5; color: var(--muted); }
.sec--black .eyebrow { color: var(--yellow); }
.sec--black .sec__sub { color: rgba(255,255,255,.78); }
.sec__foot { margin-top: var(--s5); text-align: center; }
@media (max-width: 600px) { .sec { padding: var(--s5) 0; } .sec__head { margin-bottom: var(--s4); } .sec__sub { font-size: 15px; } .sec__foot { margin-top: var(--s4); } }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.step { padding: var(--s4); border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.step__n { font-family: var(--display); font-size: var(--fs3); line-height: 1; color: var(--yellow); }
.step h3 { font-size: 21px; margin: var(--s2) 0 var(--s1); }
.step p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* specialties cards (same look as the Squarespace version) */
.apx-spec__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.apx-spec__card { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 18px; background: #fff; border: 1px solid var(--line); color: var(--black); text-decoration: none; box-shadow: var(--shadow); transition: transform .2s, border-color .2s, box-shadow .2s; }
.apx-spec__card:hover, .apx-spec__card:focus-visible { transform: translateY(-4px); border-color: var(--yellow); box-shadow: var(--shadow-hover); outline: none; }
.apx-spec__icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.07); color: var(--yellow); transition: background .2s, color .2s, border-color .2s; }
.apx-spec__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.apx-spec__card:hover .apx-spec__icon, .apx-spec__card:focus-visible .apx-spec__icon { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.apx-spec__name { margin: 0 0 10px; font-size: 21px; line-height: 1.25; }
.apx-spec__text { margin: 0 0 18px; font-size: 15px; line-height: 1.55; }
.check-list { list-style: none; margin: 0 0 22px; padding: 0; }
.check-list li { position: relative; margin: 0 0 8px; padding: 0 0 0 24px; font-size: 14px; line-height: 1.4; }
.check-list li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 6px; border-left: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow); transform: rotate(-45deg); }
.apx-spec__cta { margin-top: auto; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
@media (max-width: 980px) { .apx-spec__grid { grid-template-columns: repeat(2, 1fr); } .apx-spec__card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .apx-spec__grid { gap: 12px; }
  .apx-spec__card { padding: 18px 14px; border-radius: 14px; align-items: center; text-align: center; }
  .apx-spec__icon { width: 48px; height: 48px; margin-bottom: 12px; }
  .apx-spec__name { font-size: 16px; margin-bottom: 8px; }
  .apx-spec__text, .apx-spec__card .check-list { display: none; }
  .apx-spec__cta { font-size: 11px; letter-spacing: .06em; }
}

/* project gallery */
.apx-gal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.apx-gal__card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); color: var(--black); text-decoration: none; box-shadow: var(--shadow); transition: transform .2s, border-color .2s, box-shadow .2s; }
.apx-gal__card:hover, .apx-gal__card:focus-visible { transform: translateY(-4px); border-color: var(--yellow); box-shadow: var(--shadow-hover); outline: none; }
.apx-gal__img { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #f1f1f1; }
.apx-gal__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.apx-gal__card:hover .apx-gal__img img { transform: scale(1.05); }
.apx-gal__badge { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(17,17,17,.7); color: #fff; transition: background .2s, color .2s; }
.apx-gal__card:hover .apx-gal__badge { background: var(--yellow); color: var(--black); }
.apx-gal svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.apx-gal__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.apx-gal__tag { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); margin-bottom: 6px; }
.apx-gal__name { margin: 0 0 12px; font-size: 18px; line-height: 1.25; }
.apx-gal__cta { margin-top: auto; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
.apx-gal__follow { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 980px) { .apx-gal__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .apx-gal__grid { gap: 12px; }
  .apx-gal__card { border-radius: 14px; }
  .apx-gal__badge { top: 8px; right: 8px; width: 28px; height: 28px; }
  .apx-gal svg { width: 15px; height: 15px; }
  .apx-gal__body { padding: 12px 12px 14px; }
  .apx-gal__tag { font-size: 10px; letter-spacing: .1em; }
  .apx-gal__name { font-size: 15px; margin-bottom: 8px; }
  .apx-gal__cta { font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
}

/* before/after slider */
.apx-tx__frame { position: relative; max-width: 1100px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #e9e9e9; border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.18); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.apx-tx__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.apx-tx__img--before { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.apx-tx__chip { position: absolute; z-index: 2; top: 16px; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; transition: opacity .25s; }
.apx-tx__chip--before { left: 16px; background: rgba(17,17,17,.75); color: #fff; }
.apx-tx__chip--after { right: 16px; background: var(--yellow); color: var(--black); }
.apx-tx__chip.is-hidden { opacity: 0; }
.apx-tx__handle { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--p); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 0 12px rgba(0,0,0,.35); outline: none; }
.apx-tx__knob { position: absolute; top: 50%; left: 50%; width: 55px; height: 55px; margin: -27.5px 0 0 -27.5px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--yellow); color: var(--black); border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.3); transition: transform .2s ease; }
.apx-tx__frame:hover .apx-tx__knob, .apx-tx__frame.is-dragging .apx-tx__knob { transform: scale(1.08); }
.apx-tx__handle:focus-visible .apx-tx__knob { box-shadow: 0 0 0 4px var(--black), 0 6px 18px rgba(0,0,0,.3); }
.apx-tx__note { margin: 22px auto 0; max-width: 720px; text-align: center; font-size: 14px; line-height: 1.5; color: #777; }
@media (max-width: 600px) {
  .apx-tx__frame { border-radius: 14px; aspect-ratio: 4 / 3; }
  .apx-tx__chip { top: 10px; padding: 4px 10px; font-size: 10px; }
  .apx-tx__chip--before { left: 10px; } .apx-tx__chip--after { right: 10px; }
  .apx-tx__knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}

/* reviews */
.apx-rev__stars { color: var(--yellow); font-size: 18px; letter-spacing: 2px; line-height: 1; }
.apx-rev__stars--big { font-size: 30px; letter-spacing: 4px; margin-bottom: 14px; }
.apx-rev__empty, .apx-rev__card { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.apx-rev__empty { max-width: 620px; margin: 0 auto; padding: 36px 32px; text-align: center; }
.apx-rev__empty-title { margin: 0 0 8px; font-size: 21px; font-weight: 700; line-height: 1.3; }
.apx-rev__empty-text { margin: 0 0 24px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.apx-rev__foot[hidden] { display: none; }
.apx-rev__viewport { position: relative; overflow: hidden; padding: 12px 0 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.apx-rev__track { display: flex; gap: 20px; width: max-content; animation: apxRevScroll var(--rev-dur, 40s) linear infinite; }
.apx-rev__viewport:hover .apx-rev__track, .apx-rev__viewport:focus-within .apx-rev__track { animation-play-state: paused; }
@keyframes apxRevScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.apx-rev__static { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.apx-rev__card { position: relative; flex: none; width: 340px; padding: 24px 24px 22px; display: flex; flex-direction: column; }
.apx-rev__text { margin: 14px 0 18px; font-size: 15px; line-height: 1.6; }
.apx-rev__who { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.apx-rev__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--black); color: var(--yellow); font-weight: 700; font-size: 16px; }
.apx-rev__name { display: block; font-size: 15px; font-weight: 700; }
.apx-rev__meta { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); margin-top: 2px; }
.apx-rev__src { position: absolute; top: 24px; right: 24px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #888; }
.apx-rev__sample { position: absolute; top: -10px; left: 20px; padding: 3px 10px; border-radius: 999px; background: var(--black); color: var(--yellow); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
@media (max-width: 600px) { .apx-rev__empty { padding: 28px 20px; } .apx-rev__empty-title { font-size: 18px; } .apx-rev__card { width: 280px; padding: 20px 18px 18px; } .apx-rev__src { top: 20px; right: 18px; } }

/* quote form */
.cta__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s6); align-items: start; }
.cta__text h2 { font-size: clamp(34px, 4.6vw, 55px); line-height: 1.05; margin-bottom: var(--s3); }
.cta__text p { font-size: 17px; color: rgba(255,255,255,.85); }
.cta__list { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); }
.cta__list li { display: flex; gap: var(--s2); align-items: flex-start; font-size: 15px; }
.cta__list svg { width: 21px; height: 21px; flex: none; color: var(--yellow); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.form { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--radius); background: #fff; color: var(--black); box-shadow: var(--shadow-hover); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.field label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s1); }
.field label span { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
.field input, .field textarea { width: 100%; padding: 14px 18px; border: 1px solid #cfcfcf; border-radius: 12px; font: inherit; font-size: 16px; color: var(--black); background: #fff; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--black); box-shadow: 0 0 0 3px rgba(242,194,48,.4); }
.field textarea { resize: vertical; min-height: 120px; }
.field small { display: block; color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.4; }
.field--file input { padding: 12px; border-style: dashed; cursor: pointer; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.form__note { font-size: 14px; color: var(--muted); }
.form__note a { color: var(--black); font-weight: 700; }
@media (max-width: 900px) { .cta__grid { grid-template-columns: 1fr; gap: var(--s4); } }
@media (max-width: 600px) { .form { padding: var(--s3); } .form__row { grid-template-columns: 1fr; } .form__actions .btn { width: 100%; } }

/* inner-page hero */
.phero { background: var(--black); color: #fff; padding: var(--s6) 0 var(--s5); }
.phero .eyebrow { color: var(--yellow); }
.phero h1 { font-size: clamp(var(--fs2), 6vw, var(--fs3)); line-height: 1; }
.phero p { max-width: 40rem; font-size: 18px; color: rgba(255,255,255,.85); margin: var(--s3) 0 0; }@media (max-width: 600px) { .phero { padding: var(--s5) 0 var(--s4); } .phero p { font-size: 16px; } }

/* services page */
.svc { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.svc__group { padding: var(--s4); border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.svc__group h3 { font-size: 26px; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; margin-bottom: var(--s1); }
.svc__group .svc__lead { color: var(--muted); font-size: 15px; margin-bottom: var(--s3); }
.svc__group .check-list { margin-bottom: var(--s3); columns: 2; column-gap: var(--s3); }
.svc__group .check-list li { break-inside: avoid; }
@media (max-width: 860px) { .svc { grid-template-columns: 1fr; } .svc__group .check-list { columns: 1; } }

/* about page */
.about__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s6); align-items: start; }
.about__grid p { font-size: 17px; line-height: 1.65; }
.about__card { padding: var(--s4); border-radius: var(--radius); background: var(--black); color: #fff; }
.about__card h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 26px; margin-bottom: var(--s3); color: var(--yellow); }
.about__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.about__card li { display: flex; gap: var(--s2); font-size: 15px; }
.about__card li::before { content: "—"; color: var(--yellow); font-weight: 700; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.value { padding: var(--s4); border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.value h3 { font-size: 21px; margin-bottom: var(--s1); }
.value p { margin: 0; font-size: 15px; color: var(--muted); }
@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; gap: var(--s4); } .values { grid-template-columns: 1fr; } }

/* contact page */
/* Contact: canvas effect behind the cards + form (Eddie, 2026-10-22: survey contour lines, site.js) */
.contact__intro { position: relative; overflow: hidden; }
.contact__intro .contact__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5; }   /* Eddie (2026-10-22): the whole effect faded lighter (no edge mask) */

/* (2026-10-23) A Squarespace-style translucent header over the home hero was tried and reverted at Eddie's request:
   the header is the solid black bar everywhere and the hero starts under it. The measured Squarespace values are in the
   Squarespace playbook if it ever comes back. */

/* Services hero: canvas effect behind the headline (Eddie, 2026-10-22: start-to-finish timeline, site.js) */
.phero--fx { position: relative; overflow: hidden; }
.phero--fx .phero__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.phero--fx .container { position: relative; z-index: 1; }
@media (max-width: 900px) { .phero--fx { padding-bottom: calc(var(--s4) + 72px); } }   /* room for the timeline under the text on phones */
@media (min-width: 901px) { .phero--fx { padding-top: 58px; padding-bottom: 58px; } }   /* Eddie: equal space above "Services" and below the last line; band a tad thinner */

/* Language switcher in the header: EN / ES / FR (Eddie, 2026-10-22). The build writes every page in all three languages. */
.hdr__lang { display: flex; align-items: center; gap: 2px; }
.hdr__lang a { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.62); text-decoration: none; padding: 5px 7px; border-radius: 4px; line-height: 1; }
.hdr__lang a:hover, .hdr__lang a:focus-visible { color: var(--yellow); outline: none; }
.hdr__lang a.is-on { color: #fff; background: rgba(255,255,255,.14); }
.hdr__lang-corner { position: absolute; top: 10px; right: var(--gutter); }   /* desktop: top-right corner of the header (Eddie) */
.hdr__lang-menu { display: none; }                                              /* phones: inside the burger menu instead */
.hdr__logo { flex: none; }                                                      /* never let the row squeeze the logo (ES/FR have longer menu words) */
.hdr__nav a { white-space: nowrap; }
html:not([lang="en"]) .hdr__nav { gap: var(--s3); }
html:not([lang="en"]) .hdr__nav a { font-size: 13px; letter-spacing: .04em; }
@media (max-width: 980px) { .hdr__lang-corner { display: none; } .hdr__lang-menu { display: block; } }
.contact__intro .container { position: relative; z-index: 1; }
.contact__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s5); align-items: start; }
.contact__cards { display: grid; gap: var(--s3); }
.contact__card { padding: var(--s4); border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.contact__card h3 { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s2); }
.contact__card p { margin: 0 0 var(--s1); font-size: 17px; text-wrap: balance; }   /* a two-line line breaks evenly (the service area), no lone word on line two */
.contact__card a { color: var(--black); font-weight: 700; text-decoration: none; }
.contact__card a:hover { color: var(--gold); }
.contact__card small { color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; gap: var(--s4); } }

/* appointments page (Select Appointment box) */
.apex-book { max-width: 620px; margin: 0 auto; }
.apex-book__head { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; margin: 0 0 18px; }
.apex-book__card { background: #fff; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.apex-book__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-top: 1px solid #ececec; }
.apex-book__row:first-child { border-top: 0; }
.apex-book__name { font-weight: 700; font-size: 16px; line-height: 1.3; margin: 0; }
.apex-book__meta { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.apex-book__tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 3px; background: var(--yellow); color: var(--black); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.apex-book__btn { flex: none; background: var(--black); color: #fff; border: 0; border-radius: 999px; padding: 12px 21px; font-family: inherit; font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s; }
.apex-book__btn:hover, .apex-book__btn:focus-visible { background: var(--yellow); color: var(--black); outline: none; }
.apex-book__note { margin: var(--s3) auto 0; max-width: 620px; text-align: center; font-size: 14px; color: var(--muted); }
@media (max-width: 600px) { .apex-book__row { padding: 18px 16px; } }

/* shop placeholder */
.shop__box { max-width: 720px; margin: 0 auto; text-align: center; padding: var(--s5) var(--s4); border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.shop__box p { font-size: 17px; color: var(--muted); }

/* footer */
.ftr { background: var(--black); color: #fff; padding: var(--s6) 0 var(--s4); }
.ftr__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: var(--s5); }
.ftr__logo img { height: 89px; width: auto; }
.ftr p { color: rgba(255,255,255,.75); font-size: 15px; margin: 0 0 var(--s2); }
.ftr p.ftr__tag { font-family: var(--display); font-size: 26px; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; margin: var(--s3) 0 var(--s2); color: var(--yellow); }
.ftr__lang { font-size: 13px; }
.ftr h4 { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); margin: 0 0 var(--s2); }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.ftr a { color: #fff; text-decoration: none; }
.ftr a:hover { color: var(--yellow); }
.ftr__hours { margin-top: var(--s3); font-size: 14px; }
.ftr__bottom { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid rgba(255,255,255,.15); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); font-size: 13px; color: rgba(255,255,255,.6); }
@media (min-width: 901px) { .ftr__grid > div:first-child { margin-top: -42px; } }  /* lifts the logo column so all three columns end on the same line (Eddie, 2026-10-21) */
@media (max-width: 900px) { .ftr__grid { grid-template-columns: 1fr; gap: var(--s4); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .apx-spec__card, .apx-gal__card { transition: none; }
}

/* product page (one per colour, built from src/templates/product.html) */
.product { padding: var(--s4) 0 var(--s6); }
.crumbs { display: flex; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: var(--s3); }
.crumbs a { color: var(--black); font-weight: 700; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-decoration-color: var(--yellow); }
.product__grid { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s5); align-items: start; }
.product__gallery { display: grid; grid-template-columns: 89px 1fr; gap: var(--s2); align-items: start; }
.product__main { position: relative; aspect-ratio: 3 / 4; background: var(--grey); border-radius: var(--radius); overflow: hidden; }
.product__main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--black); box-shadow: var(--shadow); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; }
.product__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.product__arrow svg { width: 22px; height: 22px; }
.product__arrow--prev { left: var(--s2); }
.product__arrow--next { right: var(--s2); }
.product__thumbs { display: flex; flex-direction: column; gap: var(--s2); }
.product__thumbs button { width: 89px; aspect-ratio: 3 / 4; padding: 0; border: 2px solid var(--line); border-radius: 13px; background: var(--grey); overflow: hidden; cursor: pointer; }
.product__thumbs button.is-on { border-color: var(--black); }
.product__thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product__title { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(var(--fs2), 4vw, 55px); line-height: 1; margin: var(--s1) 0 var(--s2); }
.product__price { font: 700 26px/1 var(--font); margin: 0 0 var(--s3); }
.product__blurb { font-size: 17px; color: var(--muted); margin: 0 0 var(--s3); }
.product__colorrow { margin: 0 0 var(--s3); }
.product__label { margin: 0 0 var(--s1); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.product__label span { color: var(--muted); }
.product__swatches { display: flex; flex-wrap: wrap; gap: var(--s1); }
.product__swatch { width: 55px; aspect-ratio: 3 / 4; padding: 0; border: 2px solid var(--line); border-radius: 10px; background: var(--grey); overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; }
.product__swatch:hover { transform: translateY(-2px); border-color: var(--muted); }
.product__swatch.is-on { border-color: var(--black); box-shadow: 0 0 0 2px var(--yellow); }
.product__swatch img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product__form.merch__buy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); align-items: end; }
.product__form .btn { grid-column: 1 / -1; }
.product__field { display: grid; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.product__form.merch__buy select, .product__form input { width: 100%; min-height: 55px; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: 13px; background: #fff; font: 700 16px var(--font); color: var(--black); }
.product__perks { list-style: none; margin: var(--s3) 0 0; padding: var(--s3); background: var(--grey); border-radius: var(--radius); display: grid; gap: 8px; font-size: 14px; }
.product__perks li::before { content: "\2713  "; color: var(--gold); font-weight: 700; }
.product__details { margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s2); }
.product__details summary { cursor: pointer; font-weight: 700; }
.product__details ul { margin: var(--s2) 0 0; padding-left: var(--s3); color: var(--muted); font-size: 15px; display: grid; gap: 6px; }
@media (max-width: 900px) { .product__grid { grid-template-columns: 1fr; gap: var(--s4); } }
@media (max-width: 600px) { .product { padding: var(--s3) 0 var(--s5); } .product__gallery { grid-template-columns: 1fr; } .product__thumbs { order: 2; flex-direction: row; } .product__thumbs button { width: 68px; } .product__form.merch__buy { grid-template-columns: 1fr 1fr; } .product__form.merch__buy select, .product__form input { min-height: 48px; } }
.merch__link { display: block; color: inherit; text-decoration: none; }
.merch__name a { color: inherit; text-decoration: none; }
.merch__name a:hover { text-decoration: underline; text-decoration-color: var(--yellow); }

/* ===== Shop page, Carhartt-style layout (src/pages/shop.html) ===== */
/* promo ticker */
.shopx-promo { background: var(--yellow); color: var(--black); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; overflow: hidden; }
.shopx-promo__track { display: flex; width: max-content; animation: promoTicker 42s linear infinite; }
.shopx-promo__track span { display: inline-flex; align-items: center; gap: 8px; padding: 11px var(--s4); white-space: nowrap; }
.shopx-promo__track span + span::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--black); margin-right: var(--s4); opacity: .6; }
.shopx-promo:hover .shopx-promo__track { animation-play-state: paused; }
@keyframes promoTicker { to { transform: translateX(-50%); } }
/* cinematic hero */
.shopx-cine { position: relative; min-height: min(88svh, 860px); display: flex; align-items: center; overflow: hidden; background: #0f0f0f; color: #fff; isolation: isolate; }
.shopx-cine__bg { position: absolute; inset: 0; z-index: -2; }
.shopx-cine__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; display: block; transform: scale(1.06); animation: cineDrift 26s ease-in-out infinite alternate; }
@keyframes cineDrift { from { transform: scale(1.06) translate3d(0,0,0); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
.shopx-cine__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.78) 34%, rgba(10,10,10,.25) 62%, rgba(10,10,10,.05) 100%), linear-gradient(180deg, rgba(10,10,10,.35), transparent 30%, transparent 70%, rgba(10,10,10,.6)); }
.shopx-cine__in { padding-top: var(--s7); padding-bottom: var(--s7); max-width: var(--container); }
.shopx-cine__eyebrow { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--yellow); }
.shopx-cine__eyebrow i { display: block; width: 34px; height: 2px; background: var(--yellow); }
.shopx-cine__title { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(var(--fs2), 5.6vw, 96px); line-height: .92; margin: 0 0 var(--s3); max-width: 13ch; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.shopx-cine__title em { font-style: normal; color: var(--yellow); }
.shopx-cine__sub { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: rgba(255,255,255,.88); max-width: 30rem; margin: 0 0 var(--s4); }
.shopx-cine__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.shopx-cine__eyebrow, .shopx-cine__title, .shopx-cine__sub, .shopx-cine__actions { opacity: 0; transform: translateY(18px); animation: cineUp .9s cubic-bezier(.2,.7,.2,1) forwards; }
.shopx-cine__title { animation-delay: .12s; } .shopx-cine__sub { animation-delay: .24s; } .shopx-cine__actions { animation-delay: .36s; }
@keyframes cineUp { to { opacity: 1; transform: none; } }
.shopx-cine__down { position: absolute; left: 50%; bottom: var(--s3); transform: translateX(-50%); width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); color: #fff; display: inline-flex; align-items: center; justify-content: center; animation: cineBob 2.4s ease-in-out infinite; }
.shopx-cine__down svg { width: 20px; height: 20px; }
@keyframes cineBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
/* scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } .shopx-cine__bg img, .shopx-cine__down, .shopx-promo__track { animation: none; } .shopx-cine__eyebrow, .shopx-cine__title, .shopx-cine__sub, .shopx-cine__actions { animation: none; opacity: 1; transform: none; } }
/* product card hover: lift + flip to the back view */
.shopx-card__media { position: relative; }
.shopx-card__media img { transition: opacity .35s ease, transform .5s ease; }
.shopx-card__back { position: absolute; inset: 0; opacity: 0; }
@media (hover: hover) { .shopx-card:hover .shopx-card__back { opacity: 1; } .shopx-card:hover .shopx-card__media img:first-child { opacity: 0; } }
@media (max-width: 600px) { .shopx-cine { min-height: 78svh; } .shopx-cine__in { padding-top: var(--s6); padding-bottom: var(--s6); } .shopx-cine__bg img { object-position: 66% center; } .shopx-cine__shade { background: linear-gradient(180deg, rgba(10,10,10,.45), rgba(10,10,10,.55) 45%, rgba(10,10,10,.9)); } .shopx-cine__down { display: none; } }
.shopx-promo-legacy { background: var(--yellow); color: var(--black); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.shopx-promo-legacy .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px var(--s2); padding-top: 10px; padding-bottom: 10px; }
.shopx-hero { position: relative; overflow: hidden; background: #1c1c1c; color: #fff; background-image: radial-gradient(ellipse at 15% 0%, rgba(255,255,255,.07), transparent 55%), repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 2px, transparent 2px 10px); }
.shopx-hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--s5); align-items: center; padding-top: var(--s6); padding-bottom: var(--s6); }
.shopx-hero__mark { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.shopx-hero__mark img { height: 55px; width: auto; }
.shopx-hero__mark span { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); border-left: 2px solid var(--yellow); padding-left: var(--s2); }
.shopx-hero__title { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; color: var(--yellow); font-size: clamp(var(--fs2), 5vw, 84px); line-height: .95; margin: 0 0 var(--s3); }
.shopx-hero__sub { font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.85); max-width: 30rem; margin: 0 0 var(--s4); }
.shopx-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.shopx-hero__media { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--s2); }
.shopx-hero__media figure { margin: 0; overflow: hidden; border-radius: 6px; background: #2a2a2a; }
.shopx-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shopx-hero__main { grid-row: 1 / 3; }
.shopx-hero__main img { object-position: 60% center; }
.shopx-hero__small { aspect-ratio: 1 / 1; }
.shopx-hero__small img { object-position: center 20%; }
.shopx-hero__accent { position: absolute; top: 0; bottom: 0; right: 0; width: 7vw; background: var(--yellow); background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0 8px, transparent 8px 21px); }
.shopx-tees { background: #e9e9e9; padding: var(--s5) 0 var(--s6); }
.shopx-rowhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.shopx-rowhead p { margin: 0; color: var(--muted); font-size: 15px; }
.shopx-h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(26px, 3.4vw, var(--fs2)); line-height: 1; margin: 0; }
.shopx-h2--big { font-size: clamp(var(--fs2), 6vw, var(--fs3)); }
.shopx-h2--light { color: #fff; }
.shopx-tees .merch__note { margin-bottom: var(--s3); }
.shopx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.shopx-card { background: #fff; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0,0,0,.08); transition: transform .2s, box-shadow .2s; }
.shopx-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.shopx-card__media { display: block; background: #f3f3f3; aspect-ratio: 3 / 4; }
.shopx-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shopx-card__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s1); padding: 10px var(--s2); background: #2a2a2a; color: #fff; font: 700 13px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.shopx-card__bar a { color: #fff; text-decoration: none; }
.shopx-card__bar a:hover { color: var(--yellow); }
.shopx-card__buy { padding: var(--s2); }
.shopx-moods { background: #e9e9e9; padding: 0 0 var(--s6); }
.shopx-moods__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.shopx-moods a { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: #222; }
.shopx-moods img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.shopx-moods a:hover img { transform: scale(1.04); }
.shopx-moods span { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s5) var(--s3) var(--s2); background: linear-gradient(to top, rgba(0,0,0,.78), transparent); color: #fff; font-family: var(--display); text-transform: uppercase; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: .02em; text-align: center; line-height: 1; }
.shopx-season { padding: var(--s6) 0; background: #fff; }
.shopx-season__head { text-align: center; max-width: 760px; margin: 0 auto var(--s5); }
.shopx-eyebrow { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin: 0 0 var(--s2); font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.shopx-eyebrow::before, .shopx-eyebrow::after { content: ""; flex: 0 0 55px; height: 2px; background: var(--yellow); }
.shopx-season__sub { margin: var(--s2) 0 0; color: var(--muted); font-size: 17px; line-height: 1.5; }
.shopx-season__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.shopx-season__grid a { position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 6px; background: #1f1f1f; }
.shopx-season__grid a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), transparent 55%); }
.shopx-season__grid img, .shopx-season__grid video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.shopx-season__grid li:nth-child(1) img { object-position: center 38%; }
.shopx-season__grid li:nth-child(3) img { object-position: center 18%; }
.shopx-season__grid li:nth-child(4) a { background: #000; display: flex; align-items: center; justify-content: center; }
.shopx-season__grid li:nth-child(4) video { width: 48%; height: auto; object-fit: contain; }
.shopx-season__grid a:hover img, .shopx-season__grid a:hover video { transform: scale(1.04); }
.shopx-season__grid span { position: absolute; z-index: 1; left: var(--s3); bottom: var(--s3); color: #fff; font-family: var(--display); text-transform: uppercase; font-size: clamp(22px, 2.6vw, 38px); line-height: 1; }
.shopx-season__grid small { display: block; font: 700 12px/1.4 var(--font); letter-spacing: .14em; color: var(--yellow); margin-top: 6px; }
.shopx-story { background: var(--black); color: #fff; padding: var(--s6) 0; }
.shopx-story__in { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--s5); align-items: center; }
.shopx-story__copy p { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.8); margin: var(--s3) 0 var(--s4); max-width: 28rem; }
.shopx-story__media { margin: 0; overflow: hidden; border-radius: 6px; }
.shopx-story__media img { width: 100%; height: auto; display: block; }
.shopx-signup { background: #141414; color: #fff; padding: var(--s5) 0; border-top: 1px solid rgba(255,255,255,.08); }
.shopx-signup__in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: center; }
.shopx-signup p { color: rgba(255,255,255,.75); margin: var(--s2) 0 0; }
.shopx-signup__form { display: flex; gap: var(--s1); }
.shopx-signup__form input[type="email"] { flex: 1; min-width: 0; min-height: 55px; padding: 0 var(--s3); border: 0; border-radius: 999px; font: 500 16px var(--font); }
.shopx-fine { margin: var(--s4) 0 0; text-align: center; font-size: 12px; color: rgba(255,255,255,.45); padding: 0 var(--gutter); }
@media (max-width: 1400px) { .shopx-hero__accent { display: none; } }
@media (max-width: 980px) { .shopx-hero__in { grid-template-columns: 1fr; gap: var(--s4); padding-top: var(--s5); padding-bottom: var(--s5); } .shopx-grid { grid-template-columns: repeat(3, 1fr); } .shopx-story__in, .shopx-signup__in { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .shopx-promo { font-size: 11px; } .shopx-hero__media { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .shopx-hero__main { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 4 / 3; } .shopx-hero__mark img { height: 42px; } .shopx-grid { grid-template-columns: repeat(2, 1fr); } .shopx-card__buy { flex-direction: column; } .shopx-card__buy .merch__size, .shopx-card__buy select { width: 100%; } .shopx-moods__grid, .shopx-season__grid { grid-template-columns: 1fr; } .shopx-signup__form { flex-direction: column; } .shopx-signup__form .btn { width: 100%; } }

/* cart drawer (filled by assets/js/cart.js) */
.cart { position: fixed; inset: 0; z-index: 1100; }
.cart[hidden] { display: none; }
.cart__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.cart__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #fff; color: var(--black); display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,.3); animation: cartIn .25s ease-out; }
@keyframes cartIn { from { transform: translateX(34px); opacity: 0; } to { transform: none; opacity: 1; } }
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.cart__head h2 { margin: 0; font: 700 21px/1.2 var(--font); }
.cart__close { width: 44px; height: 44px; border: 0; background: var(--grey); border-radius: 999px; font-size: 26px; line-height: 1; cursor: pointer; color: var(--black); }
.cart__body { flex: 1; overflow: auto; padding: var(--s3); }
.cart__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.cart__item { display: grid; grid-template-columns: 68px 1fr auto; gap: var(--s2); align-items: center; padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.cart__thumb { width: 68px; aspect-ratio: 3 / 4; object-fit: contain; background: var(--grey); border-radius: 8px; }
.cart__name { font-weight: 700; margin: 0; font-size: 15px; }
.cart__meta { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.cart__qty { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.cart__qty button { width: 28px; height: 28px; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; color: var(--black); }
.cart__qty span { min-width: 24px; text-align: center; font-weight: 700; }
.cart__qty .cart__rm { width: auto; height: auto; margin-left: 8px; border: 0; background: none; color: var(--muted); text-decoration: underline; font-size: 13px; }
.cart__line { font-weight: 700; }
.cart__empty { color: var(--muted); margin: 0; }
.cart__foot { padding: var(--s2) var(--s3) var(--s3); border-top: 1px solid var(--line); background: #fff; }
.cart__ful { border: 0; margin: 0 0 var(--s2); padding: 0; display: grid; gap: var(--s1); }
.cart__ful legend { font-weight: 700; font-size: 14px; margin-bottom: var(--s1); }
.cart__ful label { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; padding: 10px 13px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; }
.cart__ful label:has(input:checked) { border-color: var(--black); background: var(--grey); }
.cart__ful input { margin: 3px 0 0; }
.cart__sum { display: flex; justify-content: space-between; font-size: 15px; margin: 4px 0; }
.cart__sum--total { font-size: 18px; border-top: 1px solid var(--line); padding-top: var(--s1); margin-top: var(--s1); }
.cart__checkout { width: 100%; margin-top: var(--s2); }
.cart__checkout[disabled] { opacity: .6; cursor: wait; }
.cart__note { margin: var(--s1) 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.cart__err { margin: var(--s2) 0 0; padding: 10px 13px; background: #fff3f3; color: #a40000; border-radius: 8px; font-size: 14px; }
body.cart-open { overflow: hidden; }
@media (max-width: 600px) { .cart__body, .cart__foot { padding-left: var(--gutter); padding-right: var(--gutter); } }

/* shop: Apex Family merch grid (Fibonacci spacing; cards 3:4) */
.merch__head { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s4); align-items: end; margin-bottom: var(--s4); }
.merch__lead { font-size: 18px; color: var(--muted); max-width: 36rem; margin: 0; }
.merch__note { margin: 0; padding: var(--s3); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px; color: var(--muted); }
.merch[data-shop-open="true"] .merch__note { display: none; }
.merch__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.merch__card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.merch__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.merch__media { position: relative; display: block; aspect-ratio: 3 / 4; background: #fff; }
.merch__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .3s; }
.merch__img--back { opacity: 0; }
@media (hover: hover) {
  .merch__card:hover .merch__img--back, .merch__media:focus-visible .merch__img--back { opacity: 1; }
  .merch__card:hover .merch__img--front, .merch__media:focus-visible .merch__img--front { opacity: 0; }
}
.merch__body { padding: var(--s2) var(--s3) var(--s3); border-top: 1px solid var(--line); }
.merch__name { font: 700 16px/1.2 var(--font); margin: 0 0 4px; }
.merch__meta { margin: 0 0 var(--s2); font-size: 14px; color: var(--muted); }
.merch__buy { display: flex; gap: var(--s1); }
.merch__size { flex: 0 0 auto; display: flex; }
.merch__buy select { min-height: 44px; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 700 14px var(--font); color: var(--black); }
.merch__buy .btn { flex: 1; }
.merch__soon { width: 100%; }
.merch__soon { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s3); border-radius: 999px; background: var(--grey); color: var(--muted); font: 700 13px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.merch__fine { margin: var(--s4) 0 0; text-align: center; font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .merch__grid { grid-template-columns: repeat(3, 1fr); } .merch__head { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 600px) { .merch__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s2); } .merch__body { padding: var(--s2); } .merch__lead { font-size: 16px; } .merch__buy { flex-direction: column; } .merch__size, .merch__buy select { width: 100%; } .merch__buy .btn, .merch__soon { min-height: 40px; padding: 0 var(--s2); font-size: 12px; letter-spacing: .05em; white-space: nowrap; } .merch__buy select { min-height: 40px; padding: 0 var(--s2); font-size: 13px; } .merch__meta { font-size: 13px; } }


/* Drop 1 side rails (Eddie, 2026-10-22, option 1): sticky color swatches on the left, tee facts on the right. Desktop only; the grid stays exactly as it is. */
.shopx-rail { display: none; }
@media (min-width: 1240px) {
  .shopx-tees { display: grid; grid-template-columns: 1fr var(--container) 1fr; align-items: start; }
  .shopx-tees > .container { grid-column: 2; width: 100%; }
  .shopx-rail { display: block; position: sticky; top: 28px; width: 190px; }
  .shopx-rail--left { grid-column: 1; justify-self: end; margin-right: var(--s3); }
  .shopx-rail--right { grid-column: 3; justify-self: start; margin-left: var(--s3); }
}
.shopx-rail__title { font-family: var(--display); text-transform: uppercase; font-size: 18px; letter-spacing: .04em; margin: 0 0 10px; color: #111; }
.shopx-rail__title + .shopx-facts + .shopx-rail__title { margin-top: 18px; }
.shopx-swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.shopx-swatches a { display: flex; align-items: center; gap: 10px; color: #222; text-decoration: none; font: 700 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; padding: 3px 0; }
.shopx-swatches i { width: 22px; height: 22px; border-radius: 50%; background: var(--sw); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18); flex: none; transition: transform .2s; }
.shopx-swatches a:hover i, .shopx-swatches a:focus-visible i { transform: scale(1.15); }
.shopx-swatches a:hover span { text-decoration: underline; }
.shopx-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font: 500 13px/1.4 var(--font); color: #333; }
.shopx-facts li { padding-left: 14px; position: relative; }
.shopx-facts li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--yellow); }
.shopx-facts strong { color: #111; }
.shopx-card.is-flash { outline: 3px solid var(--yellow); outline-offset: 2px; transition: outline-color .6s; }




/* Drop 1 margins (Eddie, 2026-10-22): option 2 texture + option 3 outlined type + option 1 rails, all together. */
@media (min-width: 1240px) {
  .shopx-tees--texture { position: relative; }
  .shopx-tees--texture::before, .shopx-tees--texture::after { content: ""; position: absolute; top: var(--tex-top, 0); height: var(--tex-h, 100%); width: calc((100% - var(--container)) / 2 + 40px); background: url(/assets/img/shop/weave-tile.webp) center / 900px repeat; opacity: .5; pointer-events: none; z-index: 0; }
  .shopx-tees--texture::before { left: 0; -webkit-mask-image: linear-gradient(to right, #000 55%, transparent); mask-image: linear-gradient(to right, #000 55%, transparent); }
  .shopx-tees--texture::after { right: 0; -webkit-mask-image: linear-gradient(to left, #000 55%, transparent); mask-image: linear-gradient(to left, #000 55%, transparent); }
  .shopx-tees--texture > .container, .shopx-tees--texture .shopx-rail { position: relative; z-index: 1; }
  .shopx-tees--texture .shopx-rail { position: sticky; }
}
/* rails start level with the first row of tees (Eddie, 2026-10-22); --grid-top is set by site.js */
@media (min-width: 1240px) { .shopx-tees .shopx-rail { margin-top: var(--grid-top, 0px); } }
/* rails and the container share grid row 1 (fixes the container dropping to a second row) */
@media (min-width: 1240px) { .shopx-tees > .container, .shopx-tees .shopx-rail--left, .shopx-tees .shopx-rail--right { grid-row: 1; } }
/* rails no longer sticky (Eddie, 2026-10-22): they stay level with the first row of tees and scroll with the page */
@media (min-width: 1240px) { .shopx-tees .shopx-rail, .shopx-tees--texture .shopx-rail { position: static; } }


/* Services mascot v2 (Eddie, 2026-10-22): Eddie's pixel-art chibi avatar with a drawn tool belt; walks card to card and works each card's job with an animated tool at his hand. mascot.js */
.apx-mascot { position: absolute; left: 0; top: 0; width: 100px; height: 100px; z-index: 2; pointer-events: none; transition: transform 1s linear; will-change: transform; filter: drop-shadow(0 5px 3px rgba(0,0,0,.18)); }
.apx-mascot .m-flip { width: 100px; height: 100px; transform-origin: center; }
.apx-mascot .m-body { position: relative; width: 100px; height: 100px; }
.apx-mascot .m-img { display: block; width: 100px; height: 100px; image-rendering: pixelated; image-rendering: crisp-edges; }
.apx-mascot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; shape-rendering: crispEdges; }
.apx-mascot .m-prop { display: none; transform-box: view-box; transform-origin: 36px 38px; }
.apx-mascot .m-keyring { transform-box: view-box; transform-origin: 37px 39px; }
/* walking: a little step bounce and rock */
.apx-mascot--walk .m-body { animation: apxStep .26s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes apxStep { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-7px) rotate(6deg); } }
.apx-mascot--design .m-prop--board, .apx-mascot--design .m-prop--pencil { display: block; }
.apx-mascot--design .m-prop--pencil { animation: apxSketch .5s ease-in-out infinite alternate; }
@keyframes apxSketch { from { transform: rotate(-14deg); } to { transform: rotate(12deg); } }
.apx-mascot--build .m-prop--hammer { display: block; animation: apxHammer .6s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes apxHammer { 0% { transform: rotate(-85deg); } 45% { transform: rotate(5deg); } 60% { transform: rotate(5deg); } 100% { transform: rotate(-85deg); } }
.apx-mascot--finish .m-prop--roller { display: block; animation: apxRoll .8s ease-in-out infinite alternate; }
@keyframes apxRoll { from { transform: translateY(-4px) rotate(-8deg); } to { transform: translateY(3px) rotate(8deg); } }
.apx-mascot--restore .m-prop--meter { display: block; animation: apxSweep 1.2s ease-in-out infinite alternate; }
.apx-mascot--restore .m-led { animation: apxBlink .5s steps(2, start) infinite; }
@keyframes apxSweep { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@keyframes apxBlink { to { opacity: .15; } }
.apx-mascot--repairs .m-prop--drill { display: block; animation: apxBuzz .08s linear infinite alternate; }
@keyframes apxBuzz { from { transform: translateX(0); } to { transform: translateX(.5px); } }
.apx-mascot--agents .m-prop--keys { display: block; }
.apx-mascot--agents .m-keyring { animation: apxJingle .7s ease-in-out infinite alternate; }
@keyframes apxJingle { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { .apx-mascot, .apx-mascot * { animation: none !important; transition: none !important; } }
.apx-mascot--idle .m-prop { display: none; }

/* About page: Eddie's logo animation as the background of the intro section (2026-10-22). The clip is black with a white
   logo, so it is shown whole (contain) and the black bars blend into the section; a light shade keeps the copy readable. */
/* About hero on white (Eddie, 2026-10-22; gold was tried first and rejected): black text, eyebrow in the standard gold */
.phero--white { background: #fff; color: #111; }
.phero--white .eyebrow { color: var(--gold); }
.phero--white p { color: rgba(17,17,17,.8); }
.about__intro { position: relative; overflow: hidden; background: #000; min-height: 70vh; display: flex; align-items: center; }   /* flat true black: Eddie wants a clean break from the #111 hero above, not a blend (2026-10-22) */
.about__intro .about__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .72; pointer-events: none; }   /* desktop: wide cut (logo region padded to 2.4:1) fills the section; opacity does the legibility dimming */
@media (max-width: 900px) { .about__intro .about__bg { object-fit: contain; } }   /* phones: portrait cut, shown whole so the name is never cropped */
/* (v7) no flat shade layer: it darkened the section's top below the hero's #111 and left a step. The clip is dimmed via its own opacity instead. */
/* Eddie (2026-10-22): fade the clip's edges + vignette. The mask melts the video into the black section toward every edge; ::after darkens the corners. */
.about__intro .about__bg { -webkit-mask-image: radial-gradient(ellipse 48% 50% at 50% 50%, #000 20%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.12) 78%, transparent 96%); mask-image: radial-gradient(ellipse 48% 50% at 50% 50%, #000 20%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.12) 78%, transparent 96%); }   /* v5: the ellipse now ends inside the box, so the clip is fully gone before it meets any edge (no seam) */
/* (v8) no separate vignette layer either: anything that darkens the section's top edge breaks the match with the hero's #111 above it.
   The mask fading the clip to zero on all sides IS the vignette; the section itself is already black at the corners. */
.about__intro .container { position: relative; z-index: 1; width: 100%; }
.about__intro .about__grid p { color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
@media (min-width: 901px) { .about__intro .about__grid { grid-template-columns: 1fr 1fr; gap: clamp(300px, 30vw, 420px); } }   /* the clip plays in the clear lane between the copy and the card */
.about__intro .about__card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }@media (prefers-reduced-motion: reduce) { .about__intro .about__bg { display: none; } }

/* Book Now page: Eddie's second logo clip (white background) behind the booking card (2026-10-22). Same recipe as the About intro:
   section painted in the clip's own white, wide cut on desktop (cover), portrait cut on phones (contain), soft mask to zero inside the box. */
.book__intro { position: relative; overflow: hidden; background: var(--grey); }
/* v2 (Eddie, 2026-10-22): the logo clip is out; a canvas effect runs behind the booking list (site.js; data-fx "grid" or "plan") */
.book__intro .book__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.book__intro .container { position: relative; z-index: 1; }
.book__intro .apex-book__card { background: rgba(255,255,255,.76); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }   /* frosted, so the centred logo still shows through behind the list */

/* Privacy policy page (2026-10-24): readable column for legal text; footer link separator */
.legal { max-width: 46rem; }
.legal h2 { font-size: 22px; line-height: 1.3; margin: var(--s4) 0 var(--s2); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; }
.legal p { margin: 0 0 var(--s2); }
.legal ul { margin: 0 0 var(--s2); padding-left: 1.2em; }
.legal li { margin: 0 0 8px; }
.ftr__sep { opacity: .7; }
.ftr__bottom a { color: inherit; } /* Privacy link matches the copyright gray (Eddie, 2026-10-24); .ftr a:hover still turns it yellow */
.ftr__sep { opacity: 1; }