/* ==========================================================================
   Bilguun Choimaa Coaching — Stylesheet
   Single-family type system (Archivo), flat graphic surfaces, no soft UI
   chrome. Built like a printed spec sheet / gym signage, not an app.
   ========================================================================== */

/* Self-hosted (no third-party font requests / no IP transfer to Google — DSGVO) */
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --ink:      #313647;
  --ink-70:   rgba(49,54,71,.72);
  --ink-45:   rgba(49,54,71,.45);
  --slate:    #435663;
  --sage:     #a3b087;
  --sage-deep:#77875c;
  --cream:    #fff8d4;
  --paper:    #f8f4e6;
  --wood:     #8c6a45;
  --wood-deep:#5f4630;
  --white:    #fffef8;
  --line:     rgba(49,54,71,.35);

  --sans: 'Archivo', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --wrap: 1280px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
}

/* ---- reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* long German compound words (e.g. "Zufriedenheitsgarantie") have no
     space to break at — without this they overflow narrow viewports */
  overflow-wrap:break-word;
  -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto;
}
/* belt-and-suspenders: clips any in-flow element that miscalculates its
   width on narrow viewports, without touching html/body overflow (which
   breaks fixed-viewport scroll tracking on some mobile browsers) */
.page{ overflow-x:hidden; width:100%; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--sans); font-weight:800; letter-spacing:-.01em; line-height:1.05; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

/* faint paper grain */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:2000;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
::selection{ background:var(--ink); color:var(--cream); }

/* ---- section furniture ---- */
.label{
  display:flex; align-items:center; gap:.65em;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate); font-weight:700; margin-bottom:1.5em;
}
.label::before{ content:""; width:9px; height:9px; background:var(--wood); flex:none; }
section{ position:relative; }

/* duotone photo treatment — flat ink wash, not a soft gradient glow */
.photo{ position:relative; overflow:hidden; background:var(--slate); }
.photo img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.98);
}
.photo::after{
  content:""; position:absolute; inset:0;
  background:var(--ink); opacity:.42; mix-blend-mode:multiply;
}
.tag{
  display:inline-flex; align-items:baseline; gap:.6em; flex-wrap:wrap;
  max-width:100%; box-sizing:border-box;
  background:var(--wood); color:var(--cream);
  padding:.55em .9em; font-weight:700; font-size:.76rem;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.3;
}
.tag b{ font-size:1.15rem; font-family:var(--sans); font-weight:800; letter-spacing:-.01em; text-transform:none; }
.tag span{ min-width:0; }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.9em 1.6em;
  font-size:.88rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  background:var(--ink); color:var(--cream);
  border:1px solid var(--ink);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ background:var(--paper); color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--cream); }
