/* ATELIA · DESIGN SYSTEM v3.0
   the trust layer for fashion
   ===================================================== */

:root{
  --black:#0a0a0a;
  --ink:#111111;
  --ink-2:#1c1c1c;
  --white:#ffffff;
  --ivory:#faf7f2;
  --ivory-2:#f4f0e8;
  --warm:#ede7db;
  --burgundy:#7a0019;
  --burgundy-deep:#5e0018;
  --burgundy-soft:#d99fab;
  --charcoal:#2a2a2a;
  --text:#1f1f1f;
  --text-mute:#5e5e5e;
  --text-faint:#9a9a9a;
  --line:#e8e3d8;
  --line-soft:#f0ece2;
  --bg-soft:#fafaf8;
  --bg-paper:#f6f3ec;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-elegant: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.25s;
  --t-base: 0.5s;
  --t-slow: 0.9s;
  --t-cinematic: 1.4s;

  --pad-section: 180px;
  --pad-section-sm: 120px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
  font-weight:400;
  color:var(--text);
  background:var(--white);
  line-height:1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  letter-spacing: -0.005em;
}

.serif{
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--black);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  color: var(--black);
  letter-spacing: -0.022em;
  line-height: 1.12;
}
h1{line-height:1.05; letter-spacing:-0.028em;}
h2{line-height:1.1; letter-spacing:-0.024em;}
h3{line-height:1.18; letter-spacing:-0.018em;}
h4{line-height:1.25; letter-spacing:-0.012em;}

a{color:inherit; text-decoration:none; transition:color var(--t-fast) var(--ease-soft);}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--burgundy); color:#fff;}

/* layout ----- */
.wrap{max-width:1320px; margin:0 auto; padding:0 64px;}
.wrap-narrow{max-width:1040px; margin:0 auto; padding:0 64px;}
.wrap-tight{max-width:880px; margin:0 auto; padding:0 64px;}
.section{padding:var(--pad-section) 0; position:relative;}
.section.tight{padding:var(--pad-section-sm) 0;}

/* GRADIENT BACKGROUND VARIANTS — for fluid colour flow between sections */
.bg-white{background: var(--white);}
.bg-ivory{background: var(--ivory);}
.bg-warm{background: var(--ivory-2);}
.bg-paper{background: var(--bg-paper);}
.bg-black{background: var(--black); color: var(--white);}
.bg-gradient-down{background: linear-gradient(180deg, var(--white) 0%, var(--ivory) 100%);}
.bg-gradient-up{background: linear-gradient(180deg, var(--ivory) 0%, var(--white) 100%);}
.bg-gradient-warm{background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 100%);}
.bg-gradient-to-black{background: linear-gradient(180deg, var(--ivory) 0%, var(--black) 100%); color: var(--white);}
.bg-gradient-from-black{background: linear-gradient(180deg, var(--black) 0%, var(--ivory) 100%);}

/* eyebrow / labels ----- */
.eyebrow{
  font-size:11px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--burgundy);
  margin-bottom:28px;
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:24px;
  height:1px;
  background:var(--burgundy);
}
.eyebrow.light{color:var(--burgundy-soft);}
.eyebrow.light::before{background:var(--burgundy-soft);}
.eyebrow.center{justify-content:center;}
.eyebrow.no-line::before{display:none;}

.muted{color:var(--text-mute);}
.accent{color:var(--burgundy);}

/* typography utilities ----- */
.h-display{
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(52px, 6.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.024em;
  color: var(--black);
}
.h-1{
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--black);
}
.h-2{
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 48px);
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--black);
}
.h-3{
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--black);
}
.h-4{
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.008em;
  line-height: 1.35;
  color: var(--black);
}

.lede{
  font-size: 19px;
  color: var(--text-mute);
  line-height: 1.65;
  font-weight: 400;
  /* max-width removed — applied per-context. Default cap for any orphan use: */
  max-width: 720px;
}
.lede.lede-centered{margin-left:auto;margin-right:auto;text-align:center}
.lede.lede-wide{max-width:820px}
.body-lg{font-size: 17px; line-height: 1.7; color: var(--text);}
.body-sm{font-size: 14px; color: var(--text-mute); line-height: 1.6;}
.caption{
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}

