/* ============================================================
   CAMEO GROUP — brand theme layer (overrides main.css)
   Brand: deep emerald + copper on warm ivory.
   Design system: Michael Fowler Creative skeleton (EB Garamond / Archivo).
   ============================================================ */
:root{
  --ivory:#F5F2EB;
  --paper:#FBFAF5;
  --ink:#1E2A23;            /* deep green-charcoal */
  --ink-soft:#37423A;
  --stone:#6C6E63;
  --hairline:#E2DBCC;
  --hairline-dark:#CFC7B6;
  --bronze:#A96E45;         /* copper accent */
  --bronze-soft:#C08A62;
  --midnight:#0C3A30;       /* emerald dark sections */
  --midnight-2:#0F473A;
  --midnight-hairline:#2B4A40;
  --midnight-text:#F1EEE4;
  --midnight-stone:#A8BBB0;
}

/* ---- text brand wordmark (replaces the signature image) ---- */
.brand{gap:0}
.brand-word{font-family:var(--serif);font-weight:600;font-size:clamp(1.35rem,1rem + 1.5vw,1.95rem);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);white-space:nowrap;line-height:1}
.brand-sub{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--stone);margin-top:.32rem;padding-left:.2em}
.header--dark:not(.is-solid) .brand-word{color:var(--midnight-text)}
.header--dark:not(.is-solid) .brand-sub{color:rgba(241,238,228,.72)}
body.nav-locked .brand-word{color:var(--ink)}
body.nav-locked .brand-sub{color:var(--stone)}

/* footer text brand instead of logo image */
.f-logo{display:none}
.f-brand{font-family:var(--serif);font-size:1.5rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--midnight-text);text-decoration:none;display:inline-block;margin-bottom:.6rem}

/* hero eyebrow flourish + scrim tuned for emerald brand */
.hero .eyebrow::before{background:var(--bronze-soft)}
.hero-scrim{background:linear-gradient(180deg,rgba(8,32,26,.30) 0%,rgba(8,32,26,.05) 30%,rgba(8,32,26,.34) 62%,rgba(8,32,26,.82) 100%)}

/* press band = "Trusted by" real communities/builders (static spans) */
.press-item{cursor:default}

/* Cameo has no fabricated stats: a couple of stat values are text, keep them elegant */
.stat-value.is-text{font-size:clamp(2.1rem,3.4vw,3rem);letter-spacing:.02em}

/* services trio cards (replaces the blog list on home + used on services page) */
.svc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,2.6vw,2.4rem)}
.svc-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.svc-card .img-mask{margin-bottom:1.1rem}
.svc-card .svc-num{font-family:var(--serif);font-style:italic;color:var(--bronze);font-size:1.1rem}
.svc-card h3{font-size:var(--fs-h3);margin-top:.3rem}
.svc-card p{color:var(--ink-soft);margin-top:.6rem;font-size:var(--fs-small)}
.svc-card .link-line{margin-top:1rem}
@media(max-width:60em){.svc-cards{grid-template-columns:1fr;gap:2.2rem}}

/* project grid (portfolio) as tiles instead of year tiles */
.proj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.6rem,3vw,2.8rem)}
.proj-tile{display:block;text-decoration:none;color:inherit}
.proj-tile .img-mask{margin-bottom:1rem}
.proj-tile .pt-name{font-family:var(--serif);font-size:var(--fs-h3);color:var(--ink)}
.proj-tile .pt-sub{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);margin-top:.4rem}
.proj-tile:hover .pt-name{color:var(--bronze)}
@media(max-width:52em){.proj-grid{grid-template-columns:1fr}}

/* Trusted-by band now uses image logo lockups (swap the SVGs in assets/img/logos/ for official files) */
.press-band{gap:1.6rem 3.2rem}
.press-logo{height:38px;width:auto;filter:grayscale(1) brightness(.4);opacity:.72;transition:opacity var(--t-fast) ease, filter var(--t-fast) ease}
.press-logo:hover{opacity:1;filter:none}
@media (max-width:48em){ .press-logo{height:32px} }