/* ============================================================
   DROOM. duurzamer feesten — design system v3 (juli 2026)
   Editorial minimalisme in het palet van Jolien:
   zacht lila/parelwit, diepe aubergine, Montserrat + Cormorant
   ============================================================ */
:root{
  /* ---- palet Jolien ---- */
  --cream:#FFFBFA;        /* achtergrond website (Jolien) */
  --paper:#F6F2F5;        /* kaarten / afwisselende secties */
  --ink:#322D46;          /* lopende tekst — diepe aubergine, AA-proof (11.6:1) */
  --forest:#4A4266;       /* primair: knoppen, links (5.9:1 op cream) */
  --sage:#C9C2D4;         /* licht lila voor donkere vlakken */
  --terra:#88839E;        /* accentkleur Jolien — decoratief + grote tekst */
  --terra-dark:#6B6684;   /* accent voor kleine links (4.6:1) */
  --lilac:#ABA4B5;        /* zacht paars Jolien — lijnen & vlakken */
  --footer:#2A2539;       /* footer: donkere aubergine i.p.v. zwart */
  --line:rgba(50,45,70,.16);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Montserrat",system-ui,sans-serif;
  --radius:20px;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);font-size:1rem;line-height:1.75;font-weight:400;
  color:var(--ink);background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
/* build.py wikkelt elke foto in <picture> voor WebP. De picture is een gewoon
   blok en dus zélf het layoutelement (grid-item); de img vult hem volledig.
   Geen display:contents — dat liet ook het <source>-element meedoen in grids. */
picture{display:block}
source{display:none}
picture > img{width:100%}
a{color:var(--forest)}
a:hover{color:var(--terra-dark)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.sr-only{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:200}
.skip-link:focus{left:0;color:#fff}

/* ---------- typografie ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:0;text-wrap:balance}
h1{font-size:clamp(3rem,7.4vw,5.4rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.3rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.7rem);font-weight:600}
.eyebrow{
  display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--terra-dark);margin-bottom:1.1rem;
}
.eyebrow::before{content:"";display:inline-block;width:2.2em;height:1px;background:var(--lilac);vertical-align:middle;margin-right:.8em}
em,.accent-i{font-style:italic;font-family:var(--serif)}
strong,b{font-weight:600}   /* Montserrat 700 wordt niet geladen; 600 is het echte vet */
.lead{font-size:clamp(1.08rem,1.7vw,1.25rem);line-height:1.65;color:var(--ink);max-width:46ch;font-weight:300}

/* ---------- knoppen ---------- */
.btn{
  display:inline-block;padding:.95rem 1.9rem;border-radius:999px;
  font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease;
  border:1.5px solid transparent;font-family:var(--sans);
}
.btn:active{transform:scale(.97)}
.btn-solid{background:var(--forest);color:var(--cream)}
.btn-solid:hover{background:var(--ink);color:var(--cream)}
.btn-terra{background:var(--terra-dark);color:#fff}   /* accentknop — 5.3:1, AA-proof */
.btn-terra:hover{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.linklike{background:none;border:none;font:inherit;color:var(--forest);text-decoration:underline;cursor:pointer}
.arrow-link{font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--lilac);padding-bottom:2px}
.arrow-link::after{content:" \2192";color:var(--terra-dark)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--cream) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.65rem}
/* Het logo bevat zelf al het woordmerk "DROOM." — daarom geen tekst ernaast,
   maar één groot, rustig beeldmerk. */
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand img{width:112px;height:112px;object-fit:contain;transition:opacity .2s}
.brand:hover img{opacity:.78}
@media (max-width:900px){.brand img{width:96px;height:96px}}
@media (max-width:680px){.brand img{width:88px;height:88px}}
.site-nav > ul{list-style:none;display:flex;align-items:center;gap:clamp(.5rem,1.6vw,1.6rem)}
.site-nav a{
  text-decoration:none;color:var(--ink);font-weight:500;font-size:.97rem;
  padding:.4rem .15rem;border-bottom:2px solid transparent;
}
.site-nav a:hover,.site-nav a.is-active{border-bottom-color:var(--terra);color:var(--ink)}
.nav-cta a{background:var(--forest);color:var(--cream)!important;padding:.6rem 1.3rem;border-radius:999px;border-bottom:none!important}
.nav-cta a:hover{background:var(--ink)}
.has-sub{position:relative}
.sub-toggle{background:none;border:none;cursor:pointer;color:var(--ink);font-size:.8rem;padding:.2rem}
.site-nav .subnav{
  position:absolute;top:100%;left:-1rem;min-width:200px;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(31,42,34,.12);
  padding:.5rem;margin:0;list-style:none;flex-direction:column;align-items:stretch;gap:0;display:none;
}
.site-nav .has-sub:hover .subnav,.site-nav .has-sub:focus-within .subnav,.site-nav .has-sub.open .subnav{display:flex}
.subnav a{display:block;padding:.55rem .9rem;border-radius:9px;border-bottom:none!important}
.subnav a:hover{background:var(--cream)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--ink);margin:6px 0;transition:.25s}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3rem,7vw,6rem) clamp(2.5rem,5vw,4.5rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1 .line-i{display:block;font-style:italic;color:var(--terra-dark)}
.hero .lead{margin-top:1.4rem}
.hero-actions{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap}
.hero-media{position:relative}
.hero-media .arch{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:46% 46% 18px 18px;   /* portaalboog — enkel op hero-beelden */
}
/* Liggende hero: voor pagina's waar enkel een liggende foto bestaat.
   Rechthoekig met zachte hoeken, zodat de vergelijking met de boog zichtbaar is. */
.hero-grid.wide{grid-template-columns:1fr;gap:clamp(1.8rem,4vw,3rem)}
.hero-grid.wide .hero-media .arch{
  aspect-ratio:16/7;border-radius:var(--radius);
}
@media (max-width:680px){.hero-grid.wide .hero-media .arch{aspect-ratio:4/3}}
.hero-media .badge-card{
  position:absolute;left:-1.6rem;bottom:1.8rem;background:var(--paper);
  border-radius:16px;padding:.9rem 1.2rem;box-shadow:0 18px 40px rgba(31,42,34,.16);
  font-size:.85rem;line-height:1.45;max-width:240px;
}
.badge-card strong{font-family:var(--serif)}
.hero-note{margin-top:1.2rem;font-size:.9rem;color:var(--forest)}

/* ---------- zorgenlijst (wat DROOM. voor jullie regelt) ---------- */
.care-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.1rem 2.5rem;max-width:980px}
.care-list li{padding:.85rem 0 .85rem 2rem;border-bottom:1px solid var(--line);position:relative;font-size:.97rem}
.care-list li::before{content:"";position:absolute;left:0;top:1.5rem;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--lilac)}
@media (max-width:760px){.care-list{grid-template-columns:1fr}}
/* genieten-sectie op home: foto naast de lijst, bel-citaat als afsluiter */
.care-split .care-list{grid-template-columns:1fr;max-width:none}
.care-split .care-list li{font-size:.95rem}
.care-quote{margin-top:1.7rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.4}
.care-quote span{display:block;font-family:var(--sans);font-style:normal;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--terra-dark);margin-top:.55rem}

