/* ============================================================
   Our Creative Works — Design System
   Brand: navy #13294B · crimson #C02435 · warm white #F7F5F0
   Fonts: Sora (headings) · Inter (body)
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette (locked to logo) */
  --navy:        #13294B;
  --navy-800:    #1B3560;
  --navy-700:    #274279;
  --crimson:     #C02435;
  --crimson-600: #A81C2C;
  --crimson-400: #D8434F;

  /* Neutrals */
  --cream:       #F7F5F0;
  --white:       #FFFFFF;
  --ink:         #16233B;   /* body text on light */
  --muted:       #5A6478;   /* secondary text */
  --line:        #E4E2DB;   /* hairline borders */
  --line-dark:   rgba(255,255,255,.14);

  /* Fixed dark-navy surfaces — stay dark navy in BOTH light & dark themes
     (bands, footer, page hero, icon tiles). Kept separate from --navy, which
     is the primary TEXT color and flips to light in dark mode. */
  --surface-navy: #13294B;
  /* Translucent sticky-header background (re-themed in dark mode) */
  --header-bg:    rgba(247,245,240,.82);

  /* Typography */
  --font-head: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --container: 1180px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);

  --radius:    14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(19,41,75,.06);
  --shadow-md: 0 14px 40px -12px rgba(19,41,75,.18);
  --shadow-lg: 0 30px 70px -20px rgba(19,41,75,.30);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: light; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 1.02rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--crimson); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--crimson-600); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.35rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { color: var(--ink); }
:focus-visible { outline: 3px solid var(--crimson-400); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-head);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--crimson);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px;
  background: var(--crimson); border-radius: 2px;
}
.eyebrow--center { justify-content: center; }

.section-head { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.08rem; margin-top: .9rem; }

.lead { font-size: 1.18rem; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--crimson);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  line-height: 1;
  padding: .95rem 1.6rem;
  border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bg);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  box-shadow: 0 10px 24px -10px rgba(192,36,53,.55);
}
.btn:hover { transform: translateY(-2px); color: #fff;
  box-shadow: 0 16px 30px -10px rgba(192,36,53,.6); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--navy);
  border-color: rgba(19,41,75,.22); box-shadow: none;
}
.btn--ghost:hover { --btn-fg: var(--navy); background: rgba(19,41,75,.05);
  border-color: var(--navy); box-shadow: none; }

/* A white pill that only ever sits on an always-navy surface (.page-hero,
   .band-navy, .cta), so its label must use the FIXED --surface-navy, never the
   themed --navy. Dark mode redefines --navy to a near-white #eaf0fa, which put
   white text on the white pill and made every "Start a project" CTA on the
   site unreadable in dark mode. */
.btn--on-dark { --btn-bg: #fff; --btn-fg: var(--surface-navy); box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); }
.btn--on-dark:hover { --btn-fg: var(--surface-navy); color: var(--surface-navy); }
.btn--ghost.btn--on-dark { --btn-bg: transparent; --btn-fg:#fff; border-color: var(--line-dark); }
.btn--ghost.btn--on-dark:hover { background: rgba(255,255,255,.08); border-color:#fff; color:#fff; }

.btn .btn-arrow { transition: transform .2s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

.textlink {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
}
.textlink svg { transition: transform .2s var(--ease); }
.textlink:hover svg { transform: translateX(3px); }

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck {
  border-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(19,41,75,.4);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 112px;
}
.nav__logo { flex: 0 0 157px; width: 157px; }
.nav__logo img { display: block; width: 157px; height: auto; max-width: none; }
.nav__links a { white-space: nowrap; }
/* Desktop: links + CTA sit on one balanced row, pushed to the right */
.nav__menu { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; }
.nav__links {
  display: flex; align-items: center; gap: .35rem; list-style: none;
}
.nav__links a {
  display: block; padding: .55rem .85rem; border-radius: var(--radius-pill);
  font-family: var(--font-head); font-weight: 500; font-size: .95rem;
  color: var(--navy);
}
.nav__links a:hover { background: rgba(19,41,75,.06); color: var(--navy); }
.nav__links a[aria-current="page"] { color: var(--crimson); }
.nav__cta { display: flex; align-items: center; gap: .75rem; }
.nav__cta .phone {
  font-family: var(--font-head); font-weight: 600; color: var(--navy);
  font-size: .95rem; white-space: nowrap;
}
.nav__cta .phone:hover { color: var(--crimson); }

.nav__toggle {
  display: none; width: 46px; height: 46px; border: none; background: transparent;
  cursor: pointer; border-radius: 10px; padding: 11px;
}
.nav__toggle span { display:block; height:2px; background: var(--navy); border-radius:2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease); }
.nav__toggle span + span { margin-top: 5px; }
.nav.is-open .nav__toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: fixed; inset: 112px 0 auto 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
    display: grid; gap: 1.25rem; padding: 1.5rem var(--gutter) 2rem;
    margin-left: 0;
    transform: translateY(-140%); transition: transform .35s var(--ease);
    box-shadow: var(--shadow-md);
  }
  .nav.is-open .nav__menu { transform: translateY(0); }
  .nav__links { flex-direction: column; align-items: stretch; gap: .25rem; }
  .nav__links a { padding: .8rem 1rem; font-size: 1.05rem; }
  .nav__cta { flex-direction: column; align-items: stretch; }
  .nav__cta .btn { justify-content: center; }
  .nav__cta .phone { text-align: center; padding: .4rem; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; overflow: clip; padding-block: clamp(3rem,7vw,5.5rem) clamp(3.5rem,8vw,6rem); }
.hero__grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,5vw,4rem);
  align-items: center;
}
.hero__eyebrow { margin-bottom: 1.1rem; }
.hero h1 { margin-bottom: 1.25rem; }
.hero h1 .accent { color: var(--crimson); }
.hero__lead { font-size: 1.22rem; color: var(--muted); max-width: 34ch; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.hero__trust { display: flex; gap: 1.75rem; margin-top: 2.5rem; flex-wrap: wrap; }
.hero__trust .stat b {
  font-family: var(--font-head); font-size: 1.6rem; color: var(--navy); display: block; line-height: 1;
}
.hero__trust .stat span { font-size: .85rem; color: var(--muted); }

.hero__art { position: relative; display: grid; place-items: center; }
.hero__art img { width: min(420px, 100%); filter: drop-shadow(0 30px 50px rgba(19,41,75,.18)); }
.hero__ring {
  position: absolute; border-radius: 50%; border: 2px dashed rgba(19,41,75,.16);
  inset: -6% -6% -6% -6%; animation: spin 60s linear infinite;
}
.hero__ring--inner { inset: 10% 10%; border-color: rgba(192,36,53,.20); animation-duration: 45s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero__ring { animation: none; } }

.hero__blob {
  position: absolute; z-index: -1; width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(192,36,53,.10), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(19,41,75,.10), transparent 60%);
  top: -20%; right: -14%; filter: blur(10px);
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
  .hero__art img { width: min(300px, 70%); }
  .hero__lead { max-width: none; }
}

