/* ============================================
   Australian Tree Services — Design System
   Direction: Trade / Hi-Vis  ·  Palette: Charcoal + Lime
   Fonts: Oswald (headings) + Barlow (body)
   ============================================ */

:root {
  /* Base */
  --bg:          #16181A;
  --bg-alt:      #1B1E21;
  --panel:       #1E2124;
  --panel-2:     #232729;
  --field:       #131517;
  --border:      #31363B;
  --border-soft: #262A2E;

  /* Text */
  --head:        #FFFFFF;
  --text:        #DDE3E7;
  --muted:       #94A0A8;
  --placeholder: #7E8A92;

  /* Accent — lime */
  --accent:      #A3E635;
  --accent-hi:   #B9F05C;
  --accent-dim:  #84CC16;
  --accent-ink:  #14200A;
  --accent-tint: rgba(163, 230, 53, 0.12);
  --accent-line: rgba(163, 230, 53, 0.38);

  --font-head: "Oswald", "Bahnschrift", "DIN Alternate", Impact, sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;

  --radius: 3px;
  --radius-lg: 5px;
  --shadow: 0 2px 10px rgba(0,0,0,.3);
  --shadow-lg: 0 12px 34px rgba(0,0,0,.45);

  --container: 1180px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 68px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 62px; /* sticky mobile bar */
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

/* No phone number anywhere on the site may break across lines — covers the
   header, hero, CTA bands, footer, contact cards and sticky mobile bar. */
a[href^="tel:"] { white-space: nowrap; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--head);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: .01em;
}
h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin-bottom: var(--s3); }
h3 { font-size: 1.3rem; margin-bottom: var(--s1); }
h4 { font-size: 1.05rem; }

p { margin-bottom: var(--s2); }
strong { color: var(--head); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s3); }
.section { padding: var(--s6) 0; }
.section-alt { background: var(--bg-alt); }
.section-intro { max-width: 680px; margin: 0 auto var(--s4); text-align: center; }
.text-center { text-align: center; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em;
  font-weight: 600; font-size: 1rem; padding: 15px 30px;
  border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hi); color: var(--accent-ink); }
.btn-outline { border-color: #454C52; color: var(--head); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-secondary { border-color: rgba(255,255,255,.5); color: var(--head); }
.btn-secondary:hover { background: rgba(255,255,255,.1); color: var(--head); }
.btn-block { width: 100%; }

/* ============ Header ============ */
.emergency-banner {
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600; font-size: .82rem;
  text-align: center; padding: 7px var(--s2);
}
.site-header { background: var(--bg); border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; z-index: 100; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  max-width: var(--container); margin: 0 auto; padding: 14px var(--s3);
}
/* Brand mark is the roundel only. The full lockup's wordmark is dark green,
   which would nearly vanish on the charcoal background — so the company name
   is set in white type beside the icon instead. */
.logo {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; font-size: 1.22rem; color: var(--head); line-height: 1.05;
}
.logo:hover { color: var(--head); }
.logo-mark { height: 48px; width: auto; flex-shrink: 0; }
/* Wrapper keeps the company name as ONE flex item — without it the browser
   treats "Australian Tree" and "Services" as separate items, applying the
   gap between them and collapsing the text into a narrow column. */
.logo-text { display: block; }
.logo-text span { color: var(--accent); }
@media (max-width: 400px) {
  .logo { font-size: 1.05rem; gap: 9px; }
  .logo-mark { height: 40px; }
}

.header-call { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }
.header-phone {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  letter-spacing: .03em; padding: 9px 16px; border-radius: var(--radius);
  /* A phone number must never break across lines. Inside a flex container the
     text sits in a shrinkable anonymous item, so without this it wraps to
     "(07) / 3288 / 7777" when the header gets tight. */
  white-space: nowrap;
}
.header-phone svg { flex-shrink: 0; }
.header-phone:hover { background: var(--accent-hi); color: var(--accent-ink); }

nav.main-nav { display: none; }
/* align-self: stretch makes the nav fill the header row's height, so the
   top-level links can be full-height flex boxes and the hover/current
   underline can sit flush at the bottom without magic offsets. */
@media (min-width: 980px) { nav.main-nav { display: flex; align-items: stretch; align-self: stretch; } }
nav.main-nav > ul { list-style: none; display: flex; align-items: stretch; gap: var(--s4); }
nav.main-nav ul { list-style: none; }
nav.main-nav li { position: relative; }
nav.main-nav > ul > li > a {
  position: relative; display: flex; align-items: center; white-space: nowrap;
  color: var(--text); font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: .06em; font-size: .92rem; font-weight: 500;
}
nav.main-nav > ul > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
nav.main-nav > ul > li > a:hover::after,
nav.main-nav > ul > li:focus-within > a::after,
nav.main-nav > ul > li > a[aria-current="page"]::after { transform: scaleX(1); }
nav.main-nav > ul > li > a:hover,
nav.main-nav > ul > li > a[aria-current="page"] { color: var(--head); }
@media (prefers-reduced-motion: reduce) {
  nav.main-nav > ul > li > a::after { transition: none; }
}
.caret { font-size: .62em; opacity: .55; margin-left: 5px; }
/* The top-level link now runs the full height of the header row, so its
   bottom edge sits above the header's 14px padding. Drop the panel clear of
   the header border and bridge the gap with an invisible strip, otherwise
   the pointer leaves :hover on the way down and the menu snaps shut. */
nav.main-nav .dropdown::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 15px;
}
nav.main-nav .dropdown ul {
  display: none; position: absolute; top: calc(100% + 15px); left: 0;
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  border-radius: var(--radius); padding: 6px; min-width: 235px; flex-direction: column; gap: 0;
}
nav.main-nav .dropdown:hover ul, nav.main-nav .dropdown:focus-within ul { display: flex; }
nav.main-nav .dropdown ul li a {
  display: block; padding: 10px 12px; border-radius: var(--radius);
  color: var(--text); font-size: .9rem; font-family: var(--font-body); text-transform: none; letter-spacing: 0;
}
nav.main-nav .dropdown ul li a:hover { background: var(--panel-2); color: var(--accent); }

