/* =========================================================================
   Avalon Ventures — base.css
   Global design tokens (DESIGN.md §7.2), a light reset, base element styles,
   and the shared shell: buttons, header/nav (light + dark), cards, footer.
   Page-specific styles live alongside each page (e.g. home.css).
   Change tokens HERE — never hardcode colors in page CSS or markup.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */
:root{
  /* Brand hues */
  --color-oxford-blue:#0E182F;
  --color-brass:#A8843A;
  --color-brass-hover:#8C6E2F;
  --color-brass-pressed:#74591F;
  --color-brass-disabled:#D8C7A0;
  --color-brass-ring:rgba(168,132,58,0.35);
  --color-brass-tint:#F4EDDD;
  --color-brass-on-dark:#C29A4E;

  /* Neutrals */
  --color-payne:#465C72;
  --color-french-gray:#CBD5E1;
  --color-antiflash:#EFEFEF;
  --color-seasalt:#F9F9F9;
  --color-white:#FFFFFF;

  /* Text ink ladder — on light (navy hue, five steps) */
  --color-text-heading:#0E182F;
  --color-text-deck:#465C72;
  --color-text-body:#5E6B79;
  --color-text-muted:#62707E;
  --color-text-subtle:#94A0AC;

  /* Text ink ladder — on dark (inverted) */
  --color-text-on-dark-heading:#F9F9F9;
  --color-text-on-dark-body:#CBD5E1;
  --color-text-on-dark-muted:#94A0AC;
  --color-text-on-dark-subtle:#6E7C8A;

  /* Status (utility only) */
  --color-success:#2F7A55;  --color-success-tint:#E8F1EC;
  --color-warning:#B5731B;  --color-warning-tint:#F6ECDC;
  --color-error:#B23A3A;    --color-error-tint:#F6E5E5;
  --color-info:#2E6CA8;     --color-info-tint:#E5EEF6;

  /* Surfaces & borders */
  --color-bg-page:#F9F9F9;
  --color-bg-surface:#FFFFFF;
  --color-surface-dark:#0E182F;
  --color-surface-dark-raised:#18233D;
  --color-border-hairline:rgba(14,24,47,0.12);
  --color-border-on-dark:rgba(255,255,255,0.14);

  /* Type */
  --font-display:'Jost', sans-serif;   /* headings, brand voice */
  --font-body:'Lora', serif;           /* long-form storyteller */
  --font-ui:'Inter', sans-serif;       /* interface, forms, portal */

  /* Radius */
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-pill:999px;

  /* Spacing (4px base) */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  --space-9:48px; --space-10:64px; --space-11:80px; --space-12:96px;

  /* Motion */
  --ease:cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:150ms;
  --dur-base:220ms;

  /* Layout */
  --container:1120px;
}

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--color-bg-page);
  color:var(--color-text-body);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%;}
img{height:auto;}
a{color:inherit;}
button{font:inherit; color:inherit; margin:0;}
ul{margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--color-text-heading);
  font-weight:500;
  margin:0;
  line-height:1.2;
}
p{margin:0;}

/* ------------------------------------------------------- type scale helpers */
h1,.h1{font-size:32px; line-height:1.18;}
h2,.h2{font-size:26px; line-height:1.20;}
h3,.h3{font-size:21px; line-height:1.25;}
h4,.h4{font-size:18px; line-height:1.30;}

.eyebrow{
  font-family:var(--font-ui);
  font-size:11px; font-weight:500; letter-spacing:0.06em;
  color:var(--color-brass);
  margin:0 0 14px;
}
/* Orientation label above a section heading — NOT a load-bearing title
   (DESIGN.md §2.4). Larger/more legible than the 11px eyebrow; H2 still leads. */
.section-label{
  font-family:var(--font-ui);
  font-size:13px; font-weight:500; line-height:1.3;
  color:var(--color-text-muted);
  margin:0 0 10px;
}
.band--dark .section-label{color:var(--color-brass-on-dark);}
.deck{
  font-family:var(--font-body);
  font-size:18px; line-height:1.45;
  color:var(--color-text-deck);
  max-width:34em;
}
.prose{
  font-family:var(--font-body);
  font-size:16px; line-height:1.62;          /* standard section body */
  color:var(--color-text-body);
  max-width:34em;
}
.prose.lead{font-size:17px; line-height:1.55;}   /* standfirst / important intro */