.btn-on-dark{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.btn-on-dark:hover{ background:transparent; color:var(--cream); }
.btn svg{ width:1em; height:1em; }

.link-more{
  font-size:.88rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  border-bottom:2px solid var(--ink); padding-bottom:3px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:1.25rem 0;
  color:var(--cream);
  transition:background .2s ease, color .2s ease, padding .2s ease, border-color .2s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:var(--paper);
  color:var(--ink);
  padding:.85rem 0;
  border-bottom-color:var(--line);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ width:32px; height:32px; object-fit:contain; }
.site-header:not(.is-scrolled) .brand img{ filter:brightness(0) invert(1); }
.brand-type{ display:flex; flex-direction:column; line-height:1.2; }
.brand-name{ font-weight:800; font-size:1rem; letter-spacing:-.01em; }
.brand-sub{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; opacity:.75; }

.nav-links{ display:flex; align-items:center; gap:2.1rem; }
.nav-links a{
  font-size:.82rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding-bottom:3px; border-bottom:2px solid transparent;
}
.nav-links a:hover{ border-bottom-color:currentColor; }
.header-cta{ display:flex; align-items:center; gap:1.6rem; }
.header-cta .btn{
  background:var(--cream); color:var(--ink); border-color:var(--cream);
}
.header-cta .btn:hover{ background:transparent; color:var(--cream); }
.site-header.is-scrolled .header-cta .btn{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.site-header.is-scrolled .header-cta .btn:hover{ background:transparent; color:var(--ink); }

.nav-toggle{ display:none; background:none; border:0; padding:.4rem; z-index:1100; }
.nav-toggle span{ display:block; width:24px; height:2px; background:currentColor; margin:5px 0; transition:transform .25s ease, opacity .25s ease; }
.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero — full-bleed photo, type set directly on the image
   ========================================================================== */
.hero{ position:relative; height:100svh; min-height:640px; color:var(--cream); }
.hero .photo{ position:absolute; inset:0; }
.hero .photo img{ filter:grayscale(1) contrast(1.15) brightness(.85); }
.hero .photo::after{ opacity:.55; }
.hero::before{
  content:""; position:absolute; top:0; left:0; right:0; z-index:1;
  height:180px; background:linear-gradient(to bottom, rgba(35,38,48,.75), transparent);
  pointer-events:none;
}

.hero-tag{ margin-top:2rem; }

.hero-inner{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:0 0 clamp(2.5rem,6vw,4.5rem);
}
.hero-eyebrow{
  font-size:.85rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; margin-bottom:1.1rem;
}

.hero h1{
  font-size:clamp(2.5rem, 6.6vw, 5.2rem);
  text-transform:uppercase;
  max-width:16ch;
}
.hero h1 span{ color:var(--sage); }

.hero-lede{
  margin-top:1.5rem; max-width:42ch;
  font-size:1.05rem; font-weight:500;
  color:rgba(255,254,248,.88);
}
.hero-actions{ display:flex; align-items:center; gap:1.8rem; margin-top:2.4rem; flex-wrap:wrap; }
.hero-actions .link-more{ border-bottom-color:rgba(255,254,248,.5); }

/* ==========================================================================
   About
   ========================================================================== */
.about{ padding:clamp(5rem,10vw,8rem) 0 clamp(4rem,8vw,6rem); }
.about .wrap{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.about-figure{ position:relative; }
.about-figure .photo{ aspect-ratio:3/4; }

.about-body h2{
  font-size:clamp(1.9rem,3.4vw,2.6rem);
  max-width:16ch;
  margin-bottom:1.6rem;
  text-transform:uppercase;
}
.about-body p{ color:var(--ink-70); max-width:60ch; }
.about-body p + p{ margin-top:1.1rem; }

.stat-row{ display:flex; gap:clamp(2rem,5vw,3.5rem); margin-top:2.2rem; padding-top:2.2rem; border-top:2px solid var(--ink); }
.stat b{ display:block; font-size:clamp(2rem,4vw,2.8rem); font-weight:800; color:var(--wood-deep); line-height:1; }
.stat span{ display:block; margin-top:.5rem; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); font-weight:600; max-width:14ch; }

.text-list{ margin-top:1.6rem; font-size:.92rem; color:var(--slate); }
.text-list span:not(:last-child)::after{ content:"·"; margin:0 .6em; color:var(--wood); }

/* ==========================================================================
   Offer
   ========================================================================== */
.offer{ padding:clamp(4rem,8vw,7rem) 0; background:var(--ink); color:var(--cream); }
.offer-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; margin-bottom:clamp(2.5rem,5vw,4rem); flex-wrap:wrap;
}
.offer .label{ color:var(--sage); }
.offer .label::before{ background:var(--sage); }
.offer-head h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); max-width:18ch; text-transform:uppercase; }
.offer-head p{ max-width:34ch; color:rgba(255,254,248,.7); font-size:.98rem; }

