/* =========================================================
   JAM — Studio Report  ·  Alpine Growth Summit '26
   Brand Project Report design system
   ========================================================= */

/* Alpine brand type system: Campton (display) → Inter (text) → JetBrains Mono (labels/technical).
   Campton is a licensed font; until the .woff2 files are added it falls back to Outfit
   (a close geometric grotesque) loaded from Google Fonts. Inter & JetBrains Mono are exact. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* type */
  --font-display:'Campton','Outfit','Poppins',system-ui,sans-serif;
  --font-text:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;

  /* Alpine brand palette — navy + electric blue + grayscale ramp */
  --navy:#002A3F;        /* deep navy — text & dark surfaces */
  --royal:#0A1FE6;       /* electric/royal blue — primary */
  --sky:#2E9DFF;         /* bright sky blue — secondary */
  --pale:#B6E1FF;        /* pale blue — soft accent */

  --bg:#F1F4F7;          /* cool off-white page */
  --bg-2:#E4EAF0;
  --surface:#FFFFFF;
  --ink:#002A3F;         /* navy text */
  --ink-soft:#33505F;
  --muted:#6E7A85;       /* neutral gray */
  --line:#D8DFE6;
  --line-soft:#E7EBF0;

  /* semantic accents (names kept stable across the codebase) */
  --pine:#0A1FE6;        /* primary / status complete  → royal */
  --pine-soft:#E2E5FF;
  --glacier:#2E9DFF;     /* secondary / cool           → sky */
  --glacier-soft:#DCEEFF;
  --dawn:#002A3F;        /* third accent / callouts     → navy */
  --dawn-soft:#D7EAFB;   /* pale-blue tint */
  --rope:#0A1FE6;

  --maxw:1140px;
  --radius:0px;          /* sharp boxes — no rounded corners */
  --shadow:0 1px 2px rgba(0,42,63,.05);
  --shadow-lift:0 18px 40px -22px rgba(0,42,63,.45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  text-wrap:pretty;          /* no widow words in body copy */
}
h1,h2,h3,h4,.display,.cb-title,.statement,.cb-desc,.lede{text-wrap:balance;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.section{padding:46px 0;border-top:1px solid var(--line);}
.section:first-of-type{border-top:none;}

/* ---------- top nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(241,244,247,.88);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:16px;min-width:0;}
.logo{
  display:block;height:23px;width:auto;
}
.hero-logo{display:block;width:min(560px,82%);height:auto;margin-top:28px;}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.brand-divider{width:1px;height:26px;background:var(--line);}
.brand-meta{line-height:1.25;min-width:0;}
.brand-meta .k{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.brand-meta .v{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav-right{display:flex;align-items:center;gap:18px;}
.nav-link{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);font-weight:500;}
.nav-link:hover{color:var(--ink);}

/* ---------- pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:0;white-space:nowrap;
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.pill.complete{background:var(--pine-soft);color:var(--pine);}
.pill.progress{background:var(--glacier-soft);color:#0A5FB8;}
.pill.pending{background:#E6EAEF;color:#6E7A85;}

/* ---------- eyebrow / kickers ---------- */
.kicker{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 18px;
}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0;letter-spacing:-.02em;}
.display{
  font-weight:800;font-size:clamp(46px,8.5vw,108px);line-height:.96;letter-spacing:-.04em;
}
.lede{font-size:clamp(19px,2.5vw,25px);line-height:1.5;color:var(--ink-soft);max-width:60ch;}
.h-sec{font-weight:800;font-size:clamp(28px,3.8vw,42px);line-height:1.05;letter-spacing:-.03em;}
.p{color:var(--ink-soft);}
.p-muted{color:var(--muted);}
.tight{max-width:62ch;}
strong{font-weight:600;color:var(--ink);}
em.s{font-style:normal;background:linear-gradient(transparent 62%, var(--dawn-soft) 62%);padding:0 2px;}

/* ---------- hero meta grid ---------- */
.meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:38px;
}
.meta .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.meta .v{font-size:15px;font-weight:600;color:var(--ink);}

/* ---------- progress ---------- */
.progress-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.progress-head .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.progress-head .v{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--ink-soft);font-weight:500;}
.bar{height:7px;border-radius:0;background:var(--bg-2);overflow:hidden;border:1px solid var(--line);}
.bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--royal),var(--sky));border-radius:0;}

