/* =========================================================
   Iron Group — CANDIDATE EDITION v4
   Bigger numbers, bento stories, no marquee strips,
   pill-chip eyebrows, sharper typographic system.
   ========================================================= */

:root{
  --bg:           #080d18;
  --bg-2:         #0b1322;
  --section:      #0c1424;
  --section-2:    #121b30;
  --paper:        #f0ead8;
  --paper-2:      #ddd5c0;
  --paper-ink:    #1a1814;

  --line:         #1c243a;
  --line-d:       #2a3450;
  --line-l:       #c8bea8;

  --ink:          #ebeae4;
  --ink-2:        #989aa0;
  --ink-3:        #6b6e75;
  --ink-l:        #1a1814;
  --ink-l-2:      #5a5853;

  --accent:       #c8895c;
  --accent-2:     #e3a878;
  --accent-3:     #f0c79b;
  --accent-ink:   #8a5e3a;

  --sage:         #8fa897;
  --sage-2:       #a8bdb1;
  --ok:           #6cc387;
  --teal:         #4d8caa;

  --maxw-7:       1280px;
  --t:            cubic-bezier(.2,.7,.2,1);
  --t-ease:       cubic-bezier(.4,0,.2,1);
  --r-card:       24px;
  --r-card-l:     28px;
  --r-input:      12px;

  --nav-h:        58px;
  --nav-top:      14px;
}

*{ box-sizing: border-box }
html,body{ margin:0; padding:0 }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body{
  font-family:'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:16px; line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:'ss01','cv11';
  position:relative;
  min-height:100vh;
}

body::before{
  content:"";
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(80% 60% at 12% 0%, rgba(200,137,92,.10), transparent 60%),
    radial-gradient(70% 50% at 92% 30%, rgba(143,168,151,.06), transparent 60%),
    radial-gradient(60% 50% at 50% 110%, rgba(77,140,170,.05), transparent 60%);
}

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

/* =========================================================
   SCROLL PROGRESS BAR
   ========================================================= */
.scroll-progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width: var(--scroll, 0%);
  background: linear-gradient(90deg, transparent, var(--accent) 40%, var(--accent-2) 70%, var(--accent) 100%);
  z-index:200;
  transition: width .1s linear;
  pointer-events:none;
}

/* =========================================================
   CONTAINER
   ========================================================= */
.container{
  max-width: var(--maxw-7);
  margin:0 auto;
  padding: 0 24px;
  position:relative;
  z-index:2;
}
@media (min-width: 768px){ .container{ padding: 0 32px } }
@media (min-width: 1280px){ .container{ padding: 0 40px } }

/* =========================================================
   FLOATING PILL NAV
   ========================================================= */
.nav-shell{
  position: fixed;
  top: var(--nav-top);
  left: 0; right: 0;
  z-index: 100;
  pointer-events: none;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}
@media (min-width: 768px){ .nav-shell{ padding: 0 24px } }

.nav-pill{
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 6px 6px 18px;
  background: rgba(11, 19, 34, .72);
  border-radius: 999px;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  width: 100%;
  max-width: 1180px;
  height: var(--nav-h);
  box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.05) inset;
  position: relative;
  isolation: isolate;
}
.nav-pill::before{
  content:"";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.02) 35%, rgba(200,137,92,.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.brand{
  display: flex; align-items: center; gap: 9px;
  font-family:'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.025em;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-pill__sep{
  width: 1px; height: 22px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}

.nav-pill__links{
  display: flex; gap: 2px;
  flex: 1;
  justify-content: center;
}
.nav-pill__links a{
  position: relative;
  padding: 9px 16px;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: rgba(235,234,228,.7);
  border-radius: 999px;
  transition: color .25s var(--t), background .25s var(--t);
  white-space: nowrap;
}
.nav-pill__links a:hover{
  color: #fff;
  background: rgba(255,255,255,.05);
}
.nav-pill__links a.is-active{
  color: #fff;
  background: rgba(255,255,255,.07);
}
.nav-pill__links a.is-active::after{
  content: "";
  position: absolute;
  left: 50%; bottom: 4px;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--accent-2);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(227,168,120,.6);
}

.nav-pill__actions{
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.lang__btn{
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(235,234,228,.7);
  border-radius: 999px;
  display: flex; align-items: center; gap: 6px;
  transition: color .2s, background .2s;
}
.lang__btn:hover{ color: #fff; background: rgba(255,255,255,.06) }
.lang{ position: relative }
.lang__menu{
  position: absolute; top: calc(100% + 10px); right: 0;
  list-style: none; padding: 6px; margin: 0;
  background: rgba(11,19,34,.92);
  border: 1px solid var(--line);
  border-radius: 14px;
  min-width: 220px;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .15s var(--t), transform .15s var(--t);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
}
.lang.open .lang__menu{ opacity:1; transform:none; pointer-events:auto }
.lang__menu a{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-2);
  border-radius: 8px;
}
.lang__menu a:hover{ color: var(--ink); background: rgba(255,255,255,.05) }

.nav-pill__burger{
  display: none;
  width: 44px; height: 44px;
  border-radius: 999px;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-pill__burger span{
  width: 16px; height: 1.5px;
  background: var(--ink);
  display: block;
  transition: transform .25s var(--t), opacity .2s;
}
.nav-pill.is-open .nav-pill__burger span:nth-child(1){ transform: translateY(3px) rotate(45deg) }
.nav-pill.is-open .nav-pill__burger span:nth-child(2){ transform: translateY(-2.5px) rotate(-45deg) }

@media (max-width: 880px){
  .nav-pill{ gap: 0; padding: 6px 6px 6px 16px }
  .nav-pill__links, .nav-pill__sep{ display: none }
  .nav-pill__actions .btn-pill{ display: none }
  .nav-pill__actions{ margin-left: auto }
  .nav-pill__burger{ display: flex }
}

.nav-drawer{
  position: fixed;
  inset: calc(var(--nav-top) + var(--nav-h) + 8px) 16px auto 16px;
  z-index: 99;
  background: rgba(11,19,34,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 24px;
  padding: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .2s var(--t), transform .2s var(--t);
}
.nav-drawer.is-open{ display: block; opacity: 1; transform: none }
.nav-drawer ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px }
.nav-drawer a{
  display: block;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--ink-2);
  border-radius: 12px;
  transition: color .2s, background .2s;
}
.nav-drawer a:hover{ color: var(--ink); background: rgba(255,255,255,.05) }
.nav-drawer .btn{ width: 100%; margin-top: 8px }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  font-family:'Inter', sans-serif;
  white-space:nowrap;
  letter-spacing: -.005em;
  transition: transform .25s var(--t), background .25s var(--t), color .25s var(--t), border-color .25s var(--t), box-shadow .35s var(--t);
  cursor:pointer;
  position:relative;
}
.btn--primary{
  background: linear-gradient(180deg, var(--accent-2), var(--accent) 65%, var(--accent-ink));
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 8px 22px rgba(200,137,92,.22),
    0 18px 40px rgba(200,137,92,.16);
}
.btn--primary:hover{
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 12px 28px rgba(200,137,92,.32),
    0 22px 50px rgba(200,137,92,.22);
}
.btn--ghost{
  background: rgba(255,255,255,.04);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-2px);
}
.btn--ink{
  background: var(--ink);
  color: var(--bg);
}
.btn--ink:hover{ transform: translateY(-2px); opacity:.92 }
.btn--wide{ width:100%; padding: 16px 22px }
.btn-pill{ padding: 8px 14px; font-size: 12px }
.btn-pill .arrow{ font-size: 12px }
.arrow{ display:inline-block; transition: transform .2s var(--t) }
.btn:hover .arrow{ transform: translateX(4px) }

