/* ==========================================================================
   Helvardo — Ink & Paper Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root{
  
  --paper: #F6F1E7;
  --paper-2: #EFE6D5;
  --paper-3: #E6DBC3;
  --ink: #221E19;
  --ink-2: #574C3F;
  --ink-3: #8C816F;
  --line: #DCD0B7;
  --line-strong: #C7B896;

  
  --accent: #8C3B2E;
  --accent-dark: #6C2C21;
  --accent-tint: #F0DDD6;

  
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;
  --sp-10: 9rem;

  
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;
  --r-xl: 34px;
  --r-pill: 999px;

  
  --sh-sm: 0 1px 2px rgba(34,30,25,.07), 0 1px 1px rgba(34,30,25,.04);
  --sh-md: 0 6px 14px rgba(34,30,25,.09), 0 2px 5px rgba(34,30,25,.06);
  --sh-lg: 0 24px 48px -16px rgba(34,30,25,.22), 0 10px 20px -10px rgba(34,30,25,.14);
  --sh-xl: 0 34px 70px -22px rgba(34,30,25,.28), 0 14px 28px -10px rgba(34,30,25,.16);

  --ff: 'Instrument Sans', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--ff);
  background:var(--paper);
  color:var(--ink-2);
  line-height:1.7;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--ff); color:var(--ink); margin:0 0 var(--sp-4); font-weight:700; letter-spacing:-.01em; line-height:1.15; }
p{ margin:0 0 var(--sp-4); }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:var(--ff); cursor:pointer; }
input,textarea,select{ font-family:var(--ff); }

.wrap{ max-width:1200px; margin:0 auto; padding:0 var(--sp-6); position:relative; z-index:1; }

h1{ font-size:clamp(2.4rem, 1.9rem + 2.6vw, 4.3rem); }
h2{ font-size:clamp(1.9rem, 1.55rem + 1.8vw, 3.1rem); }
h3{ font-size:clamp(1.3rem, 1.15rem + .8vw, 1.7rem); }

.eyebrow, .tag{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.78rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--accent-dark);
}
.tag{
  padding:.5rem 1rem;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  background:var(--paper);
  box-shadow:var(--sh-sm);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.95rem 1.9rem;
  border-radius:var(--r-pill);
  font-weight:600;
  font-size:.98rem;
  border:1.5px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  min-height:48px;
  white-space:nowrap;
}
.btn-pri{
  background:var(--ink);
  color:var(--paper);
  box-shadow:var(--sh-md);
}
.btn-pri:hover{ background:var(--accent-dark); transform:translateY(-2px); box-shadow:var(--sh-lg); }
.btn-gho{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-strong);
}
.btn-gho:hover{ border-color:var(--ink); background:var(--paper-3); transform:translateY(-2px); }
.btn-sm{ padding:.7rem 1.4rem; font-size:.88rem; min-height:40px; }

/* ==========================================================================
   Cookie Bar (inline, above nav, in document flow)
   ========================================================================== */
