/* ==========================================================================
   GoodVans Roofing — Abbotsford location page (Phase 2, correction pass)
   Loaded only by resources/views/city-service/abbotsford.blade.php.

   COLOUR: GoodVans tokens only — --thm, --thm1, --black, --white (+ their -rgb
   alphas) and the site's existing #f0f3f9 wash. Buttons mirror main.min.css
   .btn-black / .btn-o-thm.

   TYPE SCALE (seven steps, one place): display, h2, h3, lead, body, small, meta.
   MEASURE: --gv-measure keeps running text at ~65–75 characters per line.
   Note: CSS "ch" is the width of "0", which is wider than average text, so a
   68ch box renders ~83 characters in Open Sans. The em value below is measured.

   IMAGES: frames never size a row by themselves and never crop a wide strip
   into a tall box. 4:5 slots only render when an individual 4:5 file exists.
   ========================================================================== */

.gv-abb{
  --gv-ink:var(--thm1);
  --gv-red:var(--thm);
  --gv-surface:var(--white);
  --gv-wash:#f0f3f9;
  --gv-line:rgb(var(--thm1-rgb) / .12);
  --gv-line-2:rgb(var(--thm1-rgb) / .22);
  --gv-muted:rgb(var(--thm1-rgb) / .74);
  --gv-radius:10px;
  --gv-radius-sm:6px;
  --gv-sec:clamp(56px,6.5vw,92px);
  --gv-gap:clamp(24px,3.4vw,56px);
  --gv-measure:34em;

  --gv-fs-display:clamp(36px,4.2vw,56px);
  --gv-fs-h2:clamp(26px,2.6vw,36px);
  --gv-fs-h3:20px;
  --gv-fs-lead:17px;
  --gv-fs-body:.95rem;
  --gv-fs-small:14px;
  --gv-fs-meta:13px;

  font-family:var(--font);
  font-size:var(--gv-fs-body);
  line-height:1.7;
  color:var(--gv-ink);
}
.gv-abb *,.gv-abb *::before,.gv-abb *::after{box-sizing:border-box}
.gv-abb [id^="gv-"]{scroll-margin-top:var(--gv-anchor-offset,24px)}

/* ---- type ---------------------------------------------------------- */
.gv-abb h1,.gv-abb h2,.gv-abb h3{font-family:var(--font);font-weight:600;color:inherit;margin:0;letter-spacing:-.012em}
.gv-abb h2{font-size:var(--gv-fs-h2);line-height:1.18;margin-bottom:16px;text-wrap:balance}
.gv-abb h3{font-size:var(--gv-fs-h3);line-height:1.3;margin-bottom:8px}
.gv-abb p{margin:0 0 1em}
.gv-abb p:last-child{margin-bottom:0}
.gv-abb ul,.gv-abb ol,.gv-abb dl,.gv-abb dd{margin:0;padding:0;list-style:none}
.gv-abb strong{font-weight:600;color:inherit}
.gv-abb a:not(.gv-btn){color:var(--gv-red);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gv-abb a:not(.gv-btn):hover{text-decoration-thickness:2px}
.gv-abb :focus-visible{outline:3px solid var(--gv-red);outline-offset:3px;border-radius:2px}
.gv-abb .gv-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gv-abb svg{flex:none}

/* ---- sections ------------------------------------------------------ */
.gv-abb .gv-sec{padding-top:var(--gv-sec);padding-bottom:var(--gv-sec)}
.gv-abb .gv-sec--flush{padding-top:0}
.gv-abb .gv-sec--wash{background:var(--gv-wash)}
.gv-abb .gv-head{margin-bottom:clamp(26px,3vw,40px)}
.gv-abb .gv-head h2{max-width:24ch}
.gv-abb .gv-head p{max-width:var(--gv-measure);color:var(--gv-muted)}
.gv-abb .gv-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---- layouts ------------------------------------------------------- */
/* text at reading width + a media/panel column; the gutter absorbs spare width */
.gv-abb .gv-duo{display:grid;grid-template-columns:minmax(0,var(--gv-measure)) minmax(300px,480px);justify-content:space-between;column-gap:var(--gv-gap);row-gap:32px;align-items:center}
.gv-abb .gv-duo--media-left{grid-template-columns:minmax(300px,480px) minmax(0,var(--gv-measure))}
.gv-abb .gv-duo--media-left>.gv-duo__text{grid-column:2;grid-row:1}
.gv-abb .gv-duo--media-left>.gv-art{grid-column:1;grid-row:1}
/* single reading column, centred, used when a 4:5 image slot is empty */
.gv-abb .gv-solo{max-width:var(--gv-measure);margin-left:auto;margin-right:auto}
.gv-abb .gv-solo--wide{max-width:calc(var(--gv-measure) + 168px)}
/* two text columns of equal weight */
.gv-abb .gv-split{display:grid;grid-template-columns:repeat(2,minmax(0,var(--gv-measure)));justify-content:space-between;column-gap:var(--gv-gap);align-items:center}

/* ---- image slots --------------------------------------------------- */
.gv-abb .gv-art{position:relative;margin:0;overflow:hidden;background:rgb(var(--thm1-rgb) / .08)}
.gv-abb .gv-art picture{display:contents}
.gv-abb .gv-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;object-position:var(--fp,50% 50%)}
.gv-abb .gv-art--portrait{aspect-ratio:4/5;border-radius:var(--gv-radius)}
.gv-abb .gv-art--landscape{aspect-ratio:var(--ar,16/9)}
.gv-abb .gv-art--hero{--fp:70% 50%}
.gv-abb .gv-art--local{--fp:50% 50%}
.gv-abb .gv-art--residential{--fp:50% 40%}
.gv-abb .gv-art--commercial{--fp:50% 50%}
.gv-abb .gv-art--inspection{--fp:45% 40%}
.gv-abb .gv-art--moss{--fp:50% 55%}

