/* ============================================================
   ABC Corporation - Site Styles v3
   Direction: Aesop-inspired. White-dominant, image-heavy,
   editorial restraint. Red (logo) is the ONLY accent.
   Font: Instrument Sans (closest free match to Aesop's Suisse Int'l).
   Header: two rows, centered wordmark over centered nav,
   always visible while scrolling.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --red:#C8102E;           /* Cardinal - the accent */
  --red-dark:#A30D26;
  --pale-red:#FCEAED;
  --ink:#1B2733;           /* body text */
  --slate:#46525F;         /* secondary text */
  --line:#E4E2DD;          /* hairline rules (warm gray, Aesop-style) */
  --stone:#F6F5F2;         /* quiet section ground */
  --cream:#FFFEF2;         /* Aesop cream - header ground */
  --white:#FFFEF2;        /* Aesop cream, used site-wide as of 2026-07-23 (was pure #FFFFFF) */
  --maxw:1280px;
  --font:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.25,.6,.25,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;line-height:1.65;font-size:1rem;
  padding-bottom:58px}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none;transition:color .25s var(--ease)}
a:hover{color:var(--red)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}

/* ---------- type ---------- */
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:400}
.eyebrow{font-size:0.7188rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--slate);font-weight:500;margin-bottom:16px}
.section-title{font-size:clamp(1.75rem,3.8vw,2.875rem);font-weight:400}
.section-sub{color:var(--slate);max-width:600px;margin-top:16px;font-size:1.0312rem}
section{padding:96px 0}
.rule{border:0;border-top:1px solid var(--line)}

/* ---------- buttons: quiet, Aesop-like ---------- */
.btn{display:inline-block;padding:14px 30px;font-weight:500;font-size:0.9062rem;
  letter-spacing:.02em;cursor:pointer;border:1px solid var(--ink);border-radius:0;
  background:transparent;color:var(--ink);transition:all .3s var(--ease);font-family:var(--font)}
.btn:hover{background:var(--ink);color:#fff}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.btn-white{border-color:#fff;color:#fff;background:transparent}
.btn-white:hover{background:#fff;color:var(--ink)}
.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-primary:hover{background:var(--ink);color:#fff}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.textlink{font-size:0.9062rem;font-weight:500;color:var(--ink);border-bottom:1px solid var(--ink);
  padding-bottom:2px;transition:all .25s var(--ease)}
.textlink:hover{color:var(--red);border-color:var(--red)}

/* ---------- header: two rows, centered, always visible ----------
   Over the home hero it is transparent with white text; on hover
   (or once scrolled past the hero) it turns solid cream with ink text. */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,254,242,.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);
  transition:background .45s var(--ease),border-color .45s var(--ease)}
@media (prefers-reduced-transparency: reduce){
  header.site{background:var(--cream);-webkit-backdrop-filter:none;backdrop-filter:none}}
header.site .wrap{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding-top:14px;padding-bottom:12px;position:relative}
/* Diamond logo mark above the wordmark. Transparent PNG (white knocked out)
   so it sits seamlessly on the translucent header in every state. */
.logomark{display:block;line-height:0;margin-bottom:-2px} /* 2026-09-14: new wide ABC logo replaces the diamond */
.logomark img{height:50px;width:auto;display:block;margin:0 auto}
.wordmark{font-size:1.9375rem;letter-spacing:.01em;font-weight:500;color:var(--ink);
  text-align:center;white-space:nowrap;
  transition:color .45s var(--ease)}
.wordmark:hover{color:var(--ink);opacity:.7}
nav.main{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap}
nav.main a{color:var(--ink);font-weight:500;font-size:1.0312rem;position:relative;padding:4px 0;
  transition:color .45s var(--ease)}
nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
nav.main a:hover::after{transform:scaleX(1);transform-origin:left}
nav.main a.active{color:var(--red)}
nav.main a.active::after{transform:scaleX(1);background:var(--red)}
nav.main a.nav-cta{color:var(--red);font-weight:500}
.hamburger{display:none;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer;
  position:absolute;right:24px;top:18px;transition:color .45s var(--ease)}
/* transparent-over-hero state (home page) */
header.site.over-hero{position:fixed;left:0;right:0;top:0;background:transparent;border-bottom-color:transparent}
header.site.over-hero .wordmark,
header.site.over-hero nav.main a,
header.site.over-hero .search-btn,
header.site.over-hero .hamburger{color:#fff}
header.site.over-hero:hover,
header.site.over-hero.solid,
header.site.over-hero.open{background:rgba(255,254,242,.72);border-bottom-color:var(--line)}
header.site.over-hero:hover .wordmark,header.site.over-hero.solid .wordmark,header.site.over-hero.open .wordmark,
header.site.over-hero:hover nav.main a,header.site.over-hero.solid nav.main a,header.site.over-hero.open nav.main a,
header.site.over-hero:hover .search-btn,header.site.over-hero.solid .search-btn,header.site.over-hero.open .search-btn,
header.site.over-hero:hover .hamburger,header.site.over-hero.solid .hamburger,header.site.over-hero.open .hamburger{color:var(--ink)}
header.site.over-hero:hover nav.main a.nav-cta,header.site.over-hero.solid nav.main a.nav-cta,header.site.over-hero.open nav.main a.nav-cta{color:var(--red)}
header.site.over-hero:hover nav.main a.active,header.site.over-hero.solid nav.main a.active,header.site.over-hero.open nav.main a.active{color:var(--red)}

/* ---------- search: header trigger + overlay (v0 - popup design TBD) ---------- */
.search-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font-family:var(--font);font-size:0.9062rem;font-weight:500;color:var(--ink);padding:4px 0;
  position:relative;transition:color .45s var(--ease)}
