/* Homepage experience layer — 22 Sep 2026.
   Loaded after the shared styles so the public homepage can evolve without
   duplicating the rest of the site. Native scroll-snap keeps the case-study
   carousel swipeable without autoplay or a JS-driven transform. */

body.v2{overflow-x:clip}
.v2 main{overflow:clip}
.v2 .hero,
.v2 .stat-band,
.v2 .home-sec,
.v2 .cta-band{position:relative}

.v2 .hero{
  min-height:clamp(620px,78svh,860px);
}
.v2 .hero::after{
  background:
    linear-gradient(90deg,rgba(7,18,35,.97) 0%,rgba(7,18,35,.90) 25%,rgba(7,18,35,.68) 49%,rgba(7,18,35,.30) 72%,rgba(7,18,35,.10) 100%);
}
.v2 .hero-copy{
  width:min(100%,820px);
  max-width:820px;
  padding-block:clamp(96px,9vw,144px);
  padding-left:max(var(--page-gutter,24px),calc((100vw - var(--layout-max,1320px))/2));
  padding-right:max(40px,var(--page-gutter,24px));
}
.v2 .hero-copy h1{
  max-width:none;
  font-size:clamp(2.3rem,4.7vw,4.5rem);
  line-height:1.04;
  letter-spacing:-.03em;
}
.v2 .hero-copy h1 .hero-line{display:block;white-space:nowrap}
.v2 .hero-copy .eyebrow{
  color:var(--sg-gold-soft);
  letter-spacing:.15em;
}
.v2 .hero-copy .hero-intro{
  max-width:650px;
  margin-top:24px;
  font-size:clamp(1rem,1.4vw,1.12rem);
  line-height:1.65;
  text-wrap:pretty;
}
.v2 .hero-actions{gap:12px;flex-wrap:wrap}
.v2 .hero-actions .button{min-width:168px}
.v2 .hero-actions .button--ghost{
  border-color:rgba(201,170,102,.72);
}
.v2 .hero-actions .button--ghost:hover{
  border-color:#c9aa66;
  background:rgba(201,170,102,.10);
}

.v2 .stat-band{
  padding:38px var(--page-gutter,24px);
  background:linear-gradient(180deg,#111d33 0%,#0f1a30 100%);
}
.v2 .stat-band-grid{max-width:var(--layout-max,1320px);margin-inline:auto;gap:0}
.v2 .stat-band .stat{
  padding:6px clamp(14px,2.2vw,28px);
  min-width:0;
}
.v2 .stat-num{
  color:#fff;
  font-size:clamp(1.95rem,3vw,3rem);
}
.v2 .stat-label{
  max-width:180px;
  margin-top:9px;
  color:#c3cad4;
  line-height:1.45;
}

.v2 .home-sec{
  width:min(var(--layout-max,1320px),calc(100% - (2 * var(--page-gutter,24px))));
  max-width:none;
  margin-inline:auto;
  padding:var(--section-standard,clamp(72px,8vw,112px)) 0;
}
.v2 .home-head{margin-bottom:clamp(28px,4vw,42px)}
.v2 .home-head::before{
  width:42px;
  height:2px;
  background:var(--sg-gold);
}
.v2 .home-head h2{
  max-width:860px;
  font-size:clamp(2rem,1.25rem + 2.3vw,3.15rem);
  line-height:1.08;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.v2 .home-head p{max-width:660px;line-height:1.7;text-wrap:pretty;color:var(--sg-muted);margin-top:18px}
.v2 .home-head .eyebrow{color:var(--sg-gold-soft);display:block;margin-bottom:16px}
.v2 .home-section-action{margin:36px 0 0;text-align:center}

.v2 .goal-grid{
  container-type:inline-size;
  gap:16px;
}
.v2 .goal-card{
  min-height:260px;
  padding:28px 26px 24px;
  border-radius:var(--radius-card,20px);
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  box-shadow:0 20px 50px rgba(2,8,20,.14);
}
.v2 .goal-card:hover{
  transform:translateY(var(--motion-lift,-3px));
  border-color:rgba(201,170,102,.42);
  background:linear-gradient(150deg,rgba(255,255,255,.095),rgba(255,255,255,.035));
}
.v2 .card-ic{
  width:48px;height:48px;border-radius:14px;
  background:rgba(201,170,102,.12);
  border:1px solid rgba(201,170,102,.32);
}
.v2 .card-ic img{filter:none}
.v2 .card-ic svg{stroke:var(--sg-gold-soft)}
.v2 .card-cat,
.v2 .goal-card .go{color:var(--sg-gold-soft)}
.v2 .goal-card p{font-size:.92rem;line-height:1.65}
.v2 .goal-card .goal-sub{margin-top:10px;font-size:.84rem;color:var(--sg-gold-soft);opacity:.82}

/* ---- Method section: tighter, balanced layout ---- */
.v2 #method .home-head{margin-bottom:clamp(30px,4vw,46px)}
.v2 #method .home-head h2{
  max-width:760px;margin-inline:auto;
  font-size:clamp(1.7rem,1.1rem + 1.9vw,2.55rem);
  line-height:1.16;letter-spacing:-.015em;
}
.v2 #method .home-head p{
  max-width:560px;margin-inline:auto;
  font-size:clamp(1rem,.95rem + .3vw,1.12rem);opacity:.82;
}
.v2 #method .goal-grid{
  grid-template-columns:repeat(3,1fr);
  max-width:1040px;margin-inline:auto;gap:22px;
}
.v2 #method .goal-card{
  min-height:0;padding:32px 30px;gap:0;
}
.v2 #method .goal-card .card-cat{margin-bottom:16px}
.v2 #method .goal-card p{margin:0}
.v2 #method .goal-card .goal-sub{
  margin-top:14px;color:#b9c2cf;opacity:.9;line-height:1.55;
}
.v2 #method .goal-card .go{
  margin-top:26px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.1);
}
@media(max-width:860px){
  .v2 #method .goal-grid{grid-template-columns:1fr;max-width:460px}
}