/* ============================================================
   Service cards
   ============================================================ */
.grid-services {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
@media (max-width: 900px){ .grid-services{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .grid-services{ grid-template-columns: 1fr;} }
/* Center a lone trailing card (e.g. a 7th service) on its own last row */
@media (min-width: 901px){
  .grid-services > :last-child:nth-child(3n+1){ grid-column: 2 / 3; }
}

.card {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 2rem 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  overflow: hidden;
}
.card::after {
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background: radial-gradient(140px 140px at 100% 0, rgba(192,36,53,.07), transparent 70%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(19,41,75,.14); }
.card:hover::after { opacity: 1; }
.card__icon {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--surface-navy), var(--navy-700));
  color: #fff; margin-bottom: 1.25rem;
}
.card__icon svg { width: 30px; height: 30px; }
.card:nth-child(3n+2) .card__icon { background: linear-gradient(150deg, var(--crimson), var(--crimson-600)); }
.card h3 { color: var(--navy); font-weight: 800; margin-bottom: .8rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.card p { color: var(--muted); font-size: .98rem; margin-bottom: 1.1rem; }
.card .textlink { color: var(--navy); }
.card .textlink:hover { color: var(--crimson); }

/* ============================================================
   Value / feature rows
   ============================================================ */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center;
}
@media (max-width: 820px){ .split{ grid-template-columns: 1fr; } }

.check-list { list-style: none; display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.check-list li { display: grid; grid-template-columns: 30px 1fr; gap: .85rem; align-items: start; }
.check-list li svg { margin-top: 3px; color: var(--crimson); flex: none; }
.check-list li b { font-family: var(--font-head); color: var(--navy); display: block; }
.check-list li span { color: var(--muted); font-size: .96rem; }

.media-panel {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(150deg, var(--surface-navy), var(--navy-800));
  padding: clamp(2rem,4vw,3rem); color: #fff; min-height: 320px;
  display: grid; align-content: center; gap: 1rem;
}
.media-panel h3, .media-panel p { color: #fff; }
.media-panel p { color: rgba(255,255,255,.78); }
.media-panel .ring-deco { position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%; border: 2px dashed rgba(255,255,255,.18); }
.media-panel .ring-deco::after { content:""; position:absolute; inset: 40px; border-radius:50%;
  border: 2px solid rgba(192,36,53,.5); }

/* ============================================================
   Process steps
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; counter-reset: step; }
@media (max-width: 900px){ .steps{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 520px){ .steps{ grid-template-columns: 1fr;} }
.step { position: relative; padding-top: 3.4rem; }
.step__num {
  position: absolute; top: 0; left: 0;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; color: #fff;
  background: var(--crimson);
  box-shadow: 0 8px 18px -8px rgba(192,36,53,.6);
}
.step h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.step p { color: var(--muted); font-size: .93rem; }

/* ============================================================
   Stats band
   ============================================================ */
.band-navy { background: var(--surface-navy); color: #fff; position: relative; overflow: hidden; }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-navy p { color: rgba(255,255,255,.78); }
.band-navy .eyebrow { color: var(--crimson-400); }
.band-navy .eyebrow::before { background: var(--crimson-400); }
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; text-align: center; }
@media (max-width: 700px){ .stats{ grid-template-columns: repeat(2,1fr);} }
.stats .num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem,5vw,3.2rem);
  color: #fff; line-height: 1; }
.stats .num .unit { color: var(--crimson-400); }
.stats .lbl { color: rgba(255,255,255,.7); font-size: .9rem; margin-top: .5rem; }

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: .75rem; }
.faq__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq__q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 1.15rem 1.35rem; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
  color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq__q .ico { flex: none; width: 24px; height: 24px; position: relative; transition: transform .3s var(--ease); }
.faq__q .ico::before, .faq__q .ico::after {
  content:""; position:absolute; background: var(--crimson); border-radius: 2px;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.faq__q .ico::before { width: 14px; height: 2px; }
.faq__q .ico::after { width: 2px; height: 14px; transition: transform .3s var(--ease); }
.faq__item.is-open .ico::after { transform: translate(-50%,-50%) scaleY(0); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq__a p { padding: 0 1.35rem 1.25rem; color: var(--muted); }

/* ============================================================
   CTA band
   ============================================================ */
.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--crimson), var(--crimson-600));
  color: #fff; border-radius: var(--radius-lg);
  padding: clamp(2.5rem,5vw,4rem); text-align: center;
}
.cta h2 { color: #fff; margin-bottom: .8rem; }
.cta p { color: rgba(255,255,255,.9); max-width: 52ch; margin: 0 auto 1.8rem; font-size: 1.1rem; }
.cta__actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.cta .ring-deco { position: absolute; border-radius: 50%; border: 2px dashed rgba(255,255,255,.22); }
.cta .ring-deco--a { width: 260px; height: 260px; left: -80px; bottom: -110px; }
.cta .ring-deco--b { width: 180px; height: 180px; right: -50px; top: -70px; }

/* ============================================================
   Page hero (interior pages)
   ============================================================ */
.page-hero { background: var(--surface-navy); color: #fff; position: relative; overflow: hidden;
  padding-block: clamp(3rem,6vw,4.5rem); }
.page-hero h1 { color: #fff; }
.page-hero .lead { color: rgba(255,255,255,.8); margin-top: 1rem; max-width: 60ch; }
.page-hero .eyebrow { color: var(--crimson-400); }
.page-hero .eyebrow::before { background: var(--crimson-400); }
.breadcrumb { font-size: .85rem; color: rgba(255,255,255,.6); margin-bottom: 1rem; font-family: var(--font-head); }
.breadcrumb a { color: rgba(255,255,255,.8); }
.breadcrumb a:hover { color: #fff; }
.page-hero .ring-deco { position:absolute; right:-90px; top:-90px; width:300px; height:300px;
  border-radius:50%; border:2px dashed rgba(255,255,255,.14); }
.page-hero .ring-deco::after{ content:""; position:absolute; inset:55px; border-radius:50%;
  border:2px solid rgba(192,36,53,.4); }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,5vw,3.5rem); align-items: start; }
@media (max-width: 820px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-info { display: grid; gap: 1.5rem; }
.contact-info .row { display: grid; grid-template-columns: 48px 1fr; gap: 1rem; align-items: start; }
.contact-info .row .ic { width:48px; height:48px; border-radius: 14px; display:grid; place-items:center;
  background: rgba(19,41,75,.06); color: var(--crimson); }
.contact-info .row b { font-family: var(--font-head); color: var(--navy); display:block; }
.contact-info .row a, .contact-info .row span { color: var(--muted); }

.form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem,3vw,2.25rem); box-shadow: var(--shadow-sm); display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field.row2 { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 520px){ .field.row2{ grid-template-columns: 1fr; } }
.field label { font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--navy); }
.field input, .field textarea, .field select {
  font: inherit; color: var(--ink); background: var(--cream);
  border: 1px solid var(--line); border-radius: 10px; padding: .8rem .95rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--crimson-400); background: var(--white);
  box-shadow: 0 0 0 4px rgba(192,36,53,.12);
}
.field textarea { min-height: 140px; resize: vertical; }
.field select.just-set { border-color: var(--crimson); box-shadow: 0 0 0 4px rgba(192,36,53,.14); background: var(--white); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form__note { font-size: .82rem; color: var(--muted); }
.alert { border-radius: 10px; padding: .9rem 1.1rem; font-size: .95rem; }
.alert--ok { background: rgba(29,140,80,.1); color: #1D8C50; border: 1px solid rgba(29,140,80,.25); }
.alert--err { background: rgba(192,36,53,.08); color: var(--crimson-600); border: 1px solid rgba(192,36,53,.25); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--surface-navy); color: #fff; padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1.1rem; letter-spacing: .02em; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
@media (max-width: 820px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } }
@media (max-width: 480px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-brand img { height: 112px; width: auto; margin-bottom: 1rem; }
.footer-brand p { color: rgba(255,255,255,.7); font-size: .95rem; max-width: 34ch; }
.footer-links { list-style: none; display: grid; gap: .6rem; }
.footer-links a { color: rgba(255,255,255,.78); font-size: .95rem; }
.footer-links a:hover { color: #fff; }
.footer-contact { display: grid; gap: .7rem; color: rgba(255,255,255,.78); font-size: .95rem; }
.footer-contact a { color: rgba(255,255,255,.9); }
.footer-contact a:hover { color: #fff; }
.social { display: flex; gap: .6rem; margin-top: 1rem; }
.social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #fff; transition: background .2s var(--ease), transform .2s var(--ease); }
.social a:hover { background: var(--crimson); transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid var(--line-dark); margin-top: 2.5rem; padding-top: 1.5rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: rgba(255,255,255,.6); font-size: .85rem; }
.footer-bottom a { color: rgba(255,255,255,.75); }

/* Logo swap: footer uses white version via CSS filter if needed */
.footer-brand img { filter: brightness(0) invert(1); opacity: .95; }

/* ============================================================
   Scroll-reveal
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"]{ transition-delay: .08s; }
.reveal[data-delay="2"]{ transition-delay: .16s; }
.reveal[data-delay="3"]{ transition-delay: .24s; }
.reveal[data-delay="4"]{ transition-delay: .32s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Prose (rich text blocks) ---------- */
.prose p { margin-bottom: 1.1rem; color: var(--muted); }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { margin: 2rem 0 .8rem; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.skip-link { position:absolute; left:-9999px; top:0; background:var(--white); color:var(--navy);
  padding:.6rem 1rem; z-index:200; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; }

/* ============================================================
   Chips (tag lists) — used on landing pages
   ============================================================ */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem; border-radius: var(--radius-pill);
  background: var(--white); border: 1px solid var(--line);
  font-family: var(--font-head); font-weight: 500; font-size: .9rem; color: var(--navy);
}
.chip svg { color: var(--crimson); flex: none; }
.band-navy .chip { background: rgba(255,255,255,.06); border-color: var(--line-dark); color: #fff; }
.band-navy .chip svg { color: var(--crimson-400); }

/* Problem list (icon + text rows), works on light or navy */
.problem-list { list-style: none; display: grid; gap: 1rem; margin: 0; }
.problem-list li { display: grid; grid-template-columns: 30px 1fr; gap: .85rem; align-items: start; }
.problem-list li svg { margin-top: 2px; color: var(--crimson); flex: none; }
.band-navy .problem-list li svg { color: var(--crimson-400); }
.band-navy .problem-list li { color: rgba(255,255,255,.85); }

/* ============================================================
   Pricing / sprint cards
   ============================================================ */
.price-grid { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; }
.price-card {
  flex: 1 1 320px; max-width: 372px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.9rem 1.75rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.price-card.is-featured { border-color: var(--crimson); box-shadow: 0 22px 50px -22px rgba(192,36,53,.4); }
.price-card__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--crimson); color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: .72rem;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .4rem .85rem; border-radius: var(--radius-pill); white-space: nowrap;
}
.price-card h3 { color: var(--navy); font-size: 1.55rem; font-weight: 800; margin-bottom: .85rem; padding-bottom: .85rem; border-bottom: 1px solid var(--line); }
.price-card .price { font-family: var(--font-head); font-weight: 800; font-size: 2rem; color: var(--crimson); line-height: 1; }
.price-card .price small { display: block; font-size: .82rem; font-weight: 500; color: var(--muted); margin-top: .4rem; letter-spacing: 0; }
.price-card .best-for { color: var(--crimson); font-weight: 600; font-family: var(--font-head); font-size: .92rem; margin: 1.1rem 0 .5rem; }
.price-card .desc { color: var(--muted); font-size: .95rem; margin-bottom: 1.2rem; }
.price-divider { border: none; border-top: 1px solid var(--line); margin: 0 0 1.15rem; }
.price-list { list-style: none; display: grid; gap: .55rem; margin: 0 0 1.6rem; }
.price-list li { display: grid; grid-template-columns: 19px 1fr; gap: .6rem; align-items: start; color: var(--ink); font-size: .92rem; }
.price-list li svg { margin-top: 3px; color: var(--crimson); flex: none; }
.price-card .btn { margin-top: auto; justify-content: center; }

/* ============================================================
   Announcement pill + Meet Avery (AI receptionist)
   ============================================================ */
.announce {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-bottom: 1.2rem; padding: .5rem .95rem;
  border-radius: var(--radius-pill);
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--navy);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.announce:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--navy); }
.announce svg { color: var(--crimson); transition: transform .2s var(--ease); }
.announce:hover svg { transform: translateX(3px); }

.pulse-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--crimson); flex: none; }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--crimson); animation: pulsering 1.9s ease-out infinite; }
@keyframes pulsering { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.2); opacity: 0; } }