/* ---- buttons (mirror main.min.css .btn-black / .btn-o-thm) ---------- */
.gv-abb .gv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  padding:12px 24px;border:2px solid transparent;border-radius:var(--gv-radius-sm);
  font-family:var(--font);font-weight:600;font-size:var(--gv-fs-small);line-height:1.2;text-align:center;text-decoration:none;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease}
.gv-abb .gv-btn svg{transition:transform .16s ease}
.gv-abb .gv-btn--primary{background:var(--black);border-color:var(--black);color:var(--white)}
.gv-abb .gv-dark .gv-btn--primary{background:var(--gv-red);border-color:var(--gv-red)}
.gv-abb .gv-btn--secondary{background:transparent;border-color:var(--gv-red);color:var(--gv-red)}
.gv-abb .gv-btn--light{background:transparent;border-color:rgb(var(--white-rgb) / .75);color:var(--white)}
@media (hover:hover){
  .gv-abb .gv-btn:hover svg{transform:translateX(3px)}
  .gv-abb .gv-btn--primary:hover{background:transparent;border-color:var(--black);color:var(--black)}
  .gv-abb .gv-btn--secondary:hover{background:var(--gv-red);color:var(--white)}
  .gv-abb .gv-btn--light:hover{background:var(--white);border-color:var(--white);color:var(--gv-ink)}
  .gv-abb .gv-dark .gv-btn--primary:hover{background:var(--white);border-color:var(--white);color:var(--gv-ink)}
}
.gv-abb .gv-btn--call{flex-direction:column;gap:2px;padding-top:9px;padding-bottom:9px}
.gv-abb .gv-btn__sub{font-family:var(--font);font-weight:600;font-size:var(--gv-fs-meta);opacity:.9}
.gv-abb .gv-dark :focus-visible{outline-color:var(--white)}

/* ---- breadcrumb ---------------------------------------------------- */
.gv-abb .gv-crumbbar{background:var(--gv-surface);border-bottom:1px solid var(--gv-line)}
.gv-abb .gv-crumbbar .container{padding-top:8px;padding-bottom:8px;font-size:var(--gv-fs-meta);line-height:1.5;color:var(--gv-muted)}
.gv-abb .gv-crumbbar a{display:inline-block;padding:4px 0;min-width:24px;color:var(--gv-muted)!important;text-decoration:none!important}
.gv-abb .gv-crumbbar a:hover{color:var(--gv-red)!important;text-decoration:underline!important}
.gv-abb .gv-crumbbar ol{display:flex;flex-wrap:wrap;gap:4px 8px}
.gv-abb .gv-crumbbar li+li::before{content:"/";margin-right:8px;color:var(--gv-line-2)}
.gv-abb .gv-crumbbar [aria-current]{color:var(--gv-ink)}

/* ---- hero ---------------------------------------------------------- */
.gv-abb .gv-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--gv-ink);color:var(--white)}
.gv-abb .gv-hero .gv-art{position:absolute;inset:0;z-index:-2;background:var(--gv-ink)}
.gv-abb .gv-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgb(var(--thm1-rgb) / 0) 55%,rgb(var(--thm1-rgb) / .55) 100%),
    linear-gradient(90deg,rgb(var(--thm1-rgb) / .96) 0%,rgb(var(--thm1-rgb) / .90) 34%,rgb(var(--thm1-rgb) / .45) 60%,rgb(var(--thm1-rgb) / .05) 100%)}
