/* ==========================================================================
   Hundeschule Freche Hummel — Design System
   Archetype: Editorial Luxury (warm paper, bordeaux, film grain)
   Brand colours taken from the original logo: #7A0029 / #181716
   ========================================================================== */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--bordeaux);outline-offset:3px;border-radius:4px}

/* ---------- 2. Tokens ---------- */
:root{
  /* paper */
  --paper:#F8F4ED;
  --paper-2:#F2EBE1;
  --paper-3:#E8DCCB;
  --paper-4:#DCCDB8;
  /* ink */
  --ink:#171512;
  --ink-2:#3B342C;
  --ink-3:#6E6357;
  --ink-4:#93887A;
  /* brand */
  --bordeaux:#7A0029;
  --bordeaux-2:#9C1140;
  --bordeaux-3:#4E0019;
  --moss:#4C5A3F;
  --moss-2:#6B7A58;
  /* lines */
  --line:rgba(23,21,18,.13);
  --line-soft:rgba(23,21,18,.07);
  --line-on-dark:rgba(248,244,237,.18);
  /* shadow — warm, never grey */
  --sh-1:0 1px 2px rgba(74,45,20,.05), 0 4px 12px rgba(74,45,20,.05);
  --sh-2:0 2px 6px rgba(74,45,20,.06), 0 14px 34px rgba(74,45,20,.09);
  --sh-3:0 6px 18px rgba(74,45,20,.09), 0 30px 70px rgba(74,45,20,.13);
  /* radii */
  --r-s:.7rem; --r-m:1.15rem; --r-l:1.75rem; --r-xl:2.25rem; --r-2xl:3rem;
  /* motion */
  --e-out:cubic-bezier(.23,1,.32,1);
  --e-io:cubic-bezier(.77,0,.175,1);
  --e-soft:cubic-bezier(.32,.72,0,1);
  /* rhythm */
  --pad:clamp(1.15rem,4.2vw,2.5rem);
  --maxw:78rem;
  --sec:clamp(5.5rem,12vw,10rem);
}

/* ---------- 3. Base ---------- */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Figtree",system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.68;
  font-weight:380;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

/* film grain — fixed layer, never on scrolling content */
body::after{
  content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.042;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-wide{max-width:92rem}
.wrap-slim{max-width:56rem}

/* ---------- 4. Typography ---------- */
.display,h1,h2,h3{
  font-family:"Fraunces",Georgia,serif;
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.028em;
  font-variation-settings:"SOFT" 26,"WONK" 1;
  text-wrap:balance;
}
h1,.t-hero{font-size:clamp(2.9rem,1.35rem + 6.2vw,6.1rem)}
h2,.t-sec{font-size:clamp(2.2rem,1.2rem + 3.9vw,4.15rem)}
h3,.t-card{font-size:clamp(1.28rem,1.1rem + .7vw,1.72rem);line-height:1.12;letter-spacing:-.022em}
.t-sm{font-size:clamp(1.08rem,1rem + .35vw,1.3rem);line-height:1.2}

.accent{color:var(--bordeaux);font-style:italic;font-variation-settings:"SOFT" 60,"WONK" 1}

.lead{
  font-size:clamp(1.06rem,1rem + .42vw,1.3rem);
  line-height:1.62;color:var(--ink-2);max-width:46ch;font-weight:370;
  text-wrap:pretty;
}
.muted{color:var(--ink-3)}
p+p{margin-top:1.1em}

/* eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.685rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;color:var(--bordeaux);
  padding:.44rem .95rem .44rem .8rem;
  border:1px solid rgba(122,0,41,.22);
  border-radius:999px;background:rgba(122,0,41,.045);
  font-family:"Figtree",sans-serif;
}
.eyebrow::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--bordeaux);flex:none;
}
.eyebrow.on-dark{color:var(--paper-3);border-color:var(--line-on-dark);background:rgba(248,244,237,.07)}
.eyebrow.on-dark::before{background:var(--paper-3)}

/* index numeral */
.idx{
  font-family:"Fraunces",serif;font-size:.78rem;font-weight:600;
  letter-spacing:.06em;color:var(--bordeaux);
  font-variant-numeric:tabular-nums;
}

/* ---------- 5. Buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--paper); --ring:transparent;
  position:relative;display:inline-flex;align-items:center;gap:.85rem;
  padding:.62rem .62rem .62rem 1.5rem;border-radius:999px;
  background:var(--bg);color:var(--fg);
  font-size:.93rem;font-weight:550;letter-spacing:-.008em;
  box-shadow:inset 0 0 0 1px var(--ring), var(--sh-1);
  transition:transform 200ms var(--e-out), background-color 260ms var(--e-out),
             box-shadow 260ms var(--e-out), color 260ms var(--e-out);
  will-change:transform;
}
.btn__ico{
  width:2.15rem;height:2.15rem;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(248,244,237,.14);
  transition:transform 320ms var(--e-out), background-color 260ms var(--e-out);
}
.btn__ico svg{width:.92rem;height:.92rem;stroke:currentColor;stroke-width:1.7;fill:none}
.btn:active{transform:scale(.972)}

.btn--primary{--bg:var(--bordeaux);--fg:var(--paper)}
.btn--dark{--bg:var(--ink);--fg:var(--paper)}
.btn--ghost{
  --bg:transparent;--fg:var(--ink);--ring:var(--line);
  box-shadow:inset 0 0 0 1px var(--line);
}
.btn--ghost .btn__ico{background:rgba(23,21,18,.06)}
.btn--light{--bg:var(--paper);--fg:var(--ink)}
.btn--light .btn__ico{background:rgba(23,21,18,.07)}
.btn--onDark{--bg:transparent;--fg:var(--paper);box-shadow:inset 0 0 0 1px var(--line-on-dark)}

@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background:var(--bordeaux-2);box-shadow:var(--sh-2)}
  .btn--dark:hover{background:var(--bordeaux);box-shadow:var(--sh-2)}
  .btn--ghost:hover{background:rgba(23,21,18,.045);box-shadow:inset 0 0 0 1px rgba(23,21,18,.2)}
  .btn--light:hover{background:#fff;box-shadow:var(--sh-2)}
  .btn--onDark:hover{background:rgba(248,244,237,.1)}
  .btn:hover .btn__ico{transform:translate(3px,-2px) scale(1.06)}
  .btn--ghost:hover .btn__ico,.btn--light:hover .btn__ico{background:rgba(23,21,18,.11)}
}

/* text link with draw-in rule */
.tlink{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  font-weight:550;font-size:.95rem;color:var(--ink);padding-bottom:2px;
}
.tlink::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform 380ms var(--e-out);
}
.tlink svg{width:.85rem;height:.85rem;stroke:currentColor;stroke-width:1.8;fill:none;
  transition:transform 320ms var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .tlink:hover::after{transform:scaleX(1)}
  .tlink:hover svg{transform:translateX(4px)}
}
.tlink--brand{color:var(--bordeaux)}

