/* AUTO-GENERATED by scripts/port/ — do not edit.
   Global styles collected from the design pages' <helmet> blocks, the
   local stylesheets they <link> (responsive.css), plus hover rules
   generated from style-hover attributes. */

/* from Timit Hjemmeside.dc.html */
* { box-sizing: border-box; }
  body { margin: 0; }
  a { color:var(--accent-dark,#8A4C36); text-decoration:none; }
  a:hover { color:#6E3B2A; }
  ::selection { background:#E8D3C7; }
  html { scroll-behavior:smooth; }

/* from Pricing.dc.html */
* { box-sizing:border-box; } body { margin:0; }
  a { color:#8A4C36; text-decoration:none; } a:hover { color:#6E3B2A; }
  html { scroll-behavior:smooth; } ::selection { background:#E8D3C7; }

/* from Contact.dc.html */
* { box-sizing:border-box; } body { margin:0; }
  a { color:#8A4C36; text-decoration:none; } a:hover { color:#6E3B2A; }
  html { scroll-behavior:smooth; } ::selection { background:#E8D3C7; }
  input, textarea, select { font-family:'Roboto',sans-serif; font-size:15px; width:100%; padding:12px 14px; border:1px solid #D8CDBF; border-radius:8px; background:#fff; color:#2B2521; outline:none; }
  input:focus, textarea:focus, select:focus { border-color:#A65E44; box-shadow:0 0 0 3px rgba(166,94,68,0.18); }
  label { font-size:13px; font-weight:500; color:#4D4640; font-family:'Plus Jakarta Sans',sans-serif; display:block; margin-bottom:6px; }

/* from responsive.css (linked from the design helmets) */
/* Responsive overrides.
   Media queries cannot live in inline styles, so these rules use !important
   to win against the inline styles they adjust.

   IMPORTANT: React normalizes inline styles when it renders, so the DOM
   attribute reads "max-width: 900px" (space after the colon), "0" becomes
   "0px", and hex colors become "rgb(...)". Attribute-substring selectors must
   therefore be written in that normalized form. Prefer element selectors
   (section, h1, header, footer) wherever possible — they are immune to this. */

/* ---------- Tablet: 3- and 4-up grids become 2-up ---------- */
@media (max-width: 1100px) {
  [style*="repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 32px !important; }
}

/* ---------- Tablet / small laptop: side-by-side splits stack ---------- */
@media (max-width: 900px) {
  /* Any grid collapses to a single column */
  [style*="display: grid"],
  [style*="display:grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  /* Page gutters.
     The gutter belongs to whichever element carries the max-width: on most
     sections that is the <section>, but on full-bleed sections (background or
     border spanning the viewport) it is an inner wrapper. Targeting max-width
     hits the right element either way — a blanket "section" rule would double
     up on the full-bleed ones and make the edges ragged. */
  [style*="max-width: 1200px"],
  [style*="max-width:1200px"],
  [style*="max-width: 1080px"],
  [style*="max-width:1080px"],
  [style*="max-width: 1000px"],
  [style*="max-width:1000px"],
  [style*="max-width: 900px"],
  [style*="max-width:900px"],
  [style*="max-width: 820px"],
  [style*="max-width:820px"],
  [style*="max-width: 760px"],
  [style*="max-width:760px"],
  [style*="max-width: 720px"],
  [style*="max-width:720px"],
  [style*="max-width: 680px"],
  [style*="max-width:680px"],
  [style*="max-width: 600px"],
  [style*="max-width:600px"],
  [style*="max-width: 540px"],
  [style*="max-width:540px"],
  p[style*="padding: 0px 40px"],
  p[style*="padding:0 40px"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Inner bars that carry their own gutters (social strip, footer rows) */
  [style*="padding: 24px 40px"],
  [style*="padding:24px 40px"],
  [style*="padding: 26px 40px"],
  [style*="padding:26px 40px"],
  [style*="padding: 20px 40px"],
  [style*="padding:20px 40px"],
  [style*="padding: 64px 40px"],
  [style*="padding:64px 40px"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Hero text column owns its own centring padding and has no max-width, so it
     needs targeting directly. The <section> stays unpadded so the image keeps
     bleeding to the screen edge. */
  [style*="-560px + 50vw"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-top: 52px !important;
    padding-bottom: 36px !important;
  }

  /* Desktop breathing inset on the 3-step columns becomes misalignment once
     the grid is a single column */
  [style*="padding: 0px 12px"],
  [style*="padding:0 12px"] { padding-left: 0 !important; padding-right: 0 !important; }

  /* min-height is never matched by the height rules below — needs its own */
  [style*="min-height: 580px"],
  [style*="min-height:580px"] { min-height: 320px !important; }
  [style*="min-height: 520px"],
  [style*="min-height:520px"] { min-height: 300px !important; }
  [style*="min-height: 480px"],
  [style*="min-height:480px"] { min-height: 280px !important; }

  /* Section rhythm tightens */
  [style*="var(--sec-y"],
  section[style*="padding: 88px"],
  section[style*="padding:88px"],
  section[style*="padding: 96px"],
  section[style*="padding:96px"],
  section[style*="padding: 80px"],
  section[style*="padding:80px"],
  section[style*="padding: 72px"],
  section[style*="padding:72px"] {
    padding-top: 52px !important;
    padding-bottom: 32px !important;
  }

  /* Header: collapse the links into a burger panel */
  header .nav-bar {
    flex-wrap: nowrap !important;
    gap: 14px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  header .nav-burger { display: inline-flex !important; }
  header .nav-desktop-only { display: none !important; }
  header .nav-right { gap: 12px !important; }

  header .nav-links { display: none !important; }
  header .nav-toggle:checked ~ .nav-links {
    display: flex !important;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    gap: 0 !important;
    padding: 4px 22px 16px;
    background: #FAF6F0;
    border-bottom: 1px solid #EAE1D5;
    box-shadow: 0 14px 30px rgba(43, 37, 33, 0.10);
  }
  header .nav-toggle:checked ~ .nav-links > a {
    padding: 14px 0 !important;
    border-bottom: 1px solid #EFE6DA;
    font-size: 16px !important;
  }
  header .nav-toggle:checked ~ .nav-links > a:last-child { border-bottom: none; }
  header .nav-toggle:checked ~ .nav-links .nav-mobile-only { display: block !important; }
  header .nav-toggle:checked ~ .nav-right .nav-icon-open { display: none !important; }
  header .nav-toggle:checked ~ .nav-right .nav-icon-close { display: inline-block !important; }

  /* Typography scales down */
  h1 { font-size: 36px !important; }
  h2 { font-size: 28px !important; }

  /* Tall decorative media shrinks */
  [style*="height: 520px"],
  [style*="height:520px"] { height: 320px !important; }
  [style*="height: 440px"],
  [style*="height:440px"] { height: 300px !important; }
  [style*="height: 420px"],
  [style*="height:420px"] { height: 300px !important; }
  [style*="height: 400px"],
  [style*="height:400px"] { height: 280px !important; }
  [style*="height: 360px"],
  [style*="height:360px"] { height: 260px !important; }

  /* Cards ease off their desktop padding (longhand keeps intentional asymmetry) */
  /* :not(section) so a section that happens to use the same padding value keeps
     the 22px page gutter instead of picking up a card inset */
  [style*="padding: 48px"]:not(section),
  [style*="padding:48px"]:not(section) { padding-left: 26px !important; padding-right: 26px !important; }
  [style*="padding: 40px"]:not(section),
  [style*="padding:40px"]:not(section) { padding-left: 24px !important; padding-right: 24px !important; }
  [style*="padding: 36px"]:not(section),
  [style*="padding:36px"]:not(section) { padding-left: 24px !important; padding-right: 24px !important; }
  [style*="padding: 34px"]:not(section),
  [style*="padding:34px"]:not(section) { padding-left: 24px !important; padding-right: 24px !important; }
  [style*="padding: 28px 32px"]:not(section),
  [style*="padding:28px 32px"]:not(section) { padding-left: 22px !important; padding-right: 22px !important; }
  [style*="padding: 26px 30px"]:not(section),
  [style*="padding:26px 30px"]:not(section) { padding-left: 22px !important; padding-right: 22px !important; }

  /* Guard against stray horizontal scroll (clip keeps position: sticky working) */
  body { overflow-x: clip; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  [style*="repeat(3"],
  [style*="repeat(4"],
  [style*="repeat(2"] { grid-template-columns: minmax(0, 1fr) !important; }

  h1 { font-size: 30px !important; line-height: 1.14 !important; }
  h2 { font-size: 24px !important; line-height: 1.2 !important; }
  h3 { font-size: 18px !important; }

  /* Body copy and leads */
  [style*="font-size: 19px"],
  [style*="font-size:19px"] { font-size: 17px !important; }
  [style*="font-size: 18px"],
  [style*="font-size:18px"] { font-size: 16px !important; }

  /* Big display numerals / prices */
  [style*="font-size: 44px"],
  [style*="font-size:44px"] { font-size: 34px !important; }
  [style*="font-size: 46px"],
  [style*="font-size:46px"] { font-size: 30px !important; }
  [style*="font-size: 52px"],
  [style*="font-size:52px"] { font-size: 30px !important; }
  [style*="font-size: 58px"],
  [style*="font-size:58px"] { font-size: 30px !important; }
  [style*="font-size: 60px"],
  [style*="font-size:60px"] { font-size: 32px !important; }

  /* Testimonial and quote blocks */
  [style*="font-size: 26px"],
  [style*="font-size:26px"] { font-size: 20px !important; }

  /* Full-width CTAs so they stay tappable */
  section a[style*="border-radius: 999px"][style*="padding: 16px"],
  section a[style*="border-radius:999px"][style*="padding:16px"],
  section a[style*="border-radius: 999px"][style*="padding: 17px"],
  section a[style*="border-radius:999px"][style*="padding:17px"] {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  /* Stacked button rows */
  [style*="gap: 14px"],
  [style*="gap:14px"] { gap: 12px !important; }

  /* Social-proof strip reads as a centred column (hex is normalized to rgb) */
  [style*="rgb(245, 239, 231)"] div,
  [style*="#F5EFE7"] div { gap: 14px 22px !important; }
  /* Its label is nowrap and ~420px wide — must be allowed to wrap on a phone */
  [style*="rgb(245, 239, 231)"] [style*="white-space: nowrap"],
  [style*="#F5EFE7"] [style*="white-space:nowrap"] { white-space: normal !important; }

  /* Footer collapses to one column */
  footer > div:first-child { gap: 28px !important; }
}

/* style-hover rules (generated). !important: a hover state must beat
   the element's own inline style. */
.tm-hv-1arqtge:hover { background:var(--accent-dark,#8A4C36) !important; }
.tm-hv-1dbkjjr:hover { background:#F3ECE3 !important; }
.tm-hv-1eqm1dk:hover { background:#EDF0E8 !important; }
.tm-hv-1fcmoex:hover { background:#8A4C36 !important; }
.tm-hv-1gjf07g:hover { background:#E8D3C7 !important; }
.tm-hv-1ov4bia:hover { background:var(--accent-soft,#F3ECE3) !important; }
.tm-hv-1s7vm6:hover { background:rgba(255,255,255,0.08) !important; }
.tm-hv-1ywcpse:hover { background:#F3ECE3 !important; border-color:#A65E44 !important; }
.tm-hv-8lxqp2:hover { box-shadow:0 20px 52px rgba(43,37,33,0.16) !important; border-color:#C4CCB8 !important; }
.tm-hv-bmikkw:hover { box-shadow:0 20px 52px rgba(43,37,33,0.16) !important; border-color:#D9C3B4 !important; }