/* ============================================================
   Global Sheds — Avast layout version
   Scale and rhythm are lifted from the template's own stylesheet:
     container   1240px
     sections    140px / 100px / 80px vertical, 5% or 3% sides
     type        75px hero, 46px section, 44px h2, 28px h5, 22px feature,
                 80px display figure, 14px eyebrow at .214em
     radii       buttons and chips fully round, cards square, thumbnails 8px
     shadow      14px 14px 200px at 6% — a wide, almost invisible lift
   Avast leans on one warm accent over deep navy. Global Sheds' accent is red,
   so every place the template used amber becomes red, and red-as-text on a dark
   ground becomes Ember: #C8102E only reaches 2.85:1 on navy.
   ============================================================ */

:root{
  --ink:#0E1D38;        /* deep ground, Avast's #0a1b2b */
  --slab:#1A2C4E;       /* raised surface on the deep ground, Avast's #132433 */
  --navy:#293B65;       /* brand navy, used for fills that need to read lighter */
  --red:#C8102E;        /* the accent field and every filled action */
  --red-dark:#A50D26;   /* hover, and the tag inside the notice strip */
  --ember:#F0505F;      /* red for dark grounds: icons, arrows, inline accents */
  --ice:#A8C0E0;        /* eyebrows on dark. 9.01:1 on ink */
  --concrete:#F4F4F2;
  --steel:#5F6672;      /* secondary text on light. 5.25:1 on concrete */
  --hairline:#E1E3E8;
  --frame:#D9C9A8;      /* the offset outline behind the alternating photos */
  --icon:#C8212E;       /* the marks. 5.66:1 on white, 5.14 on concrete, 2.97 on ink */

  --display:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --shell:1760px;
  --pad-lg:140px; --pad-md:100px; --pad-sm:80px;
  --lift:0 14px 200px rgba(14,29,56,.06),0 2px 10px rgba(14,29,56,.04);
  --dim:var(--steel);        /* secondary text on the current surface */
  --brow:var(--red);         /* eyebrow on the current surface */
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Lenis 1.0's own stylesheet, inlined rather than shipped as a fifth request. The one that
   matters is the second rule: without it the browser's native smooth scrolling and Lenis
   both try to animate the same scroll and fight each other. The rest lets a sub-scroller
   opt out with data-lenis-prevent, stops the page behind a locked overlay, and keeps an
   iframe from swallowing the pointer mid-scroll. */
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}
body{
  margin:0;max-width:100%;overflow-x:hidden;
  background:#fff;color:var(--ink);
  font-family:var(--body);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* written as `body h*` because Tailwind preflight resets heading weight to inherit
   and its stylesheet can land after this file */
body h1,body h2,body h3,body h4,body h5,body h6{
  font-family:var(--display);font-weight:700;margin:0;line-height:1.1;text-wrap:balance}
body p{margin:0}
body img,body svg{display:block;max-width:100%}
body a{color:inherit;text-decoration:none}
body ul{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}   /* display utilities otherwise beat plain [hidden] */

/* ---------- surfaces the browser draws, themed from the palette ---------- */
::selection{background:var(--red);color:#fff}
.on-dark ::selection,.on-accent ::selection{background:#fff;color:var(--ink)}
:root{accent-color:var(--red);caret-color:var(--red);scrollbar-color:var(--steel) var(--concrete)}
.on-dark{scrollbar-color:var(--slab) var(--ink)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--concrete)}
::-webkit-scrollbar-thumb{background:var(--steel);border:3px solid var(--concrete);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--ink)}
.tnum,.num{font-variant-numeric:tabular-nums}
.link-underline{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}

:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible{outline-color:var(--ember)}
.on-accent :focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* ---------- layout ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;position:relative;z-index:10}
.sec{padding:var(--pad-lg) 5%;position:relative}
.sec-narrow{padding:var(--pad-lg) 3%;position:relative}
@media (max-width:991px){
  .sec{padding:var(--pad-md) 3%}
  .sec-narrow{padding:var(--pad-md) 3%}
}
/* 80px top and bottom on every band is a lot of a 390px screen: eleven sections of it is
   roughly 1760px, more than two screenfuls of nothing. 56 keeps the sections apart and
   gives that back. The token is redefined rather than the rule overridden, so everything
   that reads --pad-sm, the footer included, follows. */
@media (max-width:560px){:root{--pad-sm:56px}}
@media (max-width:767px){
  .sec,.sec-narrow{padding:var(--pad-sm) 20px}
}
.on-dark{background:var(--ink);color:#fff;--dim:rgba(255,255,255,.75);--brow:var(--ice);
  --frame:rgba(255,255,255,.25)}
.on-light{color:var(--ink);--dim:var(--steel);--brow:var(--red)}
/* an accent field: white text, but it paints its own background */
.on-accent{color:#fff;--dim:#fff;--brow:#fff}
/* every flex and grid child that holds fixed-width content */
.shell>*,.grid-3>*,.grid-2>*,.row-split>*,.foot-flex>*,.chain>*{min-width:0}

/* Avast puts a soft wedge of lighter navy behind its dark sections */
.wedge::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(41,59,101,.55) 0%,rgba(41,59,101,0) 60%),
    radial-gradient(90% 70% at 100% 100%,rgba(41,59,101,.35) 0%,rgba(41,59,101,0) 65%);
}
/* and a pale one behind the light sections */
.wedge-light::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(70% 60% at 0% 20%,rgba(41,59,101,.05) 0%,rgba(41,59,101,0) 70%);
}

/* The template's vertical seven-line grid over its accent fields, at .10 rather than
   the template's own .22. White text sits over these fields, and a line falling under
   it at .22 lifts the local ground to #D4455C, where white measures 4.37:1 and fails.
   At .10 the ground is #CE2843 and white holds 5.24:1, against 5.88:1 on plain red. */
.lines{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(14.2857% - 1px),
    rgba(255,255,255,.10) calc(14.2857% - 1px),rgba(255,255,255,.10) 14.2857%)}

/* ---------- type ---------- */
.eyebrow{font-family:var(--body);font-size:.875rem;font-weight:600;letter-spacing:.214em;
  text-transform:uppercase;color:var(--brow);margin:0 0 14px}