.avery-card {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: 2rem; display: grid; gap: 1.5rem;
}
.avery-card .ring-deco { position: absolute; right: -70px; top: -70px; width: 220px; height: 220px;
  border-radius: 50%; border: 2px dashed rgba(255,255,255,.14); }
.avery-head { display: flex; align-items: center; gap: 1rem; position: relative; z-index: 1; }
.avery-avatar { width: 62px; height: 62px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--crimson), var(--crimson-600)); color: #fff; }
.avery-avatar svg { width: 28px; height: 28px; }
.avery-head b { color: #fff; font-family: var(--font-head); font-size: 1.3rem; line-height: 1.1; display: block; }
.avery-role { color: rgba(255,255,255,.6); font-size: .85rem; }
.avery-live { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .3rem;
  font-family: var(--font-head); font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--crimson-400); }
.avery-live .pulse-dot, .avery-live .pulse-dot::after { background: var(--crimson-400); }

.waveform { display: flex; align-items: center; justify-content: center; gap: 5px; height: 54px; position: relative; z-index: 1; }
.waveform span { width: 5px; height: 12px; border-radius: 3px; background: var(--crimson-400); animation: averywave 1.1s ease-in-out infinite; }
.waveform span:nth-child(1){ animation-delay: -.90s }
.waveform span:nth-child(2){ animation-delay: -.50s }
.waveform span:nth-child(3){ animation-delay: -.70s }
.waveform span:nth-child(4){ animation-delay: -.20s }
.waveform span:nth-child(5){ animation-delay: -.60s }
.waveform span:nth-child(6){ animation-delay: -.05s }
.waveform span:nth-child(7){ animation-delay: -.80s }
.waveform span:nth-child(8){ animation-delay: -.30s }
.waveform span:nth-child(9){ animation-delay: -.55s }
.waveform span:nth-child(10){ animation-delay: -.40s }
.waveform span:nth-child(11){ animation-delay: -.75s }
@keyframes averywave { 0%,100% { height: 10px; opacity: .55; } 50% { height: 42px; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pulse-dot::after, .waveform span { animation: none; }
  .waveform span { height: 26px; }
}

/* ============================================================
   Dark mode
   Follows the visitor's OS/browser theme automatically: a tiny inline
   <head> script sets data-theme from prefers-color-scheme and live-updates
   when the OS theme changes. The same [data-theme] hook supports a future
   toggle. A no-JS @media fallback (bottom) keeps the palette correct even
   if the script never runs. Brand navy sections stay navy via --surface-navy.
   ============================================================ */
[data-theme="dark"] {
  --cream:     #0f1b2e;                 /* page background */
  --white:     #17273f;                 /* cards / elevated surfaces */
  --ink:       #e7ecf5;                 /* body text */
  --muted:     #9aa7bd;                 /* secondary text */
  --line:      rgba(255,255,255,.12);   /* hairline borders */
  --navy:      #eaf0fa;                 /* former navy foreground -> light */
  --header-bg: rgba(12,22,38,.82);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.45);
  --shadow-md: 0 16px 40px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 30px 70px -20px rgba(0,0,0,.72);
  color-scheme: dark;
}

