/* Approved Coastal palette: teal, coral, and warm gold. */
:root {
  --ink: #123c44;
  --muted: #47656a;
  --blue: #006579;
  --paper: #f6fcfa;
  --line: #c7dfdc;
  --hero-wash: #d8f3eb;
  --hero-edge: #e8f0ff;
  --headline-start: #007581;
  --headline-end: #265bd4;
  --cta: #bb402d;
  --cta-hover: #a93221;
  --accent: #f47860;
  --accent-soft: #ffede6;
  --gold: #ffcf65;
  --strip: #0d5966;
  --company: #103e46;
  --company-glow: #096a70;
  --company-accent: #a8efe0;
  --company-text: #cae7e2;
  --film-tint: #0b4344;
  --restaurant-wash: #daf2e8;
  --retail-wash: #fff0d5;
  --reports-wash: #e4ecff;
}

.site-header { background: color-mix(in srgb, var(--paper) 96%, transparent); }
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: '';
  position: absolute;
  inset: 0 calc((100vw - 100%) / -2);
  z-index: -1;
  background:
    radial-gradient(ellipse at 8% 82%, var(--hero-wash), transparent 53%),
    radial-gradient(ellipse at 96% 8%, var(--hero-edge), transparent 53%);
}
h1 em {
  background: linear-gradient(105deg, var(--headline-start), var(--headline-end));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  padding-right: 7px;
}
.hero-copy .eyebrow { color: var(--blue); }
.tiny-line { height: 3px; width: 27px; background: var(--accent); }
.button-blue { background: var(--cta); box-shadow: 0 6px 18px color-mix(in srgb, var(--cta) 20%, transparent); }
.button-blue:hover { background: var(--cta-hover); }
.button-dark { background: var(--ink); }
.button-dark:hover { background: var(--blue); }
.note-mark { background: var(--accent-soft); color: var(--cta); }
.hero-art { box-shadow: 0 22px 65px color-mix(in srgb, var(--ink) 20%, transparent); outline: 1px solid #ffffff80; }
.film-shade {
  background: linear-gradient(180deg, #10203710, color-mix(in srgb, var(--film-tint) 42%, transparent) 34%, var(--film-tint) 100%);
}
.art-dot { background: var(--gold); }
.film-control { background: color-mix(in srgb, var(--ink) 70%, transparent); }
.audience-strip { background: var(--strip); border-color: var(--strip); color: white; }
.audience-inner p { color: #e6edf2; }
.audience-inner strong { color: white; }
.audience-inner svg { color: var(--gold); }
.scenes-heading .eyebrow { color: var(--cta); }
.scene-type {
  background: var(--gold);
  color: #3e321e;
  padding: 8px 11px;
  border-radius: 4px;
  text-shadow: none;
}
.scene-card:nth-child(2) .scene-type { background: var(--accent-soft); color: var(--ink); }
.scene-copy > span { color: #fff2d6; }
.scene-card::after {
  background: linear-gradient(180deg, #10203512, #10203500 27%, #0a142654 54%, color-mix(in srgb, var(--ink) 94%, transparent));
}
.products > .section-heading .eyebrow { color: var(--cta); }
.product-tabs { gap: 12px; }
.product-tabs button { padding: 17px 15px; border-radius: 7px 7px 0 0; }
.product-tabs button[aria-selected="true"] { background: var(--restaurant-wash); }
.product-tabs button#tab-retail[aria-selected="true"] { background: var(--retail-wash); }
.product-tabs button#tab-reports[aria-selected="true"] { background: var(--reports-wash); }
.restaurant-art { background: var(--restaurant-wash); }
.retail-art { background: var(--retail-wash); }
.reports-art { background: var(--reports-wash); }
.text-link { border-color: var(--line); }
.company { background: radial-gradient(ellipse at 100% 0, var(--company-glow), transparent 63%), var(--company); }
.company .eyebrow { color: var(--gold); }
.company-heading h2 em { color: var(--company-accent); }
.company-intro,
.principles p { color: var(--company-text); }
.principles article { border-color: color-mix(in srgb, var(--company-accent) 32%, transparent); }
.principles article > span { color: var(--company-accent); }
.principles article:nth-child(2) > span { color: var(--gold); }
.principles article:nth-child(3) > span { color: #ffb69d; }
.contact { position: relative; isolation: isolate; }
.contact::before {
  content: '';
  position: absolute;
  inset: 0 calc((100vw - 100%) / -2);
  z-index: -1;
  background: linear-gradient(130deg, var(--paper) 30%, var(--accent-soft));
}
.contact-copy .eyebrow { color: var(--cta); }
.customer-access { border-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.access-icon { background: var(--gold); border-color: var(--gold); color: #4b3916; }
.login-menu a:hover { background: var(--hero-wash); }
.hero-description, .section-heading > p, .company-intro,
.contact-copy > p:not(.eyebrow), .product-copy > p:not(.eyebrow),
.scenes-heading > p:last-child { font-size: 16px; }
.desktop-nav, .login-toggle, .button, .text-button,
.text-link, .check-list li, .principles p { font-size: 14px; }
@media (max-width: 1150px) {
  .desktop-nav { gap: 17px; font-size: 12px; }
  .login-toggle { font-size: 12px; }
  .header-actions { gap: 13px; }
  .hero-actions { gap: 17px; }
  .hero-actions .button { font-size: 12px; }
}
@media (max-width: 650px) {
  .hero-description { font-size: 15px; }
  .hero-actions { gap: 19px; }
  .hero-actions .button, .text-button { font-size: 12px; }
  .section-heading > p, .company-intro, .contact-copy > p:not(.eyebrow),
  .product-copy > p:not(.eyebrow), .scenes-heading > p:last-child { font-size: 15px; }
  .check-list li, .principles p { font-size: 13px; }
  .product-tabs { gap: 6px; }
  .product-tabs button { padding: 16px 6px; font-size: 10px; }
  .scene-type { top: 22px; left: 22px; padding: 7px 9px; }
}
@media (forced-colors: active) {
  h1 em { color: CanvasText; background: none; }
}

.contact-email { display: block; width: fit-content; margin-top: 16px; font-size: 14px; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }