/* ═══════════════════════════════════════════════════
   AGRASEN PRIME OVERSEAS
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* High-contrast base (requested) */
  --wh: #000000; /* page background */
  --c:  #000000; /* default section background */
  --cd: rgba(255,255,255,0.12); /* hairlines */
  --ink:#FFFFFF; /* primary text */
  --mid:rgba(255,255,255,0.78);
  --lt: rgba(255,255,255,0.56);
  --red: #8C1410;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', sans-serif;
  --ease:  cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --nav-h: 68px;
  --ribbon-h: 0px;
  --hdr-h: calc(var(--nav-h) + var(--ribbon-h));

  --edge: 10px; /* outer page margin */
  --rad: 26px;
  --card-rad: 20px;
  /* Keep layouts nearly full-width with only a small edge margin */
  --container-max: 2200px;
  --pad-x: clamp(12px, 1.8vw, 32px);
  --panel-bd: rgba(255,255,255,0.10);
  --blk: #000000;
  --line-bd: rgba(255,255,255,0.28);

  /* Type scale: keep small UI text readable on real devices */
  --fs-body: clamp(1rem, 0.98rem + 0.20vw, 1.0625rem); /* ~16-17 */
  --fs-ui: clamp(0.8125rem, 0.78rem + 0.22vw, 0.875rem);     /* ~13-14 */
  --fs-ui-sm: clamp(0.75rem, 0.72rem + 0.20vw, 0.8125rem);   /* ~12-13 */
  --fs-ui-xs: clamp(0.6875rem, 0.66rem + 0.18vw, 0.75rem);   /* ~11-12 */
  --fs-ui-2xs: clamp(0.625rem, 0.60rem + 0.16vw, 0.6875rem); /* ~10-11 */

  /* Tracking presets for uppercase labels */
  --trk-ui: 0.18em;
  --trk-ui-tight: 0.14em;
  --trk-ui-wide: 0.24em;

  /* Accent used for hover highlights (requested light bluish) */
  --ice: #BFE6FF;
}
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--wh);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { font-family: var(--sans); cursor: pointer; }

/* TYPOGRAPHY HELPERS */
.label {
  font-size: var(--fs-ui-xs);
  letter-spacing: var(--trk-ui);
  text-transform: uppercase;
  color: var(--lt);
}
.label.light { color: var(--lt); }

/* LAYOUT */
/* User requested minimal left/right margins even on very large screens */
.wrap   { width:100%; max-width:none; margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-sm{ max-width: 1100px; margin: 0 auto; padding: 0 var(--pad-x); }

/* Rounded panels for sections */
.marquee-band,.stats-bar,.scroll-sec,.proc-sec,.cta-strip,.split{
  margin: var(--edge);
  border-radius: var(--rad);
  overflow: hidden;
  border: 1px solid var(--panel-bd);
}

/* Alternate section skins (black -> white -> black) */
.sec-dark{
  --c:  #000000;
  --cd: rgba(255,255,255,0.12);
  --ink:#FFFFFF;
  --mid:rgba(255,255,255,0.78);
  --lt: rgba(255,255,255,0.56);
  --panel-bd: rgba(255,255,255,0.10);
  color: var(--ink);
  background: var(--c);
}
.sec-light{
  --c:  #FFFFFF;
  --cd: rgba(11,13,16,0.12);
  --ink:#0B0D10;
  --mid:rgba(11,13,16,0.72);
  --lt: rgba(11,13,16,0.55);
  --panel-bd: rgba(11,13,16,0.10);
  --line-bd: rgba(11,13,16,0.22);
  color: var(--ink);
  background: var(--c);
}

/* CURSOR */
.cur-dot  { position:fixed;width:5px;height:5px;background:var(--ink);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%); }
.cur-ring { position:fixed;width:24px;height:24px;border:1px solid rgba(245,242,237,0.22);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:left 0.08s,top 0.08s; }