/* ---------- 6. Header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:70;
  padding:clamp(.85rem,2vw,1.4rem) 0;
  transition:padding 420ms var(--e-out);
}
.hdr__inner{
  width:min(var(--maxw) + 4rem, calc(100% - 2 * var(--pad)));
  margin-inline:auto;display:flex;align-items:center;gap:1.25rem;
  padding:.55rem .65rem .55rem 1.05rem;border-radius:999px;
  background:transparent;box-shadow:inset 0 0 0 1px transparent;
  transition:background-color 420ms var(--e-out), box-shadow 420ms var(--e-out),
             backdrop-filter 420ms var(--e-out), width 420ms var(--e-out);
}
.hdr.is-stuck{padding-top:.7rem;padding-bottom:.7rem}
.hdr.is-stuck .hdr__inner{
  width:min(var(--maxw), calc(100% - 2 * var(--pad)));
  background:rgba(248,244,237,.82);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 0 0 1px rgba(23,21,18,.09), 0 10px 34px rgba(74,45,20,.09);
}
.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand__mark{
  width:auto;height:2.85rem;
  transition:height 420ms var(--e-out), transform 420ms var(--e-out);
}
.hdr.is-stuck .brand__mark{height:2.3rem}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.brand__name{
  font-family:"Fraunces",serif;font-size:1.02rem;font-weight:600;
  letter-spacing:-.02em;color:var(--ink);font-variation-settings:"SOFT" 30,"WONK" 1;
}
.brand__sub{font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink-4);font-weight:600;margin-top:.16rem}
@media (hover:hover) and (pointer:fine){
  .brand:hover .brand__mark{transform:rotate(-3deg) scale(1.04)}
}

.nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav a{
  position:relative;padding:.5rem .78rem;border-radius:999px;
  font-size:.875rem;font-weight:480;color:var(--ink-2);
  transition:color 240ms var(--e-out), background-color 240ms var(--e-out);
}
.nav a::after{
  content:"";position:absolute;left:.78rem;right:.78rem;bottom:.3rem;height:1.5px;
  background:var(--bordeaux);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 360ms var(--e-out);
}
@media (hover:hover) and (pointer:fine){
  .nav a:hover{color:var(--ink)}
  .nav a:hover::after{transform:scaleX(1)}
}
.nav a[aria-current="page"]{color:var(--bordeaux);font-weight:600}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr .btn{flex:none;padding:.5rem .5rem .5rem 1.15rem;font-size:.87rem}
.hdr .btn__ico{width:1.9rem;height:1.9rem}

/* burger */
.burger{
  display:none;width:2.85rem;height:2.85rem;border-radius:50%;flex:none;
  margin-left:auto;place-items:center;
  box-shadow:inset 0 0 0 1px var(--line);background:rgba(248,244,237,.6);
  transition:background-color 240ms var(--e-out)}