.gv-abb .gv-hero__in{max-width:640px;padding-top:clamp(28px,5vw,76px);padding-bottom:clamp(28px,4.5vw,64px)}
.gv-abb .gv-hero__bar{display:block;width:56px;height:4px;background:var(--gv-red);margin-bottom:clamp(16px,2vw,22px)}
.gv-abb .gv-hero h1{font-size:var(--gv-fs-display);line-height:1.05;letter-spacing:-.022em;color:var(--white);text-wrap:balance}
.gv-abb .gv-hero p{font-size:var(--gv-fs-lead);line-height:1.6;color:rgb(var(--white-rgb) / .9);max-width:var(--gv-measure);margin-top:clamp(14px,1.6vw,20px)}
.gv-abb .gv-hero .gv-actions{margin-top:clamp(22px,2.4vw,30px)}
.gv-abb .gv-jump{border-top:1px solid rgb(var(--white-rgb) / .18)}
.gv-abb .gv-jump ul{display:flex;gap:clamp(18px,2.8vw,40px)}
.gv-abb .gv-jump a{display:flex;align-items:center;justify-content:center;min-height:56px;min-width:44px;
  color:rgb(var(--white-rgb) / .88)!important;text-decoration:none!important;font-family:var(--font);font-weight:500;font-size:var(--gv-fs-small);
  white-space:nowrap;border-bottom:2px solid transparent}
.gv-abb .gv-jump a:hover{color:var(--white)!important;border-bottom-color:var(--gv-red)}
/* The list becomes a scroll container below 992 and the links fill its height
   exactly, so a +3px outline offset is clipped top and bottom. Inset it. */
.gv-abb .gv-jump a:focus-visible{outline-offset:-3px}

/* ---- at a glance --------------------------------------------------- */
.gv-abb .gv-strip-sec{padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(8px,1.5vw,16px)}
.gv-abb .gv-strip{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px var(--gv-gap);align-items:center;
  background:var(--gv-wash);border-radius:var(--gv-radius);padding:clamp(20px,2.6vw,32px)}
.gv-abb .gv-strip h2{font-size:var(--gv-fs-h3);margin-bottom:8px}
.gv-abb .gv-strip__intro p{font-size:var(--gv-fs-small);line-height:1.6;color:var(--gv-muted)}
.gv-abb .gv-strip ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--gv-line);border:1px solid var(--gv-line);border-radius:var(--gv-radius-sm);overflow:hidden}
.gv-abb .gv-strip li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:16px 18px;background:var(--gv-surface)}
.gv-abb .gv-strip li svg{width:32px;height:32px}
.gv-abb .gv-strip h3{font-size:var(--gv-fs-body);line-height:1.3;margin-bottom:2px}
.gv-abb .gv-strip li p{font-size:var(--gv-fs-small);line-height:1.45;color:var(--gv-muted)}

/* ---- why local conditions ------------------------------------------ */
.gv-abb .gv-callout{display:flex;align-items:flex-start;gap:14px;margin-top:26px;padding:20px 22px;background:var(--gv-wash);
  border-left:4px solid var(--gv-red);border-radius:var(--gv-radius-sm)}
.gv-abb .gv-sec--wash .gv-callout{background:var(--gv-surface)}
.gv-abb .gv-callout p{font-family:var(--font);font-weight:500;font-size:var(--gv-fs-lead);line-height:1.5;color:var(--gv-ink)}

/* ---- cost: one panel, two parts ------------------------------------ */
.gv-abb .gv-costpanel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--gv-wash);border-radius:var(--gv-radius);overflow:hidden}
.gv-abb .gv-costpanel__main,.gv-abb .gv-costpanel__drivers{padding:clamp(28px,3.4vw,52px)}
.gv-abb .gv-costpanel__main{align-self:center}
.gv-abb .gv-costpanel__main h2{max-width:18ch}
.gv-abb .gv-costpanel__main p{max-width:var(--gv-measure)}
.gv-abb .gv-costpanel__drivers{position:relative}
.gv-abb .gv-costpanel__drivers::before{content:"";position:absolute;left:0;top:clamp(28px,3.4vw,52px);bottom:clamp(28px,3.4vw,52px);width:1px;background:var(--gv-line-2)}
.gv-abb .gv-costpanel__drivers h3{margin-bottom:14px}
.gv-abb .gv-drivers{counter-reset:gvd}
.gv-abb .gv-drivers li{counter-increment:gvd;display:grid;grid-template-columns:30px 1fr;gap:14px;padding:9px 0}
.gv-abb .gv-drivers li::before{content:counter(gvd);content:counter(gvd) / "";width:28px;height:28px;border-radius:50%;background:var(--gv-red);color:var(--white);
  display:grid;place-items:center;font-family:var(--font);font-weight:600;font-size:var(--gv-fs-meta);margin-top:1px}
.gv-abb .gv-drivers strong{display:block;font-family:var(--font);font-size:var(--gv-fs-body);line-height:1.35}
.gv-abb .gv-drivers span{display:block;font-size:var(--gv-fs-small);line-height:1.5;color:var(--gv-muted);margin-top:2px}

/* ---- permits ------------------------------------------------------- */
.gv-abb .gv-permit__panel{justify-self:end;width:100%;background:var(--gv-wash);border-radius:var(--gv-radius);padding:clamp(24px,3vw,36px)}
.gv-abb .gv-permit__panel svg{margin-bottom:12px}
.gv-abb .gv-permit__answer{font-family:var(--font);font-weight:600;font-size:clamp(21px,1.9vw,27px);line-height:1.3;
  color:var(--gv-ink);max-width:none;margin:0 0 20px;padding-left:18px;border-left:3px solid var(--gv-red)}
