/* ════════════════════════════════════════════════════════════
   DG & SD ASSOCIATES - editorial design system
   Aesthetic: editorial/luxury · near-monochrome · quiet green accent
   Type: Newsreader (serif display) + Spline Sans (grotesque body)
   ════════════════════════════════════════════════════════════ */

:root{
  --ink:#16181c;
  --ink-2:#2c2f36;
  --body:#4a4e57;
  --muted:#83878f;
  --faint:#a9adb4;
  --line:#e6e3dc;
  --line-2:#efece5;
  --paper:#fbfaf6;
  --paper-2:#f4f2ea;
  --ink-bg:#16181c;
  --ink-bg-2:#1d2025;
  --accent:#2f6b4f;
  --accent-2:#3d8463;
  --accent-wash:#eef2ee;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Spline Sans','Segoe UI',sans-serif;
  --maxw:1180px;
  --gut:clamp(22px,5vw,56px);
  --r:3px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--body);background:var(--paper);line-height:1.7;font-size:17px;font-weight:330;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--ink);color:var(--paper)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

h1,h2,h3,h4,h5{font-family:var(--serif);color:var(--ink);font-weight:400;line-height:1.08;letter-spacing:-.012em}
h1{font-size:clamp(2.6rem,6vw,5.2rem)}
h2{font-size:clamp(2rem,4.2vw,3.4rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.serif-italic{font-style:italic;color:var(--accent)}
.display-em{font-style:italic}

.label{display:inline-flex;align-items:baseline;gap:11px;font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.label .idx{font-family:var(--serif);font-style:italic;font-size:.92rem;letter-spacing:0;color:var(--accent);text-transform:none}
.label.on-dark{color:rgba(255,255,255,.6)}
.label.on-dark .idx{color:var(--accent-2)}

.lede{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.42;color:var(--ink-2);font-weight:380;letter-spacing:-.01em}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:.86rem;font-weight:500;letter-spacing:.02em;padding:15px 28px;border-radius:var(--r);cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--paper);transition:background .35s,color .35s,border-color .35s,transform .35s}
.btn:hover{background:transparent;color:var(--ink);transform:translateY(-2px)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.btn-outline{background:transparent;color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-light:hover{background:transparent;color:var(--paper)}
.btn-ghost-light{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.3)}
.btn-ghost-light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.tlink{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:500;font-size:.86rem;letter-spacing:.02em;color:var(--ink);position:relative;padding-bottom:3px}
.tlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.tlink:hover{color:var(--accent)}
.tlink:hover::after{transform:scaleX(1);transform-origin:left;background:var(--accent)}
.tlink svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;transition:transform .35s}
.tlink:hover svg{transform:translateX(4px)}
.tlink.on-dark{color:var(--paper)}
.tlink.on-dark::after{background:var(--paper)}
.tlink.on-dark:hover{color:var(--accent-2)}

header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(251,250,246,.82);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid transparent;transition:border-color .4s,background .4s}
header.scrolled{border-bottom:1px solid var(--line);background:rgba(251,250,246,.94)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:32px}
.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}
.logo-mark{display:flex;align-items:flex-end;gap:2px;height:24px}
.logo-mark i{width:3.5px;display:block;background:var(--ink)}
.logo-mark i:nth-child(1){height:9px}
.logo-mark i:nth-child(2){height:14px}
.logo-mark i:nth-child(3){height:19px}
.logo-mark i:nth-child(4){height:24px;background:var(--accent)}
.brand-text b{font-family:var(--serif);font-weight:500;font-size:1.24rem;color:var(--ink);display:block;line-height:.95;letter-spacing:-.01em}
.brand-text small{font-family:var(--sans);font-size:.54rem;letter-spacing:.34em;color:var(--muted);font-weight:500}
.nav-links{display:flex;gap:34px;align-items:center;list-style:none}
.nav-links>li{position:relative}
.nav-links>li>a{font-family:var(--sans);font-size:.85rem;font-weight:400;letter-spacing:.01em;color:var(--ink-2);padding:29px 0;display:inline-block;transition:color .25s;position:relative}
.nav-links>li>a::after{content:"";position:absolute;left:0;bottom:24px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav-links>li>a:hover{color:var(--ink)}
.nav-links>li>a:hover::after,.nav-links>li>a.active::after{transform:scaleX(1);transform-origin:left}
.nav-links>li>a.active{color:var(--ink)}
.has-dd>a{padding-right:14px}
.has-dd>a::before{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);transform:translateY(-65%) rotate(45deg)}
.dd{position:absolute;top:100%;left:-18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 30px 60px -30px rgba(22,24,28,.3);padding:8px;min-width:268px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s}
.has-dd:hover .dd{opacity:1;visibility:visible;transform:translateY(0)}
.dd a{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:var(--r);transition:background .2s}
.dd a b{font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--ink)}
.dd a span{font-size:.76rem;color:var(--muted);line-height:1.4}
.dd a:hover{background:var(--paper-2)}
.dd a:hover b{color:var(--accent)}
.nav-cta{flex-shrink:0;padding:12px 22px}
.burger{display:none;background:none;border:none;cursor:pointer;color:var(--ink);padding:6px}
.burger svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.4}