.link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:500;
  color:var(--ink);
  padding-bottom:3px;
  border-bottom:1px solid var(--accent);
}
.link:hover{ color:var(--accent-2) }
.section--paper .link{ color:var(--ink-l); border-bottom-color:var(--accent-ink) }
.section--paper .link:hover{ color:var(--accent-ink) }

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
.display{
  font-family:'Sora', 'Inter', sans-serif;
  font-weight:600;
  line-height:1.02;
  letter-spacing:-0.035em;
  margin:0;
}
.display--xxl{ font-size: clamp(50px, 9.5vw, 128px); line-height:.94 }
.display--xl { font-size: clamp(46px, 7.4vw, 112px) }
.display--l  { font-size: clamp(36px, 5.6vw, 92px) }
.display--m  { font-size: clamp(28px, 3.6vw, 54px) }
.display--cmp{ font-size: clamp(28px, 3.4vw, 50px); line-height:1.06; letter-spacing:-.03em }

.grad{
  background: linear-gradient(135deg, #ffffff 0%, var(--accent-3) 55%, var(--accent) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-right:.05em;
}
.section--paper .grad{
  background: linear-gradient(135deg, var(--ink-l) 0%, var(--accent-ink) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* =========================================================
   EYEBROW — pill chip
   ========================================================= */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: rgba(200,137,92,.08);
  border: 1px solid rgba(200,137,92,.20);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
  margin: 0 0 24px;
  line-height: 1;
}
.eyebrow::before{
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--accent-2);
}
.section--paper .eyebrow{
  background: rgba(138,94,58,.08);
  border-color: rgba(138,94,58,.22);
  color: var(--accent-ink);
}
.section--paper .eyebrow::before{ background: var(--accent-ink); box-shadow: 0 0 6px rgba(138,94,58,.5) }

/* =========================================================
   LEAD
   ========================================================= */
.lead{
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  max-width: 60ch;
  color: var(--ink-2);
  margin: 0;
  font-weight: 300;
}
.lead b{ color: var(--ink); font-weight: 500 }
.display + .lead{ margin-top: clamp(24px, 2.4vw, 40px) }

/* =========================================================
   PILL BADGE (in hero)
   ========================================================= */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(235,234,228,.85);
  font-weight: 500;
}
.pill svg{ width:13px; height:13px; color: var(--accent-2) }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding: calc(var(--nav-top) + var(--nav-h) + 40px) 0 56px;
  overflow:hidden;
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
@media (min-width: 768px){
  .hero{ padding: calc(var(--nav-top) + var(--nav-h) + 64px) 0 72px; min-height: 100vh }
}
.hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../media/01-hero/hero.png');
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 70%, transparent 100%);
  filter: brightness(.82) contrast(1.05) saturate(.85);
  will-change: transform;
}
.hero__bg::after{
  content:"";
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(0,0,0,0) 30%, rgba(8,13,24,.20) 100%),
    linear-gradient(180deg, rgba(8,13,24,.17) 0%, rgba(8,13,24,.06) 30%, rgba(8,13,24,.23) 100%);
}
.hero__inner{
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 1024px){
  .hero__grid{
    grid-template-columns: minmax(0, 1fr) clamp(300px, 28%, 360px) 5%;
    gap: 56px;
    align-items: center;
  }
}
.hero__left > * + *{ margin-top: 18px }
.hero__h1{
  font-family:'Sora', 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 0;
  color: #f4f1e6;
  font-size: clamp(42px, 7vw, 100px);
  filter: drop-shadow(0 4px 28px rgba(0,0,0,.55));
  max-width: 14ch;
}
.hero__left > .hero__lead{ margin-top: 38px }
.hero__lead{
  font-size: clamp(13px, 0.85vw, 14.5px);
  line-height: 1.6;
  color: rgba(235,234,228,.78);
  max-width: 440px;
  margin: 0;
  font-weight: 300;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.hero__cta{
  display: flex; flex-wrap: wrap;
  gap: 12px;
}
.hero__right{
  display: flex; flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}
.hero__right .glass{ min-width: 0 }
.hero__right .glass__inner{ min-width: 0 }

/* =========================================================
   GLASS CARD (hero stats)
   ========================================================= */
.glass{
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.06) 100%);
  border-radius: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  box-shadow:
    0 8px 24px rgba(0,0,0,.30),
    0 24px 60px rgba(0,0,0,.22);
}
.glass::before{
  content:"";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.04) 35%, rgba(200,137,92,.16) 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.glass__inner{ padding: 22px; position: relative; z-index: 1 }
