/* ==========================================================================
   Visual Room shared theme layer
   Loaded LAST on every page. One place for: light/dark tokens (auto, follows the
   visitor's OS setting), the footer, the standard red/pink button, form styling and
   the typography/margins of the utility pages.
   Not touched: homepage slider, What We Do (it already carries its own approved
   light/dark rules, and uses the same colour values as these tokens).
   ========================================================================== */

:root {
  --vr-bg: #fbfaf8;          /* page canvas: the off-white used on Selected Work */
  --vr-surface: #ffffff;     /* cards, panels, inputs */
  --vr-ink: #102033;
  --vr-muted: #4d5a65;
  --vr-rule: #d9dee3;
  --vr-accent: #d4324a;      /* the standard red/pink button */
  --vr-accent-hover: #a82037;
  --vr-accent-text: #b62947; /* red used for small text/links on light backgrounds */
  --vr-footer: #0b0f17;      /* ONE footer colour, light and dark */
  --vr-band: #102235;        /* closing call-to-action band */
  --vr-content: 1380px;
  --vr-gutter: clamp(20px, 6.5vw, 88px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --vr-bg: #0b0f17;
    --vr-surface: #161e2e;
    --vr-ink: #f9fafb;
    --vr-muted: #d1d5db;
    --vr-rule: #334155;
    --vr-accent: #d9384a;
    --vr-accent-hover: #b52a3c;
    --vr-accent-text: #f17888;
    --vr-band: #111a2b;
  }
}

/* ---------- Footer: one colour everywhere ---------- */
#footer,
body[class] #footer {
  background: var(--vr-footer);
  color: #fff;
}
#footer a,
body[class] #footer a { color: #fff; }
#footer a:hover,
body[class] #footer a:hover { color: #ff8491; }

/* ---------- Standard button (matches the What We Do button) ---------- */
.vr-btn,
#contactForm .button .btn,
.site-contact .button .btn,
#contactForm #btnSubmit {
  align-items: center;
  background: var(--vr-accent);
  border: 1px solid var(--vr-accent);
  border-radius: 6px;
  box-shadow: none;
  color: #fff;
  display: inline-flex;
  font: 700 14px/1.25 "Open Sans", Arial, sans-serif;
  gap: 20px;
  justify-content: space-between;
  min-height: 50px;
  opacity: 1;
  padding: 12px 18px;
  text-decoration: none;
  text-transform: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
  width: auto;
}
#contactForm #btnSubmit::after { content: "\2192"; font-size: 18px; font-weight: 400; }
.vr-btn:hover,
#contactForm .button .btn:hover,
.site-contact .button .btn:hover,
#contactForm #btnSubmit:hover {
  background: var(--vr-accent-hover);
  border-color: var(--vr-accent-hover);
  color: #fff;
  transform: translateY(-2px);
}
#contactForm #btnSubmit:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--vr-accent); }
#contactForm .button { margin-top: 34px; text-align: left; }
.site-contact #contactForm .button { text-align: right; }

/* ---------- Contact form: spacing, rhythm and dark mode ---------- */
#contactForm .row { margin-left: -15px; margin-right: -15px; }
#contactForm .floating-label { margin-top: 2.4rem; }
#contactForm .floating-label .input-float { color: var(--vr-ink); }
#contactForm .floating-label textarea.input-float { height: 190px; resize: vertical; }
#contactForm p { color: var(--vr-muted); }
#success { margin-top: 10px; }