.burger span{
  display:block;width:1.05rem;height:1.5px;border-radius:2px;background:var(--ink);
  transition:transform 380ms var(--e-soft), opacity 200ms var(--e-out)}
.burger span+span{margin-top:.31rem}
body.is-menu .burger span:nth-child(1){transform:translateY(.46rem) rotate(45deg)}
body.is-menu .burger span:nth-child(2){opacity:0;transform:scaleX(.3)}
body.is-menu .burger span:nth-child(3){transform:translateY(-.46rem) rotate(-45deg)}

/* mobile overlay */
.menu{
  position:fixed;inset:0;z-index:65;display:flex;flex-direction:column;
  justify-content:center;padding:6.5rem var(--pad) 2.5rem;
  background:rgba(248,244,237,.94);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  opacity:0;visibility:hidden;transform:scale(1.015);
  transition:opacity 420ms var(--e-out), transform 420ms var(--e-out), visibility 0s 420ms;
}
body.is-menu .menu{opacity:1;visibility:visible;transform:scale(1);transition-delay:0s}
.menu a{
  display:flex;align-items:baseline;gap:1rem;
  font-family:"Fraunces",serif;font-size:clamp(2rem,9vw,2.9rem);font-weight:500;
  letter-spacing:-.03em;line-height:1;padding:.42rem 0;
  border-bottom:1px solid var(--line-soft);
  font-variation-settings:"SOFT" 26,"WONK" 1;
  opacity:0;transform:translateY(1.5rem);
}
.menu a .idx{font-size:.7rem;opacity:.55}
body.is-menu .menu a{
  animation:menuIn 620ms var(--e-out) forwards;
  animation-delay:calc(80ms + var(--i) * 55ms);
}
@keyframes menuIn{to{opacity:1;transform:translateY(0)}}
.menu__foot{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.7rem}

@media (max-width:1080px){
  .nav,.hdr .btn{display:none}
  .burger{display:grid}
  .hdr__inner{background:rgba(248,244,237,.8);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    box-shadow:inset 0 0 0 1px rgba(23,21,18,.08)}
}

/* ---------- 7. Hero ---------- */
.hero{position:relative;padding:clamp(8.5rem,17vw,12rem) 0 clamp(3.5rem,7vw,5.5rem);overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-22%;right:-14%;width:min(58rem,86vw);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, rgba(122,0,41,.10), rgba(122,0,41,0) 62%);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;bottom:-30%;left:-18%;width:min(46rem,80vw);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, rgba(76,90,63,.11), rgba(76,90,63,0) 64%);
  pointer-events:none;
}
.hero__grid{
  position:relative;display:grid;gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;
}
.hero__copy>*+*{margin-top:1.6rem}
.hero h1{margin-top:1.4rem}
.hero h1 .line{display:block}
@media (min-width:901px){.hero h1 .line{white-space:nowrap}}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;padding-top:.5rem}

/* hero media — double bezel */
.shell{
  position:relative;padding:.5rem;border-radius:var(--r-2xl);
  background:linear-gradient(150deg, rgba(255,255,255,.85), rgba(232,220,203,.5));
  box-shadow:inset 0 0 0 1px rgba(23,21,18,.07), var(--sh-3);
}
.shell__core{
  position:relative;overflow:hidden;border-radius:calc(var(--r-2xl) - .5rem);
  background:var(--paper-3);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5);
}
.shell__core img{width:100%;height:100%;object-fit:cover;
  transition:transform 900ms var(--e-out), filter 900ms var(--e-out)}
.hero__media{position:relative}
.hero__media .shell__core{aspect-ratio:4/4.6}
@media (hover:hover) and (pointer:fine){
  .hero__media:hover .shell__core img{transform:scale(1.045)}
}
/* floating badge */
.badge-float{
  position:absolute;left:-2.6rem;bottom:1.7rem;z-index:2;
  padding:.4rem;border-radius:var(--r-l);
  background:rgba(248,244,237,.72);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(23,21,18,.08), var(--sh-2);
}
.badge-float__core{
  padding:.95rem 1.35rem;border-radius:calc(var(--r-l) - .4rem);
  background:var(--paper);box-shadow:inset 0 1px 1px rgba(255,255,255,.7);
  text-align:left;
}
.badge-float b{
  display:block;font-family:"Fraunces",serif;font-size:2rem;font-weight:600;
  line-height:1;color:var(--bordeaux);letter-spacing:-.03em;
  font-variation-settings:"SOFT" 30,"WONK" 1;
}
.badge-float span{display:block;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.17em;color:var(--ink-3);font-weight:600;margin-top:.4rem}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__media{order:-1}
  .hero__media .shell__core{aspect-ratio:4/3.35}
  .badge-float{left:auto;right:.8rem;bottom:-1.2rem}
}

