/* =========================================================
   Spire Ventures — brand-aligned institutional theme
   Palette sampled from the brand logo:
   navy #23303B · slate #424D57 · grey #A3A3A2 · bronze #9c8a70
   ========================================================= */

:root{
  --navy:       #23303b;   /* brand deep navy (SPIRE) */
  --navy-deep:  #19232c;   /* darker — footer / overlays */
  --navy-ink:   #14202a;
  --slate:      #424d57;
  --ink:        #1f2a33;   /* body headings */
  --ink-soft:   #4a545d;   /* secondary text */
  --paper:      #f7f5f0;   /* warm off-white */
  --paper-2:    #efece3;   /* alt section */
  --paper-3:    #e7e2d6;
  --line:       #d8d2c5;   /* hairlines */
  --grey:       #a3a3a2;   /* brand grey (ventures) */
  --bronze:     #9c8a70;   /* brand metallic */
  --bronze-2:   #bcab90;   /* lighter metallic */
  --bronze-3:   #d8ccb6;
  --white:      #ffffff;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 68px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:17px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--serif); font-weight:500; line-height:1.08;
  letter-spacing:.004em; color:var(--ink);
}
p{ color:var(--ink-soft); }
a{ color:inherit; text-decoration:none; }

.eyebrow{
  font-family:var(--sans); font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--bronze); font-weight:600;
  margin-bottom:20px; display:flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:""; width:30px; height:1px; background:var(--bronze); display:inline-block; opacity:.7;
}

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(247,245,240,.85);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.scrolled{
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 40px -28px rgba(25,35,44,.45);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:32px; height:88px; }
.nav-links a{ white-space:nowrap; }
.brand{ display:inline-flex; align-items:center; }
.brand-logo{ height:46px; width:auto; display:block; transition:opacity .3s var(--ease); }
.brand:hover .brand-logo{ opacity:.78; }

.nav-links{ display:flex; gap:36px; align-items:center; list-style:none; }
.nav-links a{
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500; position:relative; padding:8px 0;
  transition:color .25s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:2px; height:1px; width:0;
  background:var(--bronze); transition:width .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--navy); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; width:34px; height:34px; position:relative; }
.nav-toggle span{ position:absolute; left:5px; right:5px; height:1.6px; background:var(--navy); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle span:nth-child(1){ top:11px; }
.nav-toggle span:nth-child(2){ top:17px; }
.nav-toggle span:nth-child(3){ top:23px; }
.nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
/* sticky header occupies flow, so the hero fills what is left of the viewport
   and the scroll cue stays above the fold */
.hero{ position:relative; overflow:hidden; background:var(--navy-deep); color:var(--white); min-height:clamp(500px,72svh,720px); display:flex; align-items:flex-start; padding-block:0; }
.hero-bg{
  position:absolute; inset:0; background-image:url("images/hero-skyline.jpg");
  background-size:cover; background-position:center 38%;
  transform:scale(1.08); animation:heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift{ from{ transform:scale(1.08) translateY(0); } to{ transform:scale(1.14) translateY(-12px); } }
.hero-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 620px at 78% -10%, rgba(156,138,112,.20), transparent 58%),
    linear-gradient(180deg, rgba(25,35,44,.62) 0%, rgba(20,32,42,.78) 55%, rgba(20,32,42,.92) 100%);
}
.hero .container{ position:relative; z-index:2; padding-block:clamp(56px,9vh,110px) clamp(64px,8vh,88px); width:100%; }
.hero-rule{ margin-top:clamp(26px,3.4vh,40px); width:clamp(120px,22vw,300px); height:1px; background:rgba(247,245,240,.42); }
.hero .eyebrow{ color:var(--bronze-2); }

/* Hero load-in */
@keyframes riseIn{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }
.hero .eyebrow,.hero h1,.hero .lede,.hero-meta{ opacity:0; animation:riseIn 1s var(--ease) forwards; }
.hero h1{ animation-delay:.1s; }
.hero .lede{ animation-delay:.24s; }
.hero-meta{ animation-delay:.38s; }

