/* ==========================================================================
   Forge Roofing & Exteriors
   Palette measured off the client's own logo. One accent, no exceptions.
   See DESIGN-NOTES.md for why each decision was made.
   ========================================================================== */

:root{
  --ink:      #0B0E13;   /* exact logo ground */
  --ink-2:    #12171F;
  --ink-3:    #1A212B;
  --line:     rgba(170,169,174,.16);
  --line-2:   rgba(170,169,174,.28);

  --steel:    #AAA9AE;   /* exact logo silver */
  --steel-hi: #D6D8DC;
  --paper:    #EEF0F3;
  --muted:    #8E949D;

  --ember:    #D9873C;   /* the spark in the mark. the only chromatic colour here */
  --ember-hi: #EFA45C;

  --hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

  --gut: clamp(20px, 4.5vw, 64px);
  --maxw: 1240px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:'Barlow',system-ui,sans-serif; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; }

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:'Oswald',system-ui,sans-serif; font-weight:600;
  letter-spacing:-.02em; line-height:1.04; margin:0; text-transform:uppercase;
}
h1{ font-size:clamp(2.6rem,6.4vw,5.1rem); letter-spacing:-.03em; }
h2{ font-size:clamp(2rem,4.1vw,3.3rem); }
h3{ font-size:clamp(1.25rem,2vw,1.6rem); letter-spacing:-.01em; }
p{ margin:0 0 1.1em; }
.lede{ font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--steel); max-width:60ch; }
strong{ font-weight:600; color:var(--paper); }

/* the weight-swap headline: light phrase, heavy phrase. never a gradient. */
.sw{ font-weight:200; color:var(--steel); }
.em{ color:var(--ember); }

.eyebrow{
  font-family:'Barlow',sans-serif; font-weight:600; font-size:.74rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ember);
  display:flex; align-items:center; gap:.7rem; margin:0 0 1.1rem;
}
.eyebrow{ align-items:baseline; }
.eyebrow::before{
  content:""; width:11px; height:12px; flex:none; align-self:flex-start;
  margin-top:.32em; background:var(--ember); clip-path:var(--hex);
}
.eyebrow.c{ justify-content:center; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
section{ padding-block:clamp(60px,8vw,116px); }
.tight{ padding-block:clamp(44px,5.5vw,76px); }
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:'Oswald',sans-serif; font-weight:500; font-size:1rem;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  padding:.95rem 1.7rem; border-radius:4px; border:1px solid transparent;
  cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn-p{ background:var(--ember); color:#14100A; }
.btn-p:hover{ background:var(--ember-hi); }
.btn-s{ background:transparent; color:var(--paper); border-color:var(--line-2); }
.btn-s:hover{ border-color:var(--steel); background:rgba(170,169,174,.07); }
.btn-lg{ padding:1.1rem 2.1rem; font-size:1.08rem; }
.btns{ display:flex; flex-wrap:wrap; gap:.85rem; }
.center .btns{ justify-content:center; }

.lnk{
  font-family:'Oswald',sans-serif; font-weight:500; font-size:.92rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ember);
  text-decoration:none; display:inline-flex; align-items:center; gap:.45rem;
}
.lnk::after{ content:"→"; transition:transform .2s var(--ease); }
.lnk:hover::after{ transform:translateX(4px); }

/* ---------- utility bar ---------- */
.util{
  background:#070A0E; border-bottom:1px solid var(--line);
  font-size:.82rem; color:var(--muted);
}
.util .wrap{ display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:40px; }
.util a{ color:var(--steel); text-decoration:none; }
.util a:hover{ color:var(--ember); }
.util-loc{ display:flex; align-items:center; gap:.55rem; }
.util-loc::before{ content:""; width:9px; height:10px; background:var(--ember); clip-path:var(--hex); flex:none; }
@media (max-width:760px){ .util-loc{ display:none; } .util .wrap{ justify-content:center; } }

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:60; background:rgba(11,14,19,.92);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.hdr .wrap{ display:flex; align-items:center; gap:1.6rem; min-height:76px; }
.brand{ display:flex; align-items:center; flex:none; text-decoration:none; }
.brand img{ height:44px; width:auto; }
@media (max-width:520px){ .brand img{ height:38px; } }

.nav{ display:flex; gap:1.7rem; margin-left:auto; }
.nav a{
  font-family:'Oswald',sans-serif; font-weight:400; font-size:.93rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--steel);
  text-decoration:none; position:relative; padding-block:.4rem;
  transition:color .2s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--paper); }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--ember);
}
.hdr-cta{ display:flex; align-items:center; gap:.8rem; flex:none; }
.hdr-tel{
  font-family:'Oswald',sans-serif; font-weight:500; font-size:1.06rem;
  letter-spacing:.02em; color:var(--paper); text-decoration:none; white-space:nowrap;
}
.hdr-tel:hover{ color:var(--ember); }
@media (max-width:1080px){ .nav{ display:none; } }
@media (max-width:900px){ .hdr-cta .btn{ display:none; } }
@media (max-width:560px){ .hdr-tel{ display:none; } }

