/* ================================================================
   GK SILICONES — Premium B2B Design System
   Shared stylesheet for all pages
   ================================================================ */
:root{
  --ink:        #0A0E14;
  --onyx:       #0A1628;
  --onyx-2:     #142235;
  --onyx-3:     #1E3047;
  --line-dark:  #2A3B53;
  --bone:       #FAF7F2;
  --pearl:      #F1ECE1;
  --paper:      #FFFFFF;
  --line:       #E8E2D4;
  --line-soft:  #EFEAE0;
  --muted:      #5C6470;
  --muted-2:    #8B8F98;
  --accent:     #C9A876;
  --accent-2:   #A88654;
  --accent-soft:#E8DCC2;
  --teal:       #1F4A4A;
  --success:    #2F7A4F;
  --danger:     #B0413E;
  --info:       #2D5A8F;

  --f-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --f-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-xs: 12px;  --t-sm: 13px;  --t-base: 16px;  --t-md: 18px;
  --t-lg: 22px;  --t-xl: 28px;  --t-2xl: 36px;
  --t-3xl: 48px; --t-4xl: 64px; --t-5xl: 88px;   --t-6xl: 120px;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10:128px;--s-11:160px;

  --container: 1280px;
  --container-wide: 1400px;
  --container-narrow: 920px;
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --shadow-1: 0 1px 2px rgba(10,14,20,.04), 0 2px 8px rgba(10,14,20,.04);
  --shadow-2: 0 8px 24px rgba(10,14,20,.06), 0 2px 6px rgba(10,14,20,.04);
  --shadow-3: 0 24px 48px rgba(10,14,20,.10), 0 8px 16px rgba(10,14,20,.05);
}

/* RESET */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; border:0; background:none; cursor:pointer; color:inherit; }
ul{ list-style:none; }
::selection{ background: var(--accent); color: var(--onyx); }

/* CONTAINERS */
.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }
.container-wide{ max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--s-5); }
.container-narrow{ max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--s-5); }

/* TYPE */
.eyebrow{
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before{
  content: ""; width: 28px; height: 1px; background: var(--accent-2);
}
.eyebrow.on-dark{ color: var(--accent); }
.eyebrow.on-dark::before{ background: var(--accent); }
.eyebrow.no-rule::before{ display:none; }

h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--onyx);
}
.display-1{ font-size: clamp(40px, 7vw, var(--t-5xl)); font-weight: 300; }
.display-2{ font-size: clamp(36px, 5.5vw, var(--t-4xl)); font-weight: 300; }
.display-3{ font-size: clamp(28px, 3.6vw, var(--t-3xl)); font-weight: 400; }
.display-italic{ font-style: italic; font-weight: 300; color: var(--accent-2); }

.lede{
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--muted);
  max-width: 56ch;
}
.body-sm{ font-size: var(--t-sm); color: var(--muted); }
.mono{ font-family: var(--f-mono); }

/* BUTTONS */
.btn{
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 14px 24px;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .02em;
  border-radius: 2px;
  transition: all .25s cubic-bezier(.2,.7,.2,1);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.btn-primary{ background: var(--onyx); color: var(--bone); border: 1px solid var(--onyx); }
.btn-primary:hover{ background: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-accent{ background: var(--accent); color: var(--onyx); border: 1px solid var(--accent); }
.btn-accent:hover{ background: var(--accent-2); border-color: var(--accent-2); color: var(--bone); }
.btn-ghost{ background: transparent; color: var(--onyx); border: 1px solid var(--onyx); }
.btn-ghost:hover{ background: var(--onyx); color: var(--bone); }
.btn-ghost-light{ background: transparent; color: var(--bone); border: 1px solid rgba(255,255,255,.25); }
.btn-ghost-light:hover{ background: var(--bone); color: var(--onyx); border-color: var(--bone); }
.btn-link{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--onyx);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--accent);
  transition: gap .25s ease, border-color .25s ease;
}
.btn-link:hover{ gap: 14px; border-bottom-color: var(--onyx); }
.btn-link svg{ width:14px; height:14px; }

/* ANNOUNCEMENT */
.announce{
  background: var(--ink);
  color: var(--accent-soft);
  font-size: var(--t-xs);
  letter-spacing: .04em;
}
.announce .container-wide{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
}
.announce-left{ display:flex; align-items:center; gap: var(--s-5); }
.announce-tag{
  display: inline-flex; align-items:center; gap: 6px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .15em;
  color: var(--accent); text-transform: uppercase;
}
.announce-tag .dot{ width:6px; height:6px; border-radius:50%; background: var(--accent); animation: pulse 2s infinite; }
@keyframes pulse{ 50%{opacity:.4;} }
.announce-right{ display:flex; gap: var(--s-5); align-items:center; }
.announce-right a{ opacity:.75; transition: opacity .2s; }
.announce-right a:hover{ opacity:1; }

/* NAV */
.nav{
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,247,242,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.nav.scrolled{ border-bottom-color: var(--line); }
.nav-inner{
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.brand{ display:flex; align-items: center; gap: 12px; }
.brand-logo{ height: 42px; width: auto; }
.brand-text{ display:flex; flex-direction: column; line-height: 1.1; }
.brand-text .name{
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--onyx);
}
.brand-text .tag{
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--muted-2);
  text-transform: uppercase;
  margin-top: 2px;
}
.nav-links{ display:flex; gap: var(--s-7); }
.nav-link{
  font-size: 14px;
  font-weight: 500;
  color: var(--onyx);
  position: relative;
  padding: 8px 0;
  transition: color .2s;
}
.nav-link::after{
  content:""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--accent);
  transition: width .3s ease;
}
.nav-link:hover, .nav-link.active{ color: var(--accent-2); }
.nav-link:hover::after, .nav-link.active::after{ width: 100%; }
.nav-cta{ display:flex; gap: var(--s-3); align-items: center; }
.nav-search{
  width: 36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  border: 1px solid var(--line);
  transition: all .2s;
}
.nav-search:hover{ background: var(--onyx); color: var(--bone); border-color: var(--onyx); }
.nav-search svg{ width:14px; height:14px; }

.hamburger{
  display:none;
  width: 40px; height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
}
.hamburger span{ display:block; width: 100%; height: 1.5px; background: var(--onyx); transition: all .3s ease; }
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity: 0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* MOBILE MENU */
.mobile-menu{
  position: fixed;
  inset: 84px 0 0 0;
  background: var(--bone);
  z-index: 99;
  padding: var(--s-7) var(--s-5);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  overflow-y: auto;
}
.mobile-menu.open{ transform: translateX(0); }
.mobile-menu ul{ display: grid; gap: var(--s-2); margin-bottom: var(--s-7); }
.mobile-menu a{
  display: block;
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 300;
  color: var(--onyx);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.mobile-menu .btn{ width: 100%; justify-content: center; }
.mobile-menu .btn + .btn{ margin-top: var(--s-3); }

/* SECTION */
.section{ padding: var(--s-10) 0; }
.section-tight{ padding: var(--s-9) 0; }
.section-dark{ background: var(--onyx); color: var(--bone); }
.section-dark h1, .section-dark h2, .section-dark h3{ color: var(--bone); }
.section-dark .lede{ color: rgba(250,247,242,.7); }
.section-head{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-9);
  align-items: end;
  margin-bottom: var(--s-9);
}
.section-head .lede{ max-width: none; }
.section-head-center{
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--s-9);
}
.section-head-center .eyebrow{ justify-content: center; margin-bottom: var(--s-4); }
.section-head-center .lede{ margin: 0 auto; }

