/* Aurello Point DR , design tokens per handoff README */
:root{
  --navy:#14213d;
  --ink:#0b0a08;
  --paper:#efe8dc;
  --paper-light:#f6f1e7;
  --paper-light-rgb:246,241,231;
  --paper-dark:#e7dfcf;
  --gold:#ab8a5c;
  --gold-deep:#7d6238;
  --gold-light:#c7a878;
  --line:rgba(171,138,92,.55);
  --line-soft:rgba(171,138,92,.45);
  --muted-86:rgba(20,33,61,.86);
  --muted-82:rgba(20,33,61,.82);
  --muted-78:rgba(20,33,61,.78);
  --header-h:72px;
}

@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url('../fonts/fraunces-variable.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:500 600;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-variable.woff2') format('woff2');
}
@font-face{
  font-family:'Spectral';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/spectral-400.woff2') format('woff2');
}
@font-face{
  font-family:'Spectral';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/spectral-500.woff2') format('woff2');
}
@font-face{
  font-family:'Spectral';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/spectral-400-italic.woff2') format('woff2');
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--paper);color:var(--navy)}
body{font-family:'Spectral',Georgia,serif;-webkit-font-smoothing:antialiased}
a{color:var(--gold-deep);text-decoration:none}
a:hover{color:var(--navy)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:rgba(199,168,120,.35)}
input::placeholder{color:rgba(20,33,61,.5)}
img{max-width:100%;display:block}

.wrap{max-width:1280px;margin:0 auto;padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px)}

/* kicker (small caps label with rule) */
.kicker{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.kicker .rule{width:40px;height:1px;background:var(--gold)}
.kicker span.label,.kicker{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.kicker.on-dark span.label,.kicker.on-dark{color:var(--gold-light)}
.kicker.on-dark .rule{background:var(--gold-light)}

/* Header */
.site-header{position:sticky;top:0;z-index:30;background:var(--paper);-webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line-soft)}
.prog-bar{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0)}
.header-inner{position:relative;max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,56px);height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:baseline;gap:clamp(5px,1.4vw,8px);color:var(--ink);white-space:nowrap;flex:none;min-width:0}
.logo .main{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:.1em;font-size:clamp(15px,4.1vw,25px);color:var(--ink);white-space:nowrap}
.logo .main em{font-style:normal;color:var(--gold)}
.logo .dr{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(9px,2.3vw,15px);letter-spacing:.18em;color:var(--ink);border-left:1px solid var(--gold);padding-left:clamp(5px,1.4vw,8px);white-space:nowrap}
.primary-nav{display:flex;align-items:center;gap:clamp(14px,3vw,36px)}
.primary-nav a{font-size:16px;color:var(--navy);min-height:44px;display:flex;align-items:center}
.primary-nav a:hover{color:var(--gold-deep)}
.primary-nav a[aria-current="page"]{border-bottom:1px solid var(--gold)}
.nav-collapsible{display:flex;align-items:center;gap:clamp(14px,3vw,36px)}
.pill-btn{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:15px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);border:1px solid var(--gold);border-radius:999px;padding:0 20px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;flex:none;transition:background .5s ease,border-color .5s ease,box-shadow .5s ease,transform .35s cubic-bezier(.2,.6,.2,1)}
.pill-btn:hover{background:rgba(199,168,120,.24);border-color:var(--gold-deep);color:var(--navy);box-shadow:0 10px 24px -12px rgba(20,33,61,.35);transform:translateY(-1px)}

/* Mobile menu toggle + panel (below 900px) */
.menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:1px solid var(--gold);border-radius:999px;background:transparent;padding:0;cursor:pointer}
.menu-toggle .bars{position:relative;width:18px;height:12px}
.menu-toggle .bars span{position:absolute;left:0;right:0;height:1px;background:var(--navy);transition:transform .3s ease,opacity .3s ease,top .3s ease}
.menu-toggle .bars span:nth-child(1){top:0}
.menu-toggle .bars span:nth-child(2){top:5.5px}
.menu-toggle .bars span:nth-child(3){top:11px}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(1){top:5.5px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(3){top:5.5px;transform:rotate(-45deg)}
.mobile-nav-panel{display:none}
@media (max-width:899px){
  .primary-nav{display:none}
  .menu-toggle{display:inline-flex}
  .mobile-nav-panel.is-open{display:block;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line-soft);box-shadow:0 18px 34px -20px rgba(20,33,61,.4)}
  .mobile-nav-panel .panel-inner{display:flex;flex-direction:column;padding:4px clamp(16px,6vw,40px) 28px}
  .mobile-nav-panel a:not(.pill-btn){font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);padding:16px 0;border-bottom:1px solid var(--line-soft);min-height:44px;display:flex;align-items:center}
  .mobile-nav-panel .row-btn{padding-top:20px}
  .mobile-nav-panel .pill-btn{width:100%}
}
@media (max-width:340px){
  .header-inner{gap:10px}
}