.cok-bar{
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
  transition:max-height .45s ease, opacity .35s ease, padding .45s ease;
}
.cok-bar.cok-hidden{ display:none; }
.cok-in{
  max-width:1200px;
  margin:0 auto;
  padding:.7rem var(--sp-6);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
}
.cok-txt{ margin:0; font-size:.86rem; color:#EADFCB; flex:1 1 320px; }
.cok-txt a{ color:var(--paper); text-decoration:underline; text-underline-offset:2px; }
.cok-actions{ display:flex; gap:.6rem; flex-shrink:0; }
.cok-btn{
  border-radius:var(--r-pill);
  padding:.5rem 1.1rem;
  font-size:.82rem;
  font-weight:600;
  border:1.5px solid rgba(246,241,231,.4);
  background:transparent;
  color:var(--paper);
  transition:background .25s ease, border-color .25s ease, transform .2s ease;
  min-height:38px;
}
.cok-btn-solid{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.cok-btn:hover{ transform:translateY(-1px); }
.cok-btn-solid:hover{ background:var(--accent-tint); }
.cok-btn-ghost:hover{ border-color:var(--paper); }

/* ==========================================================================
   Header
   ========================================================================== */
.hdr{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(246,241,231,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(220,208,183,.6);
  transition:background .4s ease, box-shadow .4s ease;
}
.hdr-in{
  max-width:1280px;
  margin:0 auto;
  padding:var(--sp-6) var(--sp-6);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-5);
  transition:padding .4s ease;
}
.hdr.hdr-cmp{ background:rgba(246,241,231,.94); box-shadow:var(--sh-sm); }
.hdr.hdr-cmp .hdr-in{ padding-top:.85rem; padding-bottom:.85rem; }
.hdr-logo{ display:flex; align-items:center; gap:.65rem; flex-shrink:0; }
.hdr-logo-img{ width:44px; height:44px; transition:width .4s ease, height .4s ease; }
.hdr.hdr-cmp .hdr-logo-img{ width:34px; height:34px; }
.hdr-logo-txt{ font-weight:700; font-size:1.2rem; color:var(--ink); letter-spacing:-.01em; transition:font-size .4s ease; }
.hdr.hdr-cmp .hdr-logo-txt{ font-size:1.05rem; }
.hdr-nav{ display:flex; align-items:center; gap:var(--sp-6); }
.hdr-nav a{
  font-size:.95rem;
  font-weight:500;
  color:var(--ink-2);
  position:relative;
  padding:.3rem 0;
  transition:color .25s ease;
}
.hdr-nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:1.5px;
  background:var(--accent);
  transition:width .3s ease;
}
.hdr-nav a:hover{ color:var(--ink); }
.hdr-nav a:hover::after, .hdr-nav a.is-active::after{ width:100%; }
.hdr-nav a.is-active{ color:var(--ink); }
.hdr-right{ display:flex; align-items:center; gap:var(--sp-5); }
.hdr-burger{
  display:none;
  width:46px; height:46px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  background:var(--paper);
  align-items:center; justify-content:center;
  flex-direction:column;
  gap:5px;
  transition:background .25s ease;
}
.hdr-burger span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; }
.hdr-burger:hover{ background:var(--paper-3); }

.mob-overlay{
  position:fixed; inset:0;
  background:rgba(34,30,25,.55);
  opacity:0; pointer-events:none;
  transition:opacity .4s ease;
  z-index:150;
}
.mob-overlay.is-open{ opacity:1; pointer-events:auto; }
.mob-menu{
  position:fixed;
  top:0; right:0;
  height:100vh;
  width:min(86vw, 400px);
  background:var(--paper);
  box-shadow:var(--sh-xl);
  transform:translateX(100%);
  transition:transform .5s cubic-bezier(.16,.84,.44,1);
  z-index:200;
  display:flex;
  flex-direction:column;
  padding:var(--sp-6);
}
.mob-menu.is-open{ transform:translateX(0); }
.mob-menu-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-8); }
.mob-menu-logo{ font-weight:700; font-size:1.15rem; }
.mob-close{
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:transparent;
  font-size:1.4rem;
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, transform .3s ease;
}
.mob-close:hover{ background:var(--paper-3); transform:rotate(90deg); }
.mob-nav{ display:flex; flex-direction:column; gap:var(--sp-6); }
.mob-nav a{
  font-size:1.5rem;
  font-weight:600;
  color:var(--ink);
  padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--line);
}
.mob-menu-cta{ margin-top:auto; }
.mob-menu-cta .btn{ width:100%; }

/* ==========================================================================
   Sections
   ========================================================================== */
.sec{ padding:var(--sp-9) 0; position:relative; z-index:1; }
.sec-alt{ background:var(--paper-2); }
.sec-tight{ padding:var(--sp-8) 0; }
.sec-head{ max-width:680px; margin:0 auto var(--sp-8); text-align:center; }
.sec-head.is-left{ margin:0 0 var(--sp-8); text-align:left; }
.sec-title{ margin-top:var(--sp-3); }
.sec-lead{ font-size:1.1rem; color:var(--ink-2); }