/* ---------- stage list (dashboard) ---------- */
.stages-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.stage-row{
  display:grid;grid-template-columns:44px 52px 1fr auto;align-items:center;gap:20px;
  padding:22px 18px;border-top:1px solid var(--line);
  margin:0 -18px;border-radius:0;transition:background .15s ease,transform .15s ease;
}
.stage-row:hover{background:var(--surface);}
.stage-row .num{font-family:var(--font-mono);font-weight:500;font-size:13px;color:var(--muted);}
.stage-row .s-ico{width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-2);color:var(--navy);transition:background .15s ease,color .15s ease;}
.stage-row .s-ico i{font-size:24px;}
.stage-row:hover .s-ico{background:var(--navy);color:#fff;}
.stage-row .title{display:block;font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.02em;margin-bottom:0;line-height:1.15;}
.stage-row .desc{display:block;font-size:13.5px;line-height:1.4;color:var(--muted);max-width:none;}
.stage-row .right{display:flex;align-items:center;gap:16px;justify-content:flex-end;}
.arrow{color:var(--muted);font-size:20px;transition:transform .15s ease;}
.stage-row:hover .arrow{transform:translateX(5px);color:var(--royal);}
.stage-row.locked{cursor:not-allowed;opacity:.55;}
.stage-row.locked:hover{background:transparent;}
.stage-row.locked:hover .s-ico{background:var(--bg-2);color:var(--navy);}
.stage-row.locked:hover .arrow{transform:none;color:var(--muted);}

/* ---------- cards ---------- */
.grid{display:grid;gap:18px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line-soft);}
.card .lbl{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:7px;}
.card h4{font-size:17px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em;}
.card p{font-size:14px;color:var(--ink-soft);margin:0;}
.card.accent-pine{border-left:4px solid var(--pine);}
.card.accent-glacier{border-left:4px solid var(--glacier);}
.card.accent-dawn{border-left:4px solid var(--dawn);}

/* icon chip — prominent square badge */
.ico-chip{
  width:46px;height:46px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;margin-bottom:18px;
}
.ico-chip i{font-size:23px;line-height:1;}
.ico-chip.royal{background:var(--royal);}
.ico-chip.sky{background:var(--sky);color:var(--navy);}
.ico-chip.pale{background:var(--pale);color:var(--navy);}
.card .lbl i{font-size:15px;color:var(--royal);}

/* big stat */
.stat{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,5.6vw,62px);letter-spacing:-.04em;line-height:.95;color:var(--navy);}
.stat.royal{color:var(--royal);}
.stat-sub{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.45;}
.stat-ico{color:var(--sky);font-size:22px;margin-bottom:14px;display:block;}

/* callout */
.callout{
  background:var(--dawn-soft);border-left:4px solid var(--dawn);
  border-radius:0;padding:20px 24px;margin:10px 0;
}
.callout .lbl{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.callout .lbl i{font-size:14px;color:inherit;letter-spacing:0;}
.callout p{margin:0;color:var(--ink-soft);font-size:14.5px;}
.callout.pine{background:var(--pine-soft);border-color:var(--pine);}
.callout.pine .lbl{color:var(--pine);}
.callout.glacier{background:var(--glacier-soft);border-color:var(--glacier);}
.callout.glacier .lbl{color:#0A5FB8;}

/* central creative idea — elevated statement panel */
.callout.central{background:var(--navy);border:none;border-left:none;border-radius:0;padding:38px 40px;position:relative;overflow:hidden;box-shadow:var(--shadow-lift);}
.callout.central::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 130% at 100% 0%, rgba(46,157,255,.32), transparent 55%),
             radial-gradient(90% 120% at 0% 100%, rgba(10,31,230,.30), transparent 60%);}