.offer-list{ border-top:2px solid rgba(255,254,248,.25); }
.offer-item{
  display:grid;
  grid-template-columns:4.2rem 5.5rem 1fr 1.2fr;
  gap:clamp(1.2rem,3vw,2.2rem);
  padding:clamp(2.2rem,4vw,3rem) 0;
  border-bottom:2px solid rgba(255,254,248,.25);
  align-items:start;
}
.offer-num{
  font-size:clamp(2rem,3.2vw,2.8rem); font-weight:800; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,254,248,.55);
}
.offer-photo{ aspect-ratio:1/1; align-self:start; cursor:pointer; }
.offer-photo-hint{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  background:rgba(49,54,71,0);
  opacity:0; transition:opacity .2s ease, background-color .2s ease;
}
.offer-photo-hint svg{ width:26px; height:26px; color:var(--cream); }
.offer-photo:hover .offer-photo-hint,
.offer-photo:focus-visible .offer-photo-hint{
  opacity:1; background:rgba(49,54,71,.35);
}
.offer-photo:focus-visible{ outline:2px solid var(--sage); outline-offset:2px; }
.offer-main h3{ font-size:clamp(1.35rem,2.1vw,1.7rem); margin-bottom:.8rem; text-transform:uppercase; }
.offer-main p{ color:rgba(255,254,248,.72); max-width:50ch; }
.offer-feats{ display:flex; flex-direction:column; gap:.85rem; }
.offer-feats li{ display:flex; gap:.7rem; font-size:.92rem; }
.offer-feats li::before{ content:"–"; flex:none; color:var(--sage); font-weight:700; }
.offer-feats b{ font-weight:700; color:var(--white); }

/* ==========================================================================
   Vita — spec-sheet list
   ========================================================================== */
.vita{ padding:clamp(5rem,10vw,8rem) 0; }
.vita .wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2.5rem,6vw,5rem); }
.vita-intro h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); max-width:14ch; text-transform:uppercase; }
.vita-intro p{ margin-top:1.3rem; color:var(--ink-70); max-width:36ch; }

.vita-table{ border-top:2px solid var(--ink); }
.vita-row{
  display:grid; grid-template-columns:6rem 1fr;
  gap:1.5rem; padding:1.1rem 0;
  border-bottom:1px solid var(--line);
  font-size:.98rem;
}
.vita-row .yr{ font-family:var(--mono); font-size:.85rem; color:var(--wood-deep); font-weight:600; }
.vita-row .ttl{ color:var(--ink); }
.vita-row .ttl small{ color:var(--slate); display:block; font-size:.8rem; margin-top:.15rem; font-family:var(--mono); }

/* ==========================================================================
   Promise band
   ========================================================================== */
.promise{
  background:var(--slate); color:var(--cream);
  padding:clamp(4.5rem,9vw,7.5rem) 0;
  text-align:center;
  border-top:6px solid var(--wood); border-bottom:6px solid var(--wood);
}
.promise-inner{ max-width:760px; margin-inline:auto; }
.promise .label{ justify-content:center; color:var(--sage); }
.promise .label::before{ background:var(--sage); }
.promise h2{ font-size:clamp(2rem,4.4vw,3.2rem); text-transform:uppercase; color:var(--white); }
.promise p{ margin-top:1.5rem; color:rgba(255,254,248,.82); font-size:1.05rem; max-width:56ch; margin-inline:auto; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{ padding:clamp(5rem,10vw,8rem) 0; }
.contact .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.5rem,6vw,5rem); align-items:end; }
.contact h2{ font-size:clamp(2rem,4.6vw,3.4rem); max-width:14ch; text-transform:uppercase; }
.contact-lede{ margin-top:1.4rem; color:var(--ink-70); max-width:44ch; }

.contact-portrait{ width:112px; height:112px; margin-bottom:1.6rem; }

.contact-block{ border-top:2px solid var(--ink); padding-top:1.6rem; }
.contact-block a{
  display:block; font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:800;
  padding:.5rem 0; letter-spacing:-.01em;
}
.contact-block a:hover{ color:var(--wood-deep); }
.contact-block .fine{ margin-top:1rem; font-size:.85rem; color:var(--slate); text-transform:uppercase; letter-spacing:.05em; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ border-top:2px solid var(--ink); padding:2.6rem 0 2rem; }
.site-footer .wrap{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.footer-brand{ display:flex; align-items:center; gap:.7rem; }
.footer-brand img{ width:24px; height:24px; }
.footer-brand span{ font-weight:800; font-size:.92rem; }
.footer-links{ display:flex; align-items:center; gap:1.6rem; font-size:.8rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--slate); flex-wrap:wrap; }
.footer-links a:hover{ color:var(--ink); }
.footer-review{ display:inline-flex; align-items:center; gap:.4em; }
.footer-review svg{ width:13px; height:13px; color:var(--wood); }
.footer-meta{ font-size:.76rem; color:var(--ink-45); width:100%; margin-top:1.6rem; }

