/* =====================================================================
   MAPS MEDIA — LIGHT THEME
   Loaded AFTER style.css and pages.css, so it overrides the old dark look.
   To go back to the dark site, delete the <link href="theme.css"> line
   from each .html page.

   EDIT THE PALETTE HERE — this block is all you need to change.
   ===================================================================== */
:root {
  /* white + two light colours */
  --bg: #ffffff; /* base white: cards, header, footer, case-study pages */
  --tint-a: #f9f7f096; /* light colour 1 (pale blue): hero, statement, contact, hover fills */
  --tint-b: #f9f7f096; /* light colour 2 (warm sand): alternating sections, "next" bar */

  /* text */
  --ink: #14181f; /* headings, buttons, main text */
  --ink-soft: #4b525d; /* paragraphs */
  --muted: #5b6270; /* tiny uppercase labels */

  /* lines + extras */
  --line: #d9dde3;
  --line-strong: #b9c0ca;
  --brand-tint: 16%; /* Websites page: how strongly each client's colour tints the page (0% = none) */
  --logo-filter: brightness(0); /* turns the white logo black. Use "none" to keep it white */
}

/* ---------- mapping onto the existing variables ---------- */
:root {
  --paper: var(--tint-b);
  --white: var(--bg);
}

/* ---------- base ---------- */
body,
body.dark {
  background: var(--bg);
  color: var(--ink);
}
.brand img,
.footer-brand img,
.page-loader img,
.curtain img {
  filter: var(--logo-filter);
}
.page-loader {
  background: var(--bg);
  color: var(--ink);
}
.page-loader i {
  background: var(--ink);
}
.curtain {
  background: var(--bg);
}

/* ---------- header + menus ---------- */
.site-header {
  color: var(--ink);
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom-color: var(--line);
}
.header-cta {
  background: #000000;
  color: #ffffff;
 
}
.header-cta:hover {
  background: transparent;
  color: #000000;
  border: 1px solid #000000;
  border-bottom-color: var(--line);
}
.mobile-toggle i {
  background: var(--ink);
}
.mega-menu {
  background: var(--bg);
  color: var(--ink);
  border-bottom-color: var(--line);
}
.mega-links {
  border-top-color: var(--line-strong);
}
.mega-links a {
  border-bottom-color: var(--line);
}
.mega-links a:hover {
  background: linear-gradient(90deg, var(--tint-a), transparent);
}
.mega-links i {
  color: var(--ink);
}
.mobile-menu {
  background: var(--bg);
  color: var(--ink);
}
.mobile-menu a {
  border-bottom-color: var(--line);
}
.mobile-menu span {
  color: var(--muted);
}

/* ---------- buttons ---------- */
.btn {
  
}
.btn-light {
  background: l#000;
  color: var(--bg);
}
.btn-line:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.visit {
  background: var(--ink);
  color: var(--bg);
}
.visit.alt {
  background: none;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
}

/* ---------- home: hero ---------- */
.hero {
  background: var(--tint-a);
  color: var(--ink);
}
.hero-grid {
  background:
    linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size: 7vw 7vw;
}
.hero-top,
.hero-index {
  color: var(--muted);
}
.status {
  color: var(--ink);
}
.status i {
  background: var(--ink);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ink) 10%, transparent);
}
.hero-bottom p {
  color: var(--ink-soft);
}
.hero-orbit {
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
}
.hero-cross {
  color: color-mix(in srgb, var(--ink) 35%, transparent);
}

/* ---------- home: sections ---------- */
.trust-strip {
  background: var(--bg);
  border-bottom-color: var(--line);
}
.trust-strip > span,
.section-marker,
.case-number,
.case-meta,
.case-type,
.service-item .num,
.process-grid span,
.insight-grid span,
.metric span {
  color: var(--muted);
}
.section-marker span:first-child {
  color: var(--ink);
}
.cases,
.process {
  background: var(--tint-a);
}
.section-heading > p,
.process-head p,
.service-item p,
.process-grid p {
  color: var(--ink-soft);
}

/* case list: hover fills with light colour 1 instead of black */
.case-card:before {
  background: #00000072;
}
.case-card:hover .case-number,
.case-card:hover .case-meta {
  color: var(--muted);
}
.case-card:hover .case-title,
.case-card:hover .case-type,
.case-card:hover .case-arrow {
  color: var(--ink);
}

/* statement block */
.dark-statement {
  background: var(--tint-a);
  color: var(--ink);
}
.dark-statement .section-marker {
  color: var(--muted);
}
.dark-statement .section-marker span:first-child {
  color: var(--ink);
}
.statement-copy p {
  color: var(--ink-soft);
}
.statement-copy .lead {
  color: var(--ink);
}
.text-link {
  border-bottom-color: var(--ink);
}