.gv-abb #gv-permits .gv-duo__text>p:not(.gv-permit__answer){max-width:var(--gv-measure)}
.gv-abb #gv-permits h2{margin-bottom:18px}
@media (min-width:992px){
  /* Must stay wrapped: #gv-permits outranks the 991.98 single-column rule on
     .gv-duo, so an unguarded override would break the mobile stack. */
  .gv-abb #gv-permits .gv-duo{grid-template-columns:minmax(0,60fr) minmax(0,40fr);
    justify-content:normal;column-gap:clamp(32px,4vw,72px);align-items:start}
}

/* ---- property types ------------------------------------------------ */
.gv-abb .gv-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.gv-abb .gv-type{display:flex;flex-direction:column;background:var(--gv-surface);border-radius:var(--gv-radius);overflow:hidden}
.gv-abb .gv-type__body{padding:clamp(24px,2.6vw,34px)}

/* ---- materials table ----------------------------------------------- */
.gv-abb .gv-note{font-size:var(--gv-fs-meta);color:var(--gv-muted);margin:-14px 0 14px;max-width:var(--gv-measure)}
.gv-abb .gv-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--gv-line);border-radius:var(--gv-radius);overflow:hidden;font-size:var(--gv-fs-small);line-height:1.55}
.gv-abb .gv-table th,.gv-abb .gv-table td{text-align:left;vertical-align:top;padding:16px 20px}
.gv-abb .gv-table thead th{background:var(--gv-ink);color:var(--white);font-family:var(--font);font-weight:600;font-size:var(--gv-fs-meta);line-height:1.35;padding-top:14px;padding-bottom:14px}
.gv-abb .gv-table tbody th,.gv-abb .gv-table tbody td{border-top:1px solid var(--gv-line)}
.gv-abb .gv-table tbody tr:first-child th,.gv-abb .gv-table tbody tr:first-child td{border-top:0}
.gv-abb .gv-table tbody tr:nth-child(even){background:rgb(var(--thm1-rgb) / .025)}
.gv-abb .gv-table tbody th{font-family:var(--font);font-weight:600;font-size:var(--gv-fs-body);width:18%}
@media (min-width:992px){
  /* Column hierarchy. The Abbotsford notes carry the most content, so they take
     the remainder. Maintenance is pinned at its min-content width because
     td:nth-child(4) is nowrap; without the pin it squeezes the notes column.
     The min-width on column 2 keeps "Typical service life (approx.)" on two
     lines at 1024 instead of three. Scoped to >=992 so none of it reaches the
     clipped thead once the table becomes cards. */
  .gv-abb #gv-materials .gv-table thead th:nth-child(1){width:17%}
  .gv-abb #gv-materials .gv-table thead th:nth-child(2){width:13%;min-width:156px}
  .gv-abb #gv-materials .gv-table thead th:nth-child(3){width:16%}
  .gv-abb #gv-materials .gv-table thead th:nth-child(4){width:150px}
}
.gv-abb .gv-table td:nth-child(4){white-space:nowrap}
.gv-abb .gv-table .gv-life{font-family:var(--font);font-weight:600;font-size:var(--gv-fs-body);white-space:nowrap}
.gv-abb .gv-level{display:inline-flex;gap:3px;margin-right:9px;vertical-align:1px}
.gv-abb .gv-level i{width:14px;height:6px;border-radius:2px;background:var(--gv-line-2)}
.gv-abb .gv-level--1 i:nth-child(-n+1),.gv-abb .gv-level--2 i:nth-child(-n+2),.gv-abb .gv-level--3 i:nth-child(-n+3){background:var(--gv-ink)}

/* ---- moss guidance ------------------------------------------------- */
.gv-abb .gv-guide li{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--gv-line-2)}
.gv-abb .gv-guide li:last-child{border-bottom:1px solid var(--gv-line-2)}
.gv-abb .gv-guide li.gv-guide__caution{background:var(--gv-surface);border:1px solid var(--gv-line);border-left:4px solid var(--gv-ink);border-radius:var(--gv-radius-sm);padding:16px 18px;margin:6px 0}
.gv-abb .gv-guide li.gv-guide__caution+li{border-top:0}
.gv-abb .gv-duo__text .gv-guide{margin-top:22px}

