:root{
  --bg:#E5E0D8;
  --paper:#F4F1EA;
  --paper-2:#EFE9DF;
  --gold:#C5A059;
  --text:#2F2F2F;
  --accent:#3E4C48;
  --muted:rgba(47,47,47,.72);
  --border:rgba(47,47,47,.14);
  --shadow: 0 18px 50px rgba(0,0,0,.06);
  --radius: 26px;
  --wrap: min(1320px, 92vw);
  --nav-h: 68px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  line-height:1.65;
  padding-top: var(--nav-h);
}

.wrap{ width: var(--wrap); margin: 0 auto; }
a{ color:inherit; text-decoration:none; }
a:hover{ color: var(--accent); }
.muted{ color: var(--muted); }
.small{ font-size: .92rem; }

/* Soft tactile texture */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.03;
  mix-blend-mode:multiply;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.12) 1px, transparent 1.6px);
  background-size: 18px 18px;
}

/* Loader (non-blocking, failsafe hidden by JS) */
.loader{
  position:fixed;
  inset:0;
  z-index:999;
  display:grid;
  place-items:center;
  background: rgba(229,224,216,.92);
  transition: opacity .35s ease, visibility .35s ease;
  pointer-events:none;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 20px;
  border-radius: 999px;
  border: 1px solid rgba(47,47,47,.12);
  background: rgba(244,241,234,.9);
}
.loader-shape{
  width:18px; height:18px;
  border-radius: 6px;
  background: rgba(47,47,47,.18);
}
.loader-shape.b{ background: rgba(47,47,47,.12); }
.loader-spark{
  width:30px; height:2px;
  border-radius:999px;
  background: rgba(197,160,89,.55);
  transform-origin:left;
  animation: spark 0.9s ease-in-out infinite;
}
@keyframes spark{
  0%,100%{ transform: scaleX(.35); opacity:.35; }
  50%{ transform: scaleX(1); opacity:.7; }
}

