/*
Theme Name: detoks-theme
Version: 1.0.0
Text Domain: detoks-theme
*/

/* ========================================
   BASE RESET – Detoks Theme
   ======================================== */

/* 1. Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Core body defaults */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* 4. Media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 5. Form elements inherit font */
input,
button,
textarea,
select {
  font: inherit;
}

/* 6. Remove built-in button styles */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* 7. Links */
a {
  text-decoration: none;
  color: inherit;
}

/* 8. Lists */
/* ul,
ol {
  list-style: none;
  padding: 0;
} */

/* 9. Headings balanced wrapping */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* 10. Paragraph overflow */
p {
  text-wrap: pretty;
}

/* 11. Focus styles (WCAG compliant) */
:focus-visible {
  outline: 3px solid rgba(101, 151, 141, 0.65);
  outline-offset: 3px;
}

/* 12. Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ========================================
   MAIN CSS
   ======================================== */

:root{
  --c-green-900:#486461;
  --c-green-900-hover: #557774;
  --c-green-700:#65978d;
  --c-green-100:#eaefeb;
  --c-green-100-hover: #dde5e1;
  --c-white:#ffffff;
  --c-text:#2b3f3d;

  --container: 1440px;
  --pad-x: clamp(1rem, 3vw, 2rem);
  --pad-y: clamp(3rem, 6vw, 5rem);

  /* Sticky heights */
  --header-h: 80px;
  --header-h-scrolled: 60px;

  --focus: 3px solid rgba(101, 151, 141, 0.65);
  --ff-primary: "Inter", sans-serif;
}

html{
  font-family: var(--ff-primary);
  font-optical-sizing: auto;
}

html:focus-within {
  scroll-behavior: smooth;
}

body{
  font-family: var(--ff-primary);
  font-weight: 400;
  color: var(--c-text);
}

h1, h2, h3{
  font-weight: 700;
}

.da-list {
    padding: 0;
    list-style: none;
}

.da-list-dot {
    margin-bottom: 20px;
}

.da-btn{
  font-weight: 600;
}

.da-btn--full {
    width: 100%;
}

.da-title {
    font-size: clamp(1.5rem, 1vw + 1.2rem, 2.1rem);
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.da-brand__text{
  font-weight: 800;
}

/* Page */
.da-page {
    min-height: calc(100vh - 202px);
}

/* Sekcja */
.da-section{
  padding-block: var(--pad-y);
}

.mt-1 {
    margin-top: 1rem;
}

/* Alternatywne tło */
.da-section--alt{
  background: var(--c-green-100);
}

/* Kontener */
.da-container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.da-header-container {
    height: 100%;
}

.da-sticky-sentinel{
    height: 80px; /* ✅ próg przełączenia */
    position: absolute;
    top: 0;
}

/* Sticky header */
.da-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--c-white);
  border-bottom: 1px solid rgba(43, 63, 61, 0.10);
  height: var(--header-h);
  transition: height 160ms ease, box-shadow 160ms ease;
}

/* Klasa po scrollu */
.da-header.is-scrolled{
  height: var(--header-h-scrolled);
  box-shadow: 0 10px 25px rgba(43, 63, 61, 0.10);
}

/* Wyrównanie środka + utrzymanie wysokości */
.da-header__inner{
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: var(--pad-x);

  height: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}

/* Brand */
.da-brand{
  display:inline-flex;
  align-items:center;
  gap: 0.75rem;
  text-decoration:none;
  color: var(--c-text);
  min-height: 40px; /* dopasowane do stanu scrolled */
}
.da-brand:focus-visible{
  outline: var(--focus);
  outline-offset: 3px;
  border-radius: 10px;
}
.da-brand__logo{
  height: 55px;
  width:auto;
  transition: height 160ms ease;
}
.da-header.is-scrolled .da-brand__logo{
  height: 40px; /* opcjonalnie: logo też się zmniejsza */
}
.da-brand__text{
  font-weight: 800;
  letter-spacing: 0.03em;
}

/* Button */
.da-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0.5rem 1.05rem;
  min-height: 34px;               /* mieści się w 40px header */
  border-radius: 5px;
  text-decoration:none;
  font-weight: 700;
  border: 2px solid transparent;
  transition: transform 120ms ease, background-color 120ms ease;
  white-space: nowrap;
}
.da-btn--primary{
  background: var(--c-green-900);
  color: var(--c-white);
}
.da-btn--primary:hover{ 
    transform: translateY(-1px); 
    background: var(--c-green-900-hover);
}
.da-btn--primary:active{ 
    transform: translateY(0); 
    background: var(--c-green-900-hover);
}
.da-btn:focus-visible{
  outline: var(--focus);
  outline-offset: 3px;
}

