/* =============================================================
   Service pages — /services and /services/<slug>
   Loaded on top of styles.css.

   The marketing pages have six photographs and all six are spoken for.
   Rather than pad these pages with stock photography that would undercut
   a "we do the real work" tone, each service carries a drawn signature
   graphic built from the same palette — an SVG that shows the mechanism
   the service actually describes, and animates once when scrolled into
   view. That is the visual interest on these pages.
   ============================================================= */

/* ---------------- top bar ----------------
   styles.css declares `.svc-top,.legal__bar{position:sticky;top:0;z-index:40}`
   for the brief's sticky header, and main.js toggles .is-stuck against it.
   This file loads after styles.css, so `position:relative` here quietly won
   and the header was not sticky on any .svc-top page — which on a phone means
   the burger, the logo and the CTA all scroll away and never come back. The
   legal pages kept theirs only because legal.css re-declares sticky. */
.svc-top{
  position:sticky;
  top:0;
  z-index:40;
  height:92px;
  background:var(--white);
  border-bottom:1px solid var(--hairline);
}
.svc-top .nav{top:25px}

/* ---------------- services dropdown ----------------
   Lives in styles.css scope because the marketing pages use it too. */

/* ---------------- hero ---------------- */
.svc-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--hairline);
}
.svc-hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) 468px;
  gap:56px;
  align-items:center;
  /* padding-block only — the shorthand would wipe out .wrap's side gutters */
  padding-block:78px 84px;
}
.svc-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--orange);
}
.svc-eyebrow::before{
  content:"";
  width:7px;height:7px;
  border-radius:2px;
  background:var(--orange);
}
.svc-hero h1{
  margin-top:18px;
  font-size:54px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.015em;
  max-width:17ch;
}
.svc-hero__sub{
  margin-top:22px;
  max-width:54ch;
  font-size:19px;
  font-weight:500;
  line-height:1.58;
  color:var(--grey);
}
.svc-hero__actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:10px}

/* the tile texture, reused from the hero photo as a faint ground */
.svc-hero__tex{
  position:absolute;
  inset:auto -10% -46% 42%;
  height:420px;
  opacity:.055;
  background:url("/assets/img/roof-tiles.jpg?v=af26b8b7d1") center/540px auto;
  transform:rotate(-4deg);
  pointer-events:none;
  /* feather the edges so it reads as texture, not a pasted rectangle */
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);
  mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);
}

/* =============================================================
   Signature graphic
   ============================================================= */
.figure{
  position:relative;
  aspect-ratio:468/360;
  border:1px solid var(--hairline);
  border-radius:14px;
  background:
    radial-gradient(120% 100% at 70% 0%, rgba(201,94,12,.05), transparent 60%),
    var(--card);
  overflow:hidden;
}
/* the caption gets its own band so it can never sit on top of the drawing */
.figure svg{position:absolute;inset:0 0 36px 0;width:100%;height:calc(100% - 36px)}
.figure--bare svg{inset:0;height:100%}
.figure figcaption{
  position:absolute;
  left:20px;right:20px;bottom:13px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--grey);
}