/* Kintsugi spine */
.kintsugi-rail{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.kintsugi-svg{
  position: absolute;
  top: -10vh;
  height: 220vh;
  width: 240px;
  opacity: .45;
}

.kintsugi-svg.k1{ left: 6vw;  opacity: .55; width: 260px; }
.kintsugi-svg.k2{ left: 22vw; opacity: .28; width: 210px; transform: rotate(1deg); }
.kintsugi-svg.k3{ left: 78vw; opacity: .22; width: 240px; transform: rotate(-1deg); }

.kintsugi-rail .k-path{
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.6;
  opacity: .55;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  will-change: stroke-dashoffset;
}


/* nav */
.site-header{ position: relative; z-index: 10; }
/* Fixed nav */
.nav{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding: 14px 8vw;

  background: rgba(229,224,216,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(47,47,47,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}

.brand{ font-weight: 800; letter-spacing: -0.01em; }
.nav-links{
  display:flex;
  align-items:center;
  gap: 16px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-links a{
  display:inline-flex;
  padding: 10px 12px;
  border-radius: 999px;
  color: rgba(47,47,47,.86);
  border: 1px solid transparent;
}
.nav-links a:hover{ background: rgba(197,160,89,.12); }
.nav-links a.is-active{
  background: rgba(197,160,89,.14);
  border-color: rgba(197,160,89,.22);
}
.nav-cta{
  background: rgba(62,76,72,.12);
  border-color: rgba(62,76,72,.18) !important;
}
.nav-cta:hover{ background: rgba(62,76,72,.16); }

.nav-toggle{
  display:none;
  border:0;
  background:transparent;
  padding:10px;
  border-radius: 14px;
}
.nav-toggle span{
  display:block;
  width:26px;
  height:2px;
  background: rgba(47,47,47,.72);
  margin:6px 0;
}

/* Hero */
.hero{
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* fallback */
@supports not (height: 100svh){
  .hero{ min-height: 100vh; }
}

@media (max-width: 720px){
  .hero{
    min-height: 90svh;
    align-items: flex-start;
    padding-top: 96px; /* avoids nav overlap */
  }
}

.hero-wrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: stretch;
  position: relative;
}

.hero-wrap::before{
  content:"";
  position:absolute;
  inset: -18px -14px -18px -14px;
  border-radius: 34px;
  background: rgba(244,241,234,.50);
  border: 1px solid rgba(47,47,47,.06);
  z-index: -1;
}
.hero-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(244,241,234,.72);
  border: 1px solid rgba(47,47,47,.10);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .72rem;
  color: rgba(47,47,47,.72);
}
h1{
  font-size: clamp(2.6rem, 4.2vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 18px 0 14px;
}
.lead{
  max-width: 62ch;
  font-size: 1.08rem;
  color: rgba(47,47,47,.76);
  margin: 0;
}
.hero-actions{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 18px;
}
.hero-meta{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  border: 1px solid transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-gold{
  background: rgba(244,241,234,.92);
  border-color: rgba(197,160,89,.65);
  box-shadow: 0 0 0 3px rgba(197,160,89,.10) inset;
}
.btn-gold:hover{ box-shadow: 0 0 0 3px rgba(197,160,89,.16) inset; }
.btn-ghost{
  background: rgba(244,241,234,.40);
  border-color: rgba(47,47,47,.10);
  color: rgba(47,47,47,.82);
}

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(244,241,234,.62);
  border: 1px solid rgba(47,47,47,.10);
  color: rgba(47,47,47,.74);
  font-size: .95rem;
}

/* Cards */
.card{
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(47,47,47,.10);
  border-radius: var(--radius);
  padding: 20px 20px;
  box-shadow: var(--shadow);
}
.card-strong{
  background: rgba(244,241,234,.92);
}
.card-soft{
  background: rgba(255,255,255,.62);
  box-shadow: none;
}
.card-kicker{
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(47,47,47,.62);
  margin-bottom: 10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.card-kicker::before{
  content:"";
  width:6px; height:6px;
  border-radius: 50%;
  background: rgba(197,160,89,.60);
}
.stack{ display:grid; gap: 14px; }
.checklist{ margin: 12px 0 0; padding-left: 18px; color: rgba(47,47,47,.74); }
.checklist li{ margin: 8px 0; }
.micro-cta{ margin-top: 10px; }
.text-link{ font-weight: 800; color: rgba(47,47,47,.86); }
.text-link:hover{ color: var(--accent); }

/* Chapters */
/* Full-screen chapters WITHOUT breaking spacing */
.chapter{
  min-height: 100svh;          /* better than 100vh on mobile browsers */
  padding: clamp(88px, 10vh, 140px) 0;  /* responsive breathing room */
  display: block;              /* IMPORTANT: undo flex */
}

/* fallback for browsers without svh */
@supports not (height: 100svh){
  .chapter{ min-height: 100vh; }
}

.chapter.tinted{
  background: rgba(244,241,234,.84);
  border-top: 1px solid rgba(47,47,47,.06);
  border-bottom: 1px solid rgba(47,47,47,.06);
}
.chapter::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197,160,89,.22), transparent);
  opacity: .55;
}
.chapter-wrap{ display:grid; gap: 24px; }
.chapter-head{ max-width: 78ch; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(47,47,47,.60);
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background: rgba(197,160,89,.60);
}
h2{
  font-size: clamp(1.9rem, 2.4vw, 2.3rem);
  line-height:1.2;
  letter-spacing:-0.015em;
  margin: 10px 0 12px;
}
h3{ margin: 0 0 10px; letter-spacing: -0.01em; }
.subhead{ margin: 16px 0 8px; font-size: 1.05rem; letter-spacing: -0.01em; }

.chapter-body{}
.grid-2{
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 64px; /* was 38px */
  align-items: start;
}

/* Portrait */
.portrait{
  position:relative;
  margin:0;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(47,47,47,.12);
  background: rgba(255,255,255,.6);
}
.portrait img{
  width:100%;
  height: 520px;
  object-fit: cover;
  object-position: 50% 22%;
  display:block;
  filter: saturate(1.02) contrast(1.02);
}
.portrait::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 480px at 30% 18%, rgba(255,255,255,.30), transparent 60%);
  opacity: .7;
}
.portrait-crack{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
}
.portrait-crack::before{
  content:"";
  position:absolute;
  left:-20px;
  top: 18%;
  width: 140%;
  height: 2px;
  background: rgba(197,160,89,.55);
  transform: rotate(12deg);
  border-radius:999px;
  opacity:.55;
}
.portrait-crack::after{
  content:"";
  position:absolute;
  left: 14%;
  top: 44%;
  width: 64%;
  height: 2px;
  background: rgba(197,160,89,.45);
  transform: rotate(-9deg);
  border-radius:999px;
  opacity:.45;
}