/* TOP RIBBON  */
.top-ribbon{
  position:fixed;top:0;left:0;right:0;height:var(--ribbon-h);z-index:1200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.88);
  border-bottom:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(14px);
}
.top-ribbon-in{
  width:100%;
  max-width:none;
  padding:0 var(--pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.top-ribbon-msg{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
}
.top-ribbon-kicker{
  font-family:var(--serif);
  font-size:var(--fs-ui-sm);
  font-style:italic;
  color:var(--ink);
  flex-shrink:0;
}
.top-ribbon-text{
  font-size:var(--fs-ui-sm);
  color:var(--mid);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.top-ribbon-link{
  flex-shrink:0;
  font-size:var(--fs-ui-xs);
  letter-spacing:var(--trk-ui-tight);
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid rgba(255,255,255,0.35);
  padding-bottom:2px;
  transition:border-color 0.25s,color 0.25s;
}
.top-ribbon-link:hover{ color:var(--ink); border-bottom-color:rgba(255,255,255,0.75); }
.top-ribbon-link.porcelain{ color:#ef8419; border-bottom-color:rgba(230, 92, 0, 0.98); }
.top-ribbon-link.porcelain:hover{ color:hsl(23, 90%, 49%); border-bottom-color:rgba(245, 101, 11, 0.92); }

/* NAV */
#nav {
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;
  display:flex;align-items:center;padding:0 var(--pad-x);
  transition:background 0.5s,border-color 0.5s;
  border-bottom:1px solid transparent;
}
#nav.solid { background:var(--red);border-bottom-color:rgba(255,255,255,0.12);backdrop-filter:none; }
.nav-logo { display:flex;flex-direction:column;gap:3px;flex-shrink:0; }
.nav-logo-main { font-family:var(--serif);font-size:15px;font-weight:400;letter-spacing:0.18em;text-transform:uppercase;color:#fff;transition:color 0.4s;line-height:1; }
.nav-logo-sub  { font-size:var(--fs-ui-xs);font-weight:300;letter-spacing:var(--trk-ui);text-transform:uppercase;color:rgba(255,255,255,0.32);transition:color 0.4s; }
#nav.solid .nav-logo-main { color:var(--ink); }
#nav.solid .nav-logo-sub  { color:var(--lt); }
.nav-links { position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px; }
.nav-links a {
  font-size:var(--fs-ui-sm);
  font-weight:300;
  letter-spacing:var(--trk-ui-tight);
  text-transform:uppercase;
  color:rgba(255,255,255,0.92);
  padding:11px 18px;
  position:relative;
  transition:color 0.3s,background 0.3s,border-color 0.3s;
  white-space:nowrap;
  border-radius:999px;
  border:1px solid transparent;
}
.nav-links a::after { display:none; }
.nav-links a:hover,
.nav-links a.on {
  background:rgba(214,214,214,0.18);
  border-color:rgba(214,214,214,0.24);
}
#nav.solid .nav-links a { color:rgba(255,255,255,0.96); font-weight:400; }
.nav-link-porcelain{
  background:rgba(160,92,18,0.96) !important;
  border-color:rgba(160,92,18,1) !important;
  color:#fff !important;
}
.nav-link-porcelain:hover{
  background:rgba(181,104,20,1) !important;
  border-color:rgba(181,104,20,1) !important;
  color:#fff !important;
}
.nav-dd { position:relative; }
.nav-dd-panel { position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);background:rgba(0,0,0,0.92);min-width:160px;border-top:2px solid rgba(255,255,255,0.12);box-shadow:0 20px 60px rgba(0,0,0,0.60);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.28s,transform 0.28s;z-index:20;backdrop-filter:blur(18px); }
.nav-dd:hover .nav-dd-panel { opacity:1;visibility:visible;pointer-events:all;transform:translateX(-50%) translateY(0); }
.nav-dd-panel a { display:block;padding:11px 22px;font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui-tight);text-transform:uppercase;color:var(--lt);transition:color 0.2s,padding-left 0.2s; }
.nav-dd-panel a::after { display:none!important; }
.nav-dd-panel a:hover { color:var(--ink);padding-left:28px; }
.nav-right { margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0; }
.nav-search-btn { display:flex;align-items:center;gap:7px;font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui-tight);text-transform:uppercase;color:rgba(255,255,255,0.78);background:none;border:none;padding:8px 12px;transition:color 0.3s; }
#nav.solid .nav-search-btn { color:rgba(255,255,255,0.78); }
.nav-search-btn:hover { color:#fff!important; }
#nav.solid .nav-search-btn:hover { color:#fff!important; }
.nav-cta { font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui-tight);text-transform:uppercase;color:rgba(255,255,255,0.92);padding:9px 18px;border:1px solid rgba(255,255,255,0.42);transition:all 0.3s;white-space:nowrap; }
.nav-cta:hover { background:rgba(255,255,255,0.1); }
#nav.solid .nav-cta { color:rgba(255,255,255,0.92);border-color:rgba(255,255,255,0.42);font-weight:400; }
#nav.solid .nav-cta:hover { background:rgba(0,0,0,0.18);color:#ffffff;border-color:rgba(255,255,255,0.62); }
.nav-burger { display:none;flex-direction:column;gap:5px;background:none;border:none;padding:4px; }
.nav-burger span { display:block;width:22px;height:1px;background:rgba(245,242,237,0.92);transition:all 0.3s; }
#nav.solid .nav-burger span { background:var(--ink); }

/* SEARCH OVERLAY */
#search-ov { position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,0.94);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.35s,visibility 0.35s; }
#search-ov.open { opacity:1;visibility:visible;pointer-events:all; }
.srch-box { width:100%;max-width:640px;padding:0 32px; }
.srch-lbl { font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui-wide);text-transform:uppercase;color:var(--lt);margin-bottom:16px; }
.srch-row { display:flex;align-items:center;border-bottom:1px solid var(--ink); }
.srch-input { flex:1;font-family:var(--serif);font-size:38px;font-weight:300;color:var(--ink);background:none;border:none;outline:none;padding:14px 0; }
.srch-input::placeholder { color:rgba(245,242,237,0.22); }
.srch-x { background:none;border:none;font-size:20px;color:var(--lt);padding:8px;transition:color 0.3s; }
.srch-x:hover { color:var(--ink); }
.srch-hints { margin-top:18px;display:flex;flex-wrap:wrap;gap:10px; }
.srch-hints a { font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui-tight);text-transform:uppercase;color:var(--ink);border-bottom:1px solid rgba(245,242,237,0.22);padding-bottom:2px; }