@media (min-width: 640px){ .glass__inner{ padding: 24px } }

.glass-stat-head{
  display:flex; align-items:center; gap: 12px;
  margin-bottom: 18px;
}
.glass-stat-head__icon{
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(200,137,92,.12);
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(200,137,92,.20);
  flex-shrink: 0;
  color: var(--accent-3);
}
.glass-stat-head__icon svg{ width: 22px; height: 22px }
.glass-stat-head__num{
  font-family:'Sora', 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.glass-stat-head__lbl{
  font-size: 12px;
  color: rgba(235,234,228,.6);
  margin-top: 4px;
  letter-spacing: .02em;
}

.glass-progress{ margin-bottom: 16px }
.glass-progress__row{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
}
.glass-progress__row span:first-child{ color: rgba(235,234,228,.65); letter-spacing: .04em }
.glass-progress__row span:last-child{ color: var(--accent-3); font-weight: 500 }
.glass-progress__bar{
  height: 5px;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  overflow:hidden;
}
.glass-progress__fill{
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  width: 0;
  transition: width 1.4s var(--t-ease);
}
.glass.is-in .glass-progress__fill{ width: var(--w, 100%) }

.glass-divider{
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  margin: 14px 0;
}
.glass-stats{
  display: flex; align-items: center;
  gap: 4px;
  margin-bottom: 14px;
}
.glass-stat{
  flex: 1;
  text-align: center;
  padding: 6px 4px;
  border-radius: 10px;
  cursor: default;
  transition: background .25s var(--t), transform .25s var(--t);
}
.glass-stat:hover{
  background: rgba(255,255,255,.04);
  transform: translateY(-2px);
}
.glass-stat .num{
  font-family:'Sora', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.65));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.glass-stat .lbl{
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(235,234,228,.55);
  margin-top: 3px;
}
.glass-vsep{
  width: 1px; height: 32px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.18), transparent);
  margin: auto 0;
}

.chip-pill{
  display:inline-flex; align-items:center; gap: 6px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(235,234,228,.85);
  cursor: default;
  transition: transform .2s var(--t);
}
.chip-pill:hover{ transform: translateY(-1px) }
.chip-pill .dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
}
.chip-pill .dot--pulse{ animation: dot-pulse 2s ease-in-out infinite }
.chip-pill svg{ width: 11px; height: 11px; color: var(--accent-3) }
.glass-chips{ display:flex; flex-wrap:wrap; gap: 6px }
@keyframes dot-pulse{
  0%,100%{ opacity:1; transform: scale(1) }
  50%   { opacity:.5; transform: scale(.85) }
}