/* ---- inspection ---------------------------------------------------- */
.gv-abb .gv-insp{margin-top:8px}
.gv-abb .gv-insp>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:16px 0;border-top:1px solid var(--gv-line-2)}
.gv-abb .gv-insp dt{font-family:var(--font);font-weight:600;font-size:var(--gv-fs-meta);line-height:1.5;color:var(--gv-red);padding-top:3px}
.gv-abb .gv-insp dd p+p{margin-top:8px}
.gv-abb .gv-insp-cta{margin-top:18px;padding-top:18px;border-top:1px solid var(--gv-line-2)}
.gv-abb .gv-insp-cta .gv-actions{margin-top:16px}
@media (min-width:992px) and (max-width:1199.98px){
  /* In this band the text column is 421px, so a 150px label column leaves the
     explanation at ~30 characters per line. Stack the label instead, matching
     the existing <768px behaviour. Scoped to #gv-inspection: .gv-duo and
     .gv-art--portrait are shared with the locked local and moss sections. */
  .gv-abb #gv-inspection .gv-insp>div{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* ---- replacement process ------------------------------------------- */
.gv-abb .gv-process-panel{margin-top:clamp(40px,5vw,64px);background:var(--gv-ink);color:var(--white);border-radius:var(--gv-radius);padding:clamp(28px,4vw,56px)}
.gv-abb .gv-process-panel>h3{margin-bottom:6px;color:var(--white)}
.gv-abb .gv-process-panel>p{color:rgb(var(--white-rgb) / .78);margin-bottom:34px}
.gv-abb .gv-process{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;counter-reset:gvp}
.gv-abb .gv-process li{position:relative;counter-increment:gvp;padding-top:62px}
.gv-abb .gv-process li::before{content:counter(gvp,decimal-leading-zero);content:counter(gvp,decimal-leading-zero) / "";
  position:absolute;top:0;left:0;width:44px;height:44px;border:2px solid var(--gv-red);border-radius:50%;
  display:grid;place-items:center;background:var(--gv-ink);color:var(--white);font-family:var(--font);font-weight:600;font-size:var(--gv-fs-meta)}
.gv-abb .gv-process li::after{content:"";position:absolute;top:21px;left:56px;right:-12px;height:2px;background:rgb(var(--white-rgb) / .22)}
.gv-abb .gv-process li:last-child::after{display:none}
.gv-abb .gv-process p{font-size:var(--gv-fs-small);line-height:1.55;color:rgb(var(--white-rgb) / .84)}
.gv-abb .gv-process strong{font-family:var(--font);color:var(--white)}

/* ---- repair vs replacement ----------------------------------------- */
.gv-abb .gv-decide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--gv-line);border-radius:var(--gv-radius);overflow:hidden;background:var(--gv-surface)}
.gv-abb .gv-decide__opt{display:flex;flex-direction:column;gap:22px;padding:clamp(26px,3vw,40px)}
.gv-abb .gv-decide__opt+.gv-decide__opt{border-left:1px solid var(--gv-line)}
.gv-abb .gv-decide__opt--third{background:var(--gv-wash)}
.gv-abb .gv-decide h3{min-height:2.6em}
.gv-abb .gv-diagram{display:block;width:100%;max-width:230px;height:auto}

/* ---- maintenance calendar ------------------------------------------ */
.gv-abb .gv-cal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.gv-abb .gv-cal__item{position:relative;padding-top:74px}
.gv-abb .gv-cal__mark{position:absolute;top:0;left:0;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--gv-ink);color:var(--white)}
.gv-abb .gv-cal__item:first-child::after{content:"";position:absolute;top:25px;left:66px;right:-40px;height:2px;background:var(--gv-ink)}
.gv-abb .gv-cal__item:nth-child(2)::after{content:"";position:absolute;top:25px;left:66px;right:0;height:2px;
  background:linear-gradient(90deg,var(--gv-ink),rgb(var(--thm1-rgb) / 0))}
.gv-abb .gv-cal__item--event .gv-cal__mark{background:var(--gv-surface);color:var(--gv-ink);border:2px dashed var(--gv-ink)}
.gv-abb .gv-cal h3{margin-bottom:14px;max-width:24ch;min-height:2.6em}
.gv-abb .gv-tasks li{position:relative;padding:9px 0 9px 26px;border-top:1px solid var(--gv-line);line-height:1.5}
.gv-abb .gv-tasks li::before{content:"";position:absolute;left:0;top:16px;width:12px;height:12px;border:2px solid var(--gv-red);border-radius:2px}
.gv-abb .gv-after{margin-top:36px;color:var(--gv-muted)}

/* ---- warranty ------------------------------------------------------ */
.gv-abb .gv-warranty{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.gv-abb .gv-warranty__col{background:var(--gv-surface);border-radius:var(--gv-radius);padding:clamp(26px,3.2vw,44px);border-top:4px solid var(--gv-ink)}
.gv-abb .gv-warranty__col+.gv-warranty__col{border-top-color:var(--gv-red)}
.gv-abb .gv-warranty__col p,.gv-abb .gv-type__body p{max-width:var(--gv-measure)}
.gv-abb .gv-checks{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:12px 32px;margin-top:28px;align-items:start}
.gv-abb .gv-checks>p{font-family:var(--font);font-weight:600;line-height:1.5}
.gv-abb .gv-checks ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px}
.gv-abb .gv-checks li{font-size:var(--gv-fs-small);line-height:1.55;padding-top:10px;border-top:1px solid var(--gv-line-2)}