.callout.central::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--sky),var(--royal));z-index:1;}
.callout.central > *{position:relative;z-index:2;}
.callout.central .lbl{color:var(--sky);font-size:11px;margin-bottom:14px;}
.callout.central .lbl i{color:var(--sky);font-size:15px;}
.callout.central p{color:#E8F1F8;font-family:var(--font-display);font-weight:500;font-size:clamp(19px,2.1vw,26px);line-height:1.32;letter-spacing:-.015em;}
.callout.central strong{color:#fff;font-weight:700;}
.callout.central em.s{color:var(--sky);background:none;}

/* feature statement */
.statement{
  font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.6vw,40px);
  line-height:1.12;letter-spacing:-.03em;max-width:18ch;
}
.statement.alt{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;}

/* scale rows */
.scale{display:flex;flex-direction:column;gap:14px;}
.scale-row{display:grid;grid-template-columns:1fr;gap:6px;}
.scale-row .lab{font-size:13px;color:var(--ink-soft);font-weight:500;}
.scale-track{height:6px;background:var(--bg-2);border-radius:0;border:1px solid var(--line);position:relative;}
.scale-track > i{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:0;background:var(--royal);border:2px solid var(--surface);box-shadow:var(--shadow);}

/* list */
.clean-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;}
.clean-list li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.55;color:var(--ink-soft);}
.clean-list li::before{content:"";position:absolute;left:2px;top:8px;width:9px;height:9px;background:var(--royal);transform:rotate(45deg);}
.num-list{list-style:none;counter-reset:n;padding:0;margin:0;display:flex;flex-direction:column;gap:16px;}
.num-list li{counter-increment:n;position:relative;padding-left:44px;font-size:14.5px;line-height:1.55;color:var(--ink-soft);}
.num-list li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:1px;font-family:var(--font-mono);font-weight:500;font-size:13px;color:var(--royal);}

/* swatches */
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.sw{border-radius:0;overflow:hidden;border:1px solid var(--line);background:var(--surface);}
.sw .chip{height:84px;}
.sw .meta2{padding:10px 12px;}
.sw .nm{font-size:12.5px;font-weight:600;color:var(--ink);}
.sw .hx{font-size:11px;color:var(--muted);font-family:var(--font-mono);letter-spacing:.01em;}

