/* =============================
   GLOBAL THEME & BASE STYLES
============================= */
:root {
  --sand: #FAF7F2;
  --clay: #E8DED2;
  --sage: #6F8F7A;
  --forest: #163A3A;
  --slate: #2F3E46;
  --white: #fff;
  --radius: 14px;
  --shadow: 0 6px 20px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; scroll-behavior: smooth; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--forest);
  background: var(--sand);
  line-height: 1.6;
}

/* =============================
   LAYOUT
============================= */
.container {
  width: min(1100px, 92%);
  margin: 0 auto;
}
.container.narrow {
  width: min(820px, 92%);
}

.section {
  padding: 72px 0;
}
.tint {
  background: var(--clay);
}

/* =============================
   HEADER / NAVIGATION
============================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(120%) blur(6px);
  background: rgba(250,247,242,0.9);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.brand {
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--forest);
}

.menu {
  display: flex;
  align-items: center;
  gap: 20px;
}

.menu a {
  color: var(--slate);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
.menu a:hover { color: var(--forest); }

.menu .cta {
  padding: 10px 14px;
  background: var(--sage);
  color: var(--white);
  border-radius: 999px;
  box-shadow: var(--shadow);
  white-space: nowrap;
}

/* Mobile menu toggle */
.menu-toggle { display: none; }

/* --- Mobile Nav --- */
@media (max-width: 900px) {
  .nav { position: relative; }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    background: var(--white);
    font-size: 20px;
    color: var(--forest);
  }
  .menu {
    position: absolute;
    top: 80px; right: 0;
    background: rgba(250,247,242,0.98);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--shadow);
    border-radius: 12px;
    padding: 12px;
    flex-direction: column;
    gap: 12px;
    min-width: 240px;
    display: none;
  }
  .menu.open { display: flex; }
}