/* ------------------------------------------------------------------ layout */
.container{max-width:var(--container); margin:0 auto; padding-inline:24px;}
.section{padding-block:clamp(56px, 7vw, 88px);}
/* Targeted tighter rhythm for a single section (used on the homepage audience
   section). Caps the large endpoint ~60px without touching the global rhythm. */
.section--compact{padding-block:clamp(44px, 6vw, 60px);}

.band--dark{background:var(--color-surface-dark); color:var(--color-text-on-dark-body);}
.band--dark h1,.band--dark h2,.band--dark h3,.band--dark h4{color:var(--color-text-on-dark-heading);}
.band--dark .eyebrow{color:var(--color-brass-on-dark);}
.band--dark .deck{color:var(--color-text-on-dark-body);}

/* skip link */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--color-oxford-blue); color:var(--color-seasalt);
  font-family:var(--font-ui); font-size:14px;
  padding:10px 16px; border-radius:var(--radius-sm);
}
.skip-link:focus{left:12px; top:12px;}

/* ------------------------------------------------------------------- links */
.link{
  color:var(--color-text-heading);
  text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:3px;
  transition:text-decoration-color var(--dur-fast) var(--ease);
}
.link:hover{text-decoration-color:var(--color-brass);}

/* ----------------------------------------------------------------- buttons */
.btn{
  font-family:var(--font-ui); font-weight:500;
  border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none;
  padding:11px 20px; font-size:14px; min-height:44px;   /* tap target >= 44px */
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring);}