.mnav{position:fixed;inset:78px 0 0;background:var(--paper);z-index:99;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1);overflow-y:auto;padding:30px var(--gut) 60px}
.mnav.open{transform:none}
.mnav a{display:block;padding:17px 0;font-family:var(--serif);font-size:1.5rem;color:var(--ink);border-bottom:1px solid var(--line-2)}
.mnav .sub a{padding:11px 0 11px 16px;font-family:var(--sans);font-size:.95rem;color:var(--muted)}
.mnav .btn{margin-top:28px;width:100%;justify-content:center}

main{padding-top:78px}
section{padding:clamp(72px,11vw,150px) 0}
.sec-head{max-width:760px;margin-bottom:clamp(48px,7vw,80px)}
.sec-head .label{margin-bottom:26px}
.sec-head h2{margin-bottom:22px}
.sec-head p{color:var(--muted);font-size:1.05rem;max-width:560px}
.center{text-align:center}
.center .sec-head,.sec-head.center{margin-left:auto;margin-right:auto}
.center .label{justify-content:center}
.rule{height:1px;background:var(--line);border:0}

.page-hero{padding:clamp(120px,16vw,180px) 0 clamp(56px,8vw,90px);border-bottom:1px solid var(--line);position:relative}
.page-hero .crumb{font-family:var(--sans);font-size:.78rem;letter-spacing:.04em;color:var(--muted);margin-bottom:30px;text-transform:uppercase;font-weight:500}
.page-hero .crumb a:hover{color:var(--accent)}
.page-hero h1{max-width:920px;margin-bottom:0}
.page-hero .sub{color:var(--muted);font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.55rem);font-style:italic;max-width:620px;margin-top:28px;line-height:1.45}