/* ---- FAQ ----------------------------------------------------------- */
.gv-abb .gv-faq{max-width:900px;margin:0 auto}
.gv-abb .gv-faq__list{display:flex;flex-direction:column;gap:12px}
.gv-abb .gv-faq details{border:1px solid var(--gv-ink);border-radius:var(--gv-radius-sm);background:var(--gv-ink);overflow:hidden}
.gv-abb .gv-faq details[open]{background:var(--gv-surface);border-color:var(--gv-line-2)}
.gv-abb .gv-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:16px 22px;
  cursor:pointer;list-style:none;color:var(--white);font-family:var(--font);font-weight:600;font-size:var(--gv-fs-body);line-height:1.4}
.gv-abb .gv-faq summary::-webkit-details-marker{display:none}
.gv-abb .gv-faq summary:focus-visible{outline-offset:-5px;outline-color:var(--white)}
.gv-abb .gv-faq details[open] summary{color:var(--gv-ink)}
.gv-abb .gv-faq details[open] summary:focus-visible{outline-color:var(--gv-red)}
.gv-abb .gv-faq__icon{width:34px;height:34px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;transition:transform .18s ease}
.gv-abb .gv-faq details[open] .gv-faq__icon{transform:rotate(45deg);color:var(--gv-red)}
@media (hover:hover){.gv-abb .gv-faq details:not([open]) summary:hover{background:rgb(var(--white-rgb) / .06)}}
.gv-abb .gv-faq__a{padding:0 22px 24px}
.gv-abb .gv-faq__a p{max-width:var(--gv-measure)}

/* ---- final CTA + nearby -------------------------------------------- */
.gv-abb .gv-final{background:var(--gv-ink);color:var(--white);padding-top:clamp(56px,5.5vw,84px);padding-bottom:clamp(56px,5.5vw,84px)}
.gv-abb .gv-final__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gv-gap);align-items:center}
.gv-abb .gv-final h2{color:var(--white);max-width:26ch}
.gv-abb .gv-final p{color:rgb(var(--white-rgb) / .84);max-width:var(--gv-measure)}
.gv-abb .gv-final .gv-nearby{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid rgb(var(--white-rgb) / .16);
  font-size:var(--gv-fs-small);color:rgb(var(--white-rgb) / .72)}