.eyebrow-white{color:#fff}

.h-hero{font-size:clamp(2.6rem,5.4vw,4.7rem);letter-spacing:-.5px;line-height:1.05;margin-bottom:15px}
.h-sec{font-size:clamp(2rem,3.4vw,2.875rem);max-width:620px;margin-bottom:16px}
.h-row{font-size:clamp(1.9rem,3vw,2.75rem);letter-spacing:-.5px;margin-bottom:20px}
.h-card{font-size:1.75rem;margin-bottom:22px}
.h-feat{font-size:1.375rem}
.h-post{font-size:1.5rem;font-weight:500;letter-spacing:-.3px;line-height:1.25}
.figure{font-family:var(--display);font-weight:700;font-size:clamp(2.75rem,5.4vw,5rem);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* Secondary text is scoped by SURFACE, not by ancestor. A white card inside a dark
   section is a light surface, and `.on-dark .body-dim` would otherwise reach into it
   and paint the copy white on white. Custom properties resolve from the nearest
   ancestor that sets them, so specificity and source order stop mattering. */
.lede{font-size:1.0625rem;line-height:1.6;max-width:490px;color:var(--dim)}
.body-dim{color:var(--dim)}
.title-block{margin-bottom:45px;max-width:640px}
.title-block-centre{margin-inline:auto;text-align:center}
.title-block-centre .lede,.title-block-centre .h-sec{margin-inline:auto}

/* ---------- buttons: fully round, 18px / 35px, 17px label ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  border:1px solid transparent;border-radius:100px;padding:18px 35px;
  font-family:var(--body);font-size:1.0625rem;font-weight:600;line-height:1;
  cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:var(--red);color:#fff}                 /* 5.88:1 */
.btn-accent:hover{background:var(--red-dark)}                  /* 7.82:1 */
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--navy)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--concrete)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-sm{padding:14px 26px;font-size:.9375rem}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:15px;margin-top:35px}
.btn-row-centre{justify-content:center}
.text-link{font-size:1rem;font-weight:600;color:#fff;text-decoration:underline;
  text-underline-offset:.25em;text-decoration-thickness:1px;padding:8px 4px;transition:opacity .2s}
.text-link:hover{opacity:.75}

/* ---------- notice strip ---------- */
.notice{position:relative;flex:0 0 auto;z-index:16;
  min-height:56px;background:var(--red);color:#fff;display:flex;align-items:center;
  justify-content:center;gap:16px;padding:10px 20px;text-align:center;flex-wrap:wrap}
.notice-tag{background:var(--red-dark);border-radius:100px;padding:7px 16px;
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.notice-text{font-size:1rem}
.notice a{text-decoration:underline;text-underline-offset:.2em}
@media (max-width:991px){.notice{display:none}}

/* ---------- nav: sits over the hero, 100px tall, hairline under ---------- */
.nav{position:relative;flex:0 0 auto;z-index:60;min-height:100px;padding:25px 5%;
  border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center}
.nav-inner{width:100%;max-width:var(--shell);margin-inline:auto;display:flex;
  align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:99}
/* the supplied white mark sits straight on the dark panel, so the white plate the
   navy logo needed is gone. The footer is light and keeps the navy mark. */
.logo-link{display:inline-flex;position:relative}
.logo-link img{width:152px;height:auto}
.logo-light{display:none}
.nav-links{display:flex;align-items:center}
/* nowrap and tighter side padding: the live site's menu has four dropdowns where this
   layout had three, and at 1440 "Domestic Sheds" and the phone number were each breaking
   over two lines inside a bar built for one. */
.navlink{display:flex;align-items:center;gap:6px;padding:12px 9px;font-size:.8125rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  color:rgba(255,255,255,.88);transition:color .2s}
.navlink:hover,.navlink[aria-expanded="true"]{color:#fff}
.navlink svg{transition:transform .25s var(--ease)}
.navlink[aria-expanded="true"] svg{transform:rotate(180deg)}
/* The phone and email links are icons now. Icon-only means the name has to come from
   aria-label, and the target has to be a real one: 44px square, which is larger than the
   20px mark inside it. currentColor, so they follow the bar from white over the hero to
   steel on the fixed white version. */
.nav-ico{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  flex:0 0 auto;color:rgba(255,255,255,.88);transition:color .2s}
.nav-ico:hover{color:#fff}
.nav.is-fixed .nav-ico{color:var(--steel)}                  /* 5.78:1 on white */
.nav.is-fixed .nav-ico:hover{color:var(--red)}              /* 5.89:1 */
/* the ghost button is built for dark grounds; on the white bar it needs the ink outline */
.nav.is-fixed .btn-ghost{color:var(--ink);border-color:rgba(14,29,56,.45)}   /* 3.7:1 */
.nav.is-fixed .btn-ghost:hover{border-color:var(--ink);background:rgba(14,29,56,.05)}
.nav-designer{white-space:nowrap}
@media (max-width:1199px){.nav-links{display:none}}
/* below 560 the CTA and the burger no longer both fit, and the CTA was winning:
   at 320 the burger sat at x=330 on a 320 viewport, clipped and unreachable.
   The drawer carries the same action, so the bar keeps the burger. */
@media (max-width:560px){
  .nav{padding-left:16px;padding-right:16px}
  .nav .btn-accent{display:none}
}

/* ---------- the bar, fixed and white once the hero is behind you ----------

   It leaves the flow when it sticks, so the hero would jump up by the bar's height at the
   moment it detaches. The hero is 100vh and the bar lives inside it, so the placeholder is
   set on the hero rather than on the body: .hero gets the padding back exactly once.

   It only appears after 480px of scroll, well past the bar's own height, so it never
   flickers on and off around the threshold.

   Both logos ship in the markup and are swapped by class. Changing `src` at the moment the
   bar turns white gives a frame of nothing while the second file decodes, which on a white
   bar is a hole where the mark should be. */
.nav.is-fixed{position:fixed;top:0;left:0;right:0;width:100%;
  background:#fff;color:var(--ink);border-bottom:1px solid var(--hairline);
  min-height:76px;padding-top:12px;padding-bottom:12px;
  box-shadow:0 10px 40px rgba(14,29,56,.09);
  transform:translateY(-100%);transition:transform .32s var(--ease)}
.nav.is-fixed.is-shown{transform:none}
.nav.is-fixed .logo-dark{display:none}
.nav.is-fixed .logo-light{display:block;width:132px}
.nav.is-fixed .navlink{color:var(--steel)}                  /* 5.78:1 on white */
.nav.is-fixed .navlink:hover,
.nav.is-fixed .navlink[aria-expanded="true"]{color:var(--ink)}
.nav.is-fixed .burger{color:var(--ink)}
.nav.is-fixed :focus-visible{outline-color:var(--red)}      /* 5.89:1, ember is 3.52 here */
@media (prefers-reduced-motion:reduce){.nav.is-fixed{transition:none}}

/* the dropdowns, one row per page of the live site's menu */
.dd{position:relative}
.dd-panel{position:absolute;top:calc(100% + 14px);left:0;min-width:300px;background:#fff;color:var(--ink);--dim:var(--steel);
  border-radius:14px;box-shadow:0 30px 70px rgba(14,29,56,.22);padding:14px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s,transform .2s var(--ease),visibility .2s}
.dd.is-open .dd-panel{opacity:1;visibility:visible;transform:none}
.dd-item{display:flex;align-items:flex-start;gap:14px;padding:14px;border-radius:10px;transition:background-color .2s}
.dd-item:hover{background:var(--concrete)}
.dd-icon{flex:0 0 auto;width:42px;height:42px;border-radius:100px;background:rgba(200,16,46,.1);
  color:var(--red);display:flex;align-items:center;justify-content:center}
.dd-title{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink)}
.dd-sub{font-size:.8125rem;color:var(--steel);margin-top:2px}

/* Domestic sheds has fifteen children on the live site. A 300px single column would run
   past the fold, so the panel columns instead and the count sets how many it takes. */
.dd-wide{padding:20px 22px 18px;min-width:0}
.dd-all{display:block;font-family:var(--display);font-weight:700;font-size:.8125rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--red);        /* 5.89:1 */
  padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--hairline)}