/* buttons ----- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: "Inter", sans-serif;
  font-weight:500;
  font-size:14px;
  padding:15px 28px;
  background:var(--black);
  color:var(--white);
  border:1px solid var(--black);
  border-radius: 999px;
  transition: all var(--t-fast) var(--ease-soft);
  cursor:pointer;
  white-space: nowrap;
}
.btn:hover{
  background:var(--burgundy);
  border-color:var(--burgundy);
  color:var(--white);
  transform: translateY(-1px);
}
.btn.ghost{background:transparent; color:var(--black);}
.btn.ghost:hover{background:var(--black); color:var(--white); border-color:var(--black);}
.btn.ghost-light{background:transparent; color:var(--white); border-color:rgba(255,255,255,0.35);}
.btn.ghost-light:hover{background:var(--white); color:var(--black); border-color:var(--white);}
.btn.large{padding:18px 34px; font-size:15px;}
.btn .arrow{
  transition: transform var(--t-fast) var(--ease-soft);
  display:inline-block;
  font-size: 16px;
  line-height: 1;
}
.btn:hover .arrow{transform: translateX(4px);}

.btn-text{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size:14px;
  font-weight:500;
  color:var(--black);
  padding:6px 0;
  border-bottom: 1px solid var(--black);
  transition: all var(--t-fast) var(--ease-soft);
}
.btn-text:hover{color:var(--burgundy); border-color:var(--burgundy); gap:12px;}
.btn-text.light{color:var(--white); border-color:rgba(255,255,255,0.5);}
.btn-text.light:hover{color:var(--burgundy-soft); border-color:var(--burgundy-soft);}

/* nav ----- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease-soft), background var(--t-base) var(--ease-soft);
}
.nav.scrolled{border-bottom-color: var(--line);}
.nav.theme-dark{background: rgba(10,10,10,0.8);}
.nav.theme-dark.scrolled{border-bottom-color: rgba(255,255,255,0.06);}

.nav-inner{
  max-width:1320px; margin:0 auto;
  padding: 22px 64px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 36px;
  transition: padding var(--t-base) var(--ease-soft);
}
.nav.scrolled .nav-inner{padding: 14px 64px;}

.logo{
  display:inline-flex; align-items:center;
  position:relative;
}
.logo img{
  height: 28px; width:auto; display:block;
  transition: opacity var(--t-base) var(--ease-soft), height var(--t-base) var(--ease-soft);
}
.nav.scrolled .logo img{ height: 24px; }
.logo .logo-light{display:none;}
.nav.theme-dark .logo .logo-dark{display:none;}
.nav.theme-dark .logo .logo-light{display:block;}

.nav-links{display:flex; gap:32px; align-items:center;}
.nav-links a{
  font-size:14px;
  color:var(--text);
  font-weight:400;
  position:relative;
  padding:6px 0;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--burgundy);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.nav-links a:hover{color:var(--burgundy);}
.nav-links a:hover::after{transform: scaleX(1);}
.nav-links a.active{color:var(--burgundy);}
.nav-links a.active::after{transform: scaleX(1);}

.nav.theme-dark .nav-links a{color: rgba(255,255,255,0.88);}
.nav.theme-dark .nav-links a:hover{color: var(--burgundy-soft);}
.nav.theme-dark .nav-links a::after{background: var(--burgundy-soft);}
.nav.theme-dark .nav-links a.active{color: var(--burgundy-soft);}

.nav-cta-group{display:flex; align-items:center; gap:18px;}

.nav-burger{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none;}
.nav-burger span{display:block; width:22px; height:1px; background:var(--black); transition: all var(--t-fast);}
.nav.theme-dark .nav-burger span{background:var(--white);}

.mobile-nav{
  position:fixed; top:0; right:0; bottom:0; width:340px; max-width:90vw;
  height:100vh;
  height:100dvh;
  background:var(--white); z-index:199;
  padding:96px 32px 32px;
  transform: translateX(100%);
  transition: transform 0.28s var(--ease-out);
  will-change: transform;
  box-shadow: -30px 0 80px -40px rgba(0,0,0,0.2);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-nav.open{ transform: translateX(0); }
.mobile-nav a{
  display:block;
  font-size:18px;
  color:var(--black);
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-weight: 400;
}
.mobile-nav a:hover{color:var(--burgundy);}

/* product card v3 ----- */
.product-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.6s var(--ease-elegant), box-shadow 0.6s var(--ease-elegant), border-color 0.6s var(--ease-elegant);
  display: flex;
  flex-direction: column;
}
.product-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 70px -36px rgba(0,0,0,0.18);
  border-color: #d6d0c0;
}
.product-card .img-frame{
  aspect-ratio: 4/5;
  background: var(--ivory-2);
  position: relative;
  overflow: hidden;
}
.product-card .img-frame img,
.product-card .img-frame .img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 1.4s var(--ease-elegant);
}
.product-card:hover .img-frame img,
.product-card:hover .img-frame .img{transform: scale(1.05);}
.product-card .body{
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-card .brand-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.product-card .brand{
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}
.product-card .score{
  font-size: 13px;
  font-weight: 600;
  color: var(--burgundy);
}
.product-card .name{
  font-size: 16px;
  font-weight: 500;
  color: var(--black);
  line-height: 1.35;
  letter-spacing: -0.008em;
}

/* browser frame ----- */
.browser-frame{
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 50px 120px -40px rgba(0,0,0,0.2), 0 0 0 1px var(--line);
  overflow: hidden;
}
.browser-bar{
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.browser-dots{display:flex; gap:7px;}
.browser-dots span{width:11px; height:11px; border-radius:50%; background:#dadada;}
.browser-dots span:first-child{background:#e8c1c1;}
.browser-dots span:nth-child(2){background:#e8dabe;}
.browser-dots span:nth-child(3){background:#c8dec0;}
.browser-url{
  flex: 1;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-mute);
}
.browser-content{background: var(--white);}

/* phone frame ----- */
.phone-frame{
  width: 320px;
  background: #0a0a0a;
  border-radius: 42px;
  padding: 12px;
  box-shadow: 0 50px 120px -40px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.04);
  position: relative;
}
.phone-frame .notch{
  position:absolute; top:18px; left:50%;
  transform: translateX(-50%);
  width: 100px; height: 22px;
  background: #0a0a0a;
  border-radius: 14px;
  z-index: 3;
}
.phone-screen{
  background: var(--white);
  border-radius: 32px;
  overflow: hidden;
  position: relative;
}

/* chip / pill ----- */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 5px 11px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
  font-weight: 400;
}
.chip.accent{
  background: rgba(122,0,25,0.06);
  border-color: rgba(122,0,25,0.18);
  color: var(--burgundy);
}
.chip.dark{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
.chip.muted-warn{
  background: rgba(120,90,40,0.06);
  border-color: rgba(120,90,40,0.18);
  color: #8a6b2e;
}

/* dark section ----- */
.dark-section{background:var(--black); color:var(--white);}
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4{color:var(--white);}
.dark-section .muted{color:rgba(255,255,255,0.6);}
.dark-section .lede{color:rgba(255,255,255,0.72);}
.dark-section .caption{color:rgba(255,255,255,0.5);}

/* INFOGRAPHIC PATTERNS ===== */

/* stat-card: large editorial stat block */
.stat-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 40px 36px;
  position: relative;
  transition: transform 0.5s var(--ease-elegant), border-color 0.5s var(--ease-elegant);
}
.stat-card:hover{ transform: translateY(-4px); border-color: var(--burgundy); }
.stat-card .stat-num{
  font-family: "Playfair Display", Georgia, serif;
  font-size: 64px;
  font-weight: 500;
  color: var(--black);
  letter-spacing: -0.028em;
  line-height: 1;
}
.stat-card .stat-num .unit{ font-size: 28px; color: var(--text-mute); margin-left: 4px; }
.stat-card .stat-label{
  font-size: 14px; color: var(--text-mute); margin-top: 16px; line-height: 1.5;
}
.stat-card.dark{ background: var(--ink); border-color: rgba(255,255,255,0.1); }
.stat-card.dark .stat-num{ color: #fff; }
.stat-card.dark:hover{ border-color: var(--burgundy-soft); }
.stat-card.dark .stat-label{ color: rgba(255,255,255,0.65); }

/* fabric-bar: composition bar visualization */
.fabric-bar{
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  align-items: center;
  transition: transform 0.4s var(--ease-elegant), background 0.4s var(--ease-elegant);
}
.fabric-bar:hover{ transform: translateX(4px); background: var(--white); border: 1px solid var(--line); padding: 23px 27px; }
.fabric-bar .pct{
  font-size: 28px; font-weight: 500; color: var(--black);
  letter-spacing: -0.02em; line-height: 1;
}
.fabric-bar .mat-name{ font-weight: 500; color: var(--black); font-size: 15px; }
.fabric-bar .mat-impl{ font-size: 13px; color: var(--text-mute); margin-top: 4px; line-height: 1.5; }

/* connector-line: dotted/dashed editorial line */
.connector{
  height: 1px;
  background-image: linear-gradient(to right, var(--line) 50%, transparent 50%);
  background-size: 12px 1px;
}

/* image-frame: editorial framed image */
.editorial-image{
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: var(--ivory-2);
}
.editorial-image img{ width:100%; height: 100%; object-fit: cover; }
.editorial-image.tall{ aspect-ratio: 3/4; }
.editorial-image.wide{ aspect-ratio: 16/9; }
.editorial-image.square{ aspect-ratio: 1/1; }
.editorial-image.standard{ aspect-ratio: 3/2; }

/* number-pillar */
.num-pillar{
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 18px;
}
.num-pillar .pn{
  font-family: "Playfair Display", serif;
  font-size: 64px; font-weight: 500;
  color: var(--burgundy);
  letter-spacing: -0.024em; line-height: 1;
}

/* footer ----- */
footer{background:var(--white); padding:96px 0 48px; border-top:1px solid var(--line);}
.foot-top{
  display:grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  gap:56px;
  padding-bottom:72px;
  border-bottom:1px solid var(--line);
}
.foot-brand .logo img{height:96px;width:auto;margin-bottom:4px;}
.foot-brand .tag{
  font-size: 16px;
  color: var(--text);
  margin-top: 22px;
  line-height: 1.5;
  max-width: 320px;
}
.foot-brand .desc{
  font-size: 13px;
  color: var(--text-mute);
  margin-top: 14px;
  line-height: 1.65;
  max-width: 320px;
}
.foot-brand .company-line{
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 24px;
  line-height: 1.7;
  max-width: 320px;
}
.foot-col h5{
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 22px;
  font-weight: 500;
}
.foot-col ul{list-style:none; display:flex; flex-direction:column; gap:12px;}
.foot-col li a{
  font-size: 14px;
  color: var(--text);
  transition: color var(--t-fast);
}
.foot-col li a:hover{color: var(--burgundy);}
.foot-bottom{
  padding-top: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-faint);
  flex-wrap: wrap;
  gap: 20px;
}
.foot-bottom .meta{display:flex; gap:24px; flex-wrap:wrap;}
.foot-bottom .meta a:hover{color: var(--burgundy);}

/* forms ----- */
.form-field{margin-bottom:18px;}
.form-field label{
  font-size: 12px;
  color: var(--text-mute);
  display: block;
  margin-bottom: 8px;
  font-weight: 400;
}
.form-field label .req{ color: var(--burgundy); }
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--black);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  outline: none;
  transition: border-color var(--t-fast);
  border-radius: var(--radius-sm);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{border-color: var(--burgundy);}
.form-field input::placeholder{color: #b8b5af;}
.form-field input[aria-invalid="true"]{ border-color: var(--burgundy); }
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-checkbox{
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--text-mute); line-height: 1.55;
  cursor: pointer;
}
.form-checkbox input{ width: 16px; height: 16px; margin-top: 3px; accent-color: var(--burgundy); flex-shrink: 0; }
.form-error{
  font-size: 12px; color: var(--burgundy); margin-top: 6px;
  min-height: 16px;
}
.form-success{
  padding: 32px;
  background: rgba(122,0,25,0.04);
  border: 1px solid rgba(122,0,25,0.2);
  border-radius: 10px;
  text-align: center;
}
.form-success .check{
  width: 48px; height: 48px;
  border-radius: 50%; background: var(--burgundy);
  color: #fff; display:inline-flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 16px;
}
.form-success h4{ font-size: 20px; margin-bottom: 8px; }
.form-success p{ font-size: 14px; color: var(--text-mute); }

.dark-section .form-field input,
.dark-section .form-field select,
.dark-section .form-field textarea{
  border-color: rgba(255,255,255,0.2);
  color: #fff;
  background: rgba(255,255,255,0.04);
}
.dark-section .form-field label{color: rgba(255,255,255,0.6);}
.dark-section .form-field input::placeholder{color: rgba(255,255,255,0.3);}
.dark-section .form-field input:focus{border-color: var(--burgundy-soft);}

/* REVEAL ANIMATIONS — enhanced ----- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-elegant), transform 1s var(--ease-elegant);
}
.reveal.in{opacity: 1; transform: none;}
.reveal.delay-1{transition-delay: 0.08s;}
.reveal.delay-2{transition-delay: 0.16s;}
.reveal.delay-3{transition-delay: 0.24s;}
.reveal.delay-4{transition-delay: 0.32s;}

/* fade left/right */
.reveal-left{
  opacity: 0; transform: translateX(-24px);
  transition: opacity 1s var(--ease-elegant), transform 1s var(--ease-elegant);
}
.reveal-left.in{opacity: 1; transform: none;}
.reveal-right{
  opacity: 0; transform: translateX(24px);
  transition: opacity 1s var(--ease-elegant), transform 1s var(--ease-elegant);
}
.reveal-right.in{opacity: 1; transform: none;}

/* scale-in */
.reveal-scale{
  opacity: 0; transform: scale(0.96);
  transition: opacity 1.1s var(--ease-elegant), transform 1.1s var(--ease-elegant);
}
.reveal-scale.in{opacity: 1; transform: scale(1);}

.reveal-stagger > *{
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.9s var(--ease-elegant), transform 0.9s var(--ease-elegant);
}
.reveal-stagger.in > *{opacity: 1; transform: none;}
.reveal-stagger.in > *:nth-child(1){transition-delay: 0.05s;}
.reveal-stagger.in > *:nth-child(2){transition-delay: 0.13s;}
.reveal-stagger.in > *:nth-child(3){transition-delay: 0.21s;}
.reveal-stagger.in > *:nth-child(4){transition-delay: 0.29s;}
.reveal-stagger.in > *:nth-child(5){transition-delay: 0.37s;}
.reveal-stagger.in > *:nth-child(6){transition-delay: 0.45s;}
.reveal-stagger.in > *:nth-child(7){transition-delay: 0.53s;}
.reveal-stagger.in > *:nth-child(8){transition-delay: 0.61s;}

/* image clip-path reveal — masked editorial unveiling */
.img-reveal{position: relative; overflow: hidden;}
.img-reveal img,
.img-reveal .img{
  transform: scale(1.08);
  transition: transform 1.8s var(--ease-elegant);
}
.img-reveal::before{
  content:""; position:absolute; inset:0;
  background: var(--ivory-2); z-index:2;
  transform: scaleX(1); transform-origin: right;
  transition: transform 1.3s var(--ease-elegant);
}
.img-reveal.in::before{transform: scaleX(0);}
.img-reveal.in img,
.img-reveal.in .img{transform: scale(1);}

/* slow zoom for hero images */
.slow-zoom{
  animation: slowZoom 14s var(--ease-elegant) infinite alternate;
}
@keyframes slowZoom{
  from{ transform: scale(1.0); }
  to{ transform: scale(1.06); }
}

/* counter */
.counter{font-variant-numeric: tabular-nums;}

/* word-by-word heading reveal */
.split-words .word{display:inline-block; overflow:hidden; vertical-align:bottom;}
.split-words .word > span{display:inline-block; transform: translateY(110%); transition: transform 1s var(--ease-elegant);}
.split-words.in .word > span{transform: translateY(0);}
.split-words.in .word:nth-child(1) > span{transition-delay: 0.00s;}
.split-words.in .word:nth-child(2) > span{transition-delay: 0.06s;}
.split-words.in .word:nth-child(3) > span{transition-delay: 0.12s;}
.split-words.in .word:nth-child(4) > span{transition-delay: 0.18s;}
.split-words.in .word:nth-child(5) > span{transition-delay: 0.24s;}
.split-words.in .word:nth-child(6) > span{transition-delay: 0.30s;}
.split-words.in .word:nth-child(7) > span{transition-delay: 0.36s;}
.split-words.in .word:nth-child(8) > span{transition-delay: 0.42s;}
.split-words.in .word:nth-child(9) > span{transition-delay: 0.48s;}
.split-words.in .word:nth-child(10) > span{transition-delay: 0.54s;}
.split-words.in .word:nth-child(n+11) > span{transition-delay: 0.60s;}

/* horizontal line draw */
.line-draw{
  width: 0; height: 1px; background: var(--burgundy);
  transition: width 1.4s var(--ease-elegant) 0.3s;
}
.reveal.in .line-draw, .line-draw.in{ width: 100%; }

/* page hero ----- */
.page-hero{
  padding: 200px 0 130px;
  background: var(--white);
}
.page-hero h1{
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(48px, 6vw, 84px);
  letter-spacing: -0.024em;
  font-weight: 500;
  line-height: 1.04;
  color: var(--black);
  max-width: 980px;
}
.page-hero .lede{
  font-size: 20px;
  color: var(--text-mute);
  max-width: 640px;
  margin-top: 36px;
  line-height: 1.6;
}
.page-hero .crumbs{
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 36px;
  font-weight: 500;
}
.page-hero .crumbs span{color: var(--burgundy);}

/* section-head pattern */
.section-head{max-width: 880px; margin-bottom: 96px;}
.section-head .h-1{margin-top: 0;}
.section-head .lede{margin-top: 28px;}

/* num-grid (philosophy / trust) */
.num-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap: 64px 80px;}
.num-grid .item .n{
  font-size: 36px; font-weight: 500; color: var(--burgundy);
  letter-spacing: -0.02em; line-height: 1;
}
.num-grid .item h3{margin-top: 20px;}
.num-grid .item p{
  font-size: 16px; color: var(--text-mute); margin-top: 14px;
  line-height: 1.7; max-width: 460px;
}

/* soft card */
.soft-card{
  background: var(--bg-soft); border-radius: 16px;
  padding: 48px 44px;
  transition: transform 0.5s var(--ease-elegant), background 0.5s var(--ease-elegant);
}
.soft-card:hover{ transform: translateY(-3px); background: var(--white); border: 1px solid var(--line); padding: 47px 43px; }
.soft-card .caption{margin-bottom: 14px;}
.soft-card h4{font-size: 21px; font-weight:500;}
.soft-card p{font-size:15px; color: var(--text-mute); line-height:1.7; margin-top:14px;}

/* feature-grid retained */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.feature-cell{
  padding: 48px 40px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  transition: background var(--t-base) var(--ease-soft);
}
.feature-cell:hover{background: var(--bg-soft);}
.feature-cell .n{
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy);
  display: block;
  margin-bottom: 18px;
  font-weight: 500;
}
.feature-cell h4{font-size: 21px; font-weight:500; line-height:1.3;}
.feature-cell p{font-size: 14px; color: var(--text-mute); margin-top:14px; line-height:1.65;}