/* MOBILE MENU */
#mob-menu { position:fixed;inset:0;z-index:2000;background:#0F0C08;display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.4s,visibility 0.4s; }
#mob-menu.open { opacity:1;visibility:visible;pointer-events:all; }
.mob-head { display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,0.06); }
.mob-logo-t { font-family:var(--serif);font-size:16px;font-weight:400;letter-spacing:0.16em;text-transform:uppercase;color:#fff; }
.mob-x { background:none;border:none;font-size:20px;color:rgba(255,255,255,0.5);padding:4px; }
.mob-nav { flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 32px; }
.mob-nav a { font-family:var(--serif);font-size:36px;font-weight:300;color:#fff;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.15);line-height:1.2; }
.mob-nav a:last-child { border-bottom:none; }
.mob-foot { padding:24px 32px;border-top:1px solid rgba(255,255,255,0.06); }
.mob-foot-cta { display:block;text-align:center;font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui);text-transform:uppercase;color:#fff;background:var(--red);padding:15px;margin-bottom:14px; }
.mob-foot-info { font-size:var(--fs-ui-sm);color:rgba(255,255,255,0.22);text-align:center; }

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-ui-sm);font-weight:400;letter-spacing:var(--trk-ui);
  text-transform:uppercase;cursor:pointer;
  padding:12px 16px;border-radius:999px;
  border:1px solid rgba(192,32,28,0.35);
  background:rgba(192,32,28,0.14);
  color:var(--ink);
  transition:background 0.25s,border-color 0.25s,transform 0.25s;
}
.btn:hover{ background:rgba(192,32,28,0.22); border-color:rgba(192,32,28,0.55); transform:translateY(-1px); }
.btn-line{ border-bottom:none; }
.btn-line-wh{ border-bottom:none; }
.btn-fill{ background:rgba(192,32,28,0.16); border-color:rgba(192,32,28,0.45); }
.btn-fill:hover{ background:rgba(192,32,28,0.26); border-color:rgba(192,32,28,0.60); }
.btn-red { color:#fff;background:var(--red);padding:14px 28px; }
.btn-red:hover { background:#6F0F0C; }

/* Hoverable "button feel" for links (used on Home CTAs) */
.btn.btn-hover{
  position:relative;
  overflow:hidden;
  transition:transform 0.25s;
}
.btn.btn-hover::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(191,230,255,0.26),rgba(191,230,255,0.10));
  opacity:0;
  transition:opacity 0.25s;
  pointer-events:none;
}
.btn.btn-hover:hover::before{ opacity:1; }
.btn.btn-hover.btn-line{ border-color:rgba(191,230,255,0.45); }
.btn.btn-hover.btn-line:hover{ border-color:rgba(191,230,255,0.85); transform:translateY(-1px); }
.btn.btn-hover.btn-line-wh{ border-color:rgba(191,230,255,0.45); }
.btn.btn-hover.btn-line-wh:hover{ border-color:rgba(191,230,255,0.85); transform:translateY(-1px); }
.btn.btn-hover.btn-red{ box-shadow:0 18px 55px rgba(140,20,16,0.18); }
.btn.btn-hover.btn-red:hover{ transform:translateY(-1px); }

/* HERO */
.hero { height:100vh;position:relative;display:flex;align-items:flex-end;overflow:hidden; }
.hero-bg { position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,#1a0e08,#0d0a07,#1e1208); }
.hero-video { position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:1;pointer-events:none; }
.hero-ov { position:absolute;inset:0;z-index:2;background:rgba(0,0,0,0); }
.hero-content { position:relative;z-index:3;padding:0 var(--pad-x) 88px;max-width:820px; }
.hero-eye { display:flex;align-items:center;gap:16px;margin-bottom:26px; }
.hero-eye::before { content:'';width:36px;height:1px;background:rgba(255,255,255,0.3);flex-shrink:0; }
.hero-eye span { font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui-wide);text-transform:uppercase;color:rgba(255,255,255,0.75); }
.hero-title { font-family:var(--serif);font-size:clamp(52px,6.5vw,92px);font-weight:300;line-height:1.03;color:#fff;letter-spacing:-0.01em;margin-bottom:26px; }
.hero-title em { font-style:italic;color:rgba(255,255,255,0.48); }
.hero-sub { font-size:clamp(0.95rem, 0.90rem + 0.25vw, 1.0625rem);line-height:1.85;color:rgba(255,255,255,0.42);max-width:420px;margin-bottom:48px;font-weight:300; }
.hero-btns { display:flex;align-items:center;gap:36px; }
.hero-scroll { position:absolute;bottom:36px;right:var(--pad-x);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px; }
.hero-scroll span { font-size:var(--fs-ui-2xs);letter-spacing:var(--trk-ui-wide);text-transform:uppercase;color:rgba(255,255,255,0.22);writing-mode:vertical-rl; }
.hs-line { width:1px;height:52px;background:linear-gradient(to bottom,rgba(255,255,255,0.22),transparent);animation:sP 2.5s ease-in-out infinite; }
@keyframes sP { 0%,100%{opacity:.22} 50%{opacity:.6} }
.fade-up { opacity:0;transform:translateY(22px);animation:fU 1.2s var(--ease) forwards; }
.d1{animation-delay:0.2s}.d2{animation-delay:0.5s}.d3{animation-delay:0.8s}.d4{animation-delay:1.1s}
@keyframes fU { to{opacity:1;transform:translateY(0)} }

/* MARQUEE */
.marquee-band { background:var(--c);border:none;padding:17px 0;overflow:hidden; }
.marquee-track { display:flex;white-space:nowrap;animation:mq 30s linear infinite; }
.marquee-track span { font-family:var(--serif);font-size:15px;font-style:italic;font-weight:300;color:var(--lt);padding-right:48px; }
.marquee-track i { color:var(--cd);padding-right:48px;font-style:normal; }
@keyframes mq { to{transform:translateX(-50%)} }

/* STATS */
.stats-bar { background:var(--c);border-bottom:none; }
.stats-row { display:flex;border-top:1px solid var(--cd); }
.stat { flex:1;padding:48px 0 48px var(--pad-x);border-right:1px solid var(--cd); }
.stat:last-child { border-right:none; }
.stat-n { font-family:var(--serif);font-size:52px;font-weight:300;color:var(--ink);line-height:1;margin-bottom:8px;letter-spacing:-0.02em; }
.stat-l { font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui);text-transform:uppercase;color:var(--ink); }