/* ---------- secties ---------- */
.section{padding-block:clamp(3.2rem,7vw,6.5rem)}
.section-tight{padding-block:clamp(2.2rem,5vw,4rem)}
.section-paper{background:var(--paper)}
.section-forest{background:var(--forest);color:var(--cream)}
.section-forest h2,.section-forest h3{color:var(--cream)}
.section-forest a{color:var(--cream)}
.section-forest .eyebrow{color:var(--sage)}
.section-forest .eyebrow::before{background:var(--sage)}
.section-head{max-width:720px;margin-bottom:clamp(2rem,4vw,3.4rem)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split-img{border-radius:var(--radius);aspect-ratio:4/5;object-fit:cover;width:100%}
.split-img.landscape{aspect-ratio:3/2}
.split-img.square{aspect-ratio:1/1}
/* Klikbare foto bij een interne link: de <a> is puur visueel (tabindex=-1,
   aria-hidden), de tekstlink ernaast blijft de toegankelijke route. */
.media-link{display:block}
.media-link img{transition:opacity .25s ease}
.media-link:hover img{opacity:.85}
.img-duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.img-duo img{border-radius:var(--radius);object-fit:cover;width:100%;aspect-ratio:3/4}
.img-duo > img:last-child,
.img-duo > a:last-child img,
.img-duo > picture:last-child img{transform:translateY(2rem)}

/* ---------- kaarten ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.card-grid.two{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem 1.8rem;display:flex;flex-direction:column;gap:.8rem;
  transition:transform .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(31,42,34,.10)}
.card .num{font-family:var(--serif);font-style:italic;font-size:2.2rem;color:var(--terra);line-height:1}
.card h3 a{text-decoration:none;color:var(--ink)}
.card .arrow-link{margin-top:auto;align-self:flex-start}
/* Volledig klikbare fotokaart: de titel-link wordt over de hele kaart gespannen,
   zodat ook de foto en de tekst klikbaar zijn. De losse arrow-link eronder blijft
   bruikbaar dankzij een hogere z-index. */
.photo-card{padding:0;overflow:hidden;position:relative}
.photo-card img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .4s ease}
.photo-card:hover img{transform:scale(1.03)}
.photo-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.photo-card .arrow-link{position:relative;z-index:2}
.photo-card:focus-within{outline:2px solid var(--forest);outline-offset:3px}
.photo-card .photo-body{padding:1.6rem 1.8rem 2rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.3rem}
.tag{font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:.25rem .75rem;color:var(--forest)}