/* Scroll cue — pinned to the bottom of the hero box, which is sized to the
   viewport minus the sticky header, so it clears the fold and the copy above it */
.scroll-cue{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgba(247,245,240,.55);
  opacity:0; animation:riseIn 1s var(--ease) .6s forwards;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.scroll-cue.hidden{ opacity:0 !important; visibility:hidden; pointer-events:none; }
.scroll-cue .line{ width:1px; height:36px; background:rgba(247,245,240,.22); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:""; position:absolute; left:0; top:0; width:100%; height:42%; background:var(--bronze-2); animation:cueMove 1.9s var(--ease) infinite; }
@keyframes cueMove{ 0%{ transform:translateY(-110%); } 100%{ transform:translateY(260%); } }
@media (prefers-reduced-motion:reduce){
  .hero .eyebrow,.hero h1,.hero .lede,.hero-meta,.scroll-cue{ opacity:1; animation:none; }
  .scroll-cue .line::after{ animation:none; }
}
.hero .eyebrow::before{ background:var(--bronze-2); }
.hero h1{
  color:var(--white); font-size:clamp(46px,8.2vw,108px); line-height:.97;
  max-width:15ch; font-weight:500; letter-spacing:-.005em;
  margin-top:0;
}
.hero h1 em{ font-style:italic; color:var(--bronze-2); }
.hero .lede{
  margin-top:34px; max-width:58ch; font-size:clamp(17px,2.1vw,21px);
  color:rgba(247,245,240,.82); line-height:1.66;
}
.hero-meta{ margin-top:56px; display:flex; flex-wrap:wrap; gap:54px; border-top:1px solid rgba(247,245,240,.16); padding-top:32px; }
.hero-meta .stat .num{ font-family:var(--serif); font-size:40px; color:var(--white); line-height:1; }
.hero-meta .stat.wide{ max-width:340px; }
.hero-meta .stat.wide .num{ font-size:26px; line-height:1.15; }
.hero-meta .stat .lbl{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(247,245,240,.6); margin-top:11px; }

/* Short viewports: scale hero content so it fits the fold alongside the cue */
@media (max-height:820px){
  .hero{ min-height:clamp(460px,66svh,620px); }
  .hero h1{ font-size:clamp(38px,5.4vw,62px); }
  .hero .lede{ margin-top:22px; font-size:clamp(15.5px,1.6vw,17.5px); line-height:1.55; }
  .hero-meta{ margin-top:30px; padding-top:22px; gap:36px; }
  .hero-meta .stat .num{ font-size:32px; }
  .hero-meta .stat.wide .num{ font-size:21px; }
  .hero .container{ padding-block:44px 74px; }
}
@media (max-height:660px){
  .hero h1{ font-size:clamp(30px,4.2vw,44px); }
  .hero .lede{ margin-top:16px; font-size:15px; }
  .hero-meta{ display:none; }
  .hero .container{ padding-block:10px 70px; }
}
.hero-emblem{
  position:absolute; right:clamp(16px,5vw,80px); bottom:clamp(20px,5vw,60px); z-index:2;
  width:clamp(64px,9vw,108px); opacity:.9;
}

/* ---------- Sections ---------- */
section{ padding-block:clamp(56px,8vw,104px); position:relative; }
.section-alt{ background:var(--paper-2); }
.section-dark{ background:var(--navy); color:var(--white); }
.section-head{ max-width:780px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(33px,5vw,58px); }
.section-head p{ margin-top:22px; font-size:19px; }

.lead-row{ display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(40px,7vw,100px); align-items:start; }
.lead-row h2{ font-size:clamp(31px,4.6vw,54px); }
.lead-row .body p + p{ margin-top:20px; }

/* ---------- Our story + watercolour skyline: one continuous scene ---------- */
/* Single section, flat #efefed (sampled from the artwork's own sky) so there is
   no band, no seam and no fade. The skyline sits behind the copy and rises up
   into it, rather than being a separate strip below. */
.story-sky{
  position:relative; overflow:hidden; isolation:isolate; background:#efefed;
  /* The artwork scales with width, so the space the buildings occupy is a fixed
     fraction of viewport width (~27.7vw). Bottom padding tracks that in vw so the
     copy clears the silhouettes at every size, on a floor for narrow screens. */
  padding-block:clamp(44px,5vw,72px) max(215px,35vw);
}
.story-sky .skybg{
  position:absolute; left:0; right:0; bottom:0; z-index:0;
  height:max(250px,30vw);
  background:url("images/skyline-watercolour.jpg") center bottom / cover no-repeat;
  transform-origin:center bottom; animation:kenburns 38s ease-in-out infinite alternate;
}
@keyframes kenburns{ 0%{ transform:scale(1.03); } 100%{ transform:scale(1.12); } }
.story-sky .sky-fx{
  position:absolute; left:0; right:0; top:0; bottom:max(160px,24vw);
  z-index:1; pointer-events:none;
}
.story-sky .container{ position:relative; z-index:2; }
.sky-fx .sun{
  position:absolute; right:14%; top:20%; width:clamp(88px,12vw,150px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(188,171,144,.55), rgba(188,171,144,0) 68%);
  animation:sunPulse 9s ease-in-out infinite;
}
@keyframes sunPulse{ 0%,100%{ transform:scale(1); opacity:.75; } 50%{ transform:scale(1.08); opacity:1; } }
.sky-fx .cloud{ position:absolute; left:0; height:clamp(26px,4vw,50px); border-radius:50%; filter:blur(7px); background:radial-gradient(closest-side, rgba(110,116,122,.20), rgba(110,116,122,0) 76%); will-change:transform; }
.sky-fx .c1{ top:24%; width:clamp(140px,22vw,320px); opacity:.5; animation:drift 44s linear infinite; }
.sky-fx .c2{ top:42%; width:clamp(90px,14vw,200px); opacity:.4; animation:drift 60s linear infinite; animation-delay:-16s; }
.sky-fx .c3{ top:12%; width:clamp(180px,26vw,380px); opacity:.3; animation:drift 74s linear infinite; animation-delay:-36s; }
@keyframes drift{ from{ transform:translateX(-32vw); } to{ transform:translateX(128vw); } }
@media (prefers-reduced-motion:reduce){ .story-sky .skybg{ animation:none; } .story-sky .sky-fx{ display:none; } }

/* ---------- Watercolour band ---------- */
.skyline-band{
  background:var(--paper-3);
  background-image:url("images/skyline-watercolour.jpg");
  background-size:cover; background-position:center bottom; background-repeat:no-repeat;
  min-height:clamp(240px,26vw,380px);
  display:flex; align-items:center;
}
.skyline-band .container{ padding-block:clamp(40px,5vw,64px); }
.skyline-band .quote{
  font-family:var(--serif); font-style:italic; font-size:clamp(26px,4vw,46px);
  line-height:1.18; max-width:18ch; color:var(--navy);
}
.skyline-band .quote .by{ display:block; font-style:normal; font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); margin-top:22px; }