/* ---------- 8. Trust strip ---------- */
.strip{border-block:1px solid var(--line-soft);background:rgba(232,220,203,.34)}
.strip__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.strip__i{
  padding:clamp(1.4rem,3vw,2.1rem) clamp(.8rem,2vw,1.6rem);
  display:flex;flex-direction:column;gap:.3rem;
  border-left:1px solid var(--line-soft);
}
.strip__i:first-child{border-left:0}
.strip__i b{
  font-family:"Fraunces",serif;font-size:clamp(1.6rem,1.1rem + 1.5vw,2.4rem);
  font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--ink);
  font-variation-settings:"SOFT" 30,"WONK" 1;
}
.strip__i span{font-size:.76rem;color:var(--ink-3);letter-spacing:.02em}
@media (max-width:720px){
  .strip__grid{grid-template-columns:1fr 1fr}
  .strip__i:nth-child(3){border-left:0}
  .strip__i:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
}

/* ---------- 9. Sections ---------- */
.sec{padding-block:var(--sec);position:relative}
.sec--tight{padding-block:clamp(4rem,8vw,6.5rem)}
.sec--paper2{background:var(--paper-2)}
.sec--dark{background:var(--bordeaux-3);color:var(--paper-2)}
.sec--dark h2,.sec--dark h3{color:var(--paper)}
.sec--ink{background:var(--ink);color:var(--paper-2)}
.sec--ink h2,.sec--ink h3{color:var(--paper)}

.sec__head{max-width:44rem}
.sec__head>*+*{margin-top:1.25rem}
.sec__head--split{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:2.5rem;max-width:none;
}
.sec__head--split>div{max-width:44rem}
.sec__head--split>div>*+*{margin-top:1.25rem}
@media (max-width:820px){
  .sec__head--split{flex-direction:column;align-items:flex-start}
}

/* ---------- 10. Editorial split (philosophy) ---------- */
.split{
  display:grid;gap:clamp(2.5rem,6vw,5.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
}
.split--reverse .split__media{order:-1}
.split__copy>*+*{margin-top:1.5rem}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
}

/* stacked / overlapping media (z-axis cascade) */
.stack{position:relative;padding-bottom:5.5rem;padding-right:3rem}
.stack__a,.stack__b{overflow:hidden;background:var(--paper-3)}
.stack__a{
  border-radius:var(--r-2xl);box-shadow:var(--sh-3);
  aspect-ratio:4/4.6;
}
.stack__b{
  position:absolute;right:0;bottom:0;width:56%;
  border-radius:var(--r-xl);
  box-shadow:0 0 0 .5rem var(--paper), var(--sh-3);
  aspect-ratio:4/3.1;
}
.stack img{width:100%;height:100%;object-fit:cover;
  transition:transform 900ms var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .stack__a:hover img,.stack__b:hover img{transform:scale(1.055)}
}
@media (max-width:900px){
  .stack{padding-right:2rem;padding-bottom:4rem}
  .stack__b{width:52%}
}

/* pull quote */
.quote{
  position:relative;padding-left:clamp(1.25rem,3vw,2rem);
  border-left:2px solid var(--bordeaux);
}
.quote p{
  font-family:"Fraunces",serif;font-weight:400;
  font-size:clamp(1.32rem,1.05rem + 1.15vw,2rem);line-height:1.28;
  letter-spacing:-.024em;color:var(--ink);
  font-variation-settings:"SOFT" 40,"WONK" 1;text-wrap:balance;
}
.quote footer{
  margin-top:1.15rem;display:flex;align-items:center;gap:.85rem;
  font-size:.82rem;color:var(--ink-3);letter-spacing:.01em;
}
.quote img{height:2.6rem;width:auto;opacity:.85;mix-blend-mode:multiply}

/* value rows */
.values{margin-top:2.6rem;display:grid;gap:0}
.values li{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  padding:1.25rem 0;border-top:1px solid var(--line-soft);
}
.values li:last-child{border-bottom:1px solid var(--line-soft)}
.values h3{font-size:1.06rem;font-family:"Figtree",sans-serif;font-weight:620;
  letter-spacing:-.012em;line-height:1.35}
.values p{font-size:.94rem;color:var(--ink-3);margin-top:.28rem;line-height:1.6}

/* ---------- 11. Offer groups (replaces the 16 identical cards) ---------- */
.groups{display:grid;gap:clamp(1rem,2vw,1.35rem);grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.groups{grid-template-columns:1fr}}

.group{
  padding:.45rem;border-radius:var(--r-xl);
  background:linear-gradient(155deg, rgba(255,255,255,.9), rgba(232,220,203,.42));
  box-shadow:inset 0 0 0 1px rgba(23,21,18,.06), var(--sh-1);
  transition:transform 420ms var(--e-out), box-shadow 420ms var(--e-out);
}
.group__core{
  height:100%;padding:clamp(1.5rem,3vw,2.15rem);
  border-radius:calc(var(--r-xl) - .45rem);background:var(--paper);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7);
  display:flex;flex-direction:column;
}
.group__top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.group h3{margin-top:.85rem}
.group__list{margin-top:1.35rem;display:grid}
.group__list li{border-top:1px solid var(--line-soft)}
.group__list a,.group__list .row{
  position:relative;display:grid;grid-template-columns:1fr auto;gap:1rem;
  align-items:center;padding:.82rem .2rem .82rem 0;
  transition:padding-left 380ms var(--e-out);
}
.group__list a::before,.group__list .row::before{
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:3px;height:0;border-radius:2px;background:var(--bordeaux);
  transition:height 380ms var(--e-out);
}
.group__list strong{display:block;font-weight:580;font-size:.99rem;letter-spacing:-.01em}
.group__list span{display:block;font-size:.865rem;color:var(--ink-3);
  line-height:1.5;margin-top:.16rem}
