/* ============================================================
   INTERSTORIES — Homepage Version 2 (design: "editorial blue" / theme-v3)
   Standalone stylesheet. Scoped under .v2 so it can never affect
   the live homepage or any other page.
   ============================================================ */

.v2,
.v2-scope {
  /* ---- design tokens (from the Lovable theme-v3 palette) ---- */
  --radius: 1.25rem;
  --background: oklch(0.985 0.005 250);
  --tint-1: oklch(0.968 0.012 248);
  --tint-2: oklch(0.963 0.019 232);
  --tint-3: oklch(0.972 0.016 158);
  --tint-4: oklch(0.968 0.018 88);
  --foreground: oklch(0.2 0.03 258);
  --card: oklch(1 0 0);
  --primary: oklch(0.55 0.19 258);
  --muted: oklch(0.955 0.008 250);
  --muted-foreground: oklch(0.52 0.028 257);
  --brand: oklch(0.55 0.19 258);
  --brand-foreground: oklch(0.99 0.005 250);
  --brand-soft: oklch(0.9 0.045 245);
  --brand-deep: oklch(0.34 0.11 258);
  --surface: oklch(0.97 0.008 250);
  --surface-2: oklch(0.93 0.012 248);
  --ink: oklch(0.18 0.035 258);
  --border: oklch(0.9 0.012 250);

  --font-body2: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display2: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  --wrap: 92rem;

  font-family: var(--font-body2);
  -webkit-font-smoothing: antialiased;
}

/* A full v2 page owns the page background and fills the viewport. */
.v2 {
  background-color: var(--background);
  color: var(--foreground);
  min-height: 100vh;
}

/* .v2-scope carries the tokens and the reset only — no page background, no
   min-height. It lets a v2 component (currently the shared footer) sit inside
   one of the older Bootstrap pages without disturbing the host layout. */
.v2-scope { color: var(--foreground); }

/* Reset within the version only.
   NOTE: wrapped in :where() so it carries ZERO specificity — otherwise
   `.v2 p` (0,1,1) would beat component rules like `.v2-about-quote` (0,1,0)
   and silently kill their margins/colours. */
.v2 *, .v2 *::before, .v2 *::after,
.v2-scope *, .v2-scope *::before, .v2-scope *::after { box-sizing: border-box; }
.v2 :where(h1, h2, h3, p, ul, ol, dl, dd, dt, figure),
.v2-scope :where(h1, h2, h3, p, ul, ol, dl, dd, dt, figure) { margin: 0; padding: 0; }
.v2 :where(ul, ol),
.v2-scope :where(ul, ol) { list-style: none; }
.v2 :where(a),
.v2-scope :where(a) { color: inherit; text-decoration: none; }
.v2 :where(img),
.v2-scope :where(img) { display: block; max-width: 100%; }
.v2 :where(button),
.v2-scope :where(button) { font: inherit; color: inherit; }
/* every inline SVG must be bounded, or it expands to fill its container */
.v2 :where(svg),
.v2-scope :where(svg) { width: 1rem; height: 1rem; flex: none; }

.v2-wrap {
  margin: 0 auto;
  max-width: var(--wrap);
  padding-inline: 1rem;
}
@media (min-width: 640px) { .v2-wrap { padding-inline: 1.25rem; } }
@media (min-width: 1024px) { .v2-wrap { padding-inline: 2.5rem; } }

/* ---------- kicker (small caps label + rule) ---------- */
.v2-kicker { display: flex; align-items: baseline; gap: .75rem; }
.v2-kicker span:first-child {
  font-size: 11px; font-weight: 700; letter-spacing: .22em;
  color: var(--muted-foreground); text-transform: uppercase; white-space: nowrap;
}
.v2-kicker span:last-child { height: 1px; flex: 1; background: var(--border); }

/* ---------- section headings ---------- */
.v2-h2 {
  margin-top: 1rem;
  font-family: var(--font-display2);
  font-size: 1.4rem; line-height: 1.15; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink);
}
@media (min-width: 640px) { .v2-h2 { margin-top: 1.25rem; font-size: 1.875rem; } }
@media (min-width: 1024px) { .v2-h2 { font-size: 2.25rem; } }
.v2-h2--narrow { max-width: 42rem; }

/* ---------- utility strip ---------- */
.v2-strip { border-bottom: 1px solid var(--border); background: var(--background); }
.v2-strip .v2-strip-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding-block: .5rem;
}
.v2-strip a {
  font-size: 9px; font-weight: 600; letter-spacing: .16em;
  color: var(--muted-foreground); text-transform: uppercase;
}
.v2-strip a:hover { color: var(--brand); }
.v2-strip a:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-strip a:last-child { flex-shrink: 0; }
@media (min-width: 640px) { .v2-strip a { font-size: 10px; letter-spacing: .2em; } }

/* ---------- header ---------- */
.v2-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter: blur(20px);
}
.v2-header-in {
  display: flex; align-items: center; gap: .75rem; padding-block: .75rem;
}
@media (min-width: 1024px) { .v2-header-in { gap: 1rem; padding-block: 1rem; } }

.v2-logo { display: flex; flex-shrink: 0; align-items: center; }
.v2-logo img { height: 2.25rem; width: auto; }
@media (min-width: 640px) { .v2-logo img { height: 2.5rem; } }
@media (min-width: 1024px) { .v2-logo img { height: 2.75rem; } }

.v2-nav {
  display: none; margin-left: 1.5rem; gap: .25rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); padding: .25rem;
}
@media (min-width: 1024px) { .v2-nav { display: flex; } }
/* Top-level pills only.
   NOTE: scoped to .v2-nav-link rather than `.v2-nav a`, because the mega-menu
   markup now lives inside .v2-nav and a descendant selector would turn every
   category and brand link into a pill. */
