/* ==========================================================================
   Cranford Eclectic — Design System
   Palette + type sampled from the brand mark (eagle-in-C emblem).
   Signature motif: "the rising line" — an abstracted wing-feather sweep,
   used as section eyebrows, dividers, and stat-card accents throughout.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root{
  /* ---- Color tokens (sampled + extended from the logo) ---- */
  --navy-950:#0F1E2E;
  --navy-900:#16304A;
  --navy-800:#1D3D5C;
  --navy-700:#2C4A66;
  --navy-600:#3E5E7B;
  --gold-600:#B08A3D;
  --gold-500:#C9A24B;
  --gold-400:#D2B27A;
  --gold-200:#EEE1C1;
  --gold-100:#F5EDDA;
  --cream-50:#FBF9F3;
  --cream-100:#F6F2E7;
  --cream-200:#EEE6D3;
  --ink:#1C2B3A;
  --slate:#5C6B78;
  --slate-light:#8493A0;
  --white:#FFFFFF;
  --line: rgba(22,48,74,0.12);
  --line-strong: rgba(22,48,74,0.22);

  /* ---- Type ---- */
  --font-display:'Fraunces', ui-serif, Georgia, serif;
  --font-body:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.4rem, 4.5vw + 1rem, 4.25rem);
  --fs-h1: clamp(2rem, 2.6vw + 1rem, 2.9rem);
  --fs-h2: clamp(1.5rem, 1.6vw + 1rem, 2.1rem);
  --fs-h3: clamp(1.15rem, 0.6vw + 1rem, 1.4rem);
  --fs-lede: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.78rem;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --radius: 4px;
  --radius-lg: 10px;
  --shadow-soft: 0 20px 45px -25px rgba(15,30,46,0.35);
  --shadow-card: 0 1px 0 var(--line), 0 18px 30px -22px rgba(15,30,46,0.28);
  --ease: cubic-bezier(.22,.68,0,1);
}

/* ---- Reset ---- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--cream-100);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--navy-950); line-height:1.12; margin:0; font-weight:600; }
p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }
strong{ color:var(--navy-950); }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--navy-900); color:var(--cream-50);
  padding:.75rem 1.25rem; z-index:1000; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--gold-500); outline-offset:3px; }

/* ---- Layout helpers ---- */
.wrap{ max-width:1180px; margin-inline:auto; padding-inline:clamp(1.25rem, 4vw, 2.5rem); }
.wrap--narrow{ max-width:820px; }
.section{ padding-block: var(--space-6); }
.section--tight{ padding-block: var(--space-5); }
.section--alt{ background:var(--cream-200); }
.section--navy{ background:var(--navy-950); color:var(--cream-100); }
.section--navy h1, .section--navy h2, .section--navy h3{ color:var(--cream-50); }
.grid{ display:grid; gap:var(--space-4); }
@media (min-width:760px){
  .grid--2{ grid-template-columns:1fr 1fr; }
  .grid--3{ grid-template-columns:repeat(3,1fr); }
}
.stack{ display:flex; flex-direction:column; gap:var(--space-2); }
.center{ text-align:center; }
.mt-0{ margin-top:0 !important; }

/* ---- Eyebrow + wing motif ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-body); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:var(--fs-eyebrow); color:var(--gold-600);
  margin-bottom:.85rem;
}
.eyebrow svg{ width:22px; height:16px; flex:none; color:var(--gold-500); }
.eyebrow--light{ color:var(--gold-400); }

.divider{ border:0; border-top:1px solid var(--line); margin:var(--space-4) 0; }

/* Rising-line section rule: hairline with wing mark, used above H2s */
.rule-wing{ display:flex; align-items:center; gap:.75rem; margin-bottom:var(--space-2); }
.rule-wing svg{ width:26px; height:18px; color:var(--gold-500); flex:none; }
.rule-wing::after{ content:''; flex:1; height:1px; background:var(--line-strong); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-body);
  font-weight:700; font-size:.95rem; letter-spacing:.01em; padding:.85rem 1.5rem;
  border-radius:var(--radius); border:1.5px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--navy-900); color:var(--cream-50); }
.btn--primary:hover{ background:var(--navy-800); }
.btn--gold{ background:var(--gold-500); color:var(--navy-950); }
.btn--gold:hover{ background:var(--gold-400); }
.btn--outline{ border-color:var(--navy-900); color:var(--navy-900); background:transparent; }
.btn--outline:hover{ background:var(--navy-900); color:var(--cream-50); }
.btn--outline-light{ border-color:rgba(251,249,243,.55); color:var(--cream-50); }
.btn--outline-light:hover{ background:var(--cream-50); color:var(--navy-950); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* ---- Header / nav ---- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(246,242,231,0.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; padding-block:.85rem; }
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand img{ height:34px; width:auto; }
.brand__word{ display:none; }
@media (min-width:560px){ .brand__word{ display:block; height:30px; width:auto; } .brand img.brand__mark{ display:none; } }

.nav{ display:none; align-items:center; gap:var(--space-4); }
.nav a{ font-weight:600; font-size:.94rem; color:var(--navy-800); position:relative; padding:.3rem 0; }
.nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--gold-500); transition:right .25s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after{ right:0; }
.nav a[aria-current="page"]{ color:var(--navy-950); }
@media (min-width:920px){ .nav{ display:flex; } }