.da-btn--secondary{
  background: var(--c-green-100);
  color: var(--c-text);
}

.da-btn--secondary:hover{ 
    background: var(--c-green-100-hover);
     box-shadow: 0 6px 18px rgba(43,63,61,0.08);
    transform: translateY(-1px); 
}

.da-btn--secondary:active{ 
    transform: translateY(0); 
    background: var(--c-green-100-hover);
     box-shadow: 0 6px 18px rgba(43,63,61,0.08);}


/* Skip link (zostaw jak wcześniej) */
.da-skip-link{
  position:absolute;
  left: 0.75rem;
  top: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--c-white);
  border-radius: 999px;
  border: 2px solid var(--c-green-700);
  color: var(--c-text);
  text-decoration:none;
  transform: translateY(-200%);
  transition: transform 120ms ease;
  z-index: 9999;
}
.da-skip-link:focus{
  transform: translateY(0);
  outline: none;
}

/* Mikro RWD */
@media (max-width: 380px){
  .da-btn{ padding-inline: 0.85rem; }
}


/* ========================================
   HERO
======================================== */

.da-hero{
  position: relative;
  min-height: clamp(520px, 80vh, 720px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--c-white);
}

/* Background image */
.da-hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.da-hero__bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gradient overlay */
.da-hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(
    90deg,
    rgba(72,100,97,0.92) 0%,
    rgba(72,100,97,0.85) 35%,
    rgba(72,100,97,0.65) 50%,
    rgba(72,100,97,0.35) 60%,
    rgba(72,100,97,0.0) 100%
  );
}

/* Content */
.da-hero .da-container{
  position: relative;
  z-index: 2;
}

.da-hero__content{
  max-width: 620px;
}