/* burger */
.burger{
  display:none; margin-left:auto; background:none; border:1px solid var(--line-2);
  border-radius:4px; width:44px; height:44px; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex:none;
}
.burger span{ display:block; width:18px; height:2px; background:var(--paper); position:relative; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--paper);
  transition:transform .25s var(--ease), top .25s var(--ease);
}
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }
@media (max-width:1080px){ .burger{ display:flex; } }

.mnav{
  display:none; border-top:1px solid var(--line); background:var(--ink-2);
}
.mnav.open{ display:block; }
.mnav a{
  display:block; padding:1rem var(--gut); text-decoration:none; color:var(--steel);
  font-family:'Oswald',sans-serif; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--line); font-size:.98rem;
}
.mnav a:hover{ color:var(--paper); background:var(--ink-3); }

/* ---------- hero ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:-2; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
/* Scrim is a left-weighted wash, not a blanket. The roof IS the product, so the
   right two thirds stay bright enough to actually read the shingle. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(11,14,19,.94) 0%, rgba(11,14,19,.80) 34%, rgba(11,14,19,.26) 62%, rgba(11,14,19,.10) 100%),
    linear-gradient(to top, var(--ink) 0%, rgba(11,14,19,0) 26%);
}
.hero-in{ padding-block:clamp(72px,11vw,150px); max-width:none; }
.hero h1{ margin-bottom:1.4rem; }
.hero .lede{ max-width:46ch; color:var(--steel-hi); text-shadow:0 1px 18px rgba(11,14,19,.6); }
.hero .btns{ margin-top:2.1rem; }
.home-hero .hero-in{ min-height:min(70vh,680px); display:flex; flex-direction:column; justify-content:center; }
@media (max-width:760px){
  /* on a phone the text sits over the middle of the photo, so it needs its own ground */
  .hero::after{
    background:
      linear-gradient(180deg, rgba(11,14,19,.72) 0%, rgba(11,14,19,.86) 55%, var(--ink) 100%);
  }
}

/* trust chips */
.chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:2.2rem; }
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--line-2); border-radius:3px; background:rgba(11,14,19,.5);
  padding:.5rem .85rem; font-size:.82rem; color:var(--steel); letter-spacing:.02em;
}
.chip::before{ content:""; width:9px; height:10px; background:var(--ember); clip-path:var(--hex); flex:none; }

/* page hero (inner pages) */
.phero{ border-bottom:1px solid var(--line); }
.phero .hero-in{ padding-block:clamp(56px,7vw,104px); }
.crumb{ font-size:.82rem; color:var(--muted); margin-bottom:1.2rem; }
.crumb a{ color:var(--steel); text-decoration:none; }
.crumb a:hover{ color:var(--ember); }