/* ---------- Blog list ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,40px); }
.blog-card{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); position:relative; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.blog-card:hover{ transform:translateY(-4px); box-shadow:0 30px 56px -38px rgba(25,35,44,.5); border-color:var(--bronze-2); }
.blog-thumb{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--navy); }
.blog-thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(100%) contrast(1.03); transition:filter .6s var(--ease), transform .9s var(--ease); }
.blog-card:hover .blog-thumb img{ filter:grayscale(0%); transform:scale(1.05); }
.blog-thumb.placeholder{ background:var(--navy) url("images/logo-emblem.png") center/34% no-repeat; }
.blog-body{ padding:clamp(24px,2.4vw,32px); display:flex; flex-direction:column; flex:1; }
.blog-meta{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze); font-weight:600; display:flex; gap:12px; flex-wrap:wrap; }
.blog-card h3{ font-size:clamp(22px,2.2vw,27px); line-height:1.1; margin-top:14px; }
.blog-card p{ margin-top:14px; font-size:15px; }
.blog-card .visit{ margin-top:auto; padding-top:22px; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--navy); }
.blog-card .visit span{ color:var(--bronze); display:inline-block; margin-left:8px; transition:margin-left .25s var(--ease); }
.blog-card:hover .visit span{ margin-left:14px; }
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }

/* ---------- People grid ---------- */
.people{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(44px,6vw,84px) clamp(36px,5vw,64px); }
.person .photo-wrap{ position:relative; overflow:hidden; border:1px solid var(--line); background:var(--paper-2); }
.person .photo-wrap::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(25,35,44,.28));
  opacity:0; transition:opacity .5s var(--ease);
}
.person:hover .photo-wrap::after{ opacity:1; }
.person .photo{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  border:1px solid var(--line); background:var(--paper-2);
  filter:grayscale(100%) contrast(1.03); transform:scale(1.001);
  transition:filter .6s var(--ease), transform .9s var(--ease);
}
.photo-wrap .photo{ border:0; }
.person:hover .photo{ filter:grayscale(0%); transform:scale(1.04); }
.person .name{ font-size:27px; margin-top:26px; }
.person .role{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze); font-weight:600; margin-top:9px; }
.person .bio{ margin-top:16px; font-size:15.5px; line-height:1.72; }
.person .bio p + p{ margin-top:14px; }
.person .ln{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--navy); font-weight:600; border-bottom:1px solid var(--bronze); padding-bottom:3px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.person .ln:hover{ color:var(--bronze); }

