/* =====================================================================
   SoTech v4 — design system

   Two complete themes, not one theme with a dark patch bolted on. Every
   colour is a token redefined under [data-theme="dark"], so a component is
   written once and is correct in both.

   Light is the default because it is the register the brief pointed at
   (airy, centred, generous white space). Dark keeps the studio's older
   identity for anyone who prefers it, and is remembered per visitor.
   ===================================================================== */

:root {
  /* ---- light (default) ---- */
  --bg:            #fbfbfd;
  --bg-tint:       #f4f3f8;
  --surface:       #ffffff;
  --surface-2:     #f7f7fa;
  --surface-3:     #eeeef3;
  --border:        #e4e4ec;
  --border-strong: #d2d2de;

  --ink:           #14141b;
  --ink-soft:      #4a4a5a;
  --ink-muted:     #63637a;   /* 5.6:1 on --bg; #74748a was 4.4:1, under AA */
  --ink-faint:     #9a9aae;

  --accent:        #4f46e5;
  --accent-deep:   #3f37c9;
  --accent-soft:   #ece9ff;
  --accent-line:   #c7c0ff;
  --on-accent:     #ffffff;

  --warm:          #f06543;   /* the reference's orange, used sparingly */

  /* hero wash — the pastel gradient the brief liked */
  --wash-1: #ded8ff;
  --wash-2: #ffe3d6;
  --wash-3: #d9ecff;
  --wash-alpha: .85;

  --shadow-sm: 0 1px 2px rgba(20, 20, 40, .05);
  --shadow:    0 2px 4px rgba(20, 20, 40, .04), 0 12px 32px -14px rgba(20, 20, 40, .16);
  --shadow-lg: 0 4px 8px rgba(20, 20, 40, .05), 0 28px 60px -22px rgba(20, 20, 40, .25);

  /* The *Fallback families are metric-matched wrappers around the system
     fonts (see css/fonts.css), so the page does not reflow when the real
     face arrives. */
  --sans:    'Space Grotesk', 'Space Grotesk Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif:   'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --mono:    'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --wrap:      1200px;
  --gutter:    clamp(18px, 4vw, 48px);
  --nav-h:     68px;
}

[data-theme='dark'] {
  --bg:            #08090d;
  --bg-tint:       #0d0f16;
  --surface:       #111320;
  --surface-2:     #171a28;
  --surface-3:     #1f2332;
  --border:        #242838;
  --border-strong: #343a4e;

  --ink:           #edeef5;
  --ink-soft:      #adb2c4;
  --ink-muted:     #7b8199;
  --ink-faint:     #565c74;

  --accent:        #8b82ff;
  --accent-deep:   #a79fff;
  --accent-soft:   #1d1b3d;
  --accent-line:   #3a3570;
  --on-accent:     #0b0b14;

  --warm:          #ff8a6b;

  --wash-1: #2a2360;
  --wash-2: #4a2340;
  --wash-3: #10304f;
  --wash-alpha: .55;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow:    0 2px 4px rgba(0, 0, 0, .45), 0 14px 34px -16px rgba(0, 0, 0, .8);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, .5), 0 30px 64px -24px rgba(0, 0, 0, .9);
}

* { box-sizing: border-box; }

/* Components set an explicit `display`, which otherwise beats the `hidden`
   attribute and leaves "hidden" elements on screen. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .35s ease, color .35s ease;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.025em; font-weight: 600; }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); font-weight: 600; }
.muted { color: var(--ink-muted); }
.soft { color: var(--ink-soft); }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.sr:focus-visible {
  position: fixed; top: 10px; left: 10px; z-index: 200; width: auto; height: auto; clip: auto;
  padding: 10px 16px; border-radius: 10px; background: var(--accent); color: var(--on-accent);
  font-weight: 600; box-shadow: var(--shadow-lg);
}

/* ---------------------------------------------------------------- nav */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90; height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav[data-stuck='true'] { border-bottom-color: var(--border); }
.nav__in { display: flex; align-items: center; gap: 14px; width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--gutter); }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.03em; font-size: 18px; }
.brand__mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep)); color: #fff;
  font-size: 15px; font-weight: 700; box-shadow: var(--shadow-sm); }

.nav__links { display: flex; gap: 2px; margin-left: 22px; }
.nav__links a { padding: 7px 13px; border-radius: 999px; font-size: 14.5px; font-weight: 500;
  color: var(--ink-soft); transition: background .18s, color .18s; }
.nav__links a:hover { background: var(--surface-2); color: var(--ink); }

.nav__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.iconbtn { width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  transition: border-color .18s, background .18s, transform .1s; }
.iconbtn:hover { border-color: var(--border-strong); background: var(--surface-2); }
.iconbtn:active { transform: translateY(1px); }
.iconbtn svg { width: 17px; height: 17px; }
[data-theme='dark'] .icon-sun { display: block; }
[data-theme='dark'] .icon-moon { display: none; }
.icon-sun { display: none; }
.icon-moon { display: block; }

.navtoggle { display: none; }