/* facts-row */
.facts-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.fact{padding: 44px 32px; border-right:1px solid var(--line); position:relative;}
.fact:last-child{border-right:none;}
.fact .v{
  font-family: "Inter", sans-serif;
  font-size: 44px;
  font-weight: 500;
  color: var(--black);
  line-height: 1;
  letter-spacing: -0.02em;
}
.fact .v .small{font-size: 18px; color: var(--text-mute); font-weight: 400;}
.fact .l{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 16px;
  font-weight: 500;
}
.facts-row.dark{border-color: rgba(255,255,255,0.1);}
.facts-row.dark .fact{border-color: rgba(255,255,255,0.1);}
.facts-row.dark .fact .v{color: #fff;}
.facts-row.dark .fact .v .small{color: rgba(255,255,255,0.5);}
.facts-row.dark .fact .l{color: rgba(255,255,255,0.5);}

/* QR section ----- */
.qr-block{
  background: var(--ivory);
  border-radius: 20px;
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 64px;
  align-items: center;
}
.qr-block .qr-img{
  width: 280px; height: 280px;
  background: var(--white); border-radius: 12px;
  padding: 14px;
  box-shadow: 0 20px 50px -25px rgba(0,0,0,0.18);
}
.qr-block .qr-img img{ width: 100%; height: 100%; object-fit: contain; }

/* legal page reading layout */
.legal-prose{
  max-width: 760px; margin: 0 auto;
  font-size: 16px; line-height: 1.8; color: var(--text);
}
.legal-prose h2{
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px; font-weight: 500;
  letter-spacing: -0.014em;
  margin-top: 64px; margin-bottom: 20px;
}
.legal-prose h3{
  font-size: 20px; font-weight: 500;
  margin-top: 36px; margin-bottom: 12px;
}
.legal-prose p{ margin-bottom: 18px; }
.legal-prose ul, .legal-prose ol{
  margin-left: 24px; margin-bottom: 18px;
}
.legal-prose li{ margin-bottom: 10px; }
.legal-prose a{ color: var(--burgundy); border-bottom: 1px solid rgba(122,0,25,0.3); }
.legal-prose a:hover{ border-bottom-color: var(--burgundy); }
.legal-meta{
  font-size: 13px; color: var(--text-mute);
  margin-bottom: 48px; padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.legal-meta strong{ color: var(--text); font-weight: 500; }
.legal-toc{
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 56px;
}
.legal-toc h4{
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--burgundy); margin-bottom: 16px; font-weight: 500;
}
.legal-toc ol{ list-style: none; counter-reset: toc; margin-left: 0; }
.legal-toc ol li{ counter-increment: toc; padding: 6px 0; font-size: 14px; margin: 0; }
.legal-toc ol li::before{
  content: counter(toc, decimal-leading-zero);
  color: var(--burgundy); margin-right: 14px; font-weight: 500;
}
.legal-toc a{ color: var(--text); }
.legal-toc a:hover{ color: var(--burgundy); }

/* RESPONSIVE ===== */

/* page-specific responsive helpers — multi-column grids inside pages */
.grid-5{ display:grid; grid-template-columns: repeat(5,1fr); gap: 32px; }
.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 32px; }

