/* Savannah Foundation Repair Co — design system
   Palette: deep slate navy (structural/engineering trust) + safety orange
   (action) — the colours of steel piers, site plans, and hi-vis, not a
   generic AI gradient. Deliberately unrelated to the sibling microsite's
   forest-green palette: these are independent businesses and must not read
   as a matched set. Type: Barlow (headings, semi-industrial grotesk) +
   Inter (body, highly legible at length). */

:root{
  --ink:#131c26;
  --ink-soft:#28323d;
  --text-muted:#55606c;
  --text-faint:#7c8794;

  --slate:#14293f;
  --slate-dark:#0b1a29;
  --slate-light:#28496b;

  --orange:#e05a00;
  --orange-dark:#b84800;
  --orange-light:#ff8a3d;
  --orange-soft:#fdeee3;

  --paper:#f4f6f8;
  --surface:#ffffff;
  --border:#dce1e7;
  --border-strong:#c4ccd5;

  --radius:14px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(19,28,38,.06);
  --shadow-md:0 10px 30px -12px rgba(19,28,38,.25);

  --font-head:"Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-body:"Inter", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head); color:var(--ink); line-height:1.15; margin:0 0 .5rem; font-weight:800;}
h1{font-size:clamp(2.1rem,4.5vw,3.1rem);}
h2{font-size:clamp(1.5rem,3vw,2.1rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1rem;}
a{color:var(--slate); text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:1140px; margin-inline:auto; padding-inline:1.25rem;}
.muted{color:var(--text-muted);}
.text-center{text-align:center;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--slate); color:#fff; padding:.6rem 1rem; z-index:200;}
.skip-link:focus{left:1rem; top:1rem;}

/* -------------------------------------------------- buttons -------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-head); font-weight:700; font-size:.95rem;
  padding:.85rem 1.5rem; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-icon{width:1.1em; height:1.1em;}
.btn-primary{background:var(--orange); color:#2b1400; box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--orange-dark);}
.btn-outline{background:transparent; color:var(--slate); border-color:var(--slate);}
.btn-outline:hover{background:var(--slate); color:#fff;}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.55);}
.btn-ghost:hover{background:rgba(255,255,255,.12);}
.btn-dark{background:var(--ink); color:#fff;}
.btn-dark:hover{background:var(--slate-dark);}
.btn-sm{padding:.55rem 1.1rem; font-size:.85rem;}
.btn-block{width:100%;}

/* -------------------------------------------------- utility bar ---- */
.utility-bar{background:var(--slate-dark); color:#e7edf4; font-size:.85rem;}
.utility-bar .container{display:flex; justify-content:space-between; align-items:center; padding-block:.5rem; gap:1rem; flex-wrap:wrap;}
.utility-bar a{color:#fff; font-weight:700;}

/* -------------------------------------------------- header/nav ----- */
.site-header{position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--border);}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding-block:.85rem; gap:1.5rem;}
.logo{display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:800; font-size:1.15rem; color:var(--ink);}
.logo-mark{width:2.1rem; height:2.1rem; border-radius:8px; background:var(--slate); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem;}
.logo-img{height:2.4rem; width:auto;}

.main-nav{display:flex; align-items:center; gap:1.75rem;}
.nav-list{list-style:none; display:flex; gap:1.5rem; margin:0; padding:0; align-items:center;}
.nav-list>li>a{color:var(--ink-soft); font-weight:600; font-size:.95rem;}
.nav-list>li>a:hover{color:var(--slate);}
.nav-close{display:none;}
.nav-group{position:relative;}
.nav-group-label{display:flex; align-items:center; gap:.3rem; font-weight:600; font-size:.95rem; color:var(--ink-soft); cursor:pointer; user-select:none;}
.nav-group-label .chevron{width:1em; height:1em; transition:transform .18s ease;}
.nav-group.is-open .nav-group-label .chevron{transform:rotate(180deg);}
.nav-sub{
  list-style:none; margin:0; padding:.6rem; position:absolute; top:100%; left:0;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); min-width:230px; display:none; z-index:50;
}
.nav-group.is-open .nav-sub{display:block;}
.nav-sub li a{display:block; padding:.5rem .6rem; border-radius:6px; color:var(--ink-soft); font-size:.9rem;}
.nav-sub li a:hover{background:var(--paper); color:var(--slate);}
.nav-cta{display:none;}
.nav-actions{display:flex; align-items:center; gap:.75rem;}
.nav-toggle{display:none; background:none; border:0; padding:.4rem; cursor:pointer; color:var(--ink);}
.nav-toggle svg{width:1.6rem; height:1.6rem;}
.nav-overlay{display:none; position:fixed; inset:0; background:rgba(20,35,28,.5); z-index:95;}
.nav-overlay.is-open{display:block;}

@media (max-width:959px){
  .main-nav{
    position:fixed; top:0; right:0; height:100%; width:min(320px,86vw);
    background:#fff; z-index:110; transform:translateX(100%); transition:transform .25s ease;
    flex-direction:column; align-items:stretch; padding:1.5rem; overflow-y:auto;
  }
  .main-nav.is-open{transform:translateX(0);}
  .nav-close{display:flex; align-self:flex-end; background:none; border:0; padding:.4rem; cursor:pointer; color:var(--ink);}
  .nav-close svg{width:1.5rem; height:1.5rem;}
  .nav-list{flex-direction:column; align-items:stretch; gap:.25rem; margin-top:1rem;}
  .nav-list>li>a{display:block; padding:.7rem .3rem; border-bottom:1px solid var(--border);}
  .nav-group-label{padding:.7rem .3rem; border-bottom:1px solid var(--border); justify-content:space-between;}
  .nav-sub{position:static; box-shadow:none; border:0; display:none; padding-left:.75rem;}
  .nav-group.is-open .nav-sub{display:block;}
  .nav-cta{display:flex; flex-direction:column; gap:.6rem; margin-top:1.25rem;}
  .nav-actions .btn-outline.btn-sm{display:none;}
  .nav-toggle{display:flex;}
}
@media (min-width:960px){
  .nav-toggle,.nav-close{display:none;}
}
@media (max-width:600px){
  .utility-bar{font-size:.7rem;}
  .utility-bar .container{padding-block:.35rem;}
}

/* -------------------------------------------------- hero ----------- */
.hero{
  background:linear-gradient(180deg, rgba(11,26,41,.72), rgba(11,26,41,.9)), var(--slate-dark);
  background-size:cover; background-position:center;
  color:#fff; padding:clamp(3rem,8vw,6rem) 0;
}
.hero-eyebrow{
  display:inline-block; margin-bottom:1.1rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#fff;
  border-radius:999px; padding:.4rem 1.05rem;
  font-family:var(--font-head); font-weight:700; font-size:.76rem;
  letter-spacing:.09em; text-transform:uppercase;
}
.hero h1{color:#fff;}
.hero h1 .accent{color:var(--orange-light); display:block;}
.hero .lede{color:#dee7f0; font-size:1.15rem; max-width:38rem;}
.hero-ctas{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.5rem;}
.hero-trust{display:flex; gap:2rem; flex-wrap:wrap; margin-top:2.25rem; font-family:var(--font-head);}
.hero-trust div{display:flex; flex-direction:column;}
.hero-trust strong{font-size:1.5rem; color:var(--orange);}
.hero-trust span{font-size:.85rem; color:#c3d0de; font-family:var(--font-body); font-weight:400;}

/* -------------------------------------------------- sections -------- */
.section-alt{background:var(--surface); padding-block:clamp(3rem,6vw,4.5rem);}
section{padding-block:clamp(3rem,6vw,4.5rem);}
.section-head{max-width:42rem; margin-bottom:2.25rem;}
.section-head.center{margin-inline:auto; text-align:center;}
.eyebrow{display:inline-block; font-family:var(--font-head); font-weight:800; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-dark);}

/* -------------------------------------------------- badges/trust ---- */
.badge-list{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem;}
.badge-list span{background:var(--orange-soft); color:var(--orange-dark); font-weight:700; font-size:.82rem; padding:.4rem .85rem; border-radius:999px;}

/* -------------------------------------------------- proof band ------ */
/* Replaces the four-icon trust strip. Two columns of substance plus a row
   of stats -- and the stats are coverage and timing, which are true, not
   years-in-business or jobs-completed, which are not true of anyone yet. */
.proof-grid{display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center;}
@media (min-width:920px){ .proof-grid{grid-template-columns:1.05fr 1fr; gap:3.25rem;} }
.proof-copy p{color:var(--text-muted);}
.proof-media{position:relative;}
.proof-badge{
  position:absolute; left:.9rem; bottom:-1.25rem; max-width:16rem;
  background:var(--orange); color:#2b1400;
  border-radius:var(--radius-sm); padding:.85rem 1.15rem; box-shadow:var(--shadow-md);
}
.proof-badge strong{display:block; font-family:var(--font-head); font-size:1rem; line-height:1.2;}
.proof-badge span{display:block; margin-top:.2rem; font-size:.82rem; line-height:1.35; color:#40210a;}
@media (min-width:920px){ .proof-badge{left:-1.25rem; bottom:-1.5rem;} }

.stat-row{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:3.25rem;}
@media (min-width:780px){ .stat-row{grid-template-columns:repeat(4,1fr);} }
.stat{background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); padding:1.35rem 1rem; text-align:center;}
.stat strong{display:block; font-family:var(--font-head); font-weight:800; line-height:1.05; font-size:clamp(1.6rem,4vw,2.1rem); color:var(--slate);}
.stat span{display:block; margin-top:.4rem; font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted);}

/* -------------------------------------------------- service tabs ---- */
.svc-tabs{display:grid; grid-template-columns:1fr; gap:1rem;}
@media (min-width:920px){ .svc-tabs{grid-template-columns:minmax(230px,17rem) 1fr; gap:1.5rem; align-items:start;} }
.svc-tablist{display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.35rem;}
@media (min-width:920px){ .svc-tablist{flex-direction:column; overflow:visible; gap:.5rem; padding-bottom:0;} }
.svc-tab{
  font-family:var(--font-head); font-weight:700; font-size:.95rem; line-height:1.25;
  text-align:left; white-space:nowrap; cursor:pointer;
  background:var(--surface); color:var(--slate);
  border:1px solid var(--border); border-left:3px solid transparent;
  border-radius:var(--radius-sm); padding:.95rem 1.15rem;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
@media (min-width:920px){ .svc-tab{white-space:normal;} }
.svc-tab:hover{border-color:var(--border-strong); border-left-color:var(--orange);}
.svc-tab[aria-selected="true"]{background:var(--slate); color:#fff; border-color:var(--slate); border-left-color:var(--orange);}
.svc-tab:focus-visible{outline:3px solid var(--orange); outline-offset:2px;}

.svc-panels{display:grid; gap:1rem;}
.svc-panel{
  background-color:var(--slate-dark); background-size:cover; background-position:center right;
  border-radius:var(--radius); overflow:hidden; color:#fff;
  min-height:22rem; display:flex; align-items:center;
}
/* Without JS no panel carries [hidden], so all five simply stack and stay
   readable -- the tabs are an enhancement, not a requirement. */
.svc-panel[hidden]{display:none;}
.svc-panel-body{padding:clamp(1.5rem,3.5vw,2.5rem); max-width:34rem;}
.svc-panel h3{color:#fff; font-size:clamp(1.35rem,3vw,1.85rem); margin:0 0 .65rem;}
.svc-panel h3 .accent{color:var(--orange-light);}
.svc-panel p{color:#d7e1ec; font-size:.97rem; margin:0 0 1.15rem;}
.svc-points{list-style:none; margin:0 0 1.5rem; padding:0; display:grid; grid-template-columns:1fr; gap:.5rem .9rem;}
@media (min-width:560px){ .svc-points{grid-template-columns:1fr 1fr;} }
.svc-points li{position:relative; padding-left:1.05rem; font-size:.9rem; color:#e3eaf2;}
.svc-points li::before{content:""; position:absolute; left:0; top:.55em; width:.4rem; height:.4rem; border-radius:50%; background:var(--orange-light);}
.svc-actions{display:flex; gap:.75rem; flex-wrap:wrap;}

/* -------------------------------------------------- service cards --- */
.service-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem;}
.service-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.75rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.75rem;
  transition:transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.service-card p{color:var(--text-muted); font-size:.95rem; margin:0;}
.service-card .link{font-weight:700; color:var(--slate); margin-top:auto;}

/* Photo-header variant: the image sits flush to the card edge, so padding
   moves off the card and onto an inner .card-body. Used on the homepage
   services grid, where a photo does more work than an icon. */
.service-card.has-photo{padding:0; overflow:hidden;}
.service-card.has-photo .card-photo{aspect-ratio:16/9; overflow:hidden; background:#e2e8ef;}
.service-card.has-photo .card-photo img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.service-card.has-photo:hover .card-photo img{transform:scale(1.045);}
.service-card.has-photo .card-body{padding:1.5rem; display:flex; flex-direction:column; gap:.7rem; flex:1;}

/* Numbered step badge for the How It Works row */
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; border-radius:50%; flex:none;
  background:var(--orange); color:#fff;
  font-family:var(--font-head); font-weight:800; font-size:1.05rem;
}

.package-list{list-style:none; margin:0 0 1.4rem; padding:0; display:flex; flex-direction:column; gap:.5rem;}
.package-list li{display:flex; align-items:flex-start; gap:.55rem; font-size:.92rem;}
.package-list svg{width:1.1rem; height:1.1rem; color:var(--slate); flex:none; margin-top:.15rem;}

/* -------------------------------------------------- area chips ------ */
.area-grid{display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center;}
.area-chip{
  display:inline-flex; align-items:center; gap:.4rem; background:var(--surface);
  border:1px solid var(--border); border-radius:999px; padding:.6rem 1.1rem;
  font-weight:700; font-size:.9rem; color:var(--ink-soft); transition:border-color .15s ease, color .15s ease;
}
.area-chip:hover{border-color:var(--slate); color:var(--slate);}
.area-chip svg{width:1rem; height:1rem;}

/* -------------------------------------------------- FAQ -------------- */
.faq-item{border-bottom:1px solid var(--border); padding:1rem 0;}
.faq-item summary{font-family:var(--font-head); font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:1.4rem; color:var(--orange); flex:none;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin-top:.75rem; color:var(--text-muted);}

/* -------------------------------------------------- pricing table --- */
.tier-group-label{font-family:var(--font-head); font-weight:800; margin:1.5rem 0 .5rem;}
.table-scroll{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-sm);}
.tier-table{width:100%; border-collapse:collapse; font-size:.92rem;}
.tier-table th,.tier-table td{padding:.7rem 1rem; text-align:left; border-bottom:1px solid var(--border);}
.tier-table th{background:var(--paper); font-family:var(--font-head);}
.tier-table tr:last-child td{border-bottom:0;}
.tier-note{font-size:.85rem; color:var(--text-muted); margin-top:.6rem;}
.field-note{font-size:.82rem; color:var(--text-faint);}

/* -------------------------------------------------- cta band --------- */
.cta-band{
  background:var(--slate); color:#fff; border-radius:var(--radius);
  padding:2.25rem; display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between;
}
.cta-band h2{color:#fff;}
.cta-band p{color:#d6e2ee; margin:0;}
.local-callout{background:var(--orange-soft); border-radius:var(--radius); padding:1.25rem 1.5rem;}

/* -------------------------------------------------- img slot ---------- */
.img-slot{position:relative; overflow:hidden; background:#e2e8ef; display:block; aspect-ratio:var(--ar,4/3); border-radius:var(--radius);}
.img-slot img{width:100%; height:100%; object-fit:cover;}
.img-slot .img-slot-label{display:none; position:absolute; inset:0; align-items:center; justify-content:center; text-align:center; font-size:.74rem; font-weight:700; color:#5b6a80; padding:1rem;
  background:repeating-linear-gradient(135deg,#eef1f5,#eef1f5 12px,#e3e8ee 12px,#e3e8ee 24px);}
.img-slot.is-empty .img-slot-label{display:flex;}

/* -------------------------------------------------- page hero -------- */
.page-hero{background-color:var(--slate-dark); background-size:cover; background-position:center; color:#fff; padding:3rem 0 3.5rem;}
.page-hero .breadcrumbs{font-size:.85rem; color:#b8c6d6; margin-bottom:.75rem;}
.page-hero .breadcrumbs a{color:#e7edf4;}
.page-hero h1{color:#fff; margin-bottom:.5rem;}
.two-col-layout{display:grid; grid-template-columns:1fr; gap:2rem; align-items:center;}
@media (min-width:860px){ .two-col-layout{grid-template-columns:1.1fr 1fr;} }
.feature-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; text-align:center;}

/* -------------------------------------------------- forms ------------ */
.form-grid{display:grid; grid-template-columns:1fr; gap:1rem;}
@media (min-width:640px){ .form-grid.cols-2{grid-template-columns:1fr 1fr;} }
.field label{display:block; font-weight:700; font-size:.88rem; margin-bottom:.35rem;}
.field input,.field select,.field textarea{
  width:100%; padding:.75rem .9rem; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:.95rem; background:#fff;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--slate-light); outline-offset:1px;}
.form-status{margin-top:1rem; font-weight:700; display:none;}
.form-status.is-visible{display:block;}
.form-status.ok{color:var(--slate);}

/* -------------------------------------------------- footer ----------- */
.site-footer{background:var(--ink); color:#c8d2de; padding-top:3rem;}
.site-footer .container{display:grid; grid-template-columns:1fr; gap:2rem; padding-bottom:2rem;}
@media (min-width:760px){ .site-footer .container{grid-template-columns:1.4fr 1fr 1fr 1fr;} }
.footer-logo{display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:800; color:#fff; font-size:1.1rem; margin-bottom:.75rem;}
.site-footer h4{color:#fff; font-size:.95rem; margin-bottom:.9rem;}
/* .muted is a dark grey by design, which is correct on the light page body
   but drops to ~2.7:1 against the dark footer -- near-invisible. Scope a
   light variant to the footer rather than dropping the class from the
   markup. Same bug class as an inline colour override that matches its own
   background: a global colour utility used inside a dark component. */
.site-footer .muted{color:#9fb0c4;}
.footer-links{display:flex; flex-direction:column; gap:.55rem; font-size:.9rem;}
.footer-links a{color:#c8d2de;}
.footer-links a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding:1.25rem 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; font-size:.82rem; color:#929db0;}

/* -------------------------------------------------- mobile action bar */
.mobile-action-bar{display:none;}
@media (max-width:959px){
  .mobile-action-bar{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:90;
    background:var(--ink); border-top:1px solid rgba(255,255,255,.1);
  }
  .mobile-action-bar a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:.2rem;
    color:#dee7f0; font-size:.72rem; font-weight:700; padding:.65rem 0;
  }
  .mobile-action-bar a:last-child{background:var(--orange); color:#2b1400;}
  .mobile-action-bar svg{width:1.3rem; height:1.3rem;}
  body{padding-bottom:64px;}
}

/* Practical examples: editorial guidance, never presented as completed jobs. */
.field-guide { border-top:1px solid var(--border,#ddd); }
.field-guide .guide-intro { max-width:70ch; }
.field-guide .guide-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:1.25rem; }
.field-guide article { border:1px solid var(--border,#ddd); border-radius:12px; padding:1.5rem; background:var(--surface,#fff); color:var(--ink,#182b32); }
.field-guide h3 { margin-top:0; font-size:1.3rem; }
.field-guide dt { font-weight:700; margin-top:1rem; }
.field-guide dd { margin:.3rem 0 0; line-height:1.65; }
.field-guide .guide-source { font-size:.9rem; margin-top:1.5rem; max-width:75ch; }
.hero-trust strong { font-size:1.05rem; }
@media(max-width:600px) { .field-guide article { padding:1.1rem; } .hero-trust { gap:1rem; } }

@media(max-width:600px) {
  .hero { padding-top:2rem; padding-bottom:2rem; }
  .hero .lede { font-size:1.05rem; line-height:1.55; }
  .hero-trust { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; margin-top:1.6rem; }
  .hero-trust strong { font-size:.85rem; line-height:1.3; }
  .hero-trust span { display:block; font-size:.75rem; line-height:1.45; margin-top:.4rem; }
}

/* Editorial links: visible without hover, separate from navigation and buttons. */
main p a:not(.btn), main dd a, main li a:not(.btn), .guide-source a {
  color: #174b7a;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .18em;
  overflow-wrap: anywhere;
}
main p a:not(.btn):hover, .guide-source a:hover { text-decoration-thickness: 2.5px; }
main a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
#local-planning { scroll-margin-top: 110px; }