/* =========================================================================
   SURREY ROOFING AUTHORITY — DESIGN SYSTEM
   Signature element: the "roofline" — a repeated pitched-roof silhouette
   used as a section divider, in the logomark, and as a data-table motif.
   Palette is storm-slate + PNW moss + safety-amber (not the default
   cream/terracotta AI look). Display face: Fraunces. Body: IBM Plex Sans.
   Data/cost face: IBM Plex Mono.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* color tokens */
  --ink:#12171C;
  --slate:#2B3844;
  --slate-2:#4C5C68;
  --fog:#EEF1F0;
  --fog-2:#E3E8E6;
  --line:#D3DAD8;
  --white:#FFFFFF;
  --amber:#D98A1F;
  --amber-dark:#B6720F;
  --moss:#3E5A45;
  --moss-light:#6B8770;
  --danger:#A63D2F;

  /* type */
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;

  /* scale */
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3rem);
  --step-4: clamp(2.6rem, 2rem + 3vw, 4.2rem);

  --radius: 3px;
  --shadow-1: 0 1px 2px rgba(18,23,28,0.06), 0 1px 1px rgba(18,23,28,0.04);
  --shadow-2: 0 8px 24px rgba(18,23,28,0.12);
  --max: 1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.1;
  margin:0 0 0.5em;
  font-weight:600;
}
h1{font-size:var(--step-4); font-weight:600;}
h2{font-size:var(--step-3);}
h3{font-size:var(--step-2);}
h4{font-size:var(--step-1);}
p{margin:0 0 1.1em;}
a{color:var(--moss); text-decoration-thickness:1px; text-underline-offset:2px;}
a:hover{color:var(--amber-dark);}
img{max-width:100%; display:block;}
ul,ol{padding-left:1.2em;}
.container{max-width:var(--max); margin:0 auto; padding:0 24px;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}

/* =========== ROOFLINE SIGNATURE DIVIDER =========== */
.roofline{
  height:28px;
  width:100%;
  background:
    linear-gradient(135deg, transparent 49.3%, var(--white) 50%),
    linear-gradient(45deg, var(--white) 49.3%, transparent 50%);
  background-size:36px 28px;
  background-repeat:repeat-x;
  background-color:var(--ink);
}
.roofline.flip{transform:rotate(180deg);}
.roofline--fog{background-color:var(--fog);}
.roofline--onfog{
  background:
    linear-gradient(135deg, transparent 49.3%, var(--fog) 50%),
    linear-gradient(45deg, var(--fog) 49.3%, transparent 50%);
  background-size:36px 28px;background-repeat:repeat-x;background-color:var(--white);
}

/* =========== SKIP LINK =========== */
.skip-link{
  position:absolute; left:8px; top:-48px; background:var(--ink); color:var(--white);
  padding:10px 16px; border-radius:var(--radius); z-index:1000; transition:top .15s;
}
.skip-link:focus{top:8px;}

/* =========== TOP UTILITY BAR =========== */
.topbar{background:var(--ink); color:var(--fog); font-size:0.85rem;}
.topbar .container{display:flex; justify-content:space-between; align-items:center; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:6px;}
.topbar a{color:var(--fog);}
.topbar__phone{font-family:var(--font-mono); font-weight:600; color:var(--white);}

/* =========== NAVIGATION =========== */
.nav{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:900;}
.nav .container{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:20px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--ink); text-decoration:none;}
.brand:hover{color:var(--ink);}
.brand__mark{width:34px; height:26px; flex:0 0 auto;}
.brand__word small{display:block; font-family:var(--font-body); font-weight:500; font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--moss);}
.nav__links{display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0;}
.nav__links a{color:var(--slate); text-decoration:none; font-weight:500; font-size:0.95rem;}
.nav__links a:hover{color:var(--moss);}
.nav__cta{background:var(--amber); color:var(--ink); padding:10px 18px; border-radius:var(--radius); font-weight:600; text-decoration:none; white-space:nowrap;}
.nav__cta:hover{background:var(--amber-dark); color:var(--white);}
.nav__toggle{display:none; background:none; border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; font-size:1.2rem;}
@media (max-width:860px){
  .nav__links{position:fixed; inset:64px 0 auto 0; background:var(--white); flex-direction:column; align-items:flex-start; padding:16px 24px; border-bottom:1px solid var(--line); display:none; gap:14px;}
  .nav__links.is-open{display:flex;}
  .nav__toggle{display:block;}
  .nav__cta{order:5;}
}

/* =========== BREADCRUMBS =========== */
.breadcrumbs{padding:14px 0; font-size:0.85rem; color:var(--slate-2); background:var(--fog);}
.breadcrumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0;}
.breadcrumbs li:not(:last-child)::after{content:"/"; margin-left:6px; color:var(--line);}
.breadcrumbs a{color:var(--slate-2); text-decoration:none;}
.breadcrumbs a:hover{color:var(--moss);}
.breadcrumbs li:last-child{color:var(--ink); font-weight:500;}