.gv-abb .gv-final .gv-nearby svg{color:var(--gv-red)}
.gv-abb .gv-final__actions{display:flex;flex-direction:column;gap:12px;max-width:380px;justify-self:end;width:100%}
.gv-abb .gv-final__actions .gv-btn{width:100%}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1199.98px){
  .gv-abb .gv-process{grid-template-columns:1fr;gap:0;max-width:760px}
  .gv-abb .gv-process li{padding:0 0 28px 66px;min-height:72px}
  .gv-abb .gv-process li::after{top:50px;bottom:4px;left:21px;right:auto;width:2px;height:auto}
  .gv-abb .gv-process li:last-child{padding-bottom:0}
  .gv-abb .gv-checks{grid-template-columns:1fr}
}
@media (max-width:991.98px){
  .gv-abb{--gv-anchor-offset:16px}
  .gv-abb .gv-strip,.gv-abb .gv-duo,.gv-abb .gv-duo--media-left,.gv-abb .gv-split,.gv-abb .gv-final__in,.gv-abb .gv-costpanel{grid-template-columns:minmax(0,1fr)}
  .gv-abb .gv-duo--media-left>.gv-duo__text,.gv-abb .gv-duo--media-left>.gv-art{grid-column:auto;grid-row:auto}
  .gv-abb .gv-duo .gv-art--portrait{justify-self:start;width:min(100%,480px)}
  .gv-abb .gv-permit__panel{justify-self:start;max-width:var(--gv-measure)}
  .gv-abb .gv-split{row-gap:24px}
  .gv-abb .gv-costpanel__drivers{padding-top:0}
  .gv-abb .gv-costpanel__drivers::before{left:clamp(28px,3.4vw,52px);right:clamp(28px,3.4vw,52px);top:0;bottom:auto;width:auto;height:1px}
  .gv-abb .gv-costpanel__drivers h3{padding-top:26px}
  .gv-abb .gv-decide{grid-template-columns:minmax(0,1fr)}
  .gv-abb .gv-decide__opt{display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:28px}
  .gv-abb .gv-decide__opt+.gv-decide__opt{border-left:0;border-top:1px solid var(--gv-line)}
  .gv-abb .gv-decide h3{min-height:0}
  .gv-abb .gv-cal{grid-template-columns:minmax(0,1fr);gap:0;max-width:640px}
  .gv-abb .gv-cal__item{padding:0 0 36px 76px;min-height:88px}
  .gv-abb .gv-cal h3{min-height:0;padding-top:12px}
  .gv-abb .gv-cal__item:first-child::after,.gv-abb .gv-cal__item:nth-child(2)::after{top:60px;bottom:6px;left:25px;right:auto;width:2px;height:auto;background:var(--gv-ink)}
  .gv-abb .gv-cal__item:last-child{padding-bottom:0}
  .gv-abb .gv-final__actions{justify-self:start}
  .gv-abb .gv-jump{margin-left:calc(var(--bs-gutter-x,1.5rem) * -.5);margin-right:calc(var(--bs-gutter-x,1.5rem) * -.5)}
  .gv-abb .gv-jump ul{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 calc(var(--bs-gutter-x,1.5rem) * .5);
    -webkit-mask-image:linear-gradient(90deg,rgb(var(--thm1-rgb)) 85%,transparent);mask-image:linear-gradient(90deg,rgb(var(--thm1-rgb)) 85%,transparent)}
  .gv-abb .gv-jump ul::-webkit-scrollbar{display:none}
  .gv-abb .gv-jump li:last-child{padding-right:48px}
  /* materials: one card per material; ARIA roles on the markup keep table semantics */
  .gv-abb .gv-table,.gv-abb .gv-table thead,.gv-abb .gv-table tbody,.gv-abb .gv-table tr,.gv-abb .gv-table th,.gv-abb .gv-table td{display:block;width:auto}
  .gv-abb .gv-table{border:0;border-radius:0;overflow:visible}
  .gv-abb .gv-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .gv-abb .gv-table tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .gv-abb .gv-table tbody tr{border:1px solid var(--gv-line);border-radius:var(--gv-radius);overflow:hidden;background:var(--gv-surface)!important}
  .gv-abb .gv-table tbody th{width:auto;background:var(--gv-ink);color:var(--white);border-top:0!important;padding:14px 18px}
  .gv-abb .gv-table tbody td{padding:12px 18px;border-top:1px solid var(--gv-line)!important;white-space:normal}
  .gv-abb .gv-table tbody tr td:nth-child(2){border-top:0!important}
  .gv-abb .gv-table td::before{content:attr(data-l);display:block;font-family:var(--font);font-weight:600;font-size:var(--gv-fs-meta);line-height:1.4;color:var(--gv-muted);margin-bottom:2px}
}
@media (max-width:767.98px){
  .gv-abb{--gv-fs-lead:16px}
  .gv-abb .gv-hero::after{background:linear-gradient(180deg,rgb(var(--thm1-rgb) / .82) 0%,rgb(var(--thm1-rgb) / .90) 55%,rgb(var(--thm1-rgb) / .96) 100%)}
  .gv-abb .gv-art--hero{--fp:78% 45%}
  .gv-abb .gv-jump a{min-height:48px}
  .gv-abb .gv-btn{min-height:48px;padding-top:10px;padding-bottom:10px}
  .gv-abb .gv-types{grid-template-columns:minmax(0,1fr)}
  .gv-abb .gv-warranty{grid-template-columns:minmax(0,1fr)}
  .gv-abb .gv-checks ul{grid-template-columns:minmax(0,1fr)}
  .gv-abb .gv-decide__opt{grid-template-columns:minmax(0,1fr);gap:18px}
  .gv-abb .gv-diagram{max-width:180px}
  .gv-abb .gv-insp>div{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media (max-width:575.98px){
  .gv-abb .container{padding-left:20px;padding-right:20px}
  .gv-abb .gv-jump{margin-left:-20px;margin-right:-20px}
  .gv-abb .gv-jump ul{padding:0 20px}
  .gv-abb .gv-strip ul{gap:1px}
  .gv-abb .gv-strip li{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px}
  .gv-abb .gv-strip li svg{width:24px;height:24px}
  .gv-abb .gv-strip h3{font-size:var(--gv-fs-small)}
  .gv-abb .gv-strip li p{font-size:var(--gv-fs-meta);line-height:1.4}
  .gv-abb .gv-strip{padding:16px;gap:14px}
  .gv-abb .gv-table tbody{grid-template-columns:minmax(0,1fr)}
  .gv-abb .gv-hero .gv-actions .gv-btn,.gv-abb .gv-costpanel .gv-btn,.gv-abb .gv-types-cta .gv-btn,.gv-abb .gv-insp-cta .gv-btn{width:100%}
  .gv-abb .gv-hero .gv-actions{gap:10px}
  .gv-abb .gv-faq summary{padding:14px 18px}
  .gv-abb .gv-faq__a{padding:0 18px 20px}
  .gv-abb .gv-cal__item{padding-left:68px}
}
@media (max-width:359.98px){
  .gv-abb .gv-strip ul{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .gv-abb *,.gv-abb *::before,.gv-abb *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

.gv-abb .gv-type__body h3 a{color:inherit;text-decoration:none}
@media (hover:hover){.gv-abb .gv-type__body h3 a:hover{color:var(--gv-red)}}

/* ==========================================================================
   Abbotsford hub — "Roofing by property type"
   CONSOLIDATED 14 Sep 2026. Replaces every earlier appended block for this
   section. GoodVans tokens only; every selector scoped under .gv-abb.

   DOM this targets (correction-pass markup):
     section#gv-property > .container
        > p.gv-types__eyebrow
        > div.gv-head > h2#gv-types-h
        > p.gv-types__intro
        > div.gv-types > article.gv-type ×3
   The eyebrow and intro are SIBLINGS of .gv-head, not children, so the
   two-column header grid is applied to .container, not to .gv-head.
   ========================================================================== */

/* ---- header: eyebrow, heading left, intro right with a divider ---------- */
.gv-abb .gv-types__eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 10px;
  font-family:var(--font);font-weight:600;font-size:12.5px;line-height:1.2;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gv-muted)}
.gv-abb .gv-types__eyebrow::before{content:"";width:34px;height:2px;background:var(--gv-red)}
.gv-abb .gv-types__intro{margin:0;color:var(--gv-muted)}
.gv-abb #gv-property .gv-head{margin-bottom:0}
.gv-abb #gv-property .gv-head h2{margin-bottom:0;max-width:20ch}

@media (min-width:768px){
  /* Two-column header grid on .gv-head, whose children ARE the h2 and the
     intro. fr columns fill the row, so no trailing void. The intro's own
     max-width is dropped: .gv-abb .gv-head p (0,2,1) outranks a class-only
     rule, so the column is what governs its measure. */
  .gv-abb .gv-types__eyebrow{margin-bottom:10px}
  .gv-abb #gv-property .gv-head{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);
    column-gap:clamp(28px,4vw,64px);align-items:stretch;
    margin-bottom:clamp(30px,2.6vw,38px)}
  .gv-abb #gv-property .gv-head h2{max-width:none;margin:0}
  .gv-abb #gv-property .gv-head .gv-types__intro{max-width:none;padding-top:7px;
    padding-left:clamp(20px,2.4vw,32px);border-left:1px solid var(--gv-line-2)}
}
@media (max-width:767.98px){
  .gv-abb #gv-property .gv-head h2{margin-bottom:10px}
  .gv-abb .gv-types__intro{font-size:var(--gv-fs-small);margin-bottom:clamp(22px,3vw,30px)}
}