/* HERO */
.hero{
  position: relative;
  background: var(--bone);
  padding: var(--s-9) 0 var(--s-10);
  overflow: hidden;
}
.hero::before{
  content:"";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(201,168,118,.12), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(20,34,53,.06), transparent 50%);
  pointer-events: none;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-9);
  align-items: center;
  position: relative;
}
.hero-eyebrow{ margin-bottom: var(--s-5); }
.hero h1{
  font-size: clamp(44px, 7.2vw, 96px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--onyx);
  margin-bottom: var(--s-6);
}
.hero h1 em{ font-style: italic; color: var(--accent-2); font-weight: 300; }
.hero-lede{
  font-size: var(--t-md);
  line-height: 1.7;
  color: var(--muted);
  max-width: 52ch;
  margin-bottom: var(--s-7);
}
.hero-actions{ display:flex; gap: var(--s-4); margin-bottom: var(--s-8); flex-wrap: wrap; }
.hero-meta{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.hero-stat .num{
  font-family: var(--f-display);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 400;
  color: var(--onyx);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.hero-stat .num sup{ font-size: 50%; color: var(--accent); margin-left: 2px; vertical-align: top; line-height: 1; }
.hero-stat .label{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* HERO VISUAL */
.hero-visual{
  position: relative;
  height: 620px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--s-4);
}
.hv-tile{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--onyx-2);
}
.hv-tile-1{ grid-row: 1 / 3; }
.hv-tile img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease;
}
.hv-tile:hover img{ transform: scale(1.05); }
.hv-tile::after{
  content:""; position: absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,22,40,.85) 100%);
  pointer-events: none;
}
.hv-content{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--s-6);
  z-index: 2;
  color: var(--bone);
}
.hv-content .label{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  display: block;
}
.hv-content h4{ color: var(--bone); font-size: 22px; font-weight: 400; }

/* HERO BADGE */
.hero-badge{
  position: absolute;
  top: 30px; right: -20px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  display: flex; align-items: center; gap: var(--s-4);
  z-index: 3;
}
.hero-badge .icon{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bone);
  display: grid; place-items: center;
}
.hero-badge .icon svg{ width: 20px; height: 20px; color: var(--accent-2); }
.hero-badge .text strong{ display:block; font-size: 13px; font-weight: 600; color: var(--onyx); }
.hero-badge .text span{ font-size: 11px; color: var(--muted); }

/* TRUST */
.trust{ background: var(--onyx); color: var(--bone); padding: var(--s-7) 0; }
.trust-inner{
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--s-7);
  align-items: center;
}
.trust-label{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.trust-logos{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-6);
  align-items: center;
}
.trust-cert{
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; opacity: .85; transition: opacity .25s;
}
.trust-cert:hover{ opacity: 1; }
.trust-cert svg{ width: 32px; height: 32px; color: var(--accent); }
.trust-cert .name{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

/* STORY */
.story{ background: var(--bone); }
.story-grid{
  display:grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-9);
  align-items: start;
}
.story-left{ position: sticky; top: 120px; }
.story-left h2{ margin-bottom: var(--s-5); }
.story-left .lede{ margin-bottom: var(--s-6); }
.story-image-wrap{
  margin-top: var(--s-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.story-image-wrap img{ width: 100%; height: auto; display: block; }
.story-quote{
  border-left: 2px solid var(--accent);
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  margin: var(--s-6) 0;
}
.story-quote p{
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--onyx);
}
.story-quote cite{
  display: block;
  margin-top: var(--s-4);
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
.story-right{ display: grid; gap: var(--s-5); }
.story-card{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  padding: var(--s-7);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all .3s ease;
}
.story-card:hover{ border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.story-card .num{
  font-family: var(--f-display);
  font-size: 56px;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
}
.story-card h4{
  font-family: var(--f-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--onyx);
  margin-bottom: var(--s-2);
}
.story-card p{ font-size: 14.5px; color: var(--muted); line-height: 1.65; }

/* PILLARS */
.pillars{ background: linear-gradient(180deg, var(--bone) 0%, var(--pearl) 100%); }
.pillars-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.pillar{
  background: var(--bone);
  padding: var(--s-7) var(--s-6);
  position: relative;
  transition: background .3s;
}
.pillar:hover{ background: var(--paper); }
.pillar-icon{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--onyx);
  color: var(--accent);
  display: grid; place-items: center;
  margin-bottom: var(--s-5);
}
.pillar-icon svg{ width: 24px; height: 24px; }
.pillar h3{
  font-family: var(--f-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--onyx);
  margin-bottom: var(--s-3);
}
.pillar p{ font-size: 14.5px; color: var(--muted); line-height: 1.65; margin-bottom: var(--s-5); }
.pillar-list{
  display: grid; gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink);
  letter-spacing: .04em;
}
.pillar-list li{ display: flex; align-items: center; gap: var(--s-2); }
.pillar-list li::before{
  content:""; width:4px; height:4px; background: var(--accent); border-radius:50%;
}

/* PRODUCT TABS */
.products{ background: var(--bone); }
.products-tabs{
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-7);
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}
.tab-btn{
  padding: var(--s-4) var(--s-5);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .2s;
}
.tab-btn.active{ color: var(--onyx); border-bottom-color: var(--accent); }
.tab-btn:hover{ color: var(--onyx); }
.tab-count{
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--muted-2);
  margin-left: 6px;
}

.products-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.product-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
  transition: all .3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}
.product-card:hover{
  border-color: var(--onyx);
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
}
.product-card.featured{
  background: var(--onyx);
  color: var(--bone);
  border-color: var(--onyx);
}
.product-card.featured h3,
.product-card.featured .product-code{ color: var(--bone); }
.product-card.featured .product-desc{ color: rgba(250,247,242,.7); }
.product-card.featured .product-spec dt{ color: var(--accent); }
.product-card.featured .product-spec dd{ color: var(--bone); border-color: var(--line-dark); }
.product-card.featured .product-link{ color: var(--accent); border-bottom-color: var(--accent); }
.product-card.featured .product-img-wrap{ background: var(--onyx-2); }

.product-img-wrap{
  margin: calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-5);
  background: var(--bone);
  aspect-ratio: 16/9;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.product-card.featured .product-img-wrap{ border-bottom-color: var(--line-dark); }
.product-img-wrap img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.product-card:hover .product-img-wrap img{ transform: scale(1.05); }

.product-head{
  display: flex; justify-content: space-between; align-items: start;
  margin-bottom: var(--s-4);
  gap: var(--s-3);
}
.product-code{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--muted);
  text-transform: uppercase;
}
.product-tag{
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--accent);
  color: var(--onyx);
  border-radius: 100px;
  white-space: nowrap;
}
.product-card h3{
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--onyx);
  margin-bottom: var(--s-3);
  line-height: 1.15;
}
.product-desc{
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: var(--s-5);
}
.product-spec{
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--s-2) var(--s-4);
  font-size: 12px;
  margin-bottom: var(--s-5);
}
.product-spec dt{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 0;
}
.product-spec dd{
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--ink);
  font-weight: 500;
}
.product-link{
  margin-top: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--onyx);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: gap .25s;
}
.product-link:hover{ gap: 12px; }
.product-link svg{ width: 12px; height: 12px; }
.product-card.hide{ display: none; }

/* APPS */
.apps{ background: var(--pearl); }
.apps-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6);
}
.app-card{
  background: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: 320px;
  transition: all .35s ease;
  border: 1px solid var(--line);
}
.app-card:hover{ box-shadow: var(--shadow-3); transform: translateY(-4px); }
.app-card-visual{
  position: relative;
  overflow: hidden;
  background: var(--onyx-2);
}
.app-card-visual img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease;
}
.app-card:hover .app-card-visual img{ transform: scale(1.06); }
.app-card-visual::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,22,40,.2), rgba(10,22,40,.6));
}
.app-card-num{
  position: absolute;
  top: var(--s-5); left: var(--s-5);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--bone);
  z-index: 2;
  text-transform: uppercase;
  background: rgba(10,14,20,.4);
  padding: 6px 12px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
}
.app-card-body{
  padding: var(--s-7) var(--s-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.app-card-body h3{
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 400;
  margin-bottom: var(--s-3);
}
.app-card-body p{
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: var(--s-5);
}
.app-card-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--s-5);
}
.app-tag{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink);
}

/* QUALITY */
.quality{
  background: var(--ink);
  color: var(--bone);
  position: relative;
  overflow: hidden;
}
.quality::before{
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(201,168,118,.10), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(31,74,74,.15), transparent 50%);
}
.quality .container-wide{ position: relative; }
.quality h2{ color: var(--bone); }
.quality .lede{ color: rgba(250,247,242,.65); }
.qual-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}
.qual-cert{
  padding: var(--s-7) var(--s-5);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  text-align: center;
  transition: all .3s;
  cursor: pointer;
}
.qual-cert:hover{ background: rgba(255,255,255,.06); border-color: var(--accent); transform: translateY(-3px); }
.qual-cert .cert-icon{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(201,168,118,.1);
  border: 1px solid rgba(201,168,118,.3);
  display: grid; place-items: center;
  margin: 0 auto var(--s-4);
  color: var(--accent);
}
.qual-cert .cert-icon svg{ width: 22px; height: 22px; }
.qual-cert h4{
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--bone);
  margin-bottom: var(--s-2);
}
.qual-cert p{ font-size: 12.5px; color: rgba(250,247,242,.55); line-height: 1.55; }
.qual-cert .cert-link{
  display: inline-block;
  margin-top: var(--s-3);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid transparent;
}
.qual-cert:hover .cert-link{ border-bottom-color: var(--accent); }

