/* ============================================================
   Redgum Plumbing & Gas
   Mobile-first. One breakpoint: min-width 900px.

   The :root tokens and @font-face rules below are duplicated in
   the critical <style> block in index.html so that first paint
   has them. Change one, change both.

   PALETTE RULES A MAINTAINER MUST NOT BREAK
   - --brand (#F03535) appears on call buttons, the sticky bar
     and the logo dot. Nowhere else. Never behind small text.
   - Red text on a light ground is always --brand-text (#B41616).
   - Icons, rules, borders and cards are --ink (#1A1614).
   - Anything that needs to recede uses --placeholder (#E4DFDB)
     or an opacity of --ink. No greys.
   - Nothing is rounded except buttons (4px). No shadows except
     the sticky bar's upward shadow.
   ============================================================ */

@font-face{font-family:"Cabinet Grotesk";src:url("fonts/CabinetGrotesk-Extrabold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Cabinet Grotesk";src:url("fonts/CabinetGrotesk-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("fonts/Switzer-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("fonts/Switzer-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("fonts/Switzer-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Cabinet Fallback";src:local("Arial Bold"),local("Arial");size-adjust:102.92%;ascent-override:84.53%;descent-override:27.21%;line-gap-override:8.74%}
@font-face{font-family:"Switzer Fallback";src:local("Arial"),local("Helvetica Neue");size-adjust:100.18%;ascent-override:97.83%;descent-override:24.96%;line-gap-override:8.98%}

:root{
  --brand:#F03535;
  --brand-text:#B41616;
  --ink:#1A1614;
  --paper:#FAF7F5;
  --stone:#EFE9E3;
  --white:#FFFFFF;
  --placeholder:#E4DFDB;
  --head:"Cabinet Grotesk","Cabinet Fallback",Arial,sans-serif;
  --body:"Switzer","Switzer Fallback",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --bar-h:60px;
  /* See the critical block in index.html for the full note. --pad-x is only
     valid on elements whose containing block is the full page width. */
  --gutter:clamp(24px,5.5vw,48px);
  --content:520px;
  --pad-x:max(var(--gutter),calc((100% - var(--content)) / 2));
}

/* Desktop type is expressed as clamp(floor, vw, SPEC). The vw term is
   tuned so every value hits its exact specified size at 1280px and holds
   there; below 1280 it eases down so the 900px breakpoint is not crowded. */

/* ---------- shared ---------- */
.band{padding:44px var(--pad-x)}
.band--paper{background:var(--paper)}
.band--stone{background:var(--stone)}
.band--ink{background:var(--ink);color:var(--white)}
.band--ink :focus-visible,.site-footer :focus-visible{outline:2px solid var(--white);outline-offset:2px}

.section-h{
  font-family:var(--head);font-weight:900;
  font-size:30px;line-height:.96;letter-spacing:-0.01em;
  text-transform:uppercase;margin:0 0 24px;
}
.rule{border:0;border-top:1px solid var(--ink);margin:0}
.band--ink .rule{border-top-color:var(--white)}
.btn-call--mob{margin-top:28px}

/* ---------- services ---------- */
.service-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--ink)}
.service{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--ink)}
.icon{width:26px;height:26px;flex:none;margin-top:2px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:square;stroke-linejoin:miter}
.service h3{font-family:var(--body);font-weight:700;font-size:17.5px;line-height:1.3;letter-spacing:0;margin:0 0 4px}
.service p{font-size:17px}

/* ---------- what happens when you call ---------- */
.steps{list-style:none;margin:0;padding:0}
.step{display:grid;grid-template-columns:46px 1fr;gap:14px;padding:16px 0}
.step-num{
  font-family:var(--head);font-weight:900;font-size:54px;line-height:.9;
  letter-spacing:-0.01em;color:var(--brand-text);
}
.step p{font-size:17.5px}
.step strong{font-weight:700}

/* ---------- what it costs ---------- */
.cost-intro{font-size:17.5px;margin:0 0 28px}
.prices{margin:0}
.price{border-top:1px solid var(--white);padding:20px 0}
.price:last-child{border-bottom:1px solid var(--white)}
.price-figure{
  font-family:var(--head);font-weight:900;font-size:68px;line-height:.92;
  letter-spacing:-0.01em;margin:0 0 8px;
}
.price-when{font-weight:700;font-size:17.5px;margin:0 0 4px}
.price-note{font-size:17px;color:var(--white)}
.cost-prose{font-size:17.5px;margin:28px 0 0}
.cost-closing{font-weight:700;font-size:17.5px;margin:24px 0 26px}

/* ---------- suburbs ---------- */
.suburbs{
  list-style:none;margin:0 0 30px;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;
  font-family:var(--head);font-weight:800;font-size:21px;line-height:1.05;
  letter-spacing:-0.01em;
}
.suburbs-note{font-size:17px;margin-top:22px}

/* ---------- about ---------- */
.about{display:flex;flex-direction:column-reverse;gap:26px;padding-inline:0}
.about-copy{padding-inline:var(--pad-x)}
.about-h{font-size:34px;line-height:.96;margin:0 0 16px}
.about-body{font-size:17.5px}
.ph--van{height:240px}

/* ---------- FAQ ---------- */
.qa{border-top:1px solid var(--ink)}
.qa:last-of-type{border-bottom:1px solid var(--ink)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:64px;padding:12px 0;cursor:pointer;list-style:none;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font-size:21px;line-height:1.05;margin:0}
/* Same "+" glyph the whole time — rotated 45deg into an "x" on open
   instead of swapping to "\2212", so it's an animatable transform rather
   than an instant character-swap. */
.qa summary::after{
  content:"+";flex:none;display:inline-block;
  font-family:var(--head);font-weight:800;font-size:30px;line-height:1;
  transition:transform .25s ease;
}
.qa[open] summary::after{transform:rotate(45deg)}
.qa-body{padding:0 0 22px}
.qa-body p{font-size:17px}

/* ---------- enquiry form ---------- */
.faqform{padding-inline:0}
.faq{padding-inline:var(--pad-x)}
.enquiry{background:var(--paper);margin:34px 0 0;padding:36px var(--pad-x)}
.enquiry-h{font-size:30px;line-height:.98;margin:0 0 16px}
.enquiry-body{font-size:17.5px;margin:0 0 26px}
.field{margin-bottom:20px}
.field label{display:block;font-weight:700;font-size:16px;margin-bottom:8px}
.field input,.field textarea{
  display:block;width:100%;
  background:var(--stone);border:1px solid var(--ink);border-radius:0;
  font-family:var(--body);font-weight:400;font-size:17px;color:var(--ink);
}
.field input{height:52px;padding:0 14px}
.field textarea{min-height:108px;padding:13px 14px;line-height:1.45;resize:vertical}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border:2px solid var(--brand-text)}
.field-error{color:var(--brand-text);font-weight:700;font-size:15px;margin-top:7px}
.field-error:empty{display:none}
.form-status{
  border:1px solid var(--ink);background:var(--stone);
  font-weight:700;font-size:17px;padding:14px;margin:0 0 22px;
}
.form-status:empty{display:none}
.btn-outline{
  display:block;width:100%;min-height:52px;
  /* Same red as the h1's second sentence (.h1-accent). */
  border:2px solid var(--brand-text);border-radius:4px;padding:16px;background:transparent;
  font-family:var(--body);font-weight:700;font-size:18px;color:var(--brand-text);
  cursor:pointer;
}
.btn-outline:hover{background:var(--stone)}
.enquiry .btn-outline:hover{background:var(--placeholder)}