/* Credentials strip */
.cred{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 14px 0 16px;
}
.cred-item{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(47,47,47,.10);
  background: rgba(255,255,255,.58);
}
.cred-item span{ width: 20px; display:inline-flex; justify-content:center; }

/* Mini tiles (staggered) */
.tiles-mini{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mini{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(47,47,47,.10);
  border-radius: 20px;
  padding: 14px 14px;
}
.mini-title{ font-weight: 900; margin-bottom: 6px; }
.tiles-mini .mini:nth-child(1){ transform: translateY(2px); }
.tiles-mini .mini:nth-child(2){ transform: translateY(10px); }
.tiles-mini .mini:nth-child(3){ transform: translateY(6px); }
.tiles-mini .mini:nth-child(4){ transform: translateY(14px); }

/* Services */
.service-groups{ display:grid; gap: 22px; }
.group{
  padding: 16px 16px;
  border-radius: 24px;
  background: rgba(255,255,255,.50);
  border: 1px solid rgba(47,47,47,.08);
}
.group-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 1.15rem;
  margin: 0 0 12px;
}
.group-title::before{
  content:"";
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: rgba(197,160,89,.55);
}
.tile-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.tile{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(47,47,47,.10);
  border-radius: 22px;
  padding: 16px 16px;
  transition: border-color .16s ease, transform .16s ease;
}
.tile:hover{
  border-color: rgba(197,160,89,.44);
  transform: translateY(-1px);
}
.tile h4{
  margin:0 0 6px;
  font-size: 1.0rem;
  letter-spacing:-0.01em;
}

.callout{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 16px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(47,47,47,.10);
}
.callout-title{ font-weight: 900; margin-bottom: 4px; }

/* Steps */
.steps{
  margin: 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 10px;
}
.steps li{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(47,47,47,.10);
  border-radius: 20px;
  padding: 14px 14px;
}
.step-title{ font-weight: 900; margin-bottom: 4px; }

/* FAQ */
.faq{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}
.faq-q{
  width:100%;
  text-align:left;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(47,47,47,.10);
  background: rgba(255,255,255,.70);
  font-weight: 900;
  cursor:pointer;
}
.faq-q:hover{ border-color: rgba(197,160,89,.35); }
.faq-a{
  margin-top: -6px;
  padding: 12px 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(47,47,47,.10);
  background: rgba(255,255,255,.62);
  color: rgba(47,47,47,.74);
}
.expect-list{ margin: 0; padding-left: 18px; color: rgba(47,47,47,.74); }
.expect-list li{ margin: 10px 0; }
.note{ margin-top: 10px; }

/* Fees */
.pill-row{ display:flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; }
.price-row{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 0;
  font-weight: 850;
}
.price-num{ color: rgba(47,47,47,.72); }
.divider{
  height:1px;
  background: rgba(47,47,47,.10);
  margin: 10px 0 12px;
}

/* Contact form */
.contact-form{ display:grid; gap: 12px; }
label{ display:grid; gap: 8px; font-weight: 850; }
input, textarea{
  font: inherit;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(47,47,47,.16);
  background: rgba(244,241,234,.70);
}
input:focus, textarea:focus{
  outline:none;
  border-color: rgba(197,160,89,.55);
  box-shadow: 0 0 0 4px rgba(197,160,89,.14);
}