/* SUSTAIN */
.sustain{ background: var(--bone); }
.sustain-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: center;
}
.sustain-visual{
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #2D4A3E 0%, #1F4A4A 60%, #0A1628 100%);
  position: relative;
  overflow: hidden;
}
.sustain-visual::before{
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(232,220,194,.25), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(201,168,118,.15), transparent 40%);
}
.sustain-visual::after{
  content: ""; position: absolute; inset: 12%;
  border: 1px solid rgba(232,220,194,.2);
  border-radius: 50%;
}
.sustain-visual .leaf{
  position: absolute;
  bottom: var(--s-7);
  left: var(--s-7);
  font-family: var(--f-display);
  font-size: 120px;
  font-weight: 300;
  color: rgba(232,220,194,.4);
  font-style: italic;
  line-height: .8;
}
.sustain-visual .leaf-sub{
  position: absolute;
  bottom: var(--s-7);
  right: var(--s-7);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: rgba(232,220,194,.6);
  text-transform: uppercase;
  text-align: right;
  max-width: 200px;
}
.sustain-content h2{ margin-bottom: var(--s-5); }
.sustain-content .lede{ margin-bottom: var(--s-7); }
.sustain-list{ display: grid; gap: var(--s-5); margin-bottom: var(--s-7); }
.sustain-item{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.sustain-item:last-child{ border-bottom: none; }
.sustain-item .num{
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
}
.sustain-item .num small{ font-size: 60%; color: var(--muted); }
.sustain-item h4{
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 4px;
}
.sustain-item p{ font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* PROCESS */
.process{ background: var(--pearl); }
.process-rail{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-2);
  position: relative;
}
.process-step{ position: relative; padding: var(--s-6) var(--s-5) var(--s-6) 0; }
.process-step::before{
  content: ""; position: absolute;
  top: 24px; left: 0; right: var(--s-2);
  height: 1px; background: var(--line);
}
.process-step .step-marker{
  position: absolute;
  top: 12px; left: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bone);
  border: 1px solid var(--accent);
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-2);
}
.process-step.active .step-marker{ background: var(--onyx); border-color: var(--onyx); color: var(--accent); }
.process-step h4{
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: var(--s-7);
  margin-bottom: var(--s-2);
}
.process-step p{ font-size: 13px; color: var(--muted); line-height: 1.6; }

/* SPOTLIGHT */
.spotlight{ background: var(--bone); }
.spotlight-card{
  background: linear-gradient(135deg, var(--onyx) 0%, var(--onyx-2) 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-height: 460px;
  position: relative;
}
.spotlight-card::before{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(201,168,118,.18), transparent 50%);
  pointer-events: none;
}
.spotlight-content{
  padding: var(--s-9) var(--s-8);
  color: var(--bone);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.spotlight-content .eyebrow{ color: var(--accent); margin-bottom: var(--s-5); }
.spotlight-content .eyebrow::before{ background: var(--accent); }
.spotlight-content h3{
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 300;
  color: var(--bone);
  margin-bottom: var(--s-5);
  line-height: 1.2;
}
.spotlight-content p{
  color: rgba(250,247,242,.75);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: var(--s-7);
  max-width: 50ch;
}
.spotlight-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255,255,255,.1);
}
.spotlight-stat .num{
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 300;
  color: var(--accent);
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}
.spotlight-stat .label{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(250,247,242,.5);
}
.spotlight-visual{
  background: linear-gradient(160deg, #C9A876 0%, #A88654 100%);
  position: relative;
  overflow: hidden;
}
.spotlight-visual::before{
  content: ""; position: absolute;
  width: 80%; height: 80%;
  top: 10%; left: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent 60%);
  filter: blur(30px);
}
.spotlight-visual::after{
  content: ""; position: absolute; inset: 20%;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  animation: spin 20s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.spotlight-quote{
  position: absolute;
  bottom: var(--s-7); right: var(--s-7); left: var(--s-7);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--onyx);
  text-align: right;
}
.spotlight-quote cite{
  display: block;
  margin-top: var(--s-3);
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(10,14,20,.7);
}

/* INSIGHTS */
.insights{ background: var(--bone); }
.insights-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.insight-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all .3s ease;
  display: flex;
  flex-direction: column;
}
.insight-card:hover{
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}
.insight-img{
  aspect-ratio: 16/10;
  background: var(--pearl);
  position: relative;
  overflow: hidden;
}
.insight-img img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.insight-card:hover .insight-img img{ transform: scale(1.05); }
.insight-body{
  padding: var(--s-6) var(--s-6) var(--s-7);
  display: flex; flex-direction: column;
  flex: 1;
}
.insight-meta{
  display: flex;
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-4);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
.insight-cat{ color: var(--accent-2); font-weight: 500; }
.insight-card h4{
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--onyx);
  line-height: 1.25;
  margin-bottom: var(--s-3);
}
.insight-body p{
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: var(--s-5);
  flex: 1;
}

/* CTA */
.cta{ background: var(--bone); padding: 0 0 var(--s-10); }
.cta-card{
  background:
    linear-gradient(135deg, rgba(10,22,40,.92), rgba(10,14,20,.92)),
    radial-gradient(circle at 80% 30%, var(--accent-2), transparent 50%);
  background-color: var(--onyx);
  border-radius: var(--radius-lg);
  padding: var(--s-9) var(--s-8);
  display: grid;
  grid-template-columns: 1.2fr auto;
  gap: var(--s-7);
  align-items: center;
  color: var(--bone);
  position: relative;
  overflow: hidden;
}
.cta-card::before{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 50%, rgba(201,168,118,.15), transparent 50%);
}
.cta-card-content{ position: relative; }
.cta-card h2{
  color: var(--bone);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 300;
  margin-bottom: var(--s-4);
  max-width: 22ch;
}
.cta-card h2 em{ color: var(--accent); font-style: italic; }
.cta-card p{ color: rgba(250,247,242,.7); font-size: 15.5px; max-width: 50ch; }
.cta-card-actions{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
  min-width: 220px;
}

/* CONTACT */
.contact{ background: var(--pearl); }
.contact-grid{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-9);
}
.contact-left h2{ margin-bottom: var(--s-5); }
.contact-left .lede{ margin-bottom: var(--s-7); }
.contact-info{ display: grid; gap: var(--s-5); }
.contact-info-item{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
}
.contact-info-item:last-child{ border-bottom: 1px solid var(--line); }
.contact-info-item .ico{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--accent-2);
}
.contact-info-item .ico svg{ width: 14px; height: 14px; }
.contact-info-item .label{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.contact-info-item .value{
  font-size: 15px;
  color: var(--onyx);
  font-weight: 500;
}
.contact-form{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-8);
}
.contact-form h3{
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  margin-bottom: var(--s-6);
}
.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.field{ display: grid; gap: var(--s-2); }
.field-full{ grid-column: 1 / -1; }
.field label{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.field input,
.field select,
.field textarea{
  font-family: var(--f-sans);
  font-size: 15px;
  padding: 12px 14px;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: all .2s;
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--onyx);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(201,168,118,.2);
}
.field textarea{ resize: vertical; min-height: 110px; }
.form-meta{
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}

/* FOOTER */
.footer{
  background: var(--ink);
  color: rgba(250,247,242,.6);
  padding: var(--s-10) 0 var(--s-7);
}
.footer-top{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--s-7);
  margin-bottom: var(--s-9);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand .brand-text .name{ color: var(--bone); }
.footer-brand .brand-text .tag{ color: rgba(250,247,242,.4); }
.footer-brand p{
  margin-top: var(--s-4);
  max-width: 36ch;
  font-size: 13.5px;
  line-height: 1.7;
}
.footer-col h5{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-5);
}
.footer-col ul{ display: grid; gap: var(--s-3); }
.footer-col a{
  font-size: 13.5px;
  color: rgba(250,247,242,.7);
  transition: color .2s;
}
.footer-col a:hover{ color: var(--accent); }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: rgba(250,247,242,.45);
}
.footer-bottom .legal{ display: flex; gap: var(--s-5); }
.footer-bottom a:hover{ color: var(--accent); }