/* ---- the three cards ---------------------------------------------------- */
.gv-abb .gv-types{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.gv-abb .gv-type{position:relative;border:1px solid var(--gv-line);border-radius:16px;
  transition:border-color .16s ease,box-shadow .16s ease}
.gv-abb .gv-type .gv-art{aspect-ratio:16/9}
.gv-abb .gv-type__body{display:flex;flex-direction:column;flex:1}

/* title row: icon badge + heading */
.gv-abb .gv-type__head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.gv-abb .gv-type__head h3{margin:0}
.gv-abb .gv-type__icon{flex:none;display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;background:rgb(var(--thm-rgb) / .08);color:var(--gv-red)}
.gv-abb .gv-type__icon svg{width:22px;height:22px}
.gv-abb .gv-type__body h3 a{color:inherit;text-decoration:none}
.gv-abb .gv-type__body h3 a::after{content:"";position:absolute;inset:0}
/* The stretched overlay above paints over the card body, which blocked the
   editorial links inside the paragraphs. Raise them back above it. */
.gv-abb .gv-type__body p a{position:relative;z-index:1}
.gv-abb .gv-type__body > p{margin-bottom:16px}

/* tick list, pinned to the bottom so all three cards align */
.gv-abb .gv-type__list{margin:auto 0 0;padding:0;list-style:none;display:grid;gap:10px}
.gv-abb .gv-type__list li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;
  font-size:var(--gv-fs-small);line-height:1.5}
.gv-abb .gv-type__list li svg{width:14px;height:14px;padding:4px;box-sizing:content-box;
  border-radius:50%;background:rgb(var(--thm-rgb) / .08);color:var(--gv-red)}

/* cue */
.gv-abb .gv-type__more{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;
  font-family:var(--font);font-weight:600;font-size:var(--gv-fs-small);color:var(--gv-red)}
.gv-abb .gv-type__more svg{transition:transform .16s ease}

/* strata is a normal card, not the old dark full-width panel */

@media (hover:hover){
  .gv-abb .gv-type:hover{border-color:var(--gv-line-2);box-shadow:0 6px 20px rgb(var(--thm1-rgb) / .07)}
  .gv-abb .gv-type:hover .gv-type__more svg{transform:translateX(3px)}
  .gv-abb .gv-type__body h3 a:hover{color:var(--gv-red)}
}
@media (max-width:991.98px){.gv-abb .gv-types{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767.98px){.gv-abb .gv-types{grid-template-columns:minmax(0,1fr)}}

/* ---------- generic Level 1: responsive focal override ---------- */
@media (max-width:767.98px){
  .gv-abb .gv-art img{object-position:var(--fp-mobile,var(--fp,50% 50%))}
  .gv-abb .gv-hero__media img{object-position:var(--fp-mobile,var(--fp,50% 50%))}
}

@media (max-width:767.98px){.gv-abb .gv-art[style*="--fp-mobile"] img{object-position:var(--fp-mobile)}}