.menu-toggle { display: inline-flex; background: none; border: none; color: var(--head); cursor: pointer; padding: 6px; }
@media (min-width: 980px) { .menu-toggle { display: none; } }

.mobile-nav { display: none; background: var(--panel); border-top: 1px solid var(--border-soft); }
.mobile-nav.open { display: block; }
@media (min-width: 980px) { .mobile-nav { display: none !important; } }
.mobile-nav ul { list-style: none; padding: var(--s2) var(--s3); }
.mobile-nav > ul > li > a {
  display: block; padding: 13px 0; border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em;
  font-size: .95rem; color: var(--head);
}
.mobile-nav > ul > li > a[aria-current="page"] { color: var(--accent); }
.mobile-nav .sub-links { padding: 4px 0 8px var(--s2); }
.mobile-nav .sub-links a { display: block; padding: 7px 0; color: var(--muted); font-size: .92rem; }

/* ============ Sticky mobile CTA ============ */
.sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; display: flex; z-index: 200; box-shadow: 0 -4px 16px rgba(0,0,0,.4); }
@media (min-width: 980px) { .sticky-cta { display: none; } }
.sticky-cta a {
  flex: 1; text-align: center; padding: 16px 8px;
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; font-size: .95rem;
}
.sticky-cta .call { background: var(--panel); color: var(--head); border-top: 1px solid var(--border); }
.sticky-cta .quote { background: var(--accent); color: var(--accent-ink); }

/* ============ Hero ============ */
.hero {
  padding: var(--s6) 0 var(--s5);
  background:
    radial-gradient(ellipse at 72% 18%, rgba(163,230,53,.07), transparent 58%),
    linear-gradient(180deg, #1E2124 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border-soft);
}
.hero-inner { display: grid; grid-template-columns: 1fr; gap: var(--s5); align-items: center; }
@media (min-width: 980px) { .hero-inner { grid-template-columns: 1.08fr .92fr; } }

.hero-tag {
  display: inline-block; background: var(--accent-tint); border: 1px solid var(--accent-line);
  color: var(--accent); font-family: var(--font-head); text-transform: uppercase;
  font-size: .78rem; font-weight: 600; letter-spacing: .12em;
  padding: 6px 13px; border-radius: var(--radius); margin-bottom: var(--s3);
}
/* Rotating hero headlines. Only the first slide is a real <h1> — the rest are
   divs styled to match, so the page has exactly one H1 for crawlers and
   screen readers rather than four. */
.hero-copy h1,
.hero-copy .hero-headline {
  font-family: var(--font-head);
  color: var(--head);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: .01em;
  font-size: clamp(2.3rem, 6vw, 3.6rem);
  margin-bottom: var(--s2);
  min-height: 5.6rem;
}
.hero-copy h1 span,
.hero-copy .hero-headline span { color: var(--accent); }
.hero-copy .subtext { color: var(--muted); font-size: 1.08rem; margin-bottom: var(--s3); max-width: 46ch; min-height: 3.4rem; }
.hero-dots { display: flex; gap: 8px; margin-bottom: var(--s3); }
.hero-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: #3B4147; cursor: pointer; padding: 0; }
.hero-dots button.active { background: var(--accent); }
.hero-btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-phone-link {
  display: inline-flex; align-items: center; gap: 8px; color: var(--muted);
  font-weight: 500; margin-top: var(--s3); font-size: 1rem;
  white-space: nowrap; /* same reason as .header-phone */
}
.hero-phone-link svg { flex-shrink: 0; }
.hero-phone-link:hover { color: var(--accent); }

/* Hero lead form */
.lead-form { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s4); box-shadow: var(--shadow-lg); }
.lead-form h2 { margin-bottom: 4px; }
.lead-form .form-sub { color: var(--muted); font-size: .9rem; margin-bottom: var(--s3); }
.form-row { margin-bottom: 12px; }
.form-row label {
  display: block; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .05em;
  font-size: .75rem; font-weight: 500; color: var(--muted); margin-bottom: 5px;
}
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 12px 13px; background: var(--field); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 1rem; font-family: var(--font-body);
}
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--placeholder); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--accent); }
.form-row textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
.label-optional {
  color: var(--placeholder); font-weight: 400; letter-spacing: .03em;
  text-transform: none; font-family: var(--font-body); font-size: .78rem;
}
/* Honeypot — bots fill it, humans never see it. Hidden from screen readers
   and keyboard tab order so it doesn't trap assistive-tech users. */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden; opacity: 0;
}
.form-error {
  background: rgba(226, 75, 74, .12);
  border: 1px solid rgba(226, 75, 74, .45);
  color: #F0A6A5;
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: .9rem;
  margin-top: var(--s2);
}
.form-note { font-size: .78rem; color: var(--muted); margin: var(--s2) 0 0; text-align: center; }