/* SCROLL REVEAL */
[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].in{ opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"]{ transition-delay: .08s; }
[data-reveal-delay="2"]{ transition-delay: .16s; }
[data-reveal-delay="3"]{ transition-delay: .24s; }
[data-reveal-delay="4"]{ transition-delay: .32s; }

/* PAGE HERO (smaller, for sub-pages) */
.page-hero{
  background: var(--bone);
  padding: var(--s-9) 0 var(--s-8);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.page-hero::before{
  content:""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(201,168,118,.10), transparent 50%);
  pointer-events: none;
}
.page-hero .container-wide{ position: relative; }
.breadcrumb{
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-6);
}
.breadcrumb a{ color: var(--muted); transition: color .2s; }
.breadcrumb a:hover{ color: var(--accent-2); }
.breadcrumb .sep{ color: var(--muted-2); }
.breadcrumb .current{ color: var(--onyx); }
.page-hero h1{
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--onyx);
  margin-bottom: var(--s-5);
  max-width: 18ch;
}
.page-hero h1 em{ font-style: italic; color: var(--accent-2); font-weight: 300; }
.page-hero .lede{ font-size: 18px; max-width: 60ch; }

/* RESPONSIVE */
@media (max-width: 1100px){
  .nav-links{ display: none; }
  .nav-cta{ display: none; }
  .hamburger{ display: flex; }
  .hero-grid{ grid-template-columns: 1fr; gap: var(--s-7); }
  .hero-visual{ height: 480px; }
  .story-grid{ grid-template-columns: 1fr; }
  .story-left{ position: static; }
  .pillars-grid{ grid-template-columns: repeat(2, 1fr); }
  .products-grid{ grid-template-columns: repeat(2, 1fr); }
  .qual-grid{ grid-template-columns: repeat(2, 1fr); }
  .sustain-grid{ grid-template-columns: 1fr; }
  .spotlight-card{ grid-template-columns: 1fr; }
  .insights-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; gap: var(--s-7); }
  .process-rail{ grid-template-columns: 1fr; gap: var(--s-5); }
  .process-step::before{ display: none; }
  .trust-inner{ grid-template-columns: 1fr; }
  .trust-logos{ grid-template-columns: repeat(3, 1fr); }
  .section-head{ grid-template-columns: 1fr; gap: var(--s-5); }
  .cta-card{ grid-template-columns: 1fr; padding: var(--s-7); }
  .app-card{ grid-template-columns: 1fr; }
  .app-card-visual{ min-height: 200px; }
}
@media (max-width: 720px){
  .section{ padding: var(--s-9) 0; }
  .container, .container-wide, .container-narrow{ padding: 0 var(--s-4); }
  .hero{ padding: var(--s-8) 0; }
  .hero-meta{ grid-template-columns: 1fr; gap: var(--s-4); }
  .hero-stat{ display: flex; align-items: baseline; gap: var(--s-4); }
  .hero-stat .num{ margin-bottom: 0; }
  .hero-visual{ height: 380px; }
  .hero-badge{ display: none; }
  .pillars-grid{ grid-template-columns: 1fr; }
  .products-grid{ grid-template-columns: 1fr; }
  .qual-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; gap: var(--s-3); }
  .announce-right{ display: none; }
  .spotlight-content{ padding: var(--s-7) var(--s-5); }
  .spotlight-visual{ display: none; }
  .trust-logos{ grid-template-columns: repeat(2, 1fr); }
  .contact-form{ padding: var(--s-5); }
  .story-card{ grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-5); }
  .story-card .num{ font-size: 40px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================
   ARTICLE PAGE STYLES
   ================================================================ */
.article-hero{
  background: var(--onyx);
  color: var(--bone);
  padding: var(--s-9) 0 var(--s-8);
  position: relative;
  overflow: hidden;
}
.article-hero::before{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(201,168,118,.15), transparent 50%);
}
.article-hero .container-narrow{ position: relative; }
.article-hero .breadcrumb{ color: rgba(250,247,242,.5); margin-bottom: var(--s-6); }
.article-hero .breadcrumb a{ color: rgba(250,247,242,.5); }
.article-hero .breadcrumb a:hover{ color: var(--accent); }
.article-hero .breadcrumb .current{ color: var(--bone); }
.article-meta-top{
  display: flex; gap: var(--s-3); align-items: center;
  margin-bottom: var(--s-6);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.article-meta-top .cat{
  background: var(--accent);
  color: var(--onyx);
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 500;
}
.article-meta-top .sep{ color: rgba(250,247,242,.3); }
.article-meta-top span{ color: rgba(250,247,242,.6); }
.article-hero h1{
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--bone);
  margin-bottom: var(--s-5);
  max-width: 22ch;
}
.article-hero h1 em{ font-style: italic; color: var(--accent); font-weight: 300; }
.article-deck{
  font-size: 19px;
  line-height: 1.6;
  color: rgba(250,247,242,.8);
  max-width: 60ch;
}
.article-author{
  display: flex; align-items: center; gap: var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255,255,255,.1);
}
.article-author-avatar{
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-size: 20px;
  color: var(--onyx);
  font-weight: 500;
}
.article-author-name{
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--bone);
}
.article-author-title{
  font-size: 12px;
  color: rgba(250,247,242,.5);
}

.article-cover{ margin: 0; }
.article-cover img{
  width: 100%; height: auto;
  max-height: 540px;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}