.nav-cta{ display:none; }
@media (min-width:920px){ .nav-cta{ display:inline-flex; } }

.nav-toggle{
  display:inline-flex; background:none; border:1.5px solid var(--line-strong); border-radius:6px;
  width:42px; height:38px; align-items:center; justify-content:center; cursor:pointer;
}
@media (min-width:920px){ .nav-toggle{ display:none; } }
.nav-toggle svg{ width:20px; height:20px; color:var(--navy-900); }

.mobile-nav{
  display:none; flex-direction:column; gap:0; border-top:1px solid var(--line);
  background:var(--cream-50);
}
.mobile-nav.is-open{ display:flex; }
.mobile-nav a{ padding:1rem clamp(1.25rem,4vw,2.5rem); border-bottom:1px solid var(--line); font-weight:600; }
@media (min-width:920px){ .mobile-nav{ display:none !important; } }

/* ---- Hero ---- */
.hero{ position:relative; overflow:hidden; padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem,6vw,5rem); }
.hero__wing{ position:absolute; right:-6%; top:-10%; width:min(60vw,640px); opacity:.07; color:var(--navy-900); pointer-events:none; }
.hero__grid{ display:grid; gap:var(--space-4); position:relative; }
@media (min-width:900px){ .hero__grid{ grid-template-columns:1.15fr .85fr; align-items:center; } }
.hero h1{ font-size:var(--fs-hero); }
.hero__lede{ font-size:var(--fs-lede); color:var(--slate); max-width:46ch; margin-block:1.25rem 1.75rem; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--line); }
.hero__meta div{ font-size:var(--fs-small); color:var(--slate); }
.hero__meta strong{ display:block; font-family:var(--font-display); font-size:1.35rem; color:var(--navy-950); }

.hero-emblem{
  position:relative; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--gold-100), var(--cream-200) 70%);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line);
}
.hero-emblem img{ width:52%; }

/* ---- Cards ---- */
.card{
  background:var(--cream-50); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-3); box-shadow:var(--shadow-card); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  display:flex; flex-direction:column; height:100%;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 26px 40px -22px rgba(15,30,46,0.34); }
.card__icon{ width:34px; height:26px; color:var(--gold-500); margin-bottom:1rem; }
.card h3{ font-size:var(--fs-h3); margin-bottom:.5rem; }
.card p{ color:var(--slate); flex:1; }
.card__link{ margin-top:1rem; font-weight:700; font-size:.9rem; color:var(--navy-900); display:inline-flex; align-items:center; gap:.35rem; }
.card__link svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.card:hover .card__link svg{ transform:translateX(3px); }

.card--work{ padding:0; overflow:hidden; }
.card--work__media{
  aspect-ratio:16/10; background:var(--navy-950); display:flex; align-items:center; justify-content:center; padding:var(--space-3);
}
.card--work__media img{ max-height:100%; width:auto; max-width:78%; }
.card--work__body{ padding:var(--space-3); }
.card--work .tag-row{ margin-bottom:.6rem; }

/* ---- Tags / pills ---- */
.tag-row{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tag{
  font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:var(--gold-100); color:var(--gold-600); padding:.3rem .6rem; border-radius:99px;
  border:1px solid var(--gold-200);
}
.tag--navy{ background:var(--navy-900); color:var(--cream-50); border-color:var(--navy-900); }

/* ---- Stats ---- */
.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
@media (min-width:640px){ .stat-grid{ grid-template-columns:repeat(3,1fr); } }
.stat{ background:var(--cream-50); padding:1.5rem 1.25rem; }
.stat__num{ font-family:var(--font-display); font-size:clamp(1.8rem,2.4vw,2.4rem); color:var(--navy-950); font-weight:600; }
.stat__label{ font-size:.85rem; color:var(--slate); margin-top:.25rem; }

/* ---- Pricing / outcomes tables ---- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); }
table{ width:100%; border-collapse:collapse; font-size:.95rem; min-width:480px; }
thead th{ text-align:left; background:var(--navy-950); color:var(--cream-50); padding:.85rem 1.1rem; font-family:var(--font-body); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; }
tbody td{ padding:.9rem 1.1rem; border-top:1px solid var(--line); vertical-align:top; }
tbody tr:nth-child(even){ background:var(--cream-200); }

/* ---- Timeline (used only for genuine sequences, e.g. delivery phases) ---- */
.timeline{ position:relative; padding-left:2.25rem; border-left:2px solid var(--gold-200); display:flex; flex-direction:column; gap:var(--space-3); }
.timeline__item{ position:relative; }
.timeline__item::before{
  content:attr(data-step); position:absolute; left:-2.9rem; top:0; width:2.1rem; height:2.1rem; border-radius:50%;
  background:var(--navy-900); color:var(--cream-50); font-family:var(--font-display); font-weight:600; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
}
.timeline__item h4{ font-size:1.02rem; margin-bottom:.3rem; }
.timeline__item p{ color:var(--slate); margin:0; }

/* ---- Quote ---- */
.pull-quote{
  font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(1.2rem,1.6vw,1.5rem);
  color:var(--navy-950); border-left:3px solid var(--gold-500); padding-left:1.4rem; margin:var(--space-3) 0;
}

/* ---- CTA band ---- */
.cta-band{ background:var(--navy-950); color:var(--cream-50); padding-block:var(--space-5); text-align:center; position:relative; overflow:hidden; }
.cta-band__wing{ position:absolute; left:-8%; bottom:-18%; width:340px; color:var(--cream-50); opacity:.06; }
.cta-band h2{ color:var(--cream-50); }
.cta-band p{ color:rgba(251,249,243,.75); max-width:52ch; margin-inline:auto; margin-bottom:var(--space-3); }

/* ---- Breadcrumb / prev-next ---- */
.breadcrumb{ font-size:.85rem; color:var(--slate); margin-bottom:1.25rem; }
.breadcrumb a{ color:var(--navy-800); font-weight:600; }
.breadcrumb a:hover{ text-decoration:underline; }

.prev-next{ display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); padding-top:var(--space-3); margin-top:var(--space-5); flex-wrap:wrap; }
.prev-next a{ font-weight:700; color:var(--navy-900); display:flex; flex-direction:column; gap:.2rem; }
.prev-next span{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--slate-light); font-weight:700; }
.prev-next .next{ text-align:right; margin-left:auto; }