/* Buttons on dark */
.btn-outline-dark{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 30px;border:1px solid var(--gold-light);border-radius:999px;color:var(--paper-light);font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:16px;line-height:1;letter-spacing:.18em;text-transform:uppercase;transition:background .6s ease,color .6s ease,box-shadow .6s ease,transform .35s cubic-bezier(.2,.6,.2,1)}
.btn-outline-dark:hover{background:var(--gold-light);color:var(--navy);box-shadow:0 14px 32px -14px rgba(0,0,0,.5);transform:translateY(-2px)}
.btn-outline-dark .bar{width:22px;height:1px;background:currentColor;transition:width .4s ease}
.btn-outline-dark:hover .bar{width:28px}
.btn-solid-navy{display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:0 34px;border-radius:999px;border:1px solid var(--navy);background:var(--navy);color:var(--paper-light);font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:16px;line-height:1;letter-spacing:.18em;text-transform:uppercase;transition:background .6s ease,border-color .6s ease,color .6s ease,box-shadow .6s ease,transform .35s cubic-bezier(.2,.6,.2,1)}
.btn-solid-navy:hover{background:var(--gold);border-color:var(--gold);color:var(--navy);box-shadow:0 16px 34px -16px rgba(20,33,61,.55);transform:translateY(-2px)}
.btn-solid-navy .bar{width:22px;height:1px;background:currentColor;transition:width .4s ease}
.btn-solid-navy:hover .bar{width:28px}
.btn-solid-paper{min-height:54px;padding:0 36px;border-radius:999px;border:1px solid var(--paper);background:var(--paper);color:var(--navy);font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:16px;line-height:1;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background .6s ease,border-color .6s ease,color .6s ease,box-shadow .6s ease,transform .35s cubic-bezier(.2,.6,.2,1)}
.btn-solid-paper:hover{background:var(--gold-light);border-color:var(--gold-light);color:var(--navy);box-shadow:0 14px 30px -14px rgba(20,33,61,.35);transform:translateY(-2px)}
.pill-btn,.btn-outline-dark,.btn-solid-navy,.btn-solid-paper{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .pill-btn:hover,.btn-outline-dark:hover,.btn-solid-navy:hover,.btn-solid-paper:hover{transform:none}
}

/* Typography */
h1,h2,h3{margin:0}
.display{font-family:'Fraunces',Georgia,serif;font-weight:300;letter-spacing:-.02em;color:var(--navy)}
.italic-light{font-family:'Fraunces',Georgia,serif;font-weight:300;font-style:italic}

/* Reveal-on-scroll (shared behavior driven by app.js) */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity 1.6s cubic-bezier(.2,.6,.2,1),transform 1.6s cubic-bezier(.2,.6,.2,1)}
[data-reveal].is-shown{opacity:1;transform:none}
[data-draw]{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.8s cubic-bezier(.2,.6,.2,1) .2s}
[data-draw].is-shown{transform:scaleX(1)}
[data-intro]{opacity:0;transform:translateY(16px);transition:opacity 2s ease .15s,transform 2s cubic-bezier(.2,.6,.2,1) .15s}
[data-intro].is-shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal],[data-draw],[data-intro]{transition:none!important;opacity:1!important;transform:none!important}
}

/* Image placeholders (client photography goes here later) */
.img-slot{position:relative;width:100%;height:100%;background:linear-gradient(135deg,rgba(20,33,61,.08),rgba(171,138,92,.14));display:flex;align-items:center;justify-content:center;overflow:hidden}
.img-slot::before{content:attr(data-placeholder);position:absolute;inset:auto 10% auto 10%;top:50%;transform:translateY(-50%);text-align:center;font:italic 13px/1.4 'Spectral',Georgia,serif;color:rgba(20,33,61,.4);pointer-events:none}
.img-slot img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-img-pos,center)}
.hero-media-static{position:absolute;inset:0}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,33,61,.72) 0%,rgba(20,33,61,.5) 45%,rgba(20,33,61,.38) 100%);pointer-events:none}