.rev{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.rev.is-vis{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  padding:var(--sp-9) 0 var(--sp-9);
  overflow:hidden;
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.hero-shape{
  position:absolute;
  border-radius:50%;
  z-index:0;
  filter:blur(2px);
}
.hero-shape-a{
  width:460px; height:460px;
  top:-160px; right:-120px;
  background:radial-gradient(circle at 30% 30%, var(--accent-tint), transparent 70%);
}
.hero-shape-b{
  width:280px; height:280px;
  bottom:-100px; left:-80px;
  background:radial-gradient(circle at 60% 40%, var(--paper-3), transparent 70%);
}
.hero-in{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--sp-6);
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:var(--sp-8);
  align-items:center;
}
.hero-txt .tag{ margin-bottom:var(--sp-5); }
.hero-ttl{ margin-bottom:var(--sp-5); }
.hero-ttl em{ font-style:italic; color:var(--accent-dark); }
.hero-lead{ font-size:1.15rem; max-width:52ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--sp-4); margin:var(--sp-6) 0 var(--sp-6); }
.hero-facts{ display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6); }
.hero-facts li{ display:flex; align-items:center; gap:.55rem; font-size:.92rem; color:var(--ink-2); }
.hero-facts i{ color:var(--accent); }

.hero-media{ position:relative; }
.hero-card{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--sh-xl);
  border:6px solid var(--paper);
  background:var(--paper);
  transform:rotate(2deg);
}
.hero-card img{ width:100%; height:420px; object-fit:cover; }
.hero-card-note{
  position:absolute;
  left:var(--sp-4); bottom:var(--sp-4);
  background:var(--paper);
  color:var(--ink);
  padding:.6rem 1rem;
  border-radius:var(--r-md);
  font-size:.82rem;
  font-weight:600;
  box-shadow:var(--sh-md);
  display:flex; align-items:center; gap:.5rem;
  transform:rotate(-2deg);
}
.hero-card-note i{ color:var(--accent); }

/* ==========================================================================
   Badges / Certifications
   ========================================================================== */
.bdg-grid{
  container-type:inline-size;
  container-name:bdggrid;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:var(--sp-5);
}
.bdg{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  box-shadow:var(--sh-sm);
  transition:box-shadow .3s ease, transform .3s ease;
}
.bdg:hover{ box-shadow:var(--sh-md); transform:translateY(-4px); }
.bdg-ico{
  width:52px; height:52px;
  border-radius:var(--r-md);
  background:var(--accent-tint);
  color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
}
.bdg h4{ margin-bottom:.25rem; font-size:1.05rem; }
.bdg p{ margin:0; font-size:.9rem; color:var(--ink-2); }

/* ==========================================================================
   Cards (container-query driven)
   ========================================================================== */