/* ---------- trust strip ---------- */
.strip{ border-block:1px solid var(--line); background:var(--ink-2); }
.strip .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
.strip-i{
  padding:1.7rem 1.2rem; text-align:center; border-left:1px solid var(--line);
}
.strip-i:first-child{ border-left:0; }
.strip-i b{
  display:block; font-family:'Oswald',sans-serif; font-weight:500; font-size:1.02rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--paper); margin-bottom:.25rem;
}
.strip-i span{ font-size:.85rem; color:var(--muted); }
@media (max-width:860px){
  .strip .wrap{ grid-template-columns:repeat(2,1fr); }
  .strip-i:nth-child(3){ border-left:0; }
  .strip-i:nth-child(n+3){ border-top:1px solid var(--line); }
}

/* ---------- services ---------- */
.svcs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
@media (max-width:940px){ .svcs{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; } }
.svc{
  background:var(--ink-2); border:1px solid var(--line); border-radius:6px;
  padding:2rem 1.7rem 1.7rem; display:flex; flex-direction:column;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.svc:hover{ border-color:var(--line-2); background:var(--ink-3); transform:translateY(-3px); }
/* hex photo inset — the clip lives on the inner element, never on a reveal target */
.svc-hex{ width:112px; height:126px; flex:none; margin-bottom:1.6rem; position:relative; }
.svc-hex-in{ width:100%; height:100%; clip-path:var(--hex); overflow:hidden; background:var(--ink-3); }
.svc-hex-in img{ width:100%; height:100%; object-fit:cover; }
.svc h3{ margin-bottom:.7rem; }
.svc p{ color:var(--steel); font-size:.97rem; flex:1; }
.svc .lnk{ margin-top:.6rem; }
.svc ul{ list-style:none; margin:0 0 1.2rem; padding:0; }
.svc li{ font-size:.93rem; color:var(--steel); padding-left:1.3rem; position:relative; margin-bottom:.4rem; }
.svc li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:9px; background:var(--ember); clip-path:var(--hex); }

/* ---------- split band ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split.rev .split-t{ order:2; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } .split.rev .split-t{ order:0; } }
.split-img{ position:relative; }
.split-img img{ width:100%; border-radius:6px; border:1px solid var(--line); }
.split-t h2{ margin-bottom:1.3rem; }

/* numbered process */
.steps{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1.4rem; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start; }
.step-n{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:1.05rem; color:var(--ember);
  width:38px; height:42px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line-2); clip-path:var(--hex); background:var(--ink-2);
}
.step b{ display:block; font-family:'Oswald',sans-serif; font-weight:500; font-size:1.08rem;
  letter-spacing:.03em; text-transform:uppercase; margin-bottom:.25rem; }
.step p{ margin:0; color:var(--steel); font-size:.96rem; }

/* ---------- review ---------- */
.review{ background:var(--ink-2); border-block:1px solid var(--line); }
.quote{ max-width:44rem; margin-inline:auto; text-align:center; }
.quote blockquote{
  margin:0 0 1.6rem; font-family:'Oswald',sans-serif; font-weight:200;
  font-size:clamp(1.35rem,2.7vw,2.05rem); line-height:1.32; letter-spacing:-.01em;
  text-transform:none; color:var(--paper);
}
/* Deliberately NOT a star row. Facebook recommendations are a yes/no
   endorsement, so rendering five stars would invent a rating nobody gave. */
.rec-badge{
  display:inline-flex; align-items:center; gap:.55rem; margin:0 0 1.5rem;
  border:1px solid var(--line-2); border-radius:3px; padding:.42rem .85rem;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--ember);
}
.rec-badge::before{ content:""; width:10px; height:11px; background:var(--ember); clip-path:var(--hex); }
.cite{ font-size:.9rem; color:var(--muted); font-style:normal; }
.cite b{ color:var(--steel); font-weight:600; }
.rec{
  display:inline-flex; align-items:baseline; gap:.6rem; margin-top:2.2rem;
  border-top:1px solid var(--line); padding-top:1.6rem;
}
.rec i{ font-family:'Oswald',sans-serif; font-style:normal; font-weight:600;
  font-size:2.1rem; color:var(--ember); line-height:1; }