.group__list svg{width:.85rem;height:.85rem;stroke:var(--ink-4);stroke-width:1.8;fill:none;
  transition:transform 380ms var(--e-out), stroke 300ms var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .group:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(23,21,18,.06), var(--sh-2)}
  .group__list a:hover{padding-left:.95rem}
  .group__list a:hover::before{height:64%}
  .group__list a:hover svg{transform:translateX(4px);stroke:var(--bordeaux)}
}

/* ---------- 12. Media cards (locations, seminar rooms) ---------- */
.cards{display:grid;gap:clamp(1rem,2.2vw,1.6rem);grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.cards,.cards--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards,.cards--2,.cards--4{grid-template-columns:1fr}}

.mcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-l);background:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(23,21,18,.07), var(--sh-1);
  transition:transform 460ms var(--e-out), box-shadow 460ms var(--e-out);
}
.mcard__img{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--paper-3)}
.mcard__img img{width:100%;height:100%;object-fit:cover;
  transition:transform 900ms var(--e-out), filter 900ms var(--e-out)}
.mcard__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(23,21,18,.34), rgba(23,21,18,0) 52%);
  opacity:.85;transition:opacity 520ms var(--e-out);
}
.mcard__tag{
  position:absolute;left:.85rem;top:.85rem;z-index:2;
  padding:.32rem .72rem;border-radius:999px;
  font-size:.66rem;font-weight:650;text-transform:uppercase;letter-spacing:.15em;
  background:rgba(248,244,237,.9);color:var(--bordeaux);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.mcard__body{padding:clamp(1.2rem,2.4vw,1.6rem);display:flex;flex-direction:column;
  gap:.55rem;flex:1}
.mcard__body p{font-size:.91rem;color:var(--ink-3);line-height:1.58}
.mcard__meta{
  margin-top:auto;padding-top:1rem;display:flex;align-items:center;gap:.5rem;
  font-size:.78rem;color:var(--ink-4);border-top:1px solid var(--line-soft);
}
.mcard__meta svg{width:.85rem;height:.85rem;stroke:currentColor;stroke-width:1.7;fill:none;flex:none}
@media (hover:hover) and (pointer:fine){
  .mcard:hover{transform:translateY(-5px);
    box-shadow:inset 0 0 0 1px rgba(23,21,18,.07), var(--sh-3)}
  .mcard:hover .mcard__img img{transform:scale(1.06)}
  .mcard:hover .mcard__img::after{opacity:.5}
}

/* ---------- 13. Dark stat band ---------- */
.band{position:relative;overflow:hidden}
.band__bg{position:absolute;inset:0;z-index:0}
.band__bg img{width:100%;height:100%;object-fit:cover;opacity:.26}
.band__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg, var(--bordeaux-3) 8%, rgba(78,0,25,.86) 55%, rgba(23,21,18,.9));
}
.band .wrap{position:relative;z-index:1}
.stats{
  margin-top:clamp(2.5rem,5vw,3.8rem);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line-on-dark);border-block:1px solid var(--line-on-dark);
}
.stats div{background:transparent;padding:clamp(1.4rem,3vw,2rem) 1.2rem;
  display:flex;flex-direction:column;gap:.45rem}
.stats b{
  font-family:"Fraunces",serif;font-size:clamp(2.2rem,1.2rem + 3vw,3.6rem);
  font-weight:500;line-height:.95;letter-spacing:-.035em;color:var(--paper);
  font-variation-settings:"SOFT" 40,"WONK" 1;
}
.stats span{font-size:.78rem;color:rgba(248,244,237,.62);letter-spacing:.02em}
@media (max-width:820px){.stats{grid-template-columns:1fr 1fr}}

