/* Bright Productions: a veteran agency's own brand. Navy for text, their button blue for actions, links and focus,
   bright blue only as decoration (the dots in WEB · SEARCH · SOCIAL). Montserrat for display, Open Sans for text.
   Their own client work and photography carry the look; a warm paper tone sits behind the food work. */

site-root {
  --navy: var(--color-primary);
  --blue: var(--color-accent);
  --bright: var(--color-secondary);
  --paper: #faf6ef;
  --mist: var(--color-surface);
  --hair: #dfe6ee;
  --shadow: 0 1px 2px rgb(13 36 75 / 0.05), 0 14px 34px rgb(13 36 75 / 0.09);
  /* the link arrow and the rating star are drawn, not typed: a "→" or "★" glyph would pull in two more font files (68 KB) */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.2l2.1 4.3 4.7.6-3.4 3.3.8 4.7L8 11.9l-4.2 2.2.8-4.7L1.2 6.1l4.7-.6z'/%3E%3C/svg%3E");
  text-rendering: optimizeLegibility;
}
site-root main { display: block; }
site-root :is(h1, h2, h3) { color: var(--navy); letter-spacing: -0.02em; }
site-root h1 { font-size: clamp(2.125rem, 1.5rem + 2.7vw, 3.75rem); line-height: 1.06; }
site-root h2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.625rem); line-height: 1.1; }
site-root h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
site-root p { max-width: 68ch; }
site-root a { text-underline-offset: 0.2em; }
site-root a:hover { color: var(--navy); }
site-root ::selection { background: #cfe8fb; }
site-root .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; }

/* the label above a heading: WEB · SEARCH · SOCIAL style, the dots in their bright blue */
site-root .kicker { margin: 0 0 var(--space-2); color: var(--blue); font-family: var(--font-heading); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }
site-root .dot { color: var(--bright); padding: 0 0.15em; }
site-root .lead { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.55; }
site-root .muted { color: var(--color-muted); }
/* a bright idea: their tagline's key words carry a bright-blue underline */
site-root .bright-idea { background: linear-gradient(transparent 68%, rgb(37 157 233 / 0.32) 68%); padding: 0 0.08em; }