/* Footer */
.site-footer{border-top:1px solid var(--gold)}
.footer-inner{max-width:1280px;margin:0 auto;padding:40px clamp(20px,4vw,56px) 48px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:24px 48px}
.footer-brand{display:flex;flex-direction:column;gap:12px;max-width:34em}
.footer-brand .logo-row{display:flex;align-items:baseline;gap:8px}
.footer-brand .logo-row .main{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:.12em;font-size:21px;color:var(--ink)}
.footer-brand .logo-row .main em{font-style:normal;color:var(--gold)}
.footer-brand .logo-row .dr{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:13px;letter-spacing:.2em;color:var(--ink);border-left:1px solid var(--gold);padding-left:8px}
.footer-brand p{margin:0;font-size:15px;line-height:1.6;color:var(--muted-78)}
.footer-links{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.footer-links .row{display:flex;gap:20px}
.footer-links a{font-size:15px;min-height:44px;display:flex;align-items:center}
.footer-links .copyright{font-size:15px;color:var(--muted-78)}

/* Section paddings reused across pages */
.pad-hero{padding:clamp(80px,13vw,176px) 0 clamp(64px,9vw,120px)}
.pad-lg{padding:clamp(64px,9vw,120px) 0}
.pad-xl{padding:clamp(72px,10vw,128px) 0}

/* Two-col with sidebar label (story-cols equivalent) */
.split-label{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,22px)}
.num{display:inline-block;will-change:transform;font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:44px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.num.on-dark{color:var(--gold-light)}
.eyebrow{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.eyebrow.on-dark{color:var(--gold-light)}

/* Card grids */
.card-grid{display:grid;gap:clamp(16px,2vw,24px)}
.card-grid.cols-4{grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.card-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.card-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

.contact-email{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:17px;color:var(--paper-light);border-bottom:1px solid rgba(199,168,120,.5);transition:color .4s ease,border-color .4s ease}
.contact-email:hover{color:var(--gold-light);border-color:var(--gold-light)}

.card{display:flex;flex-direction:column;background:var(--paper-light);border:1px solid var(--line);border-radius:18px;padding:clamp(26px,2.6vw,34px);min-height:260px;transition:border-color .6s ease,box-shadow .6s ease,transform .5s cubic-bezier(.2,.6,.2,1)}
.card:hover,.card.is-active{border-color:var(--gold);box-shadow:0 20px 40px -22px rgba(20,33,61,.4);transform:scale(1.015)}
@media (prefers-reduced-motion:reduce){.card:hover,.card.is-active{transform:none}}
.card .num{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:17px;color:var(--gold-deep);font-variant-numeric:tabular-nums}
.card .rule{height:1px;background:var(--gold);margin:22px 0 20px;width:32px;transition:width 1.4s cubic-bezier(.2,.6,.2,1)}
.card:hover .rule,.card.is-active .rule{width:100%}
.card h3{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:24px;line-height:1.15;min-height:2.35em;margin:0 0 12px;color:var(--navy)}
.card .tag{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:15px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);min-height:2.4em;margin-bottom:16px;display:block}
.card p{margin:0;font-size:17px;line-height:1.65;color:var(--muted-86)}

/* Room cards (#rooms): decorative background photo behind the existing card
   content. --overlay-strength is an additive offset (0 = default) on the
   base cream gradient's alpha, so one card can be nudged without touching
   the others. A second, per-card regional gradient (added via [data-room]
   selectors below) handles legibility in one busy area of a photo without
   raising the whole card's overlay. */
.card-photo{position:relative;overflow:hidden;isolation:isolate;--overlay-strength:0;--overlay-hover:0;--img-pos:center 55%;--gold-deep-photo:#644c24}
.card-photo .card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--img-pos);z-index:0;transform:scale(1.001)}
.card-photo::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--overlay-regional,none),radial-gradient(120% 90% at 68% 45%,rgba(var(--paper-light-rgb),0) 0%,rgba(var(--paper-light-rgb),.04) 70%,rgba(var(--paper-light-rgb),.07) 100%),linear-gradient(180deg,rgba(var(--paper-light-rgb),calc(.52 + var(--overlay-strength) + var(--overlay-hover))) 0%,rgba(var(--paper-light-rgb),calc(.46 + var(--overlay-strength) + var(--overlay-hover))) 45%,rgba(var(--paper-light-rgb),calc(.6 + var(--overlay-strength) + var(--overlay-hover))) 100%)}
.card-photo>*:not(.card-bg){position:relative;z-index:2}
.card-photo .tag{color:var(--gold-deep-photo)}
.card-photo .num{color:var(--gold-deep-photo)}
.card-photo a{color:var(--gold-deep-photo)}
.card-photo p{font-weight:500}
@media (prefers-reduced-motion:no-preference){
  .card-photo .card-bg{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
  .card-photo:hover .card-bg,.card-photo:focus-within .card-bg{transform:scale(1.03)}
  .card-photo:hover,.card-photo:focus-within{--overlay-hover:-.05}
}
.card-photo a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* Multi Asset: bottom third is the darkest, busiest part of the photo. */
.card-photo[data-room="0"]{--overlay-strength:.08}
.card-photo[data-room="1"]{--overlay-strength:.26}
/* Emerging Manager: the actual photo's richer tone (olive tree, warm wood
   paneling) sits on the RIGHT third, not the left as originally briefed.
   Regional boost placed there instead so it targets the intended area. */
.card-photo[data-room="2"]{--overlay-regional:linear-gradient(270deg,rgba(var(--paper-light-rgb),.28) 0%,rgba(var(--paper-light-rgb),.28) 33%,rgba(var(--paper-light-rgb),0) 55%);--overlay-strength:.24}
/* Fund III plus: navy ceiling panel across the top 20% would otherwise show
   through behind the card number and gold rule. */
.card-photo[data-room="3"]{--overlay-regional:linear-gradient(180deg,rgba(var(--paper-light-rgb),.34) 0%,rgba(var(--paper-light-rgb),.34) 20%,rgba(var(--paper-light-rgb),0) 38%);--overlay-strength:.29}

/* Per-card crop so the key architectural detail stays in frame at every
   card aspect ratio, from narrow desktop columns to wide mobile rows. */
.card-photo[data-room="0"]{--img-pos:center 78%}
.card-photo[data-room="1"]{--img-pos:center 58%}
.card-photo[data-room="2"]{--img-pos:center 62%}
.card-photo[data-room="3"]{--img-pos:center 58%}
@media (max-width:559px){
  .card-photo[data-room="0"]{--img-pos:center 82%}
  .card-photo[data-room="1"]{--img-pos:center 52%}
  .card-photo[data-room="2"]{--img-pos:center 68%}
  .card-photo[data-room="3"]{--img-pos:center 62%}
}

/* About "Four problems" cards reuse the same .card-photo pattern as the
   homepage room cards (shared image layer, overlay, hover behavior). Only
   the per-card tuning below is specific to this section. data-problem is
   0-indexed: 0=paper formats, 1=folders, 2=archive cabinet, 3=hourglass. */

/* Problem 01 (paper formats): the hard diagonal shadow sits in the lower
   right, behind the body paragraph. Boost is regional (bottom half only)
   rather than raising overlay-strength across the whole card. */
.card-photo[data-problem="0"]{--overlay-regional:linear-gradient(180deg,rgba(var(--paper-light-rgb),0) 0%,rgba(var(--paper-light-rgb),0) 40%,rgba(var(--paper-light-rgb),.05) 60%,rgba(var(--paper-light-rgb),.05) 100%)}
/* Problem 02 (folders): its only dark area, a small navy corner top right,
   is away from the text. Left at default, no tuning needed. */
/* Problem 03 (archive cabinet): the darkest photo overall (deep navy wall,
   glowing cabinet). Base stops are raised by .03, but the bottom stop is
   capped at .94 (not the shared formula's default .03 addition) so the
   brass key on the floor stays faintly visible rather than washing out. */
.card-photo[data-problem="2"]::after{background-image:var(--overlay-regional,none),radial-gradient(120% 90% at 68% 45%,rgba(var(--paper-light-rgb),0) 0%,rgba(var(--paper-light-rgb),.04) 70%,rgba(var(--paper-light-rgb),.07) 100%),linear-gradient(180deg,rgba(var(--paper-light-rgb),calc(.55 + var(--overlay-hover))) 0%,rgba(var(--paper-light-rgb),calc(.49 + var(--overlay-hover))) 45%,rgba(var(--paper-light-rgb),calc(.61 + var(--overlay-hover))) 100%)}
/* Problem 04 (hourglass and folders): the saturated walnut desk fills the
   lower half, behind the body paragraph. Same regional treatment as 01. */
.card-photo[data-problem="3"]{--overlay-regional:linear-gradient(180deg,rgba(var(--paper-light-rgb),0) 0%,rgba(var(--paper-light-rgb),0) 40%,rgba(var(--paper-light-rgb),.05) 60%,rgba(var(--paper-light-rgb),.05) 100%)}

/* Per-card crop so each key element (all three paper formats on 01, the
   paperclip and both folder edges on 02, the full cabinet on 03, the
   hourglass on 04) stays in frame at every card aspect ratio. */
.card-photo[data-problem="0"]{--img-pos:center 46%}
.card-photo[data-problem="1"]{--img-pos:center 50%}
.card-photo[data-problem="2"]{--img-pos:center 42%}
.card-photo[data-problem="3"]{--img-pos:center 48%}
@media (max-width:559px){
  .card-photo[data-problem="0"]{--img-pos:center 38%}
  .card-photo[data-problem="1"]{--img-pos:center 48%}
  .card-photo[data-problem="2"]{--img-pos:center 34%}
  .card-photo[data-problem="3"]{--img-pos:center 55%}
}

/* About "Four problems" cards: subgrid aligns num/rule/title/body across all
   four cards to the same row boundaries, so titles start level and every
   body paragraph starts on the same baseline regardless of how many lines
   a given title wraps to. No guessed min-height, no wasted gap. */
#holds{grid-template-rows:auto auto auto auto}
#holds .card{display:grid;grid-template-rows:subgrid;grid-row:span 4;min-height:0}
#holds .card h3{min-height:0}

/* Scroll-drift numerals (About page "0X" markers) */
[data-drift]{display:inline-block;align-self:flex-start;width:max-content;will-change:transform,opacity}

/* Story section automation graphic. A simple, elegant, interactive diagram
   of documents flowing into one room. Continuous flow animation + hover glow. */
.story-visual{width:340px;max-width:100%;flex:0 0 auto;outline:none;cursor:default}
.story-visual svg{width:100%;height:auto;overflow:visible}
.story-visual .doc rect,.story-visual .doc path:not(.doc-line){fill:none;stroke:rgba(20,33,61,.32);stroke-width:1;transition:stroke .5s ease,transform .6s cubic-bezier(.2,.6,.2,1);transform-box:fill-box;transform-origin:center}
.story-visual .doc-line{stroke:rgba(20,33,61,.22);stroke-width:1;transition:stroke .5s ease}
.story-visual .flow{fill:none;stroke:var(--gold);stroke-width:1;stroke-dasharray:3 5;animation:story-flow 3.2s linear infinite}
.story-visual .flow-2{animation-delay:.35s}
.story-visual .flow-3{animation-delay:.7s}
.story-visual .node{fill:var(--gold)}
.story-visual .room-ring{fill:none;stroke:var(--gold);transition:stroke .6s ease,r .6s cubic-bezier(.2,.6,.2,1)}
.story-visual .room-ring-inner{stroke:rgba(171,138,92,.4)}
.story-visual .room-dot{fill:var(--gold);transition:r .6s ease}
@keyframes story-flow{to{stroke-dashoffset:-16}}
.story-visual:hover .doc-1,.story-visual:focus-visible .doc-1{transform:translate(-2px,-2px)}
.story-visual:hover .doc-2,.story-visual:focus-visible .doc-2{transform:translateX(-3px)}
.story-visual:hover .doc-3,.story-visual:focus-visible .doc-3{transform:translate(-2px,2px)}
.story-visual:hover .doc rect,.story-visual:hover .doc path:not(.doc-line),
.story-visual:focus-visible .doc rect,.story-visual:focus-visible .doc path:not(.doc-line){stroke:var(--gold-deep)}
.story-visual:hover .room-ring-outer,.story-visual:focus-visible .room-ring-outer{r:28;stroke:var(--gold-deep)}
.story-visual:hover .room-dot,.story-visual:focus-visible .room-dot{r:3.5}
@media (prefers-reduced-motion:reduce){.story-visual .flow{animation:none;stroke-dasharray:none}}

/* Auto-fit two-col sections */
.auto-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(40px,6vw,96px);align-items:center}

.center-cta{max-width:900px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:32px}

.inside-grid{display:grid;gap:clamp(16px,2vw,24px)}
@media (min-width:820px){.inside-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}