/* ==========================================================================
   D&G Fuel Oil — site stylesheet
   ========================================================================== */

:root{
  --navy: #0f0e31;
  --brand-red: #ba161c;
  --accent-red: #ee3b32;
  --topbar-grey: #565656;
  --light-grey: #e7e5e5;
  --lighter-grey: #f4f4f4;
  --text-dark: #2e2e2e;
  --text-muted: #5a5a5a;
  --white: #ffffff;
  --font-head: 'Montserrat', 'Segoe UI', sans-serif;
  --font-body: 'Montserrat', 'Segoe UI', sans-serif;
  --max-width: 1200px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text-dark);
  line-height: 1.6;
  background:#fff;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
picture{ display:contents; }

a{ text-decoration:none; color:inherit; }

ul{ margin:0; padding:0; list-style:none; }

.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1,h2,h3,h4{
  font-family: var(--font-head);
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text-dark);
}

.red-text{ color: var(--brand-red); }

/* ---------------- Top utility bar ---------------- */
.topbar{
  background: var(--topbar-grey);
  color:#fff;
  font-size: 12px;
}
.topbar-inner{
  max-width: 100%;
  margin:0;
  padding: 10px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.topbar-areas span{ margin-right: 4px; }
.topbar-areas a{
  margin-right: 4px;
  transition: color .2s ease, text-decoration-color .2s ease;
  text-decoration: underline;
  text-decoration-color: transparent;
}
.topbar-areas a:hover{
  color: #fff;
  text-decoration-color: rgba(255,255,255,.7);
}
.topbar-areas .sep{ margin:0 8px; opacity:.6; }
.topbar-right{
  display:flex;
  align-items:center;
  gap:16px;
}
.btn-order-top{
  background: var(--accent-red);
  color:#fff;
  padding:9px 22px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  border-radius:2px;
  transition: background .2s ease, transform .15s ease;
  display:inline-block;
}
.btn-order-top:hover{ background:#d5281f; transform: translateY(-1px); }
.social-icon{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  transition: background .2s ease;
}
.social-icon:hover{ background: rgba(255,255,255,.28); }
.social-icon svg{ width:16px; height:16px; fill:#fff; }

/* ---------------- Main nav ---------------- */
.navbar{
  background: var(--navy);
  position: relative;
}
.navbar-inner{
  max-width: var(--max-width);
  margin:0 auto;
  padding: 14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo img{ height:170px; width:auto; }
.nav-links{
  display:flex;
  gap:36px;
}
.nav-links a{
  color:#fff;
  font-family: var(--font-head);
  font-weight:700;
  font-size:15px;
  padding-bottom:6px;
  border-bottom:2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav-links a:hover,
.nav-links a.active{
  color:#fff;
  border-bottom-color: var(--brand-red);
}

/* Hamburger toggle — hidden above the tablet breakpoint (960px). The
   @media block further down reveals it and switches .nav-links from a
   horizontal row into a collapsible dropdown panel. Requires the
   matching button markup in the header — see the header HTML note. */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:0;
  background:transparent;
  border:none;
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle span{
  display:block;
  width:26px;
  height:3px;
  background:#fff;
  border-radius:2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle.open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* ---------------- Hero (home) ---------------- */
.hero{
  position:relative;
  min-height: 480px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-size: cover;
  background-position:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,25,.55), rgba(10,10,25,.65));
}
.hero-content{
  position:relative;
  z-index:2;
  color:#fff;
  padding: 40px 20px;
  animation: fadeUp 1s ease both;
}
.hero-content h1{
  color:#fff;
  font-size: 36px;
  font-weight:bold;
  line-height:2;
  letter-spacing:1px;
  margin-bottom:14px;
  text-shadow: 2px 2px 10px #000;
}
.hero-content h2{
  color:#fff;
  font-size: 36px;
  font-weight:bold;
  line-height:1.3;
  margin-bottom: 28px;
  text-shadow: 2px 2px 10px #000;
}
.btn-outline{
  display:inline-block;
  border:3px solid #fff;
  border-radius:7px;
  color:#fff;
  padding: 11px 32px;
  font-family: var(--font-head);
  font-size:29px;
  font-weight:600;
  letter-spacing: 1px;
  transition: all .25s ease;
}
.btn-outline:hover{
  background: rgba(186,22,28,.48);
  color: #fff;
}

/* simple page banner (about / areas / contact) */
.page-banner{
  position:relative;
  min-height: 240px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:cover;
  background-position:center;
}
.page-banner::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(10,10,20,.45);
}
.page-banner h1{
  position:relative; z-index:2;
  color:#fff;
  font-size:34px;
  animation: fadeUp .8s ease both;
}
.page-banner-about h1{
  font-size:43px;
  color:#f2f2f2;
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* ---------------- Contact + Areas preview (home) ---------------- */
.contact-areas-section{
  padding: 70px 0;
}
.contact-areas-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items:start;
}
.contact-box-outer{
  border: 20px solid var(--brand-red);
  border-radius: 7px;
}
.contact-box-inner{
  background: var(--light-grey);
  padding: 40px;
}
.contact-box-inner h3{
  font-size: 26px;
  margin-bottom:10px;
}
.contact-box-inner > p{
  margin-bottom: 20px;
  color: var(--text-muted);
  font-size:14px;
}
.form-group{ margin-bottom:16px; }
.form-group label{
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:6px;
}
.form-group label .req{ color: var(--brand-red); }
.form-group input,
.form-group textarea{
  width:100%;
  border:1px solid #cfcfcf;
  padding:12px 14px;
  font-family: var(--font-body);
  font-size:14px;
  background:#fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color: var(--accent-red);
  box-shadow: 0 0 0 3px rgba(238,59,50,.15);
}
.form-group textarea{ resize:vertical; min-height:100px; }
.btn-submit{
  background: #ed2229;
  color:#fff;
  border:1px solid var(--brand-red);
  border-radius:0;
  padding: 13px 34px;
  font-family: var(--font-head);
  font-weight:600;
  font-size:18px;
  letter-spacing:.5px;
  cursor:pointer;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.btn-submit:hover{ background:#fff; color:#ed2229; transform: translateY(-1px); }

/* Contact Us page uses a distinct pill-shaped submit button per the
   original site's own Elementor form settings (different from the
   homepage's contact form styling). */
.btn-submit-pill{
  background: var(--brand-red);
  color:#fff;
  border:1px solid var(--brand-red);
  border-radius:15px;
}
.btn-submit-pill:hover{ background:#f2f2f2; color:var(--brand-red); }
/* Honeypot field — invisible to real visitors (off-screen, not display:none,
   since spam bots specifically check for and skip display:none fields) */
.hp-field{
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note{
  margin-top:14px;
  font-size:13px;
  display:none;
}
.form-note.show{ display:block; animation: fadeIn .4s ease both; }
.form-note.success{ color:#1a7a2e; }

.areas-preview h4{
  font-size:18px;
  font-weight:bold;
  color: #242424;
  margin-bottom:0;
}
.areas-preview h3{
  font-size:28px;
  margin-top:0;
  margin-bottom:14px;
}
.areas-preview > p{
  color: var(--text-muted);
  font-size:14px;
  margin-bottom:18px;
  max-width:320px;
}
.areas-thumb-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.areas-thumb-grid .thumb-wide{
  grid-column: span 1;
}
@media (min-width:961px){
  .queens-col2{ grid-column:2; }
}
.thumb{
  position:relative;
  overflow:hidden;
  border-top:5px solid var(--brand-red);
  aspect-ratio: 4/3;
}
.thumb img{
  width:100%;height:100%;object-fit:cover;
  transition: transform .4s ease;
}
.thumb:hover img{ transform: scale(1.08); }
.thumb span{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px;
  background: linear-gradient(0deg, rgba(0,0,0,.55), transparent);
  color:#fff;
  font-family: var(--font-head);
  font-weight:600;
  font-size:14px;
}
.find-out-more{
  display:inline-block;
  margin-top:16px;
  color: var(--brand-red);
  font-weight:700;
  font-family: var(--font-head);
  font-size:18px;
  letter-spacing:.5px;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.find-out-more:hover{ border-color: var(--brand-red); }

/* ---------------- Testimonials ---------------- */
.testimonials{
  position:relative;
  background-image: linear-gradient(rgba(10,10,20,.35), rgba(10,10,20,.45)), url('../assets/testimonial-bg.webp');
  background-size:cover;
  background-position:center;
  padding: 140px 0 120px;
}
.testimonial-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.testimonial-card{
  background:#f2f2f2;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .25s ease;
}
.testimonial-card:hover{ transform: translateY(-6px); }
.testimonial-card p{
  font-size:14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.testimonial-card strong{
  display:block;
  margin-bottom:8px;
  font-family: var(--font-head);
}
.stars{ color:#f5b400; letter-spacing:2px; font-size:16px; }

/* ---------------- Icon feature boxes (home) ---------------- */
.features-section{
  padding: 80px 0 40px;
}
.features-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:24px;
  margin-bottom: 10px;
}
.feature-box{
  position:relative;
  aspect-ratio: 4/3;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.feature-box img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s ease;
}
.feature-box:hover img{ transform: scale(1.1); }
.feature-box::before{
  content: none;
}
.feature-box .label{
  position:relative; z-index:2;
  color:#fff;
  padding: 24px;
  font-family: var(--font-head);
  font-weight:400;
  font-size: 28px;
  line-height:1.35;
  width:100%;
  background: rgba(84,89,95,.47);
}
.feature-box .label::after{
  content:"";
  display:block;
  width:50px;height:3px;
  background: var(--brand-red);
  margin-top:12px;
}
.feature-box.text-box{
  background: var(--white);
  align-items:center;
  padding: 10px 24px;
  aspect-ratio: auto;
  overflow: visible;
}
.feature-box.text-box::before{
  content: none;
}
.feature-box.text-box h3{
  color: var(--brand-red);
  font-size:22px;
  line-height:1.3;
  margin-bottom:14px;
}
.feature-box.text-box p{
  font-size:14px;
  font-weight:500;
  color: var(--text-muted);
  margin-bottom:14px;
}

/* ---------------- About section (home + about page) ---------------- */
.about-section{
  background: var(--lighter-grey);
  padding: 70px 0;
}
.about-grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  align-items:center;
}
.about-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  min-height:280px;
}
.about-photo{
  width:100%;
  aspect-ratio: 3 / 2;
  overflow:hidden;
}
.about-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: left center;
  min-height:0;
}
.about-grid h3{
  font-size:26px;
  color: var(--brand-red);
}
.about-grid p{
  color: var(--text-muted);
  font-size:20px;
  font-weight:300;
  line-height:1.7;
}
.about-page-heading{
  font-size:24px;
  max-width:1100px;
  margin:0 auto 50px;
  white-space:nowrap;
}
@media (max-width: 960px){
  .about-page-heading{
    white-space:normal;
    max-width:none;
    font-size:22px;
  }
}

/* Full-bleed variant: photo runs edge-to-edge to the browser's left,
   text column stays aligned to the normal page margin on the right —
   matches the live site's home page About Us layout. */
.about-fullbleed{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  width:100%;
}
.about-photo-full{
  width:100%;
  aspect-ratio: 3 / 2;
  overflow:hidden;
  position: relative;
}
.about-photo-full img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: left center;
}
.about-photo-full::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to right, rgba(244,244,244,0) 45%, var(--lighter-grey) 92%);
  pointer-events:none;
}
.about-text{
  max-width: 720px;
  padding: 0 8% 0 60px;
}
.about-text h3{
  font-size:26px;
  color: var(--brand-red);
}
.about-text p{
  color: var(--text-muted);
  font-size:15px;
}

.about-hero-photo{
  border-top:6px solid var(--brand-red);
  overflow:hidden;
  aspect-ratio: 4 / 3.7;
}
.about-hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: center 25%;
}

/* ---------------- Contact info + schedule order ---------------- */
.info-order-section{
  background: var(--light-grey);
  padding: 70px 0;
}
.info-order-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items:start;
}
.contact-info h3{
  font-size:26px;
}
.contact-info-list{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 30px;
  margin-top: 24px;
}
.contact-info-item{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:15px;
  font-weight:bold;
  color:#242424;
}
.contact-info-item .icon{
  width:30px;height:30px;
  color: var(--brand-red);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition: color .2s ease;
}
.contact-info-item:hover .icon{ color:#ed2229; }
.contact-info-item .icon svg{ width:30px;height:30px; fill: currentColor; }
.contact-info-item a{ font-weight:bold; color:#242424; }

.schedule-card{
  background:#fff;
  padding: 64px;
  text-align:left;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.schedule-card h3{
  font-size: 24px;
  color:#242424;
  margin-bottom: 28px;
  text-align:center;
}
.schedule-card p{
  font-size:14px;
  color: var(--text-muted);
  margin-bottom: 56px;
  text-align:center;
}
.schedule-card a.cod-link{
  color: var(--brand-red);
  font-weight:700;
}
.btn-order-schedule{
  display:inline-block;
  background: var(--accent-red);
  color:#fff;
  padding:13px 34px;
  font-family: var(--font-head);
  font-weight:600;
  letter-spacing:.5px;
  transition: background .2s ease, transform .15s ease;
}
.btn-order-schedule:hover{ background:#d5281f; transform: translateY(-2px); }

/* ---------------- Footer ---------------- */
footer{
  background: var(--navy);
  color:#fff;
  padding: 22px 0;
  font-size: 15px;
  font-weight:300;
}
.footer-inner{
  max-width: var(--max-width);
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.footer-links a{
  margin-left:14px;
  transition: color .2s ease;
}
.footer-links a:hover{ color:#fff; }

/* ---------------- Areas We Serve page ---------------- */
.areas-columns-section{
  padding: 70px 0 30px;
}
.areas-columns-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 40px;
}
.areas-column h2{
  color: var(--brand-red);
  text-align:center;
  font-size:26px;
  margin-bottom:18px;
}
.areas-column .thumb{ margin-bottom: 22px; aspect-ratio:4/3.4; border-top:5px solid var(--brand-red); border-bottom:5px solid var(--brand-red); }
.zip-list li{
  margin-bottom:8px;
}
.zip-list a{
  color: var(--brand-red);
  font-size:14px;
  font-weight:400;
  letter-spacing:.2px;
  transition: color .2s ease, padding-left .2s ease;
  display:inline-block;
}
.zip-list a:hover{
  color:#8c1015;
  padding-left:4px;
}

/* ---------------- Contact page ---------------- */
.contact-page-section{
  padding: 70px 0;
}
.contact-page-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  background: var(--light-grey);
  padding: 50px;
}
.contact-blurb{
  background: #242424;
  color:#fff;
  padding: 40px;
  align-self:start;
}
.contact-blurb h3{ color:#fff; font-size:22px; font-weight:400; }
.contact-blurb p{ color:#d5d5e0; font-size:14px; }
.contact-form-col h3{
  font-size:22px;
  position:relative;
  padding-bottom:12px;
  margin-bottom:20px;
}
.contact-form-col h3::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:60px;height:3px;
  background: var(--brand-red);
}

/* ---------------- Utility / animations ---------------- */
.reveal{
  opacity:0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in-view{
  opacity:1;
  transform: translateY(0);
}

/* Back to top */
.back-to-top{
  position:fixed;
  right:22px; bottom:22px;
  width:46px;height:46px;
  border-radius:50%;
  background: var(--brand-red);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  opacity:0; visibility:hidden;
  transform: translateY(10px);
  transition: all .3s ease;
  z-index:999;
  cursor:pointer;
  border:none;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:#8c1015; }

/* ---------------- Responsive ---------------- */
@media (max-width: 960px){
  .contact-areas-grid,
  .about-grid,
  .about-fullbleed,
  .info-order-grid,
  .contact-page-grid,
  .areas-columns-grid{
    grid-template-columns: 1fr;
  }
  .about-text{
    max-width:none;
    padding: 30px 24px 0;
  }
  .about-photo-full::after{
    background: linear-gradient(to bottom, rgba(244,244,244,0) 70%, var(--lighter-grey) 100%);
  }
  .features-grid{ grid-template-columns: repeat(2,1fr); }
  .feature-box .label{ font-size:18px; }
  .testimonial-grid{ grid-template-columns: 1fr; }
  .contact-info-list{ grid-template-columns: 1fr 1fr; }
  .about-grid{ text-align:left; }
  .about-grid img{ min-height:220px; }

  /* Header collapses behind a hamburger at tablet widths and below
     instead of letting the full nav wrap and stack in place. Logo and
     hamburger stack vertically (logo on top, hamburger centered under
     it) rather than sitting side by side. */
  .navbar-inner{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
  }
  .logo img{ height:120px; }
  .nav-toggle{ display:flex; }
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    gap:0;
    background: var(--navy);
    border-top:1px solid rgba(255,255,255,.12);
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
    z-index:50;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{
    width:100%;
    padding:16px 24px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-links a:last-child{ border-bottom:none; }
  .nav-links a.active,
  .nav-links a:hover{
    border-bottom:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.06);
  }
  .topbar-inner{
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
  }
  /* Facebook icon hidden at tablet/mobile widths — the county links and
     Order Now button are enough for the collapsed top bar. */
  .social-icon{ display:none; }

  /* "Areas we deliver to:" sits on its own line, with the three county
     links together on the line below — a deliberate break instead of
     letting the county list wrap wherever it happens to run out of
     room. */
  .topbar-areas span:first-child{
    display:block;
    margin-bottom:4px;
  }

  /* Areas We Deliver To section shows above the contact form at tablet
     widths and below (source order in the HTML is unchanged — form
     first, then areas-preview — this just flips the visual order). */
  .contact-box-outer{ order:2; }
  .areas-preview{ order:1; }

  /* Each county thumbnail gets its own full-width row instead of a
     2-up grid, and the Queens tile's desktop-only column placement
     (see .queens-col2 above) no longer applies. */
  .areas-thumb-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  .logo img{ height:100px; }
  .features-grid{ grid-template-columns: 1fr; }
  .hero-content h1{ font-size:22px; }
  .hero-content h2{ font-size:22px; }
  .contact-info-list{ grid-template-columns: 1fr; }
  .areas-columns-grid{ gap: 50px; }
  .schedule-card{ padding: 32px; }
  .contact-box-inner{ padding: 26px; }
  .contact-box-outer{ border-width: 12px; }
  .contact-page-grid{ padding: 30px; }
  footer{ font-size:12px; }
}

@media (max-width: 420px){
  .btn-outline{ padding: 10px 24px; font-size: 18px; }
  .hero-content h1{ font-size:19px; }
  .hero-content h2{ font-size:19px; }
  .schedule-card{ padding: 24px; }
}

/* ---------------- Legal pages (Terms / Privacy) ---------------- */
.legal-section{
  padding: 60px 0 20px;
}
.legal-content{
  max-width: 840px;
  margin: 0 auto;
}
.legal-content .updated{
  color: var(--text-muted);
  font-size:14px;
  margin-bottom: 30px;
}
.legal-content h2{
  color: var(--brand-red);
  font-size: 22px;
  margin-top: 36px;
}
.legal-content h3{
  font-size: 18px;
  margin-top: 22px;
}
.legal-content p,
.legal-content li{
  color: var(--text-muted);
  font-size: 15px;
}
.legal-content ul{
  margin: 10px 0 18px 22px;
  list-style: disc;
}
.legal-content li{ margin-bottom:6px; }
.legal-content a{
  color: var(--brand-red);
  font-weight:600;
}
.legal-content a:hover{ text-decoration: underline; }