.glass-marquee{
  position:relative;
  overflow:hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
          mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.glass-marquee__title{
  font-family:'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(235,234,228,.55);
  margin: 0 0 12px;
}
.glass-marquee__track{
  display:flex;
  gap: 12px;
  width: max-content;
  animation: marq-scroll 26s linear infinite;
}
.glass-marquee__group{
  display:flex; gap: 12px; align-items:center;
  flex-shrink: 0;
  padding-right: 12px;
}
.country-pill{
  display:inline-flex; align-items:center; gap: 9px;
  padding: 8px 14px 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.country-pill .flag{ font-size: 17px; line-height: 1 }
.country-pill .meta{
  display: block;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(235,234,228,.45);
  font-weight: 400;
  margin-top: 1px;
}
@keyframes marq-scroll{
  from{ transform: translateX(0) }
  to  { transform: translateX(-50%) }
}
@media (prefers-reduced-motion: reduce){
  .glass-marquee__track{ animation:none }
}

/* =========================================================
   SECTION
   ========================================================= */
.section{
  background:var(--section);
  border-radius:var(--r-card);
  margin: 14px clamp(8px, 2vw, 24px);
  padding: clamp(40px, 4.5vw, 68px) 0 clamp(36px, 4vw, 60px);
  position:relative;
  overflow:hidden;
  z-index:2;
  isolation: isolate;
}
.section--paper{
  background:var(--paper);
  color:var(--ink-l);
}
.section--paper .lead{ color:var(--ink-l-2) }
.section--paper .lead b{ color:var(--ink-l) }

/* Side-by-side: text left, content right (used by #covered) */
.section--split .container{
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.4fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.section--split .section-head{
  grid-column: 1;
  grid-template-columns: 1fr;
  margin-bottom: 0;
  padding-right: 12px;
  position: relative;
}
.section--split .section-head__main{
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.section--split .pillars{
  grid-column: 2;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap: 12px;
}
.section--split .pillar:nth-child(1),
.section--split .pillar:nth-child(2),
.section--split .pillar:nth-child(3),
.section--split .pillar:nth-child(4){
  grid-column: span 1;
  grid-row: span 1;
  padding: 24px 22px 22px;
}
.section--split .pillar:nth-child(1) .pillar__icon{
  width: 42px; height: 42px;
  border-radius: 11px;
  margin-bottom: 26px;
}
.section--split .pillar:nth-child(1) .pillar__icon svg{ width: 22px; height: 22px }
.section--split .pillar:nth-child(1) .pillar__t{
  font-size: clamp(19px, 1.6vw, 24px);
  margin-bottom: 8px;
}
.section--split .pillar:nth-child(1) p{
  font-size: 14px;
  max-width: none;
}

.section-head__cta{
  margin-top: clamp(28px, 3vw, 40px);
  align-self: flex-start;
}

@media (max-width: 1024px){
  .section--split .container{
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .section--split .section-head{ grid-column: 1 }
  .section--split .pillars{
    grid-column: 1;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px){
  .section--split .pillars{ grid-template-columns: 1fr }
}

/* Centered layout (used by #process, #faq) */
.section--centered .section-head{
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
  align-items: center;
}
.section--centered .section-head__main{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0;
}
.section--centered .section-head__aside{
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: 0;
}
.section--centered .section-head__aside .lead{
  margin: 0 auto;
}

/* Process — centered single-column */
.section--centered .process{
  grid-template-columns: 1fr;
  gap: 40px;
}
.section--centered .process__pin{
  position: static;
  text-align: center;
  align-self: center;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.section--centered .process__counter{
  justify-content: center;
}
.section--centered .process__title{ text-align: center }
.section--centered .process__desc{
  margin: 0 auto;
  max-width: 48ch;
  text-align: center;
}
.section--centered .process__steps{
  max-width: 760px;
  margin: 0 auto;
}

/* FAQ — centered with narrower column */
.section--centered .faq{
  max-width: 880px;
  margin: 0 auto;
}

/* CTA strip below process steps */
.cta-strip{
  margin-top: clamp(36px, 4vw, 56px);
  text-align: center;
}
.cta-strip__hint{
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 14px;
}

/* Compact (used by #about, #contact) */
.section--compact{
  padding: clamp(32px, 3.4vw, 52px) 0 clamp(28px, 3vw, 44px);
}
.section--compact .section-head{
  margin-bottom: clamp(24px, 2.4vw, 36px);
  padding-top: clamp(32px, 3vw, 44px);
}

/* =========================================================
   SECTION HEAD — number is a corner decoration, not a column
   ========================================================= */
.section-head{
  position: relative;
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: 24px;
  align-items: end;
  margin-bottom: clamp(36px, 3.6vw, 56px);
  padding-top: clamp(40px, 4vw, 56px);
}
.section-head__num{
  position: absolute;
  top: 0;
  left: -.04em;
  font-family:'Sora', 'Inter', sans-serif;
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  user-select: none;
  pointer-events: none;
  opacity: .62;
}
.section-head__num .slash{
  font-size: 0.5em;
  font-weight: 300;
  color: var(--ink-3);
  margin-right: .1em;
  display: inline-block;
  transform: translateY(-.06em);
}
.section-head__num .num{
  background: linear-gradient(180deg, var(--accent-3) 0%, var(--accent) 60%, var(--accent-ink) 100%);
  background-size: 100% 220%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  display: inline-block;
  animation: numShine 8s var(--t-ease) infinite alternate;
  filter: drop-shadow(0 2px 10px rgba(200,137,92,.18));
}
@keyframes numShine{
  0%   { background-position: 0 0 }
  100% { background-position: 0 100% }
}
.section-head__num .num::before{
  content: attr(data-n);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 1px rgba(200,137,92,.16);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: transparent;
  pointer-events: none;
  transform: translate(.04em, .04em);
  filter: none;
}
.section--paper .section-head__num .num{
  background: linear-gradient(180deg, var(--accent-ink) 0%, #6f4a25 60%, #4d3318 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(138,94,58,.15));
}
.section--paper .section-head__num .slash{ color: var(--ink-l-2) }
.section--paper .section-head__num .num::before{ -webkit-text-stroke-color: rgba(138,94,58,.20) }

.section-head__main{ padding-bottom: 4px }
.section-head__aside{ padding-bottom: 8px }

@media (max-width: 1024px){
  .section-head{
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
    padding-top: clamp(48px, 9vw, 64px);
  }
  .section-head__num{
    font-size: clamp(34px, 7vw, 48px);
  }
  .section-head__main, .section-head__aside{ padding-bottom: 0 }
}

/* =========================================================
   OFFER (section 01)
   ========================================================= */
.offer{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items:start;
}
.offer__big{
  font-family:'Sora', 'Inter', sans-serif;
  font-size: clamp(56px, 8vw, 116px);
  line-height:.92;
  font-weight:700;
  letter-spacing:-0.045em;
  margin:0 0 14px;
  background: linear-gradient(180deg, var(--accent-3) 0%, var(--accent) 50%, var(--accent-ink) 110%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.offer__big sup{
  font-size:.4em; font-weight:500;
  vertical-align:0.7em; margin-left:6px;
}
.offer__label{
  font-size:14px; color:var(--ink-2);
  margin:0 0 22px;
  max-width: 38ch;
  line-height: 1.5;
}
.offer__rotator{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
  padding:7px 13px;
  border:1px solid var(--line-d);
  border-radius:999px;
  background: rgba(255,255,255,.02);
}
.offer__rotator-dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--ok);
  animation: dot-pulse 2s ease-in-out infinite;
}
.offer__facts{
  list-style:none; padding:0; margin:0;
  border-top:1px solid var(--line);
}
.offer__facts li{
  border-bottom:1px solid var(--line);
  padding: 18px 0;
  display:flex; justify-content:space-between; align-items:baseline;
  gap: 24px;
  font-size:14px;
}
.offer__facts li span{ color:var(--ink-2); font-weight:300 }
.offer__facts li b{
  color:var(--ink); font-weight:600;
  text-align:right;
  font-family:'Sora', 'Inter', sans-serif;
  letter-spacing:-0.015em;
  font-size: 14px;
}

/* =========================================================
   PILLARS (section 02) — asymmetric bento
   ========================================================= */
.pillars{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: 14px;
}
.pillar{
  position:relative;
  padding: 26px 24px 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,0) 100%);
  border: 1px solid var(--line);
  overflow:hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--t), border-color .3s var(--t), background .3s var(--t);
}
.pillar::after{
  content: "";
  position: absolute;
  right: -50px; top: -50px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200,137,92,.10), transparent 70%);
  opacity: 0;
  transition: opacity .35s var(--t);
  pointer-events: none;
}
.pillar:hover{
  transform: translateY(-4px);
  border-color: rgba(200,137,92,.35);
  background: linear-gradient(180deg, rgba(200,137,92,.05) 0%, rgba(200,137,92,0) 100%);
}
.pillar:hover::after{ opacity: 1 }

/* Bento layout */
.pillar:nth-child(1){
  grid-column: span 5;
  grid-row: span 2;
  padding: 34px 30px 30px;
}
.pillar:nth-child(2){ grid-column: span 7 }
.pillar:nth-child(3){ grid-column: span 4 }
.pillar:nth-child(4){ grid-column: span 3 }

.pillar__icon{
  width: 42px; height: 42px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 11px;
  background: rgba(200,137,92,.10);
  color: var(--accent-2);
  margin-bottom: 28px;
  border: 1px solid rgba(200,137,92,.16);
  flex-shrink: 0;
}
.pillar__icon svg{ width: 22px; height: 22px }

.pillar:nth-child(1) .pillar__icon{
  width: 54px; height: 54px;
  border-radius: 14px;
  margin-bottom: 40px;
}
.pillar:nth-child(1) .pillar__icon svg{ width: 28px; height: 28px }

.pillar__n{
  font-size: 11px;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 8px;
  margin-top: auto;
  order: 3;
}
.pillar__t{
  font-family:'Sora', 'Inter', sans-serif;
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 0 0 8px;
  order: 1;
}
.pillar:nth-child(1) .pillar__t{
  font-size: clamp(24px, 2.4vw, 34px);
  margin-bottom: 12px;
}
.pillar p{
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 300;
  margin: 0;
  order: 2;
}
.pillar:nth-child(1) p{
  font-size: 15px;
  max-width: 38ch;
}

/* =========================================================
   STORIES — bento (section 03 — merged voices+archive)
   ========================================================= */
.stories{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 100px;
  gap: 0;
  border-radius: 18px;
  overflow: hidden;
}
.stories__item{
  position: relative;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--section-2);
  border: 0;
  transition: transform .35s var(--t);
}
.stories__item:hover{
  z-index: 2;
}
.stories__item img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .8s var(--t);
}
.stories__item img[src*="story-02"]{ object-position: 50% 10%; }
.stories__item:hover img{ transform: scale(1.04) }

.stories__item--testi{
  grid-column: span 4;
  grid-row: span 5;
  display: flex; flex-direction: column;
}
.stories__item--testi .stories__media{
  flex: 1;
  position: relative;
  background: #000;
  overflow: hidden;
}
.stories__item--testi .stories__media img{ opacity: .85 }
.stories__item--testi:hover .stories__media img{ opacity: 1 }
.stories__item--testi .stories__body{
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
  background: rgba(11,19,34,.4);
}
.stories__quote{
  font-size: 14px; line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.stories__meta{
  display: flex; align-items: center; gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 11px;
}
.stories__flag{
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #1c2030;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.stories__who b{
  font-family:'Sora', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -.015em;
  color: var(--ink);
  display: block;
}
.stories__who span{
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--ink-2);
  display: block;
}
.stories__play{
  position: absolute;
  left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  transition: transform .25s var(--t);
}
.stories__play svg{ width: 16px; height: 16px; color: #fff; margin-left: 2px }
.stories__play:hover{ transform: translate(-50%, -50%) scale(1.08) }
.stories__placeholder{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: rgba(235,234,228,.4);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, #11192b 0%, #0d1424 50%, #1a2440 100%);
}
.stories__placeholder svg{
  width: 28px; height: 28px;
  color: rgba(200,137,92,.4);
}

.stories__item--photo{ background: #000 }
/* Compact 12-photo bento: 12-col grid × 80px rows */
.stories__item--c1 { grid-column: span 6; grid-row: span 4 }    /* big horizontal */
.stories__item--c2 { grid-column: span 3; grid-row: span 4 }    /* tall portrait */
.stories__item--c3 { grid-column: span 3; grid-row: span 2 }    /* small */
.stories__item--c4 { grid-column: span 3; grid-row: span 2 }    /* small */
.stories__item--c5 { grid-column: span 6; grid-row: span 3 }    /* mid wide */
.stories__item--c6 { grid-column: span 6; grid-row: span 3 }    /* mid wide / square */
.stories__item--c7 { grid-column: span 3; grid-row: span 4 }    /* tall portrait */
.stories__item--c8 { grid-column: span 6; grid-row: span 4 }    /* big horizontal */
.stories__item--c9 { grid-column: span 3; grid-row: span 4 }    /* tall portrait */
.stories__item--c10{ grid-column: span 4; grid-row: span 3 }    /* small square */
.stories__item--c11{ grid-column: span 4; grid-row: span 3 }    /* small */
.stories__item--c12{ grid-column: span 4; grid-row: span 3 }    /* small */

.stories__videoplay{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 14px 36px rgba(0,0,0,.5);
  transition: transform .25s var(--t);
  z-index: 2;
}
.stories__videoplay:hover{ transform: translate(-50%, -50%) scale(1.07) }
.stories__videoplay svg{ width: 22px; height: 22px; margin-left: 3px }

.stories__cap{
  position: absolute;
  left: 14px; bottom: 14px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(11,19,34,.7);
  padding: 5px 9px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  z-index: 2;
}

@media (max-width: 1024px){
  .stories{ grid-auto-rows: 84px; gap: 0 }
  .stories__item--c1 { grid-column: span 12; grid-row: span 4 }
  .stories__item--c2 { grid-column: span 6;  grid-row: span 4 }
  .stories__item--c3 { grid-column: span 6;  grid-row: span 2 }
  .stories__item--c4 { grid-column: span 6;  grid-row: span 2 }
  .stories__item--c5 { grid-column: span 6;  grid-row: span 3 }
  .stories__item--c6 { grid-column: span 6;  grid-row: span 3 }
  .stories__item--c7 { grid-column: span 6;  grid-row: span 4 }
  .stories__item--c8 { grid-column: span 6;  grid-row: span 4 }
  .stories__item--c9 { grid-column: span 6;  grid-row: span 4 }
  .stories__item--c10{ grid-column: span 6;  grid-row: span 3 }
  .stories__item--c11{ grid-column: span 6;  grid-row: span 3 }
  .stories__item--c12{ grid-column: span 12; grid-row: span 3 }
}
@media (max-width: 600px){
  .stories{ grid-auto-rows: 90px; gap: 0 }
  .stories__item--c1, .stories__item--c2, .stories__item--c3, .stories__item--c4,
  .stories__item--c5, .stories__item--c6, .stories__item--c7, .stories__item--c8,
  .stories__item--c9, .stories__item--c10, .stories__item--c11, .stories__item--c12{
    grid-column: span 12;
    grid-row: span 3;
  }
}

/* =========================================================
   GRID SPLIT (about)
   ========================================================= */
.grid-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:48px;
  align-items:center;
}
.section--compact .grid-split{ gap: 36px }
.section--compact .grid-split .photo--tall{ aspect-ratio: 1/1 }
.section--compact .facts{ margin: 0 }
.section--compact .facts li{ padding: 14px 0; font-size: 14px }
.grid-split--reverse .col-a{ order:2 }
.grid-split--reverse .col-b{ order:1 }

.photo{
  position:relative;
  background:#000;
  overflow:hidden;
  border-radius:var(--r-card-l);
  box-shadow:
    0 18px 44px rgba(0,0,0,.4),
    0 50px 120px rgba(0,0,0,.28);
}
.photo img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1.2s var(--t-ease) }
.photo:hover img{ transform: scale(1.04) }
.photo--tall{ aspect-ratio: 3/4 }
.photo--sq{ aspect-ratio: 1/1 }
.photo--wide{ aspect-ratio: 16/10 }
.photo__cap{
  position:absolute; left:14px; bottom:14px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  background: rgba(11,19,34,.78);
  padding:6px 10px;
  border-radius:6px;
  backdrop-filter: blur(4px);
}

/* =========================================================
   PROCESS — sticky pinned
   ========================================================= */
.process{
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
.process__pin{
  position: sticky;
  top: calc(var(--nav-top) + var(--nav-h) + 32px);
  align-self: start;
}
.process__counter{
  font-family:'Sora', 'Inter', sans-serif;
  font-size: clamp(72px, 9vw, 144px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.05em;
  margin: 0 0 14px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.process__counter .ps-num{
  background: linear-gradient(180deg, var(--accent-3) 0%, var(--accent) 50%, var(--accent-ink) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display: inline-block;
  min-width: 1.6em;
  filter: drop-shadow(0 4px 18px rgba(200,137,92,.22));
}
.process__counter .ps-tot{ color: var(--ink-3); font-size: .35em; font-weight: 400; letter-spacing: .04em }
.process__title{
  font-family:'Sora', 'Inter', sans-serif;
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 14px;
  color: var(--ink);
}
.process__desc{
  font-size: 15px; line-height: 1.6;
  color: var(--ink-2);
  font-weight: 300;
  margin: 0;
  max-width: 38ch;
}
.process__steps{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.process__steps li{
  position: relative;
  padding: 56px 0 56px 64px;
  border-left: 1px solid var(--line);
  min-height: 320px;
}
.process__steps li::before{
  content: attr(data-step);
  position: absolute;
  left: -1px;
  top: 56px;
  font-family:'Sora', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink-3);
  padding: 4px 12px;
  background: var(--section);
  border-left: 2px solid var(--accent);
  margin-left: -1px;
}
.process__steps li.is-active::before{
  color: var(--accent-3);
  border-left-color: var(--accent-3);
}
.process__steps h4{
  font-family:'Sora', 'Inter', sans-serif;
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--ink);
}
.process__steps p{
  font-size: 15px; line-height: 1.6;
  color: var(--ink-2);
  font-weight: 300;
  margin: 0 0 18px;
  max-width: 56ch;
}
.process__steps small{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
}
.process__steps small::before{
  content: "";
  display: inline-block;
  width: 10px; height: 1px;
  background: var(--accent-2);
}
@media (max-width: 1024px){
  .process{ grid-template-columns: 1fr; gap: 32px }
  .process__pin{ position: static; top: auto }
  .process__counter{ font-size: 56px }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq{ border-top:1px solid var(--line) }
.section--paper .faq{ border-top-color: var(--paper-2) }
.faq__q{
  border-bottom:1px solid var(--line);
  padding: 24px 0;
  display:grid;
  grid-template-columns: 56px 1fr 56px;
  gap:32px;
  align-items:center;
  cursor:pointer;
  transition: background .2s var(--t);
}
.section--paper .faq__q{ border-bottom-color: var(--paper-2) }
.faq__n{ font-size:12px; color:var(--ink-2); font-weight:500; letter-spacing:.14em }
.section--paper .faq__n{ color: var(--ink-l-2) }
.faq__title{
  font-family:'Sora', 'Inter', sans-serif;
  font-size: clamp(17px, 1.4vw, 22px);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.025em;
  margin:0;
}
.faq__icon{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-d);
  border-radius:50%;
  position:relative;
  justify-self:end;
  transition: border-color .2s var(--t), background .2s var(--t);
}
.section--paper .faq__icon{ border-color: var(--paper-2) }
.faq__icon::before, .faq__icon::after{
  content:""; position:absolute;
  background:var(--ink);
  transition: transform .2s var(--t), opacity .2s var(--t);
}
.section--paper .faq__icon::before, .section--paper .faq__icon::after{ background:var(--ink-l) }
.faq__icon::before{ width:12px; height:1.5px }
.faq__icon::after{ width:1.5px; height:12px }
.faq__item.open .faq__icon{ background:var(--accent); border-color:var(--accent) }
.faq__item.open .faq__icon::before, .faq__item.open .faq__icon::after{ background:#fff }
.faq__item.open .faq__icon::after{ transform: rotate(90deg); opacity:0 }
.faq__a{
  display:grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--t);
}
.faq__a > div{ overflow:hidden }
.faq__item.open .faq__a{ grid-template-rows: 1fr }
.faq__a p{
  padding: 0 88px 28px 88px;
  margin:0;
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.65;
  font-weight:300;
  max-width: 70ch;
}
.section--paper .faq__a p{ color: var(--ink-l-2) }

/* =========================================================
   FACTS (about)
   ========================================================= */
.facts{
  list-style:none; padding:0; margin:32px 0 0;
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
}
.facts li{
  border-bottom:1px solid var(--line);
  padding:18px 0;
  font-size:14.5px;
  color:var(--ink-2);
  font-weight:300;
  line-height:1.55;
}
.facts b{
  font-family:'Sora', 'Inter', sans-serif;
  letter-spacing:-.02em;
  color:var(--ink); font-weight:600; display:block; margin-bottom:4px;
  font-size: 15px;
}
.section--paper .facts{ border-top-color: var(--paper-2) }
.section--paper .facts li{ border-bottom-color: var(--paper-2); color:var(--ink-l-2) }
.section--paper .facts b{ color:var(--ink-l) }

/* =========================================================
   CONTACT
   ========================================================= */
.cta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:48px;
  align-items:start;
}
.section--compact .cta{ gap: 36px }
.section--compact .form{ padding: 24px }
.section--compact .contacts{ margin-top: 16px }
.section--compact .contacts a{ padding: 12px 0 }
.contacts{
  margin-top:28px;
  border-top:1px solid var(--line);
}
.contacts a{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-size:14.5px;
  color:var(--ink);
  transition: color .2s var(--t), padding .2s var(--t);
}
.contacts a:hover{ color:var(--accent-2); padding-left: 6px }
.contacts__label{ display:flex; align-items:center; gap:14px; font-weight:500 }
.contacts__value{ color:var(--ink-2); font-size:13px }
.contacts a:hover .contacts__value{ color:var(--accent-2) }

.form{
  background: var(--section-2);
  padding:32px;
  border:1px solid var(--line);
  border-radius:var(--r-card-l);
  position:relative;
  overflow:hidden;
}
.form::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(200,137,92,.32), rgba(255,255,255,.04) 30%, rgba(255,255,255,0) 60%, rgba(200,137,92,.16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}
.form__row{ margin-bottom:18px; position:relative; z-index:2 }
.form__row--2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.form label{
  display:block;
  font-size:11px; font-weight:500;
  color:var(--ink-2);
  margin-bottom:7px;
  letter-spacing:.12em;
  text-transform: uppercase;
}
.form__opt{
  font-weight:300;
  opacity:.6;
  margin-left:4px;
  text-transform: none;
  letter-spacing:0;
}
.form input, .form select, .form textarea{
  width:100%;
  padding:13px 16px;
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--line-d);
  border-radius:var(--r-input);
  font:inherit; font-size:14px; font-weight:400;
  transition: border-color .2s var(--t), box-shadow .2s var(--t);
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow: 0 0 0 4px rgba(200,137,92,.10);
}
.form select{
  -webkit-appearance:none; appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(-45deg, transparent 50%, var(--accent) 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right:36px;
}
.form select option{ background:var(--bg); color:var(--ink) }
.form textarea{ resize:vertical; min-height:96px }
.form__note{
  font-size:11px; color:var(--ink-2);
  margin:14px 0 0; position:relative; z-index:2;
  letter-spacing:.02em;
}
.form__ok{
  margin-top:14px; padding:14px;
  border:1px solid var(--accent);
  color:var(--accent-2);
  border-radius:10px;
  font-size:14px; text-align:center;
  position:relative; z-index:2;
}
.form button[type="submit"]{ position:relative; z-index:2 }

/* =========================================================
   STICKY WHATSAPP
   ========================================================= */
.wa-float{
  position:fixed;
  right:22px; bottom:22px;
  z-index:50;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px 13px 16px;
  background:#25d366;
  color:#fff;
  border-radius:999px;
  font-weight:500;
  font-size:13px;
  box-shadow: 0 12px 32px -8px rgba(37,211,102,.55);
  transition: transform .2s var(--t);
}
.wa-float:hover{ transform: translateY(-2px) }
.wa-float svg{ width:20px; height:20px }
@media (max-width:720px){
  .wa-float{
    right:14px; bottom:14px;
    padding:14px; width:52px; height:52px;
  }
  .wa-float__label{ display:none }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:var(--bg);
  padding: 56px 0 28px;
  color:var(--ink-2);
  font-size:13px;
  position:relative;
  z-index:2;
}
.footer__top{
  display:grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
}
.footer h5{
  font-family:'Sora', 'Inter', sans-serif;
  font-size:11px; font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 14px;
}
.footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px }
.footer a:hover{ color:var(--ink) }
.footer__bottom{
  padding-top:24px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:11px;
  letter-spacing:.04em;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .pillars{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto }
  .pillar:nth-child(1),
  .pillar:nth-child(2),
  .pillar:nth-child(3),
  .pillar:nth-child(4){
    grid-column: span 1;
    grid-row: span 1;
    padding: 26px 24px 24px;
  }
  .pillar:nth-child(1) .pillar__icon{
    width: 42px; height: 42px;
    border-radius: 11px;
    margin-bottom: 28px;
  }
  .pillar:nth-child(1) .pillar__icon svg{ width: 22px; height: 22px }
  .pillar:nth-child(1) .pillar__t{ font-size: clamp(18px, 1.5vw, 22px); margin-bottom: 8px }
  .grid-split{ grid-template-columns: 1fr; gap:36px }
  .grid-split--reverse .col-a{ order:1 }
  .grid-split--reverse .col-b{ order:2 }
  .cta, .offer{ grid-template-columns: 1fr; gap:36px }
  .footer__top{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 720px){
  .section{ margin: 8px; padding: 32px 0 28px }
  .pillars{ grid-template-columns: 1fr }
  .faq__q{ grid-template-columns: 36px 1fr 40px; gap:14px; padding: 20px 0 }
  .faq__a p{ padding: 0 0 22px 50px }
  .faq__icon{ width:36px; height:36px }
  .form{ padding: 22px 18px }
  .form__row--2{ grid-template-columns: 1fr }
  .footer__top{ grid-template-columns: 1fr 1fr }
  .offer__big{ font-size: clamp(40px, 11vw, 72px); overflow-wrap: anywhere }
  .offer__facts li{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .offer__facts li b{ text-align: left }
  .process__steps li{ padding: 36px 0 36px 36px; min-height: auto }
}
@media (max-width:480px){
  .footer__top{ grid-template-columns: 1fr }
}

/* =========================================================
   REVEAL — soft 3D rise
   ========================================================= */
.reveal{
  opacity: 0;
  transform: translateY(18px) scale(.98);
  transition: opacity .7s var(--t), transform .7s var(--t);
}
.reveal.is-in{ opacity: 1; transform: none }

/* Big section number — slides in from the left when section enters */
.section-head__num{
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity .8s var(--t-ease), transform .8s var(--t-ease);
}
.section-head.is-in .section-head__num{
  opacity: .62;
  transform: none;
}

/* Hero entrance */
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(22px) }
  to  { opacity:1; transform: none }
}
.hero__h1,
.hero__lead,
.hero__cta,
.hero__right .glass:nth-of-type(1),
.hero__right .glass:nth-of-type(2){
  opacity:0;
  animation: fadeUp .8s var(--t-ease) forwards;
}
.hero__h1  { animation-delay: .15s }
.hero__lead{ animation-delay: .3s }
.hero__cta { animation-delay: .45s }
.hero__right .glass:nth-of-type(1){ animation-delay: .55s }
.hero__right .glass:nth-of-type(2){ animation-delay: .7s }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none }
  .section-head__num{ opacity:.62; transform:none }
  .hero__h1, .hero__lead, .hero__cta, .hero__right .glass{ opacity:1 }
}

