:root{
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-3xl:clamp(2.25rem,1rem + 3.6vw,4.5rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;

  --color-bg:#f5f3ec;
  --color-surface:#faf9f4;
  --color-surface-offset:#ebe8de;
  --color-ink:#18241c;
  --color-text:#1f2a22;
  --color-text-muted:#5c6459;
  --color-text-inverse:#f6f4ec;
  --color-border:oklch(0.3 0.03 150 / 0.14);
  --color-primary:#2f5d3a;
  --color-primary-hover:#244a2e;
  --color-primary-highlight:#dbe4d6;

  --radius-sm:.25rem;--radius-md:.5rem;--radius-lg:.75rem;
  --transition-interactive:180ms cubic-bezier(0.16,1,0.3,1);
  --shadow-md:0 6px 20px oklch(0.25 0.03 150 / 0.10);
  --content-wide:1200px;
  --gutter:clamp(var(--space-5),5vw,var(--space-16));

  --font-display:'Zodiak','Georgia',serif;
  --font-body:'Switzer','Helvetica Neue',sans-serif;
}

.wrap{width:100%;max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:var(--space-4);top:-100px;background:var(--color-primary);color:var(--color-text-inverse);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);z-index:100}
.skip:focus{top:var(--space-4)}

/* Header */
.header{position:sticky;top:0;z-index:50;background:oklch(from var(--color-bg) l c h / 0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:64px}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--color-ink);line-height:1.1}
.brand__name{font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);letter-spacing:.01em}
.brand__sub{font-size:var(--text-xs);color:var(--color-text-muted)}
.nav{display:flex;align-items:center;gap:var(--space-6)}
.nav a{font-size:var(--text-sm);color:var(--color-text);text-decoration:none}
.nav a:hover{color:var(--color-primary)}
.nav .btn{color:var(--color-text-inverse)}
.nav .btn:hover{color:var(--color-text-inverse)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;text-decoration:none;background:var(--color-primary);color:var(--color-text-inverse);border:1px solid var(--color-primary)}
.btn:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--color-text-inverse);border-color:oklch(1 0 0 / 0.55)}
.btn--ghost:hover{background:oklch(1 0 0 / 0.12);border-color:oklch(1 0 0 / 0.8)}
.btn--outline{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn--outline:hover{background:var(--color-primary-highlight);border-color:var(--color-primary)}

/* Hero */
.hero{position:relative;min-height:min(86vh,820px);display:flex;align-items:flex-end;color:var(--color-text-inverse);overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,oklch(0.16 0.03 150 / 0.88) 0%,oklch(0.16 0.03 150 / 0.55) 45%,oklch(0.16 0.03 150 / 0.05) 80%)}
.hero__content{position:relative;z-index:1;padding-block:var(--space-24) clamp(var(--space-12),7vw,var(--space-20))}
.eyebrow{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;font-weight:600;margin-bottom:var(--space-4)}
.hero .eyebrow{color:oklch(0.92 0.04 140)}
.hero h1{font-family:var(--font-display);font-weight:500;font-size:var(--text-3xl);line-height:1.05;letter-spacing:-.01em;max-width:18ch}
.hero__lede{margin-top:var(--space-5);font-size:var(--text-base);max-width:58ch;color:oklch(0.95 0.01 100)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}

/* Sections */
section{padding-block:clamp(var(--space-16),9vw,var(--space-32))}
.section-title{font-family:var(--font-display);font-weight:500;font-size:var(--text-xl);color:var(--color-ink);max-width:24ch}
.section-intro{margin-top:var(--space-4);color:var(--color-text-muted)}
.eyebrow--dark{color:var(--color-primary)}

/* Audience */
.audience{padding-block:clamp(var(--space-12),6vw,var(--space-20));border-bottom:1px solid var(--color-border)}
.audience__grid{display:grid;grid-template-columns:1fr;gap:var(--space-8)}
.audience__item h3{font-size:var(--text-lg);font-weight:600;color:var(--color-ink)}
.audience__item .meta{font-size:var(--text-xs);color:var(--color-primary);font-weight:600;letter-spacing:.04em;margin-top:var(--space-1)}
.audience__item p{margin-top:var(--space-3);color:var(--color-text-muted)}
@media (min-width:860px){.audience__grid{grid-template-columns:1.1fr 1fr 1fr 1fr;gap:var(--space-10);align-items:start}}