/* SCROLL PRODUCTS */
.scroll-sec { padding:108px 0 0;background:var(--c); }
.scroll-head { display:flex;justify-content:space-between;align-items:flex-end;padding:0 var(--pad-x);margin-bottom:48px; }
.arrow-wrap { display:flex;gap:8px; }
.arr-btn { width:44px;height:44px;border:1px solid var(--cd);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--lt);transition:all 0.3s; }
.arr-btn:hover { background:var(--ink);color:var(--c);border-color:var(--ink); }
.scroll-wrap { overflow:hidden;cursor:grab;user-select:none; }
.scroll-wrap:active { cursor:grabbing; }
#scrollTrack { display:flex;gap:3px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:0 var(--pad-x) var(--pad-x); }
#scrollTrack::-webkit-scrollbar { display:none; }
.sc-card { flex:0 0 300px;height:460px;position:relative;overflow:hidden;display:block;transition:flex-basis 0.45s var(--ease);border-radius:var(--card-rad); }
.sc-card:hover { flex-basis:360px; }
.sc-bg { position:absolute;inset:0;transition:transform 0.8s var(--ease); }
.sc-card:hover .sc-bg { transform:scale(1.05); }
.sc-bg img { width:100%;height:100%;object-fit:cover; }
.sc-ov { position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,5,0.88) 0%,transparent 55%);opacity:0;transition:opacity 0.4s; }
.sc-card:hover .sc-ov { opacity:1; }
.sc-info { position:absolute;bottom:0;left:0;right:0;padding:26px 24px;transform:translateY(6px);transition:transform 0.4s var(--ease); }
.sc-card:hover .sc-info { transform:translateY(0); }
.sc-name { font-family:var(--serif);font-size:22px;font-weight:300;color:#fff;line-height:1.2; }
.sc-cat { font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui-tight);text-transform:uppercase;color:rgba(255,255,255,0.75);margin-top:6px;opacity:0;transform:translateY(4px);transition:opacity 0.4s 0.06s,transform 0.4s 0.06s; }
.sc-card:hover .sc-cat { opacity:1;transform:translateY(0); }
.prog-bar { height:1px;background:var(--cd);margin:0 var(--pad-x); }
.prog-fill { height:100%;background:var(--ink);width:0%;transition:width 0.1s; }

/* EDITORIAL SPLIT */
.split { display:grid;grid-template-columns:1fr 1fr; }
.split-vis { position:relative;overflow:hidden;min-height:580px; }
.split-vis-inner { position:absolute;inset:0;transition:transform 1s var(--ease); }
.split:hover .split-vis-inner { transform:scale(1.03); }
.split-vis-inner img { width:100%;height:100%;object-fit:cover; }
.split-txt { padding:clamp(52px,6vw,80px) var(--pad-x);display:flex;flex-direction:column;justify-content:center; }
.split-txt.cream { background:var(--c); }
.split-txt.dark  { background:var(--blk); }
.divider { width:40px;height:1px;background:var(--lt);margin:24px 0; }
.divider.light { background:rgba(255,255,255,0.2); }

/* PROCESS */
.proc-sec { background:var(--c);padding:112px 0; }
.proc-grid { display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--cd);margin-top:60px; }
.proc-item { padding:44px 36px 44px 0;border-right:1px solid var(--cd); }
.proc-item:last-child { border-right:none;padding-right:0; }
.proc-num { font-family:var(--serif);font-size:52px;font-weight:300;color:var(--cd);line-height:1;margin-bottom:22px;letter-spacing:-0.03em; }
.proc-title { font-family:var(--serif);font-size:22px;font-weight:300;color:var(--ink);margin-bottom:12px; }
.proc-desc { font-size:var(--fs-ui);line-height:1.85;color:var(--mid); }