@media (max-width:1280px){
  .wrap, .wrap-narrow, .wrap-tight{padding: 0 48px;}
  .nav-inner{padding: 20px 48px;}
  .nav.scrolled .nav-inner{padding: 14px 48px;}
  .grid-5{grid-template-columns: repeat(3,1fr);}
}
@media (max-width:1024px){
  .wrap, .wrap-narrow, .wrap-tight{padding: 0 40px;}
  .nav-inner{padding: 18px 40px;}
  .nav.scrolled .nav-inner{padding: 14px 40px;}
  .nav-links{ gap: 22px; }
  .nav-links a{ font-size: 13px; }
  .foot-top{grid-template-columns: 1fr 1fr 1fr; gap:40px;}
  .foot-brand{grid-column: 1/-1;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .facts-row{grid-template-columns:repeat(2,1fr);}
  .fact:nth-child(2){border-right:none;}
  .fact:nth-child(1),.fact:nth-child(2){border-bottom:1px solid var(--line);}
  .num-grid{ grid-template-columns: 1fr; gap: 48px; }
  .qr-block{grid-template-columns: 1fr; text-align: center; gap: 40px; padding: 48px;}
  .qr-block .qr-img{ margin: 0 auto; }
  /* multi-column collapses */
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"]{ grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns: repeat(2, 1fr) !important; }
  /* shoppers/brands/fabric/technology pillars (0.35fr 1fr 1fr) collapse */
  [style*="grid-template-columns: 0.35fr 1fr 1fr"]{ grid-template-columns: 1fr !important; gap: 32px !important; }
  /* shopper 4 moments (100px 1fr 1fr) collapse */
  [style*="grid-template-columns: 100px 1fr 1fr"]{ grid-template-columns: 60px 1fr !important; gap: 24px !important; }
  [style*="grid-template-columns: 100px 1fr 1fr"] > *:nth-child(3){ grid-column: 2 !important; margin-top: 12px; }
  /* main 2-col splits (1fr 1fr with image+text) collapse */
  [style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns: 1fr !important; }
  /* hero 2-col layouts */
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.05fr"],
  [style*="grid-template-columns: 1fr 1.15fr"],
  [style*="grid-template-columns: 1fr 1.3fr"],
  [style*="grid-template-columns: 0.95fr 1.05fr"],
  [style*="grid-template-columns: 0.85fr 1.15fr"]{ grid-template-columns: 1fr !important; gap: 48px !important; }
  /* 4-col data flow (1.2fr 1fr 1fr 1fr) collapse */
  [style*="grid-template-columns: 1.2fr 1fr 1fr 1fr"]{ grid-template-columns: repeat(2, 1fr) !important; }
  /* B2B dashboard 3-col collapse */
  [style*="grid-template-columns: 1.2fr 1fr 1fr"]{ grid-template-columns: 1fr !important; }
  /* sticky should disengage */
  [style*="position: sticky"]{ position: static !important; }
  /* recommendation row (80px 1fr auto) and care label row stay */
}
@media (max-width:768px){
  :root{ --pad-section: 96px; --pad-section-sm: 64px;}
  .wrap, .wrap-narrow, .wrap-tight{padding: 0 24px;}
  .nav-inner{padding: 16px 24px;}
  .nav.scrolled .nav-inner{padding: 12px 24px;}
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .form-row{grid-template-columns:1fr;}
  .foot-top{grid-template-columns: 1fr 1fr; gap: 40px 32px;}
  .foot-bottom{ flex-direction: column; align-items: flex-start; }
  .feature-grid{grid-template-columns:1fr;}
  .facts-row{grid-template-columns:1fr;}
  .fact{border-right:none; border-bottom:1px solid var(--line);}
  .fact:last-child{border-bottom:none;}
  .page-hero{padding: 140px 0 60px;}
  .product-card .body{ padding: 18px; }
  .stat-card{ padding: 32px 28px; }
  .stat-card .stat-num{ font-size: 44px; }
  .stat-card .stat-num .unit{ font-size: 22px; }
  .soft-card{ padding: 36px 28px; }
  .soft-card:hover{ padding: 35px 27px; }
  .browser-frame{ border-radius: 10px; }
  .phone-frame{ width: 280px; }
  .fabric-bar{ grid-template-columns: 60px 1fr auto; gap: 16px; padding: 20px 22px; }
  .fabric-bar .pct{ font-size: 22px; }
  .qr-block{ padding: 32px 24px; gap: 28px; }
  .qr-block .qr-img{ width: 220px; height: 220px; }
  /* aggressive single-col collapse for mobile */
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"]{ grid-template-columns: 1fr !important; gap: 16px !important; }
  /* recommendation row (80px 1fr auto) collapse */
  [style*="grid-template-columns: 80px 1fr auto"]{ grid-template-columns: 1fr !important; gap: 14px !important; }
  [style*="grid-template-columns: 80px 1fr auto"] > div:first-child{ width: 80px; aspect-ratio: 1; }
  /* shopper steps */
  [style*="grid-template-columns: 60px 1fr"]{ grid-template-columns: 1fr !important; }
  /* care label / interpretation 0.95fr 1.05fr */
  [style*="grid-template-columns: 0.95fr 1.05fr"]{ grid-template-columns: 1fr !important; gap: 40px !important; }
  /* B2B dashboard inner 4-col stats */
  [style*="grid-template-columns: repeat(4,1fr)"]{ grid-template-columns: repeat(2, 1fr) !important; }
  /* product page big numbers */
  [style*="font-size: 56px"][style*="color: var(--burgundy)"],
  [style*="font-size: 64px"][style*="color: var(--burgundy)"]{ font-size: 36px !important; }
  /* table mobile fix */
  table{ font-size: 13px !important; }
  /* hero h-display tightening */
  .h-display{ font-size: clamp(38px, 9vw, 56px); }
  /* dashboard padding */
  [class*="dashboard"], [style*="padding: 48px"]{ padding: 28px !important; }
  /* legal toc */
  .legal-toc{ padding: 22px 24px; }
}
@media (max-width:430px){
  .wrap, .wrap-narrow, .wrap-tight{padding: 0 18px;}
  .nav-inner{padding: 14px 18px;}
  .foot-top{grid-template-columns: 1fr; gap: 36px;}
  h1, .h-display{ font-size: clamp(36px, 9vw, 48px); }
  .h-1{ font-size: clamp(30px, 8vw, 40px); }
  .h-2{ font-size: clamp(26px, 7vw, 32px); }
  .lede{ font-size: 17px; }
  .btn.large{ padding: 16px 26px; font-size: 14px; }
}

/* ============================================================
   ITERATION 3 — HOMEPAGE B2B PIVOT — additions only
   ============================================================ */

/* Hero video container — uses video's native 4:3 ratio for now */
.hero-video-wrap{position:relative;background:#0d0d0d;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.12);aspect-ratio:4/3;width:100%;max-width:880px;margin-left:auto}
.hero-video-wrap video{width:100%;height:100%;display:block;object-fit:cover}
.hero-video-wrap .browser-bar{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(20,20,20,.92);display:flex;align-items:center;padding:0 16px;gap:8px;z-index:2;backdrop-filter:blur(8px)}
.hero-video-wrap .browser-bar .dot{width:10px;height:10px;border-radius:50%;background:#3a3a3a}
.hero-video-wrap .browser-bar .url{flex:1;text-align:center;font-family:var(--sans);font-size:12px;color:#888;letter-spacing:.02em}
.hero-video-wrap video{margin-top:0}

/* "One layer two experiences" split */
.layer-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
.layer-split .layer-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:48px 40px 40px;display:flex;flex-direction:column;transition:border-color .3s,transform .3s}
.layer-split .layer-card:hover{border-color:#d8d2c4;transform:translateY(-3px)}
.layer-split .layer-card .visual{margin:24px -8px 0;border-radius:12px;overflow:hidden;background:var(--ivory);aspect-ratio:4/3}
.layer-split .layer-card .visual img{width:100%;height:100%;object-fit:cover;display:block}

/* B2C->B2B Bridge — paired phone + browser visual */
.bridge-pair{display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:center;max-width:1180px;margin:0 auto}
.bridge-pair .phone-frame{background:#0d0d0d;border-radius:32px;padding:10px;box-shadow:0 30px 80px rgba(0,0,0,.18);aspect-ratio:1/2;max-width:380px}
.bridge-pair .phone-frame img{width:100%;height:100%;object-fit:cover;border-radius:24px;display:block}
.bridge-pair .browser-pane{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.08)}
.bridge-pair .browser-pane img{width:100%;height:auto;display:block}
.bridge-pair .visual-caption{font-family:var(--sans);font-size:12px;color:var(--text-mute);letter-spacing:.04em;text-transform:uppercase;margin-top:14px;text-align:center}

/* Pairing strip under the bridge */
.bridge-example{max-width:980px;margin:80px auto 0;padding:36px 44px;background:var(--ivory);border-radius:14px;display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:start}
.bridge-example .col-label{font-family:var(--sans);font-size:11px;color:var(--burgundy);letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding-top:4px;white-space:nowrap}
.bridge-example .col-text{font-size:16px;color:var(--text);line-height:1.65}
.bridge-example .row{display:contents}
.bridge-example .row + .row{margin-top:16px}

/* Material truth wide band */
.material-band{position:relative;width:100%;height:540px;overflow:hidden;border-radius:14px;margin-top:64px}
.material-band img{width:100%;height:100%;object-fit:cover}
.material-band-chips{margin-top:48px;display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.material-band-chips .chip{font-family:var(--sans);font-size:13px;letter-spacing:.04em;padding:11px 22px;background:var(--white);border:1px solid var(--line);border-radius:999px;color:var(--text)}
.material-band-chips .chip.accent{background:var(--burgundy);color:#fff;border-color:var(--burgundy)}

/* Fabric two-column visual */
.fabric-twoup{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch;margin-top:64px}
.fabric-twoup .fc-card{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.fabric-twoup .fc-card img{width:100%;height:auto;display:block}
.fabric-twoup .fc-caption{padding:20px 24px;font-family:var(--sans);font-size:13px;color:var(--text-mute);border-top:1px solid var(--line);background:var(--white);text-align:center;letter-spacing:.03em}

/* Fabric insight chips list */
.fabric-insights{margin-top:80px;max-width:880px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;gap:14px}
.fabric-insights .insight{padding:18px 26px;background:var(--ivory);border-radius:10px;font-size:16px;color:var(--text);line-height:1.6;border-left:2px solid var(--burgundy)}

/* ============================================================
   RECOMMENDATIONS CAROUSEL (Section 9)
   ============================================================ */
.rec-carousel{position:relative;margin-top:72px}
.rec-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 4px 32px;scrollbar-width:none;-ms-overflow-style:none}
.rec-track::-webkit-scrollbar{display:none}
.rec-card{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start;background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.06);border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.rec-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.1)}
.rec-card img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}

/* Carousel controls */
.rec-controls{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:8px}
.rec-arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--text);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s}
.rec-arrow:hover{border-color:var(--black);background:var(--black);color:#fff}
.rec-arrow:disabled{opacity:.3;cursor:not-allowed}
.rec-arrow:disabled:hover{border-color:var(--line);background:var(--white);color:var(--text)}
.rec-dots{display:flex;gap:8px;align-items:center}
.rec-dots .dot{width:7px;height:7px;border-radius:50%;background:#d8d2c4;border:none;cursor:pointer;padding:0;transition:all .25s}
.rec-dots .dot.active{background:var(--burgundy);width:22px;border-radius:4px}

/* Carousel mobile: 1-up */
@media (max-width: 768px){
  .rec-card{flex:0 0 88%}
  .rec-controls{margin-top:24px}
}

/* AI-powered discovery section */
.ai-discovery{position:relative;background:#0d0d0d;color:var(--white);overflow:hidden}
.ai-discovery::before{content:"";position:absolute;inset:0;background-image:url("../assets/new-interior-arch.jpg");background-size:cover;background-position:center;opacity:.08;pointer-events:none}
.ai-discovery .wrap{position:relative;z-index:1}
.ai-discovery .eyebrow{color:#c08896}
.ai-discovery h2,.ai-discovery h3{color:var(--white)}
.ai-discovery .lede,.ai-discovery p{color:#c9c4ba}
.ai-discovery-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center;margin-top:72px}
.ai-discovery-features{display:flex;flex-direction:column;gap:48px}
.ai-discovery-features .feat h3{font-family:var(--serif);font-size:24px;font-weight:500;margin-bottom:12px;color:var(--white)}
.ai-discovery-features .feat p{font-size:16px;color:#a09a8e;line-height:1.7;margin:0}
.ai-discovery-visual{background:transparent;border-radius:18px;overflow:hidden}
.ai-discovery-visual img{width:100%;height:auto;display:block;border-radius:18px}
.ai-discovery .closing{margin-top:80px;text-align:center;font-family:var(--serif);font-size:22px;color:#e8e3da;line-height:1.55;max-width:760px;margin-left:auto;margin-right:auto;font-style:normal}

/* Responsive */
@media (max-width: 1024px){
  .layer-split,.fabric-twoup{grid-template-columns:1fr;gap:40px}
  .bridge-pair{grid-template-columns:1fr;gap:48px}
  .bridge-pair .phone-frame{max-width:300px;margin:0 auto}
  .ai-discovery-grid{grid-template-columns:1fr;gap:56px}
  .material-band{height:380px}
  .hero-video-wrap{max-width:100%;margin:32px auto 0}
}
@media (max-width: 768px){
  .material-band{height:280px}
  .material-band-chips{gap:12px}
  .material-band-chips .chip{font-size:12px;padding:9px 16px}
  .bridge-example{grid-template-columns:1fr;gap:8px;padding:28px 24px}
  .bridge-example .col-label{padding-top:0}
}

/* Button variants for ITERATION 3 hero + final CTA */
.btn-ghost{background:transparent;color:var(--black);border:1px solid var(--black);padding:14px 28px;border-radius:999px;font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.01em;text-decoration:none;display:inline-block;transition:all .25s}
.btn-ghost:hover{background:var(--black);color:var(--white)}
.btn-light{background:var(--white);color:var(--black);border:1px solid var(--white);padding:14px 32px;border-radius:999px;font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.01em;text-decoration:none;display:inline-block;transition:all .25s}
.btn-light:hover{background:transparent;color:var(--white);border-color:var(--white)}
.btn-ghost-light{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.4);padding:14px 28px;border-radius:999px;font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.01em;text-decoration:none;display:inline-block;transition:all .25s}
.btn-ghost-light:hover{background:var(--white);color:var(--black);border-color:var(--white)}

/* ============================================================
   ITERATION 3.1 — Alignment fixes (5-fix pass)
   ============================================================ */

/* FIX 2: When the eyebrow lives inside a text-align:center block,
   center its inline-flex assembly so the ::before decoration sits
   left of a centered headline rather than pulling visual weight off. */
[style*="text-align:center"] .eyebrow,
[style*="text-align: center"] .eyebrow{
  justify-content: center;
}
/* Also handle the case where .eyebrow is inside any centered wrap
   without inline style (defensive) */
.section-center .eyebrow{justify-content:center}

/* FIX 3: Headlines inside centered wraps get explicit center alignment
   so negative letter-spacing doesn't visually drift them. */
[style*="text-align:center"] > .h-display,
[style*="text-align: center"] > .h-display,
[style*="text-align:center"] > .h-2,
[style*="text-align: center"] > .h-2,
[style*="text-align:center"] > .h-3,
[style*="text-align: center"] > .h-3{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

/* FIX 4: Hero helper line cap so it never exceeds the lede width.
   Applied via class so we can re-use the same width budget cleanly. */
.hero-helper{
  max-width: 620px;
  /* No auto-margin \u2014 hero column is left-aligned */
}

/* FIX 5: Wide headline variant for long-form copy (Section 3 + 5) */
.h-2.h-2-wide,
.h-display.h-display-wide{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* FIX 1 supplemental: explicit utility for centered lede paragraphs
   already covered above; this is just a safety on long ledes */
.lede.lede-narrow{max-width:620px;margin-left:auto;margin-right:auto}

/* Section wrapper utility for consistent vertical rhythm in headers */
.section-header{text-align:center;margin-left:auto;margin-right:auto}
.section-header.w-820{max-width:820px}
.section-header.w-880{max-width:880px}
.section-header.w-920{max-width:920px}
.section-header.w-1100{max-width:1100px}

/* Hero column CTA + helper rhythm */
.hero-text-col{display:flex;flex-direction:column;align-items:flex-start;max-width:620px}
.hero-text-col .lede,
.hero-text-col .eyebrow,
.hero-text-col .h-display,
.hero-text-col p,
.hero-text-col .hero-helper{text-align:left;max-width:100%}

/* Material truth (S7) wide headline already needs centering */
.material-stance{font-family:var(--serif);font-size:24px;line-height:1.55;color:var(--text);max-width:760px;margin:40px auto 0;text-align:center}

/* Bridge example responsive align: keep label tight on desktop */
.bridge-example .row{align-items:start}

/* ============================================================
   ITERATION 3.2 — Hero centered, Section 5 video, Section 7 merged
   ============================================================ */

/* HERO: centered layout — text above, video below */
.hero-centered{
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-centered .eyebrow{justify-content:center}
.hero-centered .lede{text-align:center;margin-left:auto;margin-right:auto}

/* Hero video section — sits below hero text with generous gap */
.hero-video-section{
  margin-top: 88px;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* 16:9 hero video container */
.hero-video-wrap-16x9{
  position: relative;
  background: #0d0d0d;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.18);
  aspect-ratio: 16/9;
  width: 100%;
}
.hero-video-wrap-16x9 video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.hero-video-wrap-16x9 .browser-bar{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 36px;
  background: rgba(20,20,20,.92);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  z-index: 2;
  backdrop-filter: blur(8px);
}
.hero-video-wrap-16x9 .browser-bar .dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3a3a3a;
}
.hero-video-wrap-16x9 .browser-bar .url{
  flex: 1;
  text-align: center;
  font-family: var(--sans);
  font-size: 12px;
  color: #888;
  letter-spacing: .02em;
}

/* SECTION 5 phone-frame video (replaces phone-frame for static image) */
.bridge-pair .phone-frame-video{
  background: #0d0d0d;
  border-radius: 32px;
  padding: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
  aspect-ratio: 9/16;
  max-width: 380px;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.bridge-pair .phone-frame-video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

/* SECTION 7 new layout: image + text grid */
.material-section-grid{
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 88px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}
.material-section-image{
  border-radius: 14px;
  overflow: hidden;
  background: var(--ivory);
}
.material-section-image img{
  width: 100%;
  height: auto;
  display: block;
}
.material-section-text{
  /* nothing fancy — flow as is */
}

/* SECTION 7 insights list (was Section 8 — now merged in) */
.material-insights{
  margin-top: 112px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.material-insights .insight{
  padding: 18px 26px;
  background: var(--ivory);
  border-radius: 10px;
  font-size: 16px;
  color: var(--text);
  line-height: 1.6;
  border-left: 2px solid var(--burgundy);
}

/* Responsive */
@media (max-width: 1024px){
  .material-section-grid{
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .material-section-image{
    max-width: 540px;
    margin: 0 auto;
  }
  .hero-video-section{
    margin-top: 64px;
  }
}
@media (max-width: 768px){
  .hero-centered{padding: 0 8px}
  .hero-video-section{margin-top:48px}
  .hero-video-wrap-16x9{border-radius:12px}
  .material-insights{margin-top:72px}
}


/* === ITER 8: Header CTA refinement (hover-reveal pattern) === */
.nav-cta-wrap{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.nav-cta-wrap .nav-primary-cta{
  /* inherits base .btn styling (filled, primary) */
  white-space: nowrap;
}
.nav-hover-link{
  /* hidden by default - revealed on hover or focus-within */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
  /* padding (instead of margin) so the hover target extends UP into the gap zone */
  padding-top: 16px;
  padding-bottom: 1px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-mute);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-soft),
              transform var(--t-base) var(--ease-soft),
              color var(--t-fast) var(--ease-soft),
              border-color var(--t-fast) var(--ease-soft);
}
.nav-cta-wrap:hover .nav-hover-link,
.nav-cta-wrap:focus-within .nav-hover-link,
.nav-hover-link:hover,
.nav-hover-link:focus{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-hover-link:hover,
.nav-hover-link:focus{
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
  outline: none;
}
/* Dark theme variant */
.nav.theme-dark .nav-hover-link{ color: rgba(255,255,255,0.65); }
.nav.theme-dark .nav-hover-link:hover,
.nav.theme-dark .nav-hover-link:focus{
  color: var(--burgundy-soft);
  border-bottom-color: var(--burgundy-soft);
}
/* Touch devices: rely on iOS/Android first-tap-reveals-hover behavior.
   The link stays invisible until the user taps the button area once.
   First tap reveals (browser fires :hover on tap), second tap follows the link.
   This matches the 'hidden by default' desktop feel per design intent. */
@media (hover: none) {
  .nav-cta-wrap:focus-within .nav-hover-link,
  .nav-cta-wrap:active .nav-hover-link{
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
}
/* Below 768px the entire desktop nav-cta-group is hidden (burger menu takes over) — the burger menu retains its full link set per design decision. */
/* End ITER 8 */

/* ============================================================
   MOBILE RENDERING FIXES — overrides for inline styles
   that don't shrink on small screens.
   ============================================================ */

@media (max-width: 1024px){
  /* Large inline grid gaps still feel airy on tablet — tighten when grids
     have already collapsed to 1 column via the rules higher up. */
  [style*="gap: 96px"]{ gap: 56px !important; }
  [style*="gap: 80px"]{ gap: 48px !important; }
  [style*="gap: 72px"]{ gap: 44px !important; }

  /* Layer-card on tablet: tighten interior padding */
  .layer-split .layer-card{ padding: 36px 28px 28px; }
}

@media (max-width: 768px){
  /* Section paddings hardcoded inline (180px/160px) bypass --pad-section.
     Force them back to the mobile section rhythm. */
  section[style*="padding: 180px 0"],
  section[style*="padding:180px 0"],
  section[style*="padding: 160px 0"],
  section[style*="padding:160px 0"]{ padding: 96px 0 !important; }

  /* Non-.page-hero headers with inline top/bottom padding */
  header[style*="padding: 140px 0 120px"],
  header[style*="padding: 160px 0 120px"],
  header[style*="padding: 140px 0 60px"]{ padding: 110px 0 56px !important; }

  /* Big inner-card paddings — keep readable margins on phones */
  [style*="padding: 56px 64px"],
  [style*="padding: 56px 52px"],
  [style*="padding: 56px 48px"],
  [style*="padding: 48px 44px"],
  [style*="padding: 48px 40px"],
  [style*="padding: 40px 44px"]{ padding: 28px 22px !important; }
  [style*="padding: 40px 36px"],
  [style*="padding: 40px 32px"],
  [style*="padding: 36px 40px"],
  [style*="padding: 36px 30px"],
  [style*="padding: 32px 28px"],
  [style*="padding: 32px 24px"]{ padding: 24px 20px !important; }
  [style*="padding: 28px 26px"],
  [style*="padding: 28px 22px"]{ padding: 22px 18px !important; }

  /* After grids collapse to 1 column, big inline gaps look like dead space */
  [style*="gap: 96px"]{ gap: 32px !important; }
  [style*="gap: 80px"]{ gap: 28px !important; }
  [style*="gap: 72px"]{ gap: 28px !important; }
  [style*="gap: 64px"]{ gap: 24px !important; }
  [style*="gap: 56px"]{ gap: 22px !important; }

  /* Section-header margin-bottom 96px/88px/80px wastes mobile real-estate */
  .section-head{ margin-bottom: 48px; }
  [style*="margin: 0 auto 96px"],
  [style*="margin: 0 auto 88px"],
  [style*="margin: 0 auto 80px"]{ margin-bottom: 44px !important; }

  /* Bridge phone-frame-video (9/16 aspect) is too tall on mobile — cap it */
  .bridge-pair .phone-frame-video{ max-width: 240px; margin: 0 auto; }

  /* Bridge example: vertical rhythm between label/text rows */
  .bridge-example .col-label{ margin-bottom: 4px; }
  .bridge-example .row + .row{ margin-top: 14px !important; }

  /* Layer-card interior on phones */
  .layer-split .layer-card{ padding: 28px 22px 22px; }
  .layer-split .layer-card .visual{ margin: 18px -4px 0; }

  /* AI discovery grid: tighter gap */
  .ai-discovery-grid{ gap: 40px; }

  /* Material insights: smaller text on mobile */
  .material-insights .insight{ font-size: 14px; padding: 14px 18px; }

  /* Recommendation card a touch wider on phones */
  .rec-card{ flex: 0 0 84%; }

  /* Hero centered video — already collapses; tighten margin */
  .hero-video-section{ margin-top: 36px; }

  /* Long eyebrow strings wrap on tiny screens */
  .eyebrow{ flex-wrap: wrap; row-gap: 6px; }

  /* Cards that visibly bleed: ensure container doesn't overflow at the round */
  .layer-split .layer-card,
  .bridge-pair .browser-pane,
  .browser-frame{ border-radius: 12px; }

  /* --- Mobile nav: logo + burger only; CTAs live in the drawer --- */
  .logo{ flex-shrink: 0; }
  .logo img{ flex-shrink: 0; }
  .nav-cta-group{ display: none; }
  .nav-burger{ padding: 6px; flex-shrink: 0; }

  /* Mobile drawer: promote primary CTA to a filled burgundy button,
     secondary CTA to a ghost variant. Targeted by href so no HTML edits. */
  .mobile-nav a[href="contact.html"]{
    display: block;
    background: var(--burgundy);
    color: var(--white);
    text-align: center;
    border-radius: 999px;
    padding: 12px 18px;
    margin-top: 18px;
    border-bottom: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
  }
  .mobile-nav a[href="contact.html"]:hover{
    background: var(--burgundy-deep);
    color: var(--white);
  }
  .mobile-nav a[href="waitlist.html"]{
    display: block;
    background: transparent;
    color: var(--burgundy);
    text-align: center;
    border: 1px solid var(--burgundy);
    border-radius: 999px;
    padding: 11px 18px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
  }
  .mobile-nav a[href="waitlist.html"]:hover{
    background: var(--burgundy);
    color: var(--white);
  }
  /* Drop the underline divider on the two converted buttons' neighbours */
  .mobile-nav a[href="contact.html"] + a,
  .mobile-nav a[href="waitlist.html"] + a{ border-top: none; }

  /* Tighter top padding on phones — nav bar is only ~56px tall here */
  .mobile-nav{ padding: 80px 28px 32px; }

  /* Footer logo: prominent on mobile */
  .foot-brand .logo img{ height: 120px; }

  /* Closing line in ai-discovery: smaller on mobile */
  .ai-discovery .closing{ font-size: 18px; margin-top: 56px; }
}

@media (max-width: 430px){
  /* Smallest phones: trim further */
  section[style*="padding: 180px 0"],
  section[style*="padding:180px 0"],
  section[style*="padding: 160px 0"],
  section[style*="padding:160px 0"]{ padding: 72px 0 !important; }

  header[style*="padding: 140px 0 120px"],
  header[style*="padding: 160px 0 120px"]{ padding: 96px 0 44px !important; }

  /* CTA buttons full-width-ish on tiny screens */
  .btn, .btn-ghost, .btn-light, .btn-ghost-light{ padding: 13px 22px; font-size: 13px; }

  /* Hero h-display already scales; ensure CTA row wraps cleanly */
  .hero-centered{ padding: 0 4px; }

  /* Layer card padding tightening */
  .layer-split .layer-card{ padding: 22px 18px 18px; }

  /* Fabric-bar in product page: ultra-tight */
  .fabric-bar{ padding: 16px 18px; grid-template-columns: 50px 1fr; gap: 14px; }
  .fabric-bar > *:nth-child(3){ grid-column: 1 / -1; }

  /* Footer columns 1-col on very narrow */
  .foot-top{ gap: 28px; }
}