.search-btn svg{width:16px;height:16px}
.search-btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.search-btn:hover::after{transform:scaleX(1);transform-origin:left}
.search-overlay{position:fixed;inset:0;z-index:100;background:rgba(27,39,51,.45);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.search-overlay.open{opacity:1;pointer-events:auto}
.search-panel{background:var(--cream);border-bottom:1px solid var(--line);
  transform:translateY(-12px);transition:transform .35s var(--ease);padding:48px 0 40px;position:relative}
.search-overlay.open .search-panel{transform:translateY(0)}
.search-panel .wrap{max-width:820px}
.search-panel input{width:100%;border:0;border-bottom:1px solid var(--ink);background:transparent;
  font-family:var(--font);font-size:clamp(1.375rem,3vw,2rem);font-weight:400;color:var(--ink);
  padding:10px 2px 14px;outline:none}
.search-panel input::placeholder{color:#9aa4ad}
.search-hint{margin-top:14px;font-size:0.7812rem;color:var(--slate);letter-spacing:.04em}
.search-results{margin-top:26px;max-height:46vh;overflow-y:auto}
.search-results a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:13px 2px;border-bottom:1px solid var(--line);color:var(--ink);font-size:1rem}
.search-results a:hover{color:var(--red)}
.search-results a .meta{font-size:0.7812rem;color:var(--slate);letter-spacing:.04em;white-space:nowrap}
.search-close{position:absolute;top:22px;right:32px;background:none;border:0;font-size:1.625rem;
  color:var(--ink);cursor:pointer;line-height:1}
.search-close:hover{color:var(--red)}

/* ---------- hero: Aesop-style full-bleed rotating imagery ---------- */
.hero-full{position:relative;height:min(86vh,820px);min-height:540px;overflow:hidden;
  display:flex;align-items:flex-end;background:var(--stone)}
.hero-full .slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.6s var(--ease);transform:scale(1.07)}
.hero-full .slide.on{opacity:1;transform:scale(1);transition:opacity 1.6s var(--ease),transform 7s linear}
.hero-full .scrim{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(15,20,26,.38) 0%,rgba(15,20,26,.10) 14%,transparent 26%)}
.hero-full.short{height:min(84vh,900px);min-height:520px}
/* hero band: Aesop-style translucent cream strip OVERLAPPING the photo bottom.
   One line: title | lead | buttons. Frosted like the header, no transition. */
.hero-band{position:absolute;left:0;right:0;bottom:0;z-index:5;
  background:rgba(255,254,242,.76);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid rgba(228,226,221,.55);padding:28px 0 30px}
@media (prefers-reduced-transparency: reduce){
  .hero-band{background:var(--cream);-webkit-backdrop-filter:none;backdrop-filter:none}}
.hero-band .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:44px;align-items:center}
.hero-band .tagline{display:block;font-size:0.6875rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--red);font-weight:500;margin-bottom:8px}
.hero-band h1{font-size:clamp(1.5rem,2.2vw,2rem);font-weight:400;line-height:1.2;color:var(--ink);white-space:nowrap}
.hero-band .lead{font-size:0.975rem;color:var(--slate);max-width:500px;line-height:1.55}
.hero-band .cta-row{display:flex;gap:12px;flex-wrap:nowrap}
.hero-band .btn{padding:14px 24px;font-size:0.9rem;white-space:nowrap}
@media (max-width:1080px){
  .hero-band .wrap{grid-template-columns:1fr;gap:16px}
  .hero-band h1{white-space:normal}
}
.hero-copy{position:relative;z-index:3;padding-bottom:84px;color:#fff}
.hero-copy .tagline{display:inline-block;font-size:0.7188rem;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;font-weight:500;margin-bottom:22px;opacity:.85}
.hero-copy h1{font-size:clamp(2.125rem,4.2vw,3.375rem);font-weight:400;color:#fff;max-width:520px}
.hero-copy p.lead{margin-top:20px;font-size:1.0625rem;color:rgba(255,255,255,.88);max-width:440px}
.hero-copy .cta-row{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap}
.hero-full .dots{position:absolute;bottom:150px;right:40px;display:flex;gap:9px;z-index:6}
.hero-full .dots button{width:8px;height:8px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.45);transition:all .3s}
.hero-full .dots button.on{background:#fff;transform:scale(1.3)}
.hero-full .ph-label{position:absolute;bottom:28px;left:40px;z-index:4;font-size:0.7188rem;
  color:rgba(255,255,255,.65);letter-spacing:.08em}

/* ---------- numbers strip: quiet, typographic ---------- */
.stats{background:var(--white);padding:0}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--line)}
.stats .cell{padding:60px 40px;border-right:1px solid var(--line)}
.stats .num{font-size:clamp(2.8rem,4.8vw,4.125rem);font-weight:500;letter-spacing:-.03em} /* 2026-09-11: 1.5x */
.stats .num em{font-style:normal;color:var(--red)}
.stats .lbl{color:var(--slate);font-size:1.2656rem;margin-top:8px;letter-spacing:.02em}