.subhead{
  font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze); font-weight:600; border-top:1px solid var(--line);
  padding-top:30px; margin-top:30px; display:flex; align-items:center; gap:14px;
}

/* ---------- Venture partners (compact stat cards) ---------- */
.vp-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.6vw,34px);
}
.vp-card{
  text-align:center; padding:clamp(22px,2.4vw,32px) 16px;
  background:var(--white); border:1px solid var(--line);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.vp-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -34px rgba(25,35,44,.5); border-color:var(--bronze-2); }
.vp-photo{
  width:104px; height:104px; border-radius:50%; object-fit:cover; margin:0 auto 18px;
  display:block; border:1px solid var(--line);
  filter:grayscale(100%) contrast(1.03); transition:filter .5s var(--ease);
}
.vp-card:hover .vp-photo{ filter:grayscale(0%); }
.vp-photo.placeholder{ background:var(--navy) url("images/logo-emblem.png") center/56% no-repeat; }
.vp-name{ font-family:var(--serif); font-size:21px; line-height:1.12; color:var(--ink); }
.vp-role{ font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--bronze); font-weight:600; margin-top:9px; }
.vp-stat{ font-size:13.5px; color:var(--ink-soft); margin-top:12px; line-height:1.5; }
.vp-ln{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; margin:16px auto 0; border:1px solid var(--line); border-radius:50%;
  color:var(--ink-soft); transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.vp-ln svg{ width:14px; height:14px; fill:currentColor; }
.vp-ln:hover{ border-color:var(--bronze); color:var(--white); background:var(--bronze); }
@media (max-width:980px){ .vp-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .vp-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Interactive investments showcase ---------- */
.showcase-wrap{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(28px,4vw,64px); align-items:stretch; }
.showcase-list{ list-style:none; border-top:1px solid var(--line); align-self:start; }
.show-item{
  display:flex; align-items:center; gap:18px; padding:22px 6px; width:100%;
  border-bottom:1px solid var(--line); cursor:pointer; background:none; border-left:0; border-right:0; border-top:0;
  text-align:left; font-family:inherit; transition:padding-left .35s var(--ease);
}
.show-item .idx{ font-size:11px; letter-spacing:.14em; color:var(--bronze); font-weight:700; width:24px; flex:none; }
.show-item .nm{ font-family:var(--serif); font-size:clamp(22px,2.4vw,28px); color:var(--ink); transition:color .3s var(--ease); flex:1; line-height:1.05; }
.show-item .sct{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); opacity:0; transform:translateX(-6px); transition:opacity .3s var(--ease), transform .3s var(--ease); text-align:right; max-width:40%; }
.show-item:hover{ padding-left:14px; }
.show-item:hover .nm, .show-item.active .nm{ color:var(--bronze); }
.show-item.active{ padding-left:14px; }
.show-item.active .sct{ opacity:.85; transform:none; }

.showcase-panels{ position:relative; background:var(--navy); color:var(--white); min-height:clamp(360px,42vw,440px); overflow:hidden; }
.showcase-panels::after{ content:""; position:absolute; right:-90px; bottom:-90px; width:300px; height:300px; background:radial-gradient(circle, rgba(156,138,112,.18), transparent 70%); pointer-events:none; }
.show-panel{
  position:absolute; inset:0; padding:clamp(30px,4vw,56px);
  display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .55s var(--ease), transform .55s var(--ease), visibility .55s var(--ease);
}
.show-panel.active{ opacity:1; visibility:visible; transform:none; }
.show-panel .sp-tag{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-2); font-weight:600; margin-bottom:18px; }
.show-panel h3{ color:var(--white); font-size:clamp(30px,4vw,46px); line-height:1.04; }
.show-panel p{ color:rgba(247,245,240,.78); margin-top:18px; max-width:48ch; font-size:16px; }
.sp-foot{ margin-top:auto; padding-top:26px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; border-top:1px solid rgba(247,245,240,.16); }
.sp-stat strong{ display:block; font-family:var(--serif); font-size:clamp(30px,4vw,44px); color:var(--white); line-height:1; }
.sp-stat span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(247,245,240,.55); margin-top:8px; display:block; }
.sp-link{ font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--bronze-2); white-space:nowrap; }
.sp-link span{ display:inline-block; margin-left:8px; transition:margin-left .25s var(--ease); }
.sp-link:hover span{ margin-left:14px; }
@media (max-width:860px){
  .showcase-wrap{ grid-template-columns:1fr; }
  .show-item .sct{ display:none; }
}