/* =========================================================
   LAYOUT OVERRIDES — v5
   ========================================================= */

/* — Offer (#01): facts list absolutely positioned at vertical center of the section card */
.section--offer .container{ position: relative }

.section--offer .section-head{ grid-template-columns: 1fr }
.section--offer .section-head__main{
  max-width: 56%;
  padding-bottom: 0;
}

.offer.offer--single{
  display: block;
  margin-top: clamp(20px, 2.4vw, 36px);
}
.offer.offer--single > div{
  max-width: 56%;
}
.offer.offer--single .offer__big{ margin-top: 0 }

.offer__facts.offer__facts--side{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
  max-width: 460px;
  margin: 0;
}
.offer__facts.offer__facts--side li{
  padding: 14px 0;
}

@media (max-width: 1024px){
  .section--offer .section-head__main,
  .offer.offer--single > div{ max-width: none }
  .offer__facts.offer__facts--side{
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: clamp(28px, 3vw, 48px);
  }
}

/* — Process without sticky pin: single full-width column */
.process.process--no-pin{
  display: block;
}
.process.process--no-pin .process__steps{
  max-width: 760px;
  margin: 0 auto;
}

/* — Centered form for #contact */
.form.form--center{
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}
.section--centered.section--compact .section-head{
  margin-bottom: clamp(20px, 2.2vw, 32px);
}