/* contact */
.contact {
  background: var(--tint-a);
  color: var(--ink);
}
.contact-top {
  color: var(--muted);
}
.contact-top .section-marker span:first-child {
  color: var(--ink);
}
.contact-side > p {
  color: var(--ink-soft);
}
.contact-row {
  border-top-color: var(--line-strong);
}
.contact-row span {
  color: var(--muted);
}
.cform label span {
  color: var(--muted);
}
.cform input,
.cform select,
.cform textarea {
  color: var(--ink);
  border-bottom-color: color-mix(in srgb, var(--ink) 35%, transparent);
}
.cform input:focus,
.cform select:focus,
.cform textarea:focus {
  border-color: var(--ink);
}
.cform .err {
  color: #c2412f;
}
.cform label.bad input,
.cform label.bad textarea {
  border-color: #c2412f;
}
.cmsg {
  color: var(--ink-soft);
}
.cmsg a {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.cdone {
  color: var(--ink);
}
.cdone svg {
  stroke: var(--ink);
}
.cdone p {
  color: var(--ink-soft);
}

/* footer */
footer {
  background: var(--bg);
  color: var(--muted);
  border-top-color: var(--line);
}
.footer-brand {
  color: var(--ink);
}

/* project pop-up on the home page */
.case-backdrop {
  background: color-mix(in srgb, var(--ink) 55%, transparent);
}
.case-dialog {
  background: var(--bg);
  color: var(--ink);
}
.modal-copy p {
  color: var(--ink-soft);
}

/* ---------- category + case-study pages ---------- */
.c-hero {
  background: var(--tint-a);
  color: var(--ink);
}
.c-top,
.c-scroll {
  color: var(--muted);
}
.c-top a:hover {
  color: var(--ink);
}
.c-intro {
  color: var(--ink-soft);
}
.c-float.carousel,
.c-float.land {
  box-shadow: 0 30px 80px color-mix(in srgb, var(--ink) 20%, transparent);
}
.mq {
  background: var(--bg);
  color: var(--ink);
  border-block-color: var(--line);
}
.mq i {
  color: var(--muted);
}

/* chapters: Websites page tints with each client's colour (kept light) */
#chapters {
  background: color-mix(in srgb, var(--ch-bg, var(--bg)) var(--brand-tint), var(--bg));
  color: var(--ink);
}
.chapter,
#chapters .chapter {
  border-top-color: var(--line);
}
.ch-no,
.ch-side p,
figcaption p,
#chapters .ch-no,
#chapters .ch-side p,
#chapters figcaption p,
#chapters.lightbg .ch-no,
#chapters.lightbg .ch-side p,
#chapters.lightbg figcaption p {
  color: var(--ink-soft);
}
figcaption b,
#chapters.lightbg figcaption b {
  color: var(--ink);
}
.tags i,
#chapters .tags i,
#chapters.lightbg .tags i {
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
  color: var(--ink);
}
#chapters .visit,
#chapters.lightbg .visit {
  background: var(--ink);
  color: var(--bg);
}
#chapters .visit.alt,
#chapters.lightbg .visit.alt {
  background: none;
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
}

/* screenshot frames */
.media,
#chapters .media {
  background: var(--bg);
  border-color: var(--line);
}
.media.frame::before {
  background:
    #eef1f5 radial-gradient(circle 4px at 14px 13px, #c4cad3 96%, transparent),
    radial-gradient(circle 4px at 30px 13px, #d0d5dc 96%, transparent),
    radial-gradient(circle 4px at 46px 13px, #dde1e7 96%, transparent);
  border-bottom-color: var(--line);
}
.media.frame .rev-img img {
  background: var(--tint-a);
}
.cz-stage {
  background: var(--tint-a);
}
.cz-bar {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  color: var(--muted);
}
.cz-dots button:after {
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}
.cz-dots button.on:after {
  background: var(--ink);
}

/* case-study pages */
.meta {
  background: var(--bg);
  color: var(--ink);
  border-bottom-color: var(--line);
}
.meta span {
  color: var(--muted);
}
.cs-shots {
  background: var(--bg);
  color: var(--ink);
}

/* case studies with a client colour (Websites): kept as a light tint */
body.pcolor {
  --pc-tint: color-mix(in srgb, var(--pc) var(--brand-tint), var(--bg));
}
body.pcolor,
.pcolor .c-hero,
.pcolor .meta,
.pcolor .cs-shots {
  background: var(--pc-tint);
  color: var(--ink);
}
.plight .c-hero,
.plight .meta,
.plight .cs-shots {
  color: var(--ink);
}
.pcolor .meta,
.pcolor .cs-shots .cs-shot,
.pcolor .media {
  border-color: var(--line);
}
.pcolor .c-top,
.pcolor .c-scroll,
.pcolor .meta span,
.pcolor figcaption p,
.pcolor .c-intro,
.plight .c-top,
.plight .c-scroll,
.plight .meta span,
.plight figcaption p,
.plight .c-intro {
  color: var(--ink-soft);
}
.plight figcaption b {
  color: var(--ink);
}
.plight .c-top a:hover {
  color: var(--ink);
}
.plight .meta .visit,
.pcolor .meta .visit {
  background: var(--ink);
  color: var(--bg);
}
.c-bg::after {
  background:
    linear-gradient(to bottom, transparent 35%, var(--pc-tint, var(--tint-a)) 100%),
    radial-gradient(ellipse at 20% 100%, var(--pc-tint, var(--tint-a)) 0, transparent 60%);
}
.c-bg img,
.plight .c-bg img {
  opacity: 0.1;
  filter: saturate(0.8) blur(2px);
}

/* "next" bar */
.next-link {
  background: var(--tint-b);
  color: var(--ink);
}
.next-link:before {
  background: var(--tint-a);
}
.next-link:hover > * {
  color: var(--ink);
}