.col-list{border-top:1px solid var(--line)}
.col-item{display:grid;grid-template-columns:90px 1fr auto;gap:36px;align-items:baseline;padding:38px 0;border-bottom:1px solid var(--line);transition:padding .4s}
.col-item .ci-idx{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--accent)}
.col-item .ci-body h3{margin-bottom:10px;transition:color .4s}
.col-item .ci-body p{color:var(--muted);font-size:.98rem;max-width:540px}
.col-item .ci-arrow{align-self:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .4s,border-color .4s}
.col-item .ci-arrow svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.4;transition:stroke .4s,transform .4s}
.col-item:hover{padding-left:14px}
.col-item:hover .ci-body h3{color:var(--accent)}
.col-item:hover .ci-arrow{background:var(--ink);border-color:var(--ink)}
.col-item:hover .ci-arrow svg{stroke:var(--paper);transform:translateX(2px)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cell{background:var(--paper);padding:40px 34px;transition:background .4s}
.cell .c-idx{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:1rem;margin-bottom:20px;display:block}
.cell h3{font-size:1.32rem;margin-bottom:12px}
.cell p{color:var(--muted);font-size:.94rem}
.cell:hover{background:var(--paper-2)}

.cta{background:var(--ink-bg);color:var(--paper);text-align:center}
.cta h2{color:var(--paper);margin-bottom:24px;max-width:760px;margin-left:auto;margin-right:auto}
.cta h2 .serif-italic{color:var(--accent-2)}
.cta p{color:rgba(255,255,255,.6);font-size:1.05rem;max-width:520px;margin:0 auto 40px}
.cta .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

footer{background:var(--ink-bg);color:rgba(255,255,255,.55);padding:90px 0 38px;font-size:.9rem;border-top:1px solid rgba(255,255,255,.08)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand .brand-text b{color:var(--paper)}
.foot-brand .brand-text small{color:rgba(255,255,255,.45)}
.foot-brand .logo-mark i{background:rgba(255,255,255,.85)}
.foot-brand .logo-mark i:nth-child(4){background:var(--accent-2)}
.foot-brand p{margin-top:22px;max-width:280px;color:rgba(255,255,255,.5);font-size:.92rem;line-height:1.7}
.foot-col h5{font-family:var(--sans);color:var(--paper);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:20px;font-weight:500}
.foot-col a{display:block;margin-bottom:13px;color:rgba(255,255,255,.55);transition:color .25s}
.foot-col a:hover{color:var(--accent-2)}
.foot-bottom{padding-top:30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;color:rgba(255,255,255,.4)}

@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px}.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:860px){
  .nav-links,.nav-cta{display:none}
  .burger{display:block}
  .col-item{grid-template-columns:1fr auto;gap:20px}
  .col-item .ci-idx{display:none}
}
@media(max-width:620px){
  .foot-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .col-item .ci-arrow{display:none}
  .col-item{grid-template-columns:1fr}
}

/* ---------- aesthetic refinements ---------- */
.page-hero{overflow:hidden}
.page-hero .ghost{position:absolute;right:-.04em;bottom:-.22em;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(7rem,21vw,18rem);line-height:1;color:var(--ink);opacity:.045;pointer-events:none;user-select:none;letter-spacing:-.03em}
.foot-word{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(2.4rem,8.5vw,7rem);line-height:1.1;color:rgba(255,255,255,.06);letter-spacing:-.02em;padding:54px 0 8px;white-space:nowrap;overflow:hidden}
.dropcap::first-letter{font-family:var(--serif);font-size:3.2em;float:left;line-height:.84;padding:.04em .14em 0 0;color:var(--ink)}
.col-item .ci-idx{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.col-item:hover .ci-idx{transform:translateX(5px)}
.cell{position:relative}
.cell::after{content:"";position:absolute;left:34px;right:34px;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cell:hover::after{transform:scaleX(1)}
.lede{position:relative;padding-left:22px}
.lede::before{content:"";position:absolute;left:0;top:.32em;bottom:.32em;width:2px;background:var(--accent)}
.btn:hover svg{transform:translateX(3px)}
.btn svg{transition:transform .3s}

/* ============================================================
   HERO DASHBOARD ANIMATION — statements compose into a dashboard
   ============================================================ */
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(36px,6vw,80px);align-items:center}
.hero-stage{position:relative;width:100%;max-width:500px;margin-left:auto;aspect-ratio:5/4}
.hero-stage svg{width:100%;height:100%;overflow:visible}
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:46px}
  .hero-stage{max-width:420px;margin:0 auto;order:-1}
}

/* timeline:
   0.0–1.6s  two statement panels slide in + align
   1.6–2.4s  they recede/fade as the dashboard frame rises
   2.4–4.2s  dashboard tiles, chart bars, line graph, KPIs assemble
   4.2s+     gentle breathing hold                                  */