/* =========== HERO =========== */
.hero{background:var(--ink); color:var(--white); padding:64px 0 56px;}
.hero .container{display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;}
.hero__eyebrow{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.14em; font-size:0.78rem; color:var(--amber); margin-bottom:14px;}
.hero h1{color:var(--white); margin-bottom:0.4em;}
.hero p.lede{color:var(--fog-2); font-size:1.15rem; max-width:56ch;}
.hero__actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px;}
.hero__stats{display:flex; gap:24px; margin-top:32px; flex-wrap:wrap;}
.hero__stat{font-family:var(--font-mono);}
.hero__stat b{display:block; font-size:1.4rem; color:var(--white);}
.hero__stat span{font-size:0.78rem; color:var(--fog-2); text-transform:uppercase; letter-spacing:0.06em;}
.hero__media{background:var(--slate); border:1px dashed var(--slate-2); border-radius:var(--radius); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; color:var(--fog-2); text-align:center; padding:20px; font-size:0.85rem;}
@media (max-width:860px){
  .hero .container{grid-template-columns:1fr;}
  .hero__media{order:-1;}
}

/* page hero variant (interior pages, shorter) */
.page-hero{background:var(--ink); color:var(--white); padding:44px 0 40px;}
.page-hero h1{color:var(--white); margin-bottom:0.3em;}
.page-hero p.lede{color:var(--fog-2); max-width:64ch; font-size:1.05rem;}

/* =========== BUTTONS =========== */
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; padding:13px 22px; border-radius:var(--radius); text-decoration:none; font-size:0.98rem; border:1px solid transparent; cursor:pointer;}
.btn--primary{background:var(--amber); color:var(--ink);}
.btn--primary:hover{background:var(--amber-dark); color:var(--white);}
.btn--ghost{background:transparent; color:var(--white); border-color:rgba(255,255,255,0.4);}
.btn--ghost:hover{border-color:var(--white);}
.btn--dark{background:var(--ink); color:var(--white);}
.btn--dark:hover{background:var(--slate);}
.btn--block{width:100%; justify-content:center;}

/* =========== SECTIONS =========== */
.section{padding:64px 0;}
.section--fog{background:var(--fog);}
.section__head{max-width:70ch; margin-bottom:32px;}
.section__eyebrow{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.12em; font-size:0.78rem; color:var(--moss); margin-bottom:10px; display:block;}
.prose{max-width:74ch;}
.prose h2{margin-top:1.4em;}
.prose h3{margin-top:1.2em;}

/* =========== PROBLEM STATEMENT =========== */
.problem{background:var(--white); border-left:4px solid var(--danger); padding:22px 26px; border-radius:var(--radius); margin:0 0 32px; max-width:74ch;}
.problem__label{font-family:var(--font-mono); text-transform:uppercase; font-size:0.75rem; letter-spacing:0.1em; color:var(--danger); display:block; margin-bottom:8px;}

/* =========== PLACEHOLDER BLOCKS =========== */
.placeholder{
  background:repeating-linear-gradient(135deg, #F4F0E4, #F4F0E4 10px, #EDE7D3 10px, #EDE7D3 20px);
  border:1px dashed #B79A4B; color:#6B5A24; font-family:var(--font-mono); font-size:0.85rem;
  padding:14px 16px; border-radius:var(--radius); display:flex; align-items:center; gap:10px;
}
.placeholder::before{content:"⬚"; font-size:1.1rem;}
.img-slot{
  background:var(--fog-2); border:1px dashed var(--slate-2); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; color:var(--slate-2);
  font-family:var(--font-mono); font-size:0.8rem; text-align:center; padding:16px; min-height:180px;
}

/* =========== COST TABLE =========== */
.cost-table{width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:0.92rem; margin:20px 0 8px;}
.cost-table caption{text-align:left; font-family:var(--font-body); font-weight:600; margin-bottom:10px;}
.cost-table th,.cost-table td{border:1px solid var(--line); padding:12px 14px; text-align:left;}
.cost-table thead th{background:var(--ink); color:var(--white); font-weight:600;}
.cost-table tbody tr:nth-child(even){background:var(--fog);}
.cost-table td.range{color:var(--moss); font-weight:600;}
.table-wrap{overflow-x:auto;}

/* =========== COMPARISON TABLE =========== */
.compare-table{width:100%; border-collapse:collapse; margin:20px 0;}
.compare-table th,.compare-table td{border:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top;}
.compare-table thead th{background:var(--moss); color:var(--white);}
.compare-table tbody tr:nth-child(even){background:var(--fog);}

/* =========== PROCESS STEPS =========== */
.process{list-style:none; margin:24px 0; padding:0; counter-reset:step; display:grid; gap:0;}
.process li{counter-increment:step; display:grid; grid-template-columns:52px 1fr; gap:16px; padding:18px 0; border-top:1px solid var(--line);}
.process li:last-child{border-bottom:1px solid var(--line);}
.process li::before{content:counter(step, decimal-leading-zero); font-family:var(--font-mono); font-size:1rem; color:var(--amber-dark); font-weight:600;}
.process h4{margin-bottom:4px;}

/* =========== STATS BLOCK =========== */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin:24px 0;}
.stats__item{background:var(--white); padding:22px 18px; text-align:left;}
.stats__item b{display:block; font-family:var(--font-mono); font-size:1.7rem; color:var(--ink);}
.stats__item span{font-size:0.82rem; color:var(--slate-2);}