/* Footer */
.footer{
  padding: 34px 0;
  border-top: 1px solid rgba(47,47,47,.08);
  background: rgba(244,241,234,.70);
}
.footer-wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 16px;
}
.footer-links{ display:flex; gap: 14px; }

/* Responsive */
@media (max-width: 1060px){
  :root{ --wrap: min(1100px, 90vw); }
  .hero-wrap{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .tile-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .kintsugi-rail{ display:none; }
  .nav{ padding: 12px 5vw; }
  .wrap{ width: min(1120px, 90vw); }

  .nav-toggle{ display:inline-block; }
  .nav-links{
    position:absolute;
    right: 5vw;
    top: 58px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap: 6px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(244,241,234,.96);
    border: 1px solid rgba(47,47,47,.10);
    width: min(320px, 90vw);
  }
  .nav-links.is-open{ display:flex; }

  .hero-wrap::before{ inset: -12px -10px -12px -10px; border-radius: 26px; }
  .chapter{ padding: 78px 0; }
  .tiles-mini{ grid-template-columns: 1fr; }
  .tiles-mini .mini{ transform:none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .loader-spark{ animation:none; }
}


.portrait img{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5; /* pick what matches your crop */
  object-fit: cover;
  object-position: 50% 100%; /* shift focus downward */
}

/* Hidden defs svg */
.kintsugi-defs{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

/* Thick crack component */
.kintsugi-crack-thick{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.50;
  mix-blend-mode:multiply;
}

.kintsugi-crack-thick svg{
  position:absolute;
  width: min(980px, 84vw);
  height: 320px;
  left: -22vw;
  top: 8%;
  transform: rotate(-8deg);
}

/* shared */
.kintsugi-crack-thick .crack{
  fill:none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* lacquer spread (soft halo) */
.kintsugi-crack-thick .under{
  stroke: rgba(197,160,89,.22);
  stroke-width: 18;
  filter: blur(.7px);
}

/* main line */
.kintsugi-crack-thick .trunk{
  stroke: rgba(197,160,89,.72);
  stroke-width: 8;
  filter: drop-shadow(0 0 0.6px rgba(197,160,89,.25));
}

/* branches */
.kintsugi-crack-thick .branch{
  stroke: rgba(197,160,89,.42);
  stroke-width: 4.2;
  opacity: .75;
}

/* smaller branch variation (optional) */
.kintsugi-crack-thick .b4{
  stroke-width: 3.2;
  opacity: .6;
}



/* Put content above decorative crack */
.chapter .wrap,
.hero .wrap,
.card{
  position: relative;
  z-index: 1;
}

/* Mobile: reduce visual weight */
@media (max-width: 720px){
  .kintsugi-crack-thick{ opacity: .35; }
  .kintsugi-crack-thick svg{ width: 280px; height: 180px; }
}

.contact-box a{
  font-weight: 800;
}

.map-embed{
  position: relative;
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(47,47,47,.10);
  background: rgba(244,241,234,.70);
}

.map-embed iframe{
  width: 100%;
  height: 180px;
  border: 0;
  filter: saturate(.85) contrast(.95);
}

/* Click layer */
.map-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px 12px;
  font-weight: 800;
  font-size: .9rem;
  color: rgba(47,47,47,.85);
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 40%,
    rgba(229,224,216,.85) 100%
  );
}

.map-overlay:hover{
  color: var(--accent);
}

.map-embed::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(197,160,89,.18);
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.brand-logo{
  width: auto;
  height: 28px;
  opacity: .92;
  transform: translateY(1px);
}

:root{
  --wrap: min(1380px, 92vw);  /* container */
  --measure: 68ch;           /* reading width */
}

.chapter-head,
.hero-left{
  max-width: var(--measure);
}

body{ font-size: 18px; } /* try 18px */
.lead{ font-size: 1.18rem; }
.muted{ font-size: 1.02rem; }

.hero-left h1{
  font-size: clamp(3.0rem, 5vw, 4.2rem);
  letter-spacing: -0.03em;
  margin: 18px 0 10px;
}

.lead{
  max-width: 60ch;
  font-size: 1.18rem;
  line-height: 1.7;
}


.chapter{
  min-height: 100svh;
  padding: clamp(140px, 14vh, 220px) 0 clamp(96px, 10vh, 160px);
}


.chapter .chapter-wrap{
  position: relative;
}

.chapter .chapter-wrap::before{
  content:"";
  position:absolute;
  inset: -18px -14px -18px -14px;
  border-radius: 34px;
  background: rgba(244,241,234,.44);
  border: 1px solid rgba(47,47,47,.06);
  z-index: -1;
}

/* tinted chapters: slightly stronger */
.chapter.tinted .chapter-wrap::before{
  background: rgba(244,241,234,.62);
}

.expect-list{
  columns: 2;
  column-gap: 28px;
}
@media (max-width: 720px){
  .expect-list{ columns: 1; }
}

/* HERO image — clean, borderless, centered */
.hero-right{
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-right .card{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.hero .portrait{
  aspect-ratio: 4 / 5;
  max-width: 520px;
  width: 100%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
}

.hero .portrait::after{
  display: none;
}

.hero .portrait img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* ABOUT: left column stacking */
#about .about-left{
  display: grid;
  gap: 18px;
  align-content: start;
}

/* Vzdělání under image should feel attached */
#about .education{
  margin-top: 6px;
}


/* =========================
   ABOUT section layout polish
   (matches .about-left / .about-right HTML)
   ========================= */

#about .grid-2{
  /* give the text column a bit more room */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: start;
}

/* left column stacks image + education */
#about .about-left{
  display: grid;
  gap: 18px;
  align-content: start;
}

