/* =====================================================================
   GREEN LIGHT LOGISTICS — SHARED STYLESHEET
   Every page links this file. Change it once, it changes everywhere.

   Palette, type and logo rules per the GlobalTranz Agent Brand
   Guidelines, October 2023:
     - Lime is accent only. Never a background, never a primary.
     - Primary Blue is the button colour and the main saturation point.
     - Dark Gray is body copy. Headings in Pavement or Black.
     - Never heavier than Bold. Headline tracking runs tight.
     - Body leading about 1.5x the font size.
     - White space is a brand asset.
   ===================================================================== */

:root{
  --night:#013B6B;
  --blue:#0086D4;
  --lime:#DFF874;
  --pavement:#1B2B3A;
  --sky:#73B3E1;
  --cloud:#E3F1FA;
  --dgray:#3C4146;
  --lgray:#989FA5;
  --hair:#DCE6ED;
  --tint:#F5F9FC;
  --flag:#96301B;
  --flag-bg:#FFF4F1;
  --font:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:#fff;
  color:var(--dgray);
  font-family:var(--font);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none;margin:0;padding:0}
p{margin:0}
a{color:var(--night);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--night);outline-offset:3px}
sup{font-size:.62em;vertical-align:super;line-height:0}

/* ---------- headings ---------- */
h1,h2,h3,h4{
  margin:0;
  font-family:inherit;
  color:var(--pavement);
  font-weight:700;
  letter-spacing:-.018em;
  line-height:1.14;
}
h1{font-size:clamp(34px,4.4vw,49px)}
h2{font-size:clamp(28px,3.2vw,37px)}
h3{font-size:20px;letter-spacing:-.012em;line-height:1.26}
h4{font-size:16px;letter-spacing:-.008em;line-height:1.3}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 clamp(18px,4vw,32px)}
.wrap-narrow{max-width:800px}
.section{padding:84px 0}
.section-sm{padding:56px 0}
.section-tint{background:var(--tint)}
.section-cloud{background:var(--cloud)}
.section-dark{background:var(--night)}
.section-dark h2,
.section-dark h3,
.section-dark h4{color:#fff}
.section-dark p,
.section-dark li{color:var(--cloud)}
.section-dark a{color:var(--lime)}

/* A light surface nested inside a dark section must NOT inherit the
   dark-section text colours. Cloud on white is unreadable, and lime on
   Cloud is worse. Reset anything sitting on a light panel back to the
   normal palette. */
.section-dark .form-card,
.section-dark .callout,
.section-dark .proof,
.section-dark .tbl-wrap{color:var(--dgray)}
.section-dark .form-card p,
.section-dark .form-card li,
.section-dark .form-card td,
.section-dark .callout p,
.section-dark .callout li,
.section-dark .proof p{color:var(--dgray)}
.section-dark .form-card a,
.section-dark .callout a,
.section-dark .proof a{color:var(--night)}
.section-dark .form-card label,
.section-dark .form-card legend,
.section-dark .form-card .embed-slot,
.section-dark .form-card .embed-slot strong{color:var(--night)}
.section-dark .form-card .req{color:var(--flag)}
.section-dark .form-card h2,
.section-dark .form-card h3,
.section-dark .form-card h4,
.section-dark .callout strong,
.section-dark .proof-stat{color:var(--pavement)}
.section-dark .form-card .form-note.is-error{color:var(--flag)}
.section-head{max-width:58ch;margin-bottom:40px}
.section-head p{margin-top:14px;font-size:17.5px}
.section-head-center{margin-left:auto;margin-right:auto;text-align:center}
[id]{scroll-margin-top:96px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--night);color:#fff;padding:12px 18px;font-weight:600;
}
.skip:focus{left:0}

.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--night);margin:0 0 18px;display:block;
}
.section-dark .eyebrow{color:var(--lime)}
.lede{font-size:19px;max-width:62ch}
.fineprint{font-size:14px;color:var(--dgray);margin-top:16px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-weight:700;font-size:19px;line-height:1.2;
  padding:14px 28px;border-radius:3px;border:2px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--night)}