.v2 .home-sec--center{
  width:100%;
  max-width:none;
  padding-left:max(var(--page-gutter,24px),calc((100vw - var(--layout-max,1320px))/2));
  padding-right:max(var(--page-gutter,24px),calc((100vw - var(--layout-max,1320px))/2));
  background:
    radial-gradient(circle at 50% 5%,rgba(201,170,102,.08),transparent 36%),
    #101c32;
}
.v2 .process-steps{position:relative;max-width:var(--layout-max,1320px);gap:clamp(18px,3vw,38px)}
.v2 .process-step{position:relative}
.v2 .process-step__num{
  width:82px;height:82px;
  border:1px solid rgba(201,170,102,.48);
  color:var(--sg-gold-soft);
  background:rgba(201,170,102,.07);
  box-shadow:0 0 0 8px rgba(201,170,102,.025);
}
.v2 .process-step h3{font-size:1rem}
.v2 .process-step p{line-height:1.65}

.v2 .handle-grid{
  gap:14px;
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.v2 .handle-card{
  min-height:220px;
  padding:26px 22px;
  border-radius:20px;
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
}
.v2 .handle-card p{line-height:1.6}

/* Image-only case-study rail. The artwork is the message; the only UI
   layered over it is the case-study action. */
.v2 .home-sec--proof{
  width:100%;
  max-width:none;
  padding-left:max(var(--page-gutter,24px),calc((100vw - var(--layout-max,1320px))/2));
  padding-right:max(var(--page-gutter,24px),calc((100vw - var(--layout-max,1320px))/2));
  background:linear-gradient(180deg,#101c32 0%,#0f1a30 100%);
}
.v2 .case-carousel{container-type:inline-size}
.v2 .case-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:1px;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.v2 .case-viewport::-webkit-scrollbar{display:none}
.v2 .case-track{
  display:flex;
  gap:18px;
  width:max-content;
  min-width:100%;
  align-items:stretch;
  transform:none;
  transition:none;
}
.v2 .case-slide{
  width:330px;
  flex:0 0 330px;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
}
.v2 .case-tile{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius-card,20px);
  background:#f2eee6;
  color:#fff;
  text-decoration:none;
  box-shadow:0 18px 46px rgba(2,8,20,.22);
  transition:transform var(--motion-base,240ms) var(--ease,ease),border-color var(--motion-base,240ms) var(--ease,ease),box-shadow var(--motion-base,240ms) var(--ease,ease);
}
.v2 .case-tile::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:28%;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(5,14,28,.60));
}
.v2 .case-tile img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--motion-slow,480ms) var(--ease,ease);
}
.v2 .case-tile__overlay{
  position:absolute;
  z-index:1;
  left:18px;
  bottom:18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 15px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(10,22,40,.78);
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.v2 .case-tile__overlay span{
  display:inline-block;
  transition:transform var(--motion-fast,160ms) var(--ease,ease);
}
.v2 .case-tile:hover{
  transform:translateY(var(--motion-lift,-3px));
  border-color:rgba(201,170,102,.46);
  box-shadow:0 26px 58px rgba(2,8,20,.30);
}
.v2 .case-tile:hover img{transform:scale(1.012)}
.v2 .case-tile:hover .case-tile__overlay span{transform:translateX(4px)}
.v2 .carousel-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:24px;
}
.v2 .carousel-controls{display:flex;gap:10px;margin-top:0}
.v2 .carousel-btn{
  width:48px;
  height:48px;
  border-color:rgba(255,255,255,.18);
}
.v2 .carousel-btn:hover{
  border-color:rgba(201,170,102,.52);
  background:rgba(201,170,102,.08);
}
.v2 .carousel-btn:disabled{opacity:.32;cursor:default}
.v2 .case-all{
  color:#cbd3de;
  font-size:.73rem;
  font-weight:600;
  letter-spacing:.055em;
  text-transform:uppercase;
  text-decoration:none;
  transition:color var(--motion-fast,160ms) var(--ease,ease);
}
.v2 .case-all:hover{color:var(--sg-gold-soft)}