.article-body{
  background: var(--bone);
  padding: var(--s-9) 0;
}
.article-body .container-narrow{ max-width: 740px; }
.article-body p,
.article-body ul,
.article-body ol{
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: var(--s-5);
  font-weight: 400;
}
.article-body ul, .article-body ol{ padding-left: var(--s-5); }
.article-body li{ margin-bottom: var(--s-2); }
.article-body ul li{ list-style: disc; }
.article-body ol li{ list-style: decimal; }
.article-body h2{
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--onyx);
  margin: var(--s-8) 0 var(--s-4);
  letter-spacing: -0.02em;
}
.article-body h3{
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--onyx);
  margin: var(--s-6) 0 var(--s-3);
}
.article-body strong{ font-weight: 600; color: var(--onyx); }
.article-body em{ font-style: italic; color: var(--accent-2); }
.article-body a{
  color: var(--accent-2);
  border-bottom: 1px solid var(--accent);
  transition: color .2s;
}
.article-body a:hover{ color: var(--onyx); }
.article-body blockquote{
  margin: var(--s-7) 0;
  padding: var(--s-5) var(--s-6);
  border-left: 3px solid var(--accent);
  background: var(--pearl);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--onyx);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.article-body blockquote cite{
  display: block;
  margin-top: var(--s-3);
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
.article-body figure{
  margin: var(--s-7) calc(var(--s-7) * -1);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.article-body figure img{ width: 100%; height: auto; }
.article-body figcaption{
  padding: var(--s-3) var(--s-5);
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.article-body table{
  width: 100%;
  margin: var(--s-6) 0;
  border-collapse: collapse;
  font-size: 14px;
}
.article-body table th{
  background: var(--onyx);
  color: var(--bone);
  text-align: left;
  padding: var(--s-3) var(--s-4);
  font-weight: 500;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.article-body table td{
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.article-body hr{
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-8) 0;
}

.callout{
  margin: var(--s-7) 0;
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.callout-label{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--s-3);
  font-weight: 500;
}
.callout p{ margin-bottom: 0 !important; font-size: 15px !important; }

.article-share{
  display: flex; align-items: center; gap: var(--s-4);
  margin: var(--s-8) 0;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.article-share-label{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.article-share-buttons{ display: flex; gap: var(--s-3); }
.article-share-btn{
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  display: grid; place-items: center;
  color: var(--muted);
  transition: all .2s;
}
.article-share-btn:hover{ background: var(--onyx); color: var(--bone); border-color: var(--onyx); }
.article-share-btn svg{ width: 14px; height: 14px; }

/* RELATED */
.related{ background: var(--pearl); padding: var(--s-9) 0; }
.related h3{
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 400;
  margin-bottom: var(--s-7);
}

/* ================================================================
   TDS / SDS DOCUMENT STYLES
   ================================================================ */
.doc-toolbar{
  background: var(--ink);
  color: rgba(250,247,242,.7);
  padding: var(--s-3) 0;
  font-size: 12px;
  position: sticky; top: 0;
  z-index: 50;
}
.doc-toolbar .container-wide{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
}
.doc-toolbar-left{ display: flex; align-items: center; gap: var(--s-5); }
.doc-toolbar a{ color: var(--accent); }
.doc-toolbar a:hover{ color: var(--accent-soft); }
.doc-toolbar-actions{ display: flex; gap: var(--s-3); }
.doc-toolbar-actions button,
.doc-toolbar-actions a{
  font-size: 11px;
  font-family: var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 2px;
  color: rgba(250,247,242,.85);
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .2s;
}
.doc-toolbar-actions button:hover,
.doc-toolbar-actions a:hover{ background: rgba(255,255,255,.08); border-color: var(--accent); }

.document{
  background: var(--paper);
  max-width: 920px;
  margin: var(--s-7) auto;
  padding: var(--s-9) var(--s-8);
  box-shadow: var(--shadow-3);
  border: 1px solid var(--line);
  font-family: var(--f-sans);
  color: var(--ink);
  position: relative;
}
.document::before{
  content: ""; position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.doc-header{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-6);
  align-items: start;
  padding-bottom: var(--s-5);
  border-bottom: 2px solid var(--onyx);
  margin-bottom: var(--s-6);
}
.doc-header-brand{ display: flex; align-items: center; gap: var(--s-3); }
.doc-header-brand img{ height: 38px; width: auto; }
.doc-header-brand-text{
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--onyx);
  line-height: 1.1;
}
.doc-header-brand-text small{
  display: block;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}
.doc-header-meta{
  text-align: right;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}
.doc-header-meta .doc-type{
  display: inline-block;
  padding: 4px 10px;
  background: var(--onyx);
  color: var(--accent);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 10px;
}

.doc-title{
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--onyx);
  margin-bottom: var(--s-3);
  letter-spacing: -0.02em;
}
.doc-subtitle{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--s-7);
}

.doc-section{ margin-bottom: var(--s-7); }
.doc-section h2{
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--onyx);
  padding: 10px var(--s-4);
  margin-bottom: var(--s-5);
  display: flex; align-items: center; gap: var(--s-3);
}
.doc-section h2 .num{
  font-family: var(--f-mono);
  background: var(--accent);
  color: var(--onyx);
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 2px;
}
.doc-section p{
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: var(--s-3);
}

.spec-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: var(--s-4);
}
.spec-table th,
.spec-table td{
  padding: 10px var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.spec-table th{
  background: var(--bone);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.spec-table tr:nth-child(even) td{ background: rgba(248,247,242,.5); }
.spec-table .param{ font-weight: 500; color: var(--onyx); width: 35%; }
.spec-table .method{ font-family: var(--f-mono); font-size: 11px; color: var(--muted); width: 25%; }
.spec-table .value{ font-family: var(--f-mono); font-size: 12px; }

.doc-grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }

.doc-footer{
  margin-top: var(--s-9);
  padding-top: var(--s-5);
  border-top: 2px solid var(--onyx);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-5);
  align-items: end;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}
.doc-footer .disclaimer{
  font-size: 10.5px;
  color: var(--muted-2);
  line-height: 1.5;
  max-width: 60ch;
}
.doc-footer-meta{
  text-align: right;
  font-family: var(--f-mono);
  letter-spacing: .08em;
}
.doc-footer-meta .stamp{
  display: inline-block;
  border: 2px solid var(--success);
  color: var(--success);
  padding: 6px 14px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-size: 11px;
}

@media (max-width: 720px){
  .document{ padding: var(--s-6) var(--s-5); margin: var(--s-3); }
  .doc-header{ grid-template-columns: 1fr; gap: var(--s-3); }
  .doc-header-meta{ text-align: left; }
  .doc-grid-2{ grid-template-columns: 1fr; }
  .doc-footer{ grid-template-columns: 1fr; gap: var(--s-3); }
  .article-body figure{ margin: var(--s-5) 0; }
}

/* PRINT (so PDF export looks polished) */
@media print{
  /* Page setup — standalone, no browser headers/footers if user disables them */
  @page{ margin: 14mm; size: A4; }

  /* Reset body & remove all chrome */
  *,*::before,*::after{ box-shadow: none !important; text-shadow: none !important; }
  html, body{ background: white !important; padding: 0 !important; margin: 0 !important; }

  /* Hide ALL site chrome — nothing but the document content */
  .nav, .announce, .doc-toolbar, .footer, .footer-v2, .article-share, .related,
  .marquee, .mobile-menu, .hamburger, .nav-cta, .btn-link, .btn,
  .print-hide,
  header.nav, footer.footer, footer.footer-v2,
  aside.mobile-menu, nav.nav,
  [class*="back-to"], [class*="cta-card"]{
    display: none !important;
  }

  /* Hide any "Back to catalogue" buttons at bottom of doc pages — common pattern */
  body > div:last-child > a.btn-ghost,
  body > div:last-child:has(a){ display: none !important; }

  /* Document container — fill page, no decoration */
  .document, .cert-document{
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    background: white !important;
  }
  .document::before, .cert-document::before, .cert-document::after{ display: none !important; }
  .cert-border{ border: 4px double #C9A876 !important; margin: 0 !important; padding: 24px !important; }
  .cert-watermark{ display: none !important; }

  /* Article — print-friendly */
  .article-body, .article-hero{ background: white !important; color: black !important; padding: 16px 0 !important; }
  .article-hero h1, .article-hero .article-deck, .article-hero .article-meta-top span,
  .article-hero .breadcrumb, .article-hero .breadcrumb a, .article-hero .breadcrumb .current{
    color: black !important;
  }
  .article-hero h1 em{ color: #A88654 !important; }
  .article-author{ border-top: 1px solid #ccc !important; }
  .article-author-avatar{ background: #f0f0f0 !important; color: black !important; }
  .article-author-name, .article-author-title{ color: black !important; }
  .article-cover img{ max-height: 280px !important; }

  /* Avoid breaks inside critical blocks */
  .doc-section, .doc-header, .doc-footer, .cert-meta,
  .product-card, .insight-card, .callout, blockquote,
  table, h1, h2, h3{ page-break-inside: avoid; }
  h1, h2, h3{ page-break-after: avoid; }

  /* Ensure section headers stay with content */
  .doc-section h2{ break-after: avoid; }
  .doc-section table{ break-inside: avoid; }

  /* Force black text on light bg for printability */
  body, p, h1, h2, h3, h4, h5, h6, dt, dd, td, th{ color: black !important; }
  .doc-section h2{ background: #0A1628 !important; color: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-type{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .stamp{ border-color: #2F7A4F !important; color: #2F7A4F !important; }

  /* Ensure backgrounds print where intentional */
  .doc-section h2,
  .doc-header-meta .doc-type,
  .stamp,
  .cert-issuer-logo{
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Hide links targeting same page (cosmetic noise in print) */
  a[href^="#"]{ text-decoration: none !important; color: inherit !important; }
}

/* ================================================================
   STRATEGIC POSITIONING SECTIONS
   The Independent Advantage / Manifesto / Comparison
   ================================================================ */

/* MANIFESTO */
.manifesto{
  background: var(--ink);
  color: var(--bone);
  padding: var(--s-10) 0;
  position: relative;
  overflow: hidden;
}
.manifesto::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 20%, rgba(201,168,118,.10), transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(31,74,74,.18), transparent 50%);
}
.manifesto .container-narrow{ position: relative; max-width: 880px; }
.manifesto-eyebrow{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-6);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.manifesto-eyebrow::before{
  content: "";
  width: 28px; height: 1px;
  background: var(--accent);
}
.manifesto h2{
  font-family: var(--f-display);
  font-size: clamp(32px, 5.5vw, 64px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--bone);
  margin-bottom: var(--s-7);
}
.manifesto h2 em{
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}
.manifesto-body{
  font-size: 19px;
  line-height: 1.7;
  color: rgba(250,247,242,.85);
  max-width: 65ch;
  margin-bottom: var(--s-7);
}
.manifesto-body p{ margin-bottom: var(--s-4); }
.manifesto-body strong{ color: var(--bone); font-weight: 600; }
.manifesto-sign{
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(250,247,242,.6);
}
.manifesto-sign .signature{
  font-family: var(--f-display);
  font-style: italic;
  font-size: 24px;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: 0;
  text-transform: none;
}

/* THE INDEPENDENT ADVANTAGE — comparison table */
.advantage{
  background: var(--bone);
  padding: var(--s-10) 0;
}
.advantage-head{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-7);
  align-items: end;
  margin-bottom: var(--s-8);
}
.advantage-head h2{
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 300;
}
.advantage-head h2 em{ font-style: italic; color: var(--accent-2); }
.advantage-table-wrap{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.advantage-table-head{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  background: var(--ink);
  color: var(--bone);
}
.advantage-table-head > div{
  padding: var(--s-5) var(--s-6);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 500;
  border-right: 1px solid rgba(255,255,255,.1);
}
.advantage-table-head > div:last-child{ border-right: none; }
.advantage-table-head .col-them{
  background: rgba(255,255,255,.04);
  color: rgba(250,247,242,.55);
}
.advantage-table-head .col-us{
  background: var(--accent);
  color: var(--onyx);
  font-weight: 600;
}
.advantage-row{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  border-top: 1px solid var(--line-soft);
  transition: background .2s;
}
.advantage-row:hover{ background: var(--bone); }
.advantage-row > div{
  padding: var(--s-5) var(--s-6);
  font-size: 14.5px;
  border-right: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.advantage-row > div:last-child{ border-right: none; }
.advantage-row .metric{
  font-weight: 600;
  color: var(--onyx);
  font-size: 14px;
}
.advantage-row .metric small{
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.advantage-row .them{ color: var(--muted); }
.advantage-row .us{
  color: var(--onyx);
  font-weight: 600;
  background: rgba(201,168,118,.08);
}
.advantage-row .icon-x{
  color: var(--danger); flex-shrink: 0;
  width: 18px; height: 18px;
}
.advantage-row .icon-check{
  color: var(--success); flex-shrink: 0;
  width: 18px; height: 18px;
}

.advantage-foot{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--s-5);
  margin-top: var(--s-8);
}
.advantage-foot-card{
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all .3s;
}
.advantage-foot-card:hover{
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.advantage-foot-card .num{
  font-family: var(--f-display);
  font-size: 56px;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--s-3);
}
.advantage-foot-card .num small{
  font-size: 50%;
  color: var(--muted);
  margin-left: 2px;
}
.advantage-foot-card h4{
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--onyx);
  letter-spacing: 0;
  margin-bottom: var(--s-2);
}
.advantage-foot-card p{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* WHY-WE-WIN — 4 confident pillars */
.win{
  background: var(--pearl);
  padding: var(--s-10) 0;
}
.win-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-8);
}
.win-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-7) var(--s-7);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.win-card:hover{
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.win-card-num{
  font-family: var(--f-display);
  font-size: 80px;
  font-weight: 300;
  color: var(--accent);
  line-height: .85;
  letter-spacing: -0.04em;
  font-style: italic;
}
.win-card h3{
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--onyx);
  margin-bottom: var(--s-3);
  line-height: 1.15;
}
.win-card .lede{
  font-size: 15px;
  color: var(--ink);
  line-height: 1.65;
  margin-bottom: var(--s-4);
  font-weight: 500;
}
.win-card p{
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}
.win-card .vs{
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--accent-2);
  text-transform: uppercase;
}
.win-card .vs strong{
  color: var(--onyx);
  font-weight: 600;
}

/* PROOF / TRUST BAR — confident */
.proof{
  background: var(--bone);
  padding: var(--s-9) 0 var(--s-7);
  border-bottom: 1px solid var(--line);
}
.proof-head{
  text-align: center;
  margin-bottom: var(--s-7);
}
.proof-head .eyebrow{ justify-content: center; margin-bottom: var(--s-3); }
.proof-head h3{
  font-family: var(--f-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 400;
  color: var(--onyx);
}
.proof-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-left: 1px solid var(--line);
}
.proof-stat{
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--line);
  text-align: center;
}
.proof-stat .num{
  font-family: var(--f-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 300;
  color: var(--onyx);
  line-height: 1;
  margin-bottom: var(--s-2);
}
.proof-stat .num em{ font-style: italic; color: var(--accent); }
.proof-stat .num small{ font-size: 50%; color: var(--accent-2); }
.proof-stat .label{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 1100px){
  .advantage-head{ grid-template-columns: 1fr; gap: var(--s-5); }
  .advantage-foot{ grid-template-columns: 1fr 1fr; }
  .win-grid{ grid-template-columns: 1fr; }
  .proof-grid{ grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
  .proof-stat{ border-bottom: 1px solid var(--line); }
}
@media (max-width: 720px){
  .advantage-table-head{ grid-template-columns: 1fr 1fr 1fr; font-size: 9px; }
  .advantage-row{ grid-template-columns: 1fr; }
  .advantage-row > div{ border-right: none; border-bottom: 1px solid var(--line-soft); padding: var(--s-3) var(--s-4); }
  .advantage-row .them::before{ content: "Multinational: "; font-family: var(--f-mono); font-size: 10px; color: var(--muted-2); margin-right: 8px; letter-spacing: .12em; text-transform: uppercase; }
  .advantage-row .us::before{ content: "GK Silicones: "; font-family: var(--f-mono); font-size: 10px; color: var(--accent-2); margin-right: 8px; letter-spacing: .12em; text-transform: uppercase; }
  .advantage-table-head{ display: none; }
  .advantage-foot{ grid-template-columns: 1fr; }
  .win-card{ grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-5); }
  .win-card-num{ font-size: 56px; }
  .proof-grid{ grid-template-columns: 1fr; }
}

/* ================================================================
   v4 — MODERN HERO + REDESIGNED PORTFOLIO
   ================================================================ */

/* MODERN EDITORIAL HERO */
.hero-modern{
  position: relative;
  background: var(--bone);
  padding: 0;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: stretch;
}
.hero-modern::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 90% 10%, rgba(201,168,118,.18), transparent 50%),
    radial-gradient(ellipse at 10% 100%, rgba(20,34,53,.08), transparent 55%);
  pointer-events: none;
}
.hero-modern-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  width: 100%;
  position: relative;
  z-index: 1;
  align-items: stretch;
}
.hero-modern-text{
  padding: var(--s-9) var(--s-6) var(--s-8) var(--s-9);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-pretitle{
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero-pretitle .pre-line{ width: 36px; height: 1px; background: var(--accent-2); }
.hero-pretitle .pre-text{ color: var(--accent-2); font-weight: 500; }
.hero-pretitle .pre-num{
  background: var(--onyx);
  color: var(--accent);
  padding: 5px 10px;
  border-radius: 100px;
  font-weight: 600;
  letter-spacing: .12em;
  font-size: 10px;
}
.hero-headline{
  font-family: var(--f-display);
  font-size: clamp(48px, 5.6vw, 88px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--onyx);
  margin-bottom: var(--s-6);
  max-width: 16ch;
}
.hero-headline em{ font-style: italic; color: var(--accent-2); font-weight: 300; }
.hero-headline .word-break{ display: block; }
.hero-deck{
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--muted);
  max-width: 44ch;
  margin-bottom: var(--s-7);
  font-weight: 400;
}
.hero-deck strong{ color: var(--onyx); font-weight: 600; }
.hero-actions-modern{
  display: flex;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
  flex-wrap: wrap;
}
.hero-stats-inline{
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  align-items: end;
}
.hero-stats-inline .stat-num{
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 400;
  color: var(--onyx);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.hero-stats-inline .stat-num em{ font-style: italic; color: var(--accent); }
.hero-stats-inline .stat-num small{ font-size: 50%; color: var(--accent-2); margin-left: 2px; vertical-align: top; line-height: 1; }
.hero-stats-inline .stat-label{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}

/* HERO IMAGE SIDE */
.hero-modern-visual{
  position: relative;
  background: var(--onyx);
  overflow: hidden;
}
.hero-modern-visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.9) contrast(1.05);
}
.hero-modern-visual::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(10,14,20,.65)),
    linear-gradient(90deg, rgba(250,247,242,.15), transparent 30%);
  pointer-events: none;
}
.hero-image-cap{
  position: absolute;
  bottom: var(--s-7);
  left: var(--s-7);
  right: var(--s-7);
  z-index: 2;
  color: var(--bone);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--s-5);
}
.hero-image-cap .cap-text{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 300;
  line-height: 1.25;
  max-width: 24ch;
}
.hero-image-cap .cap-meta{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: right;
  flex-shrink: 0;
}