/* ---------- partner wall: hairline grid, no cards ---------- */
.partners{background:var(--white);padding:80px 0}
.partners h2{font-size:0.7188rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--slate);font-weight:500;margin-bottom:40px;text-align:center}
.partner-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.partner-grid .pcell{height:110px;display:flex;align-items:center;justify-content:center;padding:20px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.partner-grid .pcell:hover{background:var(--stone)}
.partner-grid img{max-height:52px;width:auto;max-width:78%;object-fit:contain;
  filter:grayscale(1) opacity(.6);transition:filter .3s var(--ease)}
.partner-grid .pcell:hover img{filter:grayscale(0) opacity(1)}

/* ---------- WHO WE SERVE: bento grid, photo-led ---------- */
.industries{background:var(--stone);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:72px 0 40px}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:14px;margin-top:52px}
.bento-card{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:flex-end;padding:26px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.bento-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(27,39,51,.10)}
.bento-card.tall{grid-row:span 2}
.bento-card.wide{grid-column:span 2}
.bento-card.feature{grid-column:span 2;grid-row:span 2}
.bento-card .bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .8s var(--ease)}
.bento-card:hover .bg{transform:scale(1.05)}
.bento-card .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,22,30,.72) 0%,rgba(15,22,30,.12) 55%,transparent 100%)}
.bento-card h3{position:relative;z-index:2;font-size:1.3125rem;color:var(--ink)}
.bento-card p{position:relative;z-index:2;color:var(--slate);font-size:0.875rem;margin-top:6px;max-width:320px}
.bento-card .go{position:relative;z-index:2;margin-top:14px;font-size:0.8438rem;font-weight:600;color:var(--red)}
.bento-card.photo h3,.bento-card.photo p{color:#fff}
.bento-card.photo p{color:rgba(255,255,255,.82)}
.bento-card.photo .go{color:#fff;border-bottom:1px solid rgba(255,255,255,.6);align-self:flex-start;padding-bottom:2px}
.bento-card.red{background:var(--red);border-color:var(--red)}
.bento-card.red h3,.bento-card.red p{color:#fff}
.bento-card.red p{color:rgba(255,255,255,.85)}
.bento-card.red .go{color:#fff}

/* ---------- categories rail: minimal ---------- */
.cats{background:var(--white);padding:28px 0 32px} /* 2026-09-11: tightened, heading gone */
.cat-rail-wrap{position:relative;margin-top:0;padding:0 54px}
.cat-rail-wrap::before,.cat-rail-wrap::after{content:"";position:absolute;top:0;bottom:0;width:110px;
  z-index:1;pointer-events:none}
.cat-rail-wrap::before{left:54px;background:linear-gradient(to right,var(--white) 0%,rgba(255,254,242,0) 100%)}
.cat-rail-wrap::after{right:54px;background:linear-gradient(to left,var(--white) 0%,rgba(255,254,242,0) 100%)}
.cat-rail{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding:4px 2px 14px;scrollbar-width:none}
.cat-rail::-webkit-scrollbar{display:none}
/* 2026-09-10: rail blown up 1.75x per Keys; about 3.5 cards visible (was 6) */
.cat-card{flex:0 0 calc((100% - 48px)/3.5);min-width:350px;text-align:center;color:var(--ink);transition:opacity .3s var(--ease)}
.cat-card:hover{opacity:.75}
.cat-img{height:441px;background:var(--stone);display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;color:var(--slate);transition:color .3s var(--ease)}
.cat-card:hover .cat-img{color:var(--red)}
.cat-img svg{height:252px}
.cat-img img{max-height:389px;max-width:88%;object-fit:contain}
.cat-img img[alt^="JAWS"]{max-height:200px} /* Glass & Surface and Odor Control picks are JAWS capsules; held to about half gallon height so they read true to size (2026-10-01) */
.cat-name{font-size:1.8rem;font-weight:500}
.rail-arrow{position:absolute;top:208px;width:44px;height:44px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-size:1.0625rem;cursor:pointer;z-index:2;transition:all .3s var(--ease)}
.rail-arrow.prev{left:0}.rail-arrow.next{right:0}
.rail-arrow{z-index:2}
.rail-arrow:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:760px){
  .cat-card{min-width:260px;flex-basis:calc((100% - 16px)/1.3)}
  .cat-img{height:320px}.cat-img img{max-height:280px}.cat-name{font-size:1.35rem}.rail-arrow{top:148px}}

/* ---------- editorial split (image-heavy, Aesop-style) ---------- */
.split{background:var(--white);padding:0;border-top:1px solid var(--line)}
.split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:none;padding:0;align-items:stretch}
.split .copy{padding:110px 9vw;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.split .visual{background:var(--stone);min-height:520px;display:flex;align-items:center;justify-content:center;padding:48px;overflow:hidden}
.split .visual img{max-height:340px;width:auto}
.split .visual.cover{padding:0}
.split .visual.cover img{width:100%;height:100%;max-height:none;object-fit:cover}

/* ---------- quote: typographic, on stone ---------- */
.quote{background:var(--stone);text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quote blockquote{font-size:clamp(1.375rem,3vw,2.125rem);font-weight:400;line-height:1.35;
  max-width:820px;margin:0 auto;letter-spacing:-.015em}
.quote blockquote::before{content:"\201C";display:block;font-size:4rem;color:var(--red);line-height:.5;margin-bottom:24px}
.quote .attr{margin-top:26px;color:var(--slate);font-size:0.875rem;letter-spacing:.04em}

/* ---------- CTA banner: flat red ---------- */
.cta-banner{background:var(--red);color:#fff;text-align:center;padding:88px 0}
.cta-banner h2{font-size:clamp(1.625rem,3.2vw,2.5rem);font-weight:400;letter-spacing:-.02em}
.cta-banner p{color:rgba(255,255,255,.85);margin:14px auto 32px;max-width:520px}

/* ---------- page hero (interior): white, typographic ---------- */
.page-hero{background:var(--white);padding:80px 0 64px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(2.125rem,4.4vw,3.5rem);font-weight:400;color:var(--ink)}
.page-hero p{color:var(--slate);margin-top:16px;max-width:620px;font-size:1.0625rem}

/* ---------- catalog ---------- */
.toolbar{background:var(--white);border:1px solid var(--line);padding:18px;display:flex;gap:14px;
  flex-wrap:wrap;align-items:center;margin-top:48px}
.toolbar input[type=search]{flex:1;min-width:220px;padding:12px 16px;border:1px solid var(--line);
  font-size:0.9375rem;font-family:var(--font);outline-color:var(--red);border-radius:0}
.toolbar select{padding:12px 14px;border:1px solid var(--line);font-size:0.875rem;font-family:var(--font);
  color:var(--ink);background:#fff;cursor:pointer;outline-color:var(--red);border-radius:0}
/* Chip filter rows (2026-10-01): replaces the category and line <select>s on
   products.html. Any new filter row should reuse .filter-row + .chips + .chip. */
.toolbar .filter-row{flex-basis:100%;display:flex;gap:18px;align-items:baseline;padding-top:14px;border-top:1px solid var(--line)}
.toolbar input[type=search]+.filter-row{margin-top:4px}
.filter-label{flex:0 0 72px;font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.chips{display:flex;flex-wrap:wrap;gap:8px 8px}
.chip{appearance:none;font-family:var(--font);font-size:0.8125rem;line-height:1;padding:9px 13px;
  border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;border-radius:0;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (max-width:760px){
  .toolbar .filter-row{flex-direction:column;gap:10px}
  .filter-label{flex-basis:auto}
  .chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none;margin-right:-18px;padding-right:18px}
  .chips::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap}
}
.result-count{color:var(--slate);font-size:0.8438rem;margin:20px 0 8px;letter-spacing:.02em}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
.prod-card{background:var(--white);border:1px solid var(--line);overflow:hidden;
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);display:flex;flex-direction:column}
.prod-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(27,39,51,.09)}
.prod-img{height:225px;background:var(--stone);display:flex;align-items:center;justify-content:center;color:var(--slate)}
.prod-img.tall{height:auto;aspect-ratio:2/3} /* 2026-09-11 option 2: studio-shot tiles match the untouched 2:3 photo */
.prod-img.studio{background:#fff}
.prod-card.row-start{grid-column-start:1} /* 2026-09-16: distributed tiles begin on a new row */
.prod-img.studio img{padding:0;width:100%;height:100%;object-fit:contain} /* 2026-09-11: catalog shows the studio photos for ABC/HSF, full bleed on white */
.prod-card:hover .prod-img{color:var(--red)}
.prod-img svg{height:110px}
.prod-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.prod-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tag{font-size:0.8125rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:6px 12px}
.tag.cat{background:var(--stone);color:var(--slate)}
.tag.made{background:var(--pale-red);color:var(--red)}
.tag.dist{background:var(--stone);color:var(--slate)}
.prod-card h3{font-size:1.875rem;line-height:1.12;margin-bottom:6px;font-weight:400;flex:1}
.prod-card h3 a{color:var(--ink)}
.prod-card h3 a:hover{color:var(--red)}
.prod-card p{color:var(--slate);font-size:0.875rem;flex:1}
.prod-actions{display:flex;gap:14px;margin-top:18px;align-items:center}
.prod-actions .btn{padding:10px 20px;font-size:0.8125rem}
.sds-link{font-size:0.8125rem;font-weight:600;color:var(--red)}
.empty{padding:60px 0;text-align:center;color:var(--slate)}

/* ---------- product detail page ---------- */
.product-crumb{padding:36px 0 0}
.product-hero{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;padding:32px 0 100px}
.product-media{background:var(--stone);aspect-ratio:1/1;display:flex;align-items:center;
  justify-content:center;color:var(--slate)}
.product-media svg{width:38%;height:38%}
.product-media img{width:100%;height:100%;object-fit:contain;padding:8%;box-sizing:border-box}
.prod-img img{max-width:100%;max-height:100%;object-fit:contain;padding:12px;box-sizing:border-box}
.product-info h1{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:400;margin:18px 0 20px;color:var(--ink)}
.product-blurb{font-size:1.0312rem;line-height:1.6;color:var(--slate);max-width:480px;margin-bottom:32px}
.size-block{margin-bottom:32px}
.size-label{font-size:0.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:12px}
.size-options{display:flex;flex-wrap:wrap;gap:10px}
.size-chip{border:1px solid var(--ink);padding:11px 18px;font-size:0.875rem;color:var(--ink);background:transparent;
  transition:all .3s var(--ease);cursor:default}
.size-chip:hover{background:var(--ink);color:#fff}
.product-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-bottom:22px}
.product-info .sds-link{font-size:0.8438rem}
@media (max-width:760px){.product-hero{grid-template-columns:1fr;gap:28px}}

/* ---------- industry detail page ---------- */
.industry-hero{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:32px 0 56px}
.industry-hero.single{grid-template-columns:1fr;padding:32px 0 8px}
.industry-hero.single .industry-info{max-width:760px}
.industry-banner{padding-bottom:8px}
.industry-banner img{display:block;width:100%;height:360px;object-fit:cover;border:1px solid var(--line)}
.industry-photo{background:var(--stone);aspect-ratio:4/3;display:flex;align-items:center;
  justify-content:center;color:var(--slate);font-size:0.8125rem;letter-spacing:.06em;text-transform:uppercase}
.industry-info h1{font-size:clamp(1.875rem,3.4vw,2.875rem);font-weight:400;margin-bottom:20px;color:var(--ink)}
.industry-tiles-block{padding-bottom:100px}
.industry-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.industry-tile{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);
  background:var(--white);padding:22px 24px;font-size:0.9688rem;color:var(--ink);
  transition:all .3s var(--ease)}
.industry-tile:hover{border-color:var(--ink);color:var(--ink)}
.industry-tile .go{color:var(--red);transition:transform .3s var(--ease)}
.industry-tile:hover .go{transform:translateX(4px)}
.industry-tile.all{background:var(--stone)}
@media (max-width:900px){.industry-tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.industry-hero{grid-template-columns:1fr;gap:28px}}
@media (max-width:560px){.industry-tiles{grid-template-columns:1fr}}

/* ---------- industry page 2026-09-11: texture IS the page ----------
   Full-bleed photo stage, copy top-left, category tiles floating over
   the lower part of the photo. Hover = tiny lift, scale, soft shadow. */
.ind-stage{position:relative;min-height:min(88vh,980px);background-size:cover;background-position:center;
  display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.ind-stage.no-img{background:var(--stone);color:var(--ink)}
/* 2026-10-01: JP Morgan style scrim. Dark on the left where the copy sits,
   fading to clear by two-thirds across, plus a light bottom band so the
   floating tiles still read. Same shape on every industry page. */
.ind-stage-scrim{position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(15,22,30,.78) 0%,rgba(15,22,30,.62) 28%,rgba(15,22,30,.28) 52%,rgba(15,22,30,0) 72%),
    linear-gradient(to top,rgba(15,22,30,.42) 0%,rgba(15,22,30,0) 38%)}
.ind-stage.no-img .ind-stage-scrim{display:none}
.ind-stage.tint-blue .ind-stage-scrim{background:
    linear-gradient(to right,rgba(22,46,74,.82) 0%,rgba(22,46,74,.66) 28%,rgba(22,46,74,.3) 52%,rgba(22,46,74,0) 72%),
    linear-gradient(to top,rgba(22,46,74,.45) 0%,rgba(22,46,74,0) 38%)} /* laundry: bright foam, same fade in blue */
.ind-stage-copy{position:relative;z-index:1;padding-top:clamp(72px,12vh,140px);padding-bottom:24px;max-width:var(--maxw);width:100%}
.ind-stage-copy h1{font-size:clamp(2.16rem,4.8vw,3.92rem);font-weight:400;line-height:1.05;margin-bottom:22px;
  text-shadow:0 2px 24px rgba(0,0,0,.25)} /* 2026-10-01: title and paragraph scaled to 0.8x per Keys */
.ind-stage-copy p{max-width:560px;font-size:clamp(1.04rem,1.52vw,1.28rem);line-height:1.5;color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.3)}
.ind-stage.no-img .ind-stage-copy p{color:var(--slate);text-shadow:none}
.ind-stage-copy .product-actions{margin-top:28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ind-call{color:#fff;font-weight:500;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px}
.ind-call:hover{color:#fff;border-color:#fff}
.ind-stage-tiles{position:relative;z-index:1;padding-bottom:56px;padding-top:40px;max-width:var(--maxw);width:100%}
.ind-stage-label{font-size:0.8125rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.85);margin-bottom:14px}
.ind-stage.no-img .ind-stage-label{color:var(--slate)}
.ind-float-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ind-float-tile{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:26px 28px;font-size:1.15rem;font-weight:500;color:var(--ink);
  background:rgba(255,254,242,.88);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,254,242,.6);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.ind-float-tile:hover{transform:translateY(-3px) scale(1.025);box-shadow:0 18px 40px rgba(27,39,51,.22);
  background:rgba(255,254,242,.97);color:var(--ink)}
.ind-float-tile .go{color:var(--red);transition:transform .3s var(--ease)}
.ind-float-tile:hover .go{transform:translateX(4px)}
.ind-float-tile.all{background:rgba(200,16,46,.92);color:#fff;border-color:rgba(200,16,46,.6)}
.ind-float-tile.all .go{color:#fff}
.ind-float-tile.all:hover{background:var(--red);color:#fff}
@media (prefers-reduced-motion:reduce){.ind-float-tile,.ind-float-tile .go{transition:none}.ind-float-tile:hover{transform:none}}
@media (max-width:760px){
  .ind-stage{min-height:auto}
  .ind-stage-copy{padding-top:48px}
  .ind-stage-tiles{padding-bottom:40px}
  .ind-float-tile{padding:18px 20px;font-size:0.95rem}}

/* ---------- Who We Are: Ford-style hero + Mars-style generation timeline ---------- */
.about-hero{position:relative;height:86vh;min-height:520px;overflow:hidden;background:var(--stone);
  display:flex;align-items:flex-end}
.about-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.about-hero .scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,20,26,.72) 0%,rgba(15,20,26,.24) 45%,rgba(15,20,26,.12) 100%)}
.about-hero .copy{position:relative;z-index:2;padding-bottom:72px;color:#fff}
.about-hero .tagline{display:block;font-size:0.7812rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;margin-bottom:20px;opacity:.85}
.about-hero h1{font-size:clamp(2.375rem,5vw,4.125rem);font-weight:400;line-height:1.08;color:#fff}
.about-hero .lead{margin-top:18px;font-size:1.0312rem;color:rgba(255,255,255,.88);max-width:520px}
/* 2026-10-01: title stands alone, bigger and lower (tagline and lead removed) */
.about-hero h1.solo{font-size:clamp(3rem,7vw,5.75rem);line-height:1.02;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.about-hero .copy:has(h1.solo){padding-bottom:48px}

/* ---------- about page 2026-09-14: single story card + archive collage ---------- */
/* 2026-09-15: story sits straight on the cream, no tile; archive is 2 up, full width */
.story{background:var(--white);padding:80px 0 40px}
.story p{font-family:"Times New Roman",Times,serif;font-size:14pt;line-height:1.7;color:var(--ink);max-width:900px} /* 2026-10-01: Times New Roman 14pt per Keys */
.story p+p{margin-top:1.4em} /* 2026-10-01: story is now several paragraphs */
.story .story-sign{margin-top:2.2em;font-style:italic}
.story a{color:var(--red);border-bottom:1px solid currentColor}
.archive{background:var(--white);padding:40px 0 96px}
.archive-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.archive-grid figure{margin:0;background:var(--stone);border:1px solid var(--line);aspect-ratio:3/2;overflow:hidden;position:relative}
.archive-grid img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85)}
.archive-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;font-size:0.9375rem;color:#fff;
  background:linear-gradient(to top,rgba(27,39,51,.78),rgba(27,39,51,0))}
.archive-grid .slot{display:flex;align-items:center;justify-content:center;color:var(--slate);font-size:1rem}
@media (max-width:760px){.archive-grid{grid-template-columns:1fr}}

.gen-timeline{background:var(--white);padding:0 0 40px}
.gen-row{display:grid;grid-template-columns:280px 1fr;gap:64px;padding:88px 0;
  border-bottom:1px solid var(--line)}
.gen-row:last-child{border-bottom:0}
.gen-label{position:relative}
.gen-label .gen-name{position:sticky;top:150px;font-size:clamp(1.5rem,2.6vw,2.125rem);font-weight:400;
  line-height:1.15;color:var(--red)}
.gen-label .gen-era{position:sticky;top:230px;margin-top:14px;font-size:0.8125rem;letter-spacing:.12em;
  color:var(--slate)}
.gen-body h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:400;margin-bottom:18px;color:var(--ink)}
.gen-body p{color:var(--slate);font-size:1.0312rem;line-height:1.65;max-width:640px}
.gen-body figure{margin:32px 0 0}
.gen-body figure img{max-width:520px;width:100%;display:block;border:1px solid var(--line)}
.gen-body figcaption{font-size:0.8125rem;color:var(--slate);font-style:italic;margin-top:10px}
.gen-photo-slot{margin-top:32px;max-width:520px;aspect-ratio:4/3;background:var(--stone);
  display:flex;align-items:center;justify-content:center;color:var(--slate);
  font-size:0.7812rem;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:820px){
  .gen-row{grid-template-columns:1fr;gap:20px;padding:56px 0}
  .gen-label .gen-name,.gen-label .gen-era{position:static}
  .gen-label .gen-name br{display:none}
}

/* ---------- Training & Services: stacked horizontal cards (Canberra-style) ---------- */
.svc-stack{margin-top:48px;display:flex;flex-direction:column;gap:14px}
.svc-row{display:grid;grid-template-columns:minmax(260px,1fr) 1.8fr;gap:48px;align-items:center;
  background:var(--white);border:1px solid var(--line);padding:44px 48px;
  transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.svc-row:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(27,39,51,.08)}
.svc-row h3{font-size:clamp(1.375rem,2.4vw,1.875rem);font-weight:400;color:var(--ink);line-height:1.2}
.svc-detail p{color:var(--slate);font-size:0.9688rem;line-height:1.65;max-width:620px}
.svc-detail .go{display:inline-block;margin-top:14px;font-size:0.875rem;font-weight:500;color:var(--red)}
.svc-detail .btn{margin-top:16px}
/* hover tooltip on "Request this training" links (data-tip text) */
.svc-detail .go[data-tip]{position:relative}
.svc-detail .go[data-tip]::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 8px);
  background:var(--ink);color:#fff;font-size:0.8125rem;font-weight:400;line-height:1.4;padding:10px 14px;
  width:max-content;max-width:360px;opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:5;white-space:normal}
.svc-detail .go[data-tip]:hover::after{opacity:1;transform:translateY(0)}
.svc-row.cta{background:var(--pale-red);border-color:var(--pale-red)}
@media (max-width:760px){.svc-row{grid-template-columns:1fr;gap:14px;padding:30px 26px}}

/* ---------- employment page: expanding job accordions ---------- */
.job-acc{margin-top:48px;display:flex;flex-direction:column;gap:14px}
.job-item{background:var(--white);border:1px solid var(--line);
  transition:box-shadow .35s var(--ease)}
.job-item:hover{box-shadow:0 14px 32px rgba(27,39,51,.08)}
.job-title{display:flex;justify-content:space-between;align-items:center;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;font-family:var(--font);
  color:var(--ink);font-size:clamp(1.375rem,2.4vw,1.875rem);font-weight:400;line-height:1.2;
  padding:38px 48px}
.job-arrow{font-size:1.6rem;font-weight:300;color:var(--red);
  transition:transform .4s var(--ease)}
.job-item.open .job-arrow{transform:rotate(45deg)}
.job-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.job-item.open .job-panel{grid-template-rows:1fr}
.job-body{overflow:hidden;padding:0 48px}
.job-item.open .job-body{padding-bottom:44px}
.job-body h4{font-size:0.75rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);font-weight:500;margin:26px 0 10px}
.job-body p{color:var(--slate);font-size:0.9688rem;line-height:1.65;max-width:680px}
.job-body ul{margin:0;padding-left:20px;max-width:680px}
.job-body li{color:var(--slate);font-size:0.9688rem;line-height:1.65;margin-bottom:6px}
.job-body .go{display:inline-block;margin-top:20px;font-size:0.875rem;font-weight:500;color:var(--red)}
@media (max-width:760px){.job-title{padding:26px 26px}.job-body{padding:0 26px}.job-item.open .job-body{padding-bottom:30px}}
@media (prefers-reduced-motion:reduce){.job-panel,.job-arrow{transition:none}}

/* ---------- Apple-design audit additions (2026-08-11) ----------
   1) Press feedback on pointer-down (buttons feel alive on touch)
   2) Keyboard focus visibility
   3) Reduced-motion support: calm cross-fades, no zoom/lift/slide  */
.btn:active,.size-chip:active,.industry-tile:active,.search-btn:active{transform:scale(.97)}
.prod-card a:active img,.prod-card a:active svg{transform:scale(.98)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--red);outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;
    scroll-behavior:auto !important}
  .hero-full .slide{transform:none !important;transition:opacity .2s ease !important}
  .prod-card:hover,.svc-row:hover,.bento-card:hover{transform:none !important}
  .cat-rail{scroll-behavior:auto}
}