/* Image-led split sections reserve their footprint before lazy images arrive. */
.v2 .split-media{
  min-height:420px;
  aspect-ratio:4/3;
  border-radius:var(--radius-card,20px);
  overflow:hidden;
  background:#14213a;
}
.v2 .split-media img{
  width:100%;height:100%;
  max-height:none;
  border-radius:0;
  object-fit:cover;
  transition:transform var(--motion-slow,480ms) var(--ease,ease);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .v2 .split-media:hover img{transform:scale(1.018)}
}
.v2 .who-list{gap:0;border-top:1px solid var(--sg-border)}
.v2 .who-item{padding:18px 0;border-bottom:1px solid var(--sg-border)}
.v2 .who-range{margin-top:28px;line-height:1.65}
.v2 .stat-list{max-width:none}
.v2 .stat-list li{grid-template-columns:minmax(170px,230px) 1fr;padding:20px 0}
.v2 .stat-list-num .accent{color:var(--sg-gold-soft)}

.v2 .ba{
  max-width:1000px;
  border-radius:var(--radius-card,20px);
  background:rgba(255,255,255,.02);
}
.v2 .ba-head .h-after{color:var(--sg-gold-soft);background:rgba(201,170,102,.08)}
.v2 .ba-row .after{background:rgba(201,170,102,.035)}

/* Internal-link section to extend the research journey without adding another
   large block of copy. */