/* ---------- prijzen ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
.price-card{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);padding:2.2rem 1.9rem;display:flex;flex-direction:column;gap:1rem}
.price-card.featured{border-color:var(--forest);background:var(--forest);color:var(--cream)}
.price-card.featured h3{color:var(--cream)}
.price-card.featured .price{color:var(--sage)}
.price-card .flag{position:absolute;top:-0.9rem;left:1.6rem;background:var(--terra);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .85rem;border-radius:999px}
.price{font-family:var(--serif);font-size:2.4rem;font-weight:600;color:var(--forest);line-height:1}
.price small{font-size:.95rem;font-family:var(--sans);font-weight:500}
.price-card ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;font-size:.95rem}
.price-card ul li{padding-left:1.5em;position:relative}
.price-card ul li::before{content:"\2713";position:absolute;left:0;color:var(--terra);font-weight:700}
.price-card.featured ul li::before{color:var(--sage)}
.price-card .btn{margin-top:auto;text-align:center}
.btw-note{margin-top:1.2rem;font-size:.88rem;color:var(--forest);font-style:italic}

/* ---------- stappen ---------- */
.steps{counter-reset:step;display:flex;flex-direction:column;max-width:760px}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;padding-block:1.7rem;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--serif);font-style:italic;font-size:2rem;color:var(--terra);line-height:1.1;
}
.step h3{margin-bottom:.3rem}

/* ---------- quotes / testimonials ---------- */
.bigquote{max-width:880px;margin-inline:auto;text-align:center}
.bigquote blockquote{font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,2.3rem);font-style:italic;line-height:1.35}
.bigquote cite{display:block;margin-top:1.4rem;font-family:var(--sans);font-style:normal;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-dark)}
.testimonial{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;display:flex;flex-direction:column;gap:1rem}
.testimonial blockquote{font-family:var(--serif);font-style:italic;font-size:1.18rem;line-height:1.5}
.testimonial cite{font-family:var(--sans);font-style:normal;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-dark)}

/* ---------- realisaties ---------- */
.realisatie{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center;padding-block:clamp(2rem,4vw,3.2rem);border-bottom:1px solid var(--line)}
.realisatie:last-of-type{border-bottom:none}
.realisatie:nth-child(even) .real-media{order:2}
.real-media{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.real-media img{border-radius:14px;object-fit:cover;width:100%;aspect-ratio:3/4}
/* Eén foto in een realisatie: vol-breed in landscape via de .solo-klasse */
.real-media.solo{grid-template-columns:1fr}
.real-media.solo img{aspect-ratio:4/3}

/* ---------- FAQ accordion ---------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-block:1.25rem;font-family:var(--serif);font-weight:600;font-size:1.18rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.6rem;color:var(--terra);transition:transform .2s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{padding-bottom:1.4rem;max-width:64ch}

/* ---------- artikels ---------- */
.article-hero{max-width:820px}
.article-meta{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);margin-bottom:1rem}
.article-body{max-width:720px;display:flex;flex-direction:column;gap:1.25rem}
.article-body h2{font-size:clamp(1.5rem,2.6vw,1.9rem);margin-top:1.4rem}
.article-body h3{margin-top:.6rem}
.article-body ul,.article-body ol{padding-left:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.article-body table{border-collapse:collapse;width:100%;font-size:.95rem}
.article-body th,.article-body td{border:1px solid var(--line);padding:.65rem .9rem;text-align:left}
.article-body th{background:var(--paper);font-family:var(--sans)}
.infobox{background:var(--paper);border-left:4px solid var(--terra);border-radius:0 14px 14px 0;padding:1.3rem 1.5rem;font-size:.98rem}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.form{display:flex;flex-direction:column;gap:1.1rem}
.form label{font-weight:600;font-size:.92rem;display:block;margin-bottom:.35rem}
.form input,.form select,.form textarea{
  width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:12px;
  font:inherit;background:var(--paper);color:var(--ink);
}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--forest);outline-offset:1px;border-color:var(--forest)}
.form .hp{position:absolute;left:-9999px}
.contact-aside{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;display:flex;flex-direction:column;gap:1rem}
.contact-aside img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 22%;border-radius:14px}