/* Element polish (navy tints that don't come from a token -> light on dark) */
[data-theme="dark"] .site-header.is-stuck { box-shadow: 0 6px 24px -18px rgba(0,0,0,.6); }
[data-theme="dark"] .nav__links a:hover    { background: rgba(255,255,255,.08); }
[data-theme="dark"] .btn--ghost            { border-color: rgba(255,255,255,.22); }
[data-theme="dark"] .btn--ghost:hover      { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.5); }
[data-theme="dark"] .card:hover            { border-color: rgba(255,255,255,.16); }
[data-theme="dark"] .hero__ring            { border-color: rgba(255,255,255,.14); }
[data-theme="dark"] .hero__art img         { filter: drop-shadow(0 24px 46px rgba(0,0,0,.55)); }
[data-theme="dark"] .contact-info .row .ic { background: rgba(255,255,255,.06); }
[data-theme="dark"] .field ::placeholder   { color: var(--muted); opacity: .85; }
[data-theme="dark"] .alert--ok  { background: rgba(52,199,120,.12); color: #7ee6a6; border-color: rgba(52,199,120,.32); }
[data-theme="dark"] .alert--err { background: rgba(216,67,79,.15);  color: #ff9ba4; border-color: rgba(216,67,79,.38); }

/* Logo swap: light logo by default, dark logo when the theme is dark */
.nav__logo .logo-dark { display: none; }
[data-theme="dark"] .nav__logo .logo-light { display: none; }
[data-theme="dark"] .nav__logo .logo-dark  { display: block; }

/* No-JS fallback: honor the OS dark preference if the script didn't run */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --cream:#0f1b2e; --white:#17273f; --ink:#e7ecf5; --muted:#9aa7bd;
    --line:rgba(255,255,255,.12); --navy:#eaf0fa; --header-bg:rgba(12,22,38,.82);
    --shadow-sm:0 2px 10px rgba(0,0,0,.45); --shadow-md:0 16px 40px -12px rgba(0,0,0,.6);
    --shadow-lg:0 30px 70px -20px rgba(0,0,0,.72); color-scheme: dark;
  }
  :root:not([data-theme]) .nav__logo .logo-light { display: none; }
  :root:not([data-theme]) .nav__logo .logo-dark  { display: block; }
}