.crd-grid{
  container-type:inline-size;
  container-name:crdgrid;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:var(--sp-6);
}
.crd{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  box-shadow:var(--sh-sm);
  transition:box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.crd:hover{ box-shadow:var(--sh-lg); transform:translateY(-6px); border-color:var(--line-strong); }
.crd-ico{
  width:56px; height:56px;
  border-radius:var(--r-md);
  background:var(--ink);
  color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  flex-shrink:0;
}
.crd-ttl{ font-size:1.2rem; margin-bottom:.2rem; }
.crd-txt{ font-size:.94rem; color:var(--ink-2); margin:0; }
.crd-num{ font-family:var(--ff); font-size:.8rem; font-weight:700; color:var(--accent); letter-spacing:.05em; }

@container crdgrid (min-width: 760px){
  .crd.crd-wide{ flex-direction:row; align-items:flex-start; text-align:left; }
  .crd.crd-wide .crd-ico{ margin-bottom:0; }
}

/* ==========================================================================
   Steps / Flow (invisible boundary sections share these)
   ========================================================================== */
.stp-grid{
  container-type:inline-size;
  container-name:stpgrid;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:var(--sp-6);
  counter-reset:stp;
}
.stp{
  position:relative;
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  border-left:2px solid var(--line-strong);
}
.stp::before{
  counter-increment:stp;
  content:counter(stp,decimal-leading-zero);
  font-size:.85rem;
  font-weight:700;
  color:var(--accent);
  letter-spacing:.06em;
  display:block;
  margin-bottom:var(--sp-3);
}
.stp h4{ font-size:1.1rem; margin-bottom:.4rem; }
.stp p{ font-size:.92rem; color:var(--ink-2); margin:0; }

/* ==========================================================================
   Feature split rows (themenbereiche)
   ========================================================================== */
.spl{
  container-type:inline-size;
  container-name:splwrap;
}
.spl-row{
  display:flex;
  flex-direction:column;
  gap:var(--sp-6);
  padding:var(--sp-8) 0;
  border-top:1px solid var(--line);
}
.spl-row:first-child{ border-top:none; }
.spl-row.is-rev{ }
.spl-txt{ flex:1; }
.spl-media{ flex:1; }
.spl-media img{
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  width:100%;
  height:340px;
  object-fit:cover;
}
.spl-num{ font-size:.85rem; font-weight:700; color:var(--accent); letter-spacing:.08em; margin-bottom:var(--sp-3); display:block; }
.spl-list{ margin-top:var(--sp-5); display:flex; flex-direction:column; gap:.65rem; }
.spl-list li{ display:flex; gap:.6rem; font-size:.94rem; color:var(--ink-2); }
.spl-list i{ color:var(--accent); margin-top:.25rem; flex-shrink:0; }

@container splwrap (min-width: 820px){
  .spl-row{ flex-direction:row; align-items:center; gap:var(--sp-8); }
  .spl-row.is-rev{ flex-direction:row-reverse; }
}

/* ==========================================================================
   Roadmap timeline
   ========================================================================== */
.rm{ position:relative; padding-left:var(--sp-6); }
.rm::before{ content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px; background:var(--line-strong); }
.rm-item{ position:relative; padding-bottom:var(--sp-7); }
.rm-item:last-child{ padding-bottom:0; }
.rm-dot{
  position:absolute; left:-30px; top:2px;
  width:14px; height:14px; border-radius:50%;
  background:var(--paper); border:2.5px solid var(--accent);
}
.rm-item.is-done .rm-dot{ background:var(--accent); }
.rm-tag{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-bottom:.3rem; display:block; }
.rm-item.is-done .rm-tag{ color:var(--accent-dark); }
.rm h4{ font-size:1.15rem; margin-bottom:.4rem; }
.rm p{ font-size:.95rem; color:var(--ink-2); margin:0; max-width:60ch; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.fq{ display:flex; flex-direction:column; gap:var(--sp-3); max-width:760px; margin:0 auto; }
.fq-item{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); overflow:hidden; }
.fq-q{
  width:100%; text-align:left;
  background:none; border:none;
  padding:var(--sp-5);
  font-size:1rem; font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
}
.fq-q i{ transition:transform .3s ease; color:var(--accent); flex-shrink:0; }
.fq-item.is-open .fq-q i{ transform:rotate(45deg); }
.fq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease, padding .4s ease; padding:0 var(--sp-5); }
.fq-item.is-open .fq-a{ max-height:220px; padding:0 var(--sp-5) var(--sp-5); }
.fq-a p{ margin:0; font-size:.92rem; color:var(--ink-2); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  background:var(--ink);
  color:var(--paper);
  border-radius:var(--r-xl);
  padding:var(--sp-8) var(--sp-7);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(140,59,46,.35), transparent 60%);
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ color:var(--paper); }
.cta-band p{ color:#D8CCB6; max-width:56ch; margin:0 auto var(--sp-6); }
.cta-band .btn-gho{ color:var(--paper); border-color:rgba(246,241,231,.4); }
.cta-band .btn-gho:hover{ background:rgba(246,241,231,.1); border-color:var(--paper); }
.cta-row{ display:flex; gap:var(--sp-4); justify-content:center; flex-wrap:wrap; }

/* ==========================================================================
   Image + text generic blocks
   ========================================================================== */
.imgtxt{
  container-type:inline-size;
  container-name:imgtxt;
  display:flex;
  flex-direction:column;
  gap:var(--sp-7);
  align-items:center;
}
.imgtxt-media img{ border-radius:var(--r-lg); box-shadow:var(--sh-lg); width:100%; height:380px; object-fit:cover; }
.imgtxt-txt{ max-width:640px; }
@container imgtxt (min-width: 780px){
  .imgtxt{ flex-direction:row; align-items:center; }
  .imgtxt-media, .imgtxt-txt{ flex:1; }
}

.persona-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:var(--sp-5);
}
.persona{
  padding:var(--sp-5);
  border-radius:var(--r-md);
  background:var(--paper);
  border:1px solid var(--line);
  display:flex;
  gap:var(--sp-4);
  align-items:flex-start;
}
.persona i{ color:var(--accent); font-size:1.3rem; margin-top:.2rem; }
.persona h4{ font-size:1rem; margin-bottom:.3rem; }
.persona p{ font-size:.88rem; margin:0; color:var(--ink-2); }