/* ---------- 14. Seminar / date list ---------- */
.dates{margin-top:clamp(2.2rem,4vw,3.2rem);border-top:1px solid var(--line)}
.dates li{border-bottom:1px solid var(--line)}
.dates__row{
  position:relative;display:grid;
  grid-template-columns:9.5rem minmax(0,1fr) auto;gap:clamp(1rem,3vw,2.5rem);
  align-items:center;padding:clamp(1.35rem,2.6vw,1.9rem) 0;
  transition:padding-left 420ms var(--e-out);
}
.dates__row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--bordeaux);transform:scaleY(0);transform-origin:center;
  transition:transform 440ms var(--e-out);
}
.dates__when{
  font-family:"Fraunces",serif;font-size:1.02rem;font-weight:600;
  letter-spacing:-.015em;color:var(--bordeaux);
  font-variation-settings:"SOFT" 30,"WONK" 1;
}
.dates__what h3{font-size:clamp(1.2rem,1.05rem + .55vw,1.55rem)}
.dates__what p{font-size:.88rem;color:var(--ink-3);margin-top:.32rem}
.dates__meta{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.8rem;color:var(--ink-4);
  margin-top:.5rem;
}
.dates__meta span{display:inline-flex;align-items:center;gap:.38rem}
.dates__meta svg{width:.8rem;height:.8rem;stroke:currentColor;stroke-width:1.7;fill:none}
@media (hover:hover) and (pointer:fine){
  .dates__row:hover{padding-left:1.35rem}
  .dates__row:hover::before{transform:scaleY(1)}
}
@media (max-width:860px){
  .dates__row{grid-template-columns:1fr;gap:.75rem;align-items:start}
  .dates__row .btn{justify-self:start}
}

/* ---------- 15. Price tables ---------- */
.ptabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.ptab{
  padding:.55rem 1.15rem;border-radius:999px;font-size:.87rem;font-weight:530;
  color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);
  transition:background-color 280ms var(--e-out), color 280ms var(--e-out),
             box-shadow 280ms var(--e-out), transform 200ms var(--e-out);
}
.ptab:active{transform:scale(.97)}
.ptab.is-on{background:var(--ink);color:var(--paper);box-shadow:none}
@media (hover:hover) and (pointer:fine){
  .ptab:not(.is-on):hover{background:rgba(23,21,18,.05);
    box-shadow:inset 0 0 0 1px rgba(23,21,18,.2)}
}