.v2 .guide-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  container-type:inline-size;
}
.v2 .guide-card{
  display:flex;
  flex-direction:column;
  min-height:280px;
  padding:28px;
  border:1px solid var(--sg-border);
  border-radius:var(--radius-card,20px);
  background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.018));
  color:inherit;
  text-decoration:none;
  transition:transform var(--motion-base,240ms) var(--ease,ease),border-color var(--motion-base,240ms) var(--ease,ease),background var(--motion-base,240ms) var(--ease,ease),box-shadow var(--motion-base,240ms) var(--ease,ease);
}
.v2 .guide-card:hover{
  transform:translateY(var(--motion-lift,-3px));
  border-color:rgba(201,170,102,.4);
  background:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.028));
  box-shadow:0 22px 50px rgba(2,8,20,.18);
}
.v2 .guide-card__meta{
  color:var(--sg-gold-soft);
  font-size:.68rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.v2 .guide-card h3{
  margin:22px 0 12px;
  font-family:var(--font-heading);
  font-size:clamp(1.45rem,2vw,1.9rem);
  line-height:1.14;
  text-wrap:balance;
}
.v2 .guide-card p{margin:0;color:#cdd4df;font-size:.9rem;line-height:1.65}
.v2 .guide-card__link{
  margin-top:auto;
  padding-top:24px;
  color:var(--sg-gold-soft);
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.v2 .cta-band--photo{
  margin-top:20px;
  margin-bottom:64px;
  width:min(var(--layout-max,1320px),calc(100% - (2 * var(--page-gutter,24px))));
  max-width:none;
  margin-left:auto;
  margin-right:auto;
  border-radius:var(--radius-panel,28px);
}
.v2 .cta-band--photo h2{font-size:clamp(2rem,3.6vw,3.4rem);line-height:1}
.v2 .cta-band--photo p{max-width:560px;line-height:1.6}

/* Progressive performance: below-fold homepage sections can skip paint/layout
   work until the browser approaches them. The intrinsic size prevents jumps. */
@supports (content-visibility:auto){
  .v2 main > .home-sec:nth-of-type(n+6){
    content-visibility:auto;
    contain-intrinsic-size:auto 760px;
  }
}

@container (max-width:640px){
  .v2 .case-slide{
    width:min(82cqw,330px);
    flex-basis:min(82cqw,330px);
  }
  .v2 .case-tile__overlay{
    left:14px;
    bottom:14px;
    min-height:40px;
    padding:0 13px;
  }
}

@media (max-width:1000px){
  .v2 .handle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v2 .guide-grid{grid-template-columns:1fr 1fr}
  .v2 .stat-band-grid{grid-template-columns:repeat(3,1fr);gap:28px 0}
  .v2 .stat-band .stat:nth-child(4){border-left:0}
}

@media (max-width:820px){
  .v2 .hero{min-height:720px}
  .v2 .hero::after{
    background:linear-gradient(180deg,rgba(7,18,35,.16) 0%,rgba(7,18,35,.30) 30%,rgba(7,18,35,.78) 66%,rgba(7,18,35,.98) 100%);
  }
  .v2 .hero-copy{
    width:100%;
    padding:120px 24px 64px;
  }
  .v2 .hero-copy h1{font-size:clamp(1.45rem,7.2vw,3.4rem)}
  .v2 .split-media{min-height:330px;aspect-ratio:16/11}
}

@media (max-width:620px){
  .v2 .home-sec{width:calc(100% - (2 * var(--page-gutter-mobile,20px)));padding:var(--section-compact,clamp(48px,6vw,64px)) 0}
  .v2 .stat-band{padding:30px var(--page-gutter-mobile,20px)}
  .v2 .stat-band-grid{grid-template-columns:1fr 1fr;gap:24px 0}
  .v2 .stat-band .stat{padding:0 14px 0 0;border-left:0}
  .v2 .stat-label{font-size:.67rem}
  .v2 .handle-grid,.v2 .guide-grid{grid-template-columns:1fr}
  .v2 .goal-card{min-height:220px}
  .v2 .carousel-meta{align-items:center}
  .v2 .case-all{font-size:.66rem}
  .v2 .stat-list li{grid-template-columns:1fr;gap:6px}
  .v2 .ba-head span,.v2 .ba-row span{padding:14px 16px}
  .v2 .ba-row span{font-size:.84rem}
  .v2 .cta-band--photo{width:calc(100% - (2 * var(--page-gutter-mobile,20px)));margin:12px auto 48px}
}

@media (hover:none){
  .v2 .goal-card:hover,
  .v2 .guide-card:hover,
  .v2 .case-tile:hover{transform:none}
  .v2 .case-tile:hover img{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .v2 .case-viewport{scroll-behavior:auto}
  .v2 .guide-card,
  .v2 .goal-card,
  .v2 .case-tile,
  .v2 .case-tile img,
  .v2 .case-tile__overlay span,
  .v2 .split-media img{transition:none}
}