.dd-list{list-style:none;margin:0;padding:0;columns:1;column-gap:34px}
.dd-list li{break-inside:avoid}
.dd-link{display:block;padding:8px 0;font-size:.9375rem;color:var(--steel);  /* 5.78:1 */
  white-space:nowrap;transition:color .2s}
.dd-link:hover{color:var(--red)}
#dd-domestic-sheds .dd-list{columns:2}
#dd-domestic-sheds,#dd-resources{left:auto;right:auto}
@media (max-width:1379px){.nav-designer{display:none}}
/* the last two panels would run off the right edge from a left anchor */
#dd-commercial-sheds,#dd-resources{left:auto;right:0}

/* ---------- mobile drawer ---------- */
.burger{display:none;padding:10px;color:#fff;background:none;border:0;cursor:pointer}
@media (max-width:1199px){.burger{display:block}}
.scrim{position:fixed;inset:0;background:rgba(14,29,56,.6);opacity:0;visibility:hidden;
  transition:opacity .25s,visibility .25s;z-index:80}
.scrim.is-open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(88vw,400px);background:var(--ink);
  color:#fff;z-index:90;transform:translateX(100%);transition:transform .32s var(--ease);
  overflow-y:auto;overscroll-behavior:contain}
.drawer.is-open{transform:none}
body.is-locked{overflow:hidden}
.drawer-link{display:block;padding:16px 0;font-family:var(--display);font-weight:700;
  font-size:1.375rem;border-bottom:1px solid rgba(255,255,255,.12)}

/* ---------- hero ---------- */
/* A column: the body grows and centres the copy in whatever space is left, and the trust
   strip is the panel's last row. In flow rather than absolute, so the strip can wrap to
   two rows and then one without the copy ever landing behind it. */
/* The notice and the nav are flow rows of the hero, not siblings above it and an
   absolute bar inside it. 100svh then covers all three, and the body takes whatever is
   left. Before this the notice sat outside, so notice + hero came to 756px in a 700px
   window and the strip at the hero's base fell straight off the fold. A fixed offset
   would not have fixed it either: the notice is 56px at 1024 and 120px at 768. */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  padding:0;overflow:hidden;background:var(--ink);color:#fff}
.hero-body{position:relative;z-index:10;flex:1 0 auto;display:flex;flex-direction:column;
  width:100%;padding:70px 3% 0}
/* Four frames stacked in one box, all but the live one at zero opacity, so the fade out
   and the fade in are the same transition and there is never a gap to the ink behind. */
/* the stage is what drifts; the frames inside it keep their own cross-fade */
.hero-stage{position:absolute;inset:0;z-index:0;overflow:hidden;
  transform:scale(1.16);will-change:transform}
@media (prefers-reduced-motion:reduce){.hero-stage{transform:none;will-change:auto}}
/* visibility as well as opacity, delayed out by the length of the fade. A frame at zero
   opacity is still in the stage's composited layer, so all four 1900px images were being
   re-composited on every frame of the parallax when only one of them could be seen. The
   delay is what keeps the cross-fade: the incoming frame becomes visible at once, the
   outgoing one only after its 1.4s is up. */
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;visibility:hidden;
  transition:opacity 1.4s var(--ease),visibility 0s linear 1.4s}
.hero-media.is-on{opacity:1;visibility:visible;
  transition:opacity 1.4s var(--ease),visibility 0s linear 0s}
/* with the script off, or under reduced motion, the first frame is the hero */
html:not([data-hero-js]) .hero-media:first-child,
.hero-media:only-child{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){
  .hero-media{transition:none}
  .hero-media:first-child{opacity:1;visibility:visible}
}
/* two layers: a short one that guarantees the nav, and the template's long fade to solid.
   stops are set from where the text actually sits, measured against a white photo pixel. */