/* ============================================================
   INDUSTRY PAGES + ACCENT SYSTEM
   ------------------------------------------------------------
   Each industry page wraps itself in .ind-scope and defines its
   own --accent tokens inline (see partials/industry.php).

   Accent discipline — the accent is WAYFINDING, not a rebrand:
     allowed  eyebrows, rules, icon chips, step numbers, art wash
     never    primary buttons, the logo lockup, links in body copy
   Those stay navy/crimson so every industry page still reads as
   Our Creative Works.

   Two surfaces, two accents. .page-hero and .band-navy use
   --surface-navy and stay dark navy in BOTH themes, so anything
   sitting on them uses --accent-on-dark (the light value)
   regardless of the current theme.
   ============================================================ */

.eyebrow--accent { color: var(--accent); }
.eyebrow--accent::before { background: var(--accent); }
/* Beat .page-hero .eyebrow / .band-navy .eyebrow (same specificity, later wins) */
.page-hero .eyebrow--accent,
.band-navy .eyebrow--accent { color: var(--accent-on-dark); }
.page-hero .eyebrow--accent::before,
.band-navy .eyebrow--accent::before { background: var(--accent-on-dark); }

/* ---------- Industry hero ---------- */
.ind-hero__grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
.ind-hero .lead { max-width: 56ch; }
.ind-art {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid var(--accent-on-dark-soft);
  background:
    radial-gradient(120% 100% at 15% 0%, var(--accent-on-dark-soft), transparent 60%),
    linear-gradient(155deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  display: grid; place-items: center;
}
.ind-art img { width: 100%; height: 100%; object-fit: cover; }
.ind-art__wash {
  position: absolute; inset: auto -20% -45% -20%; height: 75%;
  background: radial-gradient(60% 100% at 50% 100%, var(--accent-glow), transparent 70%);
}
.ind-art__glyph {
  position: relative; width: 44%; height: 44%;
  color: var(--accent-on-dark); opacity: .5;
}
@media (max-width: 900px) {
  .ind-hero__grid { grid-template-columns: 1fr; }
  .ind-art { display: none; }   /* decorative only — never hide content here */
}

/* ---------- Leak / stat strip ---------- */
.ind-stats-band { padding-block: clamp(2.2rem, 4vw, 3.4rem); background: var(--white); }
.ind-stats__intro {
  font-family: var(--font-head); font-weight: 600; color: var(--navy);
  font-size: 1.1rem; margin-bottom: 1.5rem;
}
.ind-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.ind-stat { padding-left: 1rem; border-left: 3px solid var(--accent); }
.ind-stat b {
  display: block; font-family: var(--font-head); color: var(--navy);
  font-size: 1.02rem; margin-bottom: .35rem;
}
.ind-stat p { color: var(--muted); font-size: .94rem; margin: 0; }
@media (max-width: 860px) { .ind-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ind-stats { grid-template-columns: 1fr; } }

/* ---------- Solutions (outcome cards) ---------- */
.ind-solutions { display: grid; gap: 1.25rem; }
.ind-solution {
  display: grid; grid-template-columns: 62px 1fr; gap: 1.4rem; align-items: start;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem 1.7rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.ind-solution:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
.ind-solution__icon {
  width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
}
.ind-solution__icon svg { width: 28px; height: 28px; }
.ind-solution h3 { color: var(--navy); margin-bottom: .55rem; }
.ind-solution p { color: var(--muted); font-size: .99rem; }
.ind-solution__svc { margin-top: .9rem; font-size: .88rem; color: var(--muted); }
.ind-solution__svc span { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.ind-solution__svc a { color: var(--navy); border-bottom: 1px solid var(--accent-line); }
.ind-solution__svc a:hover { color: var(--accent); }
@media (max-width: 620px) {
  .ind-solution { grid-template-columns: 1fr; gap: 1rem; padding: 1.4rem; }
}

/* ---------- Spotlight panel ---------- */
.split--reverse > *:first-child { order: 2; }
.split--reverse > *:last-child  { order: 1; }
@media (max-width: 900px) {
  .split--reverse > *:first-child { order: 0; }
  .split--reverse > *:last-child  { order: 0; }
}
.ind-panel {
  background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius); padding: 1.9rem;
  box-shadow: var(--shadow-sm);
}
.ind-panel h3 { color: var(--navy); margin-bottom: .4rem; }
.check-list--accent li svg { color: var(--accent); }

/* ---------- Avery band ---------- */
.ind-avery {
  border-radius: var(--radius-lg); padding: clamp(2rem, 4vw, 3.2rem);
  position: relative;
}
.ind-avery__head { max-width: 62ch; }
.ind-avery__head h2 { margin: .5rem 0 .8rem; }
.ind-avery__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; margin-top: 1.9rem; }
.ind-avery__list li svg { color: var(--accent-on-dark); }
.band-navy .check-list li b    { color: #fff; }
.band-navy .check-list li span { color: rgba(255,255,255,.82); }
.ind-avery__honest {
  margin-top: 1.7rem; padding: .9rem 1.15rem; border-radius: var(--radius);
  background: rgba(255,255,255,.06); border-left: 3px solid var(--accent-on-dark);
  font-size: .95rem;
}
@media (max-width: 760px) { .ind-avery__list { grid-template-columns: 1fr; } }

/* ---------- Steps ---------- */
.steps--flex { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.step--accent .step__num { background: var(--accent); color: var(--accent-ink); }

/* ---------- Sibling industries ---------- */
.ind-siblings { padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.ind-siblings__label {
  font-family: var(--font-head); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1rem;
}
.chip--quiet { color: var(--muted); border-style: dashed; }

/* ---------- Hub: industry cards ---------- */
.card--link { display: block; color: var(--ink); }
.card--link:hover { color: var(--ink); }
.card__rule {
  display: block; width: 40px; height: 4px; border-radius: 2px;
  background: var(--accent, var(--crimson)); margin-bottom: 1.2rem;
}
.card__more {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  color: var(--navy);
}
.card--link:hover .card__more { color: var(--crimson); }

/* ============================================================
   INDUSTRY SEARCH — reusable discovery component (.isearch)
   ------------------------------------------------------------
   Two variants and two surfaces, combined freely:

     --full     the hub hero: big field, full result copy
     --compact  inline (homepage hero): tighter, trimmed copy

     --on-dark  always-navy surfaces (.page-hero). Fixed white ink,
                because those surfaces stay navy in BOTH themes.
     --on-light themed surfaces (--cream / --white). Uses theme
                tokens so it inverts correctly in dark mode.

   Getting the surface wrong is how you end up with white text in a
   white field, so every colour below goes through these four vars
   rather than being hard-coded per rule.
   ============================================================ */

.isearch {
  --is-fg: var(--ink);
  --is-muted: var(--muted);
  --is-field: var(--white);
  --is-line: var(--line);
  max-width: 640px;
}
.isearch--on-dark {
  --is-fg: #fff;
  --is-muted: rgba(255,255,255,.62);
  --is-field: rgba(255,255,255,.08);
  --is-line: rgba(255,255,255,.26);
}

.isearch label {
  display: block; font-family: var(--font-head); font-weight: 600;
  color: var(--is-fg); margin-bottom: .6rem; font-size: .98rem;
}
.isearch__row { display: flex; gap: .7rem; position: relative; }
.isearch__icon {
  position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%);
  color: var(--is-muted); pointer-events: none; display: flex;
}
.isearch input {
  flex: 1 1 auto; min-width: 0;
  padding: .95rem 1.1rem .95rem 2.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--is-line); background: var(--is-field);
  color: var(--is-fg); font-family: var(--font-body); font-size: 1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.isearch input::placeholder { color: var(--is-muted); }
.isearch input:focus {
  outline: 3px solid var(--crimson-400); outline-offset: 2px;
  border-color: transparent;
}
.isearch--on-light input { box-shadow: var(--shadow-sm); }
.isearch__note { color: var(--is-muted); font-size: .88rem; margin-top: .7rem; }
.isearch__note a { color: var(--is-fg); border-bottom: 1px solid var(--crimson-400); }
.isearch__note a:hover { color: var(--crimson); }
.isearch.is-busy input { opacity: .75; }

/* Compact: sits inside an existing hero, so it must not shout. */
.isearch--compact { margin-top: 1.9rem; max-width: 540px; }
.isearch--compact label { font-size: .94rem; margin-bottom: .5rem; }
.isearch--compact input { padding: .8rem 1rem .8rem 2.7rem; font-size: .96rem; }
.isearch--compact .btn { padding: .8rem 1.25rem; }
.isearch--compact .isearch__note { font-size: .84rem; margin-top: .55rem; }

@media (max-width: 520px) {
  .isearch__row { flex-direction: column; }
  .isearch__icon { top: 1.4rem; }
  .isearch .btn { justify-content: center; }
}

/* ---------- Results ---------- */
.isearch__results { margin-top: 1.4rem; }
.isearch__results:empty { display: none; }
.isearch--compact .isearch__results { margin-top: 1rem; }

.isearch__hit {
  position: relative; display: flex; align-items: center; gap: 1.1rem;
  border-radius: var(--radius); overflow: hidden;
  padding: 1.15rem 1.35rem 1.15rem 1.6rem;
  color: var(--is-fg);
}
.isearch--on-dark .isearch__hit {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
}
.isearch--on-light .isearch__hit {
  background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.isearch--compact .isearch__hit { padding: .95rem 1.1rem .95rem 1.35rem; }

/* Only the "go to the page" result is a link, so only it gets hover. */
a.isearch__hit--go:hover { color: var(--is-fg); }
.isearch--on-dark a.isearch__hit--go:hover { background: rgba(255,255,255,.12); }
.isearch--on-light a.isearch__hit--go:hover { border-color: var(--accent, var(--crimson)); }

.isearch__bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent, var(--crimson));
}
.isearch__body { display: grid; gap: .3rem; flex: 1 1 auto; }
.isearch__body b { font-family: var(--font-head); font-size: 1.03rem; color: var(--is-fg); }
.isearch__body span { color: var(--is-muted); font-size: .95rem; }
.isearch__body a { color: var(--is-fg); border-bottom: 1px solid var(--crimson-400); }
.isearch__body a:hover { color: var(--crimson); }
.isearch__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .9rem; }
.isearch__actions .btn { border-bottom: 0; }
.isearch__arrow { flex: none; color: var(--is-muted); }
a.isearch__hit--go:hover .isearch__arrow { color: var(--is-fg); }
.isearch__also { margin-top: .9rem; color: var(--is-muted); font-size: .9rem; }
.isearch__also a { color: var(--is-fg); border-bottom: 1px solid var(--crimson-400); }

/* Chips inside a result follow the surface too. */
.isearch--on-dark .isearch__hit .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #fff; }

/* ---------- Nav: "Find your industry" ---------- */
/* Text-only, like every other nav item — the label is doing the work. It only
   needs to resist wrapping, since it is the longest item in the bar. */
.nav__links a.nav__find { white-space: nowrap; }
/* The CTA must never wrap. Adding a fifth link squeezed it enough that
   "Start a project" broke onto two lines. */
.nav__cta .btn { white-space: nowrap; }

/* The nav carries 5 links plus a phone number plus a CTA button. Below ~1280px
   that is too much, so the phone number stands down first — it is repeated in
   the footer, on the contact page, and in every CTA band. */
@media (max-width: 1279px) and (min-width: 1101px) {
  .nav__cta .phone { display: none; }
  .nav__menu { gap: 1.15rem; }
  .nav__links { gap: .1rem; }
}

/* ---------- Industry: accent cards block ---------- */
/* Beats .card:nth-child(3n+2) .card__icon (0,3,0) by matching its specificity
   and landing later in the file. Without this the alternating crimson icon
   from the services grid leaks into the industry cards. */
.ind-scope .card--accent .card__icon {
  background: var(--accent); color: var(--accent-ink);
}
.ind-scope .card--accent:hover { border-color: var(--accent-line); }
.ind-scope .card--accent h3 { font-size: 1.12rem; }
/* Four cards pair up rather than leaving one stranded on a second row. */
.grid-services--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .grid-services--2 { grid-template-columns: 1fr; } }