/* generated-image galleries */
.gallery{display:grid;gap:16px;}
.gallery.g2{grid-template-columns:repeat(2,1fr);}
.gallery.g3{grid-template-columns:repeat(3,1fr);}
figure.shot{margin:0;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);}
figure.shot img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line);background:var(--bg-2);}
figure.shot figcaption{padding:11px 14px;}
figure.shot figcaption .ct{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
figure.shot figcaption .cn{font-size:13px;font-weight:600;color:var(--ink);margin-top:3px;letter-spacing:-.01em;}
.feature{margin:0 0 16px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);}
.feature img{width:100%;height:auto;display:block;background:var(--bg-2);border-bottom:1px solid var(--line);}
.feature figcaption{padding:13px 16px;}
.feature figcaption .ct{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.feature figcaption .cn{font-size:14px;font-weight:600;color:var(--ink);margin-top:3px;}

/* ---------- bento moodboard ---------- */
.bento{column-count:3;column-gap:8px;}
.bento .btile{break-inside:avoid;margin:0 0 8px;position:relative;overflow:hidden;border:1px solid var(--line);background:var(--bg-2);box-shadow:var(--shadow);display:block;}
.bento .btile img{width:100%;height:auto;display:block;}
@media(max-width:860px){.bento{column-count:2;}}
@media(max-width:520px){.bento{column-count:1;}}

/* captioned bento — masonry tiles with a label, moodboard-style hover */
.bento-cap{column-count:3;column-gap:12px;}
.bento-cap .btile{break-inside:avoid;margin:0 0 12px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);display:block;}
.bento-cap .bimg{position:relative;overflow:hidden;cursor:zoom-in;display:block;border-bottom:1px solid var(--line);}
.bento-cap .bimg img{width:100%;height:auto;display:block;transition:transform .4s ease;}
.bento-cap .bimg:hover img{transform:scale(1.05);}
.bento-cap .bimg::after{content:"";position:absolute;inset:0;background:rgba(0,16,24,0);transition:background .25s ease;pointer-events:none;z-index:1;}
.bento-cap .bimg:hover::after{background:rgba(0,16,24,.28);}
.bento-cap .bimg .zoom-hint{position:absolute;top:50%;left:50%;width:54px;height:54px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(4px);color:#fff;font-size:23px;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .25s ease,transform .25s ease;pointer-events:none;z-index:2;}
.bento-cap .bimg:hover .zoom-hint{opacity:1;transform:translate(-50%,-50%) scale(1);}
.bento-cap figcaption{padding:11px 14px;}
.bento-cap figcaption .ct{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.bento-cap figcaption .cn{font-size:13px;font-weight:600;color:var(--ink);margin-top:3px;letter-spacing:-.01em;}
@media(max-width:860px){.bento-cap{column-count:2;}}
@media(max-width:520px){.bento-cap{column-count:1;}}
/* bento hover: slight zoom-in, subtle dark overlay, centered zoom icon */
.bento .btile{cursor:zoom-in;}
.bento .btile img{transition:transform .4s ease;}
.bento .btile:hover img{transform:scale(1.05);}
.bento .btile::after{content:"";position:absolute;inset:0;background:rgba(0,16,24,0);transition:background .25s ease;pointer-events:none;z-index:1;}
.bento .btile:hover::after{background:rgba(0,16,24,.28);}
.bento .btile .zoom-hint{position:absolute;top:50%;left:50%;right:auto;width:54px;height:54px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(4px);color:#fff;font-size:23px;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .25s ease,transform .25s ease;pointer-events:none;z-index:2;}
.bento .btile:hover .zoom-hint{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* divider label */
.divlabel{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;}

/* footer stage nav */
.stage-foot{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:34px 0 60px;
}
.foot-link{max-width:46%;}
.foot-link .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.foot-link .t{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.02em;color:var(--ink);}
.foot-link:hover .t{color:var(--pine);}
.foot-link.next{text-align:right;margin-left:auto;}
.foot-link.locked{cursor:not-allowed;opacity:.5;}
.foot-link.locked:hover .t{color:var(--ink);}
.foot-link.locked .k i{font-size:13px;vertical-align:-1px;}

/* footer */
.site-foot{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:12.5px;}
.site-foot .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;}

/* timeline */
.tl{display:flex;flex-direction:column;}
.tl-item{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:18px 0;border-top:1px solid var(--line-soft);}
.tl-item:first-child{border-top:none;}
.tl-item .when{font-family:var(--font-mono);font-weight:500;font-size:12.5px;color:var(--pine);padding-top:2px;}
.tl-item .what h4{font-size:15px;margin-bottom:4px;}
.tl-item .what p{font-size:13.5px;color:var(--ink-soft);margin:0;}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;}
.tbl th{font-family:var(--font-mono);text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:0 14px 12px;border-bottom:1px solid var(--line);}
.tbl td{padding:14px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);vertical-align:top;}
.tbl td:first-child{font-weight:600;color:var(--ink);}

.spacer-s{height:14px;}
.spacer{height:30px;}
.note{font-size:12px;color:var(--muted);font-style:italic;}

/* responsive */
@media(max-width:860px){
  .g4{grid-template-columns:repeat(2,1fr);}
  .g3{grid-template-columns:1fr;}
  .meta{grid-template-columns:repeat(2,1fr);}
  .swatches{grid-template-columns:repeat(3,1fr);}
  .gallery.g3{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:620px){
  .wrap,.nav-inner{padding-left:20px;padding-right:20px;}
  .g2{grid-template-columns:1fr;}
  .g4{grid-template-columns:1fr;}
  .swatches{grid-template-columns:repeat(2,1fr);}
  .gallery.g2,.gallery.g3{grid-template-columns:1fr;}
  .stage-row{grid-template-columns:30px 44px 1fr;gap:14px;}
  .stage-row .right{grid-column:1 / -1;justify-content:flex-start;}
  .tl-item{grid-template-columns:1fr;gap:6px;}
  .brand-meta .v{max-width:160px;}
  .nav-link.hide-sm{display:none;}
  .persona{grid-template-columns:1fr !important;}
  .persona .pic{height:300px;}
}

/* ============================================================
   BOLD MODERN COMPONENTS
   ============================================================ */

/* dark, full-bleed hero */
.hero-dark{background:var(--navy);color:#fff;position:relative;overflow:hidden;}
.hero-dark .wrap{position:relative;z-index:2;padding-top:70px;padding-bottom:64px;}
.hero-dark .display{color:#fff;}
.hero-dark .lede{color:#C7D6E0;}
.hero-dark .kicker{color:var(--sky);}
.hero-dark strong{color:#fff;}
.hero-dark em.s{background:linear-gradient(transparent 62%, rgba(46,157,255,.45) 62%);}
.hero-grad{position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 88% 8%, rgba(46,157,255,.42), transparent 55%),
             radial-gradient(90% 80% at 0% 100%, rgba(10,31,230,.40), transparent 60%);}
.hero-rule{height:6px;width:100%;background:linear-gradient(90deg,var(--navy),var(--royal) 45%,var(--sky));}
.hero-dark .meta .k{color:#7FA6BC;}
.hero-dark .meta .v{color:#fff;}
.hero-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:var(--sky);padding:7px 13px;margin-bottom:26px;}
.hero-tag i{font-size:15px;}

/* eyebrow wordmark lockup in hero */
.wm-sub{font-family:var(--font-mono);font-size:clamp(11px,1.4vw,14px);letter-spacing:.42em;
  text-transform:uppercase;color:var(--sky);margin-top:22px;}

/* big section header with icon + index */
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:26px;}
.sec-head .sh-ico{width:42px;height:42px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;}
.sec-head .sh-ico i{font-size:21px;}
.sec-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,3vw,30px);letter-spacing:-.03em;line-height:1;}
.sec-head .sh-meta{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:5px;}

/* value chips row */
.values{display:flex;flex-wrap:wrap;gap:12px;}
.value{display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:var(--surface);padding:14px 18px;box-shadow:var(--shadow);}
.value i{font-size:20px;color:var(--royal);}
.value .vt{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.01em;}
.value .vd{font-size:12px;color:var(--muted);}

/* persona profile */
.persona{display:grid;grid-template-columns:300px 1fr;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);}
.persona .pic{position:relative;background:var(--navy);overflow:hidden;}
.persona .pic img{width:100%;height:100%;object-fit:cover;display:block;}
.persona .pic .tier{position:absolute;top:14px;left:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;background:var(--sky);color:var(--navy);padding:5px 10px;}
.persona .body{padding:28px 30px;}
.persona .pname{font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:-.03em;line-height:1;}
.persona .prole{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--royal);margin-top:8px;}
.persona .pquote{font-size:17px;line-height:1.45;color:var(--ink);border-left:3px solid var(--sky);padding-left:16px;margin:18px 0 22px;font-weight:500;}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px;}
.fact{display:grid;grid-template-columns:34px 1fr;gap:12px;}
.fact .fi{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-2);color:var(--navy);}
.fact .fi i{font-size:18px;}
.fact .fl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.fact .fv{font-size:13.5px;color:var(--ink-soft);margin-top:2px;line-height:1.4;}
@media(max-width:620px){.facts{grid-template-columns:1fr;}}

/* message / tagline tiles */
.tagline-tile{background:var(--navy);color:#fff;padding:30px;display:flex;flex-direction:column;justify-content:space-between;min-height:150px;}
.tagline-tile.royal{background:var(--royal);}
.tagline-tile.sky{background:var(--sky);color:var(--navy);}
.tagline-tile .tl-k{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.8;display:flex;align-items:center;gap:7px;}
.tagline-tile .tl-q{font-family:var(--font-display);font-weight:800;font-size:23px;letter-spacing:-.02em;line-height:1.1;margin-top:24px;}

/* inline icon in body labels */
.divlabel{display:flex;align-items:center;gap:9px;}
.divlabel i{font-size:15px;color:var(--royal);}

/* ---------- creative concepts ---------- */
.concept{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);margin:0 0 22px;}
.concept.selected{border:2px solid var(--royal);}
.concept-grid{display:grid;grid-template-columns:0.95fr 1.05fr;}
.concept-viz{background:var(--navy);min-height:300px;display:flex;align-items:center;justify-content:center;padding:30px;position:relative;overflow:hidden;}
.concept-viz svg{width:100%;height:auto;max-width:300px;display:block;}
.concept-body{padding:32px 34px;display:flex;flex-direction:column;}
.concept-kick{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.concept-no{font-family:var(--font-display);font-weight:800;font-size:14px;color:#fff;background:var(--royal);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.concept.selected .concept-no{background:var(--sky);color:var(--navy);}
.concept-title{font-family:var(--font-display);font-weight:800;font-size:clamp(23px,2.6vw,32px);letter-spacing:-.03em;line-height:1.05;margin-bottom:14px;}
.concept-desc{font-size:14.5px;color:var(--ink-soft);line-height:1.6;}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#0A5FB8;background:var(--glacier-soft);padding:6px 11px;}
.concept-foot{margin-top:auto;padding-top:18px;}
/* selected concept = full-width header band */
.concept.band .concept-body{padding:30px 34px;}
.concept.band .concept-title{font-size:clamp(26px,3.4vw,40px);}
@media(max-width:760px){.concept-grid{grid-template-columns:1fr;}.concept-viz{min-height:220px;}}

/* ---------- concept tab bar (sticky, scroll-spy) ---------- */
.concept-tabs{position:sticky;top:var(--nav-h,56px);z-index:40;background:#00141E;box-shadow:0 6px 20px -10px rgba(0,20,30,.7);}
.concept-tabs-inner{max-width:var(--maxw);margin:0 auto;padding:0 18px;display:flex;gap:2px;overflow-x:auto;}
.ctab{display:flex;align-items:center;gap:10px;padding:17px 18px;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#8FB0C6;border-bottom:3px solid transparent;white-space:nowrap;transition:color .15s ease,border-color .15s ease,background .15s ease;}
.ctab .cn-no{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--sky);}
.ctab i{font-size:15px;color:var(--sky);}
.ctab:hover{color:#fff;background:rgba(255,255,255,.05);}
.ctab.active{color:#fff;border-bottom-color:var(--sky);background:rgba(46,157,255,.14);}
.ctab.active .cn-no,.ctab.active i{color:var(--sky);}

/* per-concept navy opener band */
.concept-stack{scroll-margin-top:var(--anchor-off,120px);}
.concept-band{background:var(--navy);color:#fff;padding:46px 0;position:relative;overflow:hidden;}
.concept-band .cb-inner{display:grid;grid-template-columns:1fr;gap:34px;align-items:center;}
.concept-band .cb-kick{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);margin-bottom:22px;}
.concept-band .cb-row{display:flex;gap:20px;align-items:flex-start;}
.concept-band .cb-no{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,6vw,72px);line-height:.85;color:var(--sky);letter-spacing:-.04em;flex:none;}
.concept-band .cb-title{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3.6vw,46px);letter-spacing:-.03em;line-height:1.02;color:#fff;}
.concept-band .cb-desc{color:#C7D6E0;max-width:62ch;margin-top:14px;font-size:15.5px;line-height:1.6;}
.cb-motif{display:flex;align-items:center;justify-content:center;}
.cb-motif svg{width:100%;height:auto;max-width:230px;display:block;}
@media(max-width:760px){.concept-band .cb-inner{grid-template-columns:1fr;}.cb-motif{display:none;}}

/* ---- concept hero: full-bleed image, white text/vector, bleed behind central card ---- */
.concept-band.cb-hero{
  background-color:var(--navy);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  padding-bottom:148px;
}
.concept-band.cb-hero .cb-inner{position:relative;z-index:1;}
/* all hero text white */
.cb-hero .cb-row{max-width:72%;}
@media(max-width:760px){.cb-hero .cb-row{max-width:100%;}}
.cb-hero .cb-kick{color:#fff;}
.cb-hero .cb-no{color:#fff;}
.cb-hero .cb-title{color:#fff;}
.cb-hero .cb-desc{color:#fff;}
/* vector graphic fully white */
.cb-hero .cb-motif svg [stroke]{stroke:#fff !important;}
.cb-hero .cb-motif svg [fill]:not([fill="none"]){fill:#fff !important;}
/* central card overlaps up so the hero image bleeds behind its top half */
.section.cb-overlap{margin-top:-120px;position:relative;z-index:5;border-top:none;}

/* ---------- zoom lightbox ---------- */
.zoomable{cursor:zoom-in;}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,16,24,.94);display:none;align-items:center;justify-content:center;padding:40px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:94vw;max-height:88vh;width:auto;height:auto;box-shadow:0 24px 70px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08);}
.lb-close{position:fixed;top:16px;right:20px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.08);border:none;cursor:pointer;font-size:22px;}
.lb-close:hover{background:rgba(255,255,255,.18);}
.lb-cap{position:fixed;bottom:18px;left:0;right:0;text-align:center;color:#9FC0D6;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:0 20px;}
.shot,.feature{position:relative;}
figure.shot .zoom-hint,figure.feature .zoom-hint{position:absolute;top:10px;right:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:rgba(0,20,30,.55);color:#fff;font-size:15px;opacity:0;transition:opacity .15s ease;pointer-events:none;}
figure.shot:hover .zoom-hint,figure.feature:hover .zoom-hint{opacity:1;}