/* ---------- CTA band ---------- */
.cta-band{background:var(--forest);color:var(--cream);border-radius:calc(var(--radius)*1.4);padding:clamp(2.4rem,5vw,4rem);text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.3rem}
.cta-band h2{color:var(--cream)}
.cta-band p{max-width:54ch;color:color-mix(in srgb,var(--cream) 88%,transparent)}
.cta-band .btn-solid{background:var(--cream);color:var(--ink)}
.cta-band .btn-solid:hover{background:#fff;color:var(--ink)}
.cta-band .btn-terra{background:var(--cream);color:var(--ink)}
.cta-band .btn-terra:hover{background:#fff;color:var(--ink)}

/* ---------- footer ---------- */
.site-footer{background:var(--footer);color:#E6E1EE;margin-top:clamp(3rem,6vw,5rem)}
.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1.2fr .9fr;gap:2.4rem;padding-block:clamp(2.6rem,5vw,4rem)}
.footer-title{font-family:var(--serif);font-size:1.05rem;color:#fff;margin-bottom:.6rem;margin-top:1rem}
.footer-title:first-child{margin-top:0}
.site-footer a{color:#E6E1EE}
.site-footer a:hover{color:#fff}
.footer-brand img{width:104px;height:104px;object-fit:contain;background:#FFFBFA;border-radius:14px;padding:10px}
.footer-tagline{font-family:var(--serif);font-style:italic;font-size:1.2rem;margin-block:1rem;color:#fff}
.how-label img{background:#fff;border-radius:10px;padding:8px}
.footer-nav{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.footer-credits{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem .55rem;font-size:.82rem;opacity:.85}
.footer-credits li:not(:last-child)::after{content:"·";margin-left:.55rem;opacity:.5}
.footer-credits a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)}
.footer-credits a:hover{border-bottom-color:#fff}
.footer-small{font-size:.85rem;opacity:.8}
.footer-legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);padding-block:1.2rem;font-size:.88rem}
.footer-legal .linklike{color:#E6E1EE}

/* ---------- cookie banner ---------- */
.cookie-banner{
  position:fixed;inset-inline:1rem;bottom:1rem;z-index:300;display:flex;justify-content:center;
}
.cookie-banner[hidden]{display:none}
.cookie-inner{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(31,42,34,.25);max-width:560px;padding:1.6rem 1.8rem;
}
.cookie-inner h2{font-size:1.25rem;margin-bottom:.5rem}
.cookie-inner p{font-size:.92rem}
.cookie-actions{display:flex;gap:.8rem;margin-top:1.1rem;flex-wrap:wrap}

/* ---------- reveal animaties ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- breadcrumb ---------- */
.crumbs{font-size:.85rem;padding-top:1.1rem;color:var(--terra-dark)}
/* Staat er een kruimelpad boven de hero, dan neemt dat de rol van "waar ben ik"
   over. De hero mag dan strakker aansluiten, zodat de eerste CTA boven de vouw
   blijft. */
.crumbs + .hero{padding-top:clamp(1.2rem,2.5vw,2.2rem)}
.crumbs a{text-decoration:none}
.crumbs span[aria-current]{color:var(--ink);font-weight:500}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr}
  .card-grid,.price-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .realisatie{grid-template-columns:1fr}
  .realisatie:nth-child(even) .real-media{order:0}
  .hero-media .badge-card{left:1rem}
}
@media (max-width:680px){
  .card-grid,.price-grid,.card-grid.two,.footer-grid{grid-template-columns:1fr}
  /* realisaties: foto's onder elkaar op de volledige breedte i.p.v. twee smalle naast elkaar */
  .real-media{grid-template-columns:1fr}
  .real-media img{aspect-ratio:1/1}
  .img-duo img:last-child{transform:none}
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line);padding:1rem 1.5rem 1.6rem;box-shadow:0 24px 40px rgba(31,42,34,.12)}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:.1rem}
  .site-nav a{display:block;padding:.7rem .2rem;font-size:1.08rem}
  .site-nav .subnav{position:static;display:flex;box-shadow:none;border:none;background:transparent;padding-left:1rem}
  .nav-cta a{text-align:center;margin-top:.6rem}
}