/* ============================================================================
   Mad Wild — Consultation form control redesign
   ----------------------------------------------------------------------------
   Loaded in consultation.html AFTER the page's inline <style> block and BEFORE
   components.css, so these rules override the original control CSS at equal
   specificity while components.css keeps the final word on app-wide button /
   input corner radius.

   This is a STYLING-ONLY re-skin. It never changes a control's data-* keys,
   its .chip/.on toggle classes, the .cat-c1..c32 summary palette, or any save
   behaviour. It restyles: the client details card, option chips (with ticks +
   pick-one/pick-all hints), text fields + notes, group headings, the home
   section list (into progress cards), the section hero + progress, the custom
   dropdown, the bottom nav, and the product picker's picked-card.

   Companion behaviour (chip ticks, pick hints, custom dropdown) lives in
   consult-ui.js. Colours come only from the brand palette vars in :root
   (green / gold / cream / ink). No new colours, no blue/purple, no rainbow.
   ============================================================================ */

:root{
  /* Inputs and dropdowns are pure white, same as the sheet card. The 1.5px
     border keeps them visible on the white card. */
  --cui-field-bg:#fff;
  /* Note boxes (the multi-line .ta textareas) stay beige so a note reads as a
     note, distinct from the white fields. Clement asked for the beige note box
     back 2026-07-19 after briefly trying all-white. Same cream the fields used
     to be; focus still flips to white. */
  --cui-note-bg:#FBF9F5;
  --cui-field-border:rgba(28,28,26,.13);
  --cui-radius:11px;
  --cui-radius-lg:14px;
  --cui-shadow:0 1px 2px rgba(28,28,26,.04),0 8px 22px rgba(28,28,26,.05);
  --cui-shadow-lift:0 4px 12px rgba(28,28,26,.09),0 16px 34px rgba(28,28,26,.10);
  --cui-focus-ring:0 0 0 3px rgba(184,145,42,.18);
  --cui-ink-soft:#8A8578;
}

/* ── 01 · Client details card ─────────────────────────────────────────────
   The header card filled first in every meeting. Underline inputs become real
   filled fields; labels go from 10px grey to bold black condensed caps. */
.client-bar{
  border:1px solid rgba(28,28,26,.08);
  border-radius:var(--cui-radius-lg);
  padding:18px;
  gap:14px;
  box-shadow:var(--cui-shadow);
}
.cf label{
  font-family:var(--fh);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--ink);
  margin-bottom:7px;
}
.cf input{
  background:var(--cui-field-bg);
  border:1.5px solid var(--cui-field-border);
  border-radius:10px;
  padding:12px 14px;
  font-weight:600;
  font-size:15px;
  min-height:47px;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.cf input:focus{
  background:var(--white);
  border-color:var(--gold);
  border-bottom-color:var(--gold);
  box-shadow:var(--cui-focus-ring);
}
.cf input::placeholder{color:#A7A29A;font-weight:400}

/* ── 06 · Text fields, selects, notes ─────────────────────────────────────
   Filled fields with a visible border, bigger text, calm gold focus. Radius
   comes from components.css (8px) for input/select/textarea; the fill, border
   and focus ring come from here. */
.ti,.ta,.tsel,.win-i{
  background:var(--cui-field-bg);
  border:1.5px solid var(--cui-field-border);
  font-size:15px;
  color:var(--ink);
}
.ti,.ta,.tsel{padding:12px 14px}
.ti,.tsel{min-height:47px}
/* Note boxes read as beige (fields stay white); focus still flips to white. */
.ta{min-height:104px;line-height:1.5;background:var(--cui-note-bg)}
.ti:focus,.ta:focus,.tsel:focus{
  background:var(--white);
  border-color:var(--gold);
  box-shadow:var(--cui-focus-ring);
}
.ti::placeholder,.ta::placeholder{color:#A7A29A}
.win-i{border-radius:8px;padding:8px 10px;background:var(--cui-field-bg)}

/* Every free-text entry field wears a gold border at rest, so it's obvious at a
   glance where you type (vs the chips you tap and the dropdowns you pick).
   Clement 2026-07-19: "everywhere I have to put text input keep it surrounded in
   gold so it's easier to see." Dropdowns (.tsel) deliberately keep the quiet
   grey border. Focus still adds the gold ring on top for the active field. */
.cf input,.ti,.ta,.win-i{border-color:var(--gold)}

/* Field group label: big bold black caps with a gold marker, and room for the
   pick-one / pick-all hint pill that consult-ui.js appends. Sized up to read as
   a proper question heading (just under the .grp section header). */
.fl{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  font-family:var(--fh);
  font-size:22px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--ink);
  margin-bottom:18px;
  line-height:1.2;
}
.fl::before{
  content:'';
  width:11px;height:11px;
  border-radius:3px;
  background:var(--gold);
  flex:0 0 auto;
}
.fl-hint{
  font-family:var(--fh);
  font-weight:700;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold-deep,#7D6210);
  background:var(--gold-pale);
  border:1px solid var(--gold-border);
  border-radius:6px;
  padding:4px 9px;
}
.fg{margin-bottom:46px}

/* Group heading: the section header, kept clearly bigger than the field labels
   so the hierarchy (section header > question label > options) reads cleanly.
   Gold rule runs out to the right. */
.grp{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:33px;
  margin:60px 0 30px;
  padding-bottom:0;
  border-bottom:none;
  white-space:nowrap;
}
.grp::after{
  content:'';
  flex:1 1 auto;
  min-width:20px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--gold) 0 34px,rgba(184,145,42,.25) 34px);
}
.grp:first-child{margin-top:0}