.da-hero__title{
  font-size: clamp(2rem, 2.5vw + 1.2rem, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.da-hero__lead{
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: rgba(255,255,255,0.92);
}

.da-hero__actions{
  margin-bottom: 1rem;
}

.da-hero__note{
  font-size: 0.9rem;
  opacity: 0.85;
}


@media (max-width: 768px){

  .da-hero{
    min-height: 640px;
  }

  .da-hero__overlay{
    background: linear-gradient(
      180deg,
      rgba(72,100,97,0.95) 0%,
      rgba(72,100,97,0.85) 40%,
      rgba(72,100,97,0.7) 70%,
      rgba(72,100,97,0.4) 100%
    );
  }

  .da-hero__content{
    max-width: 100%;
    text-align: center;
  }

}



/* ========================================
   SERVICES (Zakres usług)
======================================== */

.da-services{
  background: var(--c-green-100);
}

.da-services__title{
  margin-bottom: 1rem;
}

/* grid */
.da-services__grid{
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.4rem);
}

@media (min-width: 840px){
  .da-services__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* card */
.da-card{
  position: relative;
  background: var(--c-white);
  border-radius: 14px;
  padding: 1.4rem 1.4rem 1.5rem;
  box-shadow: 0 10px 26px rgba(43,63,61,0.08);
  border: 1px solid rgba(43,63,61,0.06);
  overflow: hidden;
  min-height: 300px;
}

.da-card-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
}

/* optional background graphic layer */
.da-card__media{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.da-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

/* content */
.da-card__title{
  font-size: 1.3rem;
  font-weight: 650;
  line-height: 1.25;
  margin-bottom: 1.2rem;
  color: var(--c-text);
  position: relative;
  z-index: 1;
}

.da-card__text{
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(43,63,61,0.82);
  position: relative;
  z-index: 1;
}

/* subtle hover (jeśli kafelki będą klikalne w przyszłości) */
@media (hover: hover){
  .da-card{
    transition: transform 140ms ease, box-shadow 140ms ease;
  }
  .da-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(43,63,61,0.10);
  }
}

/* spacing inside section */
.da-services.da-section{
  padding-block: clamp(2.5rem, 5vw, 4rem);
}


/* ========================================
   STEPS (Jak przebiega)
======================================== */

.da-steps{
  background: var(--c-green-100);
}

.da-icon__survey {
        max-width: 170px;
}

.da-steps__title{
  margin-bottom: clamp(1.2rem, 2vw, 2rem);
}

/* list reset (nie globalny) */
.da-steps__list{
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

/* desktop: 4 columns */
@media (min-width: 900px){
  .da-steps__list{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.2rem, 2vw, 2.2rem);
    align-items: start;
  }
}

.da-step{
  position: relative;
  text-align: center;
}

.da-step__icon{
  width: clamp(150px, 12vw, 210px);
  height: clamp(110px, 9vw, 160px);
  margin-inline: auto;
  margin-bottom: 0.75rem;

  display: grid;
  place-items: center;
}

.da-step__icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* text */
.da-step__text{
  font-size: 1.05rem;
  line-height: 1.4;
  color: rgba(43,63,61,0.9);
  max-width: 22ch;
  margin-inline: auto;
}

.da-step__num{
  font-weight: 700;
  color: rgba(43,63,61,0.85);
  margin-right: 0.25rem;
}

/* arrows between steps (CSS only) */
@media (min-width: 900px){
  .da-step:not(:last-child)::after{
    content: "";
    position: absolute;
    top: calc(clamp(110px, 9vw, 160px) / 2 - 6px);
    right: calc(-1 * clamp(1.2rem, 2vw, 2.2rem) / 2);

    width: clamp(36px, 3.5vw, 56px);
    height: 12px;

    background: rgba(101,151,141,0.35);
  }

  .da-step:not(:last-child)::before{
            content: "";
        position: absolute;
        top: calc(clamp(110px, 9vw, 160px) / 2 - 18px);
        right: calc(-1 * clamp(1.2rem, 2vw, 2.2rem) / 2 - 12px);
        width: 0;
        height: 0;
        border-top: 18px solid transparent;
        border-bottom: 18px solid transparent;
        border-left: 13px solid rgba(101, 151, 141, 0.35);
  }
}

/* mobile: stack + optional arrow hidden (czytelniej) */
@media (max-width: 899px){
  .da-step{
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    text-align: left;
    gap: 1rem;
  }

  .da-step__icon{
    width: 110px;
    height: 84px;
    margin: 0;
  }

  .da-step__text{
    max-width: none;
    margin: 0;
  }
}


/* ========================================
   ABOUT (O nas)
======================================== */

.da-about{

}

.da-about__grid{
  display: grid;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.5rem);
}

@media (min-width: 900px){
  .da-about__grid{
    grid-template-columns: 1fr 1fr;
  }
}

.da-about__media{
  margin: 0;
  /* background: rgba(255,255,255,0.65); */
  /* border-radius: 18px; */
  padding: clamp(0.8rem, 1.5vw, 1.2rem);
  /* box-shadow: 0 10px 26px rgba(43,63,61,0.06); */
  /* border: 1px solid rgba(43,63,61,0.05); */
}

.da-about__media img{
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.da-about__title{
  
  margin-bottom: 0.75rem;
}

.da-about__text{
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(43,63,61,0.85);
  max-width: 56ch;
}

.da-about__text strong{
  font-weight: 700;
  color: rgba(43,63,61,0.95);
}


/* ========================================
   PRICING (Koszt wizyty)
======================================== */

.da-pricing{
  position: relative;
  background: var(--c-green-100);
  overflow: hidden;
}

.da-pricing::after{
  content: "";
    position: absolute;
    right: -20%;
    bottom: -48%;
    width: 73%;
    height: 87%;
    background: var(--c-green-700);
    opacity: 0.12;
    border-radius: 60% 40% 50% 70% / 60% 60% 40% 50%;
    pointer-events: none;
    z-index: 0;
}

.da-pricing .da-container{
  position: relative;
  /* z-index: 1; */
}

.da-pricing__title{
  margin-bottom: 1rem;
}

/* Panel */
.da-pricing__panel{
  background: var(--c-white);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(43,63,61,0.08);
  border: 1px solid rgba(43,63,61,0.06);
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
}

/* Grid */
.da-pricing__grid{
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}

.da-pricing__price-value{
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--c-text);
}

/* Price block */
.da-pricing__price{
  margin: 0 0 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1.6rem;
}

.da-pricing__col--price {
  grid-column: span 2;
}

.da-pricing__col--button {
  margin-top: 20px;
}