/* ---------- Industry: sibling chips carry their own accent ---------- */
.ind-siblings .chip { border-left: 3px solid var(--chip-accent, transparent); }

/* ---------- Homepage hero: mobile ordering ----------
   On a phone the hero stacks, and the industry finder was landing 1.4 screens
   down — past the fold, which defeats the point of putting it there.

   So on small screens the finder moves directly under the lead, ahead of the
   buttons. "Tell us what you do" becomes the first thing you can act on, which
   is the right primary action for a visitor who does not yet know whether they
   need web design or automation. "Start a project" is one line below and also
   lives permanently in the header, so nothing is lost.

   Desktop order is untouched. */
@media (max-width: 900px) {
  .hero__copy { display: flex; flex-direction: column; }
  /* inline-flex children would stretch full width as flex items */
  .hero__copy .announce,
  .hero__copy .hero__eyebrow { align-self: flex-start; }

  .hero__copy .announce      { order: 1; }
  .hero__copy .hero__eyebrow { order: 2; }
  .hero__copy h1             { order: 3; }
  .hero__copy .hero__lead    { order: 4; }
  .hero__copy .isearch       { order: 5; margin-top: 1.5rem; }
  .hero__copy .hero__actions { order: 6; margin-top: 1.5rem; }
  .hero__copy .hero__trust   { order: 7; }

  /* The illustration used to be order:-1, so on a phone 365px of decoration
     occupied the whole first screen and the H1 did not start until ~630px —
     the headline was effectively below the fold, never mind the finder.
     Copy first, art after. */
  .hero__art { order: 8; margin-top: 2.25rem; }
}
@media (max-width: 560px) {
  .hero__art img { max-height: 260px; width: auto; margin-inline: auto; }
}