.v2-nav-link {
  display: inline-flex; align-items: center; gap: .3rem;
  flex-shrink: 0; border-radius: 999px; padding: .5rem 1rem;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: var(--muted-foreground); transition: background-color .2s, color .2s;
  white-space: nowrap; cursor: pointer;
}
.v2-nav-link:hover,
.v2-nav-i:hover > .v2-nav-link,
.v2-nav-i:focus-within > .v2-nav-link { background: var(--card); color: var(--brand); }
.v2-nav-link svg { height: .7rem; width: .7rem; transition: transform .2s ease; }
.v2-nav-i:hover > .v2-nav-link svg,
.v2-nav-i:focus-within > .v2-nav-link svg { transform: rotate(180deg); }

.v2-search {
  display: none; min-width: 0; flex: 1; align-items: center; gap: .5rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); padding: .5rem 1rem; transition: border-color .2s;
}
@media (min-width: 1024px) { .v2-search { display: flex; } }
.v2-search:focus-within { border-color: var(--brand); }
.v2-search svg { height: 1rem; width: 1rem; flex-shrink: 0; color: var(--muted-foreground); }
.v2-search input {
  min-width: 0; flex: 1; border: 0; background: transparent;
  font-family: inherit; font-size: 13px; color: inherit; outline: none;
}
.v2-search input::placeholder { color: var(--muted-foreground); }

/* Primary button. Text is explicitly WHITE (never inherited) and the hover
   darkens the fill, lifts slightly and adds a soft shadow. */
:is(.v2, .v2-scope) .v2-cta {
  margin-left: auto; display: inline-flex; flex-shrink: 0; align-items: center; gap: .375rem;
  border-radius: 999px; background: var(--brand);
  padding: .625rem 1rem; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  color: #fff; cursor: pointer; border: 0; white-space: nowrap; text-decoration: none;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
:is(.v2, .v2-scope) .v2-cta:hover,
:is(.v2, .v2-scope) .v2-cta:focus-visible {
  background: var(--brand-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px color-mix(in oklab, var(--brand) 65%, transparent);
}
:is(.v2, .v2-scope) .v2-cta:active { transform: translateY(0); box-shadow: none; }
:is(.v2, .v2-scope) .v2-cta:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; }
:is(.v2, .v2-scope) .v2-cta svg { height: .875rem; width: .875rem; }
@media (min-width: 640px) { .v2-cta { padding-inline: 1.25rem; font-size: 11px; letter-spacing: .14em; } }
@media (min-width: 1024px) { .v2-cta { margin-left: 0; } }

.v2-burger {
  display: grid; height: 2.5rem; width: 2.5rem; flex-shrink: 0; place-items: center;
  border: 1px solid var(--border); border-radius: 999px; background: var(--card);
  color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s;
}
.v2-burger:hover { border-color: var(--brand); color: var(--brand); }
@media (min-width: 1024px) { .v2-burger { display: none; } }
.v2-burger svg { height: 1.25rem; width: 1.25rem; }

.v2-mobnav {
  display: none; border-top: 1px solid var(--border); background: var(--background);
  padding: .75rem 1rem 1rem;
}
.v2-mobnav.is-open { display: block; }
@media (min-width: 1024px) { .v2-mobnav.is-open { display: none; } }
.v2-mobnav .v2-search { display: flex; }
/* Single column: the menu is now an accordion, so a 2-up grid would split
   a trigger from the panel it opens. */
.v2-mobnav-links { margin-top: .75rem; display: grid; gap: .25rem; }
/* Top-level mobile rows — plain links and accordion triggers share one look.
   Scoped by class (not `.v2-mobnav-links a`) so nested category links opt out. */
.v2-mobnav-l,
.v2-acc-t {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; text-align: left;
  border: 1px solid var(--border); border-radius: 1rem; background: var(--surface);
  padding: .75rem 1rem; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: var(--muted-foreground); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.v2-mobnav-l:hover,
.v2-acc-t:hover { border-color: color-mix(in oklab, var(--brand) 40%, transparent); color: var(--brand); }

/* ---------- hero ---------- */
.v2-hero { background: var(--background); padding-top: 1.25rem; }
@media (min-width: 1024px) { .v2-hero { padding-top: 2rem; } }
.v2-hero-banner {
  overflow: hidden; border: 1px solid var(--border); border-radius: 1rem;
  background: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .05);
}
@media (min-width: 640px) { .v2-hero-banner { border-radius: 1.5rem; } }
.v2-hero-banner img { height: auto; width: 100%; object-fit: cover; }

.v2-facts {
  margin-top: 1.25rem; display: grid; gap: 1px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 1rem; background: var(--border);
}
@media (min-width: 640px) {
  .v2-facts { margin-top: 1.5rem; grid-template-columns: repeat(3, 1fr); border-radius: 1.5rem; }
}
.v2-fact { background: var(--card); padding: 1rem 1.25rem; }
@media (min-width: 640px) { .v2-fact { padding: 1.25rem 1.5rem; } }
.v2-fact dt {
  font-size: 10px; font-weight: 700; letter-spacing: .22em;
  color: var(--brand); text-transform: uppercase;
}
.v2-fact dd {
  margin-top: .5rem; font-size: .875rem; line-height: 1.375;
  font-weight: 500; color: var(--ink);
}
@media (min-width: 640px) { .v2-fact dd { font-size: 15px; } }

/* ---------- generic section rhythm ---------- */
.v2-sec { padding-block: 3rem; }
@media (min-width: 640px) { .v2-sec { padding-block: 4rem; } }
@media (min-width: 1024px) { .v2-sec { padding-block: 5rem; } }
.v2-sec--t1 { background: var(--tint-1); border-block: 1px solid var(--border); margin-top: 3rem; }
@media (min-width: 1024px) { .v2-sec--t1 { margin-top: 5rem; } }
.v2-sec--t2 { background: var(--tint-2); }
.v2-sec--t3 { background: var(--tint-3); border-block: 1px solid var(--border); }
.v2-sec--t4 { background: var(--tint-4); border-block: 1px solid var(--border); }
.v2-sec--plain { background: var(--background); }
[id] { scroll-margin-top: 6rem; }

/* ---------- industries ---------- */
.v2-tiles {
  margin-top: 2rem; display: grid; gap: .75rem;
}
@media (min-width: 640px) { .v2-tiles { margin-top: 2.5rem; grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .v2-tiles { grid-template-columns: repeat(3, 1fr); } }
.v2-tile {
  position: relative; display: flex; height: 100%; align-items: center; gap: 1rem;
  overflow: hidden; border: 1px solid var(--border); border-radius: 1rem;
  background: var(--card); padding: 1.25rem;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.v2-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--brand) 40%, transparent);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1);
}
@media (min-width: 640px) {
  .v2-tile { flex-direction: column; align-items: stretch; justify-content: space-between; gap: 0; border-radius: 1.5rem; padding: 1.5rem; }
}
.v2-tile-rail {
  position: absolute; inset-block: 0; left: 0; width: 4px;
  background: color-mix(in oklab, var(--brand) 15%, transparent); transition: background-color .2s;
}
.v2-tile:hover .v2-tile-rail { background: var(--brand); }
.v2-tile-ico {
  display: grid; height: 2.75rem; width: 2.75rem; flex-shrink: 0; place-items: center;
  border-radius: 1rem; background: color-mix(in oklab, var(--brand) 10%, transparent);
  color: var(--brand); transition: background-color .2s, color .2s;
}
.v2-tile:hover .v2-tile-ico { background: var(--brand); color: var(--brand-foreground); }
.v2-tile-ico svg { height: 1.25rem; width: 1.25rem; }
@media (min-width: 640px) {
  .v2-tile-ico { height: 3rem; width: 3rem; }
  .v2-tile-ico svg { height: 1.5rem; width: 1.5rem; }
}
.v2-tile-foot {
  display: flex; min-width: 0; flex: 1; align-items: center; justify-content: space-between; gap: .75rem;
}
@media (min-width: 640px) { .v2-tile-foot { margin-top: 2rem; align-items: flex-end; gap: 1rem; } }
.v2-tile-foot span {
  font-family: var(--font-display2); font-size: 1rem; line-height: 1.375;
  font-weight: 600; color: var(--ink);
}
@media (min-width: 640px) { .v2-tile-foot span { font-size: 1.125rem; } }
.v2-tile-foot svg { height: 1rem; width: 1rem; flex-shrink: 0; color: var(--muted-foreground); transition: transform .2s, color .2s; }
.v2-tile:hover .v2-tile-foot svg { transform: translate(2px, -2px); color: var(--brand); }
@media (min-width: 640px) { .v2-tile-foot svg { height: 1.25rem; width: 1.25rem; } }