/* actions */
site-root .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.25rem; padding: 0 1.5rem; border-radius: 0.5rem; background: var(--blue); color: #fff; font-family: var(--font-heading); font-weight: 700; text-decoration: none; border: 2px solid var(--blue); transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; }
site-root .button:hover { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 10px 22px rgb(13 36 75 / 0.2); }
site-root .button.line { background: transparent; color: var(--navy); border-color: #b9c6d4; }
site-root .button.line:hover { border-color: var(--navy); background: #fff; color: var(--navy); box-shadow: none; }
site-root .button.light { background: #fff; color: var(--navy); border-color: #fff; }
site-root .button.light:hover { background: #e6f3fd; border-color: #e6f3fd; color: var(--navy); }
site-root .button svg { width: 1.0625rem; height: 1.0625rem; fill: currentColor; }
site-root .text-link { display: inline-block; padding-block: 0.25rem; font-weight: 700; color: var(--blue); }
site-root :is(.text-link, .proof-strip .who, .service .proof span:last-child)::after {
  content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.3em; vertical-align: -0.06em;
  background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
}
site-root .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); }

/* sections */
site-root .section { padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
site-root .section.mist { background: var(--mist); }
site-root .section.paper { background: var(--paper); }
site-root .section.navy { background: var(--navy); color: #d3deea; }
site-root .section.navy :is(h2, h3) { color: #fff; }
site-root .section.navy .kicker { color: #8fcaf3; }
site-root .section.navy a:not(.button) { color: #fff; }
site-root .intro { max-width: 48rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
site-root .intro p { color: var(--color-muted); }
site-root .section.navy .intro p { color: #c4d3e3; }
site-root .card { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); padding: clamp(1.375rem, 1.1rem + 1vw, 2rem); box-shadow: var(--shadow); }

/* results: the number first, then what it means */
site-root .result { display: grid; gap: 0.25rem; }
site-root .result .num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem); line-height: 1; color: var(--navy); letter-spacing: -0.02em; }
site-root .result .what { color: var(--color-muted); }
site-root .result .who { font-weight: 700; color: var(--blue); font-size: 0.9375rem; }

/* numbers band */
site-root .numbers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 64rem) { site-root .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { site-root .numbers { grid-template-columns: minmax(0, 1fr); } }
site-root .numbers li { border-top: 1px solid rgb(255 255 255 / 0.22); padding-top: var(--space-2); position: relative; }
site-root .numbers li::before { content: ""; position: absolute; left: 0; top: -3px; width: 2.5rem; height: 5px; border-radius: 3px; background: var(--bright); }
site-root .numbers strong { display: block; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem); color: #fff; line-height: 1.05; letter-spacing: -0.02em; }
site-root .numbers span { color: #c4d3e3; }

/* quotes: anonymous today, so quiet and smaller */
site-root .quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
site-root .quotes li { margin: 0; }
site-root .quotes blockquote { margin: 0; }
site-root .quotes p { font-size: 1.0625rem; color: var(--navy); }
site-root .quotes .stars { margin: 0 0 0.5rem; line-height: 1; }
site-root .quotes .star-row { display: inline-block; width: 5.5rem; height: 1rem; background: #f2a900; -webkit-mask: var(--star) 0 50% / 1.1rem 1rem repeat-x; mask: var(--star) 0 50% / 1.1rem 1rem repeat-x; }
site-root .quotes footer { color: var(--color-muted); font-size: var(--text-small); }

/* client logos, grouped by sector */
site-root .logo-groups { display: grid; gap: var(--space-5); }
site-root .logo-group h3 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); margin-bottom: var(--space-2); }
site-root .logos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
site-root .home-logos .logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 52rem) { site-root .home-logos .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
site-root .logos li { display: grid; place-items: center; height: 5.25rem; padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--hair); border-radius: 0.625rem; }
site-root .logos img { width: auto; height: auto; max-width: min(7.25rem, 100%); max-height: 3.25rem; object-fit: contain; background-color: transparent !important; }
@media (max-width: 40rem) { site-root .logos { gap: 0.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } site-root .logos li { height: 4.5rem; padding: 0.5rem; } site-root .logos img { max-height: 2.75rem; } }

/* the closing consultation band */
site-root .consult-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
site-root .consult-side .reach { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 0.5rem; }
site-root .consult-side .reach a { font-weight: 700; display: inline-block; padding: 0.25rem 0; }
site-root .consult-side h3 { margin-top: var(--space-4); }
site-root .steps-next { margin: var(--space-3) 0 0; padding-left: 1.25rem; display: grid; gap: 0.375rem; }
@media (max-width: 56rem) { site-root .consult-grid { grid-template-columns: minmax(0, 1fr); } }

/* breadcrumbs on case studies */
site-root .crumbs { margin: 0 0 var(--space-2); font-size: var(--text-small); }
site-root .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
site-root .crumbs li + li::before { content: "›"; margin-right: 0.25rem; color: var(--color-muted); }
site-root .crumbs a { display: inline-block; padding: 0.25rem 0; }

/* prose pages */
site-root .prose h2 { margin-top: var(--space-6); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
site-root .prose h3 { margin-top: var(--space-4); }
site-root .prose ul { padding-left: 1.25rem; }
site-root .prose li { margin-bottom: 0.375rem; }

/* considered motion, only without a request for less (the platform turns all of it off for reduced motion) */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  site-root .rise { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  site-root .rise-2 { animation-delay: 0.08s; } site-root .rise-3 { animation-delay: 0.16s; } site-root .rise-4 { animation-delay: 0.24s; }
  site-root .card.lift { transition: transform 0.25s, box-shadow 0.25s; }
  site-root .card.lift:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgb(13 36 75 / 0.14); }
}

/* shared page parts */
site-root .ticks { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 0.5rem; }
site-root .ticks li { position: relative; padding-left: 1.75rem; }
site-root .ticks li::before { content: ""; position: absolute; left: 0.125rem; top: 0.45em; width: 0.875rem; height: 0.5rem; border-left: 2.5px solid var(--bright); border-bottom: 2.5px solid var(--bright); transform: rotate(-45deg); }
site-root .more { margin: var(--space-4) 0 0; }
site-root .page-hero {
  padding: clamp(3rem, 2rem + 4vw, 6rem) 0 clamp(2.5rem, 2rem + 2vw, 4rem);
  background: radial-gradient(44rem 26rem at 100% 0%, #e2f1fc 0%, rgb(226 241 252 / 0) 70%), linear-gradient(180deg, #fff 0%, var(--mist) 100%);
  border-bottom: 1px solid var(--hair);
}
site-root .narrow-hero > * { max-width: 56rem; }
site-root .page-hero h1 { margin: 0; }
site-root .page-hero .lead { margin: var(--space-3) 0 0; }
site-root .page-hero .actions { margin-top: var(--space-4); }