.rec span{ font-size:.88rem; color:var(--muted); text-align:left; }

/* ---------- gallery ---------- */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1.1rem; margin-top:2.8rem; }
.g-item{ position:relative; border-radius:6px; overflow:hidden; border:1px solid var(--line); background:var(--ink-2); }
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.g-item:hover img{ transform:scale(1.035); }
.g-cap{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.2rem .95rem;
  background:linear-gradient(to top, rgba(7,10,14,.92), rgba(7,10,14,0));
  font-size:.86rem; color:var(--steel-hi);
}
/* Home-page teaser: every tile shares one aspect so the rows line up exactly.
   Mixed aspects in a 12-col grid leave dead space under the shorter tile. */
.g-6{ grid-column:span 6; aspect-ratio:16/10; }
@media (max-width:860px){
  .grid{ grid-template-columns:1fr; }
  .g-6{ grid-column:1/-1; }
}

/* Gallery page: real masonry via CSS columns, so a portrait photo stays
   portrait instead of being cropped to fit a landscape cell. */
.masonry{ display:block; column-count:2; column-gap:1.1rem; }
.masonry .g-item{ break-inside:avoid; margin:0 0 1.1rem; display:block; width:100%; }
.masonry .g-item img{ width:100%; height:auto; }
@media (max-width:860px){ .masonry{ column-count:1; } }

/* ---------- service area ---------- */
.area{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:900px){ .area{ grid-template-columns:1fr; } }
.map{ border-radius:6px; overflow:hidden; border:1px solid var(--line); line-height:0; }
/* OSM ships a light tile set; invert plus a hue rotate lands it in the site's
   dark grey without tinting the roads blue. */
.map iframe{ width:100%; height:380px; border:0; display:block;
  filter:invert(.93) hue-rotate(180deg) saturate(.18) contrast(1.06) brightness(.9); }