/* ---------- Animated stats band ---------- */
.stats{ background:var(--navy); color:var(--white); position:relative; overflow:hidden; }
.stats::before{
  content:""; position:absolute; left:-140px; bottom:-160px; width:460px; height:460px;
  background:radial-gradient(circle, rgba(156,138,112,.16), transparent 70%);
}
.stats .container{ position:relative; z-index:2; }
.stats .section-head h2{ color:var(--white); }
.stats .section-head p{ color:rgba(247,245,240,.74); }
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(247,245,240,.14); border:1px solid rgba(247,245,240,.14);
}
.stat-cell{ background:var(--navy); padding:clamp(28px,3.4vw,44px) clamp(16px,2vw,26px); text-align:left; }
.stat-cell .figure{ font-family:var(--serif); font-size:clamp(40px,5vw,62px); line-height:1; color:var(--white); }
.stat-cell .figure .suffix{ color:var(--bronze-2); }
.stat-cell .cap{ margin-top:14px; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:rgba(247,245,240,.62); line-height:1.5; }
.stats .foot{ margin-top:26px; font-size:12.5px; color:rgba(247,245,240,.5); }
@media (max-width:980px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .stats-grid{ grid-template-columns:1fr; } }

/* ---------- Cards (approach / portfolio / blog) ---------- */
.port-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.port-card{
  background:var(--paper); padding:clamp(30px,4vw,54px);
  display:flex; flex-direction:column; position:relative;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.port-card::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--bronze);
  transition:width .45s var(--ease);
}
.port-card:hover{ background:var(--white); }
.port-card:hover::before{ width:100%; }
.port-card .pc-top{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.port-card h3{ font-size:28px; }
.port-card .tag{ font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--bronze); font-weight:600; white-space:nowrap; }
.port-card p{ margin-top:16px; font-size:15.5px; }
.port-card .visit{ margin-top:auto; padding-top:24px; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--navy); }
.port-card .visit span{ color:var(--bronze); display:inline-block; margin-left:8px; transition:margin-left .25s var(--ease); }
.port-card:hover .visit span{ margin-left:14px; }