.pgroup{margin-top:clamp(2.5rem,5vw,3.5rem)}
.pgroup+.pgroup{margin-top:clamp(3rem,6vw,4.5rem)}
.pgroup__h{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.pgroup__h h3{font-size:clamp(1.4rem,1.15rem + .9vw,1.95rem)}
.pgroup__h em{font-style:normal;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.18em;color:var(--bordeaux);font-weight:650}
.prow{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:1.5rem;align-items:baseline;padding:1.15rem 0;
  border-bottom:1px solid var(--line-soft);
  transition:padding-left 380ms var(--e-out);
}
.prow::before{
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;width:3px;height:0;
  border-radius:2px;background:var(--bordeaux);transition:height 380ms var(--e-out);
}
.prow__n{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.prow__n strong{font-weight:580;font-size:1.02rem;letter-spacing:-.012em}
.prow__d{font-size:.88rem;color:var(--ink-3);margin-top:.24rem;line-height:1.55}
.prow__p{
  font-family:"Fraunces",serif;font-size:1.28rem;font-weight:600;
  letter-spacing:-.02em;white-space:nowrap;color:var(--ink);
  font-variation-settings:"SOFT" 30,"WONK" 1;
}
.prow__p.is-free{color:var(--moss)}
.pill-hot{
  padding:.2rem .6rem;border-radius:999px;font-size:.63rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  background:rgba(122,0,41,.09);color:var(--bordeaux);
}
@media (hover:hover) and (pointer:fine){
  .prow:hover{padding-left:.95rem}
  .prow:hover::before{height:60%}
}

/* package cards */
.packs{display:grid;gap:clamp(1rem,2vw,1.4rem);grid-template-columns:repeat(3,1fr);
  margin-top:clamp(2rem,4vw,3rem)}
@media (max-width:900px){.packs{grid-template-columns:1fr}}
.pack{
  padding:.45rem;border-radius:var(--r-xl);
  background:linear-gradient(155deg, rgba(255,255,255,.9), rgba(232,220,203,.45));
  box-shadow:inset 0 0 0 1px rgba(23,21,18,.06), var(--sh-1);
  transition:transform 420ms var(--e-out), box-shadow 420ms var(--e-out);
}
.pack--hot{background:linear-gradient(155deg, rgba(122,0,41,.22), rgba(122,0,41,.06))}
.pack__core{
  height:100%;padding:clamp(1.5rem,3vw,2.1rem);border-radius:calc(var(--r-xl) - .45rem);
  background:var(--paper);box-shadow:inset 0 1px 1px rgba(255,255,255,.7);
  display:flex;flex-direction:column;
}
.pack__top{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.pack__price{display:flex;align-items:baseline;gap:.7rem;margin-top:1.1rem}
.pack__price b{
  font-family:"Fraunces",serif;font-size:2.5rem;font-weight:600;line-height:1;
  letter-spacing:-.035em;font-variation-settings:"SOFT" 30,"WONK" 1;
}
.pack__save{font-size:.74rem;font-weight:650;color:var(--moss);
  padding:.22rem .6rem;border-radius:999px;background:rgba(76,90,63,.1)}
.pack ul{margin:1.5rem 0 1.8rem;display:grid;gap:.72rem}
.pack li{display:grid;grid-template-columns:auto 1fr;gap:.65rem;
  font-size:.92rem;color:var(--ink-2);line-height:1.5}
.pack li svg{width:1rem;height:1rem;margin-top:.22rem;stroke:var(--bordeaux);
  stroke-width:2;fill:none;flex:none}
.pack .btn{margin-top:auto;align-self:flex-start}
@media (hover:hover) and (pointer:fine){
  .pack:hover{transform:translateY(-5px);
    box-shadow:inset 0 0 0 1px rgba(23,21,18,.06), var(--sh-2)}
}

/* ---------- 16. Team ---------- */
.team{display:grid;gap:clamp(1rem,2.2vw,1.6rem);grid-template-columns:repeat(2,1fr);
  margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (max-width:820px){.team{grid-template-columns:1fr}}
.person{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.1rem,2.5vw,1.7rem);
  padding:clamp(1.4rem,3vw,2rem);border-radius:var(--r-l);
  background:var(--paper);box-shadow:inset 0 0 0 1px rgba(23,21,18,.07), var(--sh-1);
  transition:transform 440ms var(--e-out), box-shadow 440ms var(--e-out);
}
.person__av{
  width:clamp(3.6rem,7vw,4.6rem);aspect-ratio:1;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(150deg, var(--bordeaux), var(--bordeaux-3));
  color:var(--paper);font-family:"Fraunces",serif;font-size:1.15rem;font-weight:600;
  letter-spacing:.02em;box-shadow:var(--sh-1);
  transition:transform 480ms var(--e-out);
}
.person__role{font-size:.78rem;color:var(--bordeaux);font-weight:620;
  letter-spacing:.03em;margin-top:.3rem}
.person p{font-size:.93rem;color:var(--ink-3);margin-top:.75rem;line-height:1.6}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.tags span{
  padding:.28rem .7rem;border-radius:999px;font-size:.72rem;font-weight:520;
  color:var(--ink-2);background:rgba(232,220,203,.7);
  box-shadow:inset 0 0 0 1px rgba(23,21,18,.05);
  transition:background-color 300ms var(--e-out), color 300ms var(--e-out);
}
@media (hover:hover) and (pointer:fine){
  .person:hover{transform:translateY(-4px);
    box-shadow:inset 0 0 0 1px rgba(23,21,18,.07), var(--sh-2)}
  .person:hover .person__av{transform:scale(1.06) rotate(-4deg)}
  .person:hover .tags span{background:rgba(122,0,41,.08);color:var(--bordeaux)}
}

/* ---------- 17. Contact ---------- */
.contact{display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.cinfo{display:grid;gap:0;margin-top:2rem;border-top:1px solid var(--line)}
.cinfo a,.cinfo div{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:1rem;
  align-items:center;padding:1.1rem .2rem 1.1rem 0;border-bottom:1px solid var(--line);
  transition:padding-left 380ms var(--e-out);
}
.cinfo::before{content:none}
.cinfo a::before{
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;width:3px;height:0;
  border-radius:2px;background:var(--bordeaux);transition:height 380ms var(--e-out);
}
.cinfo__ico{
  width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(122,0,41,.07);
  transition:background-color 320ms var(--e-out), transform 380ms var(--e-out);
}
.cinfo__ico svg{width:1rem;height:1rem;stroke:var(--bordeaux);stroke-width:1.7;fill:none}
.cinfo small{display:block;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink-4);font-weight:620}
.cinfo strong{display:block;font-weight:530;font-size:1rem;margin-top:.18rem;
  letter-spacing:-.01em}
@media (hover:hover) and (pointer:fine){
  .cinfo a:hover{padding-left:.95rem}
  .cinfo a:hover::before{height:58%}
  .cinfo a:hover .cinfo__ico{background:rgba(122,0,41,.13);transform:scale(1.06)}
}

.form{
  padding:.5rem;border-radius:var(--r-xl);
  background:linear-gradient(155deg, rgba(255,255,255,.9), rgba(232,220,203,.45));
  box-shadow:inset 0 0 0 1px rgba(23,21,18,.06), var(--sh-2);
}
.form__core{
  padding:clamp(1.6rem,3.5vw,2.6rem);border-radius:calc(var(--r-xl) - .5rem);
  background:var(--paper);box-shadow:inset 0 1px 1px rgba(255,255,255,.7);
}
.field{margin-bottom:1.15rem}
.field label{display:block;font-size:.76rem;font-weight:620;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem}
.field input,.field textarea,.field select{
  width:100%;padding:.85rem 1.05rem;border-radius:var(--r-s);
  background:var(--paper-2);color:var(--ink);font-size:.97rem;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow 260ms var(--e-out), background-color 260ms var(--e-out);
}
.field textarea{min-height:8rem;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;background:#fff;box-shadow:inset 0 0 0 1.5px var(--bordeaux)}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media (max-width:560px){.field-2{grid-template-columns:1fr}}
.form small{display:block;margin-top:1.1rem;font-size:.78rem;color:var(--ink-4);
  line-height:1.55}

/* ---------- 18. CTA closer ---------- */
.closer{position:relative;overflow:hidden;background:var(--ink);color:var(--paper-2)}
.closer__bg{position:absolute;inset:0}
.closer__bg img{width:100%;height:100%;object-fit:cover;object-position:center 32%;opacity:.34}
.closer__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(23,21,18,.94) 12%, rgba(78,0,25,.82) 62%, rgba(23,21,18,.7));
}
.closer .wrap{position:relative;z-index:1;padding-block:clamp(5rem,11vw,8.5rem)}
.closer h2{color:var(--paper);max-width:20ch}
.closer .lead{color:rgba(248,244,237,.76)}
.closer__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.2rem}

/* ---------- 19. Footer ---------- */
.ftr{background:var(--paper-2);border-top:1px solid var(--line-soft);
  padding-block:clamp(3.5rem,7vw,5.5rem) 2rem}
.ftr__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.2fr)}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}
  .ftr__brand{grid-column:1/-1}}