/* ------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 20px; border-radius: 11px; border: 1px solid transparent;
  font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: transform .12s, box-shadow .2s, background .2s, border-color .2s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 22px -10px var(--accent); }
.btn--primary:hover { background: var(--accent-deep); box-shadow: 0 12px 28px -10px var(--accent); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--ink-faint); }
.btn--sm { padding: 9px 15px; font-size: 13.5px; border-radius: 9px; }
.btn__arrow { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .22); font-size: 12px; }
.btn--ghost .btn__arrow { background: var(--surface-3); }

/* ---------------------------------------------------------------- hero */

.hero { position: relative; padding: calc(var(--nav-h) + clamp(40px, 7vw, 86px)) 0 clamp(50px, 7vw, 92px); overflow: hidden; }
.hero__wash { position: absolute; inset: -30% -10% auto -10%; height: 150%; z-index: 0; pointer-events: none;
  opacity: var(--wash-alpha);
  background:
    radial-gradient(42% 46% at 22% 26%, var(--wash-1) 0%, transparent 62%),
    radial-gradient(40% 44% at 78% 18%, var(--wash-2) 0%, transparent 62%),
    radial-gradient(44% 48% at 58% 62%, var(--wash-3) 0%, transparent 64%);
  filter: blur(26px);
}
.hero__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 25%, transparent 78%); }
.hero__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__in > * { max-width: 100%; }

.pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 11px;
  border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(8px); font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); box-shadow: var(--shadow-sm); }
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }

.hero h1 { margin: 26px 0 0; font-size: clamp(38px, 7.2vw, 78px); font-weight: 500; letter-spacing: -.035em;
  line-height: 1.04; max-width: min(100%, 780px); }
.hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 600; }
.hero__sub { margin: 24px auto 0; max-width: min(100%, 700px); font-size: clamp(15.5px, 1.7vw, 18.5px);
  color: var(--ink-soft); line-height: 1.62; }
.hero__sub b { color: var(--ink); font-weight: 600; box-shadow: inset 0 -.55em 0 var(--accent-soft); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }

/* connector + fact cards, the structural idea from the reference */
.facts { margin-top: clamp(44px, 6vw, 74px); position: relative; z-index: 1;
  width: 100%; /* not shrink-to-fit: its width must not depend on its text */ }
/* The rail must share the cards' exact track geometry, otherwise the nodes
   drift off the card centres. Same columns, same gap. */
.facts__rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: center; margin-bottom: 10px; }
.facts__node { position: relative; height: 22px; display: grid; place-items: center; }
/* The connector runs between node centres, so it extends half a track plus
   half the gap in each direction, and stops at the first and last node. */
.facts__node::before { content: ''; position: absolute; top: 50%; left: calc(-50% - 7px); right: calc(-50% - 7px);
  height: 1px; background: var(--border-strong); }
.facts__node:first-child::before { left: 50%; }
.facts__node:last-child::before { right: 50%; }
.facts__node i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.facts__node.is-lead i { background: var(--warm); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warm) 20%, transparent); }

.facts__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fact { padding: 20px 20px 22px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.fact:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.fact.is-lead { border-color: color-mix(in srgb, var(--warm) 52%, transparent); }
.fact__ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-soft); margin-bottom: 14px; font-size: 16px; }
.fact.is-lead .fact__ico { background: color-mix(in srgb, var(--warm) 14%, transparent); color: var(--warm); }
.fact__k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-muted); }
.fact__v { margin-top: 5px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }

/* -------------------------------------------------------------- section */

.sec { padding: clamp(56px, 8vw, 104px) 0; }
.sec--tint { background: var(--bg-tint); border-block: 1px solid var(--border); }
.sec__head { display: flex; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 34px; }
.sec__head > div:first-child { flex: 1 1 420px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; }
.sec h2 { font-size: clamp(27px, 3.8vw, 42px); font-weight: 500; letter-spacing: -.03em; }
.sec h2 em { font-family: var(--serif); font-style: italic; font-weight: 600; }
.sec__lead { max-width: 46ch; color: var(--ink-soft); font-size: 15.5px; }

/* --------------------------------------------------------------- filters */

.filters { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.filterrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filterrow__label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink-muted); margin-right: 4px; }

.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
  transition: background .16s, color .16s, border-color .16s; }
.chip:hover { border-color: var(--border-strong); color: var(--ink); }
.chip[aria-pressed='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip__n { font-family: var(--mono); font-size: 11px; opacity: .6; }

.search { position: relative; flex: 1 1 230px; max-width: 320px; }
.search input { width: 100%; padding: 9px 14px 9px 36px; border-radius: 999px; font-size: 14px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-family: inherit; }
.search input::placeholder { color: var(--ink-faint); }
.search input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-faint); }

.resultline { font-size: 13.5px; color: var(--ink-muted); }

/* ----------------------------------------------------------------- grid */

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  min-height: 420px; /* reserved before the script renders, to limit layout shift */
  content-visibility: auto; contain-intrinsic-size: auto 900px; }