/* ---------- brands grid ---------- */
.v2-brands {
  margin-top: 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; background: var(--border);
}
@media (min-width: 640px) { .v2-brands { margin-top: 2.5rem; grid-template-columns: repeat(3, 1fr); border-radius: 1.5rem; } }
@media (min-width: 1024px) { .v2-brands { grid-template-columns: repeat(4, 1fr); } }
.v2-brand {
  display: grid; height: 6rem; place-items: center; background: var(--card);
  padding: 1rem; transition: background-color .2s;
}
.v2-brand:hover { background: color-mix(in oklab, var(--brand) 5%, transparent); }
@media (min-width: 640px) { .v2-brand { height: 7rem; padding: 1.5rem; } }
.v2-brand img {
  max-height: 3rem; width: auto; max-width: 100%; object-fit: contain;
  opacity: .7; filter: grayscale(1); transition: opacity .2s, filter .2s;
}
.v2-brand:hover img { opacity: 1; filter: grayscale(0); }
@media (min-width: 640px) { .v2-brand img { max-height: 3.5rem; } }

/* ---------- commercial band ---------- */
.v2-band { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.v2-band-bg { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; opacity: .3; }
.v2-band-veil { position: absolute; inset: 0; background: color-mix(in oklab, var(--brand-deep) 80%, transparent); }
.v2-band-in {
  position: relative; margin: 0 auto; display: flex; max-width: 48rem;
  flex-direction: column; align-items: center; padding: 3rem 1rem; text-align: center;
}
@media (min-width: 640px) { .v2-band-in { padding: 4rem 1.25rem; } }
@media (min-width: 1024px) { .v2-band-in { padding: 6rem 2.5rem; } }
.v2-band h2 {
  font-family: var(--font-display2); font-size: 1.25rem; line-height: 1.15;
  font-weight: 700; letter-spacing: -.01em; color: var(--background);
}
@media (min-width: 640px) { .v2-band h2 { font-size: 1.875rem; } }
@media (min-width: 1024px) { .v2-band h2 { font-size: 2.25rem; } }
.v2-band-rule { margin-top: 1.25rem; display: block; height: 1px; width: 4rem; background: rgb(255 255 255 / .3); }
.v2-band p {
  margin-top: 1.25rem; font-size: 13px; line-height: 1.65;
  color: color-mix(in oklab, var(--background) 85%, transparent);
}
@media (min-width: 640px) { .v2-band p { margin-top: 1.5rem; font-size: 1rem; } }
.v2-band .v2-cta {
  margin: 1.75rem 0 0; padding: .875rem 1.5rem; font-size: 11px; letter-spacing: .14em;
}
@media (min-width: 640px) { .v2-band .v2-cta { margin-top: 2rem; padding-inline: 2rem; letter-spacing: .16em; } }

/* ---------- bento (offer / advantages) ---------- */
.v2-bento { margin-top: 2rem; display: grid; gap: .75rem; }
@media (min-width: 640px) { .v2-bento { margin-top: 2.5rem; gap: 1rem; } }
@media (min-width: 1024px) { .v2-bento { grid-template-columns: repeat(3, 1fr); } }
.v2-bento-img {
  position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 1rem;
}
@media (min-width: 640px) { .v2-bento-img { border-radius: 1.5rem; } }
@media (min-width: 1024px) { .v2-bento-img { grid-row: span 3; } }
.v2-bento-img img {
  height: 100%; max-height: 300px; min-height: 200px; width: 100%;
  object-fit: cover; object-position: center;
}
@media (min-width: 640px) { .v2-bento-img img { max-height: none; min-height: 260px; } }
/* Advantages: image sits in the right-hand column, spanning all three cards.
   NOTE: must use the `grid-row: 1 / span 3` shorthand — writing
   `grid-row-start: 1` followed by `grid-row: span 3` makes the shorthand
   clobber the start line, so the image auto-placed to the wrong row. */
.v2-bento--right .v2-bento-img { order: -1; }
@media (min-width: 1024px) {
  .v2-bento--right .v2-bento-img {
    order: 0;
    grid-column: 3 / span 1;
    grid-row: 1 / span 3;
    align-self: stretch;
  }
  .v2-bento--right .v2-bento-img img { height: 100%; min-height: 100%; }
}
.v2-card {
  display: flex; gap: 1rem; border: 1px solid var(--border); border-radius: 1rem;
  background: var(--card); padding: 1.25rem; transition: border-color .2s;
}
.v2-card:hover { border-color: color-mix(in oklab, var(--brand) 40%, transparent); }
@media (min-width: 640px) { .v2-card { gap: 1.25rem; border-radius: 1.5rem; padding: 1.5rem; } }
@media (min-width: 1024px) { .v2-card { grid-column: span 2; } }
.v2-card-ico {
  display: grid; height: 2.5rem; width: 2.5rem; flex-shrink: 0; place-items: center;
  border-radius: .75rem; background: color-mix(in oklab, var(--brand) 10%, transparent);
  color: var(--brand); transition: background-color .2s, color .2s;
}
.v2-card:hover .v2-card-ico { background: var(--brand); color: var(--brand-foreground); }
.v2-card-ico svg { height: 1.25rem; width: 1.25rem; }
@media (min-width: 640px) { .v2-card-ico { height: 2.75rem; width: 2.75rem; border-radius: 1rem; } }
.v2-card h3 {
  font-family: var(--font-display2); font-size: 15px; font-weight: 600; color: var(--ink);
}
@media (min-width: 640px) { .v2-card h3 { font-size: 1rem; } }
.v2-card p {
  margin-top: .5rem; font-size: 13px; line-height: 1.65; color: var(--muted-foreground);
}
@media (min-width: 640px) { .v2-card p { font-size: .875rem; } }

/* ---------- about ---------- */
.v2-about-grid { margin-top: 1rem; display: grid; align-items: start; gap: 2rem; }
@media (min-width: 640px) { .v2-about-grid { margin-top: 1.25rem; } }
@media (min-width: 1024px) { .v2-about-grid { grid-template-columns: repeat(12, 1fr); gap: 2.5rem; } }
.v2-about-lead { }
@media (min-width: 1024px) { .v2-about-lead { position: sticky; top: 7rem; grid-column: span 4; } }
.v2-about-lead h2 {
  font-family: var(--font-display2); font-size: 1.6rem; line-height: 1.15;
  font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
@media (min-width: 640px) { .v2-about-lead h2 { font-size: 1.875rem; } }
@media (min-width: 1024px) { .v2-about-lead h2 { font-size: 2.25rem; } }
/* Lead card under the "О нас" heading: rounded card with a brand accent rail
   on the left. (Its top margin was previously being wiped by the reset, which
   made it collide with the heading.) */
:is(.v2, .v2-scope) .v2-about-quote {
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 1rem;
  background: var(--card);
  padding: 1.25rem 1.375rem;
  font-size: .9375rem; line-height: 1.7; font-weight: 500; color: var(--ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}
@media (min-width: 640px) {
  :is(.v2, .v2-scope) .v2-about-quote { margin-top: 1.75rem; border-radius: 1.25rem; padding: 1.625rem 1.75rem; font-size: 1rem; }
}
/* Two explicit columns (.v2-about-col) instead of a CSS-columns flow, so each
   content block stays in its own column whatever its length. Same gaps as the
   previous column-gap, and paragraph styling below is unchanged. */
.v2-about-cols { display: grid; gap: 0; }
@media (min-width: 640px) { .v2-about-cols { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
@media (min-width: 1024px) { .v2-about-cols { grid-column: span 8; column-gap: 2.5rem; } }
.v2-about-cols p {
  margin-bottom: 1.25rem; break-inside: avoid;
  border-left: 1px solid var(--border); padding-left: 1rem;
  font-size: .875rem; line-height: 1.65; color: var(--muted-foreground);
}
@media (min-width: 640px) { .v2-about-cols p { padding-left: 1.25rem; font-size: 15px; } }

/* ---------- contact ---------- */
.v2-contact { position: relative; isolation: isolate; overflow: hidden; background: var(--background); }
.v2-contact-bg {
  position: absolute; inset: 0; z-index: -10; height: 100%; width: 100%;
  object-fit: cover; opacity: .1;
}
.v2-contact-card {
  display: grid; overflow: hidden; border: 1px solid var(--border);
  border-radius: 1rem; background: var(--card);
}
@media (min-width: 640px) { .v2-contact-card { border-radius: 1.5rem; } }
@media (min-width: 1024px) { .v2-contact-card { grid-template-columns: repeat(12, 1fr); } }
.v2-contact-info { border-bottom: 1px solid var(--border); padding: 1.5rem; }
@media (min-width: 640px) { .v2-contact-info { padding: 2rem; } }
@media (min-width: 1024px) {
  .v2-contact-info { grid-column: span 5; border-bottom: 0; border-right: 1px solid var(--border); padding: 2.5rem; }
}
.v2-contact-info h2 {
  margin-top: 1rem; font-family: var(--font-display2); font-size: 1.25rem;
  line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
@media (min-width: 640px) { .v2-contact-info h2 { margin-top: 1.25rem; font-size: 1.875rem; } }
.v2-contact-sub {
  margin-top: .5rem; font-size: 10px; font-weight: 700; letter-spacing: .14em;
  color: var(--muted-foreground);
}
@media (min-width: 640px) { .v2-contact-sub { font-size: 11px; letter-spacing: .16em; } }
.v2-contact-rows { margin-top: 1.5rem; display: grid; gap: 1.25rem; font-size: .875rem; }
@media (min-width: 640px) { .v2-contact-rows { margin-top: 2rem; } }
.v2-contact-label {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  color: var(--brand); text-transform: uppercase;
}
@media (min-width: 640px) { .v2-contact-label { font-size: 11px; letter-spacing: .16em; } }
.v2-contact-line {
  margin-top: .5rem; display: inline-flex; align-items: flex-start; gap: .5rem;
  font-size: 13px; color: var(--muted-foreground); word-break: break-word;
}
.v2-contact-line:hover { color: var(--brand); }
.v2-contact-line svg { height: 1rem; width: 1rem; flex-shrink: 0; color: var(--brand); margin-top: .125rem; }
@media (min-width: 640px) { .v2-contact-line { font-size: .875rem; } }
.v2-contact-line span span { display: block; }

.v2-contact-form { display: flex; flex-direction: column; background: var(--surface); padding: 1.5rem; }
@media (min-width: 640px) { .v2-contact-form { padding: 2rem; } }
@media (min-width: 1024px) { .v2-contact-form { grid-column: span 7; padding: 2.5rem; } }
.v2-or { font-family: var(--font-display2); font-size: 1.125rem; font-weight: 700; color: var(--brand); }
.v2-form-intro { margin-top: .25rem; font-size: 13px; color: var(--muted-foreground); }
@media (min-width: 640px) { .v2-form-intro { font-size: .875rem; } }
.v2-form { margin-top: 1.25rem; display: grid; align-content: start; gap: .75rem; }
@media (min-width: 640px) { .v2-form { margin-top: 1.5rem; grid-template-columns: 1fr 1fr; gap: 1rem; } }
.v2-field {
  display: flex; align-items: center; gap: .75rem; border: 1px solid var(--border);
  border-radius: 1rem; background: var(--card); padding: .75rem 1rem; transition: border-color .2s;
}
.v2-field:focus-within { border-color: var(--brand); }
.v2-field svg { height: 1rem; width: 1rem; flex-shrink: 0; color: var(--brand); }
.v2-field input {
  min-width: 0; flex: 1; border: 0; background: transparent;
  font-family: inherit; font-size: .875rem; color: inherit; outline: none;
}
.v2-field input::placeholder { color: var(--muted-foreground); }
.v2-form-captcha { display: flex; justify-content: flex-start; margin-top: .25rem; }
@media (min-width: 640px) { .v2-form-captcha { grid-column: span 2; } }

/* Submit: full-width pill, white label, bounded icon.
   (The unbounded inline SVG previously stretched this into a giant circle.) */
:is(.v2, .v2-scope) .v2-submit {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: .5rem;
  border: 0; border-radius: 999px; background: var(--brand);
  padding: .875rem 1.5rem; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  line-height: 1; color: #fff; cursor: pointer; text-align: center;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
:is(.v2, .v2-scope) .v2-submit svg { width: 1rem; height: 1rem; flex: none; }
:is(.v2, .v2-scope) .v2-submit:hover,
:is(.v2, .v2-scope) .v2-submit:focus-visible {
  background: var(--brand-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px color-mix(in oklab, var(--brand) 65%, transparent);
}
:is(.v2, .v2-scope) .v2-submit:active { transform: translateY(0); box-shadow: none; }
:is(.v2, .v2-scope) .v2-submit:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; }
@media (min-width: 640px) { :is(.v2, .v2-scope) .v2-submit { grid-column: span 2; padding-inline: 2rem; letter-spacing: .16em; } }

/* ---------- footer ---------- */
.v2-footer { background: var(--ink); color: var(--background); }
.v2-footer-in { padding-block: 3rem; }
@media (min-width: 640px) { .v2-footer-in { padding-block: 3.5rem; } }
.v2-footer-cols { display: grid; gap: 2rem; }
@media (min-width: 640px) { .v2-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }
@media (min-width: 1024px) { .v2-footer-cols { grid-template-columns: repeat(5, 1fr); } }
.v2-footer-cols h3 {
  font-size: 10px; font-weight: 700; letter-spacing: .22em;
  color: var(--brand-soft); text-transform: uppercase;
}
.v2-footer-cols ul { margin-top: 1rem; display: grid; gap: .5rem; }
.v2-footer-cols a {
  font-size: 13px; line-height: 1.375;
  color: color-mix(in oklab, var(--background) 70%, transparent); transition: color .2s;
}
.v2-footer-cols a:hover { color: var(--background); }
.v2-footer-mid {
  margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / .15); padding-top: 2rem; text-align: center;
}
@media (min-width: 640px) { .v2-footer-mid { margin-top: 3rem; } }
.v2-footer-mid p { font-size: 13px; color: color-mix(in oklab, var(--background) 70%, transparent); }
.v2-footer-map {
  display: inline-block; border: 1px solid rgb(255 255 255 / .3); border-radius: 999px;
  padding: .625rem 1.5rem; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  transition: background-color .2s, border-color .2s, color .2s;
}
.v2-footer-map:hover { border-color: var(--brand); background: var(--brand); color: var(--brand-foreground); }
.v2-footer-bottom {
  border-top: 1px solid rgb(255 255 255 / .15); padding-block: 1rem;
  text-align: center; font-size: 12px;
  color: color-mix(in oklab, var(--background) 60%, transparent);
}
.v2-footer-bottom a { text-decoration: underline; }
.v2-footer-bottom a:hover { color: var(--background); }

/* ---------- review banner (only on the preview version) ---------- */
.v2-review-flag {
  position: fixed; bottom: 1rem; left: 1rem; z-index: 60;
  border-radius: 999px; background: var(--ink); color: #fff;
  padding: .5rem 1rem; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  box-shadow: 0 10px 20px rgb(0 0 0 / .25); opacity: .9;
}
.v2-review-flag a { color: var(--brand-soft); text-decoration: underline; }

.v2-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
   HEADER MENU — v2 presentation over the v1 menu structure.
   The entries, hierarchy and destinations come from app/Views/header.php;
   only the look is new. Replaces the webslidemenu library on v2 pages.
   ============================================================ */

/* ---------- utility strip: right-hand group ---------- */
.v2-strip-r { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
/* two classes so it outranks the `.v2-strip a` colour rule above */
.v2-strip .v2-strip-cta { color: var(--brand); font-weight: 700; cursor: pointer; }
.v2-strip .v2-strip-cta:hover { color: var(--brand-deep); text-decoration: underline; }

/* ---------- desktop mega menu ---------- */
/* .v2-nav-i stays static so the panel resolves against .v2-header
   (which is sticky, therefore a positioned ancestor) and can span full width. */
.v2-nav-i { position: static; }

.v2-mm {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / .28);
}
/* .is-open is driven by JS and is what keeps the panel alive while the pointer
   crosses the gap between the pill and the panel; :hover and :focus-within stay
   so the menu still works if scripting is unavailable. */
.v2-nav-i:hover > .v2-mm,
.v2-nav-i:focus-within > .v2-mm,
.v2-nav-i.is-open > .v2-mm { display: block; }
.v2-nav-i.is-open > .v2-nav-link { background: var(--card); color: var(--brand); }
.v2-nav-i.is-open > .v2-nav-link svg { transform: rotate(180deg); }

/* No horizontal padding here: the padding lives on the .v2-wrap parent, so this
   element's padding box equals its content box and `left` offsets stay honest. */
.v2-mm-in { position: relative; display: flex; padding-block: 1rem; min-height: 21rem; }

.v2-mm-tabs {
  width: 20rem; flex: none;
  max-height: min(70vh, 30rem); overflow-y: auto;
  border-right: 1px solid var(--border); padding-right: .5rem;
}
.v2-mm-tabs > li { position: static; }

.v2-mm-tab {
  display: flex; align-items: center; gap: .625rem;
  border-radius: .75rem; padding: .5rem .75rem;
  font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink);
  transition: background-color .15s, color .15s;
}
/* :not(.v2-mm-i) matters — v2_cat_icon() can emit a <span> for icon-font markup,
   and a bare `> span` rule handed it flex:1 and stretched it to ~128px. */
.v2-mm-tab > span:not(.v2-mm-i) { flex: 1; min-width: 0; }
.v2-mm-tab svg { height: .75rem; width: .75rem; color: var(--muted-foreground); }
.v2-mm-tabs > li:hover > .v2-mm-tab,
.v2-mm-tabs > li.is-active > .v2-mm-tab { background: var(--surface); color: var(--brand); }
.v2-mm-tabs > li.is-active > .v2-mm-tab svg { color: var(--brand); }

/* Icon slot produced by v2_cat_icon(): either an uploaded <img> or icon-font
   markup (Font Awesome 6 classes, or .icon-* from assets/css/icons.css — both
   stylesheets are loaded by the v2 pages so these glyphs actually resolve). */
.v2-mm-i {
  display: inline-flex; align-items: center; justify-content: center;
  height: 1.125rem; width: 1.125rem; flex: none;
  object-fit: contain; color: var(--brand); font-size: 1rem; line-height: 1;
}
.v2-mm-i > i,
.v2-mm-i > span { font-size: 1rem; line-height: 1; }

.v2-mm-pane {
  display: none;
  position: absolute; left: 20rem; right: 0; top: 1rem; bottom: 1rem;
  overflow-y: auto; padding-left: 1.5rem;
}
.v2-mm-tabs > li.is-active > .v2-mm-pane { display: block; }

.v2-mm-logo {
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; padding: .5rem 1rem;
  border: 1px solid var(--border); border-radius: .75rem; background: var(--card);
}
.v2-mm-logo:hover { border-color: var(--brand); }
.v2-mm-logo img { max-height: 3rem; width: auto; }

/* multi-column so a category with many children flows instead of scrolling */
.v2-mm-cols { columns: 3; column-gap: 1.5rem; }
.v2-mm-col { break-inside: avoid; margin-bottom: 1.25rem; }
.v2-mm-h {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-display2);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink);
}
.v2-mm-h:hover { color: var(--brand); }
.v2-mm-col ul { margin-top: .375rem; display: grid; gap: .125rem; }
.v2-mm-col ul a {
  display: flex; align-items: center; gap: .5rem;
  padding: .1875rem 0; font-size: 12.5px; line-height: 1.35;
  color: var(--muted-foreground);
}
.v2-mm-col ul a:hover { color: var(--brand); }

/* ---------- mobile accordion ---------- */
.v2-acc-t svg { height: .875rem; width: .875rem; transition: transform .2s ease; }
.v2-acc.is-open > .v2-acc-t { border-color: color-mix(in oklab, var(--brand) 40%, transparent); color: var(--brand); }
.v2-acc.is-open > .v2-acc-t svg { transform: rotate(180deg); }

.v2-acc-p { display: none; padding: .5rem 0 .5rem .75rem; }
.v2-acc.is-open > .v2-acc-p,
.v2-acc2.is-open > .v2-acc-p { display: block; }

.v2-acc2 { margin-block: .125rem; border-left: 2px solid var(--border); padding-left: .625rem; }
.v2-acc2-row { display: flex; align-items: center; gap: .5rem; }
.v2-acc2-row > a {
  flex: 1; min-width: 0; padding: .5rem 0;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.v2-acc2-row > a:hover { color: var(--brand); }
.v2-acc2-b {
  display: grid; place-items: center; height: 1.75rem; width: 1.75rem; flex: none;
  border: 1px solid var(--border); border-radius: 999px; background: var(--card);
  color: var(--muted-foreground); cursor: pointer;
}
.v2-acc2-b svg { height: .875rem; width: .875rem; transition: transform .2s ease; }
.v2-acc2.is-open > .v2-acc2-row > .v2-acc2-b { border-color: var(--brand); color: var(--brand); }
.v2-acc2.is-open > .v2-acc2-row > .v2-acc2-b svg { transform: rotate(180deg); }

.v2-acc3-h, .v2-acc3 { display: block; padding: .375rem 0; }
.v2-acc3-h {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink);
}
.v2-acc3 { padding-left: .75rem; font-size: 12.5px; color: var(--muted-foreground); }
.v2-acc3-h:hover, .v2-acc3:hover { color: var(--brand); }

/* ---------- enquiry modal ---------- */
.v2-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; }
.v2-modal[hidden] { display: none; }
.v2-modal-back {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--ink) 62%, transparent);
  backdrop-filter: blur(2px);
}
.v2-modal-box {
  position: relative; width: 100%; max-width: 56rem;
  max-height: calc(100vh - 2rem); overflow-y: auto;
  border: 1px solid var(--border); border-radius: 1.5rem;
  background: var(--card); box-shadow: 0 32px 64px -32px rgb(0 0 0 / .45);
}
.v2-modal-x {
  position: absolute; top: .75rem; right: .75rem; z-index: 2;
  display: grid; place-items: center; height: 2.25rem; width: 2.25rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--card);
  color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s;
}
.v2-modal-x:hover { border-color: var(--brand); color: var(--brand); }
.v2-modal-x svg { height: 1rem; width: 1rem; }