/* ==========================================================================
   Page header (inner pages)
   ========================================================================== */
.pgh{ padding:var(--sp-8) 0 var(--sp-7); background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.pgh .tag{ margin-bottom:var(--sp-4); }
.pgh h1{ max-width:16ch; }
.pgh p{ max-width:60ch; font-size:1.08rem; }

/* ==========================================================================
   Forms
   ========================================================================== */
.frm{ max-width:640px; }
.frm-row{ margin-bottom:var(--sp-5); }
.frm label{ display:block; font-size:.86rem; font-weight:600; color:var(--ink); margin-bottom:.45rem; }
.frm input[type=text], .frm input[type=email], .frm textarea, .frm input[type=tel]{
  width:100%;
  padding:.9rem 1.1rem;
  border-radius:var(--r-md);
  border:1.5px solid var(--line-strong);
  background:var(--paper);
  color:var(--ink);
  font-size:.98rem;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.frm input:focus, .frm textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-tint); }
.frm textarea{ min-height:150px; resize:vertical; }
.frm-check{ display:flex; align-items:flex-start; gap:.7rem; }
.frm-check input{ width:20px; height:20px; margin-top:.15rem; accent-color:var(--accent); flex-shrink:0; }
.frm-check label{ font-size:.88rem; font-weight:400; color:var(--ink-2); margin:0; }
.frm-check a{ color:var(--accent-dark); text-decoration:underline; }
.iti{ width:100%; }
#phone{ width:100%; }

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr{
  background:var(--paper-3);
  border-top:1px solid var(--line-strong);
  padding:var(--sp-9) 0 var(--sp-6);
  text-align:center;
  margin-top:auto;
}
.ftr-logo{ display:inline-flex; align-items:center; gap:.6rem; margin-bottom:var(--sp-4); }
.ftr-logo img{ width:38px; height:38px; }
.ftr-logo span{ font-weight:700; font-size:1.2rem; color:var(--ink); }
.ftr-tag{ max-width:44ch; margin:0 auto var(--sp-7); color:var(--ink-2); font-size:.96rem; }
.ftr-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-6); margin-bottom:var(--sp-7); }
.ftr-nav a{ font-size:.92rem; font-weight:500; color:var(--ink-2); transition:color .25s ease; }
.ftr-nav a:hover{ color:var(--accent-dark); }
.ftr-contact{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-6); margin-bottom:var(--sp-7); font-size:.92rem; color:var(--ink-2); }
.ftr-contact a{ color:var(--ink-2); }
.ftr-contact a:hover{ color:var(--accent-dark); }
.ftr-contact span{ display:inline-flex; align-items:center; gap:.5rem; }
.ftr-contact i{ color:var(--accent); }
.ftr-bottom{ border-top:1px solid var(--line-strong); padding-top:var(--sp-5); }
.ftr-legal{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-5); margin-bottom:var(--sp-3); }
.ftr-legal a{ font-size:.82rem; color:var(--ink-3); }
.ftr-legal a:hover{ color:var(--accent-dark); }
.ftr-copy{ font-size:.8rem; color:var(--ink-3); margin:0; }

html, body{ height:100%; }
.pg{ display:flex; flex-direction:column; min-height:100vh; }
.pg-main{ flex:1; }

/* ==========================================================================
   Legal pages
   ========================================================================== */