/* Services */
.services__head{display:grid;gap:var(--space-4);margin-bottom:var(--space-12)}
@media (min-width:860px){.services__head{grid-template-columns:1fr 1fr;align-items:end;gap:var(--space-12)}}
.svc-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
@media (min-width:860px){.svc-grid{grid-template-columns:repeat(6,1fr)}.svc--feature{grid-column:span 6}.svc--a{grid-column:span 3}.svc--b{grid-column:span 3}.svc--c{grid-column:span 6}}
.svc{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(var(--space-6),3vw,var(--space-10))}
.svc h3{font-size:var(--text-lg);font-weight:600;color:var(--color-ink)}
.svc .for{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}
.svc ul{margin-top:var(--space-5);display:grid;gap:var(--space-2);padding-left:var(--space-5)}
.svc li{color:var(--color-text)}
.svc li::marker{color:var(--color-primary)}
.svc--feature{background:var(--color-ink);color:var(--color-text-inverse);border-color:transparent;display:grid;gap:var(--space-6)}
.svc--feature h3{font-family:var(--font-display);font-weight:500;font-size:var(--text-xl);color:var(--color-text-inverse)}
.svc--feature .for{color:oklch(0.82 0.03 140)}
.svc--feature li{color:var(--color-text-inverse)}
.svc--feature li::marker{color:oklch(0.8 0.08 140)}
@media (min-width:860px){.svc--feature{grid-template-columns:1fr 1.2fr;align-items:start;gap:var(--space-12)}.svc--feature ul{margin-top:0;grid-template-columns:1fr 1fr;column-gap:var(--space-8)}.svc--c ul{grid-template-columns:repeat(3,1fr);column-gap:var(--space-8)}}
.pricing-note{margin-top:var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);align-items:baseline;padding-top:var(--space-6);border-top:1px solid var(--color-border)}
.pricing-note strong{font-weight:600;color:var(--color-ink)}
.pricing-note span{color:var(--color-text-muted)}

/* Process */
.process{background:var(--color-surface-offset)}
.steps{margin-top:var(--space-12);display:grid;gap:var(--space-8);counter-reset:step}
@media (min-width:860px){.steps{grid-template-columns:repeat(4,1fr);gap:var(--space-8)}}
.step{border-top:2px solid var(--color-primary);padding-top:var(--space-5)}
.step__num{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-primary);line-height:1}
.step h3{margin-top:var(--space-3);font-size:var(--text-base);font-weight:600;color:var(--color-ink)}
.step p{margin-top:var(--space-2);color:var(--color-text-muted);font-size:var(--text-sm)}

/* About */
.about__grid{display:grid;gap:var(--space-10)}
@media (min-width:900px){.about__grid{grid-template-columns:1fr 1.05fr;gap:var(--space-16);align-items:center}}
.about__img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:var(--radius-lg)}
.about p{margin-top:var(--space-4)}
.creds{margin-top:var(--space-8);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5) var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--color-border)}
.creds dt{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.creds dd{margin-top:var(--space-1);font-weight:600;color:var(--color-ink)}

/* Scope */
.scope{padding-block:clamp(var(--space-10),5vw,var(--space-16));border-top:1px solid var(--color-border)}
.scope__inner{display:grid;gap:var(--space-4)}
@media (min-width:860px){.scope__inner{grid-template-columns:1fr 2fr;gap:var(--space-12)}}
.scope h2{font-size:var(--text-lg);font-weight:600;color:var(--color-ink)}
.scope p{color:var(--color-text-muted)}

/* Contact */
.contact{background:var(--color-ink);color:var(--color-text-inverse)}
.contact .eyebrow{color:oklch(0.82 0.06 140)}
.contact h2{font-family:var(--font-display);font-weight:500;font-size:var(--text-2xl);max-width:20ch;line-height:1.1}
.contact__lede{margin-top:var(--space-5);color:oklch(0.88 0.01 120)}
.contact__email{margin-top:var(--space-10);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4)}
.email-text{font-size:var(--text-lg);font-weight:500;user-select:all;word-break:break-all}
.copy-status{font-size:var(--text-sm);color:oklch(0.85 0.06 140);min-height:1.5em}
.contact__checklist{margin-top:var(--space-10);padding-top:var(--space-6);border-top:1px solid oklch(1 0 0 / 0.16);display:grid;gap:var(--space-2)}
.contact__checklist p{font-size:var(--text-sm);color:oklch(0.84 0.01 120)}
.contact__checklist ul{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);padding-left:var(--space-5);font-size:var(--text-sm)}
.contact .btn{background:var(--color-text-inverse);color:var(--color-ink);border-color:var(--color-text-inverse)}
.contact .btn:hover{background:oklch(0.88 0.03 140);border-color:oklch(0.88 0.03 140)}
.contact .btn--ghost{background:transparent;color:var(--color-text-inverse);border-color:oklch(1 0 0 / 0.4)}
.contact .btn--ghost:hover{background:oklch(1 0 0 / 0.1)}

/* Footer */
.footer{padding-block:var(--space-8);font-size:var(--text-xs);color:var(--color-text-muted)}
.footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3)}
.footer p{max-width:none}

/* Mobile nav */
@media (max-width:760px){
  .nav a:not(.btn){display:none}
  .brand__sub{display:none}
}