/* =========== SERVICE CARDS =========== */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin:24px 0;}
.card{border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:var(--white); transition:box-shadow .15s, border-color .15s;}
.card:hover{box-shadow:var(--shadow-2); border-color:var(--slate-2);}
.card__icon{width:38px; height:38px; margin-bottom:14px; color:var(--moss);}
.card h3{font-size:1.15rem; margin-bottom:8px;}
.card p{font-size:0.94rem; color:var(--slate-2); margin-bottom:12px;}
.card a{font-weight:600; font-size:0.9rem; text-decoration:none;}

/* =========== REVIEW CARDS =========== */
.reviews{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin:24px 0;}
.review-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.review-card__stars{color:var(--amber-dark); letter-spacing:2px; margin-bottom:10px;}
.review-card__quote{font-style:italic; color:var(--slate); margin-bottom:12px;}
.review-card__name{font-weight:600; font-size:0.9rem;}
.review-card__role{color:var(--slate-2); font-size:0.82rem;}

/* =========== RELATED GUIDES =========== */
.related{margin:24px 0;}
.related__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;}
.related__item{border:1px solid var(--line); border-radius:var(--radius); padding:18px; text-decoration:none; display:block; background:var(--white);}
.related__item:hover{border-color:var(--moss); box-shadow:var(--shadow-1);}
.related__item span{display:block; font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--moss); margin-bottom:6px;}
.related__item h4{margin:0; font-size:1rem; color:var(--ink);}

/* =========== BEFORE / AFTER =========== */
.before-after{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line); margin:20px 0;}
.before-after .img-slot{min-height:220px; border:none; border-radius:0;}
.before-after__label{position:relative;}
.before-after__label span{position:absolute; top:10px; left:10px; background:var(--ink); color:var(--white); font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; padding:4px 8px; border-radius:2px; z-index:2;}

/* =========== FAQ =========== */
.faq-list{margin:20px 0; border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{cursor:pointer; padding:18px 4px; font-weight:600; font-family:var(--font-display); font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:var(--font-mono); font-size:1.3rem; color:var(--moss); flex:0 0 auto;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{padding:0 4px 18px; color:var(--slate); max-width:70ch;}

/* =========== CTA BANDS =========== */
.cta-band{background:var(--moss); color:var(--white); padding:48px 0; text-align:center;}
.cta-band h2{color:var(--white);}
.cta-band p{color:#DCE6DE; max-width:60ch; margin-left:auto; margin-right:auto;}
.cta-band .btn--primary{margin-top:8px;}
.footer-cta{background:var(--ink); color:var(--white); padding:56px 0; text-align:center;}
.footer-cta h2{color:var(--white);}
.footer-cta p{color:var(--fog-2);}

/* =========== FORMS =========== */
.form{max-width:640px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-1);}
.form__row{margin-bottom:18px; display:flex; flex-direction:column; gap:6px;}
.form__row label{font-weight:600; font-size:0.9rem;}
.form__row small{color:var(--slate-2); font-weight:400; font-size:0.8rem;}
.form input, .form select, .form textarea{
  font-family:var(--font-body); font-size:1rem; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); color:var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus{border-color:var(--moss);}
.form fieldset{border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin:0 0 18px;}
.form legend{font-weight:600; font-size:0.9rem; padding:0 6px;}
.form__note{font-size:0.8rem; color:var(--slate-2); margin-top:10px;}

/* =========== FOOTER =========== */
.site-footer{background:var(--ink); color:var(--fog-2); padding:56px 0 28px; font-size:0.92rem;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px;}
.footer-grid h4{color:var(--white); font-family:var(--font-body); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px;}
.footer-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.footer-grid a{color:var(--fog-2); text-decoration:none;}
.footer-grid a:hover{color:var(--amber);}
.footer-brand p{color:var(--fog-2); max-width:34ch;}
.footer-bottom{border-top:1px solid var(--slate); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:var(--slate-2); font-size:0.82rem;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}

/* =========== STICKY MOBILE ACTION BAR =========== */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:950; display:none;
  background:var(--ink); border-top:1px solid var(--slate);
  grid-template-columns:1fr 1fr;
}
.sticky-bar a{padding:14px 10px; text-align:center; font-weight:600; text-decoration:none; font-size:0.92rem;}
.sticky-bar__call{color:var(--white); background:var(--slate); display:flex; align-items:center; justify-content:center; gap:8px;}
.sticky-bar__quote{color:var(--ink); background:var(--amber);}
@media (max-width:760px){.sticky-bar{display:grid;} body{padding-bottom:56px;}}

/* =========== SCHEMA / DEV NOTES (hidden, dev reference only) =========== */
.dev-note{display:none;}

/* =========== UTILITIES =========== */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.text-center{text-align:center;}
.badge{display:inline-block; font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; background:var(--fog-2); color:var(--slate); padding:4px 9px; border-radius:2px;}
.badge--amber{background:rgba(217,138,31,0.15); color:var(--amber-dark);}