/* index numbering on approach */
.numbered .port-card{ counter-increment:step; }
.numbered .port-card .pc-top h3::before{
  content:"0" counter(step); display:block; font-family:var(--sans); font-size:12px;
  letter-spacing:.14em; color:var(--bronze); font-weight:700; margin-bottom:12px;
}
.numbered{ counter-reset:step; }

/* ---------- Contact ---------- */
.contact{ background:var(--navy); color:var(--white); position:relative; overflow:hidden; }
.contact::before{
  content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px;
  background:radial-gradient(circle, rgba(156,138,112,.16), transparent 70%);
}
.contact h2{ color:var(--white); font-size:clamp(33px,5vw,58px); }
.contact .eyebrow{ color:var(--bronze-2); }
.contact .eyebrow::before{ background:var(--bronze-2); }
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,7vw,92px); align-items:start; position:relative; z-index:2; }
.contact p{ color:rgba(247,245,240,.76); }
.contact .detail{ margin-top:32px; }
.contact .detail .k{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(247,245,240,.52); margin-bottom:7px; }
.contact .detail .v{ font-size:19px; color:var(--white); font-family:var(--serif); }
.contact .detail .v a:hover{ color:var(--bronze-2); }

.form .field{ margin-bottom:24px; }
.form label{ display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,245,240,.58); margin-bottom:10px; }
.form input, .form textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(247,245,240,.26);
  color:var(--white); font-family:var(--sans); font-size:16px; padding:11px 0;
  transition:border-color .3s var(--ease);
}
.form input:focus, .form textarea:focus{ outline:none; border-color:var(--bronze-2); }
.form textarea{ resize:vertical; min-height:92px; }
.btn{
  margin-top:8px; display:inline-flex; align-items:center; gap:12px;
  background:var(--bronze); color:#1a140c; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; padding:17px 36px; border:0; cursor:pointer;
  transition:background .3s var(--ease), transform .2s var(--ease);
}
.btn:hover{ background:var(--bronze-2); transform:translateY(-2px); }

/* ---------- Interior page hero ---------- */
/* padding-block:0 — the container owns all vertical spacing here, otherwise the
   site-wide section padding is added on top and doubles the gap */
.page-hero{ position:relative; overflow:hidden; background:var(--navy-deep); color:var(--white); padding-block:0; }
.page-hero .pgh-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 480px at 85% -20%, rgba(156,138,112,.18), transparent 60%),
    linear-gradient(180deg, #243340 0%, #18222b 100%);
}
.page-hero .container{ position:relative; z-index:2; padding-block:clamp(56px,7vw,84px) clamp(84px,9vw,116px); }
.page-hero .eyebrow{ color:var(--bronze-2); }
.page-hero .eyebrow::before{ background:var(--bronze-2); }
.page-hero h1{ color:var(--white); font-size:clamp(42px,7vw,86px); max-width:18ch; }
.page-hero p{ margin-top:26px; max-width:62ch; color:rgba(247,245,240,.78); font-size:19px; }
/* Interior pages use the same emblem treatment as the home hero */
.page-hero .pgh-emblem{
  position:absolute; right:clamp(16px,5vw,80px); bottom:clamp(20px,5vw,60px); z-index:2;
  width:clamp(64px,9vw,108px); opacity:.9;
}