.btn--primary{background:var(--color-brass); color:#fff;}
.btn--primary:hover{background:var(--color-brass-hover);}
.btn--primary:active{background:var(--color-brass-pressed); transform:scale(0.98);}
.btn--primary:disabled{background:var(--color-brass-disabled); cursor:not-allowed;}

.btn--secondary{background:transparent; border-color:var(--color-oxford-blue); color:var(--color-oxford-blue);}
.btn--secondary:hover{background:rgba(14,24,47,0.06);}

.btn--tertiary{background:transparent; color:var(--color-oxford-blue); padding-inline:8px; min-height:auto;}
.btn--tertiary:hover{text-decoration:underline; text-decoration-color:var(--color-brass); text-underline-offset:3px;}

.btn--small{padding:9px 16px; font-size:13px; min-height:44px;}
.btn--lg{padding:15px 28px; font-size:15px; min-height:50px;}

/* button dark-surface variants (DESIGN.md §4.5) — primary brass is unchanged */
.on-dark .btn--secondary{border-color:var(--color-french-gray); color:var(--color-seasalt);}
.on-dark .btn--secondary:hover{background:rgba(255,255,255,0.08);}
.on-dark .btn--tertiary{color:var(--color-text-on-dark-body);}

/* ------------------------------------------------------------------- cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px;}
.card{
  display:flex; flex-direction:column;
  background:var(--color-white);
  border:0.5px solid var(--color-border-hairline);
  border-radius:var(--radius-lg);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:border-color var(--dur-base) var(--ease);
}
.card:hover{border-color:rgba(14,24,47,0.24);}
.card:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring);}
.card__thumb{display:block; aspect-ratio:4 / 3; background:var(--color-french-gray); overflow:hidden;}
.card__thumb img{width:100%; height:100%; object-fit:cover;}
.card__body{display:block; padding:18px 20px;}
.card__title{font-family:var(--font-display); font-size:18px; color:var(--color-text-heading); display:block; margin-bottom:6px;}
.card__text{font-family:var(--font-body); font-size:14px; line-height:1.55; color:var(--color-text-body); display:block;}

/* ------------------------------------------------------------------ forms */
/* Mirrors the component sheet. 16px inputs avoid iOS focus-zoom; 48px tall
   keeps tap targets comfortable; focus is a brass border + 3px brass ring. */
.field{display:flex; flex-direction:column; gap:6px;}
.field > label{font-family:var(--font-ui); font-size:13px; font-weight:500; color:var(--color-text-muted);}
.field__opt{color:var(--color-text-subtle); font-weight:400;}
.input{
  font-family:var(--font-ui); font-size:16px; color:var(--color-text-body);
  background:var(--color-white); border:1px solid var(--color-french-gray);
  border-radius:var(--radius-sm); padding:12px 14px; width:100%; min-height:48px;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder{color:var(--color-text-subtle);}
.input:hover{border-color:var(--color-payne);}
.input:focus{outline:none; border-color:var(--color-brass); box-shadow:0 0 0 3px var(--color-brass-ring);}
textarea.input{min-height:132px; line-height:1.5; resize:vertical;}
select.input{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2362707E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.help{font-family:var(--font-ui); font-size:13px; color:var(--color-text-muted);}

/* Form validation states. `.s-error` only recolours the border — width stays
   1px so a field does not shift when it becomes invalid. A focused field keeps
   the brass ring: focus is about where you are, the red border and the help
   text below say what is wrong, and the two do not need to fight. */
.input.s-error{border-color:var(--color-error);}
.input.s-success{border-color:var(--color-success);}
.help.s-error{color:var(--color-error);}
.help.s-success{color:var(--color-success);}

/* Form-level message — the panel a form shows after the server answers.
   Generic on purpose: Phase 2's portal forms use the same component.

   Text is the navy heading ink rather than the status colour. DESIGN.md §1.4
   permits status colours for text, but §1.5 requires one hue family for all
   text and a 4.5:1 floor — and body ink on the error tint measures 4.48:1,
   just under it. Heading ink measures 14.5:1. So the colour signal lives in
   the left rule and the tint, and the words stay comfortably readable. */
.form-message{
  font-family:var(--font-ui); font-size:14px; line-height:1.6;
  color:var(--color-text-heading);
  padding:14px 16px; margin:0;
  border-radius:var(--radius-sm);
  border:0.5px solid transparent; border-left:3px solid transparent;
}
/* Focused programmatically after submit so a screen reader lands on it. It is
   not tabbable, so a focus ring here would mislead — brass rings stay on
   things you can actually reach with the keyboard. */
.form-message:focus{outline:none;}
.form-message--success{background:var(--color-success-tint); border-color:var(--color-success);}
.form-message--error{background:var(--color-error-tint);   border-color:var(--color-error);}

/* A form-level message can carry a heading and body when it stands in for the
   whole form — a one-line confirmation reads as an afterthought in the space a
   form used to occupy. */
.form-message__title{
  font-family:var(--font-display); font-weight:500;
  font-size:20px; line-height:1.25; margin:0 0 8px;
  color:var(--color-text-heading);
}
.form-message__body{margin:0; color:var(--color-text-heading);}

@media (prefers-reduced-motion: no-preference){
  .form-message{animation:av-form-message-in var(--dur-base) var(--ease);}
  @keyframes av-form-message-in{
    from{opacity:0; transform:translateY(-4px);}
    to{opacity:1; transform:none;}
  }
}

/* ------------------------------------------------------------ header / nav */
.site-header{
  position:relative; z-index:20;
  background:var(--color-bg-page);
  border-bottom:0.5px solid var(--color-border-hairline);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block:24px 14px;
}
.site-logo{display:inline-flex; align-items:center;}
.site-logo img{height:60px; width:auto;}
.site-logo__dark{display:none;}

.nav{display:flex; align-items:center;}
.nav__links{
  display:flex; align-items:center; gap:26px; list-style:none;
}
.nav__links a{
  font-family:var(--font-ui); font-size:14px; text-decoration:none;
  color:var(--color-text-deck);
  display:inline-flex; align-items:center; min-height:44px;
  position:relative;
}
.nav__links a:hover{color:var(--color-text-heading);}
.nav__links a[aria-current="page"]{color:var(--color-text-heading);}
.nav__links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:9px; height:2px;
  background:var(--color-brass);
}
.nav__links a:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring); border-radius:var(--radius-sm);}
.nav__cta{display:inline-flex;}

.nav__toggle{
  display:none;
  width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; border-radius:var(--radius-sm);
}
.nav__toggle svg{stroke:var(--color-oxford-blue); fill:none;}
.nav__toggle:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring);}

/* dark header variant — over a navy hero / band */
.site-header--dark{background:transparent; border-bottom-color:transparent;}
/* solid navy header — same dark treatment on a page without a navy hero
   behind it (e.g. Portfolio), so the brand shell matches the homepage. */