/* Floating badge */
.hero-modern-badge{
  position: absolute;
  top: var(--s-7);
  right: var(--s-7);
  background: rgba(250,247,242,.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 100px;
  padding: 8px 16px 8px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  box-shadow: 0 8px 24px rgba(10,14,20,.15);
}
.hero-modern-badge .b-dot{
  width: 28px; height: 28px;
  background: var(--success);
  color: white;
  border-radius: 50%;
  display: grid; place-items: center;
}
.hero-modern-badge .b-dot svg{ width: 14px; height: 14px; }
.hero-modern-badge .b-text{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--onyx);
  font-weight: 500;
}

@media (max-width: 1100px){
  .hero-modern-grid{ grid-template-columns: 1fr; }
  .hero-modern-visual{ min-height: 480px; }
  .hero-modern-text{ padding: var(--s-8) var(--s-5); }
  .hero-headline{ font-size: clamp(48px, 11vw, 80px); }
}
@media (max-width: 720px){
  .hero-modern-text{ padding: var(--s-7) var(--s-4); }
  .hero-stats-inline{ grid-template-columns: 1fr; gap: var(--s-4); padding-top: var(--s-5); }
  .hero-stats-inline > div{ display: flex; align-items: baseline; gap: var(--s-4); }
  .hero-stats-inline .stat-num{ margin-bottom: 0; }
  .hero-modern-visual{ min-height: 380px; }
  .hero-image-cap{ left: var(--s-4); right: var(--s-4); bottom: var(--s-5); flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .hero-image-cap .cap-meta{ text-align: left; }
  .hero-modern-badge{ top: var(--s-4); right: var(--s-4); }
}

/* ================================================================
   PORTFOLIO REDESIGN — clean 3x3 grid with chemistry visuals
   ================================================================ */
.portfolio-section{
  background: var(--bone);
  padding: var(--s-10) 0;
  position: relative;
}
.portfolio-head{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-7);
  align-items: end;
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.portfolio-head .label{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--s-3);
  display: block;
}
.portfolio-head h2{
  font-family: var(--f-display);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--onyx);
  margin: 0;
}
.portfolio-head h2 em{ font-style: italic; color: var(--accent-2); }
.portfolio-head-cta{ flex-shrink: 0; }