/* ==========================================================================
   Lightbox
   ========================================================================== */
body.lightbox-open{ overflow:hidden; }

.lightbox{
  position:fixed; inset:0; z-index:4000;
  display:flex; align-items:center; justify-content:center;
  padding:5vh 5vw;
  background:rgba(35,38,48,.94);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .25s ease; }

.lightbox-figure{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; }
.lightbox-img{
  max-width:min(920px, 88vw); max-height:78vh; width:auto; height:auto;
  object-fit:contain;
  border:1px solid rgba(255,248,212,.25);
}
.lightbox-caption{
  margin-top:1rem; color:var(--cream); text-align:center;
  font-size:.85rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}

.lightbox-close{
  position:fixed; top:1.5rem; right:1.5rem; z-index:4001;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(255,248,212,.4);
  color:var(--cream);
  transition:background .15s ease, color .15s ease;
}
.lightbox-close:hover{ background:var(--cream); color:var(--ink); }
.lightbox-close svg{ width:20px; height:20px; }

@media (max-width: 600px){
  .lightbox-close{ top:.9rem; right:.9rem; width:38px; height:38px; }
}

/* ==========================================================================
   Legal pages (Impressum / Datenschutz)
   ========================================================================== */
.legal{ padding:clamp(8rem,14vw,10rem) 0 clamp(4rem,8vw,7rem); }
.legal .wrap{ max-width:760px; }
.legal h1{ font-size:clamp(2rem,4vw,2.6rem); margin-bottom:2.2rem; text-transform:uppercase; }
.legal h2{ font-size:1.15rem; margin-top:2.6rem; margin-bottom:.9rem; text-transform:uppercase; letter-spacing:.02em; }
.legal p, .legal li{ color:var(--ink-70); font-size:.98rem; margin-bottom:.9rem; }
.legal a{ color:var(--wood-deep); border-bottom:1px solid currentColor; }
.legal ul{ padding-left:1.2rem; list-style:disc; }
.legal mark.todo{
  background:rgba(163,176,135,.4); color:var(--ink);
  padding:.05em .4em; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.legal .back{ display:inline-flex; align-items:center; gap:.5em; margin-bottom:2.5rem; font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .about .wrap, .vita .wrap, .contact .wrap{ grid-template-columns:1fr; }
  .about-figure{ max-width:420px; }
  .offer-item{ grid-template-columns:4.5rem 1fr; gap:1rem 1.2rem; }
  .offer-num{ font-size:1.8rem; -webkit-text-stroke:0; color:var(--sage); grid-column:2; grid-row:1; }
  .offer-photo{ grid-column:1; grid-row:1; width:4.5rem; }
  .offer-main{ grid-column:1 / -1; }
  .offer-feats{ grid-column:1 / -1; }
  .contact-block{ margin-top:.5rem; }
  .stat-row{ flex-wrap:wrap; row-gap:1.4rem; }
}

@media (max-width: 760px){
  .nav-links, .header-cta .btn{ display:none; }
  .nav-toggle{ display:block; }
  body.nav-open .nav-links{
    display:flex; flex-direction:column;
    position:fixed; inset:0; z-index:1000;
    background:var(--paper); color:var(--ink);
    align-items:flex-start; justify-content:center;
    gap:1.6rem; padding:0 8vw;
  }
  body.nav-open .nav-links a{ font-size:1.5rem; }
  .vita-row{ grid-template-columns:5rem 1fr; }
}

/* motion sensitivity */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}