/* =============================================================
   Mulish — self-hosted (SIL Open Font License 1.1)

   It came from Google Fonts until it was measured. The stylesheet was
   render-blocking on a third origin, and the fallback stack is 4-9 per cent
   narrower than Mulish, so when the font finally arrived the hero title
   re-wrapped from three lines to four and pushed the whole page down 54px.
   That one reflow was a 0.355 cumulative layout shift — most of the mobile
   performance score, on every page.

   Self-hosted, the files ride the site's own `expires 1y, immutable` and are
   preloaded from the document head, so they are in hand before the first
   paint. `font-display:optional` is the belt to those braces: if a file
   somehow is not ready in time the visitor keeps the fallback for that page
   view instead of watching the page jump.

   Satoshi stays on Fontshare — it sets the wordmark and a few headings, none
   of which resize the page — but its stylesheet no longer blocks rendering.

   Google serves Mulish as one variable font per subset and points all four
   weight declarations at it, so this is two files rather than eight: the
   weight range below instances 400-700 out of the same bytes. The
   unicode-range lines are theirs, so a page needing latin-ext still gets it
   and a page that does not never asks.
   ============================================================= */
@font-face{
  font-family:"Mulish";
  font-style:normal;
  font-weight:400 700;
  font-display:optional;
  src:url(../fonts/mulish-latin.woff2?v=14cc0eabad) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Mulish";
  font-style:normal;
  font-weight:400 700;
  font-display:optional;
  src:url(../fonts/mulish-latin-ext.woff2?v=80941a125f) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =============================================================
   Roofing — landing page
   Rebuilt from the Figma source, Section 8
   Frame 2688:302 "Roofing" (1396 × 6735)
   ============================================================= */

:root{
  /* --- Figma variables --- */
  --black:#202020;
  --white:#ffffff;

  /* --- Palette --- */
  --orange:#c95e0c;
  --grey:#717171;
  --card:#f9f9f9;
  /* Figma draws these at 0.3px / 30% — at 1px they must be lightened to match */
  --hairline:rgba(32,32,32,.078);   /* card + tab-bar borders   → #e8e8e8 on #f9f9f9 */
  --rule:rgba(32,32,32,.129);       /* separators inside a card → #dddddd on #f9f9f9 */
  --footer-ink:#606060;

  /* --- Type --- */
  --f-mulish:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-satoshi:"Satoshi","Mulish",-apple-system,BlinkMacSystemFont,sans-serif;

  /* --- Frame geometry --- */
  --frame:1396px;
  --gutter:80px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:var(--f-mulish);
  font-size:18px;
  font-weight:500;
  line-height:normal;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
img{display:block;max-width:100%}
.hero__sky img,.hero__roof img,.cta__bg img,
.testimonials__media img,.case__shot img{max-width:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
em{font-style:normal}

::selection{background:var(--orange);color:#fff}

.wrap{
  width:100%;
  max-width:var(--frame);
  margin:0 auto;
  padding:0 var(--gutter);
}

.center{text-align:center}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 38px;
  border-radius:65px;
  font-family:var(--f-mulish);
  font-size:14px;
  font-weight:600;
  line-height:normal;
  white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease);
}
.btn--primary{background:var(--orange);color:var(--white);box-shadow:0 0 0 0 rgba(201,94,12,.35)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(201,94,12,.65)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{background:var(--white);color:var(--black);box-shadow:0 1px 3px rgba(32,32,32,.12)}
.btn--ghost:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(32,32,32,.4)}
.btn:focus-visible,.tab:focus-visible,.arrow:focus-visible,a:focus-visible{
  outline:2px solid var(--orange);outline-offset:3px;border-radius:4px;
}

/* ---------------- Shared headings ---------------- */
.h2{
  font-family:var(--f-mulish);
  font-size:42px;
  font-weight:600;
  line-height:1.26;
  color:var(--black);
}
.h2 em{color:var(--orange)}
/* stops a lone word being orphaned on its own line when the heading wraps */
.nowrap{white-space:nowrap}
.h2--center{text-align:center;margin-inline:auto}

.eyebrow{
  font-size:18px;
  font-weight:500;
  opacity:.7;
  text-align:center;
}

/* =============================================================
   HERO
   ============================================================= */
.hero{
  position:relative;
  height:800px;
  overflow:hidden;
  background:var(--white);
}
.hero__bg{position:absolute;inset:0}

/* sky plate — same photo, 30% opacity, cropped to the sky */
.hero__sky{
  position:absolute;left:0;right:0;bottom:0;
  height:1858px;
  overflow:hidden;
  opacity:.3;
}
.hero__sky img{width:101%;height:auto;margin-left:-1%;margin-top:-.788%}

/* tile band — same photo, cropped to the roof, red `lighten` blend */
.hero__roof{
  position:absolute;left:0;right:0;bottom:0;
  height:283px;
  overflow:hidden;
  isolation:isolate;
}
.hero__roof img{width:101%;height:auto;margin-left:-1%;margin-top:-113.61%}
.hero__tint{position:absolute;inset:0;background:red;opacity:.7;mix-blend-mode:lighten}

/* ---------------- Nav ---------------- */
.nav{
  position:absolute;
  top:25px;left:0;right:0;
  z-index:5;
  width:100%;
  max-width:var(--frame);
  margin:0 auto;
  padding:0 var(--gutter);
  display:flex;
  align-items:flex-start;
  gap:24px;
}
.nav__logo{margin-top:3.14px;flex:0 0 auto}
.nav__logo img{width:130.63px;height:16.72px;transition:opacity .3s var(--ease)}
.nav__logo:hover img{opacity:.65}

.nav__links{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  gap:30px;
}
.nav__links a{
  display:inline-block;
  font-size:18px;
  font-weight:500;
  text-transform:capitalize;
  line-height:normal;
  padding-bottom:2px;
  background:linear-gradient(var(--orange),var(--orange)) no-repeat left bottom/0 1.5px;
  transition:background-size .35s var(--ease),color .35s var(--ease);
}
.nav__links a:hover{color:var(--orange);background-size:100% 1.5px}

.nav__cta{flex:0 0 auto}
.nav__burger{display:none}

/* ---------------- Hero copy ---------------- */
.hero__inner{
  position:absolute;
  top:141px;left:50%;
  transform:translateX(-50%);
  width:910px;
  max-width:calc(100% - var(--gutter)*2);
  text-align:center;
  z-index:4;
}
.hero__inner > *{
  opacity:0;
  animation:rise .9s var(--ease) forwards;
}
.hero__inner > :nth-child(1){animation-delay:.05s}
.hero__inner > :nth-child(2){animation-delay:.16s}
.hero__inner > :nth-child(3){animation-delay:.27s}
.hero__inner > :nth-child(4){animation-delay:.38s}

@keyframes rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

.hero__inner .eyebrow{max-width:668px;margin-inline:auto}

.hero__title{
  margin-top:5px;
  font-size:60px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:0;
  color:var(--black);
}
.hero__title em{color:var(--orange)}

.hero__sub{
  max-width:668px;
  margin:15px auto 0;
  font-size:18px;
  font-weight:500;
  line-height:normal;
}

.hero__actions{
  margin-top:30px;
  display:flex;
  gap:10px;
  justify-content:center;
}

/* =============================================================
   STATS
   ============================================================= */
.stats{padding:104px 0 100px}
.stats__grid{
  display:grid;
  grid-template-columns:312fr 343fr 301fr;
  max-width:956px;
  margin:0 auto;
}
.stat{min-height:212px;padding-top:9px}
.stat + .stat{border-left:2px solid var(--orange);padding-left:31px}
.stat__icon{height:49px;width:auto}
.stat__value{
  margin-top:45px;
  font-size:30px;
  font-weight:700;
  line-height:1.5;
  color:var(--orange);
}
.stat__label{
  margin-top:-2px;
  font-size:23px;
  font-weight:500;
  line-height:1.5;
  color:#000;
}

/* =============================================================
   QUOTE BAND
   ============================================================= */
.band{padding:229px 0}
.band__text{
  text-align:right;
  font-size:40px;
  font-weight:600;
  line-height:1.25;
}
.band__text strong{font-weight:700;color:var(--orange)}
.band__text span{color:var(--grey)}

/* =============================================================
   WHAT'S INCLUDED (tabbed matrix)
   ============================================================= */
.included{padding:100px 0 120px}
.included .h2{max-width:870px}

.tabs{
  position:relative;
  margin-top:70px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  height:71px;
  background:var(--card);
  border-radius:10px;
  overflow:hidden;
}
/* the hairline sits *above* the segments, exactly as in Figma —
   so the active orange runs edge to edge underneath it */
.tabs::after{
  content:"";
  position:absolute;inset:0;
  border:1px solid var(--hairline);
  border-radius:10px;
  pointer-events:none;
}
.tab{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--f-satoshi);
  font-size:28px;
  font-weight:500;
  letter-spacing:-.03em;
  color:var(--black);
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
.tab + .tab{box-shadow:inset 1px 0 0 var(--rule)}
.tab:hover{color:var(--orange)}
.tab.is-active{background:var(--orange);color:#fcfcfc;box-shadow:none}
.tab.is-active + .tab{box-shadow:none}
.tab.is-active:hover{color:#fcfcfc}

.matrix{
  position:relative;
  margin-top:30px;
  height:543px;
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:10px;
  overflow:hidden;
}
.matrix__panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  height:100%;
}
.matrix__panel[hidden]{display:none}
.matrix__panel.is-active .matrix__col{animation:panelIn .5s var(--ease) both}
.matrix__panel.is-active .matrix__col:nth-child(2){animation-delay:.07s}
@keyframes panelIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.matrix__col{position:relative}
.matrix__col:first-child{padding:0 45px 0 39px}
.matrix__col:last-child{padding:0 39px 0 45px}
.matrix__col + .matrix__col::before{
  content:"";
  position:absolute;
  left:0;top:40px;
  width:1px;height:463px;
  background:var(--rule);
}

.matrix__head{
  padding-top:39.7px;
  font-family:var(--f-satoshi);
  font-size:28px;
  font-weight:700;
  line-height:1.36;
  letter-spacing:-.03em;
  color:var(--orange);
}
.matrix__list{margin-top:35px}
.matrix__list li{
  position:relative;
  height:146px;
  padding-left:29.7px;
  font-family:var(--f-satoshi);
  font-size:22px;
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.03em;
  color:var(--black);
}
.matrix__list li::before{
  content:"";
  position:absolute;
  left:0;top:8px;
  width:10px;height:10px;
  border-radius:2px;
  background:var(--orange);
}
.matrix__list li:not(:last-child)::after{
  content:"";
  position:absolute;
  left:0;right:0;top:105.3px;
  border-top:1px solid var(--rule);
}

.included .center{margin-top:30px}

/* =============================================================
   MONTHLY PLAN
   ============================================================= */
.plan{padding:100px 0}

.eyebrow--dot{position:relative;display:block}
.eyebrow--dot::before{
  content:"";
  position:absolute;
  top:9px;left:50%;
  margin-left:-241px;
  width:5px;height:5px;
  border-radius:1px;
  background:var(--orange);
}

.plan__title{margin-top:30px;max-width:730px}
.plan__sub{
  max-width:536px;
  margin:20px auto 0;
  text-align:center;
  font-size:18px;
  font-weight:500;
}

.plan__cards{
  margin-top:52px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.pcard{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:234.24px;
  padding:29.69px 29.69px 30px;
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:10.274px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.pcard:hover{
  transform:translateY(-4px);
  border-color:rgba(201,94,12,.55);
  box-shadow:0 18px 40px -28px rgba(32,32,32,.55);
}
.pcard__top{display:flex;align-items:flex-start;gap:16px}
.pcard__title{
  flex:1;
  max-width:280px;
  font-size:22px;
  font-weight:700;
  line-height:1.27;
  color:var(--orange);
}
.pcard__num{
  margin-left:auto;
  font-size:22px;
  font-weight:700;
  line-height:1.27;
  color:var(--orange);
}
.pcard__desc{
  font-size:17px;
  font-weight:500;
  line-height:1.25;
  color:#000;
}

/* ---------------- Price bar ---------------- */
.price{
  margin-top:20.76px;
  display:grid;
  grid-template-columns:408px 1fr;
  min-height:234px;
  background:var(--orange);
  border:1px solid var(--hairline);
  border-radius:10.274px;
  color:var(--white);
}
.price__amount{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left:88.69px;
}
.price__figure{font-size:40px;font-weight:700;line-height:1.25}
.price__note{font-size:16.5px;font-weight:500;line-height:1.26}

.price__perks{
  display:grid;
  grid-template-columns:368px 1fr;
  align-content:center;
  row-gap:35px;
  padding-left:48px;
  border-left:2px solid #fff;
  margin:38px 0;
}
.price__perks h3{font-size:20px;font-weight:700;line-height:1.25}
.price__perks p{margin-top:5px;font-size:13px;font-weight:500;line-height:1.23;opacity:.9}

.plan .center{margin-top:30px}

/* =============================================================
   TESTIMONIALS
   ============================================================= */
.testimonials{padding:100px 0}
.testimonials__media{
  margin-top:70px;
  height:444px;
  border-radius:10px;
  overflow:hidden;
}
.testimonials__media img{
  width:100%;height:auto;
  margin-top:-16.81%;
  transition:transform 1.2s var(--ease);
}
.testimonials__media:hover img{transform:scale(1.03)}

.quotes{
  margin-top:15px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:21px;
}
.quote{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:234.24px;
  padding:29.69px 29.69px 30.5px;
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:10.274px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.quote:hover{
  transform:translateY(-4px);
  border-color:rgba(201,94,12,.55);
  box-shadow:0 18px 40px -28px rgba(32,32,32,.55);
}
.quote__text{
  font-size:17px;
  font-weight:500;
  line-height:1.25;
  color:#000;
}
.quote__by{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.quote__name{font-size:22px;font-weight:700;line-height:1.27;color:var(--orange)}
.quote__role{margin-top:5px;font-size:16px;font-weight:600;line-height:1.25;color:#000;opacity:.7}
.quote__avatar{
  width:57px;height:57px;
  flex:0 0 57px;
  border-radius:50%;
  object-fit:cover;
}

/* =============================================================
   CASES
   ============================================================= */
.cases{padding:100px 0}
.cases__viewport{margin-top:70px;overflow:hidden}
.cases__track{
  display:flex;
  transition:transform .55s var(--ease);
}
.cases__track.is-nudging{animation:nudge .45s var(--ease)}
@keyframes nudge{
  0%,100%{transform:translateX(var(--x,0))}
  30%{transform:translateX(calc(var(--x,0px) - 14px))}
  65%{transform:translateX(calc(var(--x,0px) + 6px))}
}

.case{
  flex:0 0 100%;
  display:grid;
  grid-template-columns:551fr 666fr;
  gap:19px;
}

.case__shots{
  position:relative;
  height:512px;
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:10.274px;
  overflow:hidden;
}
.case__shot{
  position:absolute;
  width:302px;
  height:607.888px;
  overflow:hidden;
  border-radius:6.308px;
  box-shadow:0 12px 34px -22px rgba(32,32,32,.7);
  transition:transform .6s var(--ease);
}
.case__shot img{width:100%;height:auto}
.case__shot--back{left:53.69px;top:149.69px}
/* The back shot used to be blown up to 104.64% and pulled 4.64% left, which is
   what the Figma comp did to the placeholder screenshot it was built on. The
   real mockups are rendered at 1200px and carry a page gutter of about 3.9%,
   so that crop reached past the gutter and shaved the first character off
   every line down the left edge — "Most roofs..." read as "Aost roofs...".
   The shot now sits flush at its own width; margin-top is re-based to the new
   scale so the same band of the page stays in frame. */
.case__shot--back img{margin-top:-42.02%}
.case__shot--front{left:194.69px;top:69.69px}
.case__shot--front img{margin-top:-.06%}
.case__shots:hover .case__shot--back{transform:translate(-10px,6px)}
.case__shots:hover .case__shot--front{transform:translate(10px,-6px)}

.case__body{
  height:512px;
  padding:44.69px;
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:10.274px;
}
.case__head{display:flex;align-items:flex-start;gap:24px}
.case__title{
  max-width:368px;
  font-size:30px;
  font-weight:700;
  line-height:1.26;
  color:var(--orange);
}
.case__meta{margin-left:auto;text-align:left}
.case__meta-label{font-size:18px;font-weight:600;line-height:1.26;color:var(--orange)}
.case__meta-value{margin-top:1px;font-size:16px;font-weight:600;line-height:1.26;color:#000;opacity:.5}

.case__sub{
  margin-top:30px;
  font-family:var(--f-satoshi);
  font-size:20px;
  font-weight:700;
  line-height:1.36;
  letter-spacing:-.03em;
  color:var(--black);
}
.case__list{margin-top:45px;padding-right:42px}
.case__list li{
  position:relative;
  height:98px;
  padding-left:30px;
  font-family:var(--f-satoshi);
  font-size:22px;
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.03em;
  color:var(--black);
}
.case__list li::before{
  content:"";
  position:absolute;
  left:0;top:8px;
  width:10px;height:10px;
  border-radius:2px;
  background:var(--orange);
}
.case__list li:not(:last-child)::after{
  content:"";
  position:absolute;
  left:0;right:0;top:73.3px;
  border-top:1px solid var(--rule);
}

.cases__nav{
  margin-top:45px;
  display:flex;
  justify-content:center;
  gap:15px;
}
/* Figma exports one chevron glyph and mirrors it for "next" (both nodes are
   named "k"). It also nudges each 37px icon box 4.5px toward the centre gap,
   because the chevron's ink sits in the left third of its own box — without
   that the arrow reads as off-centre in the 60px button. */
.arrow{
  width:60px;height:60px;
  display:flex;
  align-items:flex-start;
  padding-top:12px;
  background:var(--orange);
  border-radius:10px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.arrow img{width:37px;height:37px}
.arrow--prev{padding-left:16px}
.arrow--next{padding-left:7px}
.arrow--next img{transform:scaleX(-1)}
.arrow:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(201,94,12,.8)}
.arrow:active{transform:translateY(0) scale(.96)}
/* the arrows now report the ends of the track instead of nudging into them */
.arrow[disabled]{opacity:.32;cursor:default}
.arrow[disabled]:hover{transform:none;box-shadow:none}

/* ---------------- carousel position indicator ----------------
   Built by assets/js/main.js. Two arrows alone never said how many cases
   there were or which one you were looking at — on a phone, where the track
   is also swipeable, that is the only orientation the reader gets. */
.cases__dots{
  margin-top:34px;
  display:flex;
  justify-content:center;
  gap:4px;
}
.cases__dot{
  /* a 9px dot inside a 44px target: the hit area is the phone minimum, the
     ink stays the size the design wants */
  width:30px;height:44px;
  display:grid;
  place-items:center;
  -webkit-tap-highlight-color:transparent;
}
.cases__dot::before{
  content:"";
  width:9px;height:9px;
  border-radius:50%;
  background:rgba(32,32,32,.22);
  transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.cases__dot.is-on::before{background:var(--orange);transform:scale(1.25)}
.cases__dots + .cases__nav{margin-top:6px}

/* =============================================================
   CLOSING CTA
   ============================================================= */
.cta{
  position:relative;
  height:572px;
  overflow:hidden;
}
.cta__bg{position:absolute;inset:0;overflow:hidden}
/* Figma places this photo at 1611x1074 with its top at -403 inside the
   1396x572 banner. Expressing that as `width %` + `margin-top %` only holds
   at the design width: the banner's height is fixed, so on a wide monitor the
   photo scales up and the roof falls out of frame below, and on a narrow one
   it is too short and leaves a white gap. `object-fit:cover` pins the crop
   instead — 80.28% of the 502px vertical overflow reproduces the -403 offset
   exactly at 1396, and keeps the roof framed at every other width. */
.cta__bg img{
  position:absolute;top:0;left:0;
  width:115.4%;height:100%;
  margin-left:-1.576%;
  object-fit:cover;
  object-position:center 80.28%;
  transform:scaleX(-1);
}
.cta .wrap{position:relative;height:100%}
.cta__inner{padding-top:80px;max-width:790px}
.cta__title{
  font-size:60px;
  font-weight:700;
  line-height:1.15;
  color:var(--black);
}
.cta__title em{color:var(--orange)}
.cta__sub{
  max-width:618px;
  margin-top:20px;
  font-size:18px;
  font-weight:500;
  line-height:1.28;
}
.cta__inner .btn{margin-top:25px}

/* =============================================================
   FOOTER
   ============================================================= */
.footer{padding:80px 0 46px}
.footer__top{display:flex;align-items:flex-start;height:54px;gap:24px}
.footer__logo{font-size:34px;font-weight:700;line-height:normal}
.footer__link{
  font-family:var(--f-satoshi);
  margin-top:7px;
  font-size:24px;
  font-weight:400;
  line-height:1;
  transition:color .3s var(--ease);
}
.footer__link:hover{color:var(--orange)}
.footer__top .footer__link:nth-of-type(1){margin-left:auto}
.footer__top .footer__link:nth-of-type(2){margin-left:161px}

.footer__bottom{
  padding-top:25px;
  border-top:1px solid var(--hairline);
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-family:var(--f-satoshi);
  font-size:14px;
  font-weight:400;
  line-height:1;
  color:var(--footer-ink);
}
.footer__legal{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:flex-end}
.footer__legal a,.footer__consent{transition:color .3s var(--ease)}
.footer__legal a:hover,.footer__consent:hover{color:var(--orange)}
/* A <button>, because it reopens the banner rather than going anywhere. It has
   to read as the tenth item in the legal row, so it inherits everything the
   anchors get from .footer__bottom and gives up the UA button styling. */
.footer__consent{
  font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
}

/* =============================================================
   Site chrome — wordmark, Services dropdown, footer columns.
   Shared by every page; markup comes from site_chrome.py.
   ============================================================= */

/* The brand is Local Standard. The wordmark is set in type until a real
   logo file exists — drop in an SVG and swap the span for an <img>. */
.nav__wordmark,.footer__logo{
  font-family:var(--f-mulish);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--black);
  white-space:nowrap;
}
.nav__wordmark{font-size:21px;line-height:1}
.nav__wordmark em,.footer__logo em{font-weight:400;color:var(--orange);font-style:normal}
.nav__logo{display:inline-flex;align-items:center}

/* ---------------- Services dropdown ---------------- */
.nav__drop{position:relative}
.nav__drop-btn{
  display:inline-flex;
  align-items:center;
  font-family:var(--f-mulish);
  font-size:18px;
  font-weight:500;
  line-height:normal;
  color:var(--black);
  padding-bottom:2px;
  transition:color .3s var(--ease);
}
.nav__drop-btn:hover,.nav__drop-btn.is-current{color:var(--orange)}
.nav__drop-btn[aria-expanded="true"]{color:var(--orange)}

.nav__menu{
  position:absolute;
  top:calc(100% + 16px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  width:344px;
  padding:10px;
  background:var(--white);
  border:1px solid var(--hairline);
  border-radius:14px;
  box-shadow:0 26px 54px -30px rgba(32,32,32,.7);
  opacity:0;
  visibility:hidden;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
  z-index:20;
}
.nav__menu[hidden]{display:block}          /* animated, not display-toggled */
.nav__menu.is-open{opacity:1;visibility:visible;transform:translateX(-50%)}
.nav__menu::before{                         /* pointer */
  content:"";
  position:absolute;
  top:-6px;left:50%;
  width:11px;height:11px;
  margin-left:-5.5px;
  background:var(--white);
  border-left:1px solid var(--hairline);
  border-top:1px solid var(--hairline);
  transform:rotate(45deg);
}
.nav__menu ul{display:flex;flex-direction:column}
.nav__menu a{
  display:block;
  padding:11px 14px;
  border-radius:9px;
  transition:background-color .22s var(--ease);
}
.nav__menu a:hover{background:var(--card)}
.nav__menu-name{
  display:block;
  font-size:16px;
  font-weight:700;
  line-height:1.3;
  color:var(--black);
}
.nav__menu-note{
  display:block;
  margin-top:2px;
  font-size:13.5px;
  font-weight:500;
  line-height:1.35;
  color:var(--grey);
}
.nav__menu a:hover .nav__menu-name{color:var(--orange)}
.nav__menu-all{
  display:block;
  margin-top:6px;
  padding:12px 14px 4px;
  border-top:1px solid var(--rule);
  font-size:14px;
  font-weight:700;
  color:var(--orange);
}

/* ---------------- footer service column ---------------- */
.footer__cols{margin-top:34px}
.footer__cols-title{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--grey);
}
.footer__cols ul{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
}
.footer__cols a{
  font-size:15.5px;
  font-weight:600;
  color:var(--black);
  transition:color .3s var(--ease);
}
.footer__cols a:hover{color:var(--orange)}
.footer__logo{font-size:26px}

@media (max-width:1024px){
  .nav__drop{width:100%}
  .nav__drop-btn{width:100%;justify-content:center;padding:8px 0;font-size:17px}
  .nav__menu{
    position:static;
    width:100%;
    transform:none;
    box-shadow:none;
    border:0;
    padding:0 0 6px;
    background:transparent;
    display:none;
  }
  .nav__menu.is-open{display:block;transform:none}
  .nav__menu::before{display:none}
  .nav__menu a{padding:8px 14px;text-align:center}
  .nav__menu-note{display:none}
  .nav__menu-all{border-top:0;text-align:center;padding-top:6px}
  .footer__cols{margin-top:26px}
}
@media (max-width:560px){
  .nav__wordmark{font-size:18px}
}

/* ---------------- footer socials ---------------- */
.footer__social{margin-top:26px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.footer__social-title{
  font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grey);margin-right:4px;
}
.footer__social a{
  display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--hairline);
  transition:border-color .3s var(--ease),transform .3s var(--ease),background-color .3s var(--ease);
}
.footer__social svg{width:18px;height:18px;fill:var(--black);transition:fill .3s var(--ease)}
.footer__social a:hover{border-color:var(--orange);background:var(--card);transform:translateY(-2px)}
.footer__social a:hover svg{fill:var(--orange)}

/* ---------------- registered entity line ----------------
   Bank and Stripe review look for the legal name, address and a reachable
   phone number on the page itself, not only on /contact. */
.footer__entity{
  margin-top:26px;padding-top:20px;
  border-top:1px solid var(--hairline);
  font-size:14px;font-weight:500;line-height:1.7;color:var(--grey);
}
.footer__entity a{color:var(--grey);text-decoration:none;border-bottom:1px solid transparent}
.footer__entity a:hover{color:var(--orange);border-bottom-color:var(--orange)}

/* Socials live in the footer on desktop; the burger menu repeats them so a
   phone visitor is not asked to scroll the whole page to find them. */
.nav__social{display:none}

/* ---------------- testimonials from data ----------------
   With no real entries the section renders nothing at all. A fabricated
   quote is worse than an absent one. */
/* the results fallback: outcome cards, no attributed names */
.quotes--results .quote__text{font-size:18px;line-height:1.45;color:var(--black);font-weight:600}
.quotes--results .quote__name{font-size:17px}
.quotes--results .quote__by{align-items:flex-end}
.quote__stars{font-size:15px;letter-spacing:.12em;color:var(--orange);line-height:1}
.quote__avatar--initials{
  display:grid;place-items:center;
  width:57px;height:57px;flex:0 0 57px;border-radius:50%;
  background:var(--orange);color:var(--white);
  font-size:19px;font-weight:700;letter-spacing:.02em;
}

/* ---------------- results disclaimer ---------------- */
.disclaimer{
  margin-top:14px;
  font-size:13px;
  font-weight:500;
  line-height:1.5;
  color:var(--grey);
}

/* =============================================================
   Unfilled-content markers — used by the legal pages and the blog
   for values the source documents leave blank.
   ============================================================= */
.ph{
  background:#ffe9a8;
  box-shadow:inset 0 -1px 0 #e0a800;
  border-radius:3px;
  color:#5c4300;
  padding:1px 2px;
}
.ph__label{
  display:inline-block;
  padding:0 7px;
  border:1px dashed #b98900;
  border-radius:4px;
  font-size:.78em;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.ph--note{
  display:inline;
  background:#fff3cd;
  font-style:italic;
}
.ph__icon{
  display:inline-block;
  width:1.15em;height:1.15em;
  margin-right:.4em;
  border-radius:50%;
  background:#e0a800;
  color:#fff;
  font-style:normal;
  font-weight:700;
  font-size:.8em;
  line-height:1.15em;
  text-align:center;
}

/* =============================================================
   Scroll reveal
   ============================================================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:1280px){
  :root{--gutter:48px}
  .hero__title,.cta__title{font-size:52px}
  .h2{font-size:38px}
  .band__text{font-size:34px}
  .tab{font-size:24px}
  .matrix__head{font-size:24px}
  .matrix__list li,.case__list li{font-size:20px}
  .price{grid-template-columns:340px 1fr}
  .price__amount{padding-left:48px}
  .price__perks{grid-template-columns:1fr 1fr;padding-left:40px;column-gap:32px}
  .case__body{padding:36px}
  .case__shot--back{left:24px}
  .case__shot--front{left:150px}
}

@media (max-width:1024px){
  .nav__links{
    position:absolute;
    top:56px;left:var(--gutter);right:var(--gutter);
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:18px 0;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(8px);
    border-radius:14px;
    box-shadow:0 20px 44px -28px rgba(32,32,32,.6);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
    /* Opening the Services submenu inside the panel adds seven more rows.
       On a short viewport — any phone held in landscape — that ran off the
       bottom of the screen with no way to reach it, because the page behind
       is scroll-locked while the panel is open. The panel scrolls itself
       instead, and `contain` stops that scroll chaining to the page. */
    max-height:calc(100vh - 96px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .nav__links.is-open{opacity:1;visibility:visible;transform:none}
  /* 8px of padding on an 18px line is a 34px target; phones want 44px */
  .nav__links > li > a,.nav__drop-btn{min-height:44px;display:flex;align-items:center;justify-content:center}
  .nav__menu a{padding:12px 14px}
  .nav__social{
    display:flex;gap:10px;justify-content:center;
    margin-top:6px;padding-top:12px;width:100%;
    border-top:1px solid var(--hairline);
  }
  .nav__social a{
    display:grid;place-items:center;width:36px;height:36px;
    border-radius:50%;border:1px solid var(--hairline);padding:0;
    transition:border-color .3s var(--ease),background-color .3s var(--ease);
  }
  .nav__social svg{width:17px;height:17px;fill:var(--black);transition:fill .3s var(--ease)}
  .nav__social a:hover{border-color:var(--orange);background:var(--card)}
  .nav__social a:hover svg{fill:var(--orange)}
  .nav__links a{padding:8px 0}
  .nav{align-items:center;justify-content:space-between}
  /* the row is logo + CTA + burger and none of the three may shrink: as flex
     items they default to flex-shrink:1, which on a 320px phone squeezed the
     burger from 38px to 22px and still pushed it 7px past the right edge */
  .nav__logo,.nav__cta,.nav__burger{flex:0 0 auto}
  /* a 123x18 wordmark is a legible logo but a miserable tap target. All three
     controls take the 44px minimum in height, which is free — the row's tight
     budget on a 320px screen is the horizontal one. */
  .nav__logo{margin-top:0;min-height:44px;align-items:center}
  .nav__cta{margin-left:auto;min-height:44px}
  .nav__burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:44px;align-items:center;
  }
  .nav__burger span{
    display:block;width:22px;height:2px;background:var(--black);border-radius:2px;
    transition:transform .3s var(--ease),opacity .2s var(--ease);
  }
  .nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .hero{height:790px}
  .hero__inner{top:175px}
  .hero__title{font-size:46px}

  .stats{padding:36px 0}
  .stats__grid{grid-template-columns:1fr 1fr 1fr;max-width:none}

  .band{padding:60px 0}

  .included{padding:40px 0 45px}
  .matrix{height:auto}
  .matrix__panel{grid-template-columns:1fr}
  .matrix__col:first-child,.matrix__col:last-child{padding:0 32px 24px}
  .matrix__col + .matrix__col::before{
    left:32px;right:32px;top:0;width:auto;height:1px;
  }
  .matrix__list li{height:auto;padding-bottom:24px;margin-bottom:24px}
  .matrix__list li:not(:last-child)::after{top:auto;bottom:0}

  .plan{padding:40px 0}
  .plan__cards{grid-template-columns:1fr}
  .pcard__title{max-width:none}
  .price{grid-template-columns:1fr}
  .price__amount{padding:32px 32px 0}
  .price__perks{
    border-left:0;border-top:1px solid rgba(255,255,255,.85);
    margin:24px 32px 32px;padding:24px 0 0;
  }

  .testimonials{padding:40px 0}
  .testimonials__media{height:340px;margin-top:36px}
  /* the in-section gaps are sized for a 1396 canvas too — halve them as well
     so the page reads as one rhythm rather than tight sections in a loose page */
  .tabs{margin-top:36px}
  .plan__title{margin-top:20px}
  .plan__cards{margin-top:32px}
  .cases__viewport{margin-top:36px}
  .cases__nav{margin-top:28px}
  .included .center,.plan .center{margin-top:24px}
  .quotes{grid-template-columns:1fr}

  .cases{padding:40px 0}
  .case{grid-template-columns:1fr;gap:24px}
  .case__shots{height:380px}
  .case__shot{width:240px;height:483px}
  .case__shot--back{left:6%;top:90px}
  .case__shot--front{left:44%;top:40px}
  .case__body{height:auto;padding:32px}
  .case__list{padding-right:0;margin-top:32px}
  .case__list li{height:auto;padding-bottom:22px;margin-bottom:22px}
  .case__list li:not(:last-child)::after{top:auto;bottom:0}

  .cta{height:auto;min-height:520px}
  .cta__inner{padding:80px 0 220px}
  .cta__title{font-size:44px}

  /* height:54px is a desktop-only measurement — leaving it on here made the
     wrapped links overflow the box and the divider draw straight through them */
  .footer__top{
    height:auto;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    /* the fixed 54px used to leave slack under the row; height:auto removes it,
       so the divider would otherwise sit flush against the last link */
    margin-bottom:18px;
  }
  .footer__top .footer__logo{flex:0 0 auto}
  /* must match the desktop selectors' specificity to beat margin-left:auto/161px */
  .footer__top .footer__link:nth-of-type(1),
  .footer__top .footer__link:nth-of-type(2){margin-left:0}
  /* line-height:1 is fine on the 24px desktop type, but at 19px the glyphs
     spill out of the line box and collide with the divider below */
  .footer__top .footer__link{margin-top:0;line-height:1.35}
}

@media (max-width:720px){
  :root{--gutter:24px}

  /* The hero is a fixed 800px box with the copy absolutely positioned inside
     it — a measurement taken from a 1396px canvas. On a phone the copy wraps
     to far more lines than it does on a desktop, and at 320px it ran 54px
     into the roof photo at the bottom of the box. Below this width the hero
     becomes an ordinary flow container: the copy sets the height, so it can
     never collide with the photo no matter how the text wraps or how large
     the reader has set their font. */
  .hero{height:auto}
  .hero__inner{
    position:static;
    transform:none;
    width:auto;
    max-width:none;
    /* clears the absolutely-positioned nav above and the roof band below */
    padding:104px var(--gutter) 232px;
  }
  .hero__title{font-size:36px}
  .hero__sub,.eyebrow{font-size:16px}
  .hero__actions{flex-direction:column;align-items:center}
  .hero__roof{height:200px}

  .h2{font-size:30px}
  .band{padding:40px 0}
  .band__text{font-size:24px;text-align:center}
  .band__text span br{display:none}

  .stats__grid{grid-template-columns:1fr;gap:40px}
  .stat{min-height:0;padding-top:0}
  .stat + .stat{border-left:0;padding-left:0;border-top:1px solid var(--orange);padding-top:32px}
  .stat__value{font-size:26px;margin-top:24px}
  .stat__label{font-size:19px}

  .tabs{height:auto;grid-template-columns:1fr}
  .tab{padding:14px 0;font-size:20px}
  .tab + .tab{box-shadow:inset 0 1px 0 var(--rule)}
  .matrix__head{font-size:21px;padding-top:28px}
  .matrix__list{margin-top:22px}
  .matrix__list li,.case__list li{font-size:17px}
  .matrix__col:first-child,.matrix__col:last-child{padding:0 22px 20px}
  .matrix__col + .matrix__col::before{left:22px;right:22px}

  .plan__title,.plan__sub{max-width:none}
  /* the fixed-height cards leave an odd gap once stacked */
  .pcard,.quote{min-height:0;gap:26px}
  .eyebrow--dot::before{display:none}
  .price__figure{font-size:32px}
  .price__perks{grid-template-columns:1fr;row-gap:24px}
  /* 13px of white-on-orange is the smallest copy on the page and it carries
     the guarantee, the reporting cadence and the cancellation terms */
  .price__perks h3{font-size:18px}
  .price__perks p{font-size:15px;line-height:1.4;opacity:1}
  .disclaimer{font-size:14px}

  .testimonials__media{height:240px}
  .case__shots{height:300px}
  .case__shot{width:170px;height:342px}
  .case__shot--back{left:4%;top:70px}
  .case__shot--front{left:42%;top:30px}
  /* the paired shots are a hover composition; a finger cannot hover, and the
     pair only ever moved because a mouse was over it */
  .case__shots:hover .case__shot--back,
  .case__shots:hover .case__shot--front{transform:none}
  .case__title{font-size:24px}
  .case__head{flex-direction:column;gap:12px}
  .case__meta{margin-left:0}

  .cta{min-height:460px}
  .cta__inner{padding:64px 0 180px}
  .cta__title{font-size:32px}
  .cta__sub{font-size:16px}

  .footer{padding:56px 0 40px}
  .footer__logo{font-size:28px}
  .footer__link{font-size:19px}
  .footer__bottom{flex-direction:column;gap:14px}
  /* five links will not sit on one line on a phone */
  .footer__legal{justify-content:flex-start;gap:8px 18px}
}

@media (max-width:560px){
  /* the nav row (logo + CTA + burger) stops fitting around here */
  .nav{gap:12px}
  .nav__logo img{width:110px;height:14.08px}
  .nav__cta{padding:10px 18px;font-size:12px}
  .nav__burger{width:38px;height:44px}
}

/* The narrowest phones still in real use — iPhone SE 1st/2nd gen and the
   cheaper Androids — are 320-360 CSS px. At 24px gutters the nav row measured
   367px against a 320px viewport, so the burger was pushed off the screen
   entirely. Everything below is the amount actually needed to bring that row
   back inside the viewport, measured rather than guessed. */
/* The two overlapping case shots are screenshots of a 1200px-wide desktop
   mockup. Side by side they are 170px each on a phone, which is not a
   picture of a website so much as a grey smear. Below this width the pair
   becomes a single larger shot — the same crop, at a size where the layout
   it is meant to demonstrate is actually readable. */
@media (max-width:560px){
  .case__shots{height:330px}
  .case__shot--back{display:none}
  .case__shot--front{
    /* centred with auto margins rather than a translate, because `transform`
       on this element is what the hover composition animates */
    width:min(232px,66%);
    height:467px;
    left:0;right:0;
    margin-inline:auto;
    top:34px;
  }
}

@media (max-width:400px){
  :root{--gutter:18px}
  .nav{gap:8px}
  .nav__wordmark{font-size:16px}
  /* the label stays at 12px — the room comes out of the side padding and the
     wordmark, because shrinking button text is the one thing here that costs
     legibility rather than slack */
  .nav__cta{padding-inline:12px;font-size:12px}
  .nav__burger{width:36px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .hero__inner > *{opacity:1}
}

/* =============================================================
   Mobile menu scrim + scroll lock
   The panel used to be a plain absolutely-positioned box: scrolling the page
   carried it off the screen while it still reported aria-expanded="true", and
   nothing but a second tap on the burger would close it. The scrim element is
   created by assets/js/main.js — the menu is a JS-only affordance, so its
   backdrop is too, and nothing is added to the markup of 39 pages.
   ============================================================= */
.nav-scrim{
  position:fixed;
  inset:0;
  z-index:55;
  background:rgba(32,32,32,.42);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--ease),visibility .3s;
  -webkit-tap-highlight-color:transparent;
}
.nav-scrim.is-open{opacity:1;visibility:visible}
/* the header has to sit above its own backdrop */
html.has-menu .nav,
html.has-menu .svc-top,
html.has-menu .blog-top,
html.has-menu .legal__bar{z-index:70}
/* and the service pages' floating CTA has to sit below it */
html.has-menu .sticky-cta{opacity:0;pointer-events:none}
/* iOS Safari ignores overflow:hidden on <body>, so the lock is done by
   pinning the body and restoring the offset on close (see main.js) */
body.is-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}
@media (min-width:1025px){.nav-scrim{display:none}}
@media (prefers-reduced-motion:reduce){.nav-scrim{transition:none}}

/* ---------------- sticky header (brief §3) ---------------- */
.svc-top,.legal__bar{position:sticky;top:0;z-index:40;transition:height .28s var(--ease),box-shadow .28s var(--ease)}
.svc-top.is-stuck,.legal__bar.is-stuck{height:68px;box-shadow:0 10px 26px -22px rgba(32,32,32,.8)}
.svc-top.is-stuck .nav,.legal__bar.is-stuck .nav{top:13px}
@media (max-width:1024px){.svc-top.is-stuck,.legal__bar.is-stuck{height:60px}
  .svc-top.is-stuck .nav,.legal__bar.is-stuck .nav{top:9px}}
@media (prefers-reduced-motion:reduce){.svc-top,.legal__bar{transition:none}}

/* =============================================================
   Touch pointers
   A finger cannot hover, but iOS Safari and Android Chrome fire :hover on tap
   and hold it until something else is tapped. Every lift-on-hover below
   therefore stayed lifted under the reader's thumb, and the paired case shots
   stayed slid apart. Motion on hover is for pointers that can hover.
   ============================================================= */
@media (hover:none){
  .btn--primary:hover,.btn--ghost:hover,.arrow:hover{transform:none;box-shadow:none}
  .btn--primary:hover{box-shadow:0 0 0 0 rgba(201,94,12,.35)}
  .btn--ghost:hover{box-shadow:0 1px 3px rgba(32,32,32,.12)}
  .pcard:hover,.quote:hover{transform:none;box-shadow:none;border-color:var(--hairline)}
  .testimonials__media:hover img{transform:none}
  .case__shots:hover .case__shot--back,
  .case__shots:hover .case__shot--front{transform:none}
  .footer__social a:hover,.nav__social a:hover{transform:none;border-color:var(--hairline);background:none}
  .nav__links a:hover{background-size:0 1.5px}
}

/* =============================================================
   Touch target sizes
   Apple and Google both put the floor at 44 CSS px. Every one of these was
   set from the desktop design and measured under it on a phone: the footer
   links at 26px, the social discs at 36-38px, the legal row at 21px. The
   ink is unchanged — only the hit area grows.
   ============================================================= */
html{-webkit-tap-highlight-color:rgba(201,94,12,.12)}

@media (max-width:1024px){
  .footer__top .footer__link{
    display:inline-flex;align-items:center;min-height:44px;
    /* the row is a column here, so vertical padding would double the gaps */
    margin-top:0;
  }
  /* Five service names of very different lengths flex-wrapped into a 1/2/2
     ragged block that read as neither a list nor a row. One per line is the
     only arrangement that stays legible at every phone width. */
  .footer__cols ul{display:block}
  .footer__cols a{display:flex;align-items:center;min-height:44px}
  .footer__legal{gap:0 20px}
  .footer__legal a,.footer__consent{display:inline-flex;align-items:center;min-height:44px}
  .footer__social a,.nav__social a{width:44px;height:44px}
  .footer__entity a{display:inline-block;padding:2px 0}
  /* 12px of padding on 14px/normal type measures 41px. The desktop pill keeps
     the Figma height; on a phone the primary action on the page is the one
     control that cannot be 3px under the floor. */
  .btn{min-height:44px}
}

/* The entity line is a legal name, a street address, a phone number and an
   email run together — the longest unbroken run of text on any page. */
.footer__entity{overflow-wrap:break-word}

/* =============================================================
   Phones held sideways
   A landscape phone is 720-930px wide, so none of the width-based phone rules
   above reach it — but it is only 320-430px tall. The hero's fixed 790px box
   then costs two full screens before the first section, and the price-band
   copy stays at the desktop 13px/opacity .9 that measures 3.6:1 on orange.
   Keyed on height so it cannot catch a small tablet held upright.
   ============================================================= */
@media (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  .hero{height:auto}
  .hero__inner{
    position:static;
    transform:none;
    width:auto;
    max-width:none;
    padding:88px var(--gutter) 176px;
  }
  .hero__roof{height:150px}
  .hero__title{font-size:40px}
  .price__perks p{font-size:15px;line-height:1.4;opacity:1}
  .disclaimer{font-size:14px}
  /* the open menu has to stay inside a 375px-tall viewport */
  .nav__links{max-height:calc(100vh - 84px)}
}

/* =============================================================
   Cookie consent banner
   Markup from site_chrome.consent(), injected into every page by
   stamp-head.py; behaviour in assets/js/main.js.

   Docked to the bottom rather than thrown over the page as a modal: it gates
   one third-party embed, not the site, and a full-screen interstitial on a
   first visit is the thing every reader has learned to resent.
   ============================================================= */
.consent{
  position:fixed;
  left:0;right:0;bottom:0;
  /* above .sticky-cta (60), which is docked to the same edge on the service
     and industry pages; below the header when the burger menu is open (70) */
  z-index:62;
  padding:16px;
  display:flex;
  justify-content:center;
  pointer-events:none;              /* the page stays usable behind it */
}
.consent[hidden]{display:none}
.consent__box{
  pointer-events:auto;
  width:min(760px,100%);
  background:var(--white);
  border:1px solid var(--hairline);
  border-radius:14px;
  box-shadow:0 18px 44px -18px rgba(32,32,32,.45);
  padding:20px 24px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:6px 28px;
}
.consent__title{
  grid-column:1;
  font-family:var(--f-satoshi);
  font-size:16px;font-weight:700;line-height:1.3;color:var(--black);
}
.consent__text{
  grid-column:1;
  font-family:var(--f-mulish);
  font-size:14px;font-weight:500;line-height:1.55;color:var(--grey);
}
.consent__text a{color:var(--orange);font-weight:600}
.consent__actions{
  grid-column:2;grid-row:1 / span 2;
  display:flex;gap:10px;
}
.consent__btn{padding:12px 26px;min-height:44px}

/* One column below the width where the two buttons and the sentence stop
   fitting on one line without the text going to four words a row. */
@media (max-width:640px){
  .consent{padding:12px}
  .consent__box{grid-template-columns:1fr;gap:14px;padding:18px 20px}
  .consent__actions{grid-column:1;grid-row:auto}
  .consent__btn{flex:1}
}

/* A banner pinned to the bottom of a 320px-tall landscape phone covers most of
   what it is asking about, so it scrolls with the page there instead. */
@media (max-height:480px) and (orientation:landscape){
  .consent{position:static;padding:16px 0 0}
}

/* Two things dock to the bottom edge and one bottom edge: while the banner is
   up, the service pages' floating CTA stands down. The reader answers one
   question and gets it back. */
html.has-consent .sticky-cta{opacity:0;pointer-events:none}
/* and the banner itself gets out of the way of the open burger menu, whose
   scrim would otherwise sit between the two halves of the same screen */
html.has-menu .consent{opacity:0;visibility:hidden;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .consent__btn{transition:none}
}