/* Tighten the top of the hero on phones so the finder clears the fold. */
@media (max-width: 560px) {
  .hero { padding-block-start: clamp(1.5rem, 5vw, 2.5rem); }
  .hero__copy h1 { font-size: clamp(2rem, 8.4vw, 2.35rem); }
  .hero__copy .hero__lead { font-size: 1.04rem; }
  .hero__copy .isearch { margin-top: 1.25rem; }
}

/* ---------- Hub: group headings ---------- */
.ind-group {
  font-family: var(--font-head); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 1.1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line);
}
.ind-group + .grid-services { margin-bottom: 2.5rem; }
/* The global rule centers a lone trailing card, which is right for the orphan
   7th service on the homepage. A group that simply contains one industry is
   not an orphan though — it is the whole group, and it should sit under its
   own heading rather than float into the middle column. */
.ind-group + .grid-services > :last-child:nth-child(3n+1) { grid-column: auto; }

/* ============================================================
   ASK AVERY — panel
   ------------------------------------------------------------
   Deliberately not a generic purple chat bubble. Navy surface,
   crimson accent, same type scale as the rest of the site, and a
   header that says which Avery this is.
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Launcher ---------- */
.avery-launch {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 120;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.35rem; border-radius: var(--radius-pill);
  background: var(--surface-navy); color: #fff;
  border: 1px solid rgba(255,255,255,.14); cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.6);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.avery-launch:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -14px rgba(0,0,0,.66); }
.avery-launch__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--crimson-400);
  box-shadow: 0 0 0 0 rgba(216,67,79,.65); animation: avery-pulse 2.6s infinite;
}
@keyframes avery-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(216,67,79,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(216,67,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(216,67,79,0); }
}
@media (prefers-reduced-motion: reduce) { .avery-launch__dot { animation: none; } }
body.avery-is-open .avery-launch { display: none; }