.card { position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: var(--shadow-sm); transition: transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s, border-color .26s; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.card__shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); }
.card__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.card:hover .card__shot img { transform: scale(1.035); }
.card__flag { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; }
.tagmini { padding: 4px 9px; border-radius: 6px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  background: color-mix(in srgb, #0b0d12 72%, transparent); color: #fff; backdrop-filter: blur(6px); }
.tagmini--product { background: color-mix(in srgb, var(--warm) 90%, transparent); color: #fff; }

.card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card__top { display: flex; align-items: baseline; gap: 10px; }
.card__name { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.card__yr { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-muted); }
.card__cat { font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.card__line { font-size: 14px; color: var(--ink-soft); line-height: 1.52;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__foot { margin-top: auto; padding-top: 13px; display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--border); }
.tag { padding: 3px 9px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: 11.5px; color: var(--ink-muted); }
.card__go { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 5px; }
.card:hover .card__go span { transform: translateX(3px); }
.card__go span { transition: transform .2s; }

.card__link { position: absolute; inset: 0; z-index: 2; }

.empty { padding: 60px 20px; text-align: center; color: var(--ink-muted); border: 1px dashed var(--border);
  border-radius: var(--radius-lg); }

/* -------------------------------------------------------------- studio */

.cols { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.panel { padding: 26px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-sm); }
.panel h3 { font-size: 17.5px; margin-bottom: 9px; }
.panel p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.panel__n { font-family: var(--mono); font-size: 11.5px; color: var(--accent); margin-bottom: 14px; letter-spacing: .14em; }

/* ---------------------------------------------------------------- CTA */

.band { position: relative; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--surface); padding: clamp(34px, 5vw, 60px); text-align: center; }
.band__wash { position: absolute; inset: -60% -20% auto -20%; height: 220%; opacity: var(--wash-alpha); pointer-events: none;
  background: radial-gradient(40% 50% at 30% 30%, var(--wash-1), transparent 65%),
              radial-gradient(40% 50% at 72% 40%, var(--wash-2), transparent 65%); filter: blur(30px); }
.band > * { position: relative; z-index: 1; }
.band h2 { font-size: clamp(25px, 3.6vw, 40px); font-weight: 500; }
.band p { margin: 16px auto 0; max-width: 52ch; color: var(--ink-soft); }

/* -------------------------------------------------------------- footer */

.foot { padding: 46px 0 58px; border-top: 1px solid var(--border); }
.foot__in { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.foot__links { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
/* Padded to clear the 24x24 minimum target size (WCAG 2.2). */
.foot__links a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 8px; border-radius: 7px; }
.foot__links a:hover { background: var(--surface-2); }
.foot a { color: var(--ink-muted); font-size: 14px; }
.foot a:hover { color: var(--ink); }
.foot__note { width: 100%; font-size: 12.5px; color: var(--ink-muted); line-height: 1.6; }

/* ------------------------------------------------------------ reveal */

[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
[data-reveal].in { opacity: 1; transform: none; }

/* ------------------------------------------------------- case studies */

/* padding-block only: this element is also a .wrap, and the `padding`
   shorthand would reset its horizontal gutter to zero. */
.case__hero { padding-block: calc(var(--nav-h) + 40px) 34px; }
.case__back { font-size: 13.5px; color: var(--ink-muted); display: inline-flex; gap: 7px; align-items: center; margin-bottom: 20px; }
.case__back:hover { color: var(--ink); }
.case h1 { font-size: clamp(32px, 5.4vw, 60px); font-weight: 500; letter-spacing: -.035em; max-width: 18ch; }
.case__lede { margin-top: 20px; max-width: 60ch; font-size: clamp(16px, 1.8vw, 19px); color: var(--ink-soft); line-height: 1.6; }
.case__meta { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 34px;
  padding-top: 26px; border-top: 1px solid var(--border); }
.case__shot { margin-top: 34px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.case__block { max-width: 72ch; margin-inline: auto; }
.case__block p + p { margin-top: 16px; }
.case__block h3 { margin: 36px 0 12px; font-size: 21px; }
.case figure { margin: 30px 0; }
.case figure img { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); }
.case figcaption { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted); }
.notice { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--surface-2);
  font-size: 14px; color: var(--ink-soft); }

/* -------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .facts__cards { grid-template-columns: repeat(2, 1fr); }
  .facts__rail { display: none; }
  .nav__links { display: none; }
  .navtoggle { display: grid; }
  .nav__links.is-open { display: flex; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 2px; padding: 12px var(--gutter) 18px; margin: 0;
    background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
}
@media (max-width: 560px) {
  .facts__cards { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr; }
  .hero__cta .btn { flex: 1 1 100%; }
  /* Visually hidden, not removed: `display:none` here stripped the brand
     link of its only text and left it with no accessible name. */
  .brand > span:not(.brand__mark) {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media print {
  .nav, .hero__wash, .hero__grid, .filters, .foot { display: none !important; }
  body { background: #fff; color: #000; }
}