.v2-modal-grid { display: grid; }
@media (min-width: 860px) { .v2-modal-grid { grid-template-columns: 5fr 7fr; } }
.v2-modal-intro { padding: 2rem 1.5rem; background: var(--tint-2); border-bottom: 1px solid var(--border); }
@media (min-width: 860px) {
  .v2-modal-intro { padding: 2.5rem 2rem; border-bottom: 0; border-right: 1px solid var(--border); }
}
.v2-modal-intro p { font-size: .875rem; line-height: 1.5; color: var(--ink); }
.v2-modal-intro img { margin-top: 1.5rem; max-height: 3.25rem; width: auto; }

/* wins over .v2-form's margin-top because it is declared later at equal specificity */
.v2-modal-form { margin-top: 0; padding: 1.5rem; }
@media (min-width: 640px) { .v2-modal-form { padding: 2rem; } }

.v2-field--area { align-items: flex-start; }
@media (min-width: 640px) { .v2-field--area { grid-column: span 2; } }
.v2-field--area textarea {
  min-width: 0; flex: 1; border: 0; background: transparent; resize: vertical;
  font-family: inherit; font-size: .875rem; color: inherit; outline: none;
}
.v2-field--area textarea::placeholder { color: var(--muted-foreground); }

.v2-check { display: flex; align-items: flex-start; gap: .5rem; font-size: 12.5px; color: var(--muted-foreground); }
@media (min-width: 640px) { .v2-check { grid-column: span 2; } }
.v2-check input { margin-top: .15rem; accent-color: var(--brand); }
.v2-check a { color: var(--brand); text-decoration: underline; }

