/* ============================================================
   Arkiplan website 2026 — shared stylesheet
   Import tokens.css BEFORE this file.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--ark-paper-2); font-family: var(--ark-font-body); color: var(--ark-ink); -webkit-font-smoothing: antialiased; }
/* Belt-and-braces horizontal-overflow safety. A single overflowing child
   (long pill of text, an SVG that hasn't shrunk, a fixed-width image)
   would otherwise let the whole page scroll sideways on narrow phones.
   `overflow-x: clip` is preferred over `hidden` because it doesn't make
   the body a containing block — so `position: sticky` further down the
   page (FAQ side-nav, header) keeps working as expected. */
html, body { overflow-x: clip; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* Typographic helpers */
.display-xl { font-family: var(--ark-font-display); font-weight: 800; font-size: clamp(56px, 7.4vw, 112px); line-height: 0.96; letter-spacing: -0.035em; text-wrap: pretty; margin: 0; }
.display-lg { font-family: var(--ark-font-display); font-weight: 800; font-size: clamp(44px, 5.2vw, 76px); line-height: 0.98; letter-spacing: -0.035em; text-wrap: pretty; margin: 0; }
.display-md { font-family: var(--ark-font-display); font-weight: 700; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: pretty; margin: 0; }
.display-sm { font-family: var(--ark-font-display); font-weight: 700; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.display-xs { font-family: var(--ark-font-display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; margin: 0; }
.eyebrow { font-family: var(--ark-font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ark-pink-deep); margin: 0; }
.eyebrow.on-dark { color: var(--ark-mint); }
.lead { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.45; color: var(--ark-ink-2); }
.accent-bar { background-image: linear-gradient(transparent 62%, var(--ark-pink-soft) 62%, var(--ark-pink-soft) 96%, transparent 96%); padding: 0 4px; }
.accent-mint { background-image: linear-gradient(transparent 62%, var(--ark-mint) 62%, var(--ark-mint) 92%, transparent 92%); padding: 0 4px; }

/* ---------- Layout ---------- */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 48px; }
.wrap-narrow { max-width: 980px; margin: 0 auto; padding: 0 48px; }
section { position: relative; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--ark-font-body); font-weight: 600; font-size: 15px;
  border-radius: 999px; padding: 14px 22px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--ark-dur-base) var(--ark-ease-out);
  text-decoration: none; white-space: nowrap;
}
.btn.sm { padding: 10px 16px; font-size: 13.5px; }
.btn.lg { padding: 18px 28px; font-size: 16.5px; }
.btn.xl { padding: 22px 36px; font-size: 17.5px; }
.btn-primary { background: var(--ark-pink); color: white; box-shadow: var(--ark-shadow-pink); }
.btn-primary:hover { background: var(--ark-pink-deep); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--ark-ink); border: 1.5px solid var(--ark-ink); }
.btn-secondary:hover { background: var(--ark-ink); color: white; }
.btn-ghost { background: var(--ark-paper-3); color: var(--ark-ink); }
.btn-ghost:hover { background: var(--ark-line); }
.btn-on-dark { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.35); }
.btn-on-dark:hover { background: white; color: var(--ark-ink); border-color: white; }
.btn .arrow { transition: transform var(--ark-dur-base) var(--ark-ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Navigation ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ark-dur-base) var(--ark-ease-out), background var(--ark-dur-base) var(--ark-ease-out);
}
.site-nav.scrolled { border-bottom-color: var(--ark-line); }
.site-nav .inner { max-width: 1320px; margin: 0 auto; padding: 16px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-nav .brand { flex-shrink: 0; }
.site-nav .brand img { height: 26px; width: auto; max-width: none; display: block; }
.site-nav .links { display: flex; gap: 24px; align-items: center; font-size: 15px; }
.site-nav .links > a { color: var(--ark-ink); text-decoration: none; font-weight: 500; padding: 6px 0; position: relative; white-space: nowrap; }
.site-nav .links > a:hover { color: var(--ark-pink-deep); }
.site-nav .links > a.has-dd { display: inline-flex; align-items: center; gap: 4px; }
.site-nav .actions { display: flex; gap: 10px; align-items: center; }
.site-nav .nav-login { font-size: 13.5px; color: var(--ark-ink-3); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ark-line); background: transparent; white-space: nowrap; transition: color 150ms, border-color 150ms, background 150ms; }
.site-nav .nav-login:hover { color: var(--ark-ink); border-color: var(--ark-ink-2); background: rgba(0,0,0,0.02); }
.site-nav .nav-login svg { opacity: 0.75; }
.site-nav .tel { font-size: 14px; color: var(--ark-ink-3); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.site-nav .tel:hover { color: var(--ark-ink); }

/* Services dropdown */
.dd { position: relative; }
.dd-menu {
  position: absolute; top: calc(100% + 8px); left: -20px;
  background: var(--ark-paper); border: 1px solid var(--ark-line);
  border-radius: var(--ark-r-md); box-shadow: var(--ark-shadow-md);
  padding: 10px; min-width: 280px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: all var(--ark-dur-fast) var(--ark-ease-out);
}
.dd:hover .dd-menu, .dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dd-menu a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ark-ink); font-size: 14px; font-weight: 500; }
.dd-menu a:hover { background: var(--ark-paper-3); }
.dd-menu a .ico { width: 32px; height: 32px; border-radius: 8px; background: var(--ark-pink-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dd-menu a .ico svg { width: 18px; height: 18px; }
.dd-menu a .meta { display: block; font-size: 12px; color: var(--ark-ink-3); font-weight: 400; margin-top: 1px; }

@media (max-width: 1180px) {
  .site-nav .tel { display: none; }
  .site-nav .nav-login span { display: none; }
  .site-nav .links { gap: 20px; font-size: 14.5px; }
}
@media (max-width: 1040px) {
  .site-nav .links { gap: 18px; font-size: 14px; }
  .site-nav .actions .btn.btn-secondary { display: none; }
  .site-nav .nav-login { display: none; }
}
@media (max-width: 900px) {
  .site-nav .links { display: none; }
  .site-nav .inner { padding: 14px 20px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ark-ink); color: white; padding: 80px 48px 40px; }
.site-footer .wrap { max-width: 1320px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr; gap: 28px; }
.site-footer img.flogo { height: 26px; margin-bottom: 18px; filter: brightness(0) invert(1); }
.site-footer .about { font-size: 14px; opacity: 0.65; line-height: 1.55; max-width: 34ch; margin: 0 0 20px; }
.site-footer h5 { font-family: var(--ark-font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5; margin: 0 0 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: 5px 0; }
.site-footer a { color: white; text-decoration: none; opacity: 0.78; font-size: 14px; }
.site-footer a:hover { opacity: 1; color: var(--ark-mint); }
.site-footer .trust-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); padding: 8px 12px; border-radius: 999px; font-size: 13px; margin-right: 8px; margin-bottom: 8px; }
.site-footer .trust-chip .stars { color: #FFC83D; letter-spacing: -1px; }
.site-footer .bot { max-width: 1320px; margin: 56px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; font-size: 12.5px; opacity: 0.55; flex-wrap: wrap; gap: 16px; }
@media (max-width: 900px) {
  .site-footer { padding: 64px 24px 32px; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
}

/* ---------- Sticky mobile CTA bar ---------- */
.sticky-cta {
  position: fixed; bottom: 16px; left: 16px; right: 86px; z-index: 50;
  display: none; gap: 8px;
  background: var(--ark-paper); border: 1px solid var(--ark-line);
  border-radius: 999px; padding: 8px; box-shadow: var(--ark-shadow-lg);
  /* Hidden by default — JS adds .show once the user scrolls past the
     hero CTAs. The transform-and-opacity transition gives a soft
     slide-in/out so the appearance isn't jarring. */
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.22s ease;
}
.sticky-cta.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.sticky-cta .btn { flex: 1; padding: 12px 16px; font-size: 14px; }
/* Show the bar's CONTAINER on mobile only — visibility of the bar
   itself within mobile is controlled by the .show class via JS. */
@media (max-width: 900px) { .sticky-cta { display: flex; } }

/* ---------- Press strip ---------- */
.press-strip { background: var(--ark-paper); border-top: 1px solid var(--ark-line); border-bottom: 1px solid var(--ark-line); padding: 28px 0; }
.press-strip .inner { max-width: 1320px; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; }
.press-strip .label { font-family: var(--ark-font-display); font-weight: 600; font-size: 14px; color: var(--ark-ink-3); letter-spacing: -0.005em; }
.press-strip .logos { display: flex; gap: 56px; align-items: center; flex-wrap: wrap; }
.press-strip .logo-img { display: block; width: auto; opacity: 0.8; filter: grayscale(100%) contrast(1.05); transition: opacity 160ms ease, filter 160ms ease; }
.press-strip .logo-img:hover { opacity: 1; filter: grayscale(0%) contrast(1); }
.press-strip .logo-img.times { height: 48px; }
.press-strip .logo-img.dm { height: 28px; }
.press-strip .logo-img.hr { height: 38px; }
.press-strip .logo-img.aj { height: 30px; }
@media (max-width: 900px) {
  .press-strip .inner { grid-template-columns: 1fr; gap: 16px; padding: 0 24px; }
  .press-strip .logos { gap: 32px; }
  .press-strip .logo-img.times { height: 38px; }
  .press-strip .logo-img.dm { height: 22px; }
  .press-strip .logo-img.hr { height: 30px; }
  .press-strip .logo-img.aj { height: 24px; }
}

/* ---------- Partner strip ----------
   Same visual treatment as the press strip — greyscale logos that flip
   to colour on hover — but on the paper-2 background so two consecutive
   logo strips don't visually merge into one heavy band. Per-logo heights
   below are tuned for the actual aspect ratios. */
.partner-strip { background: var(--ark-paper-2); border-top: 1px solid var(--ark-line); border-bottom: 1px solid var(--ark-line); padding: 28px 0; }
.partner-strip .inner { max-width: 1320px; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; }
.partner-strip .label { font-family: var(--ark-font-display); font-weight: 600; font-size: 14px; color: var(--ark-ink-3); letter-spacing: -0.005em; }
.partner-strip .logos { display: flex; gap: 56px; align-items: center; flex-wrap: wrap; justify-content: center; }
.partner-strip .logo-img { display: block; width: auto; opacity: 0.8; filter: grayscale(100%) contrast(1.05); transition: opacity 160ms ease, filter 160ms ease; }
.partner-strip .logo-img:hover { opacity: 1; filter: grayscale(0%) contrast(1); }
.partner-strip .logo-img.tp { height: 26px; }     /* Travis Perkins — wide horizontal mark, aspect 5.4:1 */
.partner-strip .logo-img.oct { height: 44px; }    /* Octopus Energy — icon-above-text, aspect 2.5:1 */
.partner-strip .logo-img.loaf { height: 36px; }   /* Loaf — square script wordmark, aspect 1:1 */
.partner-strip .logo-img.topps { height: 22px; }  /* Topps Tiles — wide thin wordmark, aspect 5.4:1 */
@media (max-width: 900px) {
  .partner-strip .inner { grid-template-columns: 1fr; gap: 16px; padding: 0 24px; }
  .partner-strip .logos { gap: 32px; }
  .partner-strip .logo-img.tp { height: 22px; }
  .partner-strip .logo-img.oct { height: 36px; }
  .partner-strip .logo-img.loaf { height: 30px; }
  .partner-strip .logo-img.topps { height: 18px; }
}

/* ---------- Trust pill ---------- */
.trust-pill { display: inline-flex; align-items: center; gap: 10px; background: var(--ark-paper); border: 1px solid var(--ark-line); padding: 8px 14px 8px 8px; border-radius: 999px; font-size: 13.5px; font-weight: 500; }
.trust-pill .stars { color: #1FB771; font-size: 14px; letter-spacing: -0.5px; }
.trust-pill .logo { width: 24px; height: 24px; background: #1FB771; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 13px; }

/* ---------- Card primitives ---------- */
.card { background: var(--ark-paper); border: 1px solid var(--ark-line); border-radius: var(--ark-r-md); padding: 28px; }
.card-lg { border-radius: var(--ark-r-lg); padding: 36px; }

/* ---------- Icon chip ---------- */
.ico-chip { width: 48px; height: 48px; border-radius: 14px; background: var(--ark-pink-soft); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ico-chip svg { width: 24px; height: 24px; stroke: var(--ark-ink); stroke-width: 1.5; fill: none; }
.ico-chip.mint { background: var(--ark-mint-soft); }

/* ---------- Estimator modal ---------- */
.est-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(14,14,16,0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 24px;
  animation: fade-in 220ms var(--ark-ease-out);
}
.est-overlay.open { display: flex; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.est-modal {
  width: 100%; max-width: 720px; background: var(--ark-paper); border-radius: 24px;
  box-shadow: var(--ark-shadow-lg); max-height: calc(100vh - 48px); overflow: hidden;
  display: flex; flex-direction: column; animation: pop-in 280ms var(--ark-ease-out);
}
.est-modal .close-btn { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--ark-paper-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.est-modal .close-btn:hover { background: var(--ark-line); }

/* ---------- Utility ---------- */
.stack-2 > * + * { margin-top: 8px; }
.stack-3 > * + * { margin-top: 12px; }
.stack-4 > * + * { margin-top: 16px; }
.stack-5 > * + * { margin-top: 24px; }
.stack-6 > * + * { margin-top: 32px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.mint-plate { background: var(--ark-mint-soft); }
.pink-plate { background: var(--ark-pink-soft); }
.ink-plate { background: var(--ark-ink); color: white; }
.ink-plate .eyebrow, .ink-plate h2, .ink-plate h3 { color: inherit; }
.section-pad { padding: 96px 0; }
.section-pad-sm { padding: 64px 0; }
@media (max-width: 900px) {
  .section-pad { padding: 64px 0; }
  .section-pad-sm { padding: 40px 0; }
  .wrap, .wrap-narrow { padding: 0 20px; }
  .display-xl { font-size: 48px; }
}
/* Sub-mobile (≤ Z Fold cover, narrow Android, iPhone SE portrait) —
   tighten the rails another 4px so long inline content (the trust
   kicker pill, .lead paragraphs) has the breathing room it needs to
   wrap inside the viewport rather than clip at the right edge. */
@media (max-width: 480px) {
  .wrap, .wrap-narrow { padding: 0 16px; }
}

/* ---------- Fade-in on scroll helper (JS-toggled) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: all 520ms var(--ark-ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* =====================================================================
   Exit-intent popup
   ===================================================================== */
.exit-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14, 14, 16, 0.55);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.exit-overlay.show {
  display: flex;
  opacity: 1;
}
.exit-card {
  position: relative;
  background: var(--ark-paper);
  border-radius: 18px;
  padding: 32px;
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
  /* Slide up on entry */
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.0) 0.05s, opacity 0.3s ease 0.05s;
}
.exit-overlay.show .exit-card {
  transform: translateY(0);
  opacity: 1;
}
.exit-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ark-paper-2);
  border: 1px solid var(--ark-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ark-ink-2);
  cursor: pointer;
  transition: all 0.15s ease;
}
.exit-close:hover { background: var(--ark-paper-3); color: var(--ark-ink); }
.exit-eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 10px;
  background: var(--ark-pink-soft);
  color: var(--ark-pink-deep);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.exit-card h2 {
  font-family: var(--ark-font-display, 'Inter Tight', sans-serif);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--ark-ink);
}
.exit-lead {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ark-ink-2);
  margin: 0 0 22px;
  max-width: 60ch;
}
.exit-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 20px;
}
.exit-tool {
  display: flex;
  flex-direction: column;
  background: var(--ark-paper-2);
  border: 1.5px solid var(--ark-line);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.18s ease;
}
.exit-tool:hover {
  border-color: var(--ark-pink);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}
.exit-tool-img {
  aspect-ratio: 4 / 3;
  background: var(--ark-paper-3);
  overflow: hidden;
}
.exit-tool-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.exit-tool-body {
  padding: 16px;
}
.exit-tool-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ark-ink-3);
  margin-bottom: 6px;
}
.exit-tool-body h3 {
  font-family: var(--ark-font-display, 'Inter Tight', sans-serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.exit-tool-body p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ark-ink-2);
  margin: 0 0 12px;
}
.exit-tool-link {
  display: inline-block;
  color: var(--ark-pink-deep);
  font-weight: 700;
  font-size: 14px;
}

/* Mobile / narrow viewports — stack tool tiles vertically and tighten padding.
   (The trigger itself is desktop-only, but a user could still hit a state where
   the overlay shows on mobile e.g. via dev tools — be defensive.) */
@media (max-width: 640px) {
  .exit-card { padding: 22px; border-radius: 14px; }
  .exit-tools { grid-template-columns: 1fr; }
  .exit-tool-img { aspect-ratio: 16 / 9; }
}

/* =========================================================================
   Mobile menu — full-screen overlay shown on viewports ≤900px.
   The burger button is hidden above 900px (the inline nav links handle it).
   ========================================================================= */
.nav-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--ark-line);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  color: var(--ark-ink);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px; height: 40px;
}
.nav-burger:hover { border-color: var(--ark-ink-3); }
.nav-burger:active { background: var(--ark-paper-2); }

/* Hide the burger on desktop (the inline nav handles navigation) */
@media (min-width: 901px) {
  .nav-burger { display: none !important; }
}

/* On mobile: show burger, hide the bigger CTAs that are clumsy on small screens */
@media (max-width: 900px) {
  .nav-burger { display: inline-flex; }
  /* Keep only the burger + the Instant price CTA visible on mobile.
     The "Book an intro call" button is duplicated inside the menu, and
     space in the top bar matters more on small screens. */
  .site-nav .actions .btn.btn-secondary { display: none; }
  /* Tighten the Instant price button so it fits next to the burger comfortably */
  .site-nav .actions .btn.btn-primary { padding: 8px 14px; font-size: 13.5px; }
  .site-nav .actions { gap: 8px; }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--ark-paper, #fffdf8);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
  overflow-y: auto;
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ark-line);
  flex-shrink: 0;
}
.mobile-menu-head .brand img { height: 26px; }
.mobile-menu-close {
  background: transparent;
  border: 1px solid var(--ark-line);
  border-radius: 999px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ark-ink);
}
.mobile-menu-close:hover { background: var(--ark-paper-2); }
.mobile-menu-body {
  flex: 1;
  padding: 20px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mm-section {
  display: flex;
  flex-direction: column;
}
.mm-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ark-pink-deep);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}
.mobile-menu-body a:not(.btn) {
  color: var(--ark-ink);
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  display: block;
}
.mobile-menu-body a.mm-top {
  font-size: 19px;
  font-weight: 600;
  padding: 14px 0;
}
.mobile-menu-body a:active { color: var(--ark-pink-deep); }
.mm-section:last-child a { border-bottom: 0; }
.mm-actions {
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--ark-line);
  gap: 12px;
}
.mm-actions .mm-cta {
  width: 100%;
  text-align: center;
  justify-content: center;
  font-size: 16px;
  padding: 14px 20px;
}
.mm-tel {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ark-ink-2) !important;
  padding: 12px 0 !important;
  border-bottom: 0 !important;
}
.mm-tel svg { opacity: 0.6; }
.mm-login {
  text-align: center;
  font-size: 14px !important;
  color: var(--ark-ink-3) !important;
  padding: 16px 0 0 !important;
  border-bottom: 0 !important;
}