@media (prefers-color-scheme: dark) {
  .floating-label input.input-float + label,
  .floating-label textarea.input-float + label { border-top-color: #64748b; }
  .floating-label .input-float:focus + label > span,
  .floating-label .input-float + label > span { color: #d1d5db; }
  .floating-label .input-float[data-value=""] + label > span { color: #9ca3af; }
  .floating-label input.input-float, .floating-label textarea.input-float { color: #f9fafb; }
}

/* ---------- Homepage contact block + closing statement ---------- */
body.home-page .site-contact { background: var(--vr-bg); color: var(--vr-ink); }
body.home-page .site-contact .address a { color: var(--vr-accent-text); }
.testimonial {
  background: var(--vr-band);
  color: #fff;
  margin: 0;
  padding: 72px 0;
}
.testimonial .item { opacity: 1; max-width: 760px; }
.testimonial .item .text {
  font-family: "Source Sans Pro", sans-serif;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-transform: none;
}
.testimonial .item .text sup { font-size: .45em; }
.testimonial .item .name {
  color: #ff8491;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  margin-top: 26px;
  text-transform: uppercase;
}
@media (max-width: 767px) { .testimonial { padding: 52px 0; } }

/* ---------- Utility pages: Privacy, Accessibility, Sitemap, Contact ---------- */
body.secondary-page {
  background: var(--vr-bg);
  color: var(--vr-ink);
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
}
body.secondary-page .secondary-content {
  max-width: var(--vr-content);
  padding: 72px var(--vr-gutter) 96px;
}
body.secondary-page .secondary-hero-inner {
  max-width: var(--vr-content);
  padding-left: var(--vr-gutter);
  padding-right: var(--vr-gutter);
}
body.secondary-page .secondary-content h2 {
  color: var(--vr-ink);
  font-family: "Source Sans Pro", "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 18px;
}
body.secondary-page .secondary-content h3 {
  color: var(--vr-ink);
  font-family: "Source Sans Pro", "Segoe UI", Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  margin-bottom: 10px;
}
body.secondary-page .secondary-content p,
body.secondary-page .secondary-content li {
  color: var(--vr-muted);
  font-size: 1rem;
  line-height: 1.7;
}
body.secondary-page .policy-section p,
body.secondary-page .reading-width p { max-width: 78ch; }
body.secondary-page .secondary-content a { color: var(--vr-accent-text); }
body.secondary-page .secondary-content a:hover { color: var(--vr-ink); }
body.secondary-page .secondary-section-label { color: var(--vr-accent-text); }
body.secondary-page .policy-section,
body.secondary-page .sitemap-groups,
body.secondary-page .sitemap-group,
body.secondary-page .contact-form-placeholder { border-color: var(--vr-rule); }
body.secondary-page .contact-address-card,
body.secondary-page .accessibility-callout {
  background: var(--vr-surface);
  border: 1px solid var(--vr-rule);
  border-left: 4px solid var(--vr-accent);
}
@media (max-width: 767px) {
  body.secondary-page .secondary-content { padding: 48px var(--vr-gutter) 64px; }
  body.secondary-page .secondary-hero-inner { padding-left: var(--vr-gutter); padding-right: var(--vr-gutter); }
}

/* ---------- Applied AI: same off-white as Selected Work ---------- */
body.ai-page-body,
body.ai-page-body .ai-main { background: var(--vr-bg); }

/* ---------- Case studies and Work family: one canvas colour in light mode ---------- */
body.story-engine-case-page,
body.ilink-case-study-page,
body.timeline-page { background: var(--vr-bg); }

/* ---------- Dark mode for pages that were locked to light ---------- */
@media (prefers-color-scheme: dark) {
  body.secondary-page,
  body.ai-page-body,
  body.vr-page { color-scheme: dark; }

  /* Header and logo, matching the What We Do treatment */
  body.secondary-page #header,
  body.ai-page-body #header,
  body.vr-page #header { background: rgba(11, 15, 23, .97); }
  body.secondary-page #header .logo img.dark,
  body.ai-page-body #header .logo img.dark,
  body.vr-page #header .logo img.dark { display: none !important; }
  body.secondary-page #header .logo img.light,
  body.ai-page-body #header .logo img.light,
  body.vr-page #header .logo img.light { display: block !important; }
  body.secondary-page #menu-toggle .lines,
  body.secondary-page #menu-toggle .lines::before,
  body.secondary-page #menu-toggle .lines::after,
  body.ai-page-body #menu-toggle .lines,
  body.ai-page-body #menu-toggle .lines::before,
  body.ai-page-body #menu-toggle .lines::after,
  body.vr-page #menu-toggle .lines,
  body.vr-page #menu-toggle .lines::before,
  body.vr-page #menu-toggle .lines::after { background-color: #f9fafb; }

  /* Selected Work and Room to Think use --vr-* variables */
  body.vr-page {
    --vr-paper: #0b0f17;
    --vr-white: #ffffff;      /* stays white: it is used as TEXT colour on dark feature cards */
    --vr-ink: #f9fafb;
    --vr-muted: #d1d5db;
    --vr-rule: #334155;
    --vr-accent: #d9384a;
    --vr-accent-bright: #f17888;
    background: #0b0f17;
  }
  body.vr-page .vr-mobile-nav { background: #161e2e; }
  body.vr-page .vr-cta { background: #111a2b; color: #fff; }
  body.vr-page .vr-feature h1,
  body.vr-page .vr-feature h2,
  body.vr-page .vr-feature h3 { color: #fff; }
  #footer { border-top: 1px solid #1f2937; }

  /* Applied AI */
  .ai-main {
    --ai-ink: #f9fafb;
    --ai-muted: #d1d5db;
    --ai-line: #334155;
    --ai-coral-ink: #f17888;
    --ai-focus: #8ab4ff;
  }
  .ai-main section,
  .ai-main article,
  .ai-main [class*="card"],
  .ai-main [class*="panel"] { background-color: transparent; color: var(--ai-ink); }
}

/* ---------- Room to Think hero: bright, quiet room (light) / the same room dimmed (dark) ---------- */
.rtt-hero {
  background: #eef2f6 url("../images/hero/room-to-think-hero.jpg") center 55% / cover no-repeat;
  position: relative;
}
.rtt-hero::before {
  background: linear-gradient(90deg, rgba(251,250,248,.86) 0%, rgba(251,250,248,.55) 55%, rgba(251,250,248,.15) 100%);
  content: "";
  inset: 0;
  position: absolute;
}
.rtt-hero .vr-wrap { position: relative; }
.rtt-hero .vr-intro { padding-bottom: clamp(48px, 7vw, 96px); padding-top: clamp(56px, 8vw, 110px); }
@media (prefers-color-scheme: dark) {
  .rtt-hero::before {
    background: linear-gradient(90deg, rgba(11,15,23,.93) 0%, rgba(11,15,23,.8) 55%, rgba(11,15,23,.6) 100%);
  }
}

/* ---------- Autofill: browsers must never paint fields white/blue over the text ---------- */
#contactForm { --vr-field-bg: var(--vr-bg); --vr-field-ink: var(--vr-ink); }
.about-v4__form-wrap #contactForm { --vr-field-bg: #161e2e; --vr-field-ink: #f9fafb; }
#contactForm input:-webkit-autofill,
#contactForm input:-webkit-autofill:hover,
#contactForm input:-webkit-autofill:focus,
#contactForm textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--vr-field-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--vr-field-bg) inset !important;
  -webkit-text-fill-color: var(--vr-field-ink) !important;
  caret-color: var(--vr-field-ink);
  transition: background-color 9999s ease 0s;
}
#contactForm input:autofill { box-shadow: 0 0 0 1000px var(--vr-field-bg) inset !important; -webkit-text-fill-color: var(--vr-field-ink) !important; }
/* The About card is dark in both modes: use the dark field colours there always */
.about-v4__form-wrap #contactForm .floating-label .input-float { color: #f9fafb; }
.about-v4__form-wrap #contactForm .floating-label input.input-float + label,
.about-v4__form-wrap #contactForm .floating-label textarea.input-float + label { border-top-color: #64748b; }
.about-v4__form-wrap #contactForm .floating-label .input-float + label > span,
.about-v4__form-wrap #contactForm .floating-label .input-float:focus + label > span { color: #d1d5db; }
.about-v4__form-wrap #contactForm p { color: #d1d5db; }
.about-v4__form-wrap #contactForm .button { text-align: left; }

/* ---------- Confirmation dialog + journey notice (matches the What We Do modal) ---------- */
.vr-confirm {
  align-items: center;
  background: rgba(8, 12, 20, .62);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 100000;
}
.vr-confirm[hidden], .vr-journey[hidden] { display: none; }
.vr-confirm__panel {
  background: var(--vr-surface);
  border: 1px solid var(--vr-rule);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  color: var(--vr-ink);
  max-width: 520px;
  outline: 0;
  overflow: hidden;
  padding: 36px 32px 32px;
  position: relative;
  width: 100%;
}
.vr-confirm__eyebrow {
  color: var(--vr-accent-text);
  font: 700 12px/1 "Open Sans", Arial, sans-serif;
  letter-spacing: .16em;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.vr-confirm__panel h2 {
  color: var(--vr-ink);
  font: 700 1.7rem/1.2 "Source Sans Pro", "Segoe UI", Arial, sans-serif;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  outline: 0;
  text-transform: none;
}
.vr-confirm__panel p { color: var(--vr-muted); font: 400 1rem/1.65 "Open Sans", Arial, sans-serif; }
.vr-confirm__panel p.vr-confirm__eyebrow { color: var(--vr-accent-text); }
.vr-confirm__actions { margin-top: 26px; }
.vr-confirm__actions .vr-btn { cursor: pointer; }
.vr-confirm__timer {
  animation: vr-confirm-timer linear forwards;
  background: var(--vr-accent);
  bottom: 0;
  height: 3px;
  left: 0;
  position: absolute;
  width: 100%;
}
.vr-confirm__panel.is-paused .vr-confirm__timer { animation-play-state: paused; }
@keyframes vr-confirm-timer { from { transform: scaleX(1); transform-origin: left; } to { transform: scaleX(0); transform-origin: left; } }
html.vr-confirm-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .vr-confirm__timer { animation: none; display: none; } }

.vr-journey {
  align-items: center;
  background: var(--vr-surface);
  border: 1px solid var(--vr-rule);
  border-radius: 10px;
  bottom: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
  color: var(--vr-ink);
  display: flex;
  gap: 18px;
  left: 50%;
  max-width: calc(100% - 32px);
  padding: 14px 18px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 100001;
}
.vr-journey p { color: var(--vr-ink); font: 400 15px/1.4 "Open Sans", Arial, sans-serif; margin: 0; }
.vr-journey__stay {
  background: transparent;
  border: 1px solid var(--vr-accent);
  border-radius: 6px;
  color: var(--vr-accent-text);
  cursor: pointer;
  font: 700 13px/1 "Open Sans", Arial, sans-serif;
  padding: 10px 14px;
}
.vr-journey__stay:hover { background: var(--vr-accent); color: #fff; }

/* ---------- Header: one rule everywhere, follows the visitor's theme ---------- */
body.about-v4-page #header { background: rgba(255, 255, 255, .97); }
body.about-v4-page #header .logo img.dark { display: block !important; }
body.about-v4-page #header .logo img.light { display: none !important; }
@media (prefers-color-scheme: dark) {
  body.about-v4-page { color-scheme: dark; }
  body.about-v4-page #header { background: rgba(11, 15, 23, .97); }
  body.about-v4-page #header .logo img.dark { display: none !important; }
  body.about-v4-page #header .logo img.light { display: block !important; }
  body.about-v4-page #menu-toggle .lines,
  body.about-v4-page #menu-toggle .lines::before,
  body.about-v4-page #menu-toggle .lines::after { background-color: #f9fafb; }
}

/* Footer lands flat at the very bottom of the page (see js/vr-confirm.js) */
html.vr-at-bottom #footer { transform: none !important; transition: transform .2s ease; }