.site-header--solid{background:var(--color-surface-dark); border-bottom-color:var(--color-border-on-dark);}
/* centered, logo-only standalone header (e.g. the 404 page) */
.site-header--center .site-header__inner{justify-content:center; padding-block:24px 24px;}
.site-header--center .site-logo img{height:75px;}
.site-header--dark .site-logo__light{display:none;}
.site-header--dark .site-logo__dark{display:block;}
.site-header--dark .nav__links a{color:var(--color-text-on-dark-body);}
.site-header--dark .nav__links a:hover{color:var(--color-text-on-dark-heading);}
.site-header--dark .nav__links a[aria-current="page"]{color:var(--color-text-on-dark-heading);}
.site-header--dark .nav__toggle svg{stroke:var(--color-seasalt);}

@media (max-width:640px){
  .site-header__inner{padding-block:24px 24px;}   /* a touch more room under the logo */
  .nav__toggle{display:inline-flex;}
}
/* The refined mobile dropdown menu rules live at the END of this file so they
   win on source order over the desktop .nav__links / .sticky-nav__links rules
   (keeps the sticky dropdown closed by default on mobile). */

/* ---------------------------------------------------------------- footer */
/* Utility-forward (DESIGN.md §4.7): logo left + contact right up top, a hairline
   divider, then copyright left / social right. No footer nav links. */
.site-footer{background:var(--color-surface-dark); color:var(--color-text-on-dark-body);}
.site-footer__inner{padding-block:clamp(36px, 5vw, 56px); display:grid; gap:24px;}
.site-footer__top{
  display:flex; align-items:center; justify-content:space-between; gap:20px 32px; flex-wrap:wrap;
}
.site-footer__logolink{display:inline-flex; align-items:center;}
.site-footer__logo{height:52px; width:auto;}
.site-footer__contact{
  font-family:var(--font-ui); font-size:14px; line-height:0.5; text-align:right;
}
.site-footer__contact a{
  color:var(--color-text-on-dark-body); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px;
}
.site-footer__contact a:hover{
  color:var(--color-text-on-dark-heading);
  text-decoration:underline; text-decoration-color:var(--color-brass-on-dark); text-underline-offset:3px;
}
.site-footer__org{margin:0; color:var(--color-text-on-dark-muted);}
.site-footer__org .name{color:var(--color-text-on-dark-body);}
.site-footer__org .bar{margin:0 8px; color:var(--color-text-on-dark-subtle);}
.site-footer__rule{border:0; height:0; border-top:0.5px solid var(--color-border-on-dark); margin:0;}
.site-footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.site-footer__legal{font-family:var(--font-ui); font-size:13px; color:var(--color-text-on-dark-muted);}
.social{display:flex; gap:6px;}
.social a{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); color:var(--color-text-on-dark-body);
}
.social a:hover{color:var(--color-brass-on-dark);}
.social svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6;}
.site-footer a:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring); border-radius:var(--radius-sm);}

/* ---------------------------------------------------------- error (404) */
.error-main{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:clamp(360px, 56vh, 560px);
  padding-block:clamp(56px, 9vw, 96px);
}
.error-main__inner{max-width:36em; margin-inline:auto;}
.error-main h1{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(28px, 4.6vw, 40px); line-height:1.14; color:var(--color-text-heading);
}
.error-main__copy{
  font-family:var(--font-body); font-size:17px; line-height:1.55;
  color:var(--color-text-deck); max-width:34em; margin:14px auto 0;
}
.error-main__actions{margin-top:28px; display:flex; flex-direction:column; align-items:center; gap:14px;}

@media (max-width:600px){
  /* center the top cluster (logo, email, org line); bottom row unchanged */
  .site-footer__top{flex-direction:column; align-items:center; gap:16px; text-align:center;}
  .site-footer__contact{text-align:center;}
}

/* ----------------------------------------------- sticky floating nav (dark) */
/* Appears only after the hero/header scrolls away (toggled in main.js). Mirrors
   the component-sheet .nav--dark direction. Hidden on mobile for this pass. */