.portfolio-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}

.family-card{
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-7);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all .35s cubic-bezier(.2,.7,.2,1);
  text-decoration: none;
  overflow: hidden;
}
.family-card:hover{
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--shadow-3);
}
.family-card::before{
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.family-card:hover::before{ transform: scaleX(1); }

.family-card-num{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
  margin-bottom: var(--s-5);
}
.family-card-icon{
  width: 64px; height: 64px;
  margin-bottom: var(--s-5);
  color: var(--accent-2);
}
.family-card-icon svg{ width: 100%; height: 100%; }
.family-card h3{
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--onyx);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--s-3);
}
.family-card p{
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: var(--s-5);
  max-width: 32ch;
}
.family-card-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
}
.family-card-count{
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--onyx);
  letter-spacing: -0.02em;
}
.family-card-count small{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-left: 4px;
}
.family-card-arrow{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bone);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--onyx);
  transition: all .3s ease;
}
.family-card:hover .family-card-arrow{
  background: var(--onyx);
  color: var(--bone);
  border-color: var(--onyx);
  transform: rotate(-45deg);
}
.family-card-arrow svg{ width: 14px; height: 14px; }

/* Hero card variant — featured family */
.family-card.hero-family{
  grid-column: span 2;
  grid-row: span 2;
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
  min-height: 660px;
  padding: var(--s-8);
}
.family-card.hero-family::before{ background: var(--accent); }
.family-card.hero-family .family-card-num{ color: var(--accent); }
.family-card.hero-family .family-card-icon{ color: var(--accent); width: 96px; height: 96px; }
.family-card.hero-family h3{
  color: var(--bone);
  font-size: clamp(48px, 5vw, 72px);
  margin-bottom: var(--s-5);
}
.family-card.hero-family p{
  color: rgba(250,247,242,.7);
  font-size: 17px;
  line-height: 1.6;
  max-width: 42ch;
}
.family-card.hero-family .family-card-foot{ border-top-color: rgba(255,255,255,.1); }
.family-card.hero-family .family-card-count{ color: var(--bone); font-size: 36px; }
.family-card.hero-family .family-card-count small{ color: rgba(250,247,242,.5); }
.family-card.hero-family .family-card-arrow{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.2);
  color: var(--bone);
  width: 44px; height: 44px;
}
.family-card.hero-family:hover .family-card-arrow{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--onyx);
}
.family-card.hero-family .family-card-arrow svg{ width: 18px; height: 18px; }

@media (max-width: 1100px){
  .portfolio-grid{ grid-template-columns: repeat(2, 1fr); }
  .family-card.hero-family{ grid-column: span 2; grid-row: span 1; min-height: 360px; }
  .portfolio-head{ grid-template-columns: 1fr; align-items: start; gap: var(--s-5); }
}
@media (max-width: 720px){
  .portfolio-grid{ grid-template-columns: 1fr; }
  .family-card{ min-height: 240px; padding: var(--s-5); }
  .family-card.hero-family{ grid-column: span 1; min-height: 320px; padding: var(--s-6); }
  .family-card.hero-family h3{ font-size: 40px; }
  .family-card h3{ font-size: 26px; }
}

/* ================================================================
   APP CARDS — Indonesian beauty model focus
   ================================================================ */
.app-card-modern{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--onyx-2);
  cursor: pointer;
  transition: transform .4s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.app-card-modern:hover{ transform: translateY(-4px); }
.app-card-modern img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.app-card-modern:hover img{ transform: scale(1.06); }
.app-card-modern::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(10,14,20,.85) 100%);
  z-index: 1;
}
.app-card-modern .app-num{
  position: absolute;
  top: var(--s-5);
  left: var(--s-5);
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(10,14,20,.4);
  padding: 6px 12px;
  border-radius: 100px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
}
.app-card-modern .app-content{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--s-6) var(--s-6) var(--s-6);
  z-index: 2;
  color: var(--bone);
}
.app-card-modern h3{
  font-family: var(--f-display);
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 400;
  color: var(--bone);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: var(--s-3);
}
.app-card-modern p{
  font-size: 14px;
  line-height: 1.55;
  color: rgba(250,247,242,.8);
  margin-bottom: var(--s-4);
  max-width: 32ch;
}
.app-card-modern .app-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
  font-weight: 500;
  transition: gap .25s;
}
.app-card-modern:hover .app-cta{ gap: 14px; }
.apps-grid-modern{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
@media (max-width: 1100px){ .apps-grid-modern{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ .apps-grid-modern{ grid-template-columns: 1fr; } .app-card-modern{ aspect-ratio: 4/3; } }


/* ================================================================
   v3 — DENSITY REDUCTION & MODERN COMPONENTS
   - Brand mark (single, no double logo)
   - 3-factory merger section
   - SML distributor partnership card
   - Bento grid system
   - Indonesia-first hero
   ================================================================ */

/* Brand: image-only (no text duplicate) */
.brand-clean{ display: inline-flex; align-items: center; gap: 0; }
.brand-clean img{ height: 38px; width: auto; display: block; }
.brand-clean .pill{
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--accent-2);
  text-transform: uppercase;
  margin-left: 14px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--bone);
}
@media (max-width: 720px){ .brand-clean .pill{ display: none; } }

/* ===== HERO LIGHT (compact, less text) ===== */
.hero-light{
  background: var(--bone);
  padding: var(--s-9) 0 var(--s-9);
  position: relative;
  overflow: hidden;
}
.hero-light::before{
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 85% 15%, rgba(201,168,118,.14), transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(20,34,53,.05), transparent 50%);
  pointer-events: none;
}
.hero-light .container-wide{ position: relative; }
.hero-light .hero-tag{
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 16px 6px 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s-6);
}
.hero-light .hero-tag .badge{
  background: var(--accent);
  color: var(--onyx);
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 10px;
}
.hero-light .hero-tag .arrow{ color: var(--muted); }

.hero-light h1{
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--onyx);
  margin-bottom: var(--s-6);
  max-width: 14ch;
}
.hero-light h1 em{ font-style: italic; color: var(--accent-2); font-weight: 300; }

