:root{
      /* Golden ratio (φ) for a consistent typographic & spacing scale */
      --phi: 1.618;

      /* Typography scale (base 16px) */
      --s0: 1rem;                 /* 16 */
      --s1: calc(var(--s0) * var(--phi));        /* 25.9 */
      --s2: calc(var(--s1) * var(--phi));        /* 41.9 */
      --s3: calc(var(--s2) * var(--phi));        /* 67.8 */

      /* Spacing scale */
      --sp0: .5rem;
      --sp1: calc(var(--sp0) * var(--phi));      /* 0.809 */
      --sp2: calc(var(--sp1) * var(--phi));      /* 1.309 */
      --sp3: calc(var(--sp2) * var(--phi));      /* 2.118 */
      --sp4: calc(var(--sp3) * var(--phi));      /* 3.427 */

      /* Layout (approx φ proportions for content/aside) */
      --max: 1200px;
      --content: 62%;
      --aside: 38%;

      /* Colors */
      --bg: #f6f7f9;
      --card: #ffffff;
      --text: #121417;
      --muted: #5b6471;
      --brand: #0b6b5f;
      --brand-2:#0a3f38;
      --accent:#a21515;
      --line: rgba(18,20,23,.10);

      --radius: 14px;
      --shadow: 0 10px 30px rgba(0,0,0,.08);
    }

    *{ box-sizing: border-box; }
    html,body{ height: 100%; }
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.55;
    }
    a{ color: inherit; }
    .sr-only{
      position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }
    .skip-link{
      position:absolute; left:-999px; top: var(--sp2);
      background: var(--card); color: var(--text);
      padding: var(--sp1) var(--sp2); border-radius: 999px; box-shadow: var(--shadow);
      z-index: 9999;
    }
    .skip-link:focus{ left: var(--sp2); }

    /* Header */
    header{
      background:
        linear-gradient(135deg, rgba(17,20,24,.92), rgba(26,34,44,.92)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(35deg, rgba(11,107,95,.18) 0 2px, transparent 2px 160px);
      color: #fff;
      padding: var(--sp4) 0;
    }
    .wrap{
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 var(--sp3);
    }
    .brandline{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: var(--sp3);
      flex-wrap: wrap;
    }

    /* Brand logo */
    .brand{ display:flex; align-items:center; }
    .brand-link{ display:inline-flex; align-items:center; text-decoration:none; }
    .logo{
      height: 176px;
      width: auto;
      filter: drop-shadow(0 10px 28px rgba(0,0,0,.45));
    }
    @media (max-width: 600px){
      .logo{ height: 128px; }
    }
    .title{
      margin:0;
      font-family: "Roboto Slab", serif;
      font-size: var(--s2);
      letter-spacing: .02em;
      line-height: 1.1;
    }
    .subtitle{
      margin: var(--sp1) 0 0 0;
      max-width: 56ch;
      color: rgba(255,255,255,.85);
      font-size: var(--s0);
    }
    .header-cta{
      display:flex;
      flex-direction: column;
      align-items: flex-end;
      gap: var(--sp1);
      min-width: 240px;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap: .5rem;
      padding: .6rem 1rem;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.18);
      text-decoration:none;
      white-space: nowrap;
    }
    .pill strong{ font-weight: 600; }
    .small{
      font-size: .92rem;
      color: rgba(255,255,255,.78);
      margin:0;
      text-align: right;
    }

    /* Nav */
    nav{
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(11,107,95,.98);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid rgba(255,255,255,.14);
    }
    .nav-inner{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: var(--sp2);
      padding: .65rem var(--sp3);
      max-width: var(--max);
      margin: 0 auto;
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap: .25rem;
      flex-wrap: wrap;
    }
    .nav-links a, .nav-button{
      color:#fff;
      text-decoration:none;
      padding: .55rem .9rem;
      border-radius: 999px;
      font-size: .98rem;
      border: 1px solid transparent;
      display:inline-flex;
      align-items:center;
      gap: .45rem;
    }
    .nav-links a:hover, .nav-button:hover{
      background: rgba(0,0,0,.14);
      border-color: rgba(255,255,255,.18);
    }

    .dropdown{ position: relative; }
    .nav-button{
      background: transparent;
      cursor: pointer;
      user-select: none;
    }
    .dropdown-content{
      display:none;
      position:absolute;
      left:0;
      top: calc(100% + .45rem);
      min-width: 280px;
      background: #0d6f63;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 14px;
      box-shadow: 0 18px 40px rgba(0,0,0,.20);
      padding: .45rem;
    }
    .dropdown-content a{
      display:block;
      padding: .7rem .8rem;
      border-radius: 12px;
    }
    .dropdown-content a:hover{
      background: rgba(0,0,0,.14);
    }
    .dropdown:hover .dropdown-content,
    .dropdown:focus-within .dropdown-content{
      display:block;
    }

    .nav-right{
      display:flex;
      align-items:center;
      gap: .5rem;
      flex-wrap: wrap;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: .5rem;
      padding: .6rem 1rem;
      border-radius: 999px;
      background: #fff;
      color: #111418;
      text-decoration:none;
      font-weight: 600;
      border: 1px solid rgba(0,0,0,.10);
    }
    .btn:hover{ filter: brightness(.96); }
    .btn-outline{
      background: transparent;
      color:#fff;
      border-color: rgba(255,255,255,.24);
    }
    .btn-outline:hover{ background: rgba(0,0,0,.12); }

    /* Main layout */
    main{
      padding: var(--sp4) 0;
    }
    .grid{
      display:grid;
      grid-template-columns: var(--content) var(--aside);
      gap: var(--sp3);
      align-items:start;
    }
    .card{
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: var(--sp3);
    }
    .card + .card{ margin-top: var(--sp3); }

    h2{
      margin: 0 0 var(--sp2) 0;
      font-size: var(--s1);
      line-height: 1.2;
    }
    h3{
      margin: var(--sp3) 0 var(--sp1) 0;
      font-size: 1.2rem;
      line-height: 1.25;
    }
    p{ margin: 0 0 var(--sp2) 0; color: var(--text); }
    .muted{ color: var(--muted); }

    ul{
      margin: 0;
      padding-left: 1.1rem;
    }
    li{ margin: .55rem 0; }

    .badges{
      display:flex;
      flex-wrap: wrap;
      gap: .5rem;
      margin-top: var(--sp2);
    }
    .badge{
      display:inline-flex;
      padding: .4rem .7rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fbfbfc;
      color: var(--muted);
      font-size: .92rem;
      white-space: nowrap;
    }

    /* Aside */
    .cta{
      border-left: 6px solid var(--accent);
      background: linear-gradient(180deg, #fff, #fff7f7);
    }
    .cta h2{ margin-bottom: var(--sp1); }
    .cta .phones{
      display:flex;
      flex-direction: column;
      gap: .45rem;
      margin: var(--sp2) 0;
      font-size: 1.05rem;
    }
    .phones a{
      text-decoration:none;
      font-weight: 700;
      letter-spacing:.01em;
      padding: .65rem .9rem;
      border-radius: 12px;
      border: 1px solid rgba(162,21,21,.22);
      background: rgba(162,21,21,.06);
      display:inline-flex;
      align-items:center;
      justify-content: space-between;
    }
    .phones a:hover{ filter: brightness(.98); }
    .cta-note{ margin:0; color: var(--muted); }

    /* Contact form */
    form label{
      display:block;
      margin: 0 0 .35rem 0;
      font-weight: 600;
    }
    input, textarea{
      width:100%;
      padding: .85rem .95rem;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.14);
      background: #fff;
      font: inherit;
      outline: none;
    }
    input:focus, textarea:focus{
      border-color: rgba(11,107,95,.55);
      box-shadow: 0 0 0 4px rgba(11,107,95,.12);
    }
    .form-row{ margin-bottom: var(--sp2); }
    .form-actions{
      display:flex;
      gap: .75rem;
      flex-wrap: wrap;
      align-items:center;
    }
    .primary{
      background: var(--brand);
      color:#fff;
      border: 1px solid rgba(0,0,0,.10);
    }
    .primary:hover{ background: var(--brand-2); }

    /* Footer */
    footer{
      padding: var(--sp4) 0;
      color: var(--muted);
      border-top: 1px solid var(--line);
      background: #fafbfc;
    }
    .footer-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp3);
      align-items:start;
    }

    /* Responsive */
    @media (max-width: 980px){
      .grid{ grid-template-columns: 1fr; }
      .header-cta{ align-items: flex-start; }
      .small{ text-align:left; }
    }
    @media (max-width: 600px){
      .wrap{ padding: 0 var(--sp2); }
      .nav-inner{ padding: .65rem var(--sp2); }
      .title{ font-size: calc(var(--s1) * 1.15); }
    }