@media (max-width:600px){.ftr__grid{grid-template-columns:1fr}}
.ftr__brand p{font-size:.93rem;color:var(--ink-3);margin-top:1.1rem;max-width:34ch;
  line-height:1.65}
.ftr__mark{height:4.4rem;width:auto;transition:transform 480ms var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .ftr__brand a:hover .ftr__mark{transform:rotate(-3deg) scale(1.04)}
}
.ftr h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink-4);font-weight:650;margin-bottom:1.15rem;font-family:"Figtree",sans-serif}
.ftr__nav{display:grid;gap:.62rem}
.ftr__nav a{font-size:.93rem;color:var(--ink-2);width:fit-content;
  transition:color 240ms var(--e-out), transform 300ms var(--e-out)}
.ftr__c{display:grid;gap:.55rem;font-size:.93rem;color:var(--ink-2)}
.ftr__c a{width:fit-content;transition:color 240ms var(--e-out)}
.ftr__c strong{font-weight:600;color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .ftr__nav a:hover{color:var(--bordeaux);transform:translateX(3px)}
  .ftr__c a:hover{color:var(--bordeaux)}
}
.ftr__social{display:flex;gap:.5rem;margin-top:1.5rem}
.ftr__social a{
  width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background-color 280ms var(--e-out), transform 280ms var(--e-out),
             box-shadow 280ms var(--e-out);
}
.ftr__social svg{width:1.02rem;height:1.02rem;stroke:var(--ink-2);stroke-width:1.6;fill:none}
@media (hover:hover) and (pointer:fine){
  .ftr__social a:hover{background:var(--bordeaux);transform:translateY(-2px);
    box-shadow:inset 0 0 0 1px transparent, var(--sh-1)}
  .ftr__social a:hover svg{stroke:var(--paper)}
}
.ftr__base{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;
  font-size:.82rem;color:var(--ink-4);
}
.ftr__base nav{display:flex;gap:1.2rem;margin-left:auto}
@media (max-width:600px){.ftr__base nav{margin-left:0}}
.ftr__base a{transition:color 240ms var(--e-out)}
@media (hover:hover) and (pointer:fine){.ftr__base a:hover{color:var(--bordeaux)}}

/* ---------- 20. Page hero (subpages) ---------- */
.phero{position:relative;padding:clamp(8.5rem,16vw,11.5rem) 0 clamp(3rem,6vw,4.5rem);
  overflow:hidden}
.phero::before{
  content:"";position:absolute;top:-30%;right:-10%;width:min(48rem,80vw);aspect-ratio:1;
  background:radial-gradient(circle, rgba(122,0,41,.09), rgba(122,0,41,0) 62%);
  pointer-events:none;
}
.phero__in{max-width:52rem}
.phero__in>*+*{margin-top:1.5rem}
.phero h1{font-size:clamp(2.5rem,1.35rem + 4.6vw,4.9rem)}

/* wide banner image */
.banner{overflow:hidden;border-radius:var(--r-xl);box-shadow:var(--sh-2);
  aspect-ratio:24/7;background:var(--paper-3)}
.banner img{width:100%;height:100%;object-fit:cover;
  transition:transform 1100ms var(--e-out)}
@media (hover:hover) and (pointer:fine){.banner:hover img{transform:scale(1.04)}}
@media (max-width:700px){.banner{aspect-ratio:16/9}}

/* ---------- 21. Reveal ---------- */
.rv{opacity:0;transform:translateY(1.4rem);filter:blur(6px);
  transition:opacity 820ms var(--e-out), transform 820ms var(--e-out), filter 820ms var(--e-out);
  transition-delay:var(--d,0ms);will-change:transform,opacity}
.rv.is-in{opacity:1;transform:none;filter:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none;filter:none}
  body.is-menu .menu a{opacity:1;transform:none}
}