/* ============ Stat strip ============ */
.stat-strip { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--accent); color: var(--accent-ink); }
@media (min-width: 760px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat-strip div { padding: 20px var(--s3); border-right: 1px solid rgba(0,0,0,.15); border-bottom: 1px solid rgba(0,0,0,.15); }
.stat-strip div:last-child { border-right: none; }
.stat-strip b { display: block; font-family: var(--font-head); font-size: 1.5rem; text-transform: uppercase; letter-spacing: .01em; }
.stat-strip span { font-size: .84rem; opacity: .8; }

/* ============ Service cards ============ */
.service-grid-featured { display: grid; grid-template-columns: 1fr; gap: var(--s3); margin-bottom: var(--s3); }
@media (min-width: 760px) { .service-grid-featured { grid-template-columns: 1fr 1fr; } }
.service-card-featured {
  display: block; background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: var(--radius); padding: var(--s4);
  transition: border-color .15s ease, background .15s ease;
}
.service-card-featured:hover { background: var(--panel-2); border-color: var(--border); border-left-color: var(--accent-hi); }
.service-card-featured h3 { font-size: 1.45rem; }
.service-card-featured p { color: var(--muted); margin-bottom: 0; }
.service-card-featured .badge {
  display: inline-block; background: var(--accent-tint); border: 1px solid var(--accent-line); color: var(--accent);
  font-family: var(--font-head); font-size: .7rem; font-weight: 600; letter-spacing: .1em;
  padding: 3px 10px; border-radius: var(--radius); margin-bottom: 10px; text-transform: uppercase;
}
.service-grid-secondary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .service-grid-secondary { grid-template-columns: repeat(5, 1fr); } }
.service-card-secondary {
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid #3B4147;
  border-radius: var(--radius); padding: 16px 14px; text-align: left;
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .03em;
  font-size: .92rem; font-weight: 500; color: var(--text);
}
.service-card-secondary:hover { border-left-color: var(--accent); color: var(--accent); }

/* ============ Sustainability band ============ */
.section-forest { background: var(--panel); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.section-forest p { color: var(--muted); }
.sustainability-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s3); }
.sustainability-badge {
  background: var(--accent-tint); border: 1px solid var(--accent-line); color: var(--accent);
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .05em;
  border-radius: var(--radius); padding: 8px 15px; font-size: .82rem; font-weight: 500;
}

/* ============ Google reviews widget ============ */
.stars { color: var(--accent); letter-spacing: 2px; font-size: 1rem; line-height: 1; }
.stars .star-empty { color: #3B4147; }

.reviews-summary {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: var(--s3); margin-bottom: var(--s3);
}
.reviews-score {
  font-family: var(--font-head); font-size: 2.6rem; line-height: 1; color: var(--accent);
}
.reviews-count { font-size: .88rem; color: var(--muted); margin-top: 6px; }
.reviews-link {
  margin-left: auto; font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: .04em; font-size: .88rem;
}

.reviews-grid { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
@media (min-width: 760px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s3); margin: 0;
}
.review-card p { color: var(--text); font-size: .95rem; margin: 12px 0 14px; }
.review-card cite {
  font-style: normal; font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: .04em; font-size: .85rem; color: var(--head); display: block;
}
.review-meta { color: var(--muted); font-weight: 400; }
.review-source {
  display: inline-block; margin-top: 12px;
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em;
  font-size: .78rem; color: var(--muted);
}
.review-source:hover { color: var(--accent); }

.reviews-fallback {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--s5) var(--s3); text-align: center;
}
.reviews-fallback p { color: var(--muted); max-width: 52ch; margin: 0 auto var(--s3); }