/* --- Additions for subpages (active states + breadcrumbs) --- */
.nav-links a[aria-current="page"],
.dropdown-content a[aria-current="page"]{
  background: rgba(0,0,0,.14);
  border-color: rgba(255,255,255,.18);
}
.breadcrumbs{
  margin-top: var(--sp2);
  font-size: .95rem;
  color: rgba(255,255,255,.82);
}
.breadcrumbs a{ color: rgba(255,255,255,.92); text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.35); }
.breadcrumbs a:hover{ border-bottom-color: rgba(255,255,255,.75); }
.page-hero{
  margin-top: var(--sp2);
  max-width: 70ch;
}
.note{
  border-left: 6px solid rgba(11,107,95,.55);
  background: linear-gradient(180deg, #fff, #f3fffd);
}
.faq details{ margin-top: .8rem; }
.faq summary{ font-weight: 700; }


/* Legal remark block */
.legal-note{
  border-left: 6px solid var(--accent);
  background: linear-gradient(180deg, #fff, #fff7f7);
}
.legal-note a{ color: #7f1212; font-weight: 600; }


/* Contact form status */
.form-status{
  margin-top:.75rem;
  padding:.75rem .9rem;
  border-radius:14px;
  font-size:.95rem;
  line-height:1.25;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  display:none;
}
.form-status.is-ok{
  display:block;
  border-color:rgba(94,234,212,.35);
  background:rgba(94,234,212,.10);
}
.form-status.is-error{
  display:block;
  border-color:rgba(248,113,113,.35);
  background:rgba(248,113,113,.10);
}


/* Force logo left, text right */
.brandline-horizontal{
  display:flex;
  align-items:center;
  gap:32px;
}
.brand{
  flex:0 0 auto;
}
.brand + div{
  flex:1;
}

/* Keep it visually behind main text */
header{
  position: relative;
}
.motto.gothic{
  position: relative;
  z-index: 0;
}
.title, .subtitle{
  position: relative;
  z-index: 2;
}


/* Watermark motto background (SVG) */
header.header-watermark{ position: relative; overflow: hidden; }
header.header-watermark::before{
  content: "";
  position: absolute;
  inset: -40px -80px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221400%22%20height%3D%22320%22%20viewBox%3D%220%200%201400%20320%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220.15%22%20stop-color%3D%22white%22%20stop-opacity%3D%221%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220.85%22%20stop-color%3D%22white%22%20stop-opacity%3D%221%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%3Cmask%20id%3D%22fade%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%221400%22%20height%3D%22320%22%20fill%3D%22url%28%23g%29%22/%3E%0A%20%20%20%20%3C/mask%3E%0A%20%20%3C/defs%3E%0A%20%20%3Cg%20mask%3D%22url%28%23fade%29%22%3E%0A%20%20%20%20%3Ctext%20x%3D%2250%25%22%20y%3D%2262%25%22%20text-anchor%3D%22middle%22%0A%20%20%20%20%20%20font-family%3D%22Georgia%2C%20%27Times%20New%20Roman%27%2C%20serif%22%0A%20%20%20%20%20%20font-size%3D%2292%22%0A%20%20%20%20%20%20font-style%3D%22italic%22%0A%20%20%20%20%20%20font-weight%3D%22500%22%0A%20%20%20%20%20%20letter-spacing%3D%2210%22%0A%20%20%20%20%20%20fill%3D%22white%22%0A%20%20%20%20%20%20opacity%3D%220.20%22%3Eterminus%20servat%20ordinem%3C/text%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 35%;
  background-size: min(1200px, 115%);
  transform: rotate(-6deg);
  pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.25));
  z-index: 0;
}
/* Keep main header content above watermark */
header.header-watermark .wrap{ position: relative; z-index: 2; }

/* Keep motto text for accessibility, but hide visually */
.motto-accessible{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Mobile tuning */
@media (max-width: 600px){
  header.header-watermark::before{
    background-position: 50% 30%;
    background-size: 980px;
    transform: rotate(-6deg);
    opacity: 1;
  }
}