/* CATALOGUE */
.cat-page { --cat-sb-w: 230px; display:flex;min-height:100vh;padding:calc(var(--hdr-h) + var(--edge)) var(--edge) var(--edge);gap:var(--edge);align-items:flex-start; }
.cat-sb { width:var(--cat-sb-w);flex-shrink:0;padding:48px 28px 48px 40px;background:var(--c);border:1px solid var(--panel-bd);border-radius:var(--rad);position:sticky;top:calc(var(--hdr-h) + var(--edge));height:calc(100vh - (var(--hdr-h) + (2 * var(--edge))));overflow-y:auto;scrollbar-width:none; }
.cat-sb::-webkit-scrollbar { display:none; }
.cat-title { font-family:var(--serif);font-size:40px;font-weight:300;color:var(--ink);margin-bottom:44px;line-height:1; }
.fg { margin-bottom:28px; }
.fg-label { font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui);text-transform:uppercase;color:var(--ink);margin-bottom:14px;font-weight:400; }
.fl { list-style:none;display:flex;flex-direction:column;gap:1px; }
.fi { display:flex;align-items:center;gap:11px;font-size:var(--fs-ui);font-weight:300;color:var(--mid);padding:8px 10px;transition:color 0.2s,background 0.2s;border-radius:2px; }
.fi:hover { color:var(--ink);background:var(--c); }
.fi.on { color:var(--ink);font-weight:400; }
.fsw { width:20px;height:20px;border-radius:50%;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,0.12); }
.fx { margin-left:auto;font-size:var(--fs-ui-2xs);color:var(--lt); }
.f-clear { display:block;font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui-tight);text-transform:uppercase;color:var(--lt);border:1px solid var(--cd);padding:8px;text-align:center;margin-top:12px;transition:all 0.2s; }
.f-clear:hover { background:rgba(245,242,237,0.92);color:#0B0D10;border-color:rgba(245,242,237,0.92); }
.sb-count { margin-top:28px;font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui);text-transform:uppercase;color:var(--lt);border-top:1px solid var(--cd);padding-top:20px; }
.cat-main { flex:1;min-width:0;background:var(--c);border:1px solid var(--panel-bd);border-radius:var(--rad);overflow:hidden;padding-top:70px; }
.cat-bar { display:flex;justify-content:space-between;align-items:center;padding:16px 32px;border-bottom:1px solid var(--cd);position:fixed;top:calc(var(--hdr-h) + var(--edge));left:calc(var(--cat-sb-w) + (3 * var(--edge)));right:var(--edge);background:rgba(0,0,0,0.86);backdrop-filter:blur(14px);z-index:110;border-radius:var(--rad) var(--rad) 0 0; }
.sec-light .cat-bar { background:rgba(255,255,255,0.90); }
.sec-dark .cat-bar  { background:rgba(0,0,0,0.86); }
.cat-tabs { display:flex; }
.cat-tab { font-size:var(--fs-ui-sm);letter-spacing:var(--trk-ui-tight);text-transform:uppercase;font-weight:300;color:var(--lt);padding:8px 18px;border:none;border-bottom:1px solid transparent;background:none;transition:color 0.3s,border-color 0.3s;cursor:pointer; }
.cat-tab:hover { color:var(--ink); }
.cat-tab.on { color:var(--ink);border-bottom-color:var(--ink);font-weight:400; }
.cat-count-lbl { font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui);text-transform:uppercase;color:var(--ink); }
.sg-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px; }
.sg-card { position:relative;overflow:hidden;aspect-ratio:4/3;display:block;border-radius:var(--card-rad); }
.sg-bg { position:absolute;inset:0;transition:transform 0.7s var(--ease); }
.sg-card:hover .sg-bg { transform:scale(1.06); }
.sg-bg img,.sg-bg-grad { width:100%;height:100%;object-fit:cover; }
.sg-bg-grad { position:absolute;inset:0; }
.sg-ov { position:absolute;inset:0;background:rgba(10,8,5,0);transition:background 0.35s; }
.sg-card:hover .sg-ov { background:rgba(10,8,5,0.18); }
.sg-lbl { position:absolute;bottom:0;left:0;right:0;padding:12px 14px;background:linear-gradient(to top,rgba(10,8,5,0.78),transparent);opacity:0;transform:translateY(4px);transition:opacity 0.35s,transform 0.35s; }
.sg-card:hover .sg-lbl { opacity:1;transform:translateY(0); }
.sg-name { font-family:var(--serif);font-size:17px;font-weight:300;color:#fff;line-height:1.2; }
.sg-org { font-size:var(--fs-ui-2xs);letter-spacing:var(--trk-ui-tight);text-transform:uppercase;color:rgba(255,255,255,0.45);margin-top:4px; }
.feat-ring { position:absolute;inset:3px;border:2px solid rgba(192,32,28,0.65);opacity:0;transition:opacity 0.3s;z-index:2;pointer-events:none; }
.sg-card .feat-ring { border-radius:calc(var(--card-rad) - 3px); }
.sg-card:hover .feat-ring { opacity:1; }

/* PROJECTS */
.proj-page-hdr { padding:140px 0 72px;background:var(--blk);position:relative;overflow:hidden; }
.proj-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px; }
.pj-card { position:relative;overflow:hidden;aspect-ratio:3/4;display:block;border-radius:var(--card-rad); }
.pj-bg { position:absolute;inset:0;transition:transform 0.8s var(--ease); }
.pj-card:hover .pj-bg { transform:scale(1.05); }
.pj-bg img { width:100%;height:100%;object-fit:cover; }
.pj-bg-grad { position:absolute;inset:0; }
.pj-ov { position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,5,0.88) 0%,rgba(10,8,5,0.18) 55%,transparent 100%); }
.pj-info { position:absolute;bottom:0;padding:28px 24px; }
.pj-stone { font-size:var(--fs-ui-2xs);letter-spacing:var(--trk-ui-tight);text-transform:uppercase;color:rgba(255,255,255,0.7);margin-bottom:7px; }
.pj-name { font-family:var(--serif);font-size:21px;font-weight:300;color:#fff;line-height:1.2;margin-bottom:5px; }
.pj-loc { font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui-tight);text-transform:uppercase;color:rgba(255,255,255,0.7); }