.towns{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
.town{ border:1px solid var(--line); border-radius:3px; padding:.42rem .8rem; font-size:.86rem; color:var(--steel); }

/* ---------- CTA band ---------- */
.cta{ background:var(--ink-2); border-block:1px solid var(--line); position:relative; overflow:hidden; }
.cta .wrap{ position:relative; }
.cta-mark{ width:96px; margin:0 auto 1.8rem; opacity:.9; }
.cta h2{ margin-bottom:1.1rem; }

/* ---------- form ---------- */
.form-card{
  background:var(--ink-2); border:1px solid var(--line); border-radius:8px;
  padding:clamp(1.6rem,3vw,2.4rem);
}
.field{ margin-bottom:1.05rem; }
.field label{
  display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.45rem; font-weight:600;
}
.field input,.field select,.field textarea{
  width:100%; background:var(--ink); border:1px solid var(--line-2); border-radius:4px;
  padding:.8rem .9rem; color:var(--paper); font-family:'Barlow',sans-serif; font-size:1rem;
  transition:border-color .2s var(--ease);
}
.field textarea{ min-height:118px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--ember);
}
.field select{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%238E949D' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .95rem center; padding-right:2.4rem; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
@media (max-width:560px){ .f2{ grid-template-columns:1fr; gap:0; } }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{ font-size:.82rem; color:var(--muted); margin:.9rem 0 0; }
.form-msg{ margin-top:1rem; padding:.85rem 1rem; border-radius:4px; font-size:.92rem; display:none; }
.form-msg.ok{ display:block; background:rgba(217,135,60,.12); border:1px solid var(--ember); color:var(--ember-hi); }
.form-msg.err{ display:block; background:rgba(200,70,70,.12); border:1px solid #C84646; color:#F0A0A0; }

/* ---------- contact cards ---------- */
.ccards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.4rem; }
@media (max-width:820px){ .ccards{ grid-template-columns:1fr; } }
.ccard{ background:var(--ink-2); border:1px solid var(--line); border-radius:6px; padding:1.6rem; }
.ccard b{ display:block; font-family:'Oswald',sans-serif; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; font-size:.86rem; color:var(--muted); margin-bottom:.55rem; }
.ccard a,.ccard p{ font-size:1.06rem; color:var(--paper); text-decoration:none; margin:0; }
.ccard a:hover{ color:var(--ember); }

/* ---------- prose (inner content) ---------- */
.prose{ max-width:62ch; }
.prose h3{ margin:2.4rem 0 .9rem; }
.prose p{ color:var(--steel); }
.prose ul{ padding-left:0; list-style:none; margin:0 0 1.4rem; }
.prose li{ color:var(--steel); padding-left:1.4rem; position:relative; margin-bottom:.55rem; }
.prose li::before{ content:""; position:absolute; left:0; top:.6em; width:8px; height:9px;
  background:var(--ember); clip-path:var(--hex); }

.note{
  border-left:2px solid var(--ember); background:var(--ink-2);
  padding:1.1rem 1.3rem; margin:1.8rem 0; font-size:.95rem; color:var(--steel);
}
.note p:last-child{ margin:0; }

/* ---------- footer ---------- */
.ftr{ background:#070A0E; border-top:1px solid var(--line); padding-block:clamp(48px,6vw,76px) 0; }
.ftr-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; }
@media (max-width:900px){ .ftr-grid{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:520px){ .ftr-grid{ grid-template-columns:1fr; } }
.ftr-mark{ width:150px; margin-bottom:1.3rem; }
.ftr p{ color:var(--muted); font-size:.93rem; }
.ftr h4{ font-size:.82rem; letter-spacing:.16em; color:var(--steel); margin-bottom:1.1rem; }
.ftr ul{ list-style:none; margin:0; padding:0; }
.ftr li{ margin-bottom:.55rem; }
.ftr a{ color:var(--muted); text-decoration:none; font-size:.94rem; }
.ftr a:hover{ color:var(--ember); }
.ftr-tel{ font-family:'Oswald',sans-serif; font-size:1.3rem; color:var(--paper)!important; letter-spacing:.02em; }
.ftr-bot{
  margin-top:clamp(36px,4vw,56px); border-top:1px solid var(--line);
  padding-block:1.5rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.84rem; color:#5F666F;
}
.ftr-bot a{ color:#5F666F; }

/* ---------- sticky mobile call bar ---------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  grid-template-columns:1fr 1fr; border-top:1px solid var(--line);
  background:rgba(7,10,14,.97); backdrop-filter:blur(12px);
  padding-bottom:env(safe-area-inset-bottom);
}
.callbar a{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1.05rem .8rem; text-decoration:none;
  font-family:'Oswald',sans-serif; font-weight:500; font-size:1rem;
  letter-spacing:.06em; text-transform:uppercase;
}
.callbar .cb-call{ background:var(--ember); color:#14100A; }
.callbar .cb-quote{ color:var(--paper); }
@media (max-width:900px){
  .callbar{ display:grid; }
  body{ padding-bottom:66px; }
}

/* ---------- scroll reveal ----------
   NEVER put clip-path on .rv — it forces intersectionRatio to 0 and the
   observer can never fire. Clip an inner child instead. See DESIGN-NOTES.md. */
.js .rv{ opacity:0; transform:translateY(18px); }
.js .rv.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion:reduce){
  .js .rv{ opacity:1; transform:none; }
}

/* ---------- a11y ---------- */
.skip{
  position:absolute; left:-9999px; top:0; background:var(--ember); color:#14100A;
  padding:.7rem 1.1rem; z-index:100; text-decoration:none; font-weight:600;
}
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }