/* ── DDO SHARED STYLES ── datadrivenops.co ── */

/* ── SELF-HOSTED FONTS ── */

/* DM Sans */
@font-face{font-family:'DM Sans';src:url('/fonts/dm-sans-v17-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/dm-sans-v17-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* Source Serif 4 */
@font-face{font-family:'Source Serif 4';src:url('/fonts/source-serif-4-v14-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('/fonts/source-serif-4-v14-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('/fonts/source-serif-4-v14-latin-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('/fonts/source-serif-4-v14-latin-500italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}

/* Playfair Display */
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-display-v40-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-display-v40-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-display-v40-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-display-v40-latin-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-display-v40-latin-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-display-v40-latin-500italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-display-v40-latin-700italic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:#faf7f2;--cream2:#f2ede5;--cream3:#e8e0d4;
  --green:#2d4a3e;--green2:#3d6454;--green3:#4a7a62;
  --text:#1c1a17;--muted:#6b6560;--dim:#9a9490;
  --border:#ddd5c8;--border2:#c8bfb2;
}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--text);font-family:'Source Serif 4',serif;font-size:16px;line-height:1.7;overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(250,247,242,0.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding:0 2.5rem;display:flex;align-items:center;justify-content:space-between;height:58px}
.logo{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:var(--text);text-decoration:none;letter-spacing:-0.3px}
.logo em{font-style:italic;color:var(--green)}
.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links a{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--muted);text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;transition:color 0.15s}
.nav-links a:hover,.nav-links a.active{color:var(--green)}
.nav-cta{font-family:'DM Sans',sans-serif;font-size:12px;background:var(--green);color:var(--cream) !important;padding:7px 16px;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;transition:background 0.15s}
.nav-cta:hover{background:var(--green2) !important}

/* SHARED */
section{padding:5rem 2.5rem}
.container{max-width:1080px;margin:0 auto}
.section-rule{width:40px;height:2px;background:var(--green);margin-bottom:1.25rem}
.eyebrow{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--green);letter-spacing:2px;text-transform:uppercase;margin-bottom:1rem}
h2{font-family:'Playfair Display',serif;font-size:clamp(32px,4vw,48px);font-weight:900;line-height:1.05;color:var(--text);margin-bottom:1.5rem;letter-spacing:-0.5px}
h2 em{font-style:italic;color:var(--green)}
h3{font-family:'Playfair Display',serif;font-size:clamp(22px,3vw,30px);font-weight:700;line-height:1.15;color:var(--text);margin-bottom:1rem}
.btn{background:var(--green);color:var(--cream);padding:12px 28px;font-family:'DM Sans',sans-serif;font-weight:500;font-size:13px;letter-spacing:0.5px;text-decoration:none;display:inline-block;transition:background 0.15s;border:none;cursor:pointer}
.btn:hover{background:var(--green2)}
.btn-outline{background:transparent;color:var(--green);padding:11px 26px;font-family:'DM Sans',sans-serif;font-weight:500;font-size:13px;letter-spacing:0.5px;text-decoration:none;display:inline-block;border:1px solid var(--green);transition:all 0.15s}
.btn-outline:hover{background:var(--green);color:var(--cream)}
.btn-ghost{font-family:'Source Serif 4',serif;font-size:15px;color:var(--green);border-bottom:1px solid var(--green);padding-bottom:1px;text-decoration:none;font-style:italic;transition:color 0.15s}
.btn-ghost:hover{color:var(--green2)}
.tag{border:1px solid var(--border2);color:var(--dim);font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px}
.pill{font-family:'DM Sans',sans-serif;font-size:9px;color:var(--dim);border:1px solid var(--border);padding:3px 7px;letter-spacing:0.5px}
.pills{display:flex;flex-wrap:wrap;gap:5px}
.read-more{font-family:'Source Serif 4',serif;font-size:13px;color:var(--green);font-style:italic;text-decoration:none;border-bottom:1px solid var(--green);padding-bottom:1px;transition:color 0.15s}
.read-more:hover{color:var(--green2)}

/* BREADCRUMB */
.breadcrumb{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--dim);letter-spacing:0.5px;margin-bottom:1.5rem;display:flex;align-items:center;gap:6px}
.breadcrumb a{color:var(--green);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{color:var(--dim)}

/* PAGE HERO (subpages) */
.page-hero{padding:8rem 2.5rem 4rem;border-bottom:1px solid var(--border);background:var(--cream)}
.page-hero-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:end}
.page-hero h1{font-family:'Playfair Display',serif;font-size:clamp(42px,5.5vw,68px);font-weight:900;line-height:0.97;color:var(--text);letter-spacing:-2px;margin-bottom:1.25rem}
.page-hero h1 em{font-style:italic;color:var(--green)}
.page-hero-sub{font-size:16px;color:var(--muted);line-height:1.8;font-style:italic;max-width:440px}
.page-hero-meta{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.page-hero-stat{display:flex;flex-direction:column}
.page-hero-stat-n{font-family:'Playfair Display',serif;font-size:40px;font-weight:700;color:var(--green);line-height:1}
.page-hero-stat-l{font-family:'DM Sans',sans-serif;font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1.5px;margin-top:3px}

/* METRIC BLOCKS */
.metric-row{display:flex;flex-wrap:wrap;gap:6px}
.metric{background:var(--cream2);border:1px solid var(--border2);padding:10px 16px;display:flex;flex-direction:column;align-items:center;min-width:90px}
.metric-v{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--green);line-height:1}
.metric-l{font-family:'DM Sans',sans-serif;font-size:9px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;margin-top:3px;text-align:center}

/* FOOTER */
footer{background:var(--cream3);border-top:1px solid var(--border);padding:2rem 2.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-logo{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:var(--text);text-decoration:none}
.footer-logo em{font-style:italic;color:var(--green)}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.footer-links{display:flex;gap:1.25rem}
.footer-links a{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--dim);text-decoration:none;letter-spacing:0.3px}
.footer-links a:hover{color:var(--green)}
.footer-copy{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--dim)}

@media(max-width:900px){
  .page-hero-inner{grid-template-columns:1fr}
  .nav-links{gap:1rem}
}
@media(max-width:600px){
  section{padding:3.5rem 1.5rem}
  nav{padding:0 1.5rem}
  .page-hero{padding:7rem 1.5rem 3rem}
  .nav-links{display:none}
}