/* =============================
   HERO
============================= */
.hero {
  padding: 84px 0 40px;
}
@media (max-width: 900px) {
   .hero {
  padding: 80px 0 20px;

}
  .hero-inner {
  display: grid;
   grid-template-columns: 10fr 1fr !important;
  align-items: center;
  gap: 48px;
} 
}
.hero-inner {
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: center;
  gap: 48px;
}
.hero-copy h1 {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}
.lead {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--slate);
  margin-bottom: 18px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn-ghost {
  display: inline-block;
  padding: 12px 18px;
  background: transparent;
  color: var(--forest);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.btn-ghost:hover {
  background: var(--clay);
}
.meta {
  color: var(--slate);
  opacity: 0.9;
  margin-top: 10px;
  font-size: 14px;
}

/* =============================
   CAPABILITIES / SERVICES
============================= */
h2 {
  font-size: clamp(24px, 3vw, 34px);
  margin-bottom: 18px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card h3 {
  font-size: 20px;
  margin-bottom: 8px;
}
.card p { color: var(--forest); }
.examples {
  margin-top: 8px;
  color: var(--slate);
}

/* =============================
   ABOUT SECTION
============================= */
/* ==== ABOUT: stabil wrap + bund-flugt ==== */
.about-text {
  position: relative;
  line-height: 1.6;             /* fast line-height giver konsistent baseline */
  --size: 175px;                 /* base-størrelse på billedet (desktop) */
  --tune: 0px;                   /* finjustér bundflugt (kan sættes til 0–8px) */
}
.about-text::after { content:""; display:block; clear:both; } /* clearfix */

/* Flydende, rund figur der wrap’er */
.about-float {
  float: right;
  width: var(--size);
  height: var(--size);
  margin: 2px 0 10px 24px;      /* luft venstre/under */
  shape-outside: circle(50%);
  clip-path: circle(50%);
  display: flex;                 /* gør det muligt at bundjustere billedet */
  align-items: flex-start;         /* bund af billedet = bund af figuren */
  transform: translateY(var(--tune)); /* optisk bund-justering */
}



/* Ingen ekstra luft under sidste linje */
.about-text p:last-child { margin-bottom: 0; }

/* Tablet/mindre skærme – mindre billede og separat finjustering */
@media (max-width: 900px) {
  .about-text { --size: 175px; --tune: 4px; }
  .about-float { margin: 2px 0 8px 24px; }
}

/* Mobil – wrap bevares, men endnu mindre størrelse og tune */
@media (max-width: 640px) {
  .about-text { --size: 175px; --tune: 3px; }
  .about-float { margin: 0 0 8px 24px; }
}

/* Meget smalle skærme: hvis wrap bliver klemt, kan du alternativt stacke billedet
   (fjern kommentar for at slå til)
@media (max-width: 380px) {
  .about-float {
    float: none;
    margin: 12px 0;
    shape-outside: none;
    clip-path: none;
    transform: none;
  }
  .about-photo { width: 120px; height: 120px; margin-inline: auto; }
}
*/


/* =============================
   REFERENCES / TESTIMONIALS
============================= */
.quote {
  border-left: 4px solid var(--sage);
  padding-left: 16px;
  margin: 20px 0;
}
.quote blockquote { color: var(--forest); margin: 0; }
.quote figcaption { color: var(--slate); margin-top: 8px; font-size: 14px; }
.dots {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: left;
}
.dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid var(--slate);
  background: transparent;
  cursor: pointer;
}
.dot.active {
  background: var(--sage);
  border-color: var(--sage);
}

/* =============================
   CONTACT
============================= */
/* =========================
   CONTACT — clean + responsive
   (paste this and remove the old contact rules)
========================= */

/* Shared elements */
.contact-box {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.contact-form {
  display: grid;
  gap: 12px;
  background: var(--white);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

.contact-form label {
  display: grid;
  gap: 6px;
  font-weight: 500;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  font: inherit;
}

.btn-primary {
  display: inline-block;
  padding: 12px 18px;
  background: var(--sage);
  color: var(--white);
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: var(--shadow);
  border: none;
  cursor: pointer;
}
.btn-primary:hover { filter: brightness(.95); }

/* CONTACT header layout (desktop/tablet) */
#contact .contact-top{
  --photo-size: clamp(140px, 20vw, 170px);
  display:grid;
  grid-template-columns: 2fr var(--photo-size);  /* text | photo */
  grid-template-rows: auto auto;                 /* row1: headline+lead, row2: CTA */
  grid-template-areas:
    "text  photo"
    "cta   photo";                               /* CTA under text; photo stays right */
  align-items:center;
  column-gap:20px;
  row-gap:16px;
  margin-bottom:20px;
}

#contact .contact-text     { grid-area:text; }
#contact .contact-portrait { grid-area:photo; justify-self:end; }
#contact .contact-cta      { grid-area:cta;   align-self:start; }

#contact .contact-photo{
  width:var(--photo-size);
  height:var(--photo-size);
  border-radius:50%;
  object-fit:cover;
  display:block;
  box-shadow:var(--shadow);
}

/* Make the email button full-width in the left column (all sizes) */
#contact .contact-cta .btn-ghost{
      text-align: left;
    padding: 14px 16px;
}

/* MOBILE: text | photo (top row), CTA full-width below */
@media (max-width: 520px){
  #contact .contact-top{
    /* two columns for text+photo, then CTA spans both */
    --photo-size: clamp(150px, 36vw, 140px);
    display: grid;
    grid-template-columns: 1fr var(--photo-size); /* text | photo */
    grid-template-rows: auto auto;                /* row1: text+photo, row2: cta */
    grid-template-areas:
      "text  photo"
      "cta   cta";
    align-items: start;
    column-gap: 24px;
    row-gap: 24px;
  }
 #contact .contact-text h2 .mobile-break{
    display:block;      /* forces line break before the span */
  }
  #contact .contact-text     { grid-area: text; }
  #contact .contact-portrait { grid-area: photo; justify-self: end; }
  #contact .contact-cta      { grid-area: cta; }

  /* keep the photo small on mobile */
  #contact .contact-photo{
    width: var(--photo-size);
    height: var(--photo-size);
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: var(--shadow);
  }

  /* button stays full width of the left column’s width (now the whole row) */
  #contact .contact-cta .btn-ghost{
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
  }

  /* optional: tighten the lead only, not the button */
  #contact .contact-text .lead{
    max-width: 36ch;
    margin: 0;
  }
}
/* Only on mobile: put "your next step" on a new line */






/* =============================
   FOOTER
============================= */
.footer {
  padding: 28px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--slate);
}