/* ---------- SDS table ---------- */
.sds-note{background:var(--stone);border-left:2px solid var(--red);padding:16px 20px;
  font-size:0.9062rem;color:var(--ink);margin:26px 0}
table.sds{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);margin-top:8px}
table.sds th{background:var(--white);color:var(--slate);text-align:left;font-size:0.7188rem;
  letter-spacing:.14em;text-transform:uppercase;padding:16px 18px;border-bottom:1px solid var(--ink);font-weight:600}
table.sds td{padding:15px 18px;border-top:1px solid var(--line);font-size:0.9062rem}
table.sds tr:hover td{background:var(--stone)}
.dl{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--red);font-size:0.8438rem}

/* ---------- history timeline ---------- */
.timeline{margin-top:56px;position:relative}
.timeline::before{content:"";position:absolute;left:29px;top:0;bottom:0;width:1px;background:var(--line)}
.tl-item{display:grid;grid-template-columns:60px 1fr;gap:32px;margin-bottom:44px;position:relative}
.tl-num{width:60px;height:60px;border-radius:50%;background:#fff;border:1px solid var(--ink);
  color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:500;font-size:1rem;z-index:2}
.tl-item:last-child .tl-num{border-color:var(--red);color:var(--red)}
.tl-body{background:#fff;border:1px solid var(--line);padding:34px 38px}
.tl-body h3{font-size:1.375rem;margin-bottom:4px;font-weight:500}
.tl-body .era{color:var(--red);font-size:0.7188rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
.tl-body p{color:var(--slate);font-size:0.9688rem}
.tl-body img{margin-top:22px;max-height:320px;object-fit:cover}

/* ---------- info cards (services, kuleana, locations) ---------- */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
.ind-card{background:#fff;border:1px solid var(--line);padding:34px 30px;display:block;color:var(--ink);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ind-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(27,39,51,.09)}
.ind-ring{width:52px;height:52px;border-radius:50%;background:var(--stone);color:var(--red);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.ind-ring svg{width:26px;height:26px}
.ind-card h3{font-size:1.1875rem;margin-bottom:8px;font-weight:500}
.ind-card p{color:var(--slate);font-size:0.9062rem;margin-bottom:14px}
.go{color:var(--red);font-weight:600;font-size:0.8438rem}

/* ---------- contact: blown-up location tiles ---------- */
.loc-big{grid-template-columns:repeat(2,1fr);gap:22px;margin-top:0}
.loc-big .ind-card{padding:56px 48px}
.loc-big .ind-card h3{font-size:clamp(1.9rem,3.4vw,2.75rem);font-weight:400;margin-bottom:16px}
.loc-big .ind-card p{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.5;margin-bottom:20px}
.loc-big .ind-card .go{font-size:clamp(1.05rem,1.5vw,1.25rem)}

/* ---------- footer ---------- */
footer.site{background:var(--white);color:var(--slate);padding:72px 0 40px;font-size:0.9062rem;border-top:1px solid var(--line)}
footer.site .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px}
footer.site h4{color:var(--ink);font-size:0.7188rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px;font-weight:600}
footer.site a{color:var(--slate);display:block;margin-bottom:10px}
footer.site a:hover{color:var(--red)}
footer.site .flogo{height:44px;width:auto;margin-bottom:18px}
.footnote{border-top:1px solid var(--line);margin-top:52px;padding-top:24px;text-align:center;color:#98a2ac;font-size:0.7812rem}
.footnote a{display:inline;margin:0;color:#98a2ac;text-decoration:underline;text-underline-offset:3px}
.footnote a:hover{color:var(--red)}

/* ---------- contact layout (responsive) ---------- */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:start}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .form-2col{grid-template-columns:1fr}
}

/* ---------- legal pages (privacy, terms) ---------- */
.legal{max-width:760px}
.legal h2{font-size:1.25rem;font-weight:500;margin:36px 0 12px}
.legal p{color:var(--slate);font-size:0.95rem;line-height:1.7;margin-bottom:14px}
.legal a{color:var(--red)}

/* ---------- pinned bar ---------- */
.pinned{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink);color:#fff;
  display:flex;justify-content:center;gap:38px;align-items:center;padding:12px 20px;
  font-weight:500;font-size:0.875rem}
.pinned a{color:#fff}
.pinned a:hover{color:#ffb3bd}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .wrap{padding:0 24px}
  .split .wrap{grid-template-columns:1fr}
  .split .copy{padding:64px 24px}
  .split .visual{min-height:380px}
  .hero-full{height:72vh;min-height:460px}
  .hero-full.short{height:60vh;min-height:380px}
  .hero-band .wrap{grid-template-columns:1fr;gap:20px}
  .hero-full .ph-label{display:none}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento-card.feature{grid-column:span 2}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .stats .cell{border-bottom:1px solid var(--line)}
  .partner-grid{grid-template-columns:repeat(3,1fr)}
  footer.site .wrap{grid-template-columns:1fr 1fr}
  .ind-grid{grid-template-columns:1fr !important}
  .wordmark{font-size:1.5rem}
  nav.main{display:none}
  header.site.open nav.main{display:flex;flex-direction:column;align-items:center;gap:16px;padding-bottom:6px}
  .hamburger{display:block}
}
@media (max-width:600px){
  .prod-grid,.partner-grid,.bento{grid-template-columns:1fr}
  .bento-card.feature,.bento-card.wide{grid-column:span 1}
  section{padding:60px 0}
  .pinned{gap:18px;font-size:0.8125rem;flex-wrap:wrap}
  table.sds th:nth-child(3),table.sds td:nth-child(3){display:none}
}

/* ---------- ORDER PORTAL: Palantir-minimalist, large type ---------- */
.portal{max-width:1180px;margin:0 auto;padding:0 24px}
.portal-step{font-size:0.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red);
  font-weight:600;margin:42px 0 10px}
.portal-title{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:400;line-height:1.08;margin-bottom:26px}
/* Request a Quote, three-question version (2026-10-01) */
.portal.inquiry{max-width:820px;padding-bottom:96px}
.inquiry-lead{color:var(--slate);font-size:1.05rem;max-width:560px;margin-bottom:44px}
.inquiry-q{padding:28px 0;border-top:1px solid var(--line)}
.inquiry-q label{display:flex;align-items:baseline;gap:16px;font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:400;margin-bottom:16px}
.inquiry-q .num{font-size:0.75rem;letter-spacing:.18em;color:var(--red);font-weight:600}
.inquiry-q .q-link{font-size:0.9rem;color:var(--red);border-bottom:1px solid currentColor;white-space:nowrap}
.inquiry-q textarea,.inquiry-q input{width:100%;padding:14px 16px;border:1px solid var(--line);background:#fff;
  font-family:var(--font);font-size:1rem;line-height:1.55;resize:vertical;border-radius:0}
.inquiry-q textarea:focus,.inquiry-q input:focus{outline:2px solid var(--red);outline-offset:2px}
.inquiry-contact{padding:28px 0 8px;border-top:1px solid var(--line)}
.inquiry-contact .eyebrow{margin-bottom:16px}
.inquiry-contact input{padding:13px 16px;border:1px solid var(--line);background:#fff;font-family:var(--font);font-size:15px;border-radius:0;width:100%}
.inquiry-contact input:focus{outline:2px solid var(--red);outline-offset:2px}
.inquiry-send{margin-top:28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.inquiry-send #formNote{color:var(--red);font-size:14px;font-weight:500}
.inquiry-fine{margin-top:18px;font-size:0.8rem;color:#98a2ac}
.inquiry-fine a{color:var(--slate);border-bottom:1px solid currentColor}
.portal-search{width:100%;padding:22px 26px;font-family:var(--font);font-size:clamp(1.15rem,2.2vw,1.6rem);
  border:1px solid var(--ink);background:#fff;margin-bottom:8px}
.portal-search:focus{outline:2px solid var(--red);outline-offset:2px}
.portal-count{font-size:0.8rem;color:var(--slate);margin:10px 2px 4px}

.order-list{border-top:1px solid var(--line)}
.order-row{border-bottom:1px solid var(--line);cursor:pointer}
.order-row-main{display:grid;grid-template-columns:135px 230px 1fr;gap:28px;align-items:center;
  padding:22px 6px;transition:background .18s}
.order-row:hover .order-row-main{background:#fff}
.order-row .thumb{height:113px;display:flex;align-items:center;justify-content:center}
.order-row .thumb img{max-height:113px;max-width:123px;object-fit:contain} /* 1.23x bump 2026-09-15 */
.order-row .thumb svg{height:79px;color:#c9c4b4}
.order-row .mini{font-size:0.78rem;color:var(--slate);line-height:1.45}
.order-row .mini .cats{display:block;margin-top:6px;font-size:0.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:#98a2ac}
.order-row .big-name{font-size:clamp(1.7rem,3.6vw,2.9rem);font-weight:400;line-height:1.05;color:var(--ink)}
.order-row:hover .big-name{color:var(--red)}
.order-row .panel{max-height:0;overflow:hidden;transition:max-height .22s ease}
.order-row.open .panel{max-height:340px}
.order-row .panel-inner{padding:4px 6px 26px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.order-row .panel-inner p{color:var(--slate);font-size:0.95rem;max-width:640px}
.order-row .panel-inner .sizes{margin-top:10px;font-size:0.8rem;color:#98a2ac}
.order-row .panel-inner .btn{white-space:nowrap}

/* amount page */
.amount-grid{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start;margin-top:10px}
.amount-grid .photo{background:#fff;border:1px solid var(--line);padding:28px;display:flex;
  align-items:center;justify-content:center;min-height:340px}
.amount-grid .photo img{max-width:100%;max-height:380px;object-fit:contain}
.size-row{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  border-bottom:1px solid var(--line);padding:22px 4px}
.size-row .sname{font-size:clamp(1.15rem,2vw,1.55rem);font-weight:400}
.size-row .units{font-size:0.8rem;color:#98a2ac;margin-top:4px}
.qty{display:flex;align-items:center;gap:14px}
.qty button{width:52px;height:52px;border:1px solid var(--ink);background:#fff;font-size:1.5rem;
  cursor:pointer;font-family:var(--font);line-height:1}
.qty button:hover{background:var(--ink);color:#fff}
.qty .n{font-size:clamp(1.9rem,3.4vw,2.7rem);min-width:64px;text-align:center;font-weight:400}
.size-row.picked{background:#fff}
.amount-actions{margin:36px 0 70px;display:flex;gap:16px;flex-wrap:wrap}
.amount-actions .btn{font-size:1.05rem;padding:18px 34px}

/* cart page */
.cart-row{display:grid;grid-template-columns:1fr auto auto;gap:26px;align-items:center;
  border-bottom:1px solid var(--line);padding:26px 4px}
.cart-row .cname{font-size:clamp(1.4rem,2.8vw,2.2rem);font-weight:400}
.cart-row .csize{font-size:0.85rem;color:var(--slate);margin-top:4px}
.cart-row .remove{background:none;border:0;color:#98a2ac;font-size:0.8rem;cursor:pointer;
  font-family:var(--font);text-decoration:underline;text-underline-offset:3px}
.cart-row .remove:hover{color:var(--red)}
.cart-empty{padding:70px 0;color:var(--slate);font-size:1.1rem}
.cart-actions{margin:40px 0 80px;display:flex;gap:16px;flex-wrap:wrap}
.cart-actions .btn{font-size:1.1rem;padding:20px 38px}

/* checkout page */
.checkout-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;margin:10px 0 80px}
.checkout-grid input,.checkout-grid textarea{width:100%;padding:16px 18px;border:1px solid var(--line);
  font-family:var(--font);font-size:1rem;margin-bottom:14px;background:#fff}
.checkout-grid label{display:block;font-size:0.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin-bottom:6px}
.order-summary{background:#fff;border:1px solid var(--line);padding:28px}
.order-summary h3{font-weight:500;font-size:1.1rem;margin-bottom:16px}
.order-summary .li{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);
  padding:10px 0;font-size:0.92rem}
.order-summary .li .q{color:var(--slate);white-space:nowrap}
.order-summary .note{margin-top:16px;font-size:0.8rem;color:#98a2ac}

@media (max-width:860px){
  .order-row-main{grid-template-columns:86px 1fr;gap:16px}
  .order-row .mini{display:none}
  .order-row .thumb{height:60px}.order-row .thumb img{max-height:60px}
  .order-row .panel-inner{grid-template-columns:1fr}
  .amount-grid{grid-template-columns:1fr}
  .checkout-grid{grid-template-columns:1fr}
}

/* ---------- careers application ---------- */
.apply-label{display:block;font-size:0.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin-bottom:6px;font-weight:500}
.apply-input{width:100%;padding:14px 16px;border:1px solid var(--line);background:#fff;
  font-family:var(--font);font-size:0.98rem;margin-bottom:14px}
select.apply-input{appearance:auto}

/* ---------- industries: list left, photo collage right ---------- */
.ind-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.ind-list{margin-top:34px;border-top:1px solid var(--line)}
.ind-list a{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:15px 4px;border-bottom:1px solid var(--line);font-size:1.125rem;font-weight:400}
.ind-list a span{color:var(--red);opacity:0;transform:translateX(-6px);transition:all .25s var(--ease)}
.ind-list a:hover{color:var(--red);padding-left:10px}
.ind-list a:hover span{opacity:1;transform:none}
.ind-list a.all{color:var(--red);font-weight:600}
.ind-list a.all span{opacity:1;transform:none}
.collage{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:148px;gap:12px;grid-auto-flow:dense}
.collage img{width:100%;height:100%;object-fit:cover;display:block;border:1px solid var(--line)}
.collage img.wide{grid-column:span 2}
.collage img.tall{grid-row:span 2}
@media (max-width:940px){
  .ind-split{grid-template-columns:1fr;gap:40px}
  .collage{grid-auto-rows:120px}
}

/* ---------- home: product duo + mini rotator under the static hero ---------- */
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 0 0}
.photo-pair img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.mini-rotator{position:relative;height:56vh;min-height:360px;overflow:hidden;margin-top:14px;background:var(--stone)}
.mini-rotator .slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.6s var(--ease);transform:scale(1.07)}
.mini-rotator .slide.on{opacity:1;transform:scale(1);transition:opacity 1.6s var(--ease),transform 7s linear}
.mini-rotator .dots{position:absolute;bottom:20px;right:32px;display:flex;gap:9px;z-index:4}
.mini-rotator .dots button{width:8px;height:8px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.45);transition:all .3s}
.mini-rotator .dots button.on{background:#fff;transform:scale(1.3)}
@media (prefers-reduced-motion: reduce){.mini-rotator .slide{transform:none !important;transition:opacity .2s ease !important}}
@media (max-width:700px){.photo-pair{grid-template-columns:1fr}}

/* ---------- product page: studio grey-shadow look ----------
   The whole page extends the tones of the studio photos (bright center,
   soft grey vignette) so the shot melts into the background and the
   text floats on it. Photo edges are feathered with a mask. */
body.studio-page{background:
  radial-gradient(130% 95% at 50% 18%, #fafbfd 0%, #f0f1f6 38%, #e0e2ea 72%, #cfd1db 100%) fixed}
body.studio-page section{background:transparent}
body.studio-page .product-media{background:transparent;border:none;aspect-ratio:auto}
body.studio-page .product-media.studio img{width:100%;max-height:640px;object-fit:contain;padding:0;
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%, #000 52%, transparent 94%);
  mask-image:radial-gradient(ellipse 72% 72% at 50% 50%, #000 52%, transparent 94%)}
body.studio-page .product-media:not(.studio){background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7)}
body.studio-page .tag{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.studio-page .size-chip{background:rgba(255,255,255,.66)}
body.studio-page footer.site{background:var(--white);border-top:1px solid var(--line)}

/* ---------- industries: blown-up type-only version ---------- */
.section-title.xl{font-size:clamp(2.4rem,5.2vw,4rem);line-height:1.08}
.ind-list.big{margin-top:44px}
.ind-list.big a{font-size:clamp(1.5rem,3vw,2.4rem);padding:24px 4px;font-weight:400}

/* second studio image stacks under the first, same feathered look */
body.studio-page .product-media.studio{display:block}
body.studio-page .product-media.studio img+img{margin-top:-40px}