/* Three layers now, not two, and the third is what lets the other two come down.

   A flat wash heavy enough for the lede over the brightest frame darkens the whole
   photograph to get there, including the two thirds of it with nothing on top. So the
   weight moved to where the words are: a left-to-right wash behind the copy column, and a
   much lighter vertical pair over everything else. The right side of every frame is now
   close to the photograph as shot.

   The third layer is the one that closes the hero into the solid ink of the section below.
   Its stops were pushed down (.20 at 30% became .10 at 46%, .72 at 68% became .52 at 84%),
   so the fade happens in the bottom sixth rather than across the lower half and the
   photograph stays a photograph for longer.

   Every stop was set by sampling the rendered pixels behind the heading and lede on all
   four frames with the glyphs hidden, not by eye. See the README for the numbers. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(14,29,56,.66) 0%,rgba(14,29,56,.58) 34%,rgba(14,29,56,.12) 68%,rgba(14,29,56,0) 82%),
    linear-gradient(180deg,rgba(14,29,56,.56) 0%,rgba(14,29,56,.22) 18%,rgba(14,29,56,0) 30%),
    linear-gradient(180deg,rgba(14,29,56,.07) 0%,rgba(14,29,56,.22) 46%,rgba(14,29,56,.56) 84%,#0E1D38 100%);
}
/* stacked and centred below 768, so the copy is no longer in a left column */
@media (max-width:767px){
  .hero::after{
    background:
      linear-gradient(180deg,rgba(14,29,56,.66) 0%,rgba(14,29,56,.30) 18%,rgba(14,29,56,.20) 30%),
      linear-gradient(180deg,rgba(14,29,56,.30) 0%,rgba(14,29,56,.52) 30%,rgba(14,29,56,.84) 68%,#0E1D38 100%);
  }
}
/* grows to take the space the strip does not, and centres the copy inside it */
/* grows to take the space the strip does not, and centres the copy inside it */
.hero-content{flex:1 1 auto;display:flex;align-items:center;
  width:100%;max-width:var(--shell);margin-inline:auto}
.hero-inner{max-width:680px}
/* none, not simply dropping the declaration: .lede's own 490px is narrower than the 34rem
   this was overriding, so removing the line would have made the hero lede shorter rather
   than longer. It now runs to .hero-inner's 680px. */
.hero-inner .lede{color:#fff;font-size:1.0625rem;max-width:none}
/* full height at every width. min-height, not height, so copy taller than the viewport
   still grows the panel rather than being clipped */
@media (max-width:991px){.hero-body{padding-top:56px}}

@media (max-width:767px){
  .hero{text-align:center}
  .hero-body{padding:44px 20px 0}
  .hero-inner{max-width:none;margin-inline:auto}
  .hero-inner .lede{margin-inline:auto}
  .btn-row{justify-content:center}
}

/* ---------- featured strip under the hero ---------- */
.featured{background:var(--ink);color:#fff;border-bottom:1px solid rgba(255,255,255,.09);
  padding:18px 5%;display:flex;align-items:center;justify-content:center;min-height:120px}
.featured-inner{width:100%;max-width:var(--shell);margin-inline:auto;display:flex;
  align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.featured-left{display:flex;align-items:center;gap:0;min-width:0}
.featured-thumb{width:85px;height:64px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.featured-divider{width:1px;height:35px;background:rgba(255,255,255,.18);margin:0 25px;flex:0 0 auto}
.featured-label{font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ice);margin-bottom:5px}
.featured-title{font-family:var(--body);font-size:.9375rem;font-weight:500;color:#fff;line-height:1.4}
@media (max-width:767px){
  .featured{padding:28px 20px}
  .featured-divider{margin:0 16px}
}

/* ---------- service cards: photo over a white card with a corner arrow tab ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  max-width:1440px;margin-inline:auto}
@media (max-width:991px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-3,.grid-2{grid-template-columns:minmax(0,1fr)}}

.scard{position:relative;display:flex;flex-direction:column;height:100%;background:#fff;
  color:var(--ink);--dim:var(--steel);--brow:var(--red);overflow:hidden;transition:transform .3s var(--ease)}
.scard:hover{transform:translateY(-4px)}
.scard-media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--concrete)}
.scard-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.scard:hover .scard-media img{transform:scale(1.04)}
.scard-body{padding:45px 45px 72px 35px;flex:1 1 auto}
.scard-tab{position:absolute;right:0;bottom:0;width:80px;height:55px;background:var(--red);
  color:#fff;border-top-left-radius:25px;display:flex;align-items:center;justify-content:center;
  transition:width .3s var(--ease),background-color .2s}
.scard:hover .scard-tab{width:96px;background:var(--red-dark)}
.scard-meta{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel);margin-bottom:12px}
@media (max-width:767px){.scard-body{padding:32px 28px 72px 28px}}

/* ---------- feature grid: accent mark, all text on one left edge ---------- */
.feature{padding:25px 25px 25px 0}
.feature-icon{display:block;width:64px;height:64px;color:var(--icon);
  margin-bottom:20px}                                     /* 2.97:1: decorative, see below */
.feature-icon svg{stroke-width:.85}                    /* 2.27px at 64, matching .fx-ico */
.feature .body-dim{margin-top:10px}
.feature-icon svg,.factor-icon svg{width:100%;height:100%}
@media (max-width:767px){
  .feature{padding:18px 0}
  .feature-icon{width:56px;height:56px;margin-bottom:16px}
}

/* ---------- the accent block that rises into the section above ---------- */
.cta-wrap{background:#fff;padding:0 5%;display:flex;justify-content:center}
.cta-block{position:relative;z-index:20;top:-78px;width:100%;max-width:var(--shell);
  background:var(--red);color:#fff;padding:105px 55px;display:flex;justify-content:center;
  overflow:hidden}
.cta-inner{position:relative;z-index:15;text-align:center;max-width:760px}
.cta-inner .h-sec{max-width:none;color:#fff}
.cta-inner .lede{color:#fff;max-width:600px;margin-inline:auto}
/* The qualifier on the date. White on --red is 5.88:1, so the small print holds its ratio
   at full strength rather than being dimmed into the band; it is small, which is the point,
   not faint. The marker is aria-hidden in both places: a screen reader would otherwise read
   "23 October star", and the note reads as a sentence on its own. */
.cta-star{font-size:.7em;vertical-align:.45em;margin-left:1px}
.cta-note{margin-top:26px;font-size:.75rem;line-height:1.5;color:#fff}   /* 5.88:1 */
.cta-note span{margin-right:2px}
@media (max-width:767px){
  .cta-block{padding:64px 24px;top:-56px}
}

/* ---------- alternating photo and copy rows ---------- */
.row-split{display:flex;align-items:center;gap:0}
.row-split.is-reversed{flex-direction:row-reverse}
.row-split+.row-split{margin-top:100px}
.row-media{width:50%;min-height:350px;display:flex;align-items:center;justify-content:center;
  padding:35px 55px;position:relative}
/* the template's offset outline frame behind the photo */
.row-media::before{content:"";position:absolute;z-index:0;top:18px;left:18px;right:72px;bottom:72px;
  border:1px solid var(--frame)}
.row-split.is-reversed .row-media::before{left:72px;right:18px}
.row-media img{position:relative;z-index:1;width:100%;height:auto;box-shadow:var(--lift);
  aspect-ratio:4/3;object-fit:cover;object-position:center}
.on-dark .row-media img{box-shadow:none}
.row-copy{width:50%;min-height:350px;display:flex;flex-direction:column;justify-content:center;
  padding:25px 25px 25px 55px}
.row-split.is-reversed .row-copy{padding:25px 55px 25px 25px}
.row-copy .lede{max-width:520px}
.row-copy .lede+.lede{margin-top:20px}
/* the questions row carries a list and two paragraphs, so it needs more room than a
   plain copy block */
.row-roomy .row-copy{padding-top:48px;padding-bottom:48px}
.row-roomy .row-copy .h-row{margin-bottom:28px}
.row-roomy .btn-row{margin-top:44px}
@media (max-width:991px){.row-roomy .row-copy{padding-top:8px;padding-bottom:0}}
@media (max-width:991px){
  .row-split,.row-split.is-reversed{flex-direction:column}
  .row-media,.row-copy{width:100%;min-height:0}
  .row-media{padding:8px;margin-bottom:35px}
  .row-media::before{right:24px;bottom:24px}
  .row-split.is-reversed .row-media::before{left:18px;right:24px}
  .row-copy,.row-split.is-reversed .row-copy{padding:0}
  .row-split+.row-split{margin-top:72px}
}

/* ---------- testimonial cards ---------- */
.quote-card{background:#fff;color:var(--ink);--dim:var(--steel);--brow:var(--red);padding:40px 36px;box-shadow:var(--lift);display:flex;
  flex-direction:column;gap:28px;height:100%}
.quote-card blockquote{margin:0;font-size:1.0625rem;line-height:1.65;color:var(--ink);
  max-width:60ch}   /* the card grew with the container; the measure should not */
.quote-mark{width:34px;height:34px;color:var(--red)}
.who{display:flex;align-items:center;gap:14px;margin-top:auto}
/* real named reviewers: a monogram, never a stock portrait standing in for a person */
.mono-avatar{flex:0 0 auto;width:46px;height:46px;border-radius:100px;background:var(--red);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:.9375rem;letter-spacing:.02em}
.who-name{font-family:var(--display);font-weight:700;font-size:1rem}
.who-meta{font-size:.8125rem;color:var(--steel)}

/* ---------- review carousel ---------- */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:45px}
.rail-head .title-block{margin-bottom:0}
.rail-nav{display:flex;gap:10px;flex:0 0 auto}
.rail-btn{width:52px;height:52px;border-radius:100px;border:1px solid var(--hairline);
  background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,opacity .2s}
.rail-btn:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.rail-btn:disabled{cursor:default}
/* a scrolling region needs a name and a tab stop, or the keyboard cannot reach it */
/* the track basis must be a real width: with a minmax whose min is 0 the columns
   shrink to fit the container and the rail never overflows, so it never scrolls */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc(100% - 4px);gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
@media (prefers-reduced-motion:reduce){.rail{scroll-behavior:auto}}
@media (min-width:768px){.rail{grid-auto-columns:calc(50% - 10px)}}
@media (min-width:1280px){.rail{grid-auto-columns:calc(33.333% - 13.4px)}}

/* ---------- FAQ ---------- */
.faq-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
@media (max-width:991px){.faq-split{grid-template-columns:minmax(0,1fr);gap:40px}}
.faq-item{color:var(--ink);--dim:var(--steel);border-top:1px solid rgba(14,29,56,.13)}
.faq-item:last-child{border-bottom:1px solid rgba(14,29,56,.13)}
.faq-q{width:100%;background:none;border:0;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:20px;text-align:left;padding:28px 0;
  font-family:var(--display);font-weight:700;font-size:1.125rem;color:var(--ink);line-height:1.35}
.faq-sign{flex:0 0 auto;width:34px;height:34px;border-radius:100px;background:rgba(200,16,46,.1);
  color:var(--red);display:flex;align-items:center;justify-content:center;transition:background-color .2s,color .2s}
.faq-q[aria-expanded="true"] .faq-sign{background:var(--red);color:#fff}
.faq-sign svg{transition:transform .28s var(--ease)}
.faq-q[aria-expanded="true"] .faq-sign svg{transform:rotate(45deg)}
/* grid-template-rows animates to content height; the padding has to live one level
   deeper or the clipped child never collapses to zero */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.faq-a.is-open{grid-template-rows:1fr}
.faq-a>.faq-clip{overflow:hidden;min-height:0}
/* The 62ch cap was set when every answer was one line. The real answers run to three or
   four paragraphs and a list, and at 62ch they were setting narrower than the column that
   holds them, which left a band of empty space down the right of a tall block. 82ch fills
   the column at 1440 and still holds a readable line. The 54px of right padding stays:
   that is the clearance for the plus and minus marker. */
.faq-body{padding:0 54px 30px 0;color:var(--steel);max-width:82ch}
/* The answers run to several paragraphs now, and one of them carries a list. Both were
   unstyled before, because the placeholder answers were a single paragraph each. */
.faq-body p+p,.faq-body ul+p{margin-top:14px}
.faq-body ul{list-style:none;margin:12px 0 0;padding:0}
.faq-body li{position:relative;padding-left:20px;margin-top:8px}
.faq-body li::before{content:"";position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--red)}   /* 5.89:1 on concrete */
.faq-body b{color:var(--ink);font-weight:600}
.faq-tag{display:inline-block;background:var(--concrete);color:var(--steel);border-radius:100px;
  padding:5px 12px;font-size:.6875rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:12px}

/* ---------- news cards ---------- */
.post{display:flex;flex-direction:column;height:100%;overflow:hidden;
  transition:transform .3s var(--ease)}
.post:hover{transform:translateY(-4px)}
.post-media{aspect-ratio:16/11;overflow:hidden;background:var(--slab)}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.post:hover .post-media img{transform:scale(1.04)}
.post-body{background:var(--slab);--dim:rgba(255,255,255,.75);padding:26px 26px 28px;flex:1 1 auto;display:flex;
  flex-direction:column;gap:15px}
.post-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chip{min-height:38px;display:inline-flex;align-items:center;border-radius:100px;padding:8px 16px;
  background:rgba(200,16,46,.18);color:var(--ice);font-size:.875rem;font-weight:600}
.post-date{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.65)}
.post-body .body-dim{flex:1 1 auto}
.post-more{display:inline-flex;align-items:center;gap:8px;color:var(--ice);font-size:.875rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:auto}
.post-more svg{color:var(--ember)}
.post:hover .post-more,.post:hover .post-more svg{color:#fff}

/* ---------- the accent band of display figures ---------- */
.band{position:relative;overflow:hidden;background:var(--red);color:#fff;
  min-height:420px;display:flex;align-items:center;justify-content:center;padding:var(--pad-md) 3%}
/* equal columns, not flex cells sized by their own digits: "5.0" and "100%" are
   different widths, and flowing them left to right made the dividers arrhythmic */
.chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:40px}
.chain-item{position:relative;padding-left:44px}
.chain-item::before{content:"";position:absolute;left:0;top:.2em;bottom:.35rem;width:1px;
  background:rgba(255,255,255,.35)}
.chain-item:first-child{padding-left:0}
.chain-item:first-child::before{content:none}
.chain-label{font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  margin-top:10px;color:#fff}
@media (max-width:991px){
  .band{min-height:0}
  .chain{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 0}
  .chain-item{padding-left:32px}
  .chain-item:nth-child(odd){padding-left:0}
  .chain-item:nth-child(odd)::before{content:none}
}

/* ---------- footer ---------- */
.footer{background:#fff;padding:var(--pad-lg) 5% 20px}
@media (max-width:767px){.footer{padding:var(--pad-sm) 20px 20px}}
.foot-flex{width:100%;max-width:var(--shell);margin-inline:auto;display:flex;flex-wrap:wrap;gap:32px 0}
.foot-wide{width:40%}
.foot-col{width:20%;display:flex;flex-direction:column;align-items:flex-start;padding-right:20px}
@media (max-width:991px){.foot-wide{width:50%}.foot-col{width:25%}}
/* Three stacked columns made the footer 2196px on a phone. Two up halves the list, but only
   down to 380: measured, a 50% column holds every link on one line at 390 and starts
   wrapping "Download catalogue" at 375 and "About Global Sheds" at 360. A wrapped link
   reads worse than a longer list, so below 380 it goes back to one column. */
@media (max-width:767px){
  .foot-wide{width:100%}
  .foot-col{width:50%;padding-right:12px}
}
@media (max-width:379px){.foot-col{width:100%;padding-right:0}}
.foot-logo{width:130px;margin-bottom:25px}
.foot-text{max-width:340px;color:var(--steel);font-size:1.0625rem;line-height:1.5;margin-bottom:22px}
.foot-link-row{display:flex;align-items:center;gap:10px;color:var(--red);font-size:1rem;
  padding:7px 0;transition:opacity .2s}
.foot-link-row:hover{opacity:.7}
.foot-title{font-family:var(--display);font-weight:600;font-size:1.125rem;color:var(--ink);
  padding:12px 0;margin-bottom:3px}
.foot-link{color:var(--steel);font-size:1rem;font-weight:500;padding:7px 0;transition:color .2s}
.foot-link:hover{color:var(--red)}
/* ---------- footer: social, newsletter, catalogue ----------
   The social marks are links, not decoration, so they are sized as touch targets
   (44px) and carry their own accessible names. --steel measures 5.78:1 on white,
   comfortably past the 3:1 a graphical object needs.

   Input borders are rgba(14,29,56,.5), which composites to 3.30:1 on white. The
   --hairline used elsewhere is 1.3:1 and fine for a rule between paragraphs, but a
   field boundary is a control: it has to be visible on its own.
   ------------------------------------------------------------ */
.foot-social{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:14px 0 0;padding:0}
.soc{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  color:var(--steel);transition:color .2s}      /* 5.78:1 on white */
.soc:hover{color:var(--red)}

.foot-band{width:100%;max-width:var(--shell);margin:64px auto 0;padding-top:52px;
  border-top:1px solid var(--hairline);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:56px}
.foot-band .foot-title{padding-top:0;margin-bottom:8px}
.nl-note{color:var(--steel);font-size:.9375rem;line-height:1.6;max-width:46ch;margin-bottom:22px}

.nl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;max-width:620px}
.nl-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.nl-wide{grid-column:1/-1}
.nl-field label{font-size:.875rem;font-weight:600;color:var(--ink)}
.nl-field input{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  padding:13px 15px;border:1px solid rgba(14,29,56,.5);border-radius:2px;
  transition:border-color .2s}
.nl-field input::placeholder{color:var(--steel)}        /* 5.78:1 on white */
.nl-field input:hover{border-color:var(--ink)}
.nl-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px;margin-top:24px}
.nl-status{font-size:.9375rem;color:var(--steel);max-width:36ch}
.nl-status:empty{display:none}

.qr-row{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap}
.qr-row img{width:150px;height:150px;flex:0 0 auto;
  border:1px solid var(--hairline);padding:8px;background:#fff}
@media (max-width:991px){
  .foot-band{grid-template-columns:minmax(0,1fr);gap:48px;margin-top:52px;padding-top:44px}
}
@media (max-width:600px){
  .nl-grid{grid-template-columns:minmax(0,1fr)}
  .nl-field:first-child{grid-column:1/-1}
}

.legal{max-width:var(--shell);margin:50px auto 0;padding:25px 0;display:flex;flex-wrap:wrap;
  gap:16px;align-items:center;justify-content:space-between;border-top:1px solid var(--hairline)}
.legal-text{color:var(--steel);font-size:.9375rem}

.to-top{position:fixed;right:25px;bottom:35px;z-index:70;width:48px;height:48px;border:0;
  border-radius:100px;background:var(--red);color:#fff;display:flex;align-items:center;
  justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s,visibility .25s,transform .25s var(--ease),background-color .2s}
.to-top.is-shown{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--red-dark)}
@media (max-width:767px){.to-top{right:16px;bottom:16px}}

/* ---------- one authored entrance, from an already-visible default ---------- */
.js-reveal .reveal{opacity:0;transform:translateY(22px)}
.js-reveal .reveal.is-in{opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-reveal .reveal.is-in[data-delay="1"]{transition-delay:.09s}
.js-reveal .reveal.is-in[data-delay="2"]{transition-delay:.18s}
.js-reveal .reveal.is-in[data-delay="3"]{transition-delay:.27s}
.js-reveal .reveal.is-in[data-delay="4"]{transition-delay:.36s}
.js-reveal .reveal.is-in[data-delay="5"]{transition-delay:.45s}
@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{opacity:1;transform:none}
}


/* ============================================================
   Homepage content pass. Components the client copy needed that
   the template had no equivalent for.
   ============================================================ */

/* ---------- hero: a two-sentence headline needs a smaller cap ---------- */
.h-hero-long{font-size:clamp(2.1rem,4vw,3.5rem);line-height:1.08;text-wrap:balance}
.h-hero-2{display:block;text-wrap:balance}
/* The first sentence became the eyebrow. It is a sentence rather than a label, so it keeps
   its full stop and drops the .eyebrow tracking a little: .214em is set for two or three
   words and pulls a nine-word line apart. */
.hero-brow{letter-spacing:.14em;margin-bottom:18px;max-width:34ch}
/* A percentage cap is a wide-screen concern. Unscoped it also applied at 320, where
   62% of the hero left 164px and clipped both buttons: this class sits after the
   mobile `.hero-inner` rule and was beating it at equal specificity. */
@media (min-width:1280px){.hero-inner-wide{max-width:min(62rem,62%)}}

/* ---------- a button that carries its own caption ---------- */
.cta-pair{display:flex;flex-wrap:wrap;gap:20px 32px;margin-top:36px}
.cta-one{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:20rem;min-width:0}
.btn-note{font-size:.65rem;line-height:1.5;color:rgba(255,255,255,.8)}   /* 11.05:1 on ink */
@media (max-width:767px){
  .cta-pair{flex-direction:column;align-items:center;gap:28px}
  .cta-one{align-items:center;text-align:center;max-width:26rem}
  .cta-one .btn{width:100%}
}

/* ---------- the questions we ask ---------- */
.qlist{margin:36px 0;display:grid;gap:20px;max-width:560px}
.qlist li{position:relative;padding-left:34px;color:var(--dim);line-height:1.55}
.qlist li::before{content:"";position:absolute;left:2px;top:.52em;width:7px;height:7px;
  background:var(--ember);border-radius:2px}
.on-light .qlist li::before,.quote-card .qlist li::before{background:var(--red)}

/* ---------- pricing tiers: the service card without its arrow tab ---------- */
/* linked cards are <a> and carry the tab; these are <article> and don't */
article.scard .scard-body{padding-bottom:45px}
article.scard:hover{transform:none}
a.scard:hover{transform:translateY(-4px)}
.tier-label{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin-bottom:10px}
.tier-price{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--ink);
  margin-bottom:6px;letter-spacing:-.01em}
.tier-size{font-size:.9375rem;color:var(--steel);padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--hairline)}
.small-print{max-width:70ch;margin-top:40px;font-size:.9375rem;line-height:1.6;color:var(--dim)}

/* ---------- what moves a price: five across, then three, then two ---------- */
.grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:36px 28px;
  grid-template-rows:auto auto auto}
@media (max-width:1100px){.grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:430px){.grid-5{grid-template-columns:minmax(0,1fr)}}
.factor{min-width:0}
@supports (grid-template-rows:subgrid){
  .factor{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:0}
}
.factor-icon{display:block;width:36px;height:36px;color:var(--brow);margin-bottom:18px}
/* "Insulation and motorised doors" runs to two lines where its neighbours run to one.
   Subgrid aligns icon, title and body across all five cells whatever each one wraps to,
   which a min-height floor cannot: it leaves a gap as soon as the titles fit on one line. */
.factor-title{font-family:var(--display);font-weight:700;font-size:1.0625rem;line-height:1.3;
  margin-bottom:8px}
.factor .body-dim{font-size:.9375rem;line-height:1.55}

/* ---------- numbered steps. The sequence is the information here: the
     CouncilSafe windows run 30 days then six months, and the build steps
     gate each other, so the numerals stay. ---------- */
.steps{display:grid;gap:0;counter-reset:none;padding:0;margin:0;list-style:none}
.steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:991px){
  .steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps-3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){.steps-4{grid-template-columns:minmax(0,1fr)}}
.step{position:relative;min-width:0;padding:34px 28px 0 0}
/* a hairline runs the row and the numeral sits on it, so the order reads as a track */
.steps-4 .step::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:rgba(255,255,255,.18)}
.steps-4 .step:last-child::before{right:28px}
.step-n{display:block;font-family:var(--display);font-weight:700;font-size:2.5rem;line-height:1;
  color:var(--ember);margin-bottom:16px}
.step-body{color:var(--dim);line-height:1.55}
@media (max-width:991px){.step{padding-right:20px}}

/* CouncilSafe's three steps sit on light, as cards */
.step-card{background:#fff;color:var(--ink);--dim:var(--steel);box-shadow:var(--lift);
  padding:32px 30px 34px}
.step-card .step-n{color:var(--red)}

/* ---------- a heading left, its body right ---------- */
.split-intro{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;
  align-items:start}
.split-intro .lede{max-width:64ch}

/* a lead-in line above a button. Uncapped it ran to 105 characters on one line
   once the container widened. */
.cta-lead{max-width:56ch;margin-inline:auto;text-align:center}
@media (max-width:991px){.split-intro{grid-template-columns:minmax(0,1fr);gap:28px}}

/* ---------- the closing accent band ---------- */
.band-close .h-sec{max-width:860px}
.band-close .lede{max-width:620px;margin-top:20px}
/* copy left, photo right, using the offset outline frame from the questions row */
.band-split{display:flex;align-items:center;gap:64px}
.band-split>*{min-width:0}
.band-copy{flex:1 1 52%}
.band-copy .h-sec{max-width:none}
.band-media{flex:0 1 44%;position:relative;padding:28px 28px 28px 0}
.band-media::before{content:"";position:absolute;z-index:0;top:0;left:0;right:56px;bottom:56px;
  border:1px solid rgba(255,255,255,.45)}
.band-media img{position:relative;z-index:1;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;object-position:center}
@media (max-width:991px){
  .band-split{flex-direction:column;align-items:stretch;gap:40px}
  .band-copy,.band-media{flex:1 1 auto}
  .band-media{padding:16px 16px 16px 0}
  .band-media::before{right:32px;bottom:32px}
}

/* ============================================================
   Section textures
   Supplied artwork, all SVG: a wireframe of a shed corner, and a soft diagonal wash
   for dark and light grounds.

   The wireframe is white on transparent, so over a dark ground it lifts local luminance
   wherever a line falls. It is capped at .16, because it sits behind live copy: seven
   text elements in the "questions we ask" column intersect it. Worst case is a solid
   white line directly under that text, over the wedge peak, which measures 5.08:1. At
   .18 an ice-blue eyebrow would drop to 4.43:1.

   Everything here sits at z-index 0 or 1, below .shell at 10.

   tex-frame-01.svg is the supplied export run through SVGO at precision 1: 246KB to
   39KB, 15.6KB over the wire, and indistinguishable from the source. Precision 0 reaches
   16KB but visibly coarsens the eave detail.
   ============================================================ */
.tex{overflow:hidden}
.tex-frame-01::after,.tex-angle-dark::after{
  content:"";position:absolute;pointer-events:none;z-index:1;
  background-repeat:no-repeat;background-size:100% auto;
}
@media (prefers-reduced-transparency:reduce){
  .tex-frame-01::after,.tex-angle-dark::after,.tex-angle-left::before,.tex-angle-light::after{display:none}
}

/* the drawing has an empty top band and an empty left third, with the structure
   weighted to the centre and right, so it anchors bottom right and falls away
   toward the content */
.tex-frame-01::after{
  background-image:url(../img/tex-frame-01.svg);
  /* a percentage of the section, so it grows with the viewport. The old 1300px cap
     stopped it dead at about a 1530px window and it read small on anything wider.
     The cap that remains only bites above roughly 2560px. */
  right:0;bottom:0;width:min(110%,2800px);aspect-ratio:1873/1328;opacity:.2;
  /* the drift, driven from JS through --tex-y. A pseudo-element cannot take an inline
     style, so the section holds the value and the drawing reads it. 0 until the script
     sets it, so with JS off it simply sits where it always did. */
  transform:translate3d(0,var(--tex-y,0px),0);will-change:transform;
  -webkit-mask-image:linear-gradient(295deg,#000 30%,rgba(0,0,0,.4) 66%,transparent 92%);
  mask-image:linear-gradient(295deg,#000 30%,rgba(0,0,0,.4) 66%,transparent 92%);
}

/* The washes carry their own opacity in the file: .08 of white, and #EBF0FA at .5.
   Both are portrait (941x1455 and 1129x1455) and drawn to a fixed height, so they are
   sized by height and capped: stretching one to an 1850px section flattened the
   diagonal into a smear. `auto 100%` crops from the far edge instead of distorting. */
.tex-angle-dark::after,.tex-angle-light::after{
  top:0;height:100%;max-height:1100px;background-size:auto 100%;
}
.tex-angle-dark::after{
  background-image:url(../img/bg-angle-dark.svg);
  right:0;width:min(54%,780px);background-position:top right;
}
.tex-angle-light::after{
  content:"";position:absolute;pointer-events:none;z-index:1;background-repeat:no-repeat;
  background-image:url(../img/bg-angle-light.svg);
  left:0;width:min(62%,920px);background-position:top left;
}
/* the wash on ::before, for a section that would otherwise need two pseudo-elements.
   Such a section drops .wedge: its radial and this wash do the same job. */
.tex-angle-left::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  left:0;top:0;height:100%;max-height:1100px;width:min(56%,800px);
  background-image:url(../img/bg-angle-dark.svg);
  background-repeat:no-repeat;background-position:top left;background-size:auto 100%;
}
@media (max-width:767px){
  .tex-frame-01::after{width:86%;opacity:.22}
}


/* ---------- hero trust strip ----------
   The last row of .hero-body: the copy grows and centres in whatever space is left, and
   the strip sits at the base of the body. Not the base of the hero panel, which would
   put it past the body's own bottom padding, and not under the caption, which would let
   it drift up the panel with the copy.

   No background, and monochrome: the strip carries no
   accent at all, so it supports the fold rather than competing with the headline and the
   red button. Weight and size do the hierarchy instead of colour.

   It sits on the hero ground, which at the base of the panel is effectively solid ink
   (scrim .986 at the strip's centre), so the values below are against #0E1D38:
   lead .92 is 14.3:1 and tail .68 is 8.3:1. Quiet, but plainly readable.

   Two supplied assets carry colour of their own and are filtered rather than replaced:
   the Google mark and its gold stars desaturate and lift, and the Australia mark is navy
   on transparent, which would vanish here, so it inverts to a light silhouette. */
/* The rule is the only thing the strip draws. .14 white over ink reads as a hairline
   without becoming a border around a box. */
.trust-strip{flex:0 0 auto;width:100%;max-width:var(--shell);margin:54px auto 0;
  border-top:1px solid rgba(255,255,255,.14)}
/* Scaled down a step. Every mark and figure came back about 15%, and the row's own
   padding with them, so the strip supports the fold rather than taking a band of it.
   The type stays where it is: it was already the quietest thing in the hero and taking
   .875rem any lower would have made the claims hard to read rather than quiet. */
.trust-inner{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;
  gap:20px 44px;padding:36px 0}
.trust-item{display:flex;align-items:center;gap:11px;min-width:0;text-align:left}
.trust-item p{font-size:.875rem;line-height:1.4;color:rgba(255,255,255,.68)}
.trust-item b{color:rgba(255,255,255,.92);font-weight:600}
.trust-fig{flex:0 0 auto;font-family:var(--display);font-weight:700;font-size:1.5rem;
  line-height:1;color:rgba(255,255,255,.92);letter-spacing:-.02em}
.trust-google{flex:0 0 auto;width:98px;height:auto;filter:grayscale(1) brightness(1.75)}
.trust-map{flex:0 0 auto;width:34px;height:auto;filter:invert(1) grayscale(1);opacity:.85}
.trust-shield{flex:0 0 auto;width:30px;height:30px;color:rgba(255,255,255,.85)}
.trust-shield svg{width:100%;height:100%}
/* the four items measure about 1172px plus gaps, so the row holds to roughly 1290.
   Tighten the gap first, then go to a 50% basis: left to itself flex wraps 3 + 1,
   which reads as a mistake where 2 + 2 reads as a grid. */
@media (max-width:1500px){
  .trust-strip{margin-top:44px}
  .trust-inner{gap:18px 30px;padding:32px 0}
}
@media (max-width:1419px){
  .trust-inner{gap:26px 32px}
  /* Four items measure about 1172px plus gaps, so one row needs roughly 1274 and the
     shell only clears that above about 1355. Below 1420 they go two up rather than
     wrapping 3 + 1, which reads as a mistake. The basis also has to clear the gap with
     room: at 50% - 16px two items plus the 32px gap came to exactly the container
     width, and sub-pixel rounding dropped every one onto its own line. */
  .trust-item{flex:0 0 calc(50% - 26px)}
}
@media (max-width:767px){
  .trust-strip{margin-top:40px}
  .trust-inner{gap:20px;padding:34px 0}
  .trust-item{flex:0 0 100%;text-align:left}
}

/* Short viewports: the hero's top padding, the copy block and the strip together came to
   743px in a 700px window, so the hero grew past 100vh and the strip fell below the fold.
   It was never clipped by CSS, it was simply off screen. These tiers pull the vertical
   rhythm in so the whole fold, strip included, fits on a laptop.
   Height queries, not width: a 1440x700 window is the case that broke. */
@media (max-height:880px) and (min-width:768px){
  .hero-body{padding-top:48px}
  .trust-strip{margin-top:34px}
  .trust-inner{padding:30px 0}
  .cta-pair{margin-top:28px}
}
@media (max-height:720px) and (min-width:768px){
  .hero-body{padding-top:30px}
  .h-hero-long{font-size:clamp(2rem,3.2vw,2.6rem)}
  .hero-inner .lede{margin-top:4px}
  .cta-pair{margin-top:20px;gap:14px 32px}
  .trust-strip{margin-top:20px}
  .trust-inner{padding:20px 0}
}

/* ============================================================
   The accreditation strip, lifted from the client's live homepage.
   The three marks are their own inline SVGs; the site colours them
   from its stylesheet, so on their own they render solid black. The
   fills written into the files are the computed values read back
   from globalsheds.com.au, not a guess at the brand colours.
   ============================================================ */
.strip-wrap{background:#fff;padding:20px 5% 90px;display:flex;justify-content:center}
.strip-wrap .badge-strip{width:100%;max-width:var(--shell);margin-top:0}
.badge-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:110px}
.badge-card{color:var(--ink);--dim:var(--steel);
  padding:8px 38px 0;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.badge-card img{width:104px;height:104px;margin-bottom:26px}
.badge-title{font-family:var(--body);font-size:.9375rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.35;margin-bottom:12px}
.badge-copy{font-size:.9375rem;line-height:1.6;color:var(--dim);max-width:34ch}
@media (max-width:767px){.strip-wrap{padding:10px 20px 64px}}
@media (max-width:991px){
  /* without card chrome the stacked items need real air between them */
  .badge-strip{grid-template-columns:1fr;gap:46px;margin-top:80px}
  .badge-card{padding:8px 20px 0}
  .badge-card img{width:88px;height:88px;margin-bottom:20px}
}

/* A phone number that carries its own icon. The underline moves onto the number,
   because text-decoration on a flex container runs under the icon too. */
.link-ico{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.link-ico svg{flex:0 0 auto}
.link-ico>span{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}

/* ---------- phone: targets and the smallest type ----------
   Nothing here failed WCAG 2.5.8, which asks for 24px, but a row of 40px targets on a
   touch screen is a miss rather than a pass. These are the ones the measurement found:
   the footer links and contact rows, the drawer's close button, the chat's replay, and
   the hero's phone link, which had no padding of its own at all.

   .btn-note is lifted off 10.4px as well. It holds its contrast comfortably, 13:1 and up
   over every hero frame, so this is about size and not ratio: two lines telling someone
   what happens after they tap are worth being able to read. */
/* Touch targets run to 1023, not 767. A tablet in portrait is 768 and is as much a touch
   device as a phone: at that width every one of these measured 34 to 42px. The type and
   layout rules below stay at 767, because those are about a narrow column rather than
   about fingers. */
@media (max-width:1023px){
  .foot-link,.foot-link-row{padding-top:11px;padding-bottom:11px}
  .foot-social{gap:2px}
  .hero-inner .link-ico,.btn-row .text-link,.qr-row .link-ico{min-height:44px;align-items:center}
  #drawer-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
  /* the drawer's phone link is carried on utility classes and had no height of its own */
  .drawer a[href^="tel:"]{display:flex;align-items:center;justify-content:center;min-height:44px}
}
@media (max-width:767px){
  /* The notes go. They are the one thing on the fold that is read least and costs most:
     two lines each under two buttons, on a screen where the fold is the whole argument.
     The copy they carry is said again in the sections below. */
  .hero .btn-note{display:none}
  /* .cta-pair centres its children, so each .cta-one shrank to its own content and the
     two buttons came out 350px and 261px. Stretching the wrappers is what matches them,
     not another width on the buttons, which were already 100% of a box that differed. */
  .cta-one{width:100%;gap:0}

  /* The accreditation marks go inline. Three stacked cards of a 88px mark above its text
     ran 779px; beside the text they fit the strip in a fraction of that. */
  /* Grid, not a flex row. The mark, the title and the copy are three siblings, so a row
     made all three into columns and "The colours of Australia" set four lines a word deep.
     The mark takes one column across both rows; the text stacks in the other. */
  .badge-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 18px;
    align-items:center;text-align:left;padding:0}
  .badge-card img{width:56px;height:56px;margin-bottom:0;grid-row:span 2;align-self:center}
  .badge-title{margin-bottom:4px;letter-spacing:.1em;font-size:.875rem}
  .badge-copy{font-size:.875rem;line-height:1.5;max-width:none}
  .badge-strip{gap:26px}

  /* the review cards, down a step */
  .quote-card{padding:26px 24px}
  .quote-card blockquote{font-size:1rem;line-height:1.6;margin-top:16px}
  .quote-mark{width:26px;height:26px}
  .who{gap:11px}
  .mono-avatar{width:38px;height:38px}

  /* the closing band: 100px of red above and below a block that is already full width */
  .band{padding:60px 20px;min-height:0}

  .btn-note{font-size:.8125rem}
}

/* ---------- phone: the stacked blocks ----------
   Every multi-column block becomes one column on a phone, and each was spaced for sitting
   beside its neighbours rather than under them. The gaps are what is cut here, not the
   content: nothing is hidden and nothing is shortened. */
@media (max-width:767px){
  .grid-3,.grid-2{gap:0}
  .feature{padding:22px 0}
  .feature+.feature{border-top:1px solid rgba(255,255,255,.12)}
  .feature-icon{width:44px;height:44px;margin-bottom:13px}
  .feature .h-feat{margin-bottom:8px}
  .title-block{margin-bottom:30px}
  .row-split+.row-split,.row-split.has-chat{margin-top:70px!important}
}