/* ---------- footer ---------- */
.site-footer{
  background:var(--ink);color:var(--white);
  padding:36px var(--pad-x) 34px;
  display:flex;flex-direction:column;gap:24px;
}
.foot-brand{display:flex;align-items:center;gap:12px;--mono-size:44px;--mono-r:32px;--notch:8px}
.foot-brand .lockup{font-size:22px}
.foot-meta p{font-size:15px;line-height:1.5}
.foot-area{margin-top:6px}
.foot-phone{
  font-family:var(--head);font-weight:900;line-height:1;
  letter-spacing:-0.01em;text-decoration:none;white-space:nowrap;
  /* 40px as specified on every real phone width. Eases down only on very
     narrow screens, where 40px would overflow the wider gutter. */
  font-size:min(40px,10.5vw);
  display:inline-flex;align-items:center;min-height:44px;
  align-self:flex-start;
}

/* ============================================================
   DESKTOP
   ============================================================ */
@media (min-width:900px){
  .band{padding:88px 56px}
  .section-h{font-size:clamp(38px,4.06vw,52px);margin:0 0 40px}
  .btn-call--mob{display:none}

  /* services: three columns, hairlines top and bottom only */
  .service-list{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;
    border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  }
  .service{border-top:0;padding:30px 0;gap:16px}
  .icon{width:30px;height:30px}
  .service p{max-width:30ch}

  /* steps: numeral above text, each column topped by a rule */
  .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px}
  .step{display:block;border-top:1px solid var(--ink);padding:22px 0 0}
  .step-num{display:block;font-size:clamp(64px,7.19vw,92px);margin-bottom:10px}
  .step p{max-width:34ch}

  /* cost */
  .cost-intro{max-width:46ch;margin:0 0 44px}
  .prices{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;
    border-bottom:1px solid var(--white);
  }
  .price{border-top:0;padding:0 0 34px}
  .price:last-child{border-bottom:0}
  .price-figure{font-size:clamp(92px,10.31vw,132px);margin:0 0 12px}
  .price-when{max-width:26ch}
  .cost-prose{max-width:66ch;margin:34px 0 0}
  .cost-close{
    display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;
    margin-top:40px;
  }
  .cost-closing{margin:0;max-width:46ch}
  .cost-close .btn-call{
    width:auto;font-size:clamp(24px,2.66vw,34px);padding:22px 34px;white-space:nowrap;
  }

  /* suburbs */
  .suburbs{
    grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 32px;
    font-size:clamp(26px,2.66vw,34px);margin:0 0 44px;
  }
  .suburbs-note{max-width:46ch;margin-top:28px;font-size:17.5px}

  /* about */
  .about{
    display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  }
  .about-copy{padding-inline:0}
  .about-h{font-size:clamp(46px,5.31vw,68px);margin:0 0 24px}
  .about-body{max-width:46ch}
  .ph--van{height:auto;min-height:520px}

  /* FAQ beside the enquiry card, both on stone */
  .faqform{display:grid;grid-template-columns:1.15fr 1fr;gap:72px;align-items:start}
  .faq{padding-inline:0}
  .qa summary{min-height:72px;padding:16px 0}
  .qa summary h3{font-size:26px}
  .qa summary::after{font-size:36px}
  .qa-body{padding:0 0 26px}
  .qa-body p{font-size:17.5px;max-width:46ch}

  .enquiry{
    background:var(--white);border:1px solid var(--ink);
    margin:0;padding:40px;
  }
  .enquiry-h{font-size:clamp(34px,3.13vw,40px);margin:0 0 18px}
  .enquiry-body{max-width:42ch;margin:0 0 30px}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
  .field textarea{min-height:116px}

  /* footer: meta left, big number right, baselines aligned */
  .site-footer{
    display:grid;grid-template-columns:1fr auto;column-gap:48px;row-gap:34px;
    padding:60px 56px 56px;
  }
  .foot-brand{
    grid-column:1;grid-row:1;
    --mono-size:60px;--mono-r:44px;--notch:11px;gap:16px;
  }
  .foot-brand .lockup{font-size:30px}
  .foot-meta{grid-column:1;grid-row:2;align-self:baseline}
  .foot-phone{
    grid-column:2;grid-row:2;align-self:baseline;justify-self:end;
    font-size:clamp(52px,5.94vw,76px);
  }
}

/* There is almost no motion here by design. Keep it that way. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  /* The blanket rule above would run the ticker to its final keyframe and
     freeze it there, showing the duplicate set. Stop it properly instead and
     let the four items sit as a static wrapped list. */
  .marquee-track{
    animation:none!important;transform:none!important;
    will-change:auto;width:auto;flex-wrap:wrap;
  }
  .marquee-set{flex-wrap:wrap}
  .marquee-set--dup{display:none}
  /* The hero h1's entrance slide is JS-driven (see script.js), which checks
     this same media query itself and skips the animation entirely — so
     there is nothing to unwind here. */
}