/* Short viewports: keep the interior hero (and its emblem) inside the first screen */
@media (max-height:820px){
  .page-hero .container{ padding-block:40px 76px; }
  .page-hero h1{ font-size:clamp(32px,4.4vw,54px); }
  .page-hero p{ margin-top:16px; font-size:16.5px; }
}
@media (max-height:620px){
  .page-hero .container{ padding-block:32px 68px; }
  .page-hero h1{ font-size:clamp(28px,3.8vw,42px); }
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-deep); color:rgba(247,245,240,.6); padding-block:70px; border-top:1px solid rgba(247,245,240,.08); }
.footer-grid{ display:flex; justify-content:space-between; align-items:flex-start; gap:44px; flex-wrap:wrap; }
.footer-logo{ height:54px; width:auto; display:block; margin-bottom:16px; }
.site-footer .addr{ font-size:14px; line-height:1.75; }
.site-footer .addr a:hover{ color:var(--bronze-2); }
.footer-links{ display:flex; gap:30px; flex-wrap:wrap; list-style:none; }
.footer-links a{ font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:rgba(247,245,240,.6); }
.footer-links a:hover{ color:var(--bronze-2); }
.footer-bottom{ margin-top:50px; padding-top:26px; border-top:1px solid rgba(247,245,240,.08); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12.5px; letter-spacing:.04em; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-bg{ animation:none; }
}

/* ---------- Disclaimer ---------- */
.disclaimer{ background:var(--paper-2); border-top:1px solid var(--line); padding-block:36px; }
.disclaimer p{ font-size:12.5px; line-height:1.7; color:var(--ink-soft); }

/* ---------- Responsive ---------- */
/* nav collapses at 980px: "News & Insights" makes the inline nav need ~954px,
   so the hamburger must engage before the links can wrap */
@media (max-width:980px){
  .nav-links{
    position:fixed; inset:88px 0 auto 0; background:var(--paper);
    flex-direction:column; gap:0; border-bottom:1px solid var(--line);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .32s var(--ease), opacity .32s var(--ease);
    padding:8px var(--gutter) 26px;
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links li{ width:100%; border-top:1px solid var(--line); }
  .nav-links a{ display:block; padding:18px 0; font-size:15px; }
  .nav-links a::after{ display:none; }
  .nav-toggle{ display:block; }
  .lead-row, .people, .port-grid, .contact-grid{ grid-template-columns:1fr; }
  .hero-meta{ gap:32px; }
  .brand-logo{ height:40px; }
  .nav{ height:72px; }
  .nav-links{ inset:72px 0 auto 0; }
  /* let the interactive showcase flow instead of overlapping */
  .showcase-panels{ min-height:0; }
  .show-panel{ position:relative; opacity:1; visibility:visible; transform:none; }
  .show-panel:not(.active){ display:none; }
}
@media (max-width:600px){
  :root{ --gutter:20px; }
  .hero{ min-height:calc(100svh - 72px); }
  .hero .container{ padding-block:24px 84px; }
  section{ padding-block:clamp(48px,11vw,72px); }
  .section-head{ margin-bottom:32px; }
  .hero-meta{ margin-top:36px; padding-top:24px; }
  .hero-meta .stat.wide{ max-width:none; }
  .sp-foot{ flex-direction:column; align-items:flex-start; gap:16px; }
  .contact .detail .v{ font-size:17px; }
  .footer-grid{ gap:32px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:8px; }
  .page-hero .container{ padding-block:48px 72px; }
}

/* ---------- Footer insignia watermark ---------- */
.site-footer{ position:relative; overflow:hidden; }
.site-footer > .container{ position:relative; z-index:1; }
.footer-emblem{
  position:absolute; right:clamp(-70px,-4vw,-30px); bottom:-40px;
  width:clamp(180px,22vw,300px); height:auto; opacity:.07;
  pointer-events:none; user-select:none; z-index:0;
}
@media (max-width:860px){ .footer-emblem{ width:170px; right:-50px; bottom:-30px; opacity:.06; } }

/* ---------- Own / permanent capital note ---------- */
.capital-note{
  margin-top:32px; padding-top:26px; border-top:1px solid var(--line);
}
.capital-note .cn-head{
  font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--bronze); margin:0 0 10px;
}
.capital-note p{ margin:0; }

/* ---------- Portfolio news ---------- */
.news-list{ border-top:1px solid var(--line); }
.news-item{
  display:grid; grid-template-columns:150px minmax(0,1fr) auto; align-items:baseline;
  gap:clamp(14px,2.6vw,36px); padding:26px 6px; border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease), background .35s var(--ease);
}
.news-item:hover{ padding-left:16px; background:var(--white); }
.news-co{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--bronze); }
.news-main h3{ font-family:var(--serif); font-size:clamp(19px,1.9vw,23px); line-height:1.2; font-weight:500; color:var(--ink); }
.news-main p{ margin-top:8px; font-size:14.5px; }
.news-src{ margin-top:10px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.news-date{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; }
.news-item:hover h3{ color:var(--bronze); }
@media (max-width:760px){
  .news-item{ grid-template-columns:1fr; gap:8px; padding:22px 4px; }
  .news-date{ order:-1; }
}

/* ---------- Mobile overflow guards ---------- */
html, body{ max-width:100%; overflow-x:hidden; }
/* An unwrappable tag beside the name is what forced cards past their track.
   These guards apply at all widths, not only phones. */
.pc-top, .port-card, .news-item, .blog-card{ min-width:0; }
.port-card .tag{ overflow-wrap:anywhere; }
@media (max-width:1080px){
  .port-card .pc-top{ flex-direction:column; align-items:flex-start; gap:8px; }
  .port-card .tag{ white-space:normal; }
}
@media (max-width:600px){
  .port-card h3{ font-size:24px; }
  .port-card h3, .port-card p, .news-main h3{ overflow-wrap:anywhere; }
  .section-head p, .port-card p{ max-width:100%; }
}

/* The nav breakpoint moved to 980px so "News & Insights" cannot wrap.
   Content columns stay intact through the 881-980px band. */
@media (min-width:881px) and (max-width:980px){
  .lead-row{ grid-template-columns:1fr 1.12fr; }
  .contact-grid{ grid-template-columns:1.1fr .9fr; }
  .people, .port-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-meta{ gap:54px; }
  .brand-logo{ height:46px; }
}

/* ---------- Article pages ---------- */
.page-hero .art-meta{
  display:flex; flex-wrap:wrap; gap:20px; margin-top:26px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(247,245,240,.6);
}
.page-hero .art-meta span + span{ position:relative; padding-left:20px; }
.page-hero .art-meta span + span::before{
  content:""; position:absolute; left:0; top:50%; width:8px; height:1px;
  background:rgba(247,245,240,.32);
}
.article{ background:var(--paper); }
.art-wrap{ max-width:74ch; margin:0 auto; }
.art-hero{ margin:0 0 42px; }
.art-hero img{ width:100%; height:auto; display:block; border:1px solid var(--line); }
.art-wrap .art-lead{
  font-family:var(--serif); font-size:clamp(21px,2.2vw,27px); line-height:1.42;
  color:var(--navy); text-wrap:pretty;
}
.art-wrap h2{
  font-family:var(--serif); font-weight:500; color:var(--navy);
  font-size:clamp(23px,2.4vw,31px); line-height:1.2; text-wrap:balance;
  margin:46px 0 4px; padding-top:26px; border-top:1px solid var(--line);
}
.art-wrap p{ margin-top:18px; font-size:17.5px; line-height:1.78; color:var(--ink-soft); text-wrap:pretty; }
.art-wrap p em{ font-style:italic; color:var(--ink); }
.art-foot{ max-width:74ch; margin:56px auto 0; padding-top:28px; border-top:1px solid var(--line); }
.art-back{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--bronze);
  transition:gap .3s var(--ease), color .3s var(--ease);
}
.art-back:hover{ gap:18px; color:var(--navy); }
@media (max-width:600px){
  .art-wrap p{ font-size:16.5px; }
  .art-wrap h2{ margin-top:36px; }
}

/* Realised (exited) marker on portfolio cards */
.port-card .pc-status{
  display:inline-block; align-self:flex-start; width:fit-content;
  margin-top:14px; padding:4px 10px;
  border:1px solid var(--line); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:600; color:var(--ink-soft);
}
.port-card:hover .pc-status{ border-color:var(--bronze); color:var(--bronze); }