.sticky-nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:var(--color-surface-dark);
  border-bottom:0.5px solid var(--color-border-on-dark);
  box-shadow:0 1px 2px rgba(14,24,47,0.22);
  transform:translateY(-100%); visibility:hidden;
  transition:transform var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease);
}
.sticky-nav.is-visible{transform:translateY(0); visibility:visible;}
.sticky-nav__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:75px; padding-block:8px;
}
.sticky-nav__logo{display:inline-flex; align-items:center;}
.sticky-nav__logo img{height:40px; width:auto; display:block;}
.sticky-nav__links{display:flex; align-items:center; gap:24px; list-style:none;}
.sticky-nav__links a{
  font-family:var(--font-ui); font-size:14px; text-decoration:none;
  color:var(--color-text-on-dark-body);
  display:inline-flex; align-items:center; min-height:44px; position:relative;
}
.sticky-nav__links a:hover{color:var(--color-text-on-dark-heading);}
.sticky-nav__links a[aria-current="page"]{color:var(--color-text-on-dark-heading);}
.sticky-nav__links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:7px; height:2px; background:var(--color-brass);
}
.sticky-nav__links a:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring); border-radius:var(--radius-sm);}

/* compact hamburger for the sticky nav (mobile only) */
.sticky-nav__toggle{
  display:none;
  width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; border-radius:var(--radius-sm);
}
.sticky-nav__toggle svg{stroke:var(--color-seasalt); fill:none;}
.sticky-nav__toggle:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring);}

/* On mobile the sticky bar is the persistent nav access: logo left + hamburger right. */
@media (max-width:640px){
  .sticky-nav{display:block;}
  .sticky-nav__toggle{display:inline-flex;}
  .sticky-nav__inner{min-height:64px;}
}
@media (prefers-reduced-motion:reduce){.sticky-nav{transition:none;}}

/* ---------------------------------------------- scroll reveal (enhancement) */
/* Hidden only when JS is present (html.js); without JS everything shows. */
html.js [data-reveal]{
  opacity:0; transform:translateY(10px);
  transition:opacity 500ms var(--ease), transform 500ms var(--ease);
}
html.js [data-reveal].is-revealed{opacity:1; transform:none;}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  html.js [data-reveal]{opacity:1; transform:none;}
}

/* =========================================================================
   Refined mobile dropdown menu — shared by the header nav AND the sticky nav.
   Placed at the very end so it wins on source order over the desktop
   .nav__links / .sticky-nav__links rules. Both menus are CLOSED by default and
   only open when their own toggle adds .is-open (state is independent per menu).
   ========================================================================= */
@media (max-width:640px){
  .nav__links,
  .sticky-nav__links{
    display:none;                                  /* closed by default (both menus) */
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--color-surface-dark-raised);
    border-top:0.5px solid var(--color-border-on-dark);
    border-bottom:0.5px solid var(--color-border-on-dark);
    padding:8px 0;
    box-shadow:0 12px 28px rgba(14,24,47,0.30);
  }
  .nav.is-open .nav__links,
  .sticky-nav.is-open .sticky-nav__links{display:flex;}   /* open only on tap */

  .nav__links li,
  .sticky-nav__links li{position:relative;}

  .nav__links a:not(.btn),
  .sticky-nav__links a:not(.btn){
    font-size:17px; min-height:56px; width:100%;
    display:flex; align-items:center; justify-content:center;     /* fully tappable, centered */
    padding:10px 24px;
    color:var(--color-text-on-dark-body);
  }
  .nav__links a:not(.btn):hover,
  .sticky-nav__links a:not(.btn):hover{color:var(--color-text-on-dark-heading);}

  /* faint ~80%-width dividers between rows (not before the CTA) */
  .nav__links li + li:not(.nav__cta)::before,
  .sticky-nav__links li + li:not(.nav__cta)::before{
    content:""; position:absolute; top:0; left:10%; right:10%; height:1px;
    background:var(--color-border-on-dark);
  }

  /* active row: brass underline only — all rows keep the same background */
  .nav__links a[aria-current="page"]::after,
  .sticky-nav__links a[aria-current="page"]::after{
    content:""; position:absolute; left:50%; right:auto; transform:translateX(-50%);
    width:34px; height:2px; bottom:12px; background:var(--color-brass);
  }

  /* Tenant login: proportionate (not full-width), separated above */
  .nav__cta{
    position:relative; display:flex; justify-content:center;
    padding:16px 24px 8px; margin-top:4px;
  }
  .nav__cta::before{
    content:""; position:absolute; top:0; left:10%; right:10%; height:1px;
    background:var(--color-border-on-dark);
  }
  .nav__cta .btn{width:auto; min-width:170px;}
}