/* make the education card feel attached to the portrait */
#about .education{
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
}

/* right column rhythm (reduces “clustered” feeling) */
#about .about-right p{
  margin: 0 0 14px;
}
#about .about-right p + p{
  margin-top: 12px;
}

/* calm the courses card a bit */
#about .courses{
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
}

/* turn the long course list into columns on desktop */
#about .courses .checklist{
  columns: 2;
  column-gap: 22px;
  margin-top: 10px;
}
#about .courses .checklist li{
  break-inside: avoid;
  margin: 6px 0;
}

/* keep the about portrait consistent (hero PNG rules stay separate) */
#about .portrait img{
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 35%;
}

/* responsive */
@media (max-width: 1060px){
  #about .grid-2{
    grid-template-columns: 1fr;
    gap: 44px;
  }
  #about .courses .checklist{
    columns: 1;
  }
}

#about .portrait{
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

#about .portrait::after,
#about .portrait-crack{
  display: none;
}

#about .portrait img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

#about .about-left{
  max-width: 520px;
}


/* ABOUT: KBT link under image */
#about .kbt-link{
  margin-top: 6px;
  padding-left: 6px; /* subtle alignment with card edge */
  color: rgba(47,47,47,.68);
}


/* Fees: right column stack (card + image) */
#fees .conditions-wrap{
  display: grid;
  gap: 18px;
  align-content: start;
}

#fees .office-photo{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(47,47,47,.10);
  background: rgba(255,255,255,.45);
}

#fees .office-photo img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* FEES: alignment polish */
#fees .conditions-wrap{
  display: grid;
  gap: 24px;
  align-content: start;
}

#fees .card.card-soft,
#fees .card.card-strong,
#fees .office-photo{
  border-radius: 24px;
}

#fees .card.card-soft,
#fees .card.card-strong{
  padding: 22px;
}

#fees .office-photo{
  overflow: hidden;
  background: rgba(255,255,255,.35);
  box-shadow: var(--shadow);
  /* border: 1px solid rgba(47,47,47,.08); */ /* optional */
}

#fees .office-photo img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* FEES: make services a tidy equal-height grid */
#fees .services-grid{
  display: grid;
  gap: 18px;
}