/* ── 04 · Option chips: "Swatch Card" buttons (Clement-approved 2026-07-19) ─
   Option D from the Build Sheet button mockups. Compact 42px cards; a picked
   card gets a green-tinted fill + strong green outline + a green tick (NOT a
   solid green fill, so colour swatches stay visible on the picked option).
   consult-ui.js wraps each chip's text in .chip-lbl, prepends .chip-tick, adds
   a .chip-swatch colour square on colour questions, and flags "None" options
   with .chip-none. */
.chips{gap:8px}
.chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:9px 15px;
  border:1.5px solid rgba(28,28,26,.2);
  border-radius:9px;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  line-height:1.2;
  transition:border-color .15s,background .15s,transform .12s;
}
.chip:hover{border-color:var(--green)}
.chip:active{transform:scale(.98)}
/* Tick appears only on a picked card, as a plain green check (no disc). */
.chip-tick{
  display:none;
  width:16px;height:16px;
  align-items:center;justify-content:center;
  flex:0 0 auto;
  color:var(--green);
}
.chip-tick svg{width:13px;height:13px}
.chip.on{
  background:var(--green-pale);
  border-color:var(--green);
  box-shadow:inset 0 0 0 1px var(--green);
  color:var(--ink);
  font-weight:700;
}
.chip.on .chip-tick{display:flex}
/* Colour swatch square inside the button (colour questions only). */
.chip-swatch{
  width:19px;height:19px;
  border-radius:6px;
  border:1px solid rgba(28,28,26,.22);
  flex:0 0 auto;
}
/* Hexa ply is black hexagonal-pattern board: black swatch, hexagon outline. */
.chip-swatch.hexa{
  background-color:#26241F;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FAF7F2' stroke-width='1.6'><polygon points='10,3 16,6.5 16,13.5 10,17 4,13.5 4,6.5'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:14px 14px;
  border-color:rgba(28,28,26,.35);
}
/* Custom electro plating keeps a mixed-finish stripe pattern. */
.chip-swatch.plated{
  background:repeating-linear-gradient(45deg,rgba(184,145,42,.35) 0 4px,#fff 4px 8px);
  border-color:var(--gold-border);
}
.chip-swatch.empty{background:transparent;border-style:dashed}
/* None reads as a quiet dashed option; picked it keeps the same tinted state
   (dashed border kept so it never reads as a premium pick). */
.chip.chip-none{border-style:dashed;background:transparent;color:var(--cui-ink-soft)}
.chip.chip-none:hover{border-color:var(--green);color:var(--ink)}
.chip.chip-none.on{
  background:var(--green-pale);
  border-color:var(--green);
  border-style:dashed;
  box-shadow:inset 0 0 0 1px var(--green);
  color:var(--ink);
}

/* Per-field note toggle matches the 42px card grid. */
.note-ic{border-radius:9px;min-height:42px}
.note-box .ta{min-height:76px}

/* ── 03 · Section hero + top nav + progress ───────────────────────────────
   Progress moves inside the green hero where the eye actually lands; the flat
   nav row gets a proper back chip and a gold count pill. */
.top-nav{gap:10px;padding:10px 12px}
.nav-back{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:9px;
  padding:8px 13px;
  font-family:var(--fh);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green);
  transition:border-color .15s;
}
.nav-back:hover{border-color:var(--gold)}
.nav-title{text-align:center;font-weight:800;font-size:14.5px}
.nav-count{
  flex:0 0 auto;
  font-family:var(--fh);font-weight:800;font-size:11.5px;letter-spacing:.06em;
  color:var(--gold-deep,#7D6210);
  background:var(--gold-pale);
  border:1px solid var(--gold-border);
  border-radius:7px;
  padding:5px 9px;
  white-space:nowrap;
}
.sec-hero{background:linear-gradient(155deg,#435C51,#354A41)}
.sec-hero-num{font-size:11px;letter-spacing:.22em}
.sec-hero-title{font-size:29px;line-height:1.08}
.sec-hero-line{display:none}
.sec-hero-prog{display:flex;align-items:center;gap:12px;margin-top:16px}
.sec-hero-track{
  flex:1 1 auto;height:6px;border-radius:6px;
  background:rgba(250,247,242,.18);overflow:hidden;
}
.sec-hero-track > i{display:block;height:100%;width:0;background:var(--gold);border-radius:6px;transition:width .3s}
.sec-hero-count{
  flex:0 0 auto;
  font-family:var(--fh);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(250,247,242,.85);white-space:nowrap;
}
.prog-bar{height:3px}

/* ── 02 · Home section list (into progress cards) ─────────────────────────
   Each section becomes a card that shows its state at a glance: a green tick
   when complete, a gold badge with an answered count + mini bar when in
   progress, a quiet numbered badge when not started. */
.sec-label{
  display:flex;align-items:center;gap:10px;
  padding:20px 20px 12px;
  font-family:var(--fh);font-weight:800;font-size:13px;letter-spacing:.16em;
  color:var(--ink);
}
.sec-label::after{content:'';flex:1;height:1px;background:var(--border)}
#sec-list{display:flex;flex-direction:column;gap:10px;padding:0 16px}
.sec-item{
  position:relative;
  gap:14px;
  padding:13px 15px;
  border:1px solid rgba(28,28,26,.09);
  border-bottom:1px solid rgba(28,28,26,.09);
  border-radius:13px;
  box-shadow:0 1px 2px rgba(28,28,26,.03),0 6px 18px rgba(28,28,26,.05);
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.sec-item:hover{
  transform:translateY(-1px);
  border-color:rgba(184,145,42,.5);
  box-shadow:var(--cui-shadow-lift);
}
.sec-item:active{background:var(--white)}
.sec-item.in-progress::before{
  content:'';position:absolute;left:0;top:11px;bottom:11px;width:4px;
  border-radius:0 4px 4px 0;background:var(--gold);
}
/* The number is a green badge with a gold number, in every state. Done shows a
   gold check on the same green square. */
.sec-num{
  display:flex;align-items:center;justify-content:center;
  width:37px;height:37px;
  border-radius:12px;
  background:var(--green);
  color:var(--gold-light);
  font-family:var(--fh);font-size:14.5px;font-weight:800;
}
.sec-item.done .sec-num .sec-num-txt{display:none}
.sec-item.done .sec-num::after{
  content:'';width:15px;height:15px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23D4AA4A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 8.5l3.5 3.5 7-8'/></svg>");
  background-repeat:no-repeat;background-position:center;
}
.sec-main{flex:1 1 auto;min-width:0}
.sec-name{font-size:16px;font-weight:600;line-height:1.25}
.sec-cap{font-size:12.5px;color:var(--cui-ink-soft);margin-top:2px}
.sec-cap b{color:var(--gold-deep,#7D6210);font-weight:600}
.sec-bar{height:3px;border-radius:3px;background:var(--cream-mid);margin-top:7px;overflow:hidden;display:none}
.sec-item.in-progress .sec-bar{display:block}
.sec-bar > i{display:block;height:100%;width:0;background:var(--gold);border-radius:3px}
/* The old check-dot is superseded by the badge; hide it. */
.sec-dot{display:none}
.sec-chevron{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--cream-dark);color:var(--ink-mid);
  font-size:15px;flex:0 0 auto;
}

/* ── 08 · Bottom nav + main CTA ────────────────────────────────────────────
   The Prev / Next bar floats off the edge with a live position readout in the
   middle; Next carries the weight, Prev steps back. Extra bottom padding on the
   scroll area keeps the last field clear of the floating bar. */
#detail{padding-bottom:104px}
.bot-nav{
  /* Self-contained: own the fixed positioning + stacking so this override
     never relies on the page's original .bot-nav rule staying present. */
  position:fixed;
  z-index:100;
  display:flex;
  left:10px;right:10px;bottom:10px;
  padding:10px;
  gap:10px;
  align-items:stretch;
  border:1px solid rgba(28,28,26,.09);
  border-radius:16px;
  background:rgba(255,255,255,.97);
  box-shadow:0 10px 26px rgba(28,28,26,.14);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.nb{padding:13px 16px;border-radius:11px;font-weight:800}
.nb.prev{flex:0 0 auto;background:var(--white);border:1.5px solid rgba(28,28,26,.16);color:var(--ink-mid)}
.nb.prev:hover{border-color:var(--gold);color:var(--ink)}
.nb.next{flex:1 1 auto;background:var(--green);color:var(--cream)}
.nav-pos{
  flex:0 0 auto;
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  min-width:82px;text-align:center;
}
.nav-pos b{font-family:var(--fh);font-weight:800;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.nav-pos .bar{height:4px;border-radius:4px;background:var(--cream-mid);overflow:hidden}
.nav-pos .bar > i{display:block;height:100%;width:0;background:var(--gold);border-radius:4px;transition:width .3s}

.gen-btn{
  margin-top:24px;
  font-size:16.5px;font-weight:800;
  padding:17px;min-height:54px;
  box-shadow:0 6px 18px rgba(59,82,73,.22);
}

/* ── 05 · Custom dropdown (progressive enhancement) ───────────────────────
   consult-ui.js wraps each native <select class="tsel"> in .mwc-sel, hides the
   native control (kept in the DOM + driven via a dispatched change event so the
   make→model cascade and autosave still fire), and renders this branded
   trigger + menu. If the JS fails, the native select stays visible. */
.mwc-sel{position:relative}
.mwc-sel > select.tsel{
  position:absolute;left:0;top:0;
  width:1px;height:1px;
  opacity:0;pointer-events:none;
  margin:0;padding:0;border:0;
}
.mwc-sel-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:48px;
  background:var(--cui-field-bg);
  border:1.5px solid var(--cui-field-border);
  border-radius:10px;
  padding:8px 9px 8px 14px;
  font-family:var(--fb);font-weight:600;font-size:15px;color:var(--ink);
  text-align:left;cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.mwc-sel-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mwc-sel-val.ph{color:#A7A29A;font-weight:400}
.mwc-sel-chev{
  flex:0 0 auto;
  width:30px;height:30px;border-radius:8px;
  background:var(--gold-pale);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s;
}
.mwc-sel-chev svg{width:13px;height:13px}
.mwc-sel.open .mwc-sel-trigger{border-color:var(--gold);background:var(--white);box-shadow:var(--cui-focus-ring)}
.mwc-sel.open .mwc-sel-chev{transform:rotate(180deg)}
/* A dropdown with a value chosen reads like a made selection: deep-green box,
   white value, gold chevron accent. Empty / placeholder dropdowns stay light.
   Placed after the .open rule so a chosen dropdown keeps its green while open;
   the gold border + ring from .open still show it is active. */
.mwc-sel.is-set .mwc-sel-trigger{background:var(--green);border-color:var(--green);color:var(--cream)}
.mwc-sel.is-set.open .mwc-sel-trigger{border-color:var(--gold)}
.mwc-sel.is-set .mwc-sel-val{color:var(--cream);font-weight:600}
.mwc-sel.is-set .mwc-sel-chev{background:rgba(212,170,74,.24);color:var(--gold-light)}
.mwc-sel.is-disabled{opacity:.6}
.mwc-sel.is-disabled .mwc-sel-trigger{cursor:not-allowed;background:var(--cream-mid)}
.mwc-sel-menu{
  position:absolute;z-index:60;
  top:calc(100% + 7px);left:0;right:0;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:13px;
  box-shadow:0 12px 30px rgba(28,28,26,.14),0 32px 70px rgba(28,28,26,.16);
  padding:6px;
  display:none;
  max-height:280px;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.mwc-sel.open .mwc-sel-menu{display:block}
.mwc-sel-search{
  position:sticky;top:-6px;
  margin:-6px -6px 6px;padding:8px;
  background:var(--white);
  border-bottom:1px solid var(--border);
  border-radius:13px 13px 0 0;
}
.mwc-sel-search input{
  width:100%;
  background:var(--cui-field-bg);
  border:1.5px solid rgba(28,28,26,.12);
  border-radius:8px;
  padding:8px 11px;
  font-family:var(--fb);font-size:14px;font-weight:500;color:var(--ink);
  outline:none;
}
.mwc-sel-search input:focus{border-color:var(--gold)}
.mwc-sel-opt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px;border-radius:8px;
  font-family:var(--fb);font-weight:600;font-size:15px;color:var(--ink);
  cursor:pointer;transition:background .12s;
}
.mwc-sel-opt:hover{background:var(--cream-dark)}
.mwc-sel-opt.is-ph{color:var(--cui-ink-soft);font-weight:500}
.mwc-sel-opt svg{width:14px;height:14px;color:var(--gold);opacity:0;flex:0 0 auto}
.mwc-sel-opt.cur{background:var(--gold-pale);color:var(--green)}
.mwc-sel-opt.cur svg{opacity:1}

/* ── 07 · Picked-product card (window-row + modal picks) ──────────────────
   The inline picker's own selection styling lives in picker.js. This is the
   summary card rendered after a pick, upgraded with a "Selected" eyebrow. */
.pick-card{
  border:1.5px solid var(--gold);
  border-radius:13px;
  padding:15px 16px 13px;
  box-shadow:0 6px 20px rgba(184,145,42,.13);
}
.pick-card-eyebrow{
  display:flex;align-items:center;gap:9px;
  font-family:var(--fh);font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep,#7D6210);
  margin-bottom:8px;
}
.pick-card-eyebrow::before{
  content:'';width:21px;height:21px;border-radius:50%;
  background:var(--gold);flex:0 0 auto;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 8.5l3.5 3.5 7-8'/></svg>");
  background-repeat:no-repeat;background-position:center;
}
.pick-card-pill{border-radius:6px;padding:4px 10px;font-size:12.5px}
.pick-card-pill.sku{background:var(--white);border:1px solid var(--border)}
.pick-btn.change{border-radius:10px}

/* ── Photos per section ────────────────────────────────────────────────────
   Every section gets a photo zone. Thumbnails + a dashed gold "Add / Take
   Photo" tile that opens the device camera or library. Uploads go to Supabase
   Storage; only small path references live in the saved data. */
.photo-zone{border-radius:12px;transition:background .15s}
.photo-zone.drag{background:var(--gold-pale);outline:2px dashed var(--gold);outline-offset:4px}
.photo-grid{display:flex;flex-wrap:wrap;gap:12px}
.photo-thumb{
  position:relative;
  width:118px;height:118px;
  border-radius:12px;overflow:hidden;
  border:1.5px solid var(--border-strong);
  background:var(--cream-mid) center/cover no-repeat;
  cursor:pointer;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.photo-thumb:hover{transform:translateY(-1px);border-color:var(--gold);box-shadow:0 5px 14px rgba(28,28,26,.12)}
.photo-thumb.uploading{cursor:default;display:flex;align-items:center;justify-content:center;background:var(--cream-mid)}
.photo-thumb.uploading:hover{transform:none;border-color:var(--border-strong);box-shadow:none}
.photo-spin{
  width:26px;height:26px;border-radius:50%;
  border:3px solid var(--gold-border);border-top-color:var(--gold);
  animation:photo-spin .7s linear infinite;
}
@keyframes photo-spin{to{transform:rotate(360deg)}}
.photo-del{
  position:absolute;top:6px;right:6px;
  width:26px;height:26px;border-radius:50%;
  border:none;cursor:pointer;
  background:rgba(28,28,26,.62);color:#fff;
  font-size:17px;line-height:1;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.photo-del:hover{background:rgba(28,28,26,.82)}
.photo-add{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  width:118px;height:118px;
  border:2px dashed var(--gold-border);border-radius:12px;
  background:var(--gold-pale);color:var(--gold-deep,#7D6210);
  cursor:pointer;text-align:center;
  font-family:var(--fh);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;
  transition:border-color .15s,background .15s,transform .15s;
}
.photo-add:hover{border-color:var(--gold);background:rgba(184,145,42,.16);transform:translateY(-1px)}
.photo-add:active{transform:scale(.98)}
.photo-add svg{width:26px;height:26px}
.photo-add input{display:none}
.photo-add span{max-width:90px}
/* Full-screen viewer. Closes via the cross or Escape only (never a backdrop
   click), per the app popup rule. */
.photo-lightbox{
  position:fixed;inset:0;z-index:1000;
  background:rgba(20,22,20,.92);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.photo-lightbox img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.photo-lightbox-close{
  position:absolute;top:16px;right:18px;
  width:44px;height:44px;border-radius:50%;
  border:none;cursor:pointer;
  background:rgba(250,247,242,.14);color:var(--cream);
  font-size:26px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.photo-lightbox-close:hover{background:rgba(250,247,242,.26)}

/* ── Reduced motion ───────────────────────────────────────────────────────*/
@media (prefers-reduced-motion:reduce){
  .chip,.sec-item,.mwc-sel-chev,.sec-hero-track > i,.nav-pos .bar > i{transition:none}
  .chip:hover,.sec-item:hover{transform:none}
}

/* ── Phone width ──────────────────────────────────────────────────────────*/
@media (max-width:560px){
  .client-bar{grid-template-columns:1fr}
  .grp{font-size:27px}
  .fl{font-size:19px}
}