/* ============ Trust badges (compliance / contact) ============ */
.trust-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
@media (min-width: 760px) { .trust-strip { grid-template-columns: repeat(4, 1fr); } }
.trust-badge {
  background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: var(--radius); padding: var(--s3); text-align: center;
}
.trust-badge svg { color: var(--accent); margin-bottom: 8px; }
.trust-badge strong {
  display: block; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .03em;
  color: var(--head); font-size: 1.05rem; margin-bottom: 3px;
}
.trust-badge span { font-size: .84rem; color: var(--muted); }

/* ============ Inner page hero ============ */
.page-hero {
  padding: var(--s5) 0;
  background:
    radial-gradient(ellipse at 78% 25%, rgba(163,230,53,.06), transparent 60%),
    linear-gradient(180deg, #1E2124, var(--bg));
  border-bottom: 1px solid var(--border-soft);
}
.page-hero p { color: var(--muted); max-width: 66ch; margin-bottom: 0; font-size: 1.05rem; }
.breadcrumb {
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em;
  font-size: .76rem; color: var(--muted); margin-bottom: var(--s2);
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }

/* ============ CTA band ============ */
.cta-band { background: var(--accent); color: var(--accent-ink); padding: var(--s4) 0; text-align: center; }
.cta-band h2 { color: var(--accent-ink); font-size: 1.5rem; margin-bottom: var(--s2); }
.cta-band .btn-group { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-secondary { border-color: var(--accent-ink); color: var(--accent-ink); }
.cta-band .btn-secondary:hover { background: var(--accent-ink); color: var(--accent); }

/* ============ Content ============ */
.content-block { max-width: 800px; }
.content-block h2 { margin-top: var(--s5); }
.content-block h2:first-child { margin-top: 0; }
.content-block ul, .content-block ol { margin: 0 0 var(--s2) var(--s3); }
.content-block li { margin-bottom: 7px; }

/* ============ FAQ ============ */
.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-item summary {
  padding: var(--s3) 0; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .03em;
  font-size: 1.05rem; font-weight: 500; color: var(--head);
}
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.5rem; color: var(--accent); line-height: 1; flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding-bottom: var(--s3); color: var(--muted); margin-bottom: 0; }

/* ============ Team ============ */
.team-grid { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 760px) { .team-grid { grid-template-columns: 1fr 1fr; } }
.team-card { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: var(--s3); }
.team-card p:last-child { margin-bottom: 0; color: var(--muted); }
.team-role {
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .06em;
  font-size: .8rem; color: var(--accent); margin-bottom: 10px;
}

/* ============ Equipment ============ */
.equipment-list { columns: 2; column-gap: var(--s5); list-style: none; margin-left: 0 !important; }
@media (max-width: 640px) { .equipment-list { columns: 1; } }
.equipment-list li { break-inside: avoid; margin-bottom: 9px; padding-left: 22px; position: relative; color: var(--text); }
.equipment-list li::before { content: "\25B8"; position: absolute; left: 0; color: var(--accent); }

/* ============ Service area tags ============ */
.area-group { margin-bottom: var(--s3); }
.area-group h4 { margin-bottom: 10px; letter-spacing: .05em; }
.area-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.area-tags span {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 11px; font-size: .8rem; color: var(--muted);
}

/* ============ Misc ============ */
.info-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3); }
.benefit-list { list-style: none; margin-left: 0 !important; }
.benefit-list li { padding-left: 26px; position: relative; margin-bottom: 10px; }
.benefit-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* ============ Footer ============ */
.site-footer { background: #101214; border-top: 1px solid var(--border-soft); padding: var(--s5) 0 var(--s3); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.35fr 1fr 1fr; } }
.footer-mark { height: 79px; width: auto; margin-bottom: var(--s2); }
.site-footer h4 { color: var(--head); margin-bottom: var(--s2); letter-spacing: .05em; font-size: .98rem; }
.site-footer p { color: var(--muted); font-size: .92rem; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 9px; }
.site-footer li a { color: var(--muted); font-size: .92rem; }
.site-footer li a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--border-soft); margin-top: var(--s4); padding-top: var(--s3);
  font-size: .8rem; color: #6E7A82; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }