/* IP-IT · Ink Teal / Warm Sand. Shared by both business areas. */
:root { background: #f2ecdd; color-scheme: light; }
html[data-theme=dark] { background: #12291d; color-scheme: dark; }
#ipit-motion[data-page] {
  --im-paper: #f2ecdd;
  --im-ink: #12291d;
  --im-muted: #6d685c;
  --im-line: #ddd3bd;
  --im-surface: #f2ecdd;
  --im-accent: #12291d;
  --im-accent-ink: #f2ecdd;
  --im-blue: #12291d;
  --im-night: #0b1d14;
}
html[data-theme=dark] #ipit-motion[data-page] {
  --im-paper: #12291d;
  --im-ink: #f2ecdd;
  --im-muted: #a9bfae;
  --im-line: #2f5c3e;
  --im-surface: #183523;
  --im-accent: #f2ecdd;
  --im-accent-ink: #12291d;
  --im-blue: #f2ecdd;
  --im-night: #0b1d14;
}
#ipit-motion ::selection,
#ipit-motion .im-action:hover,
#ipit-motion .hero-cta,
#ipit-motion .identity-mark,
#ipit-motion details[open] .service-plus,
#ipit-motion details[open] .im-plus,
#ipit-motion .im-popular-label,
#ipit-motion .contact-submit,
#ipit-motion .offer-business .im-action { color: var(--im-accent-ink); }
#ipit-motion .hero-cta:hover { color: var(--im-paper); }
#ipit-motion .contact-field input,
#ipit-motion .contact-field textarea,
#ipit-motion .contact-topic-choice > span { border-color: var(--im-muted); }
#ipit-motion .gateway {
  background: #f2ecdd;
  color: #12291d;
  border: 1px solid var(--im-line);
}
#ipit-motion .gateway-it { background: #12291d; color: #f2ecdd; }
#ipit-motion .gateway p { color: #a9bfae; }
#ipit-motion .gateway-ip p { color: #6d685c; }
#ipit-motion .gateway-action { border-color: currentColor; }
#ipit-motion .scene-light { background: radial-gradient(ellipse at 65% 60%, #fff4e180, transparent 60%); }
html[data-theme=dark] #ipit-motion .scene-light { background: radial-gradient(ellipse at 65% 60%, #2f5c3e40, transparent 65%); }
.device-screen .code-overlay { background: #0b1d14; color: #f2ecdd; border-color: #2f5c3e; }
.device-screen .code-title { color: #a9bfae; border-color: #2f5c3e; }
.device-screen .code-lines { color: #f2ecdd; }
.device-screen .code-status { background: #183523; color: #f2ecdd; }
/* The optional MacBook UI follows the page; game/status colors stay semantic. */
#ipit-motion[data-page], html[data-theme=dark] #ipit-motion[data-page] {
  --secret-bg: var(--im-paper);
  --secret-ink: var(--im-ink);
  --secret-muted: var(--im-muted);
  --secret-accent: var(--im-blue);
  --secret-border: var(--im-line);
  --secret-button: var(--im-surface);
  --secret-card: var(--im-surface);
  --secret-board: var(--im-paper);
  --secret-backdrop: #0b1d1499;
  --secret-overlay: color-mix(in srgb, var(--im-paper) 90%, transparent);
  --secret-grid: color-mix(in srgb, var(--im-ink) 10%, transparent);
}

#ipit-motion .gateway-ip p {color:#12291d;}

#ipit-motion .im-locations {color:#f2ecdd;--im-ink:#f2ecdd;--im-muted:#a9bfae;--im-line:#2f5c3e;--im-blue:#f2ecdd;}

#ipit-motion .portfolio-cover {color:#f2ecdd;background:linear-gradient(110deg,#0b1d14,#12291d 12%,#183523 48%,#12291d);}
html[data-theme=dark] #ipit-motion .portfolio-cover {background:linear-gradient(110deg,#0b1d14,#12291d 12%,#183523 48%,#12291d);}

/* Exactly four brand colors, shared by both modes: no copper variants. */
:root { background: #f7f7f2; }
html[data-theme=dark] { background: #12291d; }
#ipit-motion[data-page] {
  --im-paper: #f7f7f2;
  --im-ink: #12291d;
  --im-muted: #12291d;
  --im-line: #12291d;
  --im-surface: #f2ecdd;
  --im-accent: #12291d;
  --im-accent-ink: #f2ecdd;
  --im-blue: #12291d;
  --im-night: #12291d;
  --im-copper: var(--preview-copper);
}
html[data-theme=dark] #ipit-motion[data-page] {
  --im-paper: #12291d;
  --im-ink: #f2ecdd;
  --im-muted: #f2ecdd;
  --im-line: #f2ecdd;
  --im-surface: #12291d;
  --im-accent: #f2ecdd;
  --im-accent-ink: #12291d;
  --im-blue: #f2ecdd;
  --im-night: #12291d;
  --im-copper: var(--preview-copper);
}
#ipit-motion .identity-mark { background: var(--preview-copper); color: #f7f7f2; }
html[data-theme=dark] #ipit-motion .identity-mark { color: #12291d; }
#ipit-motion .hero-meta .im-label::before { background: var(--preview-copper); }
#ipit-motion .gateway-ip { background: #f2ecdd; color: #12291d; border-color: #12291d; }
#ipit-motion .gateway-it { background: #12291d; color: #f2ecdd; border-color: #f2ecdd; }
#ipit-motion .gateway-ip .gateway-top,
#ipit-motion .gateway-ip .brand-lettering,
#ipit-motion .gateway-ip p { color: #12291d; }
#ipit-motion .gateway-it .gateway-top,
#ipit-motion .gateway-it .brand-lettering,
#ipit-motion .gateway-it p { color: #f2ecdd; }
#ipit-motion .im-locations {
  background: #12291d;
  color: #f2ecdd;
  --im-ink: #f2ecdd;
  --im-muted: #f2ecdd;
  --im-line: #f2ecdd;
  --im-blue: #f2ecdd;
}
#ipit-motion .im-footer { background: var(--im-surface); }
html[data-theme=dark] #ipit-motion .site-nav { background: #12291d; }
#ipit-motion .site-brand,
#ipit-motion .footer-wordmark,
#ipit-motion .footer-company,
#ipit-motion .route-switch .route-short,
#ipit-motion .gateway-action .brand-token,
#ipit-motion .footer-navigation .brand-token,
#ipit-motion .partner-ip,
#ipit-motion .secret-header .brand-token,
#ipit-motion .snake-heading .brand-token { color: var(--preview-copper); }
#ipit-motion .cover-logo { background: var(--preview-copper); filter: none; }
#ipit-motion .cover-title { background: none; color: var(--preview-copper); text-shadow: none; }
#ipit-motion .cover-footer { color: #f2ecdd; border-color: #f2ecdd; }
#ipit-motion .portfolio-cover,
html[data-theme=dark] #ipit-motion .portfolio-cover { background: #12291d; color: #f2ecdd; }
#ipit-motion .brand-logo { position: relative; }
#ipit-motion .brand-logo img { visibility: hidden; }
#ipit-motion .brand-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--preview-copper);
  mask: url('/assets/photos/logo-black.png') center / contain no-repeat;
  -webkit-mask: url('/assets/photos/logo-black.png') center / contain no-repeat;
}
html[data-theme=dark] #ipit-motion .brand-logo::after {
  mask-image: url('/assets/photos/logo-white.png');
  -webkit-mask-image: url('/assets/photos/logo-white.png');
}
#ipit-motion .contact-field input,
#ipit-motion .contact-field textarea { background: var(--im-paper); color: var(--im-ink); border-color: var(--im-ink); }
#ipit-motion .contact-topic-choice > input:checked + span { background: var(--im-accent); color: var(--im-accent-ink); border-color: var(--im-accent); }
#ipit-motion .scene-light,
html[data-theme=dark] #ipit-motion .scene-light { background: none; }
.device-screen .code-overlay,
.device-screen .code-title,
.device-screen .code-lines,
.device-screen .code-status { background: #12291d; color: #f2ecdd; border-color: #f2ecdd; }

/* Copper repeats in editorial labels and small decorative details. */
#ipit-motion .hero-meta,
#ipit-motion .hero-signature,
#ipit-motion .hero-foot,
#ipit-motion .im-label,
#ipit-motion .im-label strong,
#ipit-motion .gateway-ip .gateway-top,
#ipit-motion .gateway-it .gateway-top,
#ipit-motion .story-copy small,
#ipit-motion .story-bottom,
#ipit-motion .paper-kicker,
#ipit-motion .build-note-label,
#ipit-motion .partner-location,
#ipit-motion .footer-heading,
#ipit-motion .detail-index > p,
#ipit-motion .detail-index a > span:first-child,
#ipit-motion .detail-adjacent small,
#ipit-motion .im-cost-row > span,
#ipit-motion .offer-tag,
#ipit-motion .it-service-detail .service-tags,
#ipit-motion .it-service summary small,
#ipit-motion .im-services summary .im-mono,
#ipit-motion .im-plan-name h3,
#ipit-motion .im-country p { color: var(--preview-copper); }
#ipit-motion .im-country-code { color: #f2ecdd; }
#ipit-motion .im-arrow,
#ipit-motion .im-textlink svg,
#ipit-motion .service-plus,
#ipit-motion .im-plus,
#ipit-motion .im-plan li::before { color: var(--preview-copper); }
#ipit-motion .contact-field input:focus,
#ipit-motion .contact-field textarea:focus { border-color: var(--im-ink); outline-color: var(--im-ink); }

/* Printed portfolio pages keep the same four brand colors as the website. */
#ipit-motion .portfolio-sheet { background: #f7f7f2; color: #12291d; border-color: #12291d; }
#ipit-motion .paper-top,
#ipit-motion .paper-top b,
#ipit-motion .paper-row span,
#ipit-motion .paper-cycle p { color: #12291d; }
#ipit-motion .paper-stamp,
#ipit-motion .paper-ledger span:nth-child(odd) { color: var(--im-copper); }
#ipit-motion .paper-top,
#ipit-motion .paper-row,
#ipit-motion .paper-stamp { border-color: #12291d; }
#ipit-motion .paper-rule,
#ipit-motion .portfolio-sheet::before { background: #12291d; }
#ipit-motion .paper-cycle svg { stroke: var(--im-copper); }
#ipit-motion .portfolio-sheet[data-sheet]::after { background: #12291d; color: #f2ecdd; }
#ipit-motion .portfolio-halo,
html[data-theme=dark] #ipit-motion .portfolio-halo { background: none; }
#ipit-motion .cover-top { opacity: 1; }
#ipit-motion .portfolio-cover::before,
#ipit-motion .portfolio-cover::after { background: none; }

/* Every dark control uses Sand for text, including in the light theme. */
html:not([data-theme=dark]) #ipit-motion .route-switch a[aria-current=page],
html:not([data-theme=dark]) #ipit-motion .im-payments button[aria-pressed=true],
html:not([data-theme=dark]) #ipit-motion .offer-payments button[aria-pressed=true],
html:not([data-theme=dark]) #ipit-motion .im-action:not(.im-outline),
html:not([data-theme=dark]) #ipit-motion .hero-cta:hover { color: #f2ecdd; }
#ipit-motion .offer-business,
#ipit-motion .offer:hover,
#ipit-motion .offer:focus-within { background: var(--im-surface); }
#ipit-motion .contact-topic-choice > input:checked + span::before { background: var(--im-accent-ink); border-color: var(--im-accent-ink); }
#ipit-motion .contact-status[data-kind=error] { border-color: var(--im-copper); }

#ipit-motion .im-country .location-region,
#ipit-motion .im-location-bottom { color: var(--im-copper); }

#ipit-motion .im-ipfees h3 {
  font-family: 'Michroma', 'Inter Tight', sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3.5cqw, 52px);
  line-height: 1.25;
  letter-spacing: -.025em;
}

/* Keep inline brand tokens inside the service name rather than separate flex columns. */
#ipit-motion .detail-adjacent a > span { display: block; position: relative; padding-right: 28px; }
#ipit-motion .detail-adjacent a > span span { display: inline; font-size: inherit; line-height: inherit; }
#ipit-motion .detail-adjacent a > span > b { position: absolute; right: 0; top: 0; }
#ipit-motion .detail-index a > .brand-copy { font: inherit; color: inherit; }

/* Full-width footer surface; keep content aligned with the page grid. */
#ipit-motion .im-footer { max-width: none; width: 100%; padding-inline: max(var(--gutter), calc((100% - 1536px) / 2 + var(--gutter))); }

/* Approved IP-IT palette · 28 October 2026. */
#ipit-motion[data-page]{--im-paper:#f7f7f2;--im-ink:#1b1a14;--im-muted:#6d685c;--im-line:#ddd3bd;--im-surface:#f2ecdd;--im-accent:#12291d;--im-accent-ink:#f2ecdd;--im-blue:#12291d;--im-night:#0b1d14}
html[data-theme=dark] #ipit-motion[data-page]{--im-paper:#12291d;--im-ink:#f2ecdd;--im-muted:#a9bfae;--im-line:#2f5c3e;--im-surface:#0b1d14;--im-accent:#f2ecdd;--im-accent-ink:#12291d;--im-blue:#a9bfae;--im-night:#0b1d14}
html:not([data-theme=dark]) #ipit-motion :is(h1,h2,h3){color:#12291d}
#ipit-motion .gateway-it.copper-frame{background:#12291d}
#ipit-motion .gateway-ip{border-color:#ddd3bd}
#ipit-motion .gateway-it{border-color:#2f5c3e}
#ipit-motion .gateway-ip p{color:#6d685c}
#ipit-motion .gateway-it p{color:#a9bfae}
#ipit-motion .im-locations{background:#0b1d14;--im-ink:#f2ecdd;--im-muted:#a9bfae;--im-line:#2f5c3e}
html:not([data-theme=dark]) #ipit-motion .im-locations :is(h1,h2,h3){color:#f2ecdd}
#ipit-motion .contact-field :is(input,textarea){border-color:var(--im-line)}
#ipit-motion .ipit-theme-options[hidden]{display:none}
html:not([data-theme=dark]) #ipit-motion .hero h1,html:not([data-theme=dark]) #ipit-motion .hero h1 span{color:#12291d}

:root{--preview-copper:#a95c3c}
html[data-theme=dark]{--preview-copper:#a95c3c}
html:not([data-theme=dark]) #ipit-motion[data-page]{--im-paper:#f7f7f2;--im-surface:#e9ede7;--im-line:#d4dcd2;--im-muted:#626b61;--im-accent-ink:#f7f7f2}
html:not([data-theme=dark]) #ipit-motion .gateway-ip{background:#e9ede7;border-color:#d4dcd2}
html:not([data-theme=dark]) #ipit-motion .gateway-ip p{color:#626b61}
html:not([data-theme=dark]) #ipit-motion .identity-mark{background:#a95c3c;color:#12291d}
#ipit-motion{--copper-light:#cf8650;--copper-glow:#a95c3c}
html[data-theme=dark] #ipit-motion{--copper-light:#ffd5ac}