.btn-lime{background:var(--lime);color:var(--night)}
.btn-lime:hover{background:#EBFF9E}
.btn-outline{border-color:#B9CBD8;color:var(--night);background:transparent}
.btn-outline:hover{border-color:var(--night);background:var(--tint)}
/* Outline buttons on ANY dark ground. Night-on-Pavement is unreadable,
   so every dark surface has to be listed here, not just .section-dark. */
.section-dark .btn-outline,
.final .btn-outline,
.footer .btn-outline{border-color:rgba(227,241,250,.55);color:#fff;background:transparent}
.section-dark .btn-outline:hover,
.final .btn-outline:hover,
.footer .btn-outline:hover{border-color:var(--lime);color:var(--lime);background:rgba(255,255,255,.07)}
.btn-sm{font-size:16px;padding:10px 20px}
.btn-block{width:100%}
/* Disabled reads as disabled through colour, not through opacity.
   Fading a solid button just makes its label unreadable. */
.btn[disabled],
.btn[disabled]:hover{
  background:var(--hair);color:var(--dgray);
  border-color:transparent;opacity:1;cursor:not-allowed;
}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---------- masthead ----------
   FIRST PASS. Header design is still an open item on the handoff.
   The Authorized Agent mark is kept out of the header on purpose: the
   pairing rules forbid the blue version, and the footer lockup already
   carries it correctly in white on Night. */
.masthead{
  background:#fff;border-bottom:1px solid var(--hair);
  position:sticky;top:0;z-index:40;
}
.masthead .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:30px;min-height:82px;
}
.masthead-logo{display:block;flex:none;padding:8px 0}
.masthead-logo img{width:200px}
.masthead-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.masthead-nav a{font-size:15.5px;font-weight:600;color:var(--night)}
.masthead-nav a:hover{color:var(--blue)}
.masthead-nav a[aria-current="page"]{color:var(--blue);text-decoration:underline;
  text-underline-offset:5px;text-decoration-thickness:2px}

/* ---------- site search ---------- */
.search{position:relative;flex:none;width:210px}
.search input{
  font-family:inherit;font-size:15px;color:var(--pavement);width:100%;
  padding:9px 13px 9px 34px;border:1px solid var(--hair);border-radius:3px;
  background:var(--tint) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23013B6B' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") no-repeat 10px center;
  background-size:15px 15px;
  transition:border-color .15s ease,background-color .15s ease;
}
.search input::placeholder{color:var(--lgray)}
.search input:focus{background-color:#fff;border-color:var(--sky);outline:none}
.search input:focus-visible{outline:3px solid var(--night);outline-offset:2px}

.search-results{
  position:absolute;top:calc(100% + 8px);right:0;width:420px;max-width:88vw;
  background:#fff;border:1px solid var(--hair);border-radius:6px;
  box-shadow:0 24px 50px -24px rgba(1,59,107,.5);
  z-index:60;overflow:hidden;max-height:70vh;overflow-y:auto;
}
.search-results ul{margin:0;padding:0}
.search-results li + li{border-top:1px solid var(--hair)}
.search-results a{display:block;padding:14px 18px;text-decoration:none}
.search-results a:hover,
.search-results [aria-selected="true"] a{background:var(--tint);text-decoration:none}
.search-title{
  display:block;font-weight:700;font-size:16px;color:var(--night);
  letter-spacing:-.01em;line-height:1.3;
}
.search-snip{
  display:block;font-size:14px;color:var(--dgray);
  margin-top:4px;line-height:1.5;
}
.search-results mark{background:var(--lime);color:var(--night);padding:0 2px;border-radius:2px}
.search-empty{padding:18px;font-size:15px;color:var(--dgray)}
.search-empty a{color:var(--night);font-weight:600}

/* ---------- hero ---------- */
.hero{padding:70px 0 72px;background:linear-gradient(180deg,var(--cloud) 0%,#fff 72%)}
.hero-sm{padding:60px 0 44px}
.hero h1{max-width:19ch;margin-bottom:20px}
.hero-wide h1{max-width:26ch}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:start}
.hero-lead{font-size:19px;max-width:52ch;margin-bottom:18px}
.hero-body{max-width:52ch}

/* ---------- breadcrumb ---------- */
.crumb{font-size:14px;color:var(--dgray);margin-bottom:16px}
.crumb a{color:var(--night)}
.crumb span{color:var(--lgray);padding:0 7px}

/* ---------- cards and grids ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.grid-tight{gap:16px}
.stack-gap{margin-top:22px}

.card{
  background:#fff;border:1px solid var(--hair);border-radius:6px;
  padding:32px 30px;display:flex;flex-direction:column;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.card:hover{border-color:var(--sky);box-shadow:0 12px 28px -22px rgba(1,59,107,.5)}
.card h3{margin-bottom:10px}
.card p{font-size:16px;margin-bottom:18px}
.card p:last-child{margin-bottom:0}
.card-sm{padding:26px 24px}
.card-sm h3{font-size:17.5px}
.card-sm p{font-size:15.5px}
.card-flat:hover{border-color:var(--hair);box-shadow:none}
.section-dark .card{background:rgba(255,255,255,.05);border-color:rgba(227,241,250,.22)}
.section-dark .card:hover{border-color:var(--lime);box-shadow:none}

.tag{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--night);margin-bottom:12px;display:block;
}
.section-dark .tag{color:var(--lime)}
.go{margin-top:auto;font-weight:700;font-size:15.5px;color:var(--night);padding-top:6px}
.go:hover{color:var(--blue)}
.section-dark .go{color:var(--lime)}

/* ---------- numbered steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.steps h3{margin-bottom:10px}
.steps p{font-size:16px}
.step-num{
  width:40px;height:40px;border-radius:50%;background:var(--lime);
  color:var(--night);display:grid;place-items:center;font-weight:700;
  font-size:17px;margin-bottom:18px;
}

/* ---------- bullet lists ---------- */
.ticks li{position:relative;padding-left:26px;margin-bottom:12px;font-size:16px}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:10px;height:10px;border-radius:50%;background:var(--lime);
}
.ticks-tight li{margin-bottom:8px}
.plainlist li{margin-bottom:10px}

/* ---------- callout ---------- */
.callout{
  background:#fff;border:1px solid var(--hair);border-left:6px solid var(--lime);
  border-radius:6px;padding:24px 28px;font-size:16px;
}
.callout strong{color:var(--pavement)}
.callout-warn{border-left-color:var(--flag);background:var(--flag-bg)}

/* ---------- stat block ---------- */
.proof{
  display:grid;grid-template-columns:auto 1fr;gap:42px;align-items:center;
  background:#fff;border:1px solid var(--hair);border-left:6px solid var(--lime);
  padding:36px 40px;border-radius:6px;
}
.proof-stat{
  font-size:clamp(52px,7vw,78px);font-weight:700;color:var(--night);
  line-height:.88;letter-spacing:-.035em;
}
.proof-stat span{
  display:block;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--night);margin-top:14px;line-height:1.4;
}
.proof p{font-size:17.5px}
.proof-fine{display:block;font-size:14px;color:var(--dgray);margin-top:10px}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:6px;background:#fff}
table{width:100%;border-collapse:collapse;min-width:520px}
caption{text-align:left;padding:0 0 14px;font-size:14.5px;color:var(--dgray)}
th,td{padding:13px 20px;text-align:left;border-bottom:1px solid var(--hair);font-size:15.5px}
thead th{
  background:var(--night);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
}
tbody td{font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even) td{background:#FBFCFD}
.new-tag{
  display:inline-block;margin-left:9px;background:var(--lime);color:var(--night);
  font-size:10px;font-weight:700;letter-spacing:.12em;padding:3px 7px;border-radius:2px;
  vertical-align:middle;
}

/* ---------- forms ----------
   Field names follow the Zoho CRM Leads module. Last_Name is
   system-mandatory. Never put Zoho API credentials in this page. */
.form-card{background:#fff;border:1px solid var(--hair);border-radius:6px;padding:32px 30px}
.section-dark .form-card{background:#fff}
.field{display:flex;flex-direction:column;margin-top:16px}
.field:first-child{margin-top:0}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.field-pair:first-child{margin-top:0}
.field-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.field-row:first-child{margin-top:0}

/* Fields sitting side by side in a grid get their vertical rhythm from
   the grid, not from their own margin. Without this only the first
   column loses its margin-top and the rest of the row hangs lower.
   justify-content keeps the inputs on one line even if a label wraps. */
.field-row .field,
.field-pair .field{margin-top:0;justify-content:flex-end}
.field label{
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--night);margin-bottom:7px;
}
.field .req{color:var(--flag);margin-left:3px}
.field input,
.field select,
.field textarea{
  font-family:inherit;font-size:17px;color:var(--pavement);
  padding:11px 13px;border:1px solid var(--hair);border-radius:3px;
  background:var(--tint);width:100%;
  transition:border-color .15s ease,background .15s ease;
}
.field input,
.field select{font-variant-numeric:tabular-nums}
.field textarea{min-height:120px;resize:vertical;line-height:1.55}
.field input:focus,
.field select:focus,
.field textarea:focus{background:#fff;border-color:var(--sky);outline:none}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{outline:3px solid var(--night);outline-offset:2px}
.field input::placeholder,
.field textarea::placeholder{color:var(--lgray)}
.field-help{font-size:13.5px;color:var(--dgray);margin-top:6px}
.checkline{display:flex;gap:11px;align-items:flex-start;margin-top:18px;font-size:15px}
.checkline input{width:18px;height:18px;flex:none;margin-top:4px;accent-color:var(--blue)}
.form-note{margin-top:14px;font-size:14.5px;color:var(--dgray)}
.form-note.is-error{color:var(--flag);font-weight:600}

/* Marks where a JotForm or Zoho embed replaces the static markup. */
.embed-slot{
  margin-top:18px;background:var(--cloud);border-radius:4px;
  padding:16px 18px;font-size:14.5px;color:var(--night);
}
.embed-slot strong{display:block;margin-bottom:4px}

/* ---------- lead magnet card ---------- */
.magnet{
  display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;
  border:1px solid var(--hair);border-radius:6px;padding:40px 42px;background:#fff;
}
.magnet-media{
  background:var(--tint);border:1px solid var(--hair);border-radius:4px;
  padding:26px;display:flex;flex-direction:column;justify-content:center;
}
.magnet-kicker{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--night);margin-bottom:10px;
}

/* ---------- final call to action ---------- */
.final{background:var(--pavement);text-align:center;padding:88px 0}
.final h2{color:#fff;max-width:22ch;margin:0 auto 18px}
.final p{max-width:56ch;margin:0 auto 30px;color:var(--cloud);font-size:17.5px}
.final .cta-row{justify-content:center;margin-top:0}
/* .final is a dark band but is not .section-dark, so anything that
   defaults to a dark ink has to be lifted here too. */
.final a:not(.btn){color:var(--lime)}
.final .eyebrow,
.final .tag,
.final li{color:var(--lime)}

/* ---------- footer ---------- */
.footer{background:var(--night);padding:62px 0 34px;font-size:15px;color:var(--cloud)}
.footer h2{font-size:15px;letter-spacing:0;line-height:1.3;color:#fff;margin:0 0 16px}
.footer a{color:var(--cloud)}
.footer a:hover{color:var(--lime)}
.footer li{margin-bottom:10px}
.footer-cta{
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;padding:0 0 34px;margin-bottom:38px;
  border-bottom:1px solid rgba(227,241,250,.24);
}
.footer-cta h2{font-size:22px;letter-spacing:-.015em;margin:0 0 6px;color:#fff}
.footer-cta p{margin:0;font-size:15px;color:var(--cloud);max-width:52ch}
.footer-cta .btn{flex:none}

.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px;margin-bottom:44px}
.footer-blurb{margin-top:24px;max-width:34ch;font-size:14.5px}

/* Tagline lockup: Authorized Agent mark below our logo, right-aligned,
   60 to 75 percent of our logo width and never under 1.75 inches.
   240px logo with a 168px mark is 70 percent and exactly 1.75 inches. */
.lockup{display:inline-flex;flex-direction:column;align-items:flex-end;gap:15px}
.lockup-logo{width:240px}
.lockup-agent{width:168px}

.footer-bottom{
  border-top:1px solid rgba(227,241,250,.24);padding-top:24px;display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;
}
.footer-legal{max-width:74ch;margin-top:14px;font-size:13.5px;color:var(--cloud)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
}
@media (max-width:940px){
  .hero-grid,.magnet{grid-template-columns:1fr;gap:40px}
  .steps,.grid-3,.grid-2{grid-template-columns:1fr}
  .search{width:180px}
}
/* Below this the logo, search and button will not sit on one line.
   The logo takes the first row on its own; search and the button share
   the second, with search flexing to fill whatever the button leaves.
   min-width:0 on the search matters — without it a flex item refuses to
   shrink below its content width and pushes the button off screen. */
@media (max-width:760px){
  .masthead .wrap{
    flex-wrap:wrap;min-height:0;
    padding-top:12px;padding-bottom:12px;gap:10px;
  }
  .masthead-logo{flex:0 0 auto;padding:0}
  .masthead-nav{
    flex:1 1 100%;flex-wrap:nowrap;
    margin-left:0;gap:10px;align-items:stretch;
  }
  .masthead-nav .btn{flex:0 0 auto;white-space:nowrap;padding:10px 16px}
  .search{flex:1 1 auto;min-width:0;width:auto}
  .search input{width:100%}
  .search-results{width:100%;left:0;right:auto}
}
@media (max-width:640px){
  .section,.final,.hero{padding-top:56px;padding-bottom:56px}
  .proof{grid-template-columns:1fr;gap:14px;padding:28px 24px}
  .footer-grid,.grid-4{grid-template-columns:1fr;gap:30px}
  .lockup{align-items:flex-start}
  .field-row{grid-template-columns:1fr 1fr}
  .btn{font-size:17px;padding:13px 22px}
  .cta-row .btn{width:100%}
  .magnet,.form-card{padding:28px 22px}
  .masthead .wrap{min-height:70px;gap:16px}
  .masthead-logo img{width:170px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* ---------- mobile menu ----------
   The links are hidden below 1100px and the toggle takes over. That
   threshold is set by where the header actually runs out of room, not by
   a round number: with four links, a 210px search box and the button,
   the row starts wrapping "What we move" and "Get a rate" onto two lines
   at about 1150px. It used to break at 940px, which left a band between
   940 and 1150 where the header looked broken.

   Until now nothing replaced the hidden links, so four of the five nav
   destinations were reachable only from the footer.

   Desktop is deliberately untouched: the toggle is display:none and
   .nav-panel is display:contents, which keeps its children as direct flex
   children of .masthead-nav, laid out exactly as they were before this
   component existed.

   The panel drops out of the header rather than reflowing it. .masthead is
   position:sticky, which establishes the containing block, so the same
   absolute positioning works at both mobile breakpoints without depending
   on how the header itself is wrapping at that width. */
.nav-toggle{display:none}
.nav-panel{display:contents}

@media (max-width:1100px){
  .nav-toggle{
    display:flex;align-items:center;justify-content:center;
    flex:0 0 auto;width:42px;height:42px;padding:0;
    background:none;border:1px solid var(--hair);border-radius:4px;
    cursor:pointer;
    /* First item in the row. The menu control belongs at the leading
       edge, not wedged between the search box and the button. */
    order:-1;
  }
  .nav-toggle:hover{border-color:var(--sky)}
  .nav-toggle:focus-visible{outline:3px solid var(--night);outline-offset:2px}

  /* The links this replaces. */
  .masthead-nav a:not(.btn){display:none}

  .nav-toggle span{
    position:relative;display:block;width:19px;height:2px;
    background:var(--night);border-radius:2px;
  }
  .nav-toggle span::before,
  .nav-toggle span::after{
    content:"";position:absolute;left:0;width:19px;height:2px;
    background:var(--night);border-radius:2px;transition:transform .18s ease;
  }
  .nav-toggle span::before{top:-6px}
  .nav-toggle span::after{top:6px}

  /* Open: the three bars become an X. */
  .nav-toggle[aria-expanded="true"] span{background:transparent}
  .nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

  .nav-panel{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--hair);
    box-shadow:0 14px 26px -20px rgba(1,59,107,.55);
    padding:4px clamp(18px,4vw,32px) 12px;
  }
  .nav-panel.is-open{display:block}

  /* Beats the .masthead-nav a:not(.btn){display:none} rule above on
     specificity, so the links show once the panel is open. */
  .masthead-nav .nav-panel a:not(.btn){
    display:block;padding:15px 2px;font-size:17px;
    border-bottom:1px solid var(--hair);
  }
  .masthead-nav .nav-panel a:not(.btn):last-child{border-bottom:0}
}