/* DETAIL */
.detail-hero { height:65vh;position:relative;overflow:hidden;margin-top:var(--hdr-h); }
.detail-hero-bg { position:absolute;inset:0; }
.detail-hero-bg img { width:100%;height:100%;object-fit:cover; }
.detail-hero-ov { position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(10,8,5,0.72) 100%); }
.detail-hero-info { position:absolute;bottom:0;left:0;right:0;padding:48px var(--pad-x); }
.dcrumb { font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui-tight);text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:14px;display:flex;align-items:center;gap:8px; }
.dcrumb a { color:rgba(255,255,255,0.45); }
.dcrumb a:hover { color:#fff; }
.detail-name { font-family:var(--serif);font-size:clamp(40px,5vw,68px);font-weight:300;color:#fff;line-height:1.05; }
.detail-sub { font-size:var(--fs-ui-sm);letter-spacing:var(--trk-ui-tight);text-transform:uppercase;color:rgba(255,255,255,0.45);margin-top:10px; }
.detail-body { display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:72px var(--pad-x);max-width:var(--container-max);margin:var(--edge) auto;background:var(--c);border:1px solid var(--panel-bd);border-radius:var(--rad);overflow:hidden; }
.dtable { width:100%;border-collapse:collapse;margin:24px 0; }
.dtable tr { border-bottom:1px solid var(--cd); }
.dtable td { padding:13px 0;font-size:14px;font-weight:300; }
.dtable td:first-child { font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui-tight);text-transform:uppercase;color:var(--lt);width:38%; }
.gallery { display:grid;grid-template-columns:1fr 1fr;gap:3px; }
.gallery img { width:100%;aspect-ratio:4/3;object-fit:cover; }
.gallery .main-img { grid-column:1/-1;aspect-ratio:16/9; }

/* ABOUT */
.about-fac { display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:56px; }
.fac-item { position:relative;min-height:540px;padding:34px;overflow:hidden;border-radius:var(--card-rad);background:#080808 center/cover no-repeat;display:flex;align-items:flex-end; }
.fac-overlay { position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,0.20) 0%,rgba(8,8,8,0.42) 36%,rgba(8,8,8,0.88) 100%); }
.fac-content { position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;width:100%; }
.fac-num { font-family:var(--serif);font-size:44px;font-weight:300;color:rgba(255,255,255,0.26);line-height:1;margin-bottom:18px; }
.fac-chip { display:inline-block;font-family:var(--serif);font-size:22px;font-weight:300;color:#fff;margin-bottom:12px;padding:10px 14px;background:rgba(188,78,66,0.78);backdrop-filter:blur(8px);border-radius:999px; }
.fac-loc { font-size:var(--fs-ui-sm);color:rgba(255,255,255,0.92);line-height:1.7; }
.fac-specs { margin-top:14px;font-size:var(--fs-ui-sm);color:rgba(255,255,255,0.88);line-height:1.9; }
.fac-copy { display:inline-block;max-width:100%;padding:12px 14px;background:rgba(188,78,66,0.22);border:1px solid rgba(255,255,255,0.14);border-radius:18px;backdrop-filter:blur(10px); }
.fac-specs.fac-copy { margin-top:12px; }

/* CONTACT */
.contact-wrap { display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - var(--hdr-h));margin-top:var(--hdr-h); }
.contact-form { padding:clamp(52px,6vw,80px) var(--pad-x);background:var(--c);display:flex;flex-direction:column;justify-content:center; }
.contact-info { padding:clamp(52px,6vw,80px) var(--pad-x);background:var(--blk);display:flex;flex-direction:column;justify-content:center; }
.ff { display:flex;flex-direction:column;gap:7px;margin-bottom:20px; }
.ff-lbl { font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui);text-transform:uppercase;color:var(--lt); }
.ff-input,.ff-sel,.ff-ta { font-family:var(--sans);font-size:13.5px;font-weight:300;color:var(--ink);background:transparent;border:none;border-bottom:1px solid var(--cd);padding:10px 0;outline:none;transition:border-color 0.3s;width:100%; }
.ff-input:focus,.ff-sel:focus,.ff-ta:focus { border-bottom-color:var(--ink); }
.ff-ta { resize:none;min-height:100px; }
.ff-input::placeholder,.ff-ta::placeholder { color:rgba(245,242,237,0.22); }
.ff-row { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.ci-block { margin-bottom:36px;padding-left:20px;border-left:1px solid rgba(255,255,255,0.1); }
.ci-lbl { font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui);text-transform:uppercase;color:rgba(255,255,255,0.6);margin-bottom:8px; }
.ci-val { font-family:var(--serif);font-size:20px;font-weight:300;color:#fff; }
.ci-sub { font-size:var(--fs-ui-sm);color:rgba(255,255,255,0.6);margin-top:4px; }

/* CTA STRIP */
.cta-strip { background:var(--c);border-top:none;padding:96px var(--pad-x);display:flex;justify-content:space-between;align-items:center;gap:40px; }
.cta-title { font-family:var(--serif);font-size:clamp(34px,3.5vw,52px);font-weight:300;color:var(--ink);line-height:1.1; }
.cta-title em { font-style:italic;color:var(--mid); }
.cta-r { flex-shrink:0;display:flex;flex-direction:column;gap:14px;align-items:flex-end; }

/* FOOTER */
.footer { background:transparent; padding:var(--edge) var(--edge) 40px; }
.footer-in { max-width:none;margin:0;padding:clamp(40px,4.5vw,72px) var(--pad-x) clamp(22px,3vw,36px);background:#d9d9d9;border:1px solid rgba(11,13,16,0.10);border-radius:var(--rad);overflow:hidden; }
.footer-grid { display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;border-bottom:1px solid rgba(11,13,16,0.10);padding-bottom:52px;margin-bottom:32px; }
.fl-logo { font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:0.14em;text-transform:uppercase;color:#111111;margin-bottom:4px; }
.fl-sub { font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui);text-transform:uppercase;color:rgba(11,13,16,0.58);margin-bottom:18px; }
.fl-tag { font-family:var(--serif);font-size:13px;font-style:italic;color:rgba(11,13,16,0.62);line-height:1.75;margin-bottom:18px;max-width:200px; }
.fl-contact a { display:block;font-size:var(--fs-ui-sm);font-weight:300;color:rgba(11,13,16,0.76);margin-bottom:8px;transition:color 0.3s; }
.fl-contact a:hover { color:var(--red); }
.fc-title { font-size:var(--fs-ui-xs);letter-spacing:var(--trk-ui);text-transform:uppercase;color:rgba(11,13,16,0.52);margin-bottom:20px; }
.fc a,.fc span { display:block;font-size:var(--fs-ui-sm);font-weight:300;color:rgba(11,13,16,0.74);margin-bottom:10px;transition:color 0.3s; }
.fc a:hover { color:var(--red); }
.footer-bot { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px; }
.footer-copy,.footer-addr { font-size:var(--fs-ui-sm);color:rgba(11,13,16,0.52); }

/* REVEAL ANIMATION */
.reveal { opacity:0;transform:translateY(18px);transition:opacity 0.8s var(--ease),transform 0.8s var(--ease); }
.reveal.shown { opacity:1;transform:translateY(0); }
.r2{transition-delay:0.12s}.r3{transition-delay:0.24s}.r4{transition-delay:0.36s}

/* RESPONSIVE */
@media(max-width:1024px){
  .sg-grid{grid-template-columns:repeat(2,1fr)!important}
  .proj-grid,.pj-grid{grid-template-columns:repeat(2,1fr)!important}
  .proc-grid{grid-template-columns:1fr 1fr!important}
  .footer-grid{grid-template-columns:1fr 1fr!important}
  .split{grid-template-columns:1fr!important}
  .split-vis{min-height:380px!important}
}
@media(max-width:900px){
  .nav-links,.nav-cta{display:none!important}
  .nav-burger{display:flex!important}
  .cat-sb{display:none}
  .cat-page{display:block}
}
@media(max-width:768px){
  .wrap,.wrap-sm{padding:0 var(--pad-x)}
  .top-ribbon-in{padding:0 var(--pad-x)}
  .top-ribbon-text{display:none}
  .top-ribbon{height:36px}
  :root{--ribbon-h:0px;--edge:6px;--rad:20px}
  .hero-content{padding:0 24px 72px}
  .hero-btns{flex-direction:column;align-items:flex-start;gap:16px}
  .scroll-head{padding:0 24px;flex-direction:column;align-items:flex-start;gap:20px}
  #scrollTrack{padding:0 24px 36px}
  .sc-card{flex:0 0 240px;height:360px}
  .prog-bar{margin:0 24px}
  .split-txt{padding:52px 24px!important}
  .proc-sec{padding:72px 0}
  .proc-grid{grid-template-columns:1fr!important}
  .proc-item{border-right:none;border-bottom:1px solid var(--cd);padding:36px 0}
  .about-fac{grid-template-columns:1fr!important}
  .fac-item{min-height:420px;padding:24px}
  .fac-chip{font-size:20px}
  .fac-copy{padding:10px 12px;border-radius:16px}
  .stats-row{flex-wrap:wrap}
  .stat{flex:1 1 50%;border-right:none;border-bottom:1px solid var(--cd);padding:36px 24px}
  .cta-strip{flex-direction:column;align-items:flex-start;padding:64px 24px;gap:28px}
  .cta-r{align-items:flex-start}
  .contact-wrap{grid-template-columns:1fr!important}
  .contact-form,.contact-info{padding:52px 24px}
  .detail-body{grid-template-columns:1fr!important;gap:36px;padding:40px 24px;margin:var(--edge)}
  .proj-page-hdr{padding:100px 24px 48px}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:32px}
  .footer-in{padding:52px var(--pad-x) 28px}
  .cat-bar{padding:12px 16px}
  .sg-grid{grid-template-columns:1fr 1fr!important}
  .gallery{grid-template-columns:1fr!important}
  .gallery .main-img{grid-column:auto}
  .proj-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:480px){
  .sg-grid,.proj-grid,.pj-grid{grid-template-columns:1fr!important}
  .ff-row{grid-template-columns:1fr!important}
  .footer-grid{grid-template-columns:1fr!important}
  .stat{flex:1 1 100%}
}

/* ── NAV ALWAYS SOLID ON NON-HERO PAGES ───────── */
body.page-inner #nav {
  background: var(--red) !important;
  border-bottom-color: rgba(255,255,255,0.12) !important;
}
body.page-inner #nav .nav-logo-main { color: var(--ink) !important; }
body.page-inner #nav .nav-logo-sub  { color: var(--lt) !important; }
body.page-inner #nav .nav-links a   { color: rgba(255,255,255,0.96) !important; }
body.page-inner #nav .nav-search-btn{ color: rgba(255,255,255,0.78) !important; }
body.page-inner #nav .nav-cta       { color: rgba(255,255,255,0.92) !important; border-color: rgba(255,255,255,0.42) !important; }
body.page-inner #nav .nav-burger span { background: var(--ink) !important; }

/* ── HERO GUARANTEED CONTRAST ─────────────────── */
.hero-bg {
  background: linear-gradient(160deg,#12090500,#0a080500,#160c0500) !important;
  z-index: 0;
}
/* Strong overlay always present regardless of video */
.hero-ov {
  background: rgba(0,0,0,0) !important;
  z-index: 2;
}
/* Hero text guaranteed white */
.hero-content * { color: #ffffff !important; }
.hero-title em  { color: rgba(255,255,255,0.52) !important; }
.hero-sub       { color: rgba(255,255,255,0.48) !important; }
.hero-eye span  { color: rgba(135, 122, 122, 0.48) !important; }
.hero-eye::before { background: rgba(255,255,255,0.35) !important; }
.btn-line-wh    { color: #ffffff !important; border-bottom-color: rgba(255,255,255,0.4) !important; }

/* ── MACHINE GRID (company page) ──────────────── */
.machine-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:3px;margin-top:3px; }
.machine-img  { width:100%;aspect-ratio:4/3;object-fit:cover;display:block; }
.machine-placeholder { width:100%;aspect-ratio:4/3;background:var(--c);display:flex;align-items:center;justify-content:center; }
.machine-placeholder span { font-size:var(--fs-ui-sm);color:var(--lt);letter-spacing:0.1em; }

/* ── FACTORY ROW ────────────────────────────── */
.factory-split { display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:3px; }
.factory-img { width:100%;aspect-ratio:16/9;object-fit:cover;display:block; }
.quality-fallback { position:absolute;inset:0;background:var(--c);display:flex;flex-direction:column;justify-content:center;padding:64px 52px; }
.quality-fallback-title { font-family:var(--serif);font-size:72px;font-weight:300;color:var(--ink);line-height:1;margin-bottom:20px;letter-spacing:-0.03em; }
.quality-fallback-quote { font-family:var(--serif);font-size:18px;font-style:italic;font-weight:300;color:var(--lt);line-height:1.6;max-width:340px; }
.quality-fallback-item { display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--cd); }
.quality-fallback-dot { width:4px;height:4px;background:var(--lt);border-radius:50%;flex-shrink:0; }
.quality-fallback-text { font-size:13px;font-weight:300;color:var(--lt); }

@media(max-width:768px){
  .machine-grid { grid-template-columns:1fr !important; }
  .factory-split { grid-template-columns:1fr !important; }
  .quality-fallback { position:relative; padding:32px 24px; justify-content:flex-start; min-height:auto; }
  .quality-fallback-title { font-size:clamp(42px, 15vw, 64px); margin-bottom:14px; }
  .quality-fallback-quote { font-size:16px; line-height:1.55; max-width:none; margin-bottom:8px; }
  .quality-fallback-item { gap:10px; padding:10px 0; }
  .quality-fallback-text { font-size:12.5px; line-height:1.7; }
}

/* ── MOBILE FILTER BAR ───────────────────────── */
.mob-filter-bar {
  display: none;
  flex-direction: column;
  padding-top: var(--hdr-h);
  background: rgba(0,0,0,0.92);
  border-bottom: 1px solid var(--cd);
  position: sticky;
  top: 0;
  z-index: 200;
}
.sec-light.mob-filter-bar { background: rgba(255,255,255,0.92); }
.sec-dark.mob-filter-bar  { background: rgba(0,0,0,0.92); }

/* Category tabs row */
.mob-filter-tabs {
  display: flex;
  border-bottom: 1px solid var(--cd);
}
.mob-tab {
  flex: 1;
  font-family: var(--sans);
  font-size: var(--fs-ui-sm);
  font-weight: 300;
  letter-spacing: var(--trk-ui-tight);
  text-transform: uppercase;
  color: var(--lt);
  padding: 13px 8px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
  margin-bottom: -1px;
}
.mob-tab.on  { color: var(--ink); border-bottom-color: var(--ink); font-weight: 400; }
.mob-tab:hover { color: var(--ink); }

/* Filter toggle button */
.mob-filter-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: var(--fs-ui-sm);
  font-weight: 300;
  letter-spacing: var(--trk-ui-tight);
  text-transform: uppercase;
  color: var(--lt);
  padding: 12px 20px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
}
.mob-filter-toggle:hover { color: var(--ink); }
.mob-filter-toggle.active { color: var(--ink); border-bottom-color: var(--ink); }

/* Color pills container */
.mob-color-pills {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--cd);
  background: var(--c);
}
.mob-color-pills.open { display: flex; }

/* Individual pill */
.mob-color-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-ui-sm);
  font-weight: 300;
  color: var(--lt);
  padding: 7px 14px 7px 9px;
  border: 1px solid var(--cd);
  border-radius: 100px;
  background: rgba(245,242,237,0.06);
  transition: all 0.2s;
  white-space: nowrap;
}
.mob-color-pill:hover { border-color: var(--ink); color: var(--ink); }
.mob-color-pill.on {
  background: rgba(245,242,237,0.92);
  color: #0B0D10;
  border-color: rgba(245,242,237,0.92);
}
.sec-light .mob-color-pill { background: rgba(11,13,16,0.04); color: rgba(11,13,16,0.72); border-color: rgba(11,13,16,0.14); }
.sec-light .mob-color-pill:hover { border-color: rgba(11,13,16,0.32); color: #0B0D10; }
.sec-light .mob-color-pill.on { background: #0B0D10; color: #fff; border-color: #0B0D10; }
.mob-pill-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.mob-clear-pill {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-ui-sm);
  font-weight: 300;
  color: var(--lt);
  padding: 7px 14px;
  border: 1px dashed var(--cd);
  border-radius: 100px;
  background: transparent;
  transition: all 0.2s;
}
.mob-clear-pill:hover { border-color: var(--red); color: var(--red); }

/* Show on mobile, hide sidebar */
@media (max-width: 900px) {
  .mob-filter-bar { display: flex; }
  /* Remove top padding from cat-page since filter bar handles it */
  .cat-page { padding: 0 !important; }
  /* Mobile already has its own category ribbon, so hide the inner duplicate bar */
  .cat-bar { display: none !important; }
  /* Stone grid takes full width */
  .cat-main { width: 100%; padding-top: 0 !important; }
  .sg-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2px !important;
    padding: 2px !important;
  }
}

@media (max-width: 480px) {
  .sg-grid { grid-template-columns: 1fr 1fr !important; }
  /* Slightly taller pills for easier tapping */
  .mob-color-pill { padding: 9px 14px 9px 9px; }
}