/* statement panels */
.st-panel{transform-box:fill-box;transform-origin:center;opacity:0}
.st-left{animation:stInL .9s cubic-bezier(.2,.8,.2,1) .2s forwards, stOut .7s ease .2s 1.9s forwards}
.st-right{animation:stInR .9s cubic-bezier(.2,.8,.2,1) .4s forwards, stOut .7s ease .2s 2.0s forwards}
@keyframes stInL{0%{opacity:0;transform:translate(-44px,16px) rotate(-4deg)}100%{opacity:1;transform:none}}
@keyframes stInR{0%{opacity:0;transform:translate(44px,16px) rotate(4deg)}100%{opacity:1;transform:none}}
@keyframes stOut{to{opacity:0;transform:translateY(-12px) scale(.96)}}
.st-row{transform-box:fill-box;transform-origin:left;animation:rowIn .5s ease both}
.st-panel .st-row:nth-child(2){animation-delay:.5s}
.st-panel .st-row:nth-child(3){animation-delay:.62s}
.st-panel .st-row:nth-child(4){animation-delay:.74s}
.st-panel .st-row:nth-child(5){animation-delay:.86s}
.st-panel .st-row:nth-child(6){animation-delay:.98s}
@keyframes rowIn{0%{opacity:0;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}

/* dashboard frame */
.dash-frame{transform-box:fill-box;transform-origin:center bottom;opacity:0;animation:dashRise .9s cubic-bezier(.2,.8,.2,1) 2.3s forwards}
@keyframes dashRise{0%{opacity:0;transform:translateY(26px) scale(.97)}100%{opacity:1;transform:none}}

/* dashboard contents */
.d-el{opacity:0}
.kpi-1{animation:popIn .6s cubic-bezier(.2,.9,.3,1.2) 2.9s forwards}
.kpi-2{animation:popIn .6s cubic-bezier(.2,.9,.3,1.2) 3.05s forwards}
.kpi-3{animation:popIn .6s cubic-bezier(.2,.9,.3,1.2) 3.2s forwards}
@keyframes popIn{0%{opacity:0;transform:translateY(8px) scale(.9)}100%{opacity:1;transform:none}}

/* chart bars grow up */
.cbar{transform-box:fill-box;transform-origin:bottom;opacity:0}
.cbar-1{animation:barUp .55s cubic-bezier(.2,.8,.2,1) 3.35s forwards}
.cbar-2{animation:barUp .55s cubic-bezier(.2,.8,.2,1) 3.46s forwards}
.cbar-3{animation:barUp .55s cubic-bezier(.2,.8,.2,1) 3.57s forwards}
.cbar-4{animation:barUp .55s cubic-bezier(.2,.8,.2,1) 3.68s forwards}
.cbar-5{animation:barUp .55s cubic-bezier(.2,.8,.2,1) 3.79s forwards}
@keyframes barUp{0%{opacity:0;transform:scaleY(0)}100%{opacity:1;transform:scaleY(1)}}

/* line graph draws */
.lgraph{stroke-dasharray:230;stroke-dashoffset:230;animation:lineDraw 1.1s cubic-bezier(.5,0,.3,1) 3.6s forwards}
@keyframes lineDraw{to{stroke-dashoffset:0}}
.ldot{opacity:0;animation:popIn .4s ease 4.5s forwards}

/* the resolving tick */
.d-tick-ring{transform-box:fill-box;transform-origin:center;opacity:0;animation:popIn .6s cubic-bezier(.2,.9,.3,1.2) 4.2s forwards}
.d-tick-path{stroke-dasharray:30;stroke-dashoffset:30;animation:lineDraw .5s ease 4.5s forwards}

/* gentle perpetual breathing */
.hero-stage .breathe{animation:floatY 7s ease-in-out 5s infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

@media(prefers-reduced-motion:reduce){
  .hero-stage *{animation:none !important;opacity:1 !important;stroke-dashoffset:0 !important;transform:none !important}
  .st-panel{display:none}
}