#fees .service-card{
  display: grid;
  grid-template-rows: auto auto 1fr; /* title, price line, description */
  padding: 22px;
  border-radius: 24px;
}

/* normalize spacing inside cards */
#fees .service-card .subhead{
  margin: 0 0 10px;
}

#fees .service-card .muted{
  margin: 0;
}

/* keep the price line visually consistent */
#fees .service-card strong{
  display: inline-block;
  margin-bottom: 6px;
}

/* desktop: keep as a single clean column (but equal-height) */
/* If you ever want 2 columns on wide screens, tell me and we’ll flip it */

/* mobile: nothing special needed, already stacks */

/* FEES: equal-height columns */
#fees .grid-2{
  align-items: stretch;
}

#fees .services-grid,
#fees .conditions-wrap{
  display: flex;
  flex-direction: column;
}

#fees .services-grid{
  justify-content: space-between;
}

#fees .office-photo img{
  max-height: 420px;
  object-fit: cover;
}

/* ABOUT: equal-height columns */
#about .grid-2{
  align-items: stretch;
}

#about .about-left,
#about .about-right{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* CONTACT: make the two columns equal height */
#contact .grid-2{
  align-items: stretch;
}

/* Make both grid children stretch and allow flex growth */
#contact .grid-2 > .content,
#contact .grid-2 > .form{
  display: flex;
  flex-direction: column;
  min-height: 0;          /* important so children can shrink/grow */
}

/* Make the left card fill the column height */
#contact .contact-box{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;          /* important */
}

/* Map area should take remaining height under email/address */
#contact .map-embed{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 260px;      /* safety */
}

/* iframe fills the map box */
#contact .map-embed iframe{
  flex: 1;
  width: 100%;
  height: auto;           /* override any fixed height */
  border: 0;
}

/* Fixed kintsugi crack (full width) */
.kintsugi-join{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .65;
  mix-blend-mode: multiply;
}

/* Full-width placement */
.kintsugi-join-svg{
  position: absolute;
  left: -5vw;
  top: 14vh;
  width: 110vw;      /* full bleed */
  height: 320px;
  transform: rotate(-6deg);
  opacity: .9;
}

/* lacquer layers */
.kintsugi-under{
  fill: none;
  stroke: rgba(197,160,89,.16);
  stroke-width: 20;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(.7px);
}

.kintsugi-trunk{
  fill: none;
  stroke: rgba(197,160,89,.78);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 12px rgba(197,160,89,.14))
    drop-shadow(0 0 3px rgba(197,160,89,.16));
}

.kintsugi-branch{
  fill: none;
  stroke: rgba(197,160,89,.40);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .75;
  filter: drop-shadow(0 0 8px rgba(197,160,89,.10));
}

/* Keep content above */
.chapter .wrap,
.hero .wrap,
.card{
  position: relative;
  z-index: 1;
}

/* Mobile tuning */
@media (max-width: 720px){
  .kintsugi-join{ opacity: .45; }
  .kintsugi-join-svg{
    top: 10vh;
    height: 220px;
    transform: rotate(-8deg);
  }
}

/* FEES main grid */
.fees-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 64px;
  align-items: stretch;
}

/* LEFT column */
.fees-left{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* services stack */
.services-grid{
  display: grid;
  gap: 18px;
}

/* conditions fills remaining height if needed */
.fees-left .conditions{
  flex: 1;
}

/* RIGHT column */
.fees-right{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* payment stays compact */
.payment{
  flex-shrink: 0;
}

/* office photo stretches to balance height */
.office-photo{
  flex: 1;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,.35);
  box-shadow: var(--shadow);
}

.office-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile */
@media (max-width: 1060px){
  .fees-grid{
    grid-template-columns: 1fr;
  }

  .office-photo{
    height: auto;
  }

  .office-photo img{
    height: auto;
    aspect-ratio: 16 / 10;
  }
}


/* Contact form helpers */
.hp{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form-status{
  min-height: 1.2em;
}