/* — Paper FAQ tweaks (FAQ section now uses --paper background) */
.section--paper.section--centered .lead{ color: var(--ink-l-2) }
.section--paper .faq__title{ color: var(--ink-l) }
.section--paper .faq__icon{ background: rgba(255,255,255,.4) }
.section--paper .faq__item.open .faq__icon{ background: var(--accent-ink); border-color: var(--accent-ink) }

/* — Burger menu drawer button: solid brand orange + dark text for high contrast */
.nav-drawer .btn--primary{
  background: var(--accent);
  color: #1a1814;
  font-weight: 700;
  letter-spacing: -.005em;
  box-shadow: 0 8px 22px rgba(200,137,92,.3);
}
.nav-drawer .btn--primary:hover{
  background: var(--accent-2);
  color: #1a1814;
}

/* — Mobile (≤720px): clean hero, enlarge headline, hide marketing lead */
@media (max-width: 720px){
  .hero__lead{ display: none }
  .hero__h1{
    font-size: clamp(44px, 12vw, 64px);
    line-height: 1.0;
    max-width: 12ch;
  }
  .hero__left > .hero__lead + .hero__cta,
  .hero__cta{ margin-top: 24px }

  /* Process: keep step number above the title, no overlap */
  .process__steps li{ padding: 56px 0 36px 0 }
  .process__steps li::before{
    top: 0;
    left: 0;
    margin-left: 0;
  }
  .process__steps li{ border-left: 0 }
  .process__steps h4{ margin-top: 0 }

  /* FAQ on paper: tighten spacing */
  .section--paper .faq__a p{ padding: 0 0 22px 50px }
}