body.v2-modal-open { overflow: hidden; }

/* ---------- footer: connect column and social row ---------- */
/* the phone/email rows pair an icon with the value */
.v2-footer-line { display: inline-flex; align-items: center; gap: .5rem; }
.v2-footer-line svg { width: .875rem; height: .875rem; flex: none; color: var(--brand-soft); }

/* carried over from the previous footer; Font Awesome brand glyphs plus one
   inline SVG for Rutube, so both <i> and <svg> children are sized here */
.v2-footer-social { margin-top: 1.25rem; display: flex; align-items: center; gap: .5rem; }
.v2-footer-social a {
  display: grid; place-items: center; height: 2rem; width: 2rem;
  border: 1px solid rgb(255 255 255 / .25); border-radius: 999px;
  color: color-mix(in oklab, var(--background) 75%, transparent);
  transition: border-color .2s, background-color .2s, color .2s;
}
.v2-footer-social a:hover { border-color: var(--brand); background: var(--brand); color: #fff; }
.v2-footer-social svg { width: 1rem; height: 1rem; }
.v2-footer-social i { font-size: .9rem; line-height: 1; }

/* The footer sits outside the Bootstrap container on the older pages, so it must
   not inherit their text alignment or line-height. */
.v2-scope .v2-footer { text-align: left; line-height: 1.5; }

/* ============================================================
   BLOG AND VIDEO sections.
   Both existed on the previous homepage and were missing from v2. Content and
   behaviour are unchanged; the presentation follows the v2 design system.
   ============================================================ */

/* ---------- blog cards ---------- */
.v2-posts { margin-top: 2rem; display: grid; gap: 1rem; }
@media (min-width: 640px)  { .v2-posts { margin-top: 2.5rem; grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .v2-posts { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }

/* the whole card is one link, and every card is the same height regardless of
   image proportions or title length */
.v2-post {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid var(--border); border-radius: 1rem; background: var(--card);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.v2-post:hover {
  border-color: color-mix(in oklab, var(--brand) 45%, transparent);
  box-shadow: 0 14px 28px -18px color-mix(in oklab, var(--ink) 45%, transparent);
  transform: translateY(-2px);
}
.v2-post-img { display: block; overflow: hidden; background: var(--surface-2); }
.v2-post-img img { height: 11rem; width: 100%; object-fit: cover; transition: transform .3s ease; }
.v2-post:hover .v2-post-img img { transform: scale(1.04); }

.v2-post-body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1.125rem 1.25rem 1.25rem; }
.v2-post-title {
  font-family: var(--font-display2);
  font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink);
  /* two lines, so a long headline cannot push the cards out of step */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.v2-post:hover .v2-post-title { color: var(--brand); }
.v2-post-ex {
  font-size: 13px; line-height: 1.45; color: var(--muted-foreground);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.v2-post-more {
  margin-top: auto; display: inline-flex; align-items: center; gap: .375rem;
  padding-top: .75rem;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand);
}
.v2-post-more svg { width: .8rem; height: .8rem; }

.v2-posts-foot { margin-top: 2rem; display: flex; justify-content: center; }

/* ---------- video thumbnails ---------- */
.v2-vids { margin-top: 2rem; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px)  { .v2-vids { margin-top: 2.5rem; grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .v2-vids { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; } }

.v2-vid {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10;
  overflow: hidden; cursor: pointer; padding: 0;
  border: 1px solid var(--border); border-radius: .875rem; background: var(--ink);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.v2-vid:hover, .v2-vid:focus-visible {
  border-color: var(--brand); transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px color-mix(in oklab, var(--ink) 55%, transparent);
}
.v2-vid:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.v2-vid img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.v2-vid-veil {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--ink) 42%, transparent);
  transition: background-color .2s ease;
}
.v2-vid:hover .v2-vid-veil { background: color-mix(in oklab, var(--ink) 22%, transparent); }
.v2-vid-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; height: 2.75rem; width: 2.75rem;
  border-radius: 999px; background: color-mix(in oklab, var(--card) 92%, transparent);
  color: var(--brand); transition: transform .2s ease, background-color .2s ease;
}
.v2-vid:hover .v2-vid-play { transform: translate(-50%, -50%) scale(1.08); background: var(--card); }
.v2-vid-play svg { width: 1.35rem; height: 1.35rem; }

/* ---------- video popup ---------- */
.v2-vmodal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1rem; }
.v2-vmodal[hidden] { display: none; }
.v2-vmodal-back {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--ink) 78%, transparent);
  backdrop-filter: blur(3px);
}
.v2-vmodal-box { position: relative; width: 100%; max-width: 60rem; }
.v2-vmodal-frame {
  overflow: hidden; border-radius: 1rem; background: #000;
  aspect-ratio: 16 / 9; box-shadow: 0 32px 64px -28px rgb(0 0 0 / .6);
}
.v2-vmodal-frame iframe { height: 100%; width: 100%; border: 0; display: block; }
.v2-vmodal-x {
  position: absolute; top: -3rem; right: 0;
  display: grid; place-items: center; height: 2.5rem; width: 2.5rem;
  border: 1px solid rgb(255 255 255 / .35); border-radius: 999px;
  background: transparent; color: #fff; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.v2-vmodal-x:hover { border-color: #fff; background: rgb(255 255 255 / .12); }
.v2-vmodal-x svg { width: 1.1rem; height: 1.1rem; }

/* ---------- 404 page (inactive products and other unavailable pages) ---------- */
.v2-404 { background: var(--background); border-bottom: 1px solid var(--border); }
.v2-404-in { padding-block: 4rem 5rem; max-width: 46rem; }
@media (min-width: 1024px) { .v2-404-in { padding-block: 6rem 7rem; } }
.v2-404-h {
  margin-top: 1rem;
  font-family: var(--font-display2); font-size: 2rem; line-height: 1.1;
  font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
@media (min-width: 640px) { .v2-404-h { font-size: 2.75rem; } }
.v2-404-p { margin-top: 1rem; font-size: 15px; line-height: 1.7; color: var(--muted-foreground); }
.v2-404-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.v2-404-link {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); cursor: pointer;
}
.v2-404-link:hover { color: var(--brand-deep); text-decoration: underline; }
/* The shared .v2-cta carries margin-left:auto for the header layout; on the 404
   page that pushed the buttons to the right edge. (0,3,0) outranks it. */
.v2-404 .v2-404-actions .v2-cta { margin-left: 0; }
/* Let the page background show through, so the section does not leave a
   visible strip against the surrounding Bootstrap gutter. */
.v2-scope .v2-404 { background: transparent; }