/* ---------- Panel ---------- */
.avery-panel {
  position: fixed; z-index: 130;
  right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  width: min(400px, calc(100vw - 2rem));
  max-height: min(620px, calc(100dvh - 2rem));
  display: flex; flex-direction: column;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.avery-panel[hidden] { display: none; }

.avery-panel__head {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.1rem; background: var(--surface-navy); color: #fff;
}
.avery-panel__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--crimson-400); flex: none;
}
.avery-panel__head b { font-family: var(--font-head); font-size: 1rem; display: block; }
.avery-panel__head span { font-size: .8rem; color: rgba(255,255,255,.66); }
.avery-panel__head > div { flex: 1 1 auto; }
.avery-panel__close {
  background: transparent; border: 0; color: rgba(255,255,255,.7);
  cursor: pointer; padding: .3rem; border-radius: 8px; flex: none;
}
.avery-panel__close:hover { color: #fff; background: rgba(255,255,255,.1); }

.avery-panel__log {
  flex: 1 1 auto; overflow-y: auto; padding: 1.1rem;
  display: flex; flex-direction: column; gap: .85rem;
  background: var(--cream);
}

/* ---------- Messages ---------- */
.avery-msg { max-width: 92%; border-radius: var(--radius); padding: .8rem 1rem; }
.avery-msg p { font-size: .95rem; line-height: 1.6; }
.avery-msg p + p { margin-top: .7rem; }
.avery-msg--avery {
  align-self: flex-start; background: var(--white);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.avery-msg--you {
  align-self: flex-end; background: var(--surface-navy); color: #fff;
  border: 1px solid transparent;
}
.avery-msg--you p { color: #fff; }

.avery-msg--wait { display: flex; gap: .3rem; align-items: center; padding: 1rem; }
.avery-msg--wait span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  animation: avery-blink 1.2s infinite;
}
.avery-msg--wait span:nth-child(2) { animation-delay: .18s; }
.avery-msg--wait span:nth-child(3) { animation-delay: .36s; }
@keyframes avery-blink { 0%,60%,100% { opacity:.25 } 30% { opacity:1 } }
@media (prefers-reduced-motion: reduce) { .avery-msg--wait span { animation: none; opacity:.5 } }

/* ---------- Suggested prompts ---------- */
.avery-panel__prompts {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: 0 1.1rem .9rem; background: var(--cream);
}
.avery-prompt {
  border: 1px dashed var(--line); background: var(--white); color: var(--navy);
  border-radius: var(--radius-pill); padding: .45rem .85rem;
  font-family: var(--font-body); font-size: .84rem; cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.avery-prompt:hover { border-color: var(--crimson); color: var(--crimson); border-style: solid; }

/* ---------- Composer ---------- */
.avery-panel__form {
  display: flex; gap: .55rem; align-items: flex-end;
  padding: .8rem 1.1rem; border-top: 1px solid var(--line); background: var(--white);
}
.avery-panel__form textarea {
  flex: 1 1 auto; resize: none; min-height: 42px; max-height: 120px;
  padding: .6rem .8rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--cream); color: var(--ink);
  font-family: var(--font-body); font-size: .94rem; line-height: 1.5;
}
.avery-panel__form textarea:focus { outline: 3px solid var(--crimson-400); outline-offset: 1px; }
.avery-panel__form .btn { padding: .7rem .9rem; flex: none; box-shadow: none; }
.avery-panel__form.is-offline textarea { opacity: .6; }

.avery-panel__foot {
  padding: .7rem 1.1rem .9rem; background: var(--white);
  border-top: 1px solid var(--line);
  font-size: .76rem; line-height: 1.5; color: var(--muted);
}
.avery-panel__foot a { color: var(--navy); border-bottom: 1px solid var(--line); }
.avery-panel__foot a:hover { color: var(--crimson); }

/* ---------- Phone: full sheet ---------- */
@media (max-width: 560px) {
  .avery-panel {
    right: 0; bottom: 0; left: 0;
    width: 100%; max-height: 88dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  .avery-launch { right: 1rem; bottom: 1rem; padding: .8rem 1.1rem; }
}

/* An inline "ask about this" trigger for industry pages. */
.avery-ask-inline {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  color: #fff; border-bottom: 1px solid var(--crimson-400);
  background: none; border-top: 0; border-left: 0; border-right: 0;
  cursor: pointer; padding: 0 0 2px;
}
.avery-ask-inline:hover { color: var(--crimson-400); }

/* ---------- Grid blowout guard ----------
   A <select> sizes itself to its widest <option>, and a grid item defaults to
   min-width:auto, so a long option label ("AI/Admin Automation Sprint —
   $1,750") sets a floor the 1fr column cannot shrink below. On the sprint form
   that pushed the whole page 35px wider than a 375px phone.

   Fixing it at the form level rather than on that one select, because any
   future form with a long option would do exactly the same thing. */
.contact-grid > *,
.form,
.form .field,
.field.row2 > * { min-width: 0; }

.form input,
.form select,
.form textarea {
  min-width: 0;
  max-width: 100%;
}

/* ============================================================
   Legal pages — privacy policy, terms and conditions
   ============================================================
   Long-form reading, so the measure is capped and the rhythm is
   looser than a marketing section. Every colour is a token: a
   hardcoded #fff here paired with a themed ink token is the
   recurring dark-mode bug in this codebase, and legal text is
   exactly where an unreadable block goes unnoticed longest. */
.legal { max-width: 68ch; margin: 0 auto; }
.legal h2 { margin: 2.6rem 0 .9rem; font-size: 1.45rem; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin: 1.9rem 0 .6rem; font-size: 1.1rem; color: var(--ink); }
.legal p, .legal li { color: var(--muted); }
.legal ul { margin: 0 0 1.1rem 1.1rem; }
.legal li { margin-bottom: .5rem; }
.legal strong { color: var(--ink); }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.legal-meta { font-size: .9rem; color: var(--muted); margin-top: .8rem; }

/* The carrier-mandated SMS clause. Deliberately the most prominent
   thing on the page — a reviewer should not have to hunt for it. */
.legal-callout {
  background: var(--accent-soft, rgba(0,0,0,.05));
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 1.1rem 1.3rem;
  margin: 1.4rem 0 1.6rem;
}
.legal-callout p { color: var(--ink); margin: 0; }

/* Consent checkbox shown at the point a mobile number is collected.
   Carrier reviewers follow the submission link to confirm this exists;
   the policy page on its own is not accepted as proof of opt-in. */
.sms-consent { display: flex; gap: .7rem; align-items: flex-start; margin: .2rem 0 1rem; }
.sms-consent input[type="checkbox"] { margin-top: .25rem; flex: 0 0 auto; width: 1rem; height: 1rem; }
.sms-consent label { font-size: .85rem; line-height: 1.5; color: var(--muted); }
.sms-consent a { color: var(--accent); text-decoration: underline; }
.footer-legal a { color: inherit; text-decoration: none; opacity: .85; }
.footer-legal a:hover { opacity: 1; text-decoration: underline; }

/* The header is sticky, so an anchor jump (/privacy#sms, /terms#sms) lands
   with the heading hidden underneath it. Those two URLs are exactly what gets
   handed to a carrier reviewer, so the target must be visible on arrival. */
.legal h2[id], .legal h3[id] { scroll-margin-top: 6.5rem; }