/* ---- PDF download block ---- */
.pdf-block{
  display:flex; align-items:center; gap:1rem; background:var(--cream-200); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:1.25rem 1.5rem; margin-top:var(--space-5);
}
.pdf-block svg{ width:30px; height:34px; color:var(--navy-900); flex:none; }
.pdf-block .btn{ margin-left:auto; }
@media (max-width:560px){ .pdf-block{ flex-wrap:wrap; } .pdf-block .btn{ margin-left:0; } }

/* ---- Service anchor nav ---- */
.subnav{ position:sticky; top:64px; z-index:50; background:var(--cream-50); border-bottom:1px solid var(--line); overflow-x:auto; }
.subnav__inner{ display:flex; gap:1.5rem; padding-block:.85rem; white-space:nowrap; }
.subnav a{ font-size:.88rem; font-weight:700; color:var(--slate); }
.subnav a.is-active, .subnav a:hover{ color:var(--navy-950); }

/* ---- Footer ---- */
.site-footer{ background:var(--navy-950); color:rgba(251,249,243,.82); padding-block:var(--space-5) var(--space-3); }
.site-footer a:hover{ color:var(--gold-400); }
.footer-grid{ display:grid; gap:var(--space-4); }
@media (min-width:760px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; } }
.footer-brand img{ height:32px; margin-bottom:1rem; }
.footer-brand p{ color:rgba(251,249,243,.6); font-size:.92rem; max-width:32ch; }
.footer-col h5{ font-family:var(--font-body); text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; color:var(--gold-400); margin-bottom:1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.6rem; font-size:.92rem; }
.footer-bottom{ border-top:1px solid rgba(251,249,243,.14); margin-top:var(--space-4); padding-top:1.25rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.75rem; font-size:.82rem; color:rgba(251,249,243,.55); }
.socials{ display:flex; gap:.9rem; }
.socials svg{ width:18px; height:18px; }

/* ---- Contact form ---- */
.form-field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.form-row{ display:grid; gap:1.1rem; }
@media (min-width:600px){ .form-row--2{ grid-template-columns:1fr 1fr; } }
.form-field label{ font-size:.85rem; font-weight:700; color:var(--navy-800); }
.form-field input, .form-field textarea{
  font-family:var(--font-body); font-size:1rem; padding:.8rem .9rem; border-radius:6px;
  border:1.5px solid var(--line-strong); background:var(--cream-50); color:var(--ink);
}
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px var(--gold-200); }
.form-field textarea{ resize:vertical; min-height:140px; }

/* ---- Misc content typography for markdown pages ---- */
.prose h2{ font-size:var(--fs-h2); margin-top:var(--space-5); margin-bottom:1rem; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:var(--fs-h3); margin-top:var(--space-4); margin-bottom:.75rem; }
.prose p{ color:var(--ink); max-width:72ch; }
.prose ul{ list-style:disc; padding-left:1.4rem; margin-bottom:1rem; max-width:72ch; }
.prose li{ margin-bottom:.5rem; color:var(--ink); }
.prose li strong{ color:var(--navy-950); }
.prose a{ color:var(--navy-800); font-weight:700; text-decoration:underline; text-decoration-color:var(--gold-400); text-underline-offset:3px; }

.entry-header{ padding-block: var(--space-5) var(--space-4); border-bottom:1px solid var(--line); }
.entry-header h1{ font-size:var(--fs-h1); max-width:26ch; }
.entry-header p{ font-size:var(--fs-lede); color:var(--slate); max-width:60ch; margin-top:1rem; }