@media (min-width: 900px){
  .da-pricing__grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 899px){
  .da-pricing__panel{
    padding-bottom: 40px;
  }

  .da-pricing__col--price {
  grid-column: span 1;
}

  .da-pricing__price,
  .da-pricing__price-value {
    font-size: 25px;
  }
}

/* Columns */
.da-pricing__col{
  min-width: 0;
}

.da-pricing__heading{
  font-size: 1.05rem;
  font-weight: initial;
  color: var(--c-text);
  margin-bottom: 0.75rem;
}



.da-pricing__price-label{
  font-weight: 600;
  color: rgba(43,63,61,0.85);
}



/* Lists with dash bullets like on screenshot */
.da-pricing__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
  color: rgba(43,63,61,0.82);
  font-size: 0.98rem;
}

.da-pricing__list li{
  position: relative;
  padding-left: 1rem;
}

.da-pricing__list li::before{
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(43,63,61,0.55);
}

/* Actions */
.da-pricing__actions{
  margin-top: 1.1rem;
}

/* Make button not too wide */
.da-pricing__actions .da-btn{
  min-width: 220px;
}


/* ========================================
   FAQ (Accordion)
======================================== */

.da-faq{
  background: var(--c-white);
}

.da-faq__title{
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.da-faq__list{
  display: grid;
  gap: 0.75rem;
}

/* Accordion shell */
.da-accordion{
  background: var(--c-green-100);
  border: 1px solid rgba(43,63,61,0.08);
  border-radius: 14px;
  overflow: clip;
}

/* Summary (header) */
.da-accordion__summary{
  list-style: none; /* usuwa marker w części przeglądarek */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  padding: 1rem 1.1rem;
  cursor: pointer;
  user-select: none;
}

.da-accordion__summary::-webkit-details-marker{
  display: none;
}

.da-accordion__question{
  font-weight: 650;
  color: var(--c-text);
  line-height: 1.25;
}

/* Focus (WCAG) */
.da-accordion__summary:focus-visible{
  outline: var(--focus);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Icon (chevron) */
.da-accordion__icon{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  position: relative;
}

/* Icon (chevron) – bez X */
.da-accordion__icon{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  position: relative;
}

.da-accordion__icon::before{
  content:"";
  position:absolute;
  inset: 0;
  margin: auto;

  width: 10px;
  height: 10px;

  /* chevron w dół */
  border-right: 2px solid rgba(43,63,61,0.75);
  border-bottom: 2px solid rgba(43,63,61,0.75);

  transform: rotate(45deg); /* wygląda jak ˅ */
  transition: transform 180ms ease;
}

/* open -> chevron w górę */
.da-accordion[open] .da-accordion__icon::before{
  transform: rotate(-135deg); /* wygląda jak ˄ */
}

@media (prefers-reduced-motion: reduce){
  .da-accordion__icon::before{ transition: none; }
}


/* Content */
.da-accordion__content{
  padding: 0 1.1rem 1rem;
  color: rgba(43,63,61,0.88);
  line-height: 1.65;
}

/* Optional subtle divider when open */
.da-accordion[open] .da-accordion__content{
  border-top: 1px solid rgba(43,63,61,0.08);
  padding-top: 0.9rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .da-accordion__icon::before,
  .da-accordion__icon::after{
    transition: none;
  }
}


/* ========================================
   CTA (Kontakt / Ankieta)
======================================== */

.da-cta{
  background: var(--c-white);
}

/* grid */
.da-cta__grid{
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  align-items: stretch;
}

@media (min-width: 900px){
  .da-cta__grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* cards – zielone */
.da-cta-card{
  background: var(--c-green-100);
  border: 1px solid rgba(43,63,61,0.08);
  border-radius: 16px;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  box-shadow: 0 10px 24px rgba(43,63,61,0.05);
}

.da-cta-card--phone,
.da-cta-card--form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* PHONE CARD */
.da-cta-card__kicker{
  font-weight: 650;
  color: rgba(43,63,61,0.85);
  margin-bottom: 0.6rem;
}

.da-cta-card__phone{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.da-cta-card__phone-icon{
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:  var(--c-white);
  color: var(--c-white);
  font-size: 0.9rem;
}

.da-cta-card__phone-icon img{
  padding: 10px;
}

.da-cta-card__phone-link{
  font-size: 3rem;
  font-weight: 800;
  color: var(--c-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 15px;
}

.da-cta-card__phone-link:focus-visible{
  outline: var(--focus);
  outline-offset: 3px;
  border-radius: 10px;
}

.da-cta-card__note{
  color: rgba(43,63,61,0.75);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: 60ch;
}

/* FORM CARD */
.da-cta-card__title{
  font-size: 1.2rem;
  font-weight: 750;
  color: var(--c-text);
  margin-bottom: 0.5rem;
}

.da-cta-card__text{
  color: rgba(43,63,61,0.8);
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: 52ch;
}

/* Mobile buttons full width */
@media (max-width: 520px){
  .da-cta-card .da-btn{
    width: 100%;
    justify-content: center;
  }
}


/* ========================================
   DISCLAIMER
======================================== */

.da-disclaimer{
  background: var(--c-white);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.da-disclaimer__box{
  display: flex;
  align-items: flex-start;
  gap: 1rem;

  background: var(--c-green-100);
  border: 1px solid rgba(43,63,61,0.08);
  border-radius: 14px;
  padding: clamp(1rem, 2vw, 1.3rem);
}

/* icon */
.da-disclaimer__icon{
      flex: 0 0 50px;
    width: 50px;
    height: 50px;
}

.da-disclaimer__icon img{
  width: 100%;
  height: auto;
  display: block;
}

/* content */
.da-disclaimer__content{
  flex: 1;
}

.da-disclaimer__text{
  color: rgba(43,63,61,0.85);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 90ch;
}

.da-disclaimer__text + .da-disclaimer__text{
  margin-top: 0.5rem;
}

/* mobile */
@media (max-width: 600px){
  .da-disclaimer__box{
    align-items: flex-start;
  }

  .da-disclaimer__icon{
    flex: 0 0 26px;
    width: 26px;
  }
}


/* ========================================
   FOOTER
======================================== */

.da-footer{
  background: var(--c-text);
  color: rgba(255,255,255,0.85);
  padding-block: clamp(1.5rem, 3vw, 2rem);
  font-size: 0.95rem;
}

.da-footer__nav{
  margin-bottom: 0.75rem;
}

.da-footer__list{
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.da-footer__list a{
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: opacity 150ms ease;
}

.da-footer__list a:hover{
  opacity: 0.7;
}

.da-footer__list a:focus-visible{
  outline: 3px solid rgba(255,255,255,0.6);
  outline-offset: 3px;
  border-radius: 6px;
}

.da-footer__copy{
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.65;
}

/* mobile */
@media (max-width: 600px){
  .da-footer__list{
    flex-direction: column;
    gap: 0.6rem;
  }
}

:root{
  --da-green:#486461;
  --da-white:#ffffff;
  --da-soft:#eaefeb;
}

.da-modal[hidden]{display:none;}

.da-modal{
  position:fixed;
  inset:0;
  z-index:9999;
}

.da-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
}

.da-modal__panel{
  position:relative;
  max-width:560px;
  margin:10vh auto;
  background:var(--da-white);
  border-radius:16px;
  padding:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.da-modal__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.da-modal__grid{
  display:grid;
  gap:12px;
  margin-top:16px;
}

.da-btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:600;
  text-align:center;
}

.da-btn--primary{
  background:var(--da-green);
  color:#fff;
}

.da-btn--secondary{
  background:#fff;
  color:var(--da-green);
  border:2px solid var(--da-green);
}

.da-iconbtn{
  background:var(--da-soft);
  border:0;
  width:40px;
  height:40px;
  border-radius:12px;
  cursor:pointer;
}

.da-linkbtn{
  background:transparent;
  border:0;
  margin-top:16px;
  cursor:pointer;
}


.da-cities__grid{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.da-cities__item{

  gap: 8px;
}

.da-cities__link{
  font-size: 14px;
  text-decoration: underline;
  color: var(--da-green, #486461);
}

.da-btn__city {
  min-width: 150px;
}

.da-about, .da-cta, .da-cities {
  padding-bottom: 0;
  margin-bottom: var(--pad-y);
}

.da-cities, .da-faq, .da-cta {
  margin-top: var(--pad-y);
  padding-top: 0;
}

.da-hide-header-cta .da-nav .da-btn {
  display: none !important;
}

.da-btn__city--mock {
  user-select: none;
  cursor: default;
}