:root{
      --bg: #f3efe6;            /* sand beige */
      --paper: #f7f2e8;
      --ink: #1f2423;           /* midnight charcoal */
      --muted: #59605d;         /* ash gray */
      --line: rgba(35,40,38,.22);
      --graphite: rgba(20,24,23,.38);

      --green: #2f5b46;         /* forest green */
      --green-2:#3b6d55;
      --orange:#c46a2a;         /* burnt orange */
      --ember:#b8332b;          /* ember red */
      --beige:#e7dcc7;
      --charcoal:#151a19;

      --ok:#2f7d4f;
      --watch:#c9851e;
      --warn:#b8332b;
      --info:#2f5b7a;

      --radius: 14px;
      --radius-sm: 12px;
      --shadow: 0 10px 30px rgba(15,18,17,.10);
      --shadow-low: 0 8px 18px rgba(15,18,17,.10);

      --focus: 0 0 0 3px rgba(196,106,42,.25), 0 0 0 1px rgba(184,51,43,.25);
      --speed: .45s;

      --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      --font-condensed: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    }

    *{ box-sizing:border-box; }
    html, body{ height:100%; }
    body{
      margin:0;
      font-family:var(--font);
      color:var(--ink);
      background:
        radial-gradient(1200px 700px at 80% 10%, rgba(196,106,42,.10), transparent 55%),
        radial-gradient(1000px 600px at 10% 30%, rgba(47,91,70,.10), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 18%),
        linear-gradient(0deg, rgba(0,0,0,.03), rgba(0,0,0,0) 35%),
        repeating-linear-gradient(135deg, rgba(24,28,27,.04) 0 1px, transparent 1px 12px),
        var(--bg);
      line-height:1.55;
    }

    a{ color:var(--green); text-decoration-thickness: 2px; text-underline-offset: .18em; }
    a:hover{ color:var(--green-2); }
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
      outline: none;
      box-shadow: var(--focus);
      border-color: rgba(196,106,42,.55) !important;
    }

    /* ---------- Header / Nav ---------- */
    header{
      position: sticky;
      top:0;
      z-index: 50;
      backdrop-filter: blur(10px);
      background: rgba(243,239,230,.72);
      border-bottom: 1px solid var(--line);
    }

    .topbar{
      max-width: 1180px;
      margin: 0 auto;
      padding: 14px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width: 220px;
    }

    .brand-mark{
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background:
        linear-gradient(135deg, rgba(47,91,70,.92), rgba(47,91,70,.62)),
        radial-gradient(20px 20px at 30% 25%, rgba(255,255,255,.35), transparent 60%);
      border: 1px solid rgba(21,26,25,.25);
      box-shadow: 0 10px 25px rgba(15,18,17,.10);
      position: relative;
      overflow:hidden;
    }
    .brand-mark:before{
      content:"";
      position:absolute;
      inset: 10px 9px 10px 9px;
      border-radius: 12px;
      border: 1px dashed rgba(231,220,199,.65);
      transform: rotate(0.5deg);
      opacity: .9;
    }
    .brand-title{
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .brand-title strong{
      font-family: var(--font-condensed);
      letter-spacing:.03em;
      font-weight: 820;
      font-size: 14px;
      text-transform: uppercase;
      line-height: 1.1;
    }
    .brand-title span{
      color: var(--muted);
      font-size: 12.5px;
      line-height:1.1;
    }

    /* Burger + nav (pure CSS) */
    .navwrap{
      display:flex;
      align-items:center;
      gap: 10px;
    }
    #menu-toggle{
      position:absolute;
      left:-9999px;
      width:1px;height:1px;
      overflow:hidden;
    }
    .burger{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 44px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(247,242,232,.8);
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(15,18,17,.08);
      transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed), background var(--speed);
    }
    .burger:hover{
      transform: translateY(-1px);
      border-color: rgba(47,91,70,.35);
      box-shadow: 0 14px 30px rgba(15,18,17,.10);
    }
    .burger i{
      width: 18px;
      height: 2px;
      background: var(--ink);
      position: relative;
      display:block;
      border-radius: 2px;
      transition: transform var(--speed), background var(--speed);
      opacity: .92;
    }
    .burger i:before, .burger i:after{
      content:"";
      position:absolute;
      left:0;
      width: 18px;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: transform var(--speed), top var(--speed), opacity var(--speed);
    }
    .burger i:before{ top:-6px; }
    .burger i:after{ top: 6px; }

    nav{
      position: relative;
    }
    nav ul{
      margin:0;
      padding:0;
      list-style:none;
      display:none; /* mobile collapsed by default */
      position:absolute;
      right:0;
      top: calc(100% + 10px);
      width: min(92vw, 420px);
      background:
        linear-gradient(180deg, rgba(247,242,232,.92), rgba(243,239,230,.92)),
        repeating-linear-gradient(90deg, rgba(21,26,25,.04) 0 1px, transparent 1px 16px);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    nav ul li a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 12px 14px;
      color: var(--ink);
      text-decoration:none;
      border-top: 1px solid rgba(35,40,38,.09);
      transition: background var(--speed), color var(--speed);
      font-weight: 650;
    }
    nav ul li:first-child a{ border-top: 0; }
    nav ul li a:hover{
      background: rgba(47,91,70,.08);
      color: var(--green);
      text-decoration: underline;
    }
    nav ul li a:after{
      content:"›";
      color: rgba(31,36,35,.65);
      font-size: 18px;
      transform: translateY(-1px);
    }

    #menu-toggle:checked ~ nav ul{ display:block; }
    #menu-toggle:checked + label.burger i{ background: transparent; }
    #menu-toggle:checked + label.burger i:before{ top:0; transform: rotate(45deg); }
    #menu-toggle:checked + label.burger i:after{ top:0; transform: rotate(-45deg); }

    .header-actions{
      display:flex;
      align-items:center;
      gap: 10px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(247,242,232,.85);
      color: var(--ink);
      text-decoration:none;
      font-weight: 720;
      letter-spacing:.01em;
      transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed), background var(--speed), color var(--speed);
      box-shadow: 0 10px 22px rgba(15,18,17,.08);
      white-space:nowrap;
    }
    .btn:hover{
      transform: translateY(-1px);
      border-color: rgba(47,91,70,.35);
      box-shadow: 0 14px 30px rgba(15,18,17,.12);
    }
    .btn-primary{
      background: linear-gradient(180deg, rgba(47,91,70,.98), rgba(47,91,70,.78));
      color: #f5f2ea;
      border-color: rgba(21,26,25,.22);
    }
    .btn-primary:hover{
      box-shadow: 0 14px 34px rgba(47,91,70,.22);
      border-color: rgba(231,220,199,.35);
    }
    .btn-alert{
      background: linear-gradient(180deg, rgba(184,51,43,.98), rgba(184,51,43,.78));
      color: #fff3f2;
      border-color: rgba(21,26,25,.22);
    }
    .btn-alert:hover{
      box-shadow: 0 14px 34px rgba(184,51,43,.22);
      border-color: rgba(255,255,255,.25);
    }

    /* Modal (pure CSS :target) */
    .modal{
      position: fixed;
      inset: 0;
      display:none;
      align-items:center;
      justify-content:center;
      padding: 18px;
      background: rgba(21,26,25,.62);
      z-index: 90;
    }
    .modal:target{ display:flex; }
    .modal-card{
      width: min(820px, 100%);
      border-radius: 18px;
      background:
        radial-gradient(900px 350px at 20% 0%, rgba(196,106,42,.14), transparent 55%),
        linear-gradient(180deg, rgba(247,242,232,.98), rgba(243,239,230,.98));
      border: 1px solid rgba(231,220,199,.55);
      box-shadow: 0 24px 70px rgba(0,0,0,.35);
      overflow:hidden;
      position: relative;
    }
    .modal-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      padding: 16px 16px 12px;
      border-bottom: 1px solid rgba(35,40,38,.12);
      background:
        linear-gradient(90deg, rgba(196,106,42,.20), rgba(196,106,42,0) 55%);
    }
    .modal-head h2{
      margin:0;
      font-family: var(--font-condensed);
      letter-spacing:.02em;
      font-weight: 860;
      text-transform: uppercase;
      font-size: 14px;
    }
    .modal-head p{ margin:6px 0 0; color: var(--muted); font-size: 13px; max-width: 56ch; }
    .modal-close{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 42px;
      height: 40px;
      border-radius: 14px;
      border: 1px solid rgba(35,40,38,.18);
      background: rgba(247,242,232,.7);
      color: var(--ink);
      text-decoration:none;
      font-weight: 900;
      transition: transform var(--speed), box-shadow var(--speed), background var(--speed);
      box-shadow: 0 10px 22px rgba(15,18,17,.08);
    }
    .modal-close:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(15,18,17,.12); }
    .modal-body{
      padding: 14px 16px 16px;
      display:grid;
      gap: 12px;
    }
    .form-grid{
      display:grid;
      gap: 10px;
      grid-template-columns: 1fr;
    }
    .field{
      display:grid;
      gap: 6px;
    }
    label{
      font-size: 12px;
      color: var(--muted);
      font-weight: 650;
      letter-spacing:.02em;
      text-transform: uppercase;
    }
    input, textarea, select{
      font: inherit;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(35,40,38,.20);
      background: rgba(255,255,255,.65);
      transition: border-color var(--speed), box-shadow var(--speed), background var(--speed);
    }
    textarea{ min-height: 110px; resize: vertical; }
    .form-actions{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
      justify-content:flex-end;
      padding-top: 6px;
      border-top: 1px dashed rgba(35,40,38,.18);
      margin-top: 4px;
    }

    /* ---------- HERO ---------- */
    .hero{
      max-width: 1180px;
      margin: 0 auto;
      padding: 18px 16px 22px;
      display:grid;
      gap: 16px;
    }
    .hero-shell{
      border-radius: 20px;
      border: 1px solid rgba(35,40,38,.15);
      background:
        radial-gradient(1200px 520px at 80% 0%, rgba(47,91,70,.18), transparent 55%),
        radial-gradient(900px 420px at 10% 20%, rgba(196,106,42,.16), transparent 58%),
        linear-gradient(180deg, rgba(247,242,232,.94), rgba(243,239,230,.94));
      box-shadow: var(--shadow);
      overflow:hidden;
      position: relative;
    }
    .hero-shell:before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(800px 300px at 70% 10%, rgba(255,255,255,.24), transparent 55%),
        repeating-linear-gradient(90deg, rgba(21,26,25,.035) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(0deg, rgba(21,26,25,.022) 0 1px, transparent 1px 22px);
      pointer-events:none;
      mix-blend-mode: multiply;
      opacity: .7;
    }
    .hero-inner{
      position:relative;
      padding: 18px;
      display:grid;
      gap: 16px;
    }

    .hero h1{
      margin: 0;
      font-size: clamp(28px, 3.3vw, 44px);
      line-height: 1.08;
      letter-spacing: .01em;
      font-weight: 900;
      font-family: var(--font-condensed);
      text-transform: none;
    }
    .hero p{
      margin: 10px 0 0;
      color: var(--muted);
      max-width: 68ch;
      font-size: 15.5px;
    }

    .hero-metrics{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 12px;
    }
    .metric{
      border-radius: 16px;
      border: 1px solid rgba(35,40,38,.14);
      background: rgba(255,255,255,.55);
      box-shadow: 0 10px 24px rgba(15,18,17,.08);
      padding: 10px 12px;
      position:relative;
      overflow:hidden;
    }
    .metric:before{
      content:"";
      position:absolute;
      left:0; top:0; bottom:0;
      width: 8px;
      background: linear-gradient(180deg, rgba(47,91,70,.85), rgba(196,106,42,.55));
    }
    .metric strong{
      display:block;
      font-variant-numeric: tabular-nums;
      font-size: 18px;
      letter-spacing:.01em;
    }
    .metric span{
      display:block;
      color: var(--muted);
      font-size: 12.5px;
      margin-top: 2px;
      letter-spacing:.01em;
    }

    /* Simple CSS slider (max 600px height) */
    .slider{
      border-radius: 18px;
      border: 1px solid rgba(35,40,38,.14);
      background: rgba(255,255,255,.45);
      overflow:hidden;
      box-shadow: var(--shadow-low);
      max-height: 600px;
    }
    .slides{
      display:flex;
      width: 400%;
      animation: slide 18s infinite;
    }
    .slide{
      width: 25%;
      position: relative;
      min-height: 320px;
      max-height: 600px;
    }
    .slide img{
      width:100%;
      height: 100%;
      display:block;
      object-fit: cover;
      filter: saturate(.88) contrast(1.05) brightness(.98);
    }
    .slide:after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(21,26,25,.55), rgba(21,26,25,.10) 55%, rgba(21,26,25,.20)),
        radial-gradient(700px 280px at 65% 18%, rgba(255,255,255,.12), transparent 58%);
      mix-blend-mode: multiply;
      opacity: .95;
      pointer-events:none;
    }
    .slide-caption{
      position:absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      display:flex;
      gap: 10px;
      align-items:flex-end;
      justify-content:space-between;
      flex-wrap: wrap;
      z-index: 1;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(231,220,199,.35);
      background: rgba(21,26,25,.55);
      color: rgba(247,242,232,.95);
      font-size: 12px;
      letter-spacing:.02em;
      text-transform: uppercase;
      box-shadow: 0 12px 30px rgba(0,0,0,.25);
      backdrop-filter: blur(6px);
      white-space:nowrap;
    }
    .tag b{ font-variant-numeric: tabular-nums; }
    .tag.pin:before{
      content:"";
      width: 10px; height: 10px;
      border-radius: 10px 10px 10px 0;
      transform: rotate(-45deg);
      background: linear-gradient(180deg, rgba(196,106,42,.95), rgba(184,51,43,.80));
      border: 1px solid rgba(255,255,255,.25);
      box-shadow: 0 0 0 2px rgba(21,26,25,.25) inset;
      display:inline-block;
    }
    .tag.wind:before{
      content:"";
      width: 18px; height: 12px;
      background:
        linear-gradient(0deg, transparent 40%, rgba(247,242,232,.9) 40% 55%, transparent 55%),
        linear-gradient(0deg, transparent 62%, rgba(247,242,232,.75) 62% 74%, transparent 74%);
      border-radius: 10px;
      display:inline-block;
      opacity:.9;
    }

    @keyframes slide{
      0%, 18%{ transform: translateX(0%); }
      25%, 43%{ transform: translateX(-25%); }
      50%, 68%{ transform: translateX(-50%); }
      75%, 93%{ transform: translateX(-75%); }
      100%{ transform: translateX(0%); }
    }

    .hero-actions{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 12px;
      align-items:center;
    }
    .hero-actions .btn{
      padding: 11px 14px;
    }

    .callout{
      border-radius: 18px;
      border: 1px solid rgba(35,40,38,.16);
      background: rgba(255,255,255,.55);
      overflow:hidden;
      box-shadow: 0 10px 24px rgba(15,18,17,.08);
    }
    .callout-head{
      padding: 10px 12px;
      display:flex;
      gap: 10px;
      align-items:center;
      background: linear-gradient(90deg, rgba(196,106,42,.35), rgba(196,106,42,0));
      border-bottom: 1px solid rgba(35,40,38,.10);
      font-weight: 820;
      letter-spacing:.02em;
      text-transform: uppercase;
      font-size: 12px;
      font-family: var(--font-condensed);
    }
    .warn-tri{
      width: 0; height: 0;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-bottom: 16px solid rgba(196,106,42,.95);
      position:relative;
      filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
    }
    .warn-tri:after{
      content:"!";
      position:absolute;
      left:-3px; top: 2px;
      font-size: 12px;
      font-weight: 900;
      color: rgba(21,26,25,.9);
    }
    .callout-body{
      padding: 12px;
      border-left: 6px solid rgba(196,106,42,.9);
      color: var(--muted);
      font-size: 14px;
    }
    .callout-body b{ color: var(--ink); }

    /* ---------- Main sections ---------- */
    main{
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 16px 34px;
      display:grid;
      gap: 18px;
    }

    section{
      border-radius: 20px;
      border: 1px solid rgba(35,40,38,.14);
      box-shadow: var(--shadow-low);
      overflow:hidden;
      background: rgba(247,242,232,.7);
    }
    .section-head{
      padding: 14px 16px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 16px;
      border-bottom: 1px solid rgba(35,40,38,.10);
      position: relative;
    }
    .section-head h2{
      margin:0;
      font-family: var(--font-condensed);
      font-weight: 900;
      letter-spacing:.02em;
      text-transform: uppercase;
      font-size: 14px;
    }
    .section-head p{
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 13.5px;
      max-width: 70ch;
    }

    .grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 12px;
    }

    article.card{
      border-radius: 18px;
      border: 1px solid rgba(35,40,38,.14);
      background: rgba(255,255,255,.58);
      box-shadow: 0 10px 24px rgba(15,18,17,.07);
      overflow:hidden;
      transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed), background var(--speed);
      position:relative;
    }
    article.card:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(15,18,17,.12);
      border-color: rgba(47,91,70,.28);
    }

    .card .media{
      aspect-ratio: 16 / 9;
      width: 100%;
      background: rgba(21,26,25,.05);
      position:relative;
    }
    .card .media img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
      filter: saturate(.9) contrast(1.05);
    }
    .card .media:after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(21,26,25,.02), rgba(21,26,25,.35)),
        radial-gradient(600px 240px at 30% 10%, rgba(255,255,255,.10), transparent 60%);
      opacity: .85;
      pointer-events:none;
      mix-blend-mode: multiply;
    }

    .card .body{
      padding: 12px 12px 14px;
      display:grid;
      gap: 8px;
    }
    .kicker{
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content:space-between;
      flex-wrap: wrap;
      font-size: 12px;
      color: var(--muted);
      letter-spacing:.01em;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(35,40,38,.14);
      background: rgba(247,242,232,.72);
      color: var(--ink);
      font-weight: 780;
      text-transform: uppercase;
      letter-spacing:.04em;
      font-size: 11px;
    }
    .badge:before{
      content:"";
      width: 9px;
      height: 9px;
      border-radius: 3px;
      background: rgba(47,91,70,.85);
      box-shadow: 0 0 0 2px rgba(255,255,255,.55) inset;
    }

    .card h3{
      margin:0;
      font-size: 16px;
      line-height: 1.2;
      font-weight: 880;
      letter-spacing:.01em;
    }
    .card p{
      margin:0;
      color: var(--muted);
      font-size: 13.5px;
    }
    .card .meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      flex-wrap: wrap;
      padding-top: 8px;
      border-top: 1px dashed rgba(35,40,38,.18);
      color: rgba(31,36,35,.72);
      font-size: 12.5px;
    }
    .meta .nums{ font-variant-numeric: tabular-nums; }
    .meta a{
      font-weight: 820;
      text-decoration: underline;
    }

    /* Section individuality */
    .sec-1{
      background:
        radial-gradient(1000px 300px at 10% 0%, rgba(47,91,70,.18), transparent 55%),
        linear-gradient(180deg, rgba(247,242,232,.92), rgba(243,239,230,.92));
    }
    .sec-1 .section-head{
      background: linear-gradient(90deg, rgba(47,91,70,.18), transparent 55%);
    }
    .sec-1 article.card:before{
      content:"";
      position:absolute;
      left:0; top:0; bottom:0;
      width: 7px;
      background: linear-gradient(180deg, rgba(47,125,79,.9), rgba(47,91,70,.6));
    }
    .sec-1 .badge:before{ background: rgba(47,125,79,.9); }

    .sec-2{
      background:
        radial-gradient(1000px 300px at 80% 0%, rgba(196,106,42,.20), transparent 55%),
        linear-gradient(180deg, rgba(247,242,232,.92), rgba(243,239,230,.92));
    }
    .sec-2 .section-head{
      background: linear-gradient(90deg, rgba(196,106,42,.22), transparent 55%);
    }
    .sec-2 article.card{
      background: rgba(255,255,255,.54);
    }
    .sec-2 article.card:hover{
      transform: translateY(-2px) rotate(-0.2deg);
      border-color: rgba(196,106,42,.35);
    }
    .sec-2 article.card:before{
      content:"";
      position:absolute;
      left:0; top:0; bottom:0;
      width: 7px;
      background: linear-gradient(180deg, rgba(201,133,30,.95), rgba(196,106,42,.6));
    }
    .sec-2 .badge:before{ background: rgba(201,133,30,.95); }

    .sec-3{
      background:
        radial-gradient(1000px 300px at 60% 0%, rgba(184,51,43,.14), transparent 55%),
        linear-gradient(180deg, rgba(247,242,232,.92), rgba(243,239,230,.92));
    }
    .sec-3 .section-head{
      background: linear-gradient(90deg, rgba(184,51,43,.16), transparent 55%);
    }
    .sec-3 article.card{
      border-style: solid;
    }
    .sec-3 article.card:before{
      content:"";
      position:absolute;
      left:0; top:0; bottom:0;
      width: 7px;
      background: linear-gradient(180deg, rgba(184,51,43,.95), rgba(196,106,42,.55));
    }
    .sec-3 article.card:hover{
      transform: translateY(-2px);
      border-color: rgba(184,51,43,.35);
      box-shadow: 0 18px 36px rgba(184,51,43,.10);
    }
    .sec-3 .badge:before{ background: rgba(184,51,43,.95); }

    /* ---------- Blog list block ---------- */
    .block{
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 16px 22px;
    }
    .blog{
      border-radius: 20px;
      border: 1px solid rgba(35,40,38,.14);
      background:
        radial-gradient(900px 260px at 20% 0%, rgba(47,91,122,.14), transparent 60%),
        linear-gradient(180deg, rgba(247,242,232,.94), rgba(243,239,230,.94));
      box-shadow: var(--shadow-low);
      overflow:hidden;
    }
    .blog-head{
      padding: 14px 16px;
      border-bottom: 1px solid rgba(35,40,38,.10);
      background: linear-gradient(90deg, rgba(47,91,122,.18), transparent 55%);
    }
    .blog-head h2{
      margin:0;
      font-family: var(--font-condensed);
      font-weight: 900;
      letter-spacing:.02em;
      text-transform: uppercase;
      font-size: 14px;
    }
    .blog-head p{ margin:6px 0 0; color: var(--muted); font-size: 13.5px; }

    .blog ul{
      list-style:none;
      margin:0;
      padding: 12px;
      display:grid;
      gap: 10px;
    }
    .blog li{
      border-radius: 18px;
      border: 1px solid rgba(35,40,38,.14);
      background: rgba(255,255,255,.55);
      box-shadow: 0 10px 22px rgba(15,18,17,.07);
      overflow:hidden;
      transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
    }
    .blog li:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(15,18,17,.12);
      border-color: rgba(47,91,122,.30);
    }
    .blog a{
      display:grid;
      grid-template-columns: 110px 1fr;
      gap: 12px;
      align-items:stretch;
      text-decoration:none;
      color: inherit;
    }
    .blog .thumb{
      height: 100%;
      min-height: 90px;
      background: rgba(21,26,25,.06);
      position: relative;
    }
    .blog .thumb img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
      filter: saturate(.9) contrast(1.05);
    }
    .blog .thumb:after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(21,26,25,.08), rgba(21,26,25,.28));
      mix-blend-mode: multiply;
      opacity:.85;
      pointer-events:none;
    }
    .blog .txt{
      padding: 10px 12px 12px 0;
      display:grid;
      gap: 6px;
    }
    .blog .txt strong{
      font-size: 15px;
      line-height:1.2;
      font-weight: 900;
    }
    .blog .txt span{
      color: var(--muted);
      font-size: 13.5px;
    }
    .blog .txt em{
      font-style: normal;
      color: rgba(31,36,35,.72);
      font-size: 12.5px;
      font-variant-numeric: tabular-nums;
    }

    /* ---------- Content (center) ---------- */
    .content{
      max-width: 880px;
      margin: 0 auto;
      padding: 0 16px 22px;
    }
    .content-shell{
      border-radius: 20px;
      border: 1px solid rgba(35,40,38,.14);
      background:
        radial-gradient(1000px 380px at 60% 0%, rgba(231,220,199,.55), transparent 55%),
        linear-gradient(180deg, rgba(247,242,232,.94), rgba(243,239,230,.94));
      box-shadow: var(--shadow-low);
      overflow:hidden;
    }
    .content-head{
      padding: 14px 16px;
      border-bottom: 1px solid rgba(35,40,38,.10);
      background: linear-gradient(90deg, rgba(47,91,70,.14), transparent 55%);
    }
    .content-head h2{
      margin:0;
      font-family: var(--font-condensed);
      font-weight: 900;
      letter-spacing:.02em;
      text-transform: uppercase;
      font-size: 14px;
    }
    .content-inner{
      padding: 14px 16px 16px;
      display:grid;
      gap: 12px;
    }
    .center-image{
      margin: 0 auto;
      width: min(760px, 100%);
      border-radius: 18px;
      overflow:hidden;
      border: 1px solid rgba(35,40,38,.14);
      box-shadow: 0 14px 34px rgba(15,18,17,.10);
      background: rgba(255,255,255,.55);
    }
    .center-image img{
      width:100%;
      height:auto;
      display:block;
      filter: saturate(.92) contrast(1.05);
    }
    .rating{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      border-radius: 16px;
      border: 1px solid rgba(35,40,38,.14);
      background: rgba(255,255,255,.55);
      padding: 10px 12px;
      font-weight: 820;
      letter-spacing:.01em;
    }
    .rating span{
      color: var(--muted);
      font-weight: 650;
      font-size: 12.5px;
      text-transform: uppercase;
      letter-spacing:.04em;
    }
    .divider{
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(35,40,38,.22), transparent);
      margin: 6px 0 2px;
    }

    .post[itemscope]{
      border-radius: 18px;
      border: 1px solid rgba(35,40,38,.14);
      background: rgba(255,255,255,.55);
      box-shadow: 0 10px 22px rgba(15,18,17,.07);
      overflow:hidden;
    }
    .post-head{
      padding: 14px 14px 12px;
      border-bottom: 1px solid rgba(35,40,38,.10);
      background:
        linear-gradient(90deg, rgba(196,106,42,.18), transparent 55%);
    }
    .post-head h1{
      margin:0;
      font-size: clamp(20px, 2.2vw, 28px);
      line-height: 1.15;
      font-weight: 920;
      font-family: var(--font-condensed);
      letter-spacing: .01em;
    }
    .post-meta{
      margin-top: 8px;
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      color: rgba(31,36,35,.72);
      font-size: 12.5px;
      font-variant-numeric: tabular-nums;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(35,40,38,.14);
      background: rgba(247,242,232,.70);
    }
    .chip:before{
      content:"";
      width: 10px;
      height: 10px;
      border-radius: 4px;
      background: rgba(47,91,70,.85);
      box-shadow: 0 0 0 2px rgba(255,255,255,.55) inset;
    }
    .chip.date:before{ background: rgba(47,91,122,.85); }
    .chip.route:before{ background: rgba(196,106,42,.90); }

    .post-body{
      padding: 12px 14px 14px;
      color: var(--muted);
      font-size: 14.5px;
    }
    .post-body b, .post-body strong{ color: var(--ink); }
    .checklist{
      margin: 10px 0 0;
      padding: 0;
      list-style:none;
      display:grid;
      gap: 8px;
    }
    .checklist li{
      border-radius: 14px;
      border: 1px solid rgba(35,40,38,.12);
      background: rgba(247,242,232,.62);
      padding: 10px 12px 10px 40px;
      position:relative;
    }
    .checklist li:before{
      content:"";
      position:absolute;
      left: 12px;
      top: 12px;
      width: 18px;
      height: 18px;
      border-radius: 6px;
      border: 1px solid rgba(35,40,38,.18);
      background:
        linear-gradient(180deg, rgba(47,91,70,.92), rgba(47,91,70,.65));
      box-shadow: 0 0 0 2px rgba(255,255,255,.55) inset;
    }
    .prevnext{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items:center;
      margin-top: 10px;
    }
    .prevnext a{
      flex: 1 1 240px;
      border-radius: 16px;
      border: 1px solid rgba(35,40,38,.14);
      background: rgba(255,255,255,.52);
      padding: 12px;
      text-decoration:none;
      color: inherit;
      box-shadow: 0 10px 22px rgba(15,18,17,.07);
      transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
    }
    .prevnext a:hover{
      transform: translateY(-2px);
      border-color: rgba(47,91,70,.28);
      box-shadow: 0 16px 34px rgba(15,18,17,.12);
      text-decoration: underline;
    }
    .prevnext a span{
      display:block;
      color: var(--muted);
      font-size: 12.5px;
      text-transform: uppercase;
      letter-spacing:.04em;
      font-weight: 750;
    }
    .prevnext a strong{
      display:block;
      margin-top: 4px;
      font-weight: 900;
      line-height:1.2;
    }

    .comments{
      border-radius: 18px;
      border: 1px solid rgba(35,40,38,.14);
      background: rgba(255,255,255,.50);
      overflow:hidden;
      box-shadow: 0 10px 22px rgba(15,18,17,.07);
      margin-top: 12px;
    }
    .comments-head{
      padding: 12px 14px;
      background: linear-gradient(90deg, rgba(89,96,93,.16), transparent 55%);
      border-bottom: 1px solid rgba(35,40,38,.10);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
    }
    .comments-head strong{
      font-family: var(--font-condensed);
      letter-spacing:.02em;
      text-transform: uppercase;
      font-size: 14px;
      font-weight: 900;
    }
    .comments-body{
      padding: 14px;
      color: rgba(31,36,35,.70);
      min-height: 90px;
    }

    .comment-form{
      margin-top: 12px;
      border-radius: 18px;
      border: 1px solid rgba(35,40,38,.14);
      background: rgba(255,255,255,.52);
      box-shadow: 0 10px 22px rgba(15,18,17,.07);
      overflow:hidden;
    }
    .comment-form .head{
      padding: 12px 14px;
      background: linear-gradient(90deg, rgba(47,91,70,.14), transparent 55%);
      border-bottom: 1px solid rgba(35,40,38,.10);
      font-weight: 900;
      font-family: var(--font-condensed);
      letter-spacing:.02em;
      text-transform: uppercase;
      font-size: 14px;
    }
    .comment-form form{
      padding: 12px 14px 14px;
      display:grid;
      gap: 10px;
    }

    /* Related */
    .related{
      margin-top: 14px;
      border-radius: 20px;
      border: 1px solid rgba(35,40,38,.14);
      background:
        radial-gradient(1000px 320px at 80% 0%, rgba(47,91,70,.14), transparent 55%),
        linear-gradient(180deg, rgba(247,242,232,.94), rgba(243,239,230,.94));
      box-shadow: var(--shadow-low);
      overflow:hidden;
    }
    .related .head{
      padding: 12px 14px;
      border-bottom: 1px solid rgba(35,40,38,.10);
      background: linear-gradient(90deg, rgba(196,106,42,.16), transparent 55%);
    }
    .related .head strong{
      font-family: var(--font-condensed);
      font-weight: 900;
      letter-spacing:.02em;
      text-transform: uppercase;
      font-size: 14px;
    }
    .related-grid{
      padding: 12px;
      display:grid;
      gap: 10px;
      grid-template-columns: 1fr;
    }
    .rel{
      border-radius: 18px;
      border: 1px solid rgba(35,40,38,.14);
      background: rgba(255,255,255,.55);
      box-shadow: 0 10px 22px rgba(15,18,17,.07);
      overflow:hidden;
      transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
    }
    .rel:hover{
      transform: translateY(-2px);
      border-color: rgba(196,106,42,.30);
      box-shadow: 0 16px 34px rgba(15,18,17,.12);
    }
    .rel a{
      text-decoration:none;
      color: inherit;
      display:grid;
      grid-template-columns: 120px 1fr;
      gap: 12px;
      align-items: stretch;
    }
    .rel .img{
      position:relative;
      background: rgba(21,26,25,.06);
      min-height: 90px;
    }
    .rel .img img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
      filter: saturate(.9) contrast(1.05);
    }
    .rel .img:after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(21,26,25,.08), rgba(21,26,25,.30));
      mix-blend-mode: multiply;
      opacity:.85;
      pointer-events:none;
    }
    .rel .txt{
      padding: 10px 12px 12px 0;
      display:grid;
      gap: 6px;
    }
    .rel .txt strong{
      font-weight: 920;
      line-height:1.2;
      font-size: 15px;
    }
    .rel .txt span{
      color: var(--muted);
      font-size: 13.5px;
    }

    /* Contacts block */
    .contacts{
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 16px 26px;
    }
    .contacts-shell{
      border-radius: 20px;
      border: 1px solid rgba(35,40,38,.14);
      background:
        radial-gradient(1000px 360px at 20% 0%, rgba(47,91,70,.14), transparent 55%),
        radial-gradient(900px 340px at 80% 0%, rgba(196,106,42,.14), transparent 55%),
        linear-gradient(180deg, rgba(247,242,232,.94), rgba(243,239,230,.94));
      box-shadow: var(--shadow-low);
      overflow:hidden;
    }
    .contacts-head{
      padding: 14px 16px;
      border-bottom: 1px solid rgba(35,40,38,.10);
      background: linear-gradient(90deg, rgba(47,91,70,.16), transparent 55%);
    }
    .contacts-head h2{
      margin:0;
      font-family: var(--font-condensed);
      font-weight: 900;
      letter-spacing:.02em;
      text-transform: uppercase;
      font-size: 14px;
    }
    .contacts-inner{
      padding: 12px 16px 16px;
      display:grid;
      gap: 12px;
      grid-template-columns: 1fr;
    }
    .map{
      border-radius: 18px;
      border: 1px solid rgba(35,40,38,.14);
      overflow:hidden;
      background: rgba(255,255,255,.55);
      box-shadow: 0 10px 22px rgba(15,18,17,.07);
      aspect-ratio: 16/9;
    }
    .map iframe{
      width:100%;
      height:100%;
      border:0;
      filter: saturate(.9) contrast(1.05);
    }
    address{
      font-style: normal;
      border-radius: 18px;
      border: 1px solid rgba(35,40,38,.14);
      background: rgba(255,255,255,.55);
      box-shadow: 0 10px 22px rgba(15,18,17,.07);
      padding: 12px 14px;
      color: var(--muted);
    }
    address strong{ color: var(--ink); display:block; margin-bottom: 6px; }
    .contact-prop{
      border-radius: 18px;
      border: 1px dashed rgba(35,40,38,.22);
      background: rgba(247,242,232,.62);
      padding: 12px 14px;
      color: var(--muted);
    }
    .contact-prop b{ color: var(--ink); }
    .contacts form{
      border-radius: 18px;
      border: 1px solid rgba(35,40,38,.14);
      background: rgba(255,255,255,.55);
      box-shadow: 0 10px 22px rgba(15,18,17,.07);
      padding: 12px 14px 14px;
      display:grid;
      gap: 10px;
    }

    /* Aside promos */
    aside{
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 16px 26px;
      display:grid;
      gap: 12px;
    }
    .promo{
      border-radius: 18px;
      border: 1px solid rgba(35,40,38,.14);
      background: rgba(255,255,255,.52);
      box-shadow: 0 10px 22px rgba(15,18,17,.07);
      padding: 12px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
    }
    .promo:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(15,18,17,.12);
      border-color: rgba(47,91,70,.26);
    }
    .promo strong{
      font-family: var(--font-condensed);
      font-weight: 920;
      letter-spacing:.02em;
      text-transform: uppercase;
      font-size: 13px;
    }
    .promo span{
      color: var(--muted);
      font-size: 13.5px;
      display:block;
      margin-top: 4px;
      max-width: 70ch;
    }
    .promo a{
      text-decoration:none;
      border-radius: 14px;
      padding: 10px 12px;
      border: 1px solid rgba(35,40,38,.14);
      background: rgba(247,242,232,.70);
      font-weight: 850;
      box-shadow: 0 10px 22px rgba(15,18,17,.06);
      transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed), background var(--speed);
      white-space:nowrap;
      color: var(--ink);
    }
    .promo a:hover{
      transform: translateY(-1px);
      border-color: rgba(196,106,42,.35);
      background: rgba(255,255,255,.60);
      text-decoration: underline;
    }

    /* Footer */
    footer{
      background:
        radial-gradient(900px 380px at 20% 0%, rgba(196,106,42,.12), transparent 60%),
        radial-gradient(900px 360px at 80% 0%, rgba(47,91,70,.14), transparent 60%),
        repeating-linear-gradient(0deg, rgba(231,220,199,.05) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(90deg, rgba(231,220,199,.04) 0 1px, transparent 1px 18px),
        linear-gradient(180deg, rgba(21,26,25,.92), rgba(21,26,25,.98));
      color: rgba(247,242,232,.92);
      border-top: 1px solid rgba(231,220,199,.16);
      padding: 22px 0 26px;
      margin-top: 10px;
      position:relative;
    }
    .footer-inner{
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 16px;
      display:grid;
      gap: 14px;
    }
    .emergency-strip{
      border-radius: 18px;
      border: 1px solid rgba(231,220,199,.18);
      background: rgba(0,0,0,.22);
      padding: 12px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .emergency-strip strong{
      font-family: var(--font-condensed);
      letter-spacing:.02em;
      text-transform: uppercase;
      font-size: 13px;
    }
    .emergency-strip .num{
      font-variant-numeric: tabular-nums;
      font-weight: 920;
      padding: 8px 10px;
      border-radius: 14px;
      border: 1px solid rgba(231,220,199,.18);
      background: rgba(184,51,43,.22);
    }
    .footer-grid{
      display:grid;
      gap: 12px;
      grid-template-columns: 1fr;
      align-items:start;
    }
    .footer-card{
      border-radius: 18px;
      border: 1px solid rgba(231,220,199,.16);
      background: rgba(0,0,0,.22);
      padding: 12px 14px;
    }
    .footer-card h2{
      margin:0;
      font-family: var(--font-condensed);
      font-weight: 920;
      letter-spacing:.02em;
      text-transform: uppercase;
      font-size: 13px;
    }
    .footer-card p{
      margin: 8px 0 0;
      color: rgba(247,242,232,.80);
      font-size: 13.5px;
    }
    .social{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .social a{
      color: rgba(247,242,232,.92);
      text-decoration: underline;
      text-underline-offset: .2em;
      border-radius: 12px;
      padding: 8px 10px;
      border: 1px solid rgba(231,220,199,.16);
      background: rgba(0,0,0,.18);
      transition: transform var(--speed), background var(--speed), border-color var(--speed);
    }
    .social a:hover{
      transform: translateY(-1px);
      background: rgba(47,91,70,.20);
      border-color: rgba(231,220,199,.24);
    }
    .copy{
      color: rgba(247,242,232,.72);
      font-size: 12.5px;
      border-top: 1px solid rgba(231,220,199,.14);
      padding-top: 12px;
    }

    /* Tablet */
    @media (min-width: 768px){
      .hero{ padding-top: 22px; padding-bottom: 26px; }
      .hero-inner{ padding: 20px; }
      .hero-metrics{ grid-template-columns: 1fr 1fr 1fr 1fr; }
      .slide{ min-height: 420px; }

      .grid{ grid-template-columns: 1fr 1fr; }
      .blog a{ grid-template-columns: 140px 1fr; }
      .blog ul{ grid-template-columns: 1fr 1fr; }

      .related-grid{ grid-template-columns: 1fr 1fr; }
      .contacts-inner{ grid-template-columns: 1.1fr .9fr; }
      .contacts form{ grid-column: 1 / -1; }

      .footer-grid{ grid-template-columns: 1.2fr .8fr; }
      .form-grid{ grid-template-columns: 1fr 1fr; }
      .field.full{ grid-column: 1 / -1; }
    }

    /* Desktop */
    @media (min-width: 1200px){
      .burger{ display:none; }
      nav ul{
        display:flex !important;
        position: static;
        width:auto;
        background: transparent;
        border:0;
        box-shadow:none;
        border-radius: 0;
        overflow: visible;
        gap: 6px;
      }
      nav ul li a{
        border: 1px solid rgba(35,40,38,.14);
        border-radius: 14px;
        background: rgba(247,242,232,.72);
        padding: 10px 12px;
      }
      nav ul li a:after{ content:""; }
      .topbar{ padding: 14px 16px; }

      .hero{
        grid-template-columns: 1.05fr .95fr;
        align-items: stretch;
        gap: 16px;
      }
      .hero-shell{ grid-column: 1 / -1; }
      .hero-inner{
        grid-template-columns: 1.05fr .95fr;
        align-items: start;
        gap: 16px;
      }

      .grid{ grid-template-columns: repeat(3, 1fr); }
      .blog ul{ grid-template-columns: repeat(3, 1fr); }
      .related-grid{ grid-template-columns: repeat(3, 1fr); }

      aside{
        grid-template-columns: 1fr 1fr;
      }
    }