/* shared drawing primitives */
.f-plate{fill:var(--white);stroke:rgba(32,32,32,.14);stroke-width:1}
.f-plate--on{fill:var(--orange);stroke:var(--orange)}
.f-ink{fill:#202020}
.f-mute{fill:rgba(32,32,32,.26)}
.f-accent{fill:var(--orange)}
.f-line{stroke:rgba(32,32,32,.2);stroke-width:1.5;fill:none}
.f-line--on{stroke:var(--orange);stroke-width:2}
.f-label{
  font-family:var(--f-mulish);
  font-size:12px;
  font-weight:700;
  fill:#202020;
}
.f-label--sm{font-size:10.5px;font-weight:600;fill:rgba(32,32,32,.5)}
.f-label--on{fill:#fff}

/* --- entrance: each figure plays once when it scrolls into view --- */
.figure [data-anim]{opacity:0}
.figure.is-live [data-anim]{
  animation:fpop .62s cubic-bezier(.22,.9,.3,1) forwards;
  animation-delay:calc(var(--d,0) * 1ms);
}
@keyframes fpop{
  from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:none}
}
.figure [data-draw]{
  stroke-dasharray:var(--len,300);
  stroke-dashoffset:var(--len,300);
}
.figure.is-live [data-draw]{
  animation:fdraw .9s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc(var(--d,0) * 1ms);
}
@keyframes fdraw{to{stroke-dashoffset:0}}

/* the reviews figure grows bars from their baseline */
.figure [data-grow]{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
.figure.is-live [data-grow]{
  animation:fgrow .8s cubic-bezier(.3,.9,.3,1) forwards;
  animation-delay:calc(var(--d,0) * 1ms);
}
@keyframes fgrow{to{transform:scaleY(1)}}

/* =============================================================
   Sections
   ============================================================= */
.svc-section{padding:82px 0;border-bottom:1px solid var(--hairline)}
.svc-section:last-of-type{border-bottom:0}
.svc-h2{
  font-size:38px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em;
  max-width:18ch;
}
.svc-h2 em{color:var(--orange)}
.svc-lead{
  margin-top:16px;
  max-width:62ch;
  font-size:18px;
  font-weight:500;
  line-height:1.6;
  color:var(--grey);
}

/* "What you get" — three cards */
.svc-cards{
  margin-top:44px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.svc-card{
  position:relative;
  padding:32px 30px 34px;
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:10.274px;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.svc-card:hover{
  transform:translateY(-4px);
  border-color:rgba(201,94,12,.5);
  box-shadow:0 18px 40px -28px rgba(32,32,32,.55);
}
.svc-card__n{
  font-family:var(--f-satoshi);
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--orange);
}
.svc-card p{
  margin-top:14px;
  font-size:17px;
  font-weight:500;
  line-height:1.55;
  color:var(--black);
}

/* "Why it matters" — outcome rows against a tinted ground */
.svc-why{background:var(--card)}
.svc-why .svc-list{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}
.svc-why .svc-list li{
  padding:0 34px;
  border-left:1px solid var(--rule);
  font-size:17.5px;
  font-weight:500;
  line-height:1.58;
  color:var(--black);
}
.svc-why .svc-list li:first-child{padding-left:0;border-left:0}
.svc-why .svc-list li::before{
  content:"";
  display:block;
  width:26px;height:3px;
  border-radius:2px;
  background:var(--orange);
  margin-bottom:18px;
}

/* "How we do it" */
.svc-how{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:64px;
  align-items:start;
}
.svc-how p{
  margin-top:16px;
  font-size:18px;
  font-weight:500;
  line-height:1.66;
  color:#2b2b2b;
}

/* "Part of your monthly plan" — the pricing band treatment */
.svc-plan{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:44px;
  padding:46px 54px;
  background:var(--orange);
  color:var(--white);
  border-radius:10.274px;
}
.svc-plan__price{
  font-size:44px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
.svc-plan__price span{display:block;margin-top:9px;font-size:15px;font-weight:500;opacity:.9}
/* The price is a <p> too, so an unqualified `.svc-plan p` outranked
   `.svc-plan__price` on specificity and rendered $399 at 18px — smaller than
   the sentence beside it. Excluding it here beats raising the other rule,
   because it says which paragraph the declaration is actually for. */
.svc-plan p:not(.svc-plan__price){
  font-size:18px;
  font-weight:500;
  line-height:1.55;
  max-width:52ch;
}
.svc-plan .btn{background:var(--white);color:var(--orange);flex:0 0 auto}

/* FAQ */
.svc-faq dl{margin-top:34px;max-width:70ch;border-top:1px solid var(--rule)}
.svc-faq dt{
  padding-top:24px;
  font-size:20px;
  font-weight:700;
  line-height:1.35;
}
.svc-faq dd{
  margin:8px 0 0;
  padding-bottom:24px;
  border-bottom:1px solid var(--rule);
  font-size:17.5px;
  font-weight:500;
  line-height:1.62;
  color:#2b2b2b;
}

/* "Everything in one plan" — the other four services */
.svc-more{background:var(--card)}
.svc-more ul{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
/* `.svc-more a` also matched the prose links in the section's intro and the
   "Other industries" row, turning ordinary sentence links into full-width
   bordered cards — about 950px of junk on each of the nine industry pages.
   The card treatment belongs to the list only. */
.svc-more ul a{
  display:flex;
  flex-direction:column;
  gap:9px;
  height:100%;
  padding:26px 24px 28px;
  background:var(--white);
  border:1px solid var(--hairline);
  border-radius:10.274px;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.svc-more ul a:hover{transform:translateY(-3px);border-color:rgba(201,94,12,.55)}
.svc-more__tag{
  font-size:12px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--orange);
}
.svc-more__name{font-size:18px;font-weight:700;line-height:1.3;color:var(--black)}
.svc-more__go{margin-top:auto;font-size:14px;font-weight:700;color:var(--orange)}

/* =============================================================
   Services index
   ============================================================= */
.svc-index{
  margin-top:46px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.svc-index > a{
  display:grid;
  grid-template-columns:1fr;
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:10.274px;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.svc-index > a:hover{
  transform:translateY(-5px);
  border-color:rgba(201,94,12,.55);
  box-shadow:0 22px 46px -30px rgba(32,32,32,.6);
}
.svc-index .figure{
  border:0;
  border-bottom:1px solid var(--hairline);
  border-radius:0;
  aspect-ratio:16/8.4;
}
.svc-index__body{padding:30px 32px 34px;display:flex;flex-direction:column;gap:11px}
.svc-index__body h2{font-size:24px;font-weight:700;line-height:1.28;color:var(--black)}
.svc-index__body p{font-size:16.5px;font-weight:500;line-height:1.55;color:var(--grey)}
.svc-index__go{margin-top:4px;font-size:15px;font-weight:700;color:var(--orange)}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width:1280px){
  .svc-hero__inner{grid-template-columns:minmax(0,1fr) 380px;gap:40px}
  .svc-hero h1{font-size:46px}
  .svc-h2{font-size:33px}
  .svc-how{gap:44px}
}

@media (max-width:1024px){
  .svc-top{height:72px}
  .svc-top .nav{top:15px}
  .svc-hero__inner{grid-template-columns:1fr;gap:40px;padding-block:52px 56px}
  .svc-hero h1{font-size:38px;max-width:none}
  .svc-hero__sub{font-size:17.5px}
  .svc-hero__tex{display:none}
  /* The card forced a 468/330 box onto a 468/360 drawing, so the SVG fitted to
     the *height* and letterboxed: 77px of the 354px card — 22% — was empty
     margin, and everything inside rendered at 0.588x instead of 0.756x. That is
     what put the row labels on screen at 7px. Letting the viewBox set the
     height removes the waste and scales the whole drawing up by a third. */
  .figure{max-width:520px;aspect-ratio:auto}
  .figure svg{position:static;width:100%;height:auto;display:block}
  .figure figcaption{position:static;padding:0 20px 14px}
  /* the index cards deliberately crop to a wide strip — leave those alone */
  .svc-index .figure{aspect-ratio:16/8.4}
  .svc-index .figure svg{position:absolute;inset:0;height:100%}
  .svc-index .figure figcaption{position:absolute;left:20px;right:20px;bottom:13px;padding:0}
  .svc-section{padding:56px 0}
  .svc-h2{font-size:28px;max-width:none}
  .svc-cards{grid-template-columns:1fr;gap:16px}
  .svc-why .svc-list{grid-template-columns:1fr;gap:28px}
  .svc-why .svc-list li{padding:0;border-left:0}
  .svc-how{grid-template-columns:1fr;gap:26px}
  .svc-plan{flex-direction:column;align-items:flex-start;gap:26px;padding:34px}
  .svc-plan__price{font-size:36px}
  .svc-more ul{grid-template-columns:repeat(2,1fr)}
  .svc-index{grid-template-columns:1fr;gap:18px}
}

@media (max-width:720px){
  .svc-hero h1{font-size:30px}
  .svc-h2{font-size:24px}
  .svc-card{padding:24px}
  .svc-card p,.svc-why .svc-list li,.svc-how p{font-size:16.5px}
  .svc-faq dt{font-size:18px}
  .svc-faq dd{font-size:16.5px}
  .svc-more ul{grid-template-columns:1fr}
  .svc-plan{padding:26px}
  .svc-plan__price{font-size:31px}
}

@media (prefers-reduced-motion:reduce){
  .figure [data-anim],.figure [data-draw],.figure [data-grow]{
    opacity:1;
    stroke-dashoffset:0;
    transform:none;
    animation:none;
  }
  .svc-card:hover,.svc-more ul a:hover,.svc-index > a:hover{transform:none}
}

/* ---------------- proof element (brief §5) ---------------- */
.proof{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;
  margin-bottom:34px;padding:18px 24px;
  background:var(--card);border:1px solid var(--hairline);
  border-left:3px solid var(--orange);border-radius:0 10px 10px 0;
}
.proof__label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
/* min-width:280px is a flex floor, so at 320px — where .proof's content box
   is only 232px — the sentence rendered 23px outside the card's own border.
   min() keeps the desktop wrap behaviour and lets it shrink below it. */
.proof__text{flex:1;min-width:min(280px,100%);font-size:16.5px;font-weight:600;line-height:1.45;color:var(--black)}
.proof__link{font-size:14.5px;font-weight:700;color:var(--orange);white-space:nowrap}
.svc-how__links{margin-top:18px;font-size:16px;font-weight:500;line-height:1.6;color:var(--grey)}
.svc-how__links a{color:var(--orange);font-weight:600}

/* ---------------- mobile sticky CTA (brief §5) ---------------- */
.sticky-cta{display:none}
@media (max-width:1024px){
  .sticky-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--hairline);
    /* visibility keeps the hidden bar out of the tab order and away from a
       screen reader; it steps discretely, so the slide still animates */
    transform:translateY(110%);visibility:hidden;
    transition:transform .35s var(--ease),visibility .35s;
  }
  .sticky-cta.is-up{transform:none;visibility:visible}
  .sticky-cta span{font-size:15px;font-weight:700;color:var(--black)}
  .sticky-cta .btn{padding:11px 24px;font-size:13.5px;min-height:44px}
  body:has(.sticky-cta.is-up) .footer{padding-bottom:96px}
}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

/* see the "Touch pointers" note in styles.css */
@media (hover:none){
  .svc-card:hover,.svc-more ul a:hover,.svc-index > a:hover{
    transform:none;box-shadow:none;border-color:var(--hairline);
  }
}

/* see the "Touch target sizes" note in styles.css */
@media (max-width:1024px){
  .proof__link{display:inline-flex;align-items:center;min-height:44px}
  .svc-how__links a{display:inline-block;padding:3px 0}
}

/* ---------------- signature figure labels on phones ----------------
   With the letterboxing removed above, the drawing now fills the column and
   renders at 0.75x rather than 0.59x, so the original 10.5px row labels land
   at 7.9px instead of 6.2px. 11.5 is the largest the fixed geometry takes at
   320px — at 12 "Storm damage" touches the SEO grid's first plate. That puts
   the labels on screen at about 8.6px against the 6.2px they started at.
   Going further means redrawing all five SVGs, which is a redesign rather
   than a mobile fix; these are illustrative, and the caption under each one
   carries the point in full-size type. */
@media (max-width:720px){
  .f-label{font-size:12.5px}
  .f-label--sm{font-size:11.5px}
  .figure figcaption{font-size:12.5px;letter-spacing:.09em}
}

/* ---------------- breadcrumbs ----------------
   .crumbs is defined in pages.css and again in blog.css because neither is
   loaded by the other's pages. The service pages load neither, so their
   breadcrumb rendered as 18px black body copy with black links — the same
   weight as the H1 beneath it, and no sign it was navigation at all. */
.crumbs{padding-top:26px;font-size:15px;font-weight:600;color:var(--grey)}
.crumbs a{color:var(--orange)}
.crumbs span{margin:0 8px;opacity:.5}

/* see the breadcrumb note in pages.css */
@media (max-width:1024px){
  .crumbs{padding-top:14px}
  .crumbs a{display:inline-block;padding:13px 0}
}

/* "$399 per month" wrapped to two lines at 320px, which pushed the bar to
   69px and shoved the button against the edge. Same 400px breakpoint the
   header row already uses. */
@media (max-width:400px){
  .sticky-cta{padding-inline:16px;gap:10px}
  .sticky-cta span{white-space:nowrap;font-size:14px}
  .sticky-cta .btn{padding-inline:16px;font-size:12.5px}
}