/* — Footer: 3-column layout with brand row on top */
.footer__top{
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
}
.footer__brand{
  grid-column: 1 / -1;
  margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer__brand h5{
  font-size: 14px;
  margin: 0;
}
.footer__brand-tag{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 720px){
  .footer__top{ grid-template-columns: 1fr 1fr }
  .footer__brand{ grid-column: 1 / -1 }
}
@media (max-width: 480px){
  .footer__top{ grid-template-columns: 1fr }
}

/* =========================================================
   MODALS
   ========================================================= */
.video-modal[hidden], .image-modal[hidden]{ display:none }
.video-modal, .image-modal{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
}
.video-modal__backdrop, .image-modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.image-modal__backdrop{ background: rgba(0,0,0,.9); cursor: zoom-out }
.video-modal__inner, .image-modal__inner{
  position:relative;
  width: min(1100px, 100%);
  max-height: calc(100vh - 48px);
  display:flex; align-items:center; justify-content:center;
}
.image-modal__inner{ max-width: min(1400px, 100%) }
.video-modal__video{
  width:100%; height:auto; max-height: calc(100vh - 48px);
  background:#000; border-radius:12px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  display:block;
}
.image-modal__img{
  max-width: 100%;
  max-height: calc(100vh - 48px);
  width:auto; height:auto;
  border-radius:12px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  display:block;
}
.video-modal__close, .image-modal__close{
  position:absolute; top:-12px; right:-12px;
  width:42px; height:42px; border-radius:50%;
  border:0; background:#fff; color:#000;
  font-size:24px; line-height:42px; text-align:center;
  cursor:pointer; padding:0;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
.video-modal__close:hover, .image-modal__close:hover{ background:#f0f0f0 }
@media (max-width: 640px){
  .video-modal, .image-modal{ padding: 0 }
  .video-modal__video, .image-modal__img{ border-radius:0; max-height: 100vh }
  .video-modal__close, .image-modal__close{ top:12px; right:12px }
}

.photo img,
.stories__item img{ cursor: zoom-in }