.hero-light-grid{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--s-9);
  align-items: end;
}
.hero-light-deck{
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 42ch;
  margin-bottom: var(--s-7);
}
.hero-light-actions{ display: flex; gap: var(--s-3); flex-wrap: wrap; }

.hero-side{
  display: grid;
  gap: var(--s-3);
}
.hero-side-card{
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  transition: border-color .25s;
}
.hero-side-card:hover{ border-color: var(--accent); }
.hero-side-card .side-num{
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 300;
  color: var(--accent-2);
  line-height: 1;
  flex-shrink: 0;
  min-width: 70px;
}
.hero-side-card .side-num small{ font-size: 50%; color: var(--muted); }
.hero-side-card .side-text{
  font-family: var(--f-sans);
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
}
.hero-side-card .side-text strong{ display: block; color: var(--onyx); margin-bottom: 2px; }

/* ===== BENTO GRID (replaces prose-heavy sections) ===== */
.bento{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(140px, auto);
  gap: var(--s-4);
}
.bento-cell{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}
.bento-cell:hover{
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.bento-cell.dark{
  background: var(--onyx);
  color: var(--bone);
  border-color: var(--onyx);
}
.bento-cell.dark .bento-label{ color: var(--accent); }
.bento-cell.dark .bento-fact{ color: var(--bone); }
.bento-cell.dark .bento-sub{ color: rgba(250,247,242,.7); }
.bento-cell.accent{ background: var(--accent); border-color: var(--accent); color: var(--onyx); }
.bento-cell.accent .bento-label{ color: var(--onyx); opacity: .7; }
.bento-cell.accent .bento-fact{ color: var(--onyx); }

.bento-label{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
  margin-bottom: var(--s-3);
}
.bento-fact{
  font-family: var(--f-display);
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--onyx);
  margin-bottom: var(--s-3);
}
.bento-fact em{ font-style: italic; color: var(--accent); }
.bento-fact small{ font-size: 50%; color: var(--accent); margin-left: 4px; }
.bento-sub{
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.bento-cell .bento-icon{
  width: 32px; height: 32px;
  margin-bottom: var(--s-3);
  color: var(--accent-2);
}
.bento-cell.dark .bento-icon{ color: var(--accent); }

/* span widths */
.span-2{ grid-column: span 2; }
.span-3{ grid-column: span 3; }
.span-4{ grid-column: span 4; }
.span-6{ grid-column: span 6; }
.row-2{ grid-row: span 2; }

/* ===== 3-FACTORY MERGER STORY ===== */
.factories{
  background: var(--bone);
  padding: var(--s-10) 0;
  position: relative;
  overflow: hidden;
}
.factories::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(201,168,118,.08), transparent 60%);
}
.factories .container-wide{ position: relative; }

.factories-head{
  text-align: center;
  max-width: 780px;
  margin: 0 auto var(--s-9);
}
.factories-head h2{
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-top: var(--s-4);
  margin-bottom: var(--s-5);
}
.factories-head h2 em{ font-style: italic; color: var(--accent-2); }
.factories-head .lede{ margin: 0 auto; }

.merger-diagram{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-6);
  align-items: center;
  margin-bottom: var(--s-8);
  position: relative;
}

.factories-list{
  display: grid;
  gap: var(--s-3);
}
.factory-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-6);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: center;
  transition: all .3s;
  position: relative;
}
.factory-card::after{
  content: "";
  position: absolute;
  right: -28px;
  top: 50%;
  width: 28px;
  height: 1px;
  background: var(--accent);
  opacity: .4;
  transform: translateY(-50%);
}
.factory-card:hover{ border-color: var(--accent); transform: translateX(4px); }
.factory-card .fac-year{
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--accent-2);
  line-height: 1;
  font-style: italic;
}
.factory-card .fac-name{
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--onyx);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.factory-card .fac-spec{
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.4;
}
.factory-card .fac-loc{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  text-align: right;
}

.merger-arrow{
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  color: var(--accent-2);
}
.merger-arrow .arrow-line{
  width: 1px;
  height: 80px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
}
.merger-arrow .arrow-label{
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-2);
  text-align: center;
  line-height: 1.3;
}
.merger-arrow svg{
  width: 32px;
  height: 32px;
  color: var(--accent);
}

.merger-result{
  background: var(--onyx);
  color: var(--bone);
  border-radius: var(--radius-lg);
  padding: var(--s-7);
  position: relative;
  overflow: hidden;
}
.merger-result::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(201,168,118,.18), transparent 50%);
}
.merger-result .res-label{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
  position: relative;
}
.merger-result .res-brand{
  font-family: var(--f-display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 400;
  color: var(--bone);
  line-height: 1;
  margin-bottom: var(--s-3);
  letter-spacing: -0.02em;
  position: relative;
}
.merger-result .res-brand em{ font-style: italic; color: var(--accent); }
.merger-result .res-since{
  font-family: var(--f-mono);
  font-size: 11px;
  color: rgba(250,247,242,.6);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--s-5);
  position: relative;
}
.merger-result .res-stats{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.1);
  position: relative;
}
.merger-result .res-stat .num{
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}
.merger-result .res-stat .num small{ font-size: 50%; }
.merger-result .res-stat .lab{
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250,247,242,.55);
  line-height: 1.4;
}

/* ===== SML PARTNERSHIP CARD ===== */
.partnership{
  background: var(--pearl);
  padding: var(--s-10) 0;
}
.partnership-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-8);
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.partnership-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--onyx) 0%, var(--onyx) 50%, var(--accent) 50%, var(--accent) 100%);
}
.partnership-grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-7);
  align-items: stretch;
  margin-bottom: var(--s-7);
}
.partner-side{
  padding: var(--s-5) 0;
}
.partner-side .role{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: var(--s-3);
}
.partner-side .name{
  font-family: var(--f-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  color: var(--onyx);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 6px;
}
.partner-side .name strong{ font-weight: 500; }
.partner-side .full{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: var(--s-4);
}
.partner-side .full .listed{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 2px 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--accent-2);
  text-transform: uppercase;
  margin-left: 8px;
}
.partner-side .meta{
  display: grid;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink);
  letter-spacing: .03em;
}
.partner-side .meta li{
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
}
.partner-side .meta li::before{
  content: "";
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}
.partner-divider{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  position: relative;
}
.partner-divider .line{
  width: 1px;
  height: 100%;
  background: var(--line);
  position: absolute;
  top: 0;
}
.partner-divider .x-mark{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--accent-2);
  font-weight: 300;
  font-style: italic;
}
.partnership-quote{
  border-top: 1px solid var(--line);
  padding-top: var(--s-6);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  max-width: 70ch;
}
.partnership-quote cite{
  display: block;
  margin-top: var(--s-3);
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
.partnership-cta{
  margin-top: var(--s-6);
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* ===== SECTION INTROS — SHORTER ===== */
.section-intro{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-7);
  align-items: end;
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.section-intro .label{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-2);
  align-self: end;
}
.section-intro h2{
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
}
.section-intro h2 em{ font-style: italic; color: var(--accent-2); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px){
  .hero-light-grid{ grid-template-columns: 1fr; gap: var(--s-7); }
  .merger-diagram{ grid-template-columns: 1fr; gap: var(--s-5); }
  .factory-card::after{ display: none; }
  .merger-arrow{ width: 100%; flex-direction: row; }
  .merger-arrow .arrow-line{ width: 80px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
  .partnership-grid{ grid-template-columns: 1fr; gap: var(--s-4); }
  .partner-divider{ width: 100%; height: 60px; }
  .partner-divider .line{ width: 100%; height: 1px; top: 50%; }
  .bento{ grid-template-columns: repeat(2, 1fr); }
  .span-3, .span-4, .span-6{ grid-column: span 2; }
  .section-intro{ grid-template-columns: 1fr; gap: var(--s-3); }
}
@media (max-width: 720px){
  .factory-card{ grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4); }
  .factory-card .fac-loc{ display: none; }
  .partnership-card{ padding: var(--s-5); }
  .merger-result{ padding: var(--s-5); }
  .merger-result .res-stats{ grid-template-columns: 1fr; gap: var(--s-3); }
  .bento{ grid-template-columns: 1fr; }
  .span-2, .span-3, .span-4, .span-6{ grid-column: span 1; }
  .row-2{ grid-row: span 1; }
  .hero-light h1{ max-width: none; }
}