.lgl{ padding:var(--sp-8) 0 var(--sp-9); }
.lgl-in{ max-width:800px; margin:0 auto; }
.lgl h2{ font-size:1.5rem; margin-top:var(--sp-8); }
.lgl h2:first-of-type{ margin-top:0; }
.lgl h3{ font-size:1.15rem; margin-top:var(--sp-6); }
.lgl p, .lgl li{ font-size:.98rem; color:var(--ink-2); }
.lgl ul{ margin:0 0 var(--sp-4); padding-left:1.3rem; list-style:disc; }
.lgl-updated{ font-size:.85rem; color:var(--ink-3); margin-bottom:var(--sp-7); }
.tbl{ width:100%; border-collapse:collapse; margin:var(--sp-5) 0 var(--sp-6); font-size:.92rem; }
.tbl th, .tbl td{ text-align:left; padding:.75rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl th{ background:var(--paper-2); font-weight:600; color:var(--ink); width:38%; }
.tbl-alt tr:nth-child(even){ background:var(--paper-2); }

/* ==========================================================================
   Thanks page envelope
   ========================================================================== */
.thx{ padding:var(--sp-10) 0; text-align:center; }
.env-wrap{ perspective:900px; margin-bottom:var(--sp-8); }
.env{ position:relative; width:180px; height:120px; margin:0 auto; }
.env-body{
  position:absolute; inset:0;
  background:var(--paper-3);
  border:2px solid var(--ink);
  border-radius:10px;
  box-shadow:var(--sh-lg);
  z-index:1;
}
.env-letter{
  position:absolute;
  left:50%; top:32%;
  width:68%; height:64%;
  background:var(--paper);
  border:2px solid var(--line-strong);
  border-radius:6px;
  transform:translate(-50%, 10%);
  opacity:0;
  z-index:2;
  animation:letterUp 1s ease forwards 1s;
}
.env-letter::before, .env-letter::after{
  content:"";
  position:absolute; left:14%; right:14%;
  height:2px; background:var(--line);
}
.env-letter::before{ top:32%; }
.env-letter::after{ top:52%; }
.env-flap{
  position:absolute;
  top:0; left:0; width:100%; height:60%;
  background:var(--paper-2);
  border:2px solid var(--ink);
  border-bottom:none;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center;
  z-index:3;
  animation:flapOpen 1s ease forwards .35s;
}
@keyframes flapOpen{ from{ transform:rotateX(0deg); } to{ transform:rotateX(178deg); } }
@keyframes letterUp{ from{ transform:translate(-50%, 10%); opacity:0; } to{ transform:translate(-50%, -38%); opacity:1; } }
.thx h1{ opacity:0; animation:fadeUp .7s ease forwards 1.5s; }
.thx p{ opacity:0; animation:fadeUp .7s ease forwards 1.7s; max-width:52ch; margin-left:auto; margin-right:auto; }
.thx .btn{ opacity:0; animation:fadeUp .7s ease forwards 1.9s; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }

/* ==========================================================================
   Accessibility note (contact page)
   ========================================================================== */
.acc-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  display:flex;
  gap:var(--sp-5);
  align-items:flex-start;
  box-shadow:var(--sh-sm);
}
.acc-card i{ font-size:1.6rem; color:var(--accent); flex-shrink:0; margin-top:.2rem; }
.acc-card h4{ margin-bottom:.5rem; }
.acc-card p{ margin:0; font-size:.92rem; color:var(--ink-2); }

.map-frame{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); border:1px solid var(--line); }
.map-frame iframe{ width:100%; height:340px; border:0; display:block; }

.info-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  box-shadow:var(--sh-sm);
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}
.info-line{ display:flex; align-items:flex-start; gap:.8rem; font-size:.94rem; }
.info-line i{ color:var(--accent); margin-top:.2rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .hdr-nav, .hdr-cta{ display:none; }
  .hdr-burger{ display:flex; }
  .hero-in{ grid-template-columns:1fr; }
  .hero-card img{ height:320px; }
}
@media (max-width: 640px){
  .wrap{ padding:0 var(--sp-5); }
  .hdr-in{ padding:var(--sp-5); }
  .sec{ padding:var(--sp-8) 0; }
  .cta-band{ padding:var(--sp-7) var(--sp-5); }
  .env{ width:150px; height:100px; }
  .ftr-contact{ flex-direction:column; gap:var(--sp-3); }
}
@media (min-width: 641px){
  .hdr-cta{ display:inline-flex; }
}