@font-face{
  font-family:"Patrik Didot";
  src:url("assets/fonts/Didot-Regular.woff2?v=20260828-lining2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Patrik Didot";
  src:url("assets/fonts/Didot-Italic.woff2") format("woff2");
  font-style:italic;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Patrik Didot";
  src:url("assets/fonts/Didot-Bold.woff2") format("woff2");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

:root{
  --black:#111111;
  --ivory:#FBF7EF;
  --gold:#B9934A;
  --tobacco:#7B4F32;
  --green:#163B32;
  --burgundy:#6E1F2E;
  --ink:#1B1A18;
  --muted:#777069;
  --line:rgba(17,17,17,.16);
  --line-dark:rgba(251,247,239,.16);
  --serif:"Patrik Didot", "Didot", "Bodoni 72", serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

html[lang="ru"]{
  --serif:"Prata", "Times New Roman", serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;}
section[id]{scroll-margin-top:0}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--serif);
  font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-synthesis:none;
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
.grain{
  pointer-events:none;position:fixed;inset:0;z-index:50;opacity:.055;mix-blend-mode:multiply;
  background-image:
    radial-gradient(circle at 20% 20%, #000 0 1px, transparent 1px),
    radial-gradient(circle at 80% 40%, #000 0 1px, transparent 1px);
  background-size:19px 23px, 31px 29px;
}
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 42px;
  color:var(--ink);
  transition:color .35s var(--ease);
}
.site-header.on-hero,.site-header.on-method,.site-header.on-sections-3-5{color:var(--ivory)}
.site-header.on-method .brand-sub{color:var(--ivory)}
.brand{display:grid;gap:3px;width:170px;letter-spacing:.06em;text-transform:uppercase}
.brand-logo{display:block;width:170px;height:auto;transition:filter .25s var(--ease)}
.brand-sub{display:block;width:100%;font-size:8px;letter-spacing:.27em;padding:0;text-align:center;white-space:nowrap}
.header-controls{
  display:flex;
  align-items:center;
  gap:14px;
}
.menu-toggle{
  display:none;
  -webkit-appearance:none !important;
  appearance:none !important;
  width:40px;
  height:40px;
  margin:0;
  padding:0;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:inherit;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.menu-toggle:focus,
.menu-toggle:active{
  background:none !important;
  box-shadow:none !important;
  outline:none;
}
.menu-toggle-icon{
  position:relative;
  display:block;
  width:27px;
  height:18px;
}
.menu-toggle-icon i{
  position:absolute;
  left:0;
  display:block;
  width:100%;
  height:1.5px;
  background:currentColor;
  opacity:1;
  transition:transform .3s var(--ease), top .3s var(--ease), opacity .2s ease;
}
.menu-toggle-icon i:nth-child(1){top:1px}
.menu-toggle-icon i:nth-child(2){top:8px}
.menu-toggle-icon i:nth-child(3){top:15px}
.site-header.menu-open .menu-toggle-icon i:nth-child(1){
  top:8px;
  transform:rotate(45deg);
}
.site-header.menu-open .menu-toggle-icon i:nth-child(2){opacity:0}
.site-header.menu-open .menu-toggle-icon i:nth-child(3){
  top:8px;
  transform:rotate(-45deg);
}
.nav{display:flex;align-items:center;gap:25px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0;
  line-height:1;
  opacity:.84;
  transition:opacity .35s var(--ease);
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:.2em;
  bottom:2px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .35s var(--ease);
}
.nav a:hover,
.nav a.is-active{opacity:1}
.nav a:hover::after,
.nav a.is-active::after{transform:scaleX(1)}
.nav-cta{border:0;padding:0}
.lang{
  appearance:none;border:1px solid currentColor;background:transparent;color:inherit;
  padding:7px 9px;font-size:11px;letter-spacing:.18em;cursor:pointer;
}
.hero{
  min-height:100vh;
  position:relative;
  display:grid;
  grid-template-columns:50% 50%;
  align-items:end;
  background:var(--black);
  color:var(--ivory);
  overflow:hidden;
}
.hero-media{
  position:absolute;
  top:132px;
  left:0;
  width:50%;
  height:calc(100% - 132px);
  min-height:0;
  overflow:hidden;
  opacity:.82;
  filter:saturate(.8) contrast(1.06);
  background-image:
    linear-gradient(90deg,rgba(17,17,17,.08),rgba(17,17,17,.02) 88%,rgba(17,17,17,.08)),
    url("assets/hero-suit-custom.jpg?v=20260827-origin");
  background-size:cover,cover;
  background-position:center,50% center;
  background-repeat:no-repeat;
}
.hero-media::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%,transparent 90%,var(--black) 100%);
  pointer-events:none;
}
.hero-media-label{
  position:absolute;
  left:24px;
  bottom:24px;
  z-index:2;
  color:rgba(251,247,239,.82);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:10px;
  background:rgba(17,17,17,.58);
  padding:9px 10px;
}

.hero-copy{
  position:relative;
  z-index:3;
  grid-column:2;
  padding:clamp(150px,18vh,210px) 6vw 8vw 4.25vw;
  max-width:720px;
  align-self:end;
}
.eyebrow,.section-kicker,.meta{
  color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:.34em;font-weight:500;
}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
h1{
  font-size:clamp(44px,5.4vw,88px);line-height:1.02;letter-spacing:-.028em;
  max-width:13ch;
}
.hero-title span{
  display:block;
}

.hero-lead{
  max-width:600px;
  font-size:clamp(18px,1.35vw,22px);
  line-height:1.58;
  color:rgba(251,247,239,.78);
  margin:28px 0 0;
}
.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:36px}
.hero-actions .btn{width:370px;max-width:100%;min-width:0;white-space:nowrap;justify-content:center}
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;
  border:1px solid rgba(251,247,239,.42);text-transform:uppercase;letter-spacing:.18em;font-size:11px;
  transition:color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.btn::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0%;
  background:var(--ivory);
  z-index:-1;
  transition:width .72s var(--ease);
}
.btn:hover::before,
.btn:focus-visible::before{
  width:100%;
}
.btn:hover,
.btn:focus-visible{
  transform:translateY(-2px);
  border-color:var(--ivory);
}
.btn:active{
  transform:translateY(0);
}
.btn.primary{
  background:transparent;
  color:var(--ivory);
  border-color:rgba(251,247,239,.42);
}
.btn.primary:hover,
.btn.primary:focus-visible{
  color:var(--black);
}
.btn.ghost{
  color:var(--ivory);
}
.btn.ghost:hover,
.btn.ghost:focus-visible{
  color:var(--black);
}
.statement{
  padding:12vw 8vw 11vw;
  background:#E8DDC7;
  color:var(--ink);
}
.statement p{
  font-family:var(--serif);font-size:clamp(36px,5.6vw,92px);line-height:1.02;letter-spacing:-.035em;
  max-width:1110px;margin:0 auto;text-align:center;
}
.statement p span{
  display:block;
}
.split{
  display:grid;grid-template-columns:.6fr 1.2fr 1fr;gap:5vw;padding:9vw 7vw;border-top:1px solid var(--line);
}
.split h2,.method h2,.products h2,.journal h2,.appointment h2{
  font-size:clamp(38px,5vw,82px);line-height:1;letter-spacing:-.03em;
}
.atelier-main{
  grid-column:2 / 4;
  max-width:1120px;
}
.atelier-main h2 span{
  display:block;
}

.atelier-intro{
  margin:38px 0 0;
  max-width:930px;
  font-size:18px;
  line-height:1.65;
  color:#4b4640;
}
.atelier-intro span{
  display:block;
}
.atelier-intro span + span{
  margin-top:4px;
}
.copy p{font-size:18px;line-height:1.78;color:#4b4640;margin:0 0 22px}
.media-band{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:#000;
  border-top:1px solid #000;
  border-bottom:1px solid #000;
}
.image-slot{
  min-height:54vh;position:relative;overflow:hidden;background:
    linear-gradient(135deg,rgba(17,17,17,.18),rgba(185,147,74,.10)),
    url("assets/atelier-texture.svg") center/cover no-repeat;
}

.image-slot-01{
  background:
    linear-gradient(135deg,rgba(17,17,17,.10),rgba(185,147,74,.06)),
    url("assets/atelier-slot-01-custom.jpg") 2% center/cover no-repeat;
}
.image-slot-02{
  background:
    linear-gradient(135deg,rgba(17,17,17,.10),rgba(185,147,74,.06)),
    url("assets/atelier-slot-02-custom.jpg") center/cover no-repeat;
}


.image-slot-03{
  background:
    linear-gradient(135deg,rgba(17,17,17,.10),rgba(185,147,74,.06)),
    url("assets/atelier-slot-03-custom.jpg") center/cover no-repeat;
}

.image-slot::after{
  content:attr(data-label);position:absolute;left:24px;bottom:24px;color:rgba(251,247,239,.78);
  text-transform:uppercase;letter-spacing:.2em;font-size:10px;background:rgba(17,17,17,.45);padding:9px 10px;
}
.method{
  padding:10vw 7vw;background:var(--black);color:var(--ivory);
}
.method h2{max-width:850px;margin-top:30px}
.method h2 span{
  display:block;
}

.method-grid{
  margin-top:70px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-dark);
}
.method-grid article{
  padding:38px 30px;
  min-height:300px;
  border-right:1px solid var(--line-dark);
  background:var(--black);
  transition:background-color .45s var(--ease), color .45s var(--ease);
}
.method-grid article:last-child{border-right:0}
.method-grid span{
  font-family:var(--serif);
  color:var(--gold);
  font-size:30px;
  transition:color .45s var(--ease);
}
.method-grid h3{
  font-size:30px;
  margin-top:38px;
  transition:color .45s var(--ease);
}
.method-grid p{
  color:rgba(251,247,239,.68);
  line-height:1.75;
  transition:color .45s var(--ease);
}
.method-grid article:hover{
  background:var(--gold);
  color:var(--black);
}
.method-grid article:hover span,
.method-grid article:hover h3,
.method-grid article:hover p{
  color:var(--black);
}
.products{
  min-height:100vh;
  padding:10vw 7vw 8vw;
  background:var(--tobacco);
  color:var(--ivory);
}
.products h2{
  margin-top:34px;
}
.product-list{margin-top:64px;border-top:1px solid rgba(251,247,239,.22)}
.product-list a{
  display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center;
  padding:28px 0;border-bottom:1px solid rgba(251,247,239,.22);
  transition:color .28s var(--ease), padding-left .28s var(--ease);
}
.product-list a:hover{
  color:var(--gold);
  padding-left:12px;
}
.product-list span{
  display:block;
  min-width:0;
  white-space:nowrap;
  font-family:var(--serif);
  font-size:clamp(32px,4vw,62px);
  line-height:1.05;
  letter-spacing:-.025em;
}
.product-list em{
  padding-left:96px;
  font-style:normal;
  color:rgba(251,247,239,.68);
  font-size:22px;
  letter-spacing:.02em;
}
.quote-panel{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:820px;background:var(--green);color:var(--ivory);
}
.quote-panel .portrait{min-height:820px;opacity:.92;background:linear-gradient(135deg, rgba(8,16,14,.16), rgba(22,59,50,.18)), url("assets/quote-portrait-mono.jpg") 74% center/cover no-repeat;}
.quote-panel blockquote{display:flex;flex-direction:column;justify-content:center;margin:0;padding:7vw}
.quote-panel p{font-family:var(--serif);font-size:clamp(42px,5.5vw,92px);line-height:1;letter-spacing:-.04em;margin:0}
.quote-panel cite{margin-top:36px;color:rgba(251,247,239,.65);font-style:normal;letter-spacing:.18em;text-transform:uppercase;font-size:11px}
.journal{
  padding:10vw 7vw;
  background:var(--burgundy);
  color:var(--ivory);
}
.journal h2{
  margin-top:46px;
}
.journal-intro{
  width:100%;
  max-width:900px;
  margin:22px auto 0;
  text-align:center;
  color:rgba(251,247,239,.72);
  font-size:clamp(18px,1.6vw,24px);
  line-height:1.58;
}
.journal-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:62px;
  background:rgba(251,247,239,.18);
  border:1px solid rgba(251,247,239,.18);
}
.journal-card{
  min-width:0;
  background:rgba(17,17,17,.14);
  transition:background-color .28s var(--ease);
}
.journal-card:hover{
  background:rgba(17,17,17,.28);
}
.journal-card-button{
  width:100%;
  min-height:540px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
}
.journal-card-button img{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  filter:saturate(.72) contrast(1.04);
}
.journal-card-copy{
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:flex-start;
  padding:32px 34px 34px;
}
.journal h3{
  font-size:clamp(28px,2.35vw,40px);
  line-height:1.08;
  margin-top:34px;
}
.journal-read{
  margin-top:auto;
  padding-top:38px;
  color:rgba(251,247,239,.68);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.journal-card-button:focus-visible{
  outline:2px solid var(--ivory);
  outline-offset:-6px;
}

body.modal-open{
  overflow:hidden;
}
html.modal-open{
  overflow:hidden;
}
.journal-modal[hidden]{
  display:none;
}
.journal-modal{
  position:fixed;
  inset:0;
  z-index:90;
  display:grid;
  place-items:center;
  padding:28px;
}
.journal-modal-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(8,8,8,.88);
  cursor:pointer;
}
.journal-modal-panel{
  position:relative;
  z-index:1;
  width:min(1320px,100%);
  height:min(860px,calc(100vh - 56px));
  display:grid;
  grid-template-columns:minmax(340px,.9fr) minmax(420px,1.1fr);
  overflow:hidden;
  background:var(--ivory);
  color:var(--ink);
  box-shadow:0 30px 100px rgba(0,0,0,.45);
}
.journal-modal-close{
  position:absolute;
  top:22px;
  right:24px;
  z-index:3;
  width:46px;
  height:46px;
  border:1px solid rgba(17,17,17,.2);
  background:rgba(251,247,239,.86);
  color:var(--ink);
  cursor:pointer;
  font-size:34px;
  line-height:1;
}
.journal-modal-media{
  min-height:0;
  background:var(--black);
}
.journal-modal-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.78) contrast(1.04);
}
.journal-modal-content{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:clamp(70px,7vw,110px) clamp(44px,6vw,90px) 70px;
}
.journal-modal-content .journal-modal-heading{
  margin-top:28px;
  font-size:clamp(44px,5vw,76px);
  line-height:.98;
  letter-spacing:-.035em;
}
.journal-modal-lead{
  margin:38px 0 0;
  font-size:21px;
  line-height:1.58;
  color:#3f3a35;
}
.journal-modal-body{
  margin-top:34px;
}
.journal-modal-body p{
  margin:0 0 20px;
  font-size:17px;
  line-height:1.75;
  color:#514b45;
}
.appointment{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10vw 7vw;
  background:var(--black);
  color:var(--ivory);
  text-align:center;
}
.appointment-inner{max-width:850px;margin:0 auto}
.appointment p:not(.eyebrow){color:rgba(251,247,239,.72);font-size:19px;line-height:1.7}
.contact-lines{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.contact-lines a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  color:var(--gold);
  border:1px solid rgba(185,147,74,.55);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:
    color .22s var(--ease),
    background-color .22s var(--ease),
    border-color .22s var(--ease),
    transform .14s var(--ease),
    box-shadow .22s var(--ease);
}
.contact-lines a:hover,
.contact-lines a:focus-visible{
  color:var(--black);
  background:var(--gold);
  border-color:var(--gold);
  box-shadow:0 8px 24px rgba(185,147,74,.18);
  transform:translateY(-2px);
}
.contact-lines a:active{
  transform:translateY(0) scale(.97);
  box-shadow:0 3px 10px rgba(185,147,74,.14);
}
.contact-lines a:focus-visible{
  outline:2px solid var(--ivory);
  outline-offset:4px;
}
.site-footer{
  display:flex;justify-content:space-between;gap:20px;padding:26px 42px;background:var(--black);color:var(--gold);
  border-top:1px solid rgba(185,147,74,.35);text-transform:uppercase;letter-spacing:.18em;font-size:10px;
}

/* --- Global helpers (dříve rozházené mezi media queries) --- */
.quote-panel p span{ display:block; }
.quote-panel p .quote-last-line{ white-space:nowrap; font-size:.92em; }
html[lang="en"] .method h2{ max-width:none; }
html[lang="en"] .method h2 .method-second-line{ white-space:nowrap; }

/* Eyebrow: části na jednom řádku s mezerami (platí i pro desktop) */
.hero-eyebrow-line{ display:inline; }
.hero-eyebrow-line:not(:last-child)::after{ content:" "; }


/* ======================================================================
   MOBILE  (≤ 980px) — jeden konsolidovaný blok
   Dřív bylo rozdrobené do ~10 @media bloků + inline <style> v index.html.
   ====================================================================== */
@media (max-width:980px){

  html{background:var(--black);}

  /* --- Hlavička --- */
  .site-header{
    display:flex; align-items:center; justify-content:flex-start;
    padding:16px 20px;
  }
  .brand{
    position:relative; z-index:43;
    width:92px; flex:0 0 92px;
    display:grid; justify-items:center; text-align:center;
  }
  .brand-logo{ width:92px; height:auto; margin:0 auto; }
  .brand-sub{
    width:100%; margin:2px auto 0; padding:0;
    font-size:4.6px; line-height:1.2; letter-spacing:.17em;
    text-align:center; white-space:nowrap;
  }
  .header-controls{ position:relative; z-index:44; margin-left:auto; gap:8px; }

  /* Hamburger (ikona je v HTML tvořená <span>, ne <i>) */
  .menu-toggle{
    display:flex; width:42px; height:42px;
    align-items:center; justify-content:center;
    color:var(--ivory); background:transparent;
  }
  .menu-toggle-icon{ position:relative; display:block; width:27px; height:18px; }
  .menu-toggle-icon > span{
    position:absolute; left:0; display:block; width:27px; height:2px;
    background:var(--ivory); opacity:1;
    transition:top .28s var(--ease), transform .28s var(--ease), opacity .18s ease;
  }
  .menu-toggle-icon > span:nth-child(1){ top:0; }
  .menu-toggle-icon > span:nth-child(2){ top:8px; }
  .menu-toggle-icon > span:nth-child(3){ top:16px; }
  .site-header.menu-open .menu-toggle-icon > span:nth-child(1){ top:8px; transform:rotate(45deg); }
  .site-header.menu-open .menu-toggle-icon > span:nth-child(2){ opacity:0; }
  .site-header.menu-open .menu-toggle-icon > span:nth-child(3){ top:8px; transform:rotate(-45deg); }

  /* Navigace: zavřená = skrytá, otevřená = dropdown pod hamburgerem */
  .nav{ display:none; }
  .site-header.menu-open .nav{
    position:fixed; top:76px; right:66px; z-index:42;
    display:flex; width:min(260px,calc(100vw - 86px));
    flex-direction:column; align-items:stretch; gap:0;
    padding:10px 18px 12px;
    background:rgba(17,17,17,.985); color:var(--ivory);
    border:1px solid rgba(185,147,74,.58);
    box-shadow:0 18px 46px rgba(0,0,0,.42);
  }
  .site-header.menu-open .nav a{
    display:flex; width:100%; height:auto; padding:14px 2px;
    border:0; border-bottom:1px solid rgba(251,247,239,.14);
    font-family:var(--serif); font-size:21px; line-height:1.08;
    letter-spacing:-.01em; text-transform:none; opacity:1;
  }
  .site-header.menu-open .nav a:last-child{ border-bottom:0; }
  .site-header.menu-open .nav a::after{ display:none; }
  .site-header.menu-open .nav .menu-lang{
    display:flex; align-items:center; justify-content:flex-start;
    width:100%; height:auto; margin:8px 0 0; padding:12px 2px 2px;
    color:var(--gold); border:0; background:transparent;
    font-size:12px; letter-spacing:.18em; text-transform:uppercase; cursor:pointer;
  }

  /* --- HERO --- */
  .hero{
    display:block;
    position:relative;
    min-height:100svh;
    /* ↓↓ výška eyebrow textu nad fotkou – klidně si pohraj s tímhle číslem ↓↓ */
    --hero-eyebrow-top:165px;
    /* ↓↓ jak vysoko je spodní blok (Luxus… + lead + butony); vyšší číslo = výš ↓↓ */
    --hero-copy-bottom:180px;
  }
  .hero-media{
    top:88px; left:0; width:100%; height:calc(100% - 88px);
    opacity:.6; background-position:center,42% top;
  }
  /* Ztmavený horní i dolní pruh → eyebrow (nahoře) i popisek sedí na černé,
     fotka zůstává čitelná uprostřed. */
  .hero-media::before{
    background:linear-gradient(180deg,
      rgba(17,17,17,.80) 0%,
      rgba(17,17,17,.34) 26%,
      rgba(17,17,17,.34) 54%,
      rgba(17,17,17,.92) 86%);
  }

  .hero-copy{
    position:relative;
    min-height:100svh;
    display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
    max-width:none; padding:170px 24px var(--hero-copy-bottom,98px); text-align:center;
  }

  /* Eyebrow vytažený nahoru nad fotku (mimo spodní tok, čistě, bez záporných marginů) */
  .hero-eyebrow{
    position:absolute;
    top:var(--hero-eyebrow-top,120px);
    left:24px; right:24px;
    margin:0; width:auto; max-width:none;
    text-align:center; line-height:1.34;
    white-space:nowrap;            /* jeden řádek */
    font-size:min(11px, 2.2vw);    /* sám se zmenší, aby se řádek vešel */
    letter-spacing:.12em;
  }
  .hero-eyebrow .hero-eyebrow-line{ display:inline; }

  /* Vystředění nadpisů a kickerů */
  h1,h2,h3{ width:100%; text-align:center; }
  .hero-title,.split h2,.method h2,.products h2,.journal h2,.appointment h2{
    margin-left:auto; margin-right:auto;
  }
  .hero-title span,.atelier-main h2 span,.method h2 span,
  .statement p span,.quote-panel p span{ text-align:center; }
  .section-kicker{ width:100%; text-align:center; }
  .journal-intro{ margin-left:auto; margin-right:auto; text-align:center; }
  .journal-card-copy{ align-items:center; text-align:center; }

  /* Tlačítka v hero – plynulé „naplnění" při klepnutí (teploměr) */
  .hero-actions .btn::before{ transition-duration:.5s; }
  .hero-actions .btn.is-filling::before{ width:100%; }
  .hero-actions .btn.is-filling{
    color:var(--black); border-color:var(--ivory); transform:none; pointer-events:none;
  }

  /* --- Sekce --- */
  .split{ grid-template-columns:1fr; padding:80px 24px; }
  .atelier-main{ grid-column:auto; }
  .atelier-intro{ margin-top:28px; font-size:17px; }
  .media-band,.method-grid,.quote-panel,.journal-grid{ grid-template-columns:1fr; }
  .method,.journal,.appointment{ padding:80px 24px; }
  .products{ padding:100px 24px 90px; }
  .method-grid article{ border-right:0; border-bottom:1px solid var(--line-dark); }
  .product-list a{ grid-template-columns:1fr; }
  .quote-panel .portrait{ min-height:420px; }
  .contact-lines{ flex-direction:column; align-items:stretch; }
  .contact-lines a{ width:100%; min-height:46px; }

  /* Sekce 02 – metoda, vše na střed */
  #method .method-grid article{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    min-height:0; padding:34px 26px; text-align:center;
  }
  #method .method-grid article > span{ display:block; width:100%; margin:0 auto; text-align:center; }
  #method .method-grid h3{
    width:auto; max-width:12ch; margin:22px auto 0;
    font-size:28px; line-height:1.08; text-align:center; text-wrap:balance;
  }
  #method .method-grid p{
    width:auto; max-width:30ch; margin:18px auto 0;
    line-height:1.65; text-align:center; text-wrap:pretty;
  }

  /* Sekce 03 – šatník na střed */
  #wardrobe,#wardrobe .section-kicker,#wardrobe h2,#wardrobe .product-list,
  #wardrobe .product-list a,#wardrobe .product-list span,#wardrobe .product-list em{
    width:100%; text-align:center;
  }
  #wardrobe .product-list a{ justify-items:center; align-items:center; }
  #wardrobe .product-list em{ padding-left:0; margin-left:0; }

  /* Popisky uvnitř fotek – vystředěné dole */
  .hero-media-label,
  .media-band .image-slot::after,
  .quote-panel .portrait::after,.portrait::after{
    left:50%; right:auto; transform:translateX(-50%);
    width:max-content; max-width:calc(100% - 40px); text-align:center; white-space:normal;
  }
  .hero-media-label{ bottom:24px; }
  .media-band .image-slot::after{ bottom:20px; }

  /* Journal modal na celou obrazovku */
  .journal-card-button{ min-height:0; }
  .journal-modal{ padding:0; }
  .journal-modal-panel{ width:100%; height:100vh; grid-template-columns:1fr; grid-template-rows:40vh 1fr; }
  .journal-modal-media{ aspect-ratio:unset; height:100%; min-height:0; }
  .journal-modal-content{ padding:54px 24px 60px; min-height:0; height:100%; box-sizing:border-box; }
  .journal-modal-content::after{ content:""; display:block; height:32px; }
  .journal-modal-content .journal-modal-heading{ font-size:clamp(38px,10vw,58px); }
  .journal-modal-close{ position:fixed; top:16px; right:16px; }

  /* Patička na střed */
  .site-footer{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; padding:24px 20px; text-align:center;
  }
  .site-footer > span{ display:block; width:100%; margin:0 auto; text-align:center; }

  /* Jazykové doladění pro EN */
  html[lang="en"] .hero-eyebrow{ line-height:1.34; }
  html[lang="en"] .hero-title{ font-size:clamp(44px,13vw,60px); line-height:1.02; }
  html[lang="en"] .hero-lead{ max-width:31ch; margin-left:auto; margin-right:auto; line-height:1.5; }
  html[lang="en"] .method h2 .method-second-line{ white-space:normal; }
  html[lang="en"] #method h2{ max-width:16ch; text-wrap:balance; }
  html[lang="en"] #wardrobe .product-list span{ white-space:normal; text-wrap:balance; line-height:1.08; }
  html[lang="en"] .menu-lang{ min-height:38px; }
}

/* --- Malé telefony (≤ 700px) --- */
@media (max-width:700px){
  .hero-actions{ align-items:stretch; }
  .hero-actions .btn{ width:100%; white-space:normal; }
  #wardrobe .product-list em{ padding-left:0; }
}


/* Mobile-only language placement and compact dropdown */
@media (min-width:981px){
  .nav .menu-lang{
    display:none!important;
  }
  .desktop-lang{
    display:inline-flex!important;
  }
}

@media (max-width:980px){
  .desktop-lang,
  .header-controls > .lang:not(.menu-lang){
    display:none!important;
  }

  .site-header.menu-open .nav,
  .site-header.menu-open #primary-nav{
    width:min(230px,calc(100vw - 32px))!important;
    padding:8px 14px 12px!important;
  }

  .site-header.menu-open .nav a,
  .site-header.menu-open #primary-nav a{
    padding:10px 0!important;
    font-size:18px!important;
    line-height:1.05!important;
  }

  .site-header.menu-open #primary-nav .menu-lang,
  .site-header.menu-open .nav .menu-lang{
    order:-1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    height:auto!important;
    margin:0 0 6px!important;
    padding:8px 0 10px!important;
    border:0!important;
    border-bottom:1px solid rgba(251,247,239,.16)!important;
    background:transparent!important;
    color:var(--gold)!important;
    font-size:11px!important;
    line-height:1!important;
    letter-spacing:.18em!important;
    text-transform:uppercase!important;
  }
}


/* Desktop: menu přisunout doprava k jazykům */
@media (min-width:981px){
  .site-header{
    justify-content:flex-start!important;
  }

  .site-header .brand{
    flex:0 0 auto!important;
  }

  .site-header .nav{
    margin-left:auto!important;
    margin-right:14px!important;
    gap:22px!important;
  }

  .site-header .header-controls,
  .site-header > .lang,
  .site-header .desktop-lang{
    margin-left:0!important;
    flex:0 0 auto!important;
  }
}


/* Desktop: menu font lehce větší */
@media (min-width:981px){
  .site-header .nav{
    font-size:12px!important;
    letter-spacing:.19em!important;
  }

  .site-header .nav a{
    height:36px!important;
  }
}


/* Desktop: menu font větší */
@media (min-width:981px){
  .site-header .nav{
    font-size:13px!important;
    letter-spacing:.18em!important;
  }

  .site-header .nav a{
    height:38px!important;
  }
}


/* Desktop: menu lehce odsadit od jazykového přepínače doleva */
@media (min-width:981px){
  .site-header .nav{
    margin-right:34px!important;
  }
}


/* Desktop: zlatý hero popisek posunout výš */
@media (min-width:981px){
  .hero .hero-eyebrow,
  .hero .eyebrow{
    position:relative!important;
    top:-34px!important;
    margin-bottom:-34px!important;
  }
}


/* Desktop: zlatý hero popisek opravdu výš */
@media (min-width:981px){
  .hero .hero-eyebrow,
  .hero .eyebrow{
    position:relative!important;
    top:auto!important;
    transform:translateY(-64px)!important;
    margin-bottom:-64px!important;
  }
}


/* Desktop: zlatý hero text přesně k hornímu okraji fotografie */
@media (min-width:981px){
  .hero-copy{
    position:static!important;
  }

  .hero .hero-eyebrow,
  .hero .eyebrow.hero-eyebrow{
    position:absolute!important;
    top:132px!important;
    left:calc(50% + 4.25vw)!important;
    right:6vw!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    z-index:6!important;
    text-align:left!important;
    line-height:1.35!important;
    white-space:normal!important;
  }

  .hero .hero-eyebrow .hero-eyebrow-line{
    display:inline!important;
  }

  .hero .hero-eyebrow .hero-eyebrow-line:not(:last-child)::after{
    content:" "!important;
  }
}


/* Desktop: hero fotku trochu říznout nahoře a zlatý text posadit na její novou hranu */
@media (min-width:981px){
  .hero-media{
    top:158px!important;
    height:calc(100% - 158px)!important;
  }

  .hero .hero-eyebrow,
  .hero .eyebrow.hero-eyebrow{
    top:158px!important;
  }
}


/* Desktop: zlatý hero text lehce zvětšit */
@media (min-width:981px){
  .hero .hero-eyebrow,
  .hero .eyebrow.hero-eyebrow{
    font-size:12px!important;
    letter-spacing:.18em!important;
    line-height:1.38!important;
  }
}


/* Desktop: zlatý hero text ještě větší */
@media (min-width:981px){
  .hero .hero-eyebrow,
  .hero .eyebrow.hero-eyebrow{
    font-size:14px!important;
    letter-spacing:.17em!important;
    line-height:1.36!important;
  }
}


/* Šatník: zlatý nadpis */
.wardrobe-gold-heading{
  color:var(--gold)!important;
}


/* Sekce 03: nadpis Osobní šatník zlatě */
#wardrobe h2.wardrobe-gold-heading,
#wardrobe > h2{
  color:var(--gold)!important;
}


/* Osobní šatník: položky otevírají fotku místo skoku na hero */
.product-list button{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  width:100%;
  cursor:pointer;
  text-align:left;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:20px;
  align-items:center;
  padding:28px 0;
  border-bottom:1px solid rgba(251,247,239,.22);
  transition:color .28s var(--ease), padding-left .28s var(--ease);
}
.product-list button:hover,
.product-list button:hover span,
.product-list button:hover em,
.product-list button:focus-visible,
.product-list button:focus-visible span,
.product-list button:focus-visible em{
  color:var(--gold)!important;
}
.product-list button:hover,
.product-list button:focus-visible{
  padding-left:12px;
}
.product-list button:focus-visible{
  outline:1px solid var(--gold);
  outline-offset:8px;
}

/* Staré kotvy v téhle sekci už nejsou potřeba, ale nechávám kompatibilní styl. */
.product-list a:hover span,
.product-list a:hover em{
  color:var(--gold)!important;
}

/* Modal fotky osobního šatníku */
.wardrobe-photo-modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:clamp(18px,3vw,46px);
  background:rgba(17,17,17,.88);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s var(--ease), visibility .28s var(--ease);
}
.wardrobe-photo-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.wardrobe-photo-modal-inner{
  width:min(1180px,100%);
  max-height:min(82vh,860px);
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  background:var(--black);
  border:1px solid rgba(185,147,74,.42);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  overflow:hidden;
}
.wardrobe-photo-image-wrap{
  min-height:520px;
  background:rgba(251,247,239,.05);
}
.wardrobe-photo-image{
  display:block;
  width:100%;
  height:100%;
  min-height:520px;
  object-fit:cover;
}
.wardrobe-photo-caption{
  padding:clamp(32px,4vw,64px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:var(--ivory);
}
.wardrobe-photo-kicker{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:11px;
}
.wardrobe-photo-caption .wardrobe-photo-heading{
  margin-top:24px;
  color:var(--gold);
  font-size:clamp(34px,4vw,64px);
  line-height:.98;
}
.wardrobe-photo-caption p{
  margin:24px 0 0;
  color:rgba(251,247,239,.72);
  font-size:20px;
  line-height:1.55;
}
.wardrobe-photo-caption small{
  margin-top:40px;
  color:rgba(251,247,239,.42);
  font-size:11px;
  line-height:1.5;
}
.wardrobe-photo-close{
  position:absolute;
  top:22px;
  right:24px;
  width:46px;
  height:46px;
  border:1px solid rgba(251,247,239,.36);
  background:rgba(17,17,17,.72);
  color:var(--ivory);
  font-size:30px;
  line-height:1;
  cursor:pointer;
}
.wardrobe-photo-close:hover{
  color:var(--gold);
  border-color:var(--gold);
}

@media (max-width:980px){
  .product-list button{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
  .wardrobe-photo-modal{
    padding:0;
  }
  .wardrobe-photo-modal-inner{
    width:100%;
    height:100%;
    max-height:none;
    grid-template-columns:1fr;
    grid-template-rows:40vh 1fr;
  }
  .wardrobe-photo-image-wrap,
  .wardrobe-photo-image{
    min-height:0;
    height:100%;
  }
  .wardrobe-photo-caption{
    padding:28px 20px 36px;
    justify-content:flex-start;
    overflow:auto;
  }
  .wardrobe-photo-caption .wardrobe-photo-heading{
    font-size:clamp(34px,10vw,54px);
  }
}


/* Modal osobního šatníku: menší text, aby se delší názvy vešly */
.wardrobe-photo-caption .wardrobe-photo-heading{
  font-size:clamp(28px,3vw,44px)!important;
  line-height:1.08!important;
  letter-spacing:-.015em;
  overflow-wrap:normal;
  text-wrap:balance;
}
.wardrobe-photo-caption p{
  font-size:18px!important;
  line-height:1.5!important;
}

@media (max-width:980px){
  .wardrobe-photo-caption .wardrobe-photo-heading{
    font-size:clamp(28px,8vw,42px)!important;
    line-height:1.08!important;
  }
  .wardrobe-photo-caption p{
    font-size:17px!important;
  }
}


/* Modal osobního šatníku: nadpis lehce posunout doleva */
.wardrobe-photo-caption .wardrobe-photo-heading{
  margin-left:-14px!important;
}

@media (max-width:980px){
  .wardrobe-photo-caption .wardrobe-photo-heading{
    margin-left:-8px!important;
  }
}


/* Modal osobního šatníku: sjednocené zarovnání textů */
.wardrobe-photo-caption{
  text-align:left!important;
  align-items:flex-start!important;
}
.wardrobe-photo-caption .wardrobe-photo-heading{
  margin-left:0!important;
  width:100%!important;
  text-align:left!important;
}
.wardrobe-photo-caption p,
.wardrobe-photo-kicker{
  width:100%!important;
  text-align:left!important;
}
.wardrobe-photo-caption small{
  display:none!important;
}


/* Modal: Charakteristické sako lehce doleva */
.wardrobe-photo-modal.is-signature-jacket .wardrobe-photo-caption .wardrobe-photo-heading{
  margin-left:-12px!important;
}

@media (max-width:980px){
  .wardrobe-photo-modal.is-signature-jacket .wardrobe-photo-caption .wardrobe-photo-heading{
    margin-left:-6px!important;
  }
}


/* Modal: u Charakteristického saka posunout jen slovo „Charakteristické“, ne celé „sako“ */
.wardrobe-photo-modal.is-signature-jacket .wardrobe-photo-caption .wardrobe-photo-heading{
  margin-left:0!important;
}
.signature-word-shift{
  position:relative;
  left:-12px;
}

@media (max-width:980px){
  .wardrobe-photo-modal.is-signature-jacket .wardrobe-photo-caption .wardrobe-photo-heading{
    margin-left:0!important;
  }
  .signature-word-shift{
    left:-6px;
  }
}


/* Modal: doladění slova „Charakteristické“ — lehce doprava a menší */
.signature-word-shift{
  left:-4px!important;
  font-size:.92em!important;
}

@media (max-width:980px){
  .signature-word-shift{
    left:-2px!important;
    font-size:.92em!important;
  }
}


/* EN: nadpis šatníku na jeden řádek */
html[lang="en"] #wardrobe h2.wardrobe-gold-heading,
html[lang="en"] #wardrobe > h2{
  white-space:nowrap!important;
  max-width:none!important;
  width:max-content!important;
  font-size:clamp(38px,5vw,82px)!important;
}


/* Sekce 02: delší vysvětlení v kartách filozofie */
.method-grid p{
  font-size:16px;
  line-height:1.65;
}
.method-grid article{
  min-height:340px;
}


/* Konzultace: prémiová žádost o termín */
.appointment-actions{
  margin-top:34px;
}
.appointment-booking-trigger,
.appointment-submit{
  appearance:none;
  border:1px solid var(--gold);
  background:var(--gold);
  color:var(--black);
  min-height:48px;
  padding:0 22px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:11px;
  cursor:pointer;
  transition:transform .16s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease);
}
.appointment-booking-trigger:hover,
.appointment-booking-trigger:focus-visible,
.appointment-submit:hover,
.appointment-submit:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(185,147,74,.18);
}
.appointment-booking-trigger:active,
.appointment-submit:active{
  transform:translateY(0) scale(.98);
}


/* Appointment CTA subtle pulse */
.appointment-booking-trigger{
  animation:appointmentPulse 3.2s ease-in-out infinite;
}
.appointment-booking-trigger:hover,
.appointment-booking-trigger:focus-visible,
.appointment-booking-trigger:active{
  animation-play-state:paused;
}
@keyframes appointmentPulse{
  0%,100%{
    transform:translateY(0) scale(1);
    box-shadow:0 0 0 0 rgba(185,147,74,0), 0 0 0 0 rgba(185,147,74,0);
  }
  50%{
    transform:translateY(-1px) scale(1.015);
    box-shadow:0 0 0 8px rgba(185,147,74,.08), 0 10px 26px rgba(185,147,74,.14);
  }
}
@media (prefers-reduced-motion: reduce){
  .appointment-booking-trigger{
    animation:none;
  }
}
.appointment-modal{
  position:fixed;
  inset:0;
  z-index:140;
  display:grid;
  place-items:center;
  padding:clamp(18px,3vw,46px);
  background:rgba(17,17,17,.88);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s var(--ease), visibility .28s var(--ease);
}
.appointment-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.appointment-modal-panel{
  width:min(1120px,100%);
  max-height:88vh;
  display:grid;
  grid-template-columns:.72fr 1fr;
  background:var(--black);
  border:1px solid rgba(185,147,74,.42);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  overflow:auto;
}
.appointment-modal-copy{
  padding:clamp(34px,4.5vw,68px);
  border-right:1px solid rgba(185,147,74,.24);
  color:var(--ivory);
}
.appointment-modal-copy h2{
  margin-top:24px;
  color:var(--gold);
  font-size:clamp(34px,4vw,60px);
  line-height:1;
}
.appointment-modal-copy p:not(.eyebrow){
  margin-top:28px;
  color:rgba(251,247,239,.72);
  font-size:18px;
  line-height:1.65;
}
.appointment-request-form{
  padding:clamp(28px,4vw,58px);
  display:grid;
  gap:18px;
}
.appointment-request-form label{
  display:grid;
  gap:8px;
  color:rgba(251,247,239,.78);
  text-align:left;
}
.appointment-request-form label > span{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:10px;
}
.appointment-request-form input,
.appointment-request-form select,
.appointment-request-form textarea{
  width:100%;
  border:1px solid rgba(185,147,74,.34);
  background:rgba(251,247,239,.04);
  color:var(--ivory);
  min-height:46px;
  padding:11px 12px;
  font:inherit;
  border-radius:0;
}
.appointment-request-form textarea{
  resize:vertical;
  min-height:104px;
}
.appointment-request-form select option{
  color:var(--black);
}
.appointment-request-form input:focus,
.appointment-request-form select:focus,
.appointment-request-form textarea:focus{
  outline:1px solid var(--gold);
  outline-offset:2px;
}
.appointment-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.appointment-submit{
  margin-top:8px;
  width:100%;
}
.appointment-form-note{
  margin:0;
  color:rgba(251,247,239,.42)!important;
  font-size:11px!important;
  line-height:1.5!important;
}
.appointment-modal-close{
  position:absolute;
  top:22px;
  right:24px;
  width:46px;
  height:46px;
  border:1px solid rgba(251,247,239,.36);
  background:rgba(17,17,17,.72);
  color:var(--ivory);
  font-size:30px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}
.appointment-modal-close:hover{
  color:var(--gold);
  border-color:var(--gold);
}

@media (max-width:980px){
  .appointment-modal{
    padding:0;
  }
  .appointment-modal-panel{
    width:100%;
    height:100%;
    max-height:none;
    grid-template-columns:1fr;
  }
  .appointment-modal-copy{
    border-right:0;
    border-bottom:1px solid rgba(185,147,74,.24);
    padding:54px 24px 28px;
  }
  .appointment-request-form{
    padding:28px 24px 46px;
  }
  .appointment-form-row{
    grid-template-columns:1fr;
  }
}


/* Osobní šatník: sedmá položka pro dámský sartoriální šatník */
.product-list .wardrobe-photo-trigger > span{
  transition:color .28s var(--ease);
}


/* Modal 07: zamknout výšku, aby portrétní fotka neposouvala text dolů */
.wardrobe-photo-modal.is-women-wardrobe .wardrobe-photo-modal-inner{
  height:min(82vh,700px)!important;
  max-height:min(82vh,700px)!important;
}
.wardrobe-photo-modal.is-women-wardrobe .wardrobe-photo-image-wrap{
  height:100%!important;
  min-height:0!important;
}
.wardrobe-photo-modal.is-women-wardrobe .wardrobe-photo-image{
  height:100%!important;
  min-height:0!important;
  object-fit:cover!important;
}
.wardrobe-photo-modal.is-women-wardrobe .wardrobe-photo-caption{
  height:100%!important;
  justify-content:center!important;
}

@media (max-width:980px){
  .wardrobe-photo-modal.is-women-wardrobe .wardrobe-photo-modal-inner{
    height:100%!important;
    max-height:none!important;
  }
}


/* Header: při scrollu dolů zmizí, při scrollu nahoru se vrátí */
.site-header{
  transition:
    color .35s var(--ease),
    transform .32s var(--ease),
    opacity .24s var(--ease)!important;
  will-change:transform, opacity;
}
.site-header.is-hidden-on-scroll{
  transform:translateY(-115%)!important;
  opacity:0!important;
  pointer-events:none;
}
.site-header.menu-open{
  transform:translateY(0)!important;
  opacity:1!important;
  pointer-events:auto;
}


/* Konzultace: na poslední sekci zmizí menu, zůstane jen logo */
.site-header.on-appointment .nav,
.site-header.on-appointment .header-controls{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(-8px)!important;
  transition:
    opacity .24s var(--ease),
    visibility .24s var(--ease),
    transform .24s var(--ease)!important;
}

.site-header.on-appointment .brand{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}


/* Hodnota bespoke: cena a důvod */
.value-section{
  padding:10vw 7vw;
  background:
    linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)),
    url('assets/value-bespoke-background.jpg') 72% top / cover no-repeat;
  color:var(--ink);
  border-top:1px solid rgba(123,79,50,.22);
}
.value-section h2{
  margin-top:30px;
  max-width:980px;
  font-size:clamp(42px,5.6vw,92px);
  line-height:.98;
  letter-spacing:-.035em;
  color:var(--paper);
  text-shadow:none;
}
.value-section h2 span{
  display:block;
}
.cz04-portrait-breaks{display:none;}
.cz04-nonportrait-breaks{display:inline;}
.value-lead{
  margin:36px 0 0;
  max-width:980px;
  font-size:clamp(18px,1.6vw,24px);
  line-height:1.58;
  color:var(--paper);
  text-shadow:none;
}
.value-price-row{
  margin-top:54px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:rgba(123,79,50,.32);
  border:1px solid rgba(123,79,50,.32);
}
.value-price-row > div{
  padding:34px;
  background:#efe8dc;
}
.value-price-row span,
.value-grid article > span{
  display:block;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:10px;
}
.value-price-row strong{
  display:block;
  margin-top:16px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px,4vw,68px);
  line-height:1;
  letter-spacing:-.035em;
}
.value-price-row em{
  display:block;
  margin-top:16px;
  font-style:normal;
  color:#6b6258;
  font-size:15px;
  line-height:1.5;
}
.value-grid{
  margin-top:1px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(123,79,50,.32);
  border:1px solid rgba(123,79,50,.32);
  border-top:0;
}
.value-grid article{
  min-height:330px;
  padding:34px 28px;
  background:#f7f2e9;
}
.value-grid h3{
  margin-top:26px;
  color:var(--ink);
  font-size:clamp(25px,2.25vw,42px);
  line-height:1.02;
  letter-spacing:-.025em;
}
.value-grid p{
  margin:24px 0 0;
  color:#514b45;
  font-size:16px;
  line-height:1.68;
}

@media (max-width:980px){
  .value-section{
    padding:92px 24px;
    text-align:center;
  }
  .value-section h2,
  .value-lead{
    margin-left:auto;
    margin-right:auto;
  }
  .value-price-row,
  .value-grid{
    grid-template-columns:1fr;
  }
  .value-grid article{
    min-height:0;
  }
}


/* Hodnota bespoke: verze bez konkrétních cen */
.value-lead-second{
  margin-top:20px!important;
}
.value-section .value-price-row{
  display:none!important;
}
.value-section .value-grid{
  margin-top:70px!important;
  border-top:1px solid rgba(123,79,50,.32)!important;
}


/* Hodnota bespoke: nadpisy pilířů vždy ve dvou řádcích */
.value-grid h3 br{
  display:block;
}
.value-grid h3{
  min-height:2.1em;
}


/* Desktop: menu s přidanou položkou Bespoke */
@media (min-width:981px){
  .nav{
    gap:21px!important;
  }
}


/* Bespoke je na světlém pozadí: menu zde musí být černé */
.site-header.on-value{
  color:var(--ink)!important;
}
.site-header.on-value .nav,
.site-header.on-value .nav a,
.site-header.on-value .lang,
.site-header.on-value .brand-sub,
.site-header.on-value .menu-toggle{
  color:var(--ink)!important;
}


/* Sekce 02: EN „Long-term wardrobe“ na jeden řádek */
html[lang="en"] .method-grid h3[data-en="Long-term wardrobe"]{
  white-space:nowrap!important;
  font-size:clamp(25px,2.35vw,40px)!important;
  letter-spacing:-.03em!important;
}


/* Sekce 02: EN „Long-term wardrobe“ stejná velikost jako ostatní, jen bez zalomení */
html[lang="en"] .method-grid h3[data-en="Long-term wardrobe"]{
  white-space:nowrap!important;
  font-size:inherit!important;
  letter-spacing:inherit!important;
}


/* Sekce 02: EN „Long-term wardrobe“ opravdu stejná velikost jako ostatní h3 */
html[lang="en"] #method .method-grid h3[data-en="Long-term wardrobe"]{
  white-space:nowrap!important;
  font-size:30px!important;
  line-height:1!important;
  letter-spacing:0!important;
  max-width:none!important;
}


/* Sekce 02: EN „Long-term wardrobe“ — stejná mezera k navazujícímu textu */
html[lang="en"] #method .method-grid h3[data-en="Long-term wardrobe"] + p{
  margin-top:32px!important;
}


/* Sekce 02: EN „Long-term wardrobe“ — vráceno na stejné metriky jako ostatní h3 */
html[lang="en"] #method .method-grid h3[data-en="Long-term wardrobe"]{
  white-space:nowrap!important;
  font-size:30px!important;
  line-height:normal!important;
  letter-spacing:normal!important;
  max-width:none!important;
}
html[lang="en"] #method .method-grid h3[data-en="Long-term wardrobe"] + p{
  margin-top:1em!important;
}


/* Sekce 02: čísla 01–04 sjednocená podle sekce 04 */
#method .method-grid article > span{
  display:block!important;
  font-family:inherit!important;
  color:var(--gold)!important;
  text-transform:uppercase!important;
  letter-spacing:.28em!important;
  font-size:10px!important;
  line-height:1.2!important;
}
#method .method-grid article:hover > span{
  color:var(--black)!important;
}


/* Sekce 04: zvýraznění karet po vzoru sekce 02 */
#value .value-grid article{
  transition:background-color .45s var(--ease), color .45s var(--ease)!important;
}
#value .value-grid article > span,
#value .value-grid article h3,
#value .value-grid article p{
  transition:color .45s var(--ease)!important;
}
#value .value-grid article:hover{
  background:var(--gold)!important;
  color:var(--black)!important;
}
#value .value-grid article:hover > span,
#value .value-grid article:hover h3,
#value .value-grid article:hover p{
  color:var(--black)!important;
}


/* Sekce 02: mezera mezi číslem a nadpisem sjednocená podle sekce 04 */
#method .method-grid h3{
  margin-top:26px!important;
}


/* Sekce 02: kratší karty, méně prázdného prostoru dole */
#method .method-grid article{
  min-height:300px!important;
  padding-bottom:30px!important;
}


/* Sekce 05: zvýraznění karet zlatou po vzoru sekcí 02/04 */
#journal .journal-card{
  transition:background-color .45s var(--ease), color .45s var(--ease)!important;
}
#journal .journal-card h3,
#journal .journal-card .journal-read{
  transition:color .45s var(--ease)!important;
}
#journal .journal-card:hover{
  background:var(--gold)!important;
  color:var(--black)!important;
}
#journal .journal-card:hover h3,
#journal .journal-card:hover .journal-read{
  color:var(--black)!important;
}


/* Sekce 01: výraznější ateliérový úvod */
#atelier .atelier-main{
  max-width:1280px!important;
}
#atelier .atelier-main h2{
  font-size:clamp(48px,6.15vw,104px)!important;
  line-height:.96!important;
  letter-spacing:-.04em!important;
}
#atelier .atelier-intro{
  max-width:1040px!important;
  font-size:17px!important;
  line-height:1.62!important;
}
#atelier .atelier-intro span + span{
  margin-top:6px!important;
}

@media (max-width:980px){
  #atelier .atelier-main h2{
    font-size:clamp(42px,12vw,64px)!important;
    line-height:1.02!important;
  }
  #atelier .atelier-intro{
    font-size:16px!important;
    line-height:1.58!important;
  }
}


/* Sekce 05: klidné základní pozadí + čitelné zlaté zvýraznění */
#journal .journal-card{
  background:transparent!important;
}
#journal .journal-card .meta,
#journal .journal-card h3,
#journal .journal-card .journal-read{
  transition:color .45s var(--ease)!important;
}
#journal .journal-card:hover{
  background:var(--gold)!important;
  color:var(--black)!important;
}
#journal .journal-card:hover .meta,
#journal .journal-card:hover h3,
#journal .journal-card:hover .journal-read{
  color:var(--black)!important;
}


/* Sekce 05: běžné karty bez světlejšího panelu, pouze jemné oddělení mezi kartami */
#journal .journal-grid{
  background:rgba(251,247,239,.18)!important;
}
#journal .journal-card{
  background:var(--burgundy)!important;
}
#journal .journal-card:hover{
  background:var(--gold)!important;
}
#journal .journal-card:hover .meta,
#journal .journal-card:hover h3,
#journal .journal-card:hover .journal-read{
  color:var(--black)!important;
}




/* Mobilní sekce 01: nadpis přesně na 3 řádky, třetí řádek = poslední 2 slova */
#atelier .atelier-title-mobile-line{
  display:none!important;
}
@media (max-width:980px){
  #atelier .atelier-title-desktop-line{
    display:none!important;
  }
  #atelier .atelier-title-mobile-line{
    display:block!important;
  }
  #atelier .atelier-title-mobile-last{
    white-space:nowrap!important;
    font-size:.94em!important;
    letter-spacing:-.045em!important;
  }
}
@media (max-width:420px){
  #atelier .atelier-title-mobile-last{
    font-size:.86em!important;
  }
}


/* Mobilní Bespoke: zalomení nadpisu po „střih“ */
#value .value-title-mobile-line{
  display:none!important;
}
@media (max-width:980px){
  #value .value-title-desktop-line{
    display:none!important;
  }
  #value .value-title-mobile-line{
    display:block!important;
  }
  #value .value-title-mobile-last{
    white-space:nowrap!important;
  }
}


@media (max-width:980px){
  .value-section{
    background:
      linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)),
      url('assets/value-bespoke-background.jpg') 68% top / cover no-repeat;
  }
}


/* Bespoke: slonová kost 85 %, texty bez stínu */
#value .value-section,
.value-section{
}
#value .value-title,
#value .value-section h2,
#value .value-lead,
#value .section-kicker{
  text-shadow:none!important;
}

/* Sekce 01 – foto pozadí s bílým 85% overlay */
#atelier{
  background:
    linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)),
    url("assets/atelier-section-01-cuffs.jpg") 42% 46% / cover no-repeat !important;
}
#atelier .section-kicker,
#atelier h2,
#atelier .atelier-intro,
#atelier .atelier-intro span{
  position:relative;
  z-index:1;
}



/* Bespoke: bílá 85 %, bez shadow */
#value .value-title,
#value .value-section h2,
#value .value-lead,
#value .section-kicker{
  text-shadow:none!important;
}




/* Hero: třetí button bez posunu textu — přesně šířka původních buttonů */
.hero-actions{
  position:relative!important;
}
.hero-actions .hero-bespoke-button{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  margin-top:0!important;
  width:370px!important;
  min-width:370px!important;
  max-width:370px!important;
  justify-content:center!important;
}
@media (max-width:980px){
  .hero-actions .hero-bespoke-button{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
}


/* Mobile EN width fix */
@media (max-width:980px){
  html[lang="en"] #wardrobe h2.wardrobe-gold-heading,
  html[lang="en"] #wardrobe > h2{
    white-space:normal!important;
    width:auto!important;
    max-width:100%!important;
    text-wrap:balance!important;
  }

  html[lang="en"] #method .method-grid h3[data-en="Long-term wardrobe"],
  html[lang="en"] #value .value-title{
    max-width:100%!important;
    width:auto!important;
  }

  body{
    overflow-x:hidden!important;
  }
}




/* Claim reveal animation — výška jako 01 Atelier, text plynule v řádcích */
.statement{
  position:relative;
  padding:9vw 7vw!important;
  min-height:auto!important;
  display:flex;
  align-items:center;
}

.statement p{
  max-width:1180px!important;
}

.statement p > span{
  display:inline!important;
}

.statement p > span::after{
  content:" ";
}

.statement p > span:last-child::after{
  content:"";
}

.statement .statement-word{
  display:inline-block!important;
  opacity:0;
  transform:translateY(.55em);
  filter:blur(6px);
  will-change:transform,opacity,filter;
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform 1.05s cubic-bezier(.22,1,.36,1),
    filter 1.05s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--claim-delay,0s);
  margin-right:.16em;
}

.statement.is-visible .statement-word{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

@media (max-width:980px){
  .statement{
    padding:80px 24px!important;
    min-height:auto!important;
  }

  .statement p{
    font-size:clamp(38px,9.2vw,62px)!important;
    line-height:1.08!important;
    max-width:100%!important;
  }
}


/* Claim reveal animation — větší font */
.statement p{
  font-size:clamp(48px,6.45vw,108px)!important;
  line-height:1.02!important;
}

@media (max-width:980px){
  .statement p{
    font-size:clamp(42px,10.6vw,70px)!important;
    line-height:1.06!important;
  }
}


/* Mobile menu icon color follows header */
.site-header .menu-toggle{
  color:inherit!important;
}
.menu-toggle-icon > span{
  background:currentColor!important;
}
.site-header.menu-open .menu-toggle{
  color:var(--ivory)!important;
}

/* EN mobile 01: držet poslední řádek bez zalomení po not */
@media (max-width:980px){
  html[lang="en"] #atelier .atelier-title-mobile-last{
    white-space:nowrap!important;
    font-size:.74em!important;
    letter-spacing:-.055em!important;
  }
}
@media (max-width:420px){
  html[lang="en"] #atelier .atelier-title-mobile-last{
    font-size:.68em!important;
  }
}


/* EN 01 break after do */
@media (max-width:980px){
  html[lang="en"] #atelier .atelier-title-mobile-last{
    white-space:nowrap!important;
    font-size:1em!important;
    letter-spacing:-.045em!important;
  }
}
@media (max-width:420px){
  html[lang="en"] #atelier .atelier-title-mobile-last{
    font-size:.92em!important;
  }
}


/* Appointment CTA larger font */
.appointment .btn,
#appointment .btn,
.appointment button,
#appointment button{
  font-size:14px!important;
  letter-spacing:.16em!important;
}

@media (max-width:980px){
  .appointment .btn,
  #appointment .btn,
  .appointment button,
  #appointment button{
    font-size:14px!important;
    letter-spacing:.14em!important;
  }
}

/* Final hero simplification: hide eyebrow + lead in all variants, enlarge claim */
.hero .hero-eyebrow,
.hero .hero-lead{
  display:none !important;
}

.hero .hero-title{
  font-size:clamp(54px, 6.8vw, 108px) !important;
  line-height:1.01 !important;
  max-width:12ch !important;
}

@media (max-width:980px){
  .hero .hero-title{
    font-size:clamp(52px, 14vw, 74px) !important;
    line-height:1.02 !important;
    max-width:10ch !important;
  }
}


/* Hero claim desktop slightly higher */
@media (min-width:981px){
  .hero .hero-title{
    position:relative!important;
    transform:translateY(-34px)!important;
  }
}


/* Hero old texts hard hidden */
.hero .hero-eyebrow,
.hero .hero-lead{
  display:none!important;
  visibility:hidden!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}


/* Hero white treatment */
.hero .hero-title,
.hero .hero-title span{
  color:var(--ivory)!important;
}

.site-header.on-hero,
.site-header.on-hero .nav,
.site-header.on-hero .nav a,
.site-header.on-hero .lang,
.site-header.on-hero .brand-sub,
.site-header.on-hero .menu-toggle{
  color:var(--ivory)!important;
}

.site-header.on-hero .menu-toggle-icon > span{
  background:currentColor!important;
}

.hero-actions .btn{
  color:var(--gold)!important;
  border-color:rgba(185,147,74,.78)!important;
}

.hero-actions .btn::before{
  background:var(--gold)!important;
}

.hero-actions .btn:hover,
.hero-actions .btn:focus-visible,
.hero-actions .btn.is-filling{
  color:var(--black)!important;
  border-color:var(--gold)!important;
}

.hero-actions .btn.primary{
  background:transparent!important;
  color:var(--gold)!important;
  border-color:rgba(185,147,74,.78)!important;
}

.hero-actions .btn.primary:hover,
.hero-actions .btn.primary:focus-visible{
  color:var(--black)!important;
}


/* Hero claim reveal animation */
.hero .hero-title span{
  opacity:0;
  transform:translateY(.55em);
  filter:blur(6px);
  will-change:transform,opacity,filter;
  animation:heroClaimReveal 1.05s cubic-bezier(.22,1,.36,1) forwards;
}
.hero .hero-title span:nth-child(1){ animation-delay:.18s; }
.hero .hero-title span:nth-child(2){ animation-delay:.38s; }
.hero .hero-title span:nth-child(3){ animation-delay:.58s; }

@keyframes heroClaimReveal{
  to{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .hero .hero-title span{
    opacity:1;
    transform:none;
    filter:none;
    animation:none;
  }
}


/* Mobile hero claim slightly higher */
@media (max-width:980px){
  .hero{
    --hero-copy-bottom:180px!important;
  }
}


/* Hero thermometer buttons medium font */
.hero-actions .btn{
  font-size:13px!important;
  letter-spacing:.15em!important;
}

@media (max-width:980px){
  .hero-actions .btn{
    font-size:13px!important;
    letter-spacing:.13em!important;
  }
}


/* Quote panel reveal animation — stejný luxusní reveal jako claim, o něco větší */
.quote-panel p{
  font-size:clamp(45px,5.75vw,98px)!important;
  line-height:1.02!important;
}

.quote-panel .statement-word{
  display:inline-block!important;
  opacity:0;
  transform:translateY(.55em);
  filter:blur(6px);
  will-change:transform,opacity,filter;
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform 1.05s cubic-bezier(.22,1,.36,1),
    filter 1.05s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--claim-delay,0s);
  margin-right:.16em;
}

.quote-panel.is-visible .statement-word{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

@media (max-width:980px){
  .quote-panel p{
    font-size:clamp(44px,9.8vw,68px)!important;
    line-height:1.04!important;
  }
}

@media (prefers-reduced-motion: reduce){
  .quote-panel .statement-word{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
}



/* Mobile EN quote exact line breaks */
@media (max-width:980px){
  html[lang="en"] .quote-panel blockquote p > span{
    display:block!important;
  }

  html[lang="en"] .quote-panel blockquote p > span::after{
    content:""!important;
  }

  html[lang="en"] .quote-panel blockquote p > span:nth-child(1),
  html[lang="en"] .quote-panel blockquote p > span:nth-child(2),
  html[lang="en"] .quote-panel blockquote p > span:nth-child(3),
  html[lang="en"] .quote-panel blockquote p > span:nth-child(4){
    white-space:nowrap!important;
  }
}


/* Mobile EN quote slightly larger while preserving exact line breaks */
@media (max-width:980px){
  html[lang="en"] .quote-panel blockquote{
    padding:7vw 6vw!important;
  }

  html[lang="en"] .quote-panel p{
    font-size:clamp(46px,10.2vw,71px)!important;
    line-height:1.03!important;
    letter-spacing:-.045em!important;
  }
}


/* CZ quote first line keep together */
html[lang="cs"] .quote-panel blockquote p > span:nth-child(1){
  white-space:nowrap!important;
}


/* Mobile method title harmonized */
.method-title-mobile{
  display:none;
}

@media (max-width:980px){
  .method-title-desktop{
    display:none;
  }

  .method-title-mobile{
    display:block;
  }

  .method-title-mobile span{
    display:block!important;
    text-align:center!important;
  }
}


/* Mobile method title exact 4 lines */
@media (max-width:980px){
  .method-title-mobile{
    font-size:clamp(44px,11vw,66px)!important;
    line-height:.96!important;
    margin-top:34px!important;
  }
  .method-title-mobile span{
    display:block!important;
    white-space:nowrap!important;
  }
}


/* Mobile dropdown always ivory */
@media (max-width:980px){
  .site-header.menu-open #primary-nav,
  .site-header.menu-open #primary-nav a,
  .site-header.menu-open #primary-nav .lang,
  .site-header.menu-open #primary-nav .menu-lang{
    color:var(--ivory)!important;
  }

  .site-header.menu-open #primary-nav a{
    opacity:1!important;
  }
}


/* Mobile dropdown language stays gold */
@media (max-width:980px){
  .site-header.menu-open #primary-nav .menu-lang,
  .site-header.menu-open .nav .menu-lang{
    color:var(--gold)!important;
  }
}


/* Modal osobního šatníku: delší popisný text (lead + odstavce) */
.wardrobe-photo-modal.has-body .wardrobe-photo-caption{
  justify-content:flex-start !important;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
@media (min-width:981px){
  /* desktop: caption je grid-buňka → strop výšky, aby se dalo scrollovat */
  .wardrobe-photo-modal.has-body .wardrobe-photo-caption{ max-height:min(82vh,860px); }
}
/* krátký poetický podtitulek nahrazen leadem uživatelského textu */
.wardrobe-photo-modal.has-body .wardrobe-photo-caption > p{ display:none !important; }

.wardrobe-photo-caption .wardrobe-photo-lead{
  margin:22px 0 18px !important;
  color:var(--ivory) !important;
  font-family:var(--serif) !important;
  font-size:clamp(19px,1.7vw,23px) !important;
  line-height:1.34 !important;
}
.wardrobe-photo-caption .wardrobe-photo-body{ margin-top:20px; }
.wardrobe-photo-caption .wardrobe-photo-body p:not(.wardrobe-photo-lead){
  margin:0 0 13px !important;
  color:rgba(251,247,239,.72) !important;
  font-size:15px !important;
  line-height:1.72 !important;
}
.wardrobe-photo-caption .wardrobe-photo-body p:not(.wardrobe-photo-lead):last-child{ margin-bottom:0 !important; }
/* první odstavec o ~13 % větší a lehce světlejší – prémiovější náběh */
.wardrobe-photo-caption .wardrobe-photo-body .wardrobe-photo-lead + p{
  font-size:17px !important;
  line-height:1.66 !important;
  color:rgba(251,247,239,.84) !important;
}

@media (max-width:980px){
  .wardrobe-photo-caption .wardrobe-photo-lead{ font-size:19px !important; }
  .wardrobe-photo-caption .wardrobe-photo-body p:not(.wardrobe-photo-lead){ font-size:14.5px !important; }
  .wardrobe-photo-caption .wardrobe-photo-body .wardrobe-photo-lead + p{ font-size:16px !important; }
}


/* =====================================================================
   FLIP KARTY – sekce 02 (Filozofie) a 04 (Bespoke)
   Klik / Enter otočí kartu v ose Y a odhalí prémiový rub s ikonou.
   ===================================================================== */
.method-grid,
.value-grid{ perspective:1700px; }

.method-grid .flip-card,
.value-grid .flip-card{
  position:relative;
  cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.75,.2,1);
  outline:none;
}
.method-grid .flip-card.is-flipped,
.value-grid .flip-card.is-flipped{ transform:rotateY(180deg); }

/* líc = původní přímí potomci; skryjeme jejich odvrácenou stranu */
.flip-card > *{ backface-visibility:hidden; -webkit-backface-visibility:hidden; }

/* rub – absolutní překryv přes celou kartu */
.flip-back{
  position:absolute; inset:0;
  transform:rotateY(180deg);
  background:var(--gold); color:var(--black);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:16px; padding:38px 30px;
  text-align:left;
}
.value-grid .flip-back{ padding:34px 28px; }
.flip-back .flip-icon{ width:46px; height:46px; color:var(--black); flex:0 0 auto; }
.flip-back-value{
  font-family:var(--serif);
  font-size:clamp(34px,3vw,46px); line-height:1; letter-spacing:-.01em;
}
.flip-back-note{
  margin:0; max-width:24ch;
  color:rgba(17,17,17,.74); font-size:15px; line-height:1.6;
}

/* nápověda k otočení (jemné kolečko v rohu) */
.flip-hint{
  position:absolute; right:20px; bottom:18px;
  width:26px; height:26px; opacity:.3; pointer-events:none;
  transition:opacity .3s var(--ease), transform .5s var(--ease);
}
.method-grid .flip-hint{ color:var(--gold); }
.value-grid .flip-hint{ color:#7b4f32; }
.flip-hint svg{ width:100%; height:100%; display:block; }
.flip-card:hover .flip-hint,
.flip-card:focus-visible .flip-hint{ opacity:.9; transform:rotate(-45deg); }
.flip-card.is-flipped .flip-hint{ opacity:0; }
.flip-card:focus-visible{ box-shadow:inset 0 0 0 2px rgba(185,147,74,.55); }

/* vypnout staré „rozsvícení" celé karty na hover (gold je teď rub) */
.method-grid article:hover{ background:var(--black); color:inherit; }
.method-grid article:hover span{ color:var(--gold); }
.method-grid article:hover h3{ color:var(--ivory); }
.method-grid article:hover p{ color:rgba(251,247,239,.68); }

@media (max-width:980px){
  .flip-back{ padding:30px 24px; }
  .value-grid .flip-back{ padding:30px 24px; }
  .flip-back .flip-icon{ width:40px; height:40px; }
  .flip-hint{ right:16px; bottom:14px; }
}
@media (prefers-reduced-motion:reduce){
  .method-grid .flip-card,.value-grid .flip-card{ transition:transform .001s; }
}

/* =====================================================================
   02 / 04 — finální luxusní sazba rubů flip karet
   ===================================================================== */

/* 02: stejná drobná mezera mezi názvem a popisem i u poslední karty */
#method .method-grid h3{
  margin-bottom:0!important;
}
#method .method-grid h3 + p,
#method .method-grid article:last-child h3 + p{
  margin-top:18px!important;
}

/* 02: klidnější, světlejší rub místo jednolité zlaté plochy */
#method .method-grid .flip-back{
  overflow:hidden;
  justify-content:center;
  gap:18px;
  padding:36px 30px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.48),rgba(255,255,255,0) 44%),
    linear-gradient(145deg,#f5efe5 0%,#e7dccb 100%);
  color:var(--black)!important;
  box-shadow:
    inset 0 0 0 1px rgba(123,79,50,.28),
    inset 0 0 0 8px rgba(255,255,255,.18);
}
#method .method-grid .flip-back::before{
  content:"";
  position:absolute;
  top:0;
  left:30px;
  width:68px;
  height:3px;
  background:var(--gold);
}
#method .method-grid .flip-back .flip-icon{
  width:48px;
  height:48px;
  color:#7b4f32!important;
}
#method .method-grid .flip-back .flip-back-value{
  display:block!important;
  width:auto!important;
  margin:0!important;
  color:var(--black)!important;
  font-family:var(--serif)!important;
  font-size:clamp(36px,3vw,48px)!important;
  line-height:1!important;
  letter-spacing:-.025em!important;
  text-transform:none!important;
  white-space:nowrap;
}
#method .method-grid .flip-back .flip-back-note{
  margin:0!important;
  max-width:27ch;
  color:rgba(17,17,17,.78)!important;
  font-size:20px!important;
  line-height:1.55!important;
}

/* 04: výraznější doplňkové texty na nových rubových kartách */
#value .value-grid .flip-back .flip-back-note{
  margin:0!important;
  max-width:27ch;
  color:rgba(17,17,17,.80)!important;
  font-size:18px!important;
  line-height:1.55!important;
}
#value .value-grid .flip-back .flip-back-value{
  color:var(--black)!important;
  font-size:clamp(34px,2.7vw,44px)!important;
  line-height:1!important;
}
#value .value-grid article:last-child .flip-back-value{
  white-space:nowrap!important;
  font-size:clamp(28px,2.3vw,38px)!important;
  letter-spacing:-.025em!important;
}


/* RU only: section 02 cream cards 03–04 back notes must stay within two lines */
@media (min-width:981px){
  html[lang="ru"] #method .method-grid article:nth-child(3) .flip-back-note,
  html[lang="ru"] #method .method-grid article:nth-child(4) .flip-back-note{
    font-size:18px!important;
    line-height:1.46!important;
    max-width:30ch!important;
    letter-spacing:-.01em!important;
  }
}
@media (max-width:980px){
  html[lang="ru"] #method .method-grid article:nth-child(3) .flip-back-note,
  html[lang="ru"] #method .method-grid article:nth-child(4) .flip-back-note{
    font-size:17px!important;
    line-height:1.44!important;
    max-width:30ch!important;
    letter-spacing:-.01em!important;
  }
}

@media (max-width:980px){
  #method .method-grid .flip-back{
    gap:16px;
    padding:34px 26px;
  }
  #method .method-grid .flip-back::before{
    left:26px;
  }
  #method .method-grid .flip-back .flip-back-value{
    font-size:clamp(34px,9vw,46px)!important;
  }
  #method .method-grid .flip-back .flip-back-note{
    font-size:18px!important;
  }
  #value .value-grid .flip-back .flip-back-note{
    font-size:17px!important;
  }
  #value .value-grid article:last-child .flip-back-value{
    font-size:clamp(28px,8vw,38px)!important;
  }
}


/* =====================================================================
   02 — návrat zlatého rozsvícení líce + černé časové ikony
   ===================================================================== */
#method .method-grid article.flip-card:hover:not(.is-flipped),
#method .method-grid article.flip-card:focus-visible:not(.is-flipped),
#method .method-grid article.flip-card.is-flip-pointer-held:not(.is-flipped){
  background:var(--gold)!important;
  color:var(--black)!important;
}
#method .method-grid article.flip-card:hover:not(.is-flipped) > span,
#method .method-grid article.flip-card:hover:not(.is-flipped) > h3,
#method .method-grid article.flip-card:hover:not(.is-flipped) > p,
#method .method-grid article.flip-card:focus-visible:not(.is-flipped) > span,
#method .method-grid article.flip-card:focus-visible:not(.is-flipped) > h3,
#method .method-grid article.flip-card:focus-visible:not(.is-flipped) > p,
#method .method-grid article.flip-card.is-flip-pointer-held:not(.is-flipped) > span,
#method .method-grid article.flip-card.is-flip-pointer-held:not(.is-flipped) > h3,
#method .method-grid article.flip-card.is-flip-pointer-held:not(.is-flipped) > p{
  color:var(--black)!important;
}
#method .method-grid .flip-back .flip-icon{
  color:var(--black)!important;
}

/* 02: téměř neznatelně větší mezera mezi třetí a čtvrtou kartou */
@media (min-width:981px){
  #method .method-grid article:nth-child(4){
    margin-left:1px;
  }
}

/* =====================================================================
   04 — flip karty sladěné se sekcí 02, ale s inverzním luxusním rubem
   ===================================================================== */
#value .value-grid{
  perspective:1700px!important;
}
#value .value-grid .flip-card{
  transform-style:preserve-3d!important;
  transform-origin:center center!important;
  transition:transform .8s cubic-bezier(.2,.75,.2,1)!important;
  will-change:transform;
}
#value .value-grid .flip-card.is-flipped{
  transform:rotateY(180deg)!important;
}
#value .value-grid .flip-back{
  position:absolute;
  inset:0;
  transform:rotateY(180deg)!important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
  justify-content:center;
  gap:18px;
  padding:36px 30px;
  background: linear-gradient(145deg,#171717 0%,#050505 100%);
  color:var(--ivory)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 0 8px rgba(255,255,255,.03);
}
#value .value-grid .flip-back::before{
  content:"";
  position:absolute;
  top:0;
  left:30px;
  width:68px;
  height:3px;
  background:var(--gold);
}
#value .value-grid .flip-back .flip-icon{
  width:48px;
  height:48px;
  color:#ffffff!important;
}
#value .value-grid .flip-back .flip-back-value{
  color:#ffffff!important;
}
#value .value-grid .flip-back .flip-back-note{
  font-size:20px!important;
  line-height:1.55!important;
  color:rgba(255,255,255,.82)!important;
}
#value .value-grid article:last-child .flip-back-value{
  white-space:nowrap!important;
  font-size:clamp(30px,2.45vw,40px)!important;
  letter-spacing:-.025em!important;
}
#value .value-grid article:last-child .flip-back .flip-icon{
  transform:translateY(-6px);
}

/* stejné chování líce při najetí jako v sekci 02 */
#value .value-grid article.flip-card:hover:not(.is-flipped),
#value .value-grid article.flip-card:focus-visible:not(.is-flipped),
#value .value-grid article.flip-card.is-flip-pointer-held:not(.is-flipped){
  background:var(--gold)!important;
  color:var(--black)!important;
}
#value .value-grid article.flip-card:hover:not(.is-flipped) > span,
#value .value-grid article.flip-card:hover:not(.is-flipped) > h3,
#value .value-grid article.flip-card:hover:not(.is-flipped) > p,
#value .value-grid article.flip-card:focus-visible:not(.is-flipped) > span,
#value .value-grid article.flip-card:focus-visible:not(.is-flipped) > h3,
#value .value-grid article.flip-card:focus-visible:not(.is-flipped) > p,
#value .value-grid article.flip-card.is-flip-pointer-held:not(.is-flipped) > span,
#value .value-grid article.flip-card.is-flip-pointer-held:not(.is-flipped) > h3,
#value .value-grid article.flip-card.is-flip-pointer-held:not(.is-flipped) > p{
  color:var(--black)!important;
}

@media (max-width:980px){
  #value .value-grid .flip-back{
    gap:16px;
    padding:34px 26px;
  }
  #value .value-grid .flip-back::before{
    left:26px;
  }
  #value .value-grid .flip-back .flip-back-note{
    font-size:18px!important;
  }
  #value .value-grid article:last-child .flip-back-value{
    font-size:clamp(30px,8.4vw,40px)!important;
  }
  #value .value-grid article:last-child .flip-back .flip-icon{
    transform:translateY(-4px);
  }
}


/* =====================================================================
   EN section 02 headings — consistent two-line titles
   ===================================================================== */
html[lang="en"] #method .method-grid h3{
  text-wrap:balance!important;
}
html[lang="en"] #method .method-grid h3[data-en="Conversation"],
html[lang="en"] #method .method-grid h3[data-en="Measure and cut"],
html[lang="en"] #method .method-grid h3[data-en="Handwork"],
html[lang="en"] #method .method-grid h3[data-en="Long-term wardrobe"]{
  max-width:12ch!important;
  width:auto!important;
  line-height:1.06!important;
  text-align:center!important;
}

/* =====================================================================
   Center flipped backs in sections 02 and 04 — mobile only
   ===================================================================== */
@media (max-width:980px){
  #method .method-grid .flip-back,
  #value .value-grid .flip-back{
    align-items:center!important;
    text-align:center!important;
  }
  #method .method-grid .flip-back::before,
  #value .value-grid .flip-back::before{
    left:50%!important;
    transform:translateX(-50%)!important;
  }
  #method .method-grid .flip-back .flip-back-note,
  #value .value-grid .flip-back .flip-back-note{
    max-width:26ch!important;
    text-align:center!important;
  }
}

/* 02 — EN nadpisy karet: desktop vlevo, mobil na střed */
@media (min-width:981px){
  html[lang="en"] #method .method-grid h3[data-en="Conversation"],
  html[lang="en"] #method .method-grid h3[data-en="Measure and cut"],
  html[lang="en"] #method .method-grid h3[data-en="Handwork"],
  html[lang="en"] #method .method-grid h3[data-en="Long-term wardrobe"]{
    text-align:left!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}
@media (max-width:980px){
  html[lang="en"] #method .method-grid h3[data-en="Conversation"],
  html[lang="en"] #method .method-grid h3[data-en="Measure and cut"],
  html[lang="en"] #method .method-grid h3[data-en="Handwork"],
  html[lang="en"] #method .method-grid h3[data-en="Long-term wardrobe"]{
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* =====================================================================
   Čísla 01–04 zůstávají viditelná i na rubu karet v sekcích 02 a 04
   ===================================================================== */
#method .method-grid .flip-back::after,
#value .value-grid .flip-back::after{
  position:absolute;
  top:34px;
  left:30px;
  font-family:inherit;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:10px;
  line-height:1.2;
  pointer-events:none;
}
#method .method-grid .flip-back::after{
  color:var(--black);
}
#value .value-grid .flip-back::after{
  color:#ffffff;
}
#method .method-grid article:nth-child(1) .flip-back::after,
#value .value-grid article:nth-child(1) .flip-back::after{ content:"01"; }
#method .method-grid article:nth-child(2) .flip-back::after,
#value .value-grid article:nth-child(2) .flip-back::after{ content:"02"; }
#method .method-grid article:nth-child(3) .flip-back::after,
#value .value-grid article:nth-child(3) .flip-back::after{ content:"03"; }
#method .method-grid article:nth-child(4) .flip-back::after,
#value .value-grid article:nth-child(4) .flip-back::after{ content:"04"; }

@media (max-width:980px){
  #method .method-grid .flip-back::after,
  #value .value-grid .flip-back::after{
    top:29px;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
  }
}

/* Sekce 02: čísla na rubu ještě o něco níž */
#method .method-grid .flip-back::after{
  top:39px;
}
@media (max-width:980px){
  #method .method-grid .flip-back::after{
    top:34px;
  }
}

/* =====================================================================
   Otočná šipka viditelná také na rubu karet 02 a 04
   ===================================================================== */
#method .method-grid .flip-card > .flip-hint,
#value .value-grid .flip-card > .flip-hint{
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  transform-style:preserve-3d;
}
#method .method-grid .flip-hint svg,
#value .value-grid .flip-hint svg{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
#method .method-grid .flip-hint::after,
#value .value-grid .flip-hint::after{
  content:"";
  position:absolute;
  inset:0;
  transform:rotateY(180deg);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12a8 8 0 0 1 13.7-5.6L20 8' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 4v4h-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12a8 8 0 0 1 13.7-5.6L20 8' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 4v4h-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
#method .method-grid .flip-hint::after{
  background:#000;
}
#value .value-grid .flip-hint::after{
  background:#fff;
}
#method .method-grid .flip-card.is-flipped .flip-hint,
#value .value-grid .flip-card.is-flipped .flip-hint{
  opacity:.62!important;
  transform:rotate(-45deg);
}
#method .method-grid .flip-card.is-flipped:hover .flip-hint,
#value .value-grid .flip-card.is-flipped:hover .flip-hint,
#method .method-grid .flip-card.is-flipped:focus-visible .flip-hint,
#value .value-grid .flip-card.is-flipped:focus-visible .flip-hint{
  opacity:.9!important;
}


/* =====================================================================
   Skutečná šipka přímo na rubu flip karet 02 a 04
   ===================================================================== */
#method .method-grid .flip-back .flip-return-hint,
#value .value-grid .flip-back .flip-return-hint{
  position:absolute;
  right:20px;
  bottom:18px;
  width:26px;
  height:26px;
  opacity:.62;
  pointer-events:none;
  transform:rotate(-45deg);
  transition:opacity .3s var(--ease), transform .5s var(--ease);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
#method .method-grid .flip-back .flip-return-hint{
  color:#000!important;
}
#value .value-grid .flip-back .flip-return-hint{
  color:#fff!important;
}
#method .method-grid .flip-card.is-flipped:hover .flip-return-hint,
#value .value-grid .flip-card.is-flipped:hover .flip-return-hint,
#method .method-grid .flip-card.is-flipped:focus-visible .flip-return-hint,
#value .value-grid .flip-card.is-flipped:focus-visible .flip-return-hint{
  opacity:.9;
  transform:rotate(-90deg);
}
#method .method-grid .flip-back .flip-return-hint svg,
#value .value-grid .flip-back .flip-return-hint svg{
  display:block;
  width:100%;
  height:100%;
}
@media (max-width:980px){
  #method .method-grid .flip-back .flip-return-hint,
  #value .value-grid .flip-back .flip-return-hint{
    right:16px;
    bottom:14px;
  }
}

/* 04 — EN mobile: první a třetí karta vyšší pouze směrem dolů */
@media (max-width:980px){
  html[lang="en"] #value .value-grid article:nth-child(1),
  html[lang="en"] #value .value-grid article:nth-child(3){
    padding-bottom:50px!important;
  }
}

/* 02 — mobil: šipka na rubu v pravém dolním rohu, bez skrývání */
@media (max-width:980px){
  /* Původní hint je <span>, proto přepisujeme mobilní pravidlo width:100 %.
     Při otočení karty se osa Y zrcadlí, takže left:16px se na rubu zobrazí vpravo. */
  #method .method-grid .flip-card.is-flipped > .flip-hint{
    display:block!important;
    visibility:visible!important;
    opacity:.62!important;
    position:absolute!important;
    width:26px!important;
    height:26px!important;
    left:16px!important;
    right:auto!important;
    bottom:14px!important;
    top:auto!important;
    margin:0!important;
    text-align:left!important;
    transform:rotate(-45deg)!important;
  }

  /* Šipka vložená přímo do rubu zůstává na stejném místě. */
  #method .method-grid .flip-back .flip-return-hint{
    display:block!important;
    position:absolute!important;
    width:26px!important;
    height:26px!important;
    right:16px!important;
    bottom:14px!important;
    left:auto!important;
    top:auto!important;
    margin:0!important;
    transform:rotate(-45deg)!important;
  }
}

/* 02 — mobil: šipka na líci všech karet vždy v pravém dolním rohu */
@media (max-width:980px){
  #method .method-grid .flip-card:not(.is-flipped) > .flip-hint{
    position:absolute!important;
    display:block!important;
    width:26px!important;
    height:26px!important;
    right:16px!important;
    left:auto!important;
    bottom:14px!important;
    top:auto!important;
    margin:0!important;
    text-align:left!important;
  }
}

/* 02 — CZ desktop: srovnání výšky karet s EN verzí */
@media (min-width:981px){
  html[lang="cs"] #method .method-grid h3{
    line-height:1.06!important;
  }
}


/* Mobilní rozbalovací menu výš – malá mezera od horního okraje */
@media (max-width:980px){
  .site-header.menu-open .nav,
  .site-header.menu-open #primary-nav{
    top:16px!important;
  }
}

/* =====================================================================
   MULTILINGUAL NAVIGATION — 6 language compact selector
   ===================================================================== */
.desktop-language-control,
.mobile-language-control{
  position:relative;
}
.mobile-language-control{ display:none; }

.language-trigger{
  appearance:none;
  border:1px solid currentColor;
  background:transparent;
  color:inherit;
  min-height:34px;
  padding:7px 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  cursor:pointer;
  font-family:var(--sans);
  font-size:11px;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
}
.language-trigger-label{ display:none; }
.language-current{ min-width:2ch; text-align:center; }
.language-chevron{
  display:inline-block;
  font-size:12px;
  line-height:1;
  transform:translateY(-1px);
  transition:transform .25s var(--ease);
}
.language-trigger[aria-expanded="true"] .language-chevron{ transform:translateY(1px) rotate(180deg); }

.language-panel{
  z-index:80;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  padding:8px;
  background:#111;
  color:var(--ivory);
  border:1px solid rgba(185,147,74,.62);
  box-shadow:0 22px 58px rgba(0,0,0,.42);
}
.language-panel[hidden]{ display:none!important; }
.desktop-language-panel{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  width:310px;
}
.language-option{
  text-decoration:none;
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  min-height:58px;
  padding:11px 12px;
  display:grid;
  grid-template-columns:34px 1fr;
  align-items:center;
  gap:8px;
  text-align:left;
  cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.language-option:hover,
.language-option:focus-visible{
  background:rgba(185,147,74,.14);
  outline:none;
}
.language-option.is-active{
  background:var(--gold);
  color:var(--black);
}
.language-option-code{
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.18em;
  color:var(--gold);
}
.language-option.is-active .language-option-code{ color:var(--black); }
.language-option-name{
  font-family:var(--serif);
  font-size:17px;
  line-height:1.05;
  letter-spacing:0;
}

/* Desktop: keep the approved horizontal composition. */
@media (min-width:981px){
  .desktop-language-control{ display:block; }
  .mobile-language-control{ display:none!important; }
  .desktop-language-trigger .language-trigger-label{ display:none; }
  .site-header.on-value .desktop-language-panel{
    background:#111;
    color:var(--ivory);
  }
}

/* Mobile: compact 2 × 3 atelier index and collapsible 2 × 3 languages. */
@media (max-width:980px){
  .desktop-language-control{ display:none!important; }
  .mobile-language-control{
    display:block;
    grid-column:1 / -1;
    border-top:1px solid rgba(251,247,239,.16);
    padding-top:7px;
    margin-top:1px;
  }

  .site-header.menu-open .nav,
  .site-header.menu-open #primary-nav{
    top:12px!important;
    right:12px!important;
    width:min(360px,calc(100vw - 24px))!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:0!important;
    padding:8px 10px 10px!important;
    background:rgba(17,17,17,.985)!important;
  }

  .site-header.menu-open #primary-nav > a{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    min-width:0!important;
    min-height:60px!important;
    padding:10px 12px!important;
    border:0!important;
    border-bottom:1px solid rgba(251,247,239,.13)!important;
    font-family:var(--serif)!important;
    font-size:15px!important;
    line-height:1.12!important;
    letter-spacing:0!important;
    text-transform:none!important;
    text-align:left!important;
    color:var(--ivory)!important;
  }
  .site-header.menu-open #primary-nav > a:nth-of-type(odd){
    border-right:1px solid rgba(251,247,239,.13)!important;
  }
  .site-header.menu-open #primary-nav > a:nth-of-type(5),
  .site-header.menu-open #primary-nav > a:nth-of-type(6){
    border-bottom:0!important;
  }
  .site-header.menu-open #primary-nav > a::before{
    content:attr(data-nav-index);
    display:block;
    margin-bottom:6px;
    color:var(--gold);
    font-family:var(--sans);
    font-size:8px;
    line-height:1;
    letter-spacing:.25em;
  }
  .site-header.menu-open #primary-nav > a::after{ display:none!important; }

  .mobile-language-trigger{
    width:100%;
    min-height:42px;
    padding:8px 10px;
    border:0;
    display:grid;
    grid-template-columns:1fr auto auto;
    justify-items:start;
    color:var(--gold)!important;
  }
  .mobile-language-trigger .language-trigger-label{
    display:block;
    font-size:9px;
    letter-spacing:.22em;
  }
  .mobile-language-trigger .language-current{
    font-size:11px;
    color:var(--ivory);
  }
  .mobile-language-trigger .language-chevron{ color:var(--gold); }
  .mobile-language-panel{
    position:relative;
    width:100%;
    padding:4px 0 0;
    border:0;
    box-shadow:none;
    background:transparent;
  }
  .mobile-language-panel .language-option{
    min-height:48px;
    padding:8px 10px;
    grid-template-columns:31px 1fr;
    border-top:1px solid rgba(251,247,239,.10);
  }
  .mobile-language-panel .language-option:nth-child(odd){
    border-right:1px solid rgba(251,247,239,.10);
  }
  .mobile-language-panel .language-option-name{ font-size:15px; }
  .mobile-language-panel .language-option-code{ font-size:8px; }
}

/* =====================================================================
   TYPOGRAPHIC CONSISTENCY ACROSS DE / IT / ES / RU
   ===================================================================== */
@media (min-width:981px){
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) #method .method-grid h3{
    max-width:13ch!important;
    width:auto!important;
    min-height:2.12em!important;
    line-height:1.06!important;
    text-align:left!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) #value .value-grid h3{
    min-height:2.12em!important;
    line-height:1.06!important;
  }
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) #wardrobe h2.wardrobe-gold-heading,
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) #wardrobe > h2{
    white-space:nowrap!important;
    max-width:none!important;
    width:max-content!important;
    font-size:clamp(38px,5vw,82px)!important;
  }
}

@media (max-width:980px){
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) .hero-title{
    font-size:clamp(42px,12.2vw,58px)!important;
    line-height:1.02!important;
  }
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) #method .method-grid h3{
    min-height:2.16em!important;
    max-width:13ch!important;
    line-height:1.08!important;
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) #value .value-grid h3{
    min-height:2.16em!important;
  }
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) #wardrobe h2.wardrobe-gold-heading,
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) #wardrobe > h2{
    white-space:normal!important;
    width:auto!important;
    max-width:100%!important;
    text-wrap:balance!important;
  }
}

/* Cyrillic needs a touch more breathing room without changing section geometry. */
html[lang="ru"] body{ letter-spacing:normal; }
html[lang="ru"] .nav{ letter-spacing:.12em!important; }
html[lang="ru"] .section-kicker{ letter-spacing:.22em; }

/* Multilingual mobile width safeguards and header row clearance. */
@media (max-width:980px){
  .site-header.menu-open .nav,
  .site-header.menu-open #primary-nav{
    padding-top:56px!important;
  }
  .split > *,
  #atelier .atelier-main,
  #atelier .atelier-title,
  #atelier .atelier-intro,
  #method .method-title-mobile{
    min-width:0!important;
    max-width:100%!important;
  }
  #atelier .atelier-title-mobile-line{
    width:100%!important;
    max-width:100%!important;
  }
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) #atelier .atelier-title-mobile-last{
    white-space:nowrap!important;
    font-size:.84em!important;
    letter-spacing:-.05em!important;
  }
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) .method-title-mobile{
    font-size:clamp(40px,10.2vw,58px)!important;
  }
}
@media (max-width:980px){
  .quote-panel > *,
  .quote-panel blockquote,
  .quote-panel blockquote p{
    min-width:0!important;
    max-width:100%!important;
  }
}

/* =====================================================================
   HERO — German and Italian fixed to exactly three lines
   Each translated phrase remains one uninterrupted line.
   ===================================================================== */
html[lang="de"] .hero .hero-title > span,
html[lang="it"] .hero .hero-title > span{
  white-space:nowrap!important;
}


/* =====================================================================
   DE / IT / ES / RU — approved CZ/EN geometry is the master
   ===================================================================== */
@media (min-width:981px){
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) #method .method-grid > article{
    min-height:336px!important;
  }
  html[lang="ru"] #journal > h2{
    white-space:nowrap!important;
  }
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) .quote-panel blockquote p > span{
    white-space:nowrap!important;
  }
}

@media (max-width:980px){
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) #method .method-grid > article{
    min-height:313px!important;
  }
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) #value .value-title-mobile-line{
    white-space:nowrap!important;
  }
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) .quote-panel blockquote{
    padding-left:5vw!important;
    padding-right:5vw!important;
  }
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) .quote-panel blockquote p > span{
    white-space:nowrap!important;
  }
  html:is([lang="de"],[lang="ru"]) .quote-panel p{
    font-size:clamp(40px,9.1vw,64px)!important;
    letter-spacing:-.045em!important;
  }
}


/* =====================================================================
   IT — preserve approved line rhythm in sections 02 and 03
   ===================================================================== */
.nowrap-phrase{
  white-space:nowrap!important;
}
@media (min-width:981px){
  /* IT 02: exactly two desktop lines, matching the CZ/EN composition. */
  html[lang="it"] #method .method-title-desktop{
    max-width:none!important;
    font-size:clamp(37px,4.45vw,74px)!important;
  }
  html[lang="it"] #method .method-title-desktop > span{
    white-space:nowrap!important;
  }

  /* IT 03: midway between the previous small and original master size. */
  html[lang="it"] #wardrobe h2.wardrobe-gold-heading,
  html[lang="it"] #wardrobe > h2{
    font-size:clamp(37px,4.6vw,76px)!important;
    letter-spacing:-.035em!important;
  }
}
@media (max-width:980px){
  html[lang="it"] #wardrobe h2.wardrobe-gold-heading,
  html[lang="it"] #wardrobe > h2{
    font-size:clamp(35px,9.5vw,52px)!important;
    line-height:1.04!important;
  }
}


/* IT · sekce 02 · karta 03 · rub — přesně 2 řádky */
@media (min-width:981px){
  html[lang="it"] #method .method-grid article:nth-child(3) .flip-back-note{
    font-size:18px!important;
    max-width:none!important;
    color:rgba(17,17,17,.78)!important;
  }
}
@media (max-width:980px){
  html[lang="it"] #method .method-grid article:nth-child(3) .flip-back-note{
    font-size:17px!important;
    max-width:none!important;
    color:rgba(17,17,17,.78)!important;
  }
}


/* =====================================================================
   2026-07-12 cumulative multilingual corrections approved by user
   ===================================================================== */
@media (min-width:981px){
  /* DE statement in section 01: exact three fixed lines */
  html[lang="de"] .statement p span{
    white-space:nowrap!important;
  }
  html[lang="de"] .statement p{
    font-size:clamp(36px,5.6vw,92px)!important;
  }

  /* ES section 04 heading: keep full second line on one row */
  html[lang="es"] #value .value-title-desktop-line:nth-of-type(2){
    white-space:nowrap!important;
    font-size:clamp(72px,7.05vw,136px)!important;
  }

  /* Section 04 card fronts: stable two-line rhythm for DE/ES/IT/RU */
  html[lang="de"] #value .value-grid > article > h3,
  html[lang="es"] #value .value-grid > article > h3,
  html[lang="it"] #value .value-grid > article > h3,
  html[lang="ru"] #value .value-grid > article > h3{
    min-height:2.12em!important;
    line-height:1.05!important;
  }
  html[lang="de"] #value .value-grid > article > h3{font-size:clamp(29px,2.32vw,43px)!important;}
  html[lang="es"] #value .value-grid > article > h3{font-size:clamp(31px,2.5vw,46px)!important;}
  html[lang="it"] #value .value-grid > article > h3{font-size:clamp(31px,2.5vw,46px)!important;}
  html[lang="ru"] #value .value-grid > article > h3{font-size:clamp(29px,2.28vw,42px)!important;}

  /* Section 04 back titles */
  html[lang="de"] #value .value-grid .flip-back-value{font-size:clamp(28px,2.2vw,38px)!important; letter-spacing:-.03em!important;}
  html[lang="es"] #value .value-grid .flip-back-value{font-size:clamp(30px,2.4vw,42px)!important;}
  html[lang="it"] #value .value-grid .flip-back-value{font-size:clamp(30px,2.4vw,42px)!important;}
  html[lang="ru"] #value .value-grid .flip-back-value{font-size:clamp(27px,2.05vw,36px)!important; letter-spacing:-.035em!important;}
  html[lang="de"] #value .value-grid article:nth-child(3) .flip-back-value{
    font-size:clamp(28px,2.2vw,38px)!important;
  }

  /* Section 04 back notes */
  html[lang="de"] #value .value-grid .flip-back-note,
  html[lang="es"] #value .value-grid .flip-back-note,
  html[lang="it"] #value .value-grid .flip-back-note,
  html[lang="ru"] #value .value-grid .flip-back-note{
    max-width:none!important;
    white-space:normal!important;
    line-height:1.42!important;
  }
  html[lang="de"] #value .value-grid .flip-back-note,
  html[lang="es"] #value .value-grid .flip-back-note,
  html[lang="it"] #value .value-grid .flip-back-note{font-size:clamp(17px,1.48vw,24px)!important;}
  html[lang="ru"] #value .value-grid .flip-back-note{font-size:clamp(16px,1.38vw,23px)!important;}
}

@media (max-width:980px){
  html[lang="es"] #value .value-grid > article > h3,
  html[lang="de"] #value .value-grid > article > h3,
  html[lang="it"] #value .value-grid > article > h3,
  html[lang="ru"] #value .value-grid > article > h3{
    min-height:2.16em!important;
    line-height:1.08!important;
  }
  html[lang="de"] #value .value-grid article:nth-child(3) .flip-back-value{font-size:clamp(28px,7.2vw,38px)!important;}
}


/* SECTION 04 BLACK CARD NOTES — EXACTLY TWO LINES */
@media (min-width:981px){
  #value .value-grid .flip-back-note{
    max-width:100%!important;
    width:auto!important;
    white-space:normal!important;
    font-size:clamp(14px,1.25vw,21px)!important;
    line-height:1.42!important;
    letter-spacing:-.01em!important;
  }
}
@media (max-width:980px){
  #value .value-grid .flip-back-note{
    max-width:100%!important;
    width:auto!important;
    white-space:normal!important;
    font-size:17px!important;
    line-height:1.42!important;
  }
}

/* Desktop language popup — smaller, tighter and with a white frame */
@media (min-width:981px){
  .desktop-language-panel{
    top:calc(100% + 9px)!important;
    width:252px!important;
    padding:6px!important;
    border:1px solid rgba(255,255,255,.92)!important;
  }
  .desktop-language-panel .language-option{
    min-height:44px!important;
    padding:7px 9px!important;
    grid-template-columns:27px 1fr!important;
    gap:6px!important;
  }
  .desktop-language-panel .language-option-code{
    font-size:12px!important;
    letter-spacing:.16em!important;
  }
  .desktop-language-panel .language-option-name{
    font-size:16px!important;
    line-height:1.04!important;
  }
}


/* DE only: section 03 heading slightly smaller */
@media (min-width:981px){
  html[lang="de"] #wardrobe h2.wardrobe-gold-heading,
  html[lang="de"] #wardrobe > h2{
    font-size:clamp(36px,4.7vw,78px)!important;
  }
}
@media (max-width:980px){
  html[lang="de"] #wardrobe h2.wardrobe-gold-heading,
  html[lang="de"] #wardrobe > h2{
    font-size:clamp(34px,8.9vw,50px)!important;
  }
}


/* DE only: slightly smaller modal titles for long section 03 headings (02, 06, 07) */
html[lang="de"] .wardrobe-photo-modal.is-signature-jacket .wardrobe-photo-caption .wardrobe-photo-heading,
html[lang="de"] .wardrobe-photo-modal.is-wardrobe-program .wardrobe-photo-caption .wardrobe-photo-heading,
html[lang="de"] .wardrobe-photo-modal.is-women-wardrobe .wardrobe-photo-caption .wardrobe-photo-heading{
  font-size:clamp(24px,2.45vw,38px)!important;
  line-height:1.06!important;
  letter-spacing:-.02em!important;
}
@media (max-width:980px){
  html[lang="de"] .wardrobe-photo-modal.is-signature-jacket .wardrobe-photo-caption .wardrobe-photo-heading,
  html[lang="de"] .wardrobe-photo-modal.is-wardrobe-program .wardrobe-photo-caption .wardrobe-photo-heading,
  html[lang="de"] .wardrobe-photo-modal.is-women-wardrobe .wardrobe-photo-caption .wardrobe-photo-heading{
    font-size:clamp(24px,6.9vw,36px)!important;
    line-height:1.06!important;
  }
}


/* DE only: modal 06 (wardrobe program) a touch smaller */
html[lang="de"] .wardrobe-photo-modal.is-wardrobe-program .wardrobe-photo-caption .wardrobe-photo-heading{
  font-size:clamp(20px,2.0vw,31px)!important;
  line-height:1.04!important;
  letter-spacing:-.025em!important;
}
@media (max-width:980px){
  html[lang="de"] .wardrobe-photo-modal.is-wardrobe-program .wardrobe-photo-caption .wardrobe-photo-heading{
    font-size:clamp(20px,5.8vw,29px)!important;
    line-height:1.04!important;
  }
}


/* IT only: section 04 card 03 black-side title on one line */
html[lang="it"] #value .value-grid article:nth-child(3) .flip-back-value{
  white-space:nowrap!important;
  font-size:clamp(27px,2.05vw,35px)!important;
  letter-spacing:-.025em!important;
}
@media (max-width:980px){
  html[lang="it"] #value .value-grid article:nth-child(3) .flip-back-value{
    font-size:clamp(25px,7vw,33px)!important;
  }
}


/* IT only: section 04 black card 03 title slightly larger */
html[lang="it"] #value .value-grid article:nth-child(3) .flip-back-value{
  font-size:clamp(29px,2.18vw,37px)!important;
}
@media (max-width:980px){
  html[lang="it"] #value .value-grid article:nth-child(3) .flip-back-value{
    font-size:clamp(27px,7.35vw,35px)!important;
  }
}


/* IT only: hero statement slightly smaller so "non ha bisogno" fits cleanly */
html[lang="it"] .statement p{
  font-size:clamp(46px,6.15vw,102px)!important;
  line-height:1.02!important;
}
@media (max-width:980px){
  html[lang="it"] .statement p{
    font-size:clamp(40px,10vw,66px)!important;
    line-height:1.06!important;
  }
}


/* IT only: correct target — hero claim slightly smaller on desktop.
   Reset the unrelated statement block that was changed by mistake. */
html[lang="it"] .statement p{
  font-size:clamp(48px,6.45vw,108px)!important;
  line-height:1.02!important;
}
@media (max-width:980px){
  html[lang="it"] .statement p{
    font-size:clamp(42px,10.6vw,70px)!important;
    line-height:1.06!important;
  }
}
@media (min-width:981px){
  html[lang="it"] .hero .hero-title{
    font-size:clamp(52px,6.35vw,102px)!important;
    line-height:1.01!important;
  }
}

/* ES only: force the approved statement into exactly three desktop lines */
@media (min-width:981px){
  html[lang="es"] .statement p > span{
    display:block!important;
    white-space:nowrap!important;
  }
  html[lang="es"] .statement p > span::after{
    content:""!important;
  }
}


/* ES only: section 02 desktop heading – keep "con el cuerpo, no con una talla." on one line */
@media (min-width:981px){
  html[lang="es"] #method .method-title-desktop .method-second-line{
    white-space:nowrap!important;
    font-size:clamp(54px,5.15vw,88px)!important;
  }
}


/* ES only: section 04 desktop second line same size as the line above */
@media (min-width:981px){
  html[lang="es"] #value .value-title-desktop-line:nth-of-type(2){
    white-space:nowrap!important;
    font-size:inherit!important;
    letter-spacing:inherit!important;
  }
}


/* ES only: section 04 black card 03 title on one line */
html[lang="es"] #value .value-grid article:nth-child(3) .flip-back-value{
  font-size:clamp(29px,2.18vw,39px)!important;
  white-space:nowrap!important;
  letter-spacing:-.02em!important;
}
@media (max-width:980px){
  html[lang="es"] #value .value-grid article:nth-child(3) .flip-back-value{
    font-size:clamp(27px,7.2vw,35px)!important;
    white-space:nowrap!important;
  }
}


/* ES only: section 04 black card notes 01 and 03 slightly smaller */
html[lang="es"] #value .value-grid article:nth-child(1) .flip-back-note,
html[lang="es"] #value .value-grid article:nth-child(3) .flip-back-note{
  font-size:clamp(16px,1.34vw,22px)!important;
  line-height:1.34!important;
  letter-spacing:-.01em!important;
}
@media (max-width:980px){
  html[lang="es"] #value .value-grid article:nth-child(1) .flip-back-note,
  html[lang="es"] #value .value-grid article:nth-child(3) .flip-back-note{
    font-size:clamp(15px,4.35vw,19px)!important;
    line-height:1.34!important;
  }
}


/* RU only: approved statement in exactly three desktop lines */
@media (min-width:981px){
  html[lang="ru"] .statement p > span{
    display:block!important;
    white-space:nowrap!important;
  }
  html[lang="ru"] .statement p > span::after{
    content:""!important;
  }
}


/* RU only: section 02 heading slightly smaller */
@media (min-width:981px){
  html[lang="ru"] #method .method-title-desktop{
    font-size:clamp(34px,4.45vw,74px)!important;
    line-height:1.02!important;
  }
}
@media (max-width:980px){
  html[lang="ru"] #method .method-title-mobile{
    font-size:clamp(36px,9.4vw,52px)!important;
    line-height:.98!important;
  }
}


/* RU only: section 02 heading exact two-line desktop layout */
@media (min-width:981px){
  html[lang="ru"] #method .method-title-desktop{
    max-width:none!important;
    font-size:clamp(28px,3.75vw,62px)!important;
    line-height:1.02!important;
  }
  html[lang="ru"] #method .method-title-desktop > span{
    white-space:nowrap!important;
  }
}


/* RU section 02 — restore desktop heading size to master geometry and keep exact 2-line layout */
@media (min-width:981px){
  html[lang="ru"] #method .method-title-desktop{
    max-width:none!important;
    font-size:clamp(38px,5vw,82px)!important;
    line-height:1!important;
  }
  html[lang="ru"] #method .method-title-desktop > span{
    white-space:nowrap!important;
  }
}


/* IT + ES section 02 — restore desktop heading size to master geometry and keep exact 2-line layout */
@media (min-width:981px){
  html[lang="it"] #method .method-title-desktop,
  html[lang="es"] #method .method-title-desktop{
    max-width:none!important;
    font-size:clamp(38px,5vw,82px)!important;
    line-height:1!important;
  }
  html[lang="it"] #method .method-title-desktop > span,
  html[lang="es"] #method .method-title-desktop > span{
    white-space:nowrap!important;
  }
  html[lang="es"] #method .method-title-desktop .method-second-line{
    font-size:inherit!important;
  }
}


/* RU only: section 03 heading on one desktop line */
@media (min-width:981px){
  html[lang="ru"] #wardrobe h2.wardrobe-gold-heading,
  html[lang="ru"] #wardrobe > h2{
    font-size:clamp(32px,4.1vw,68px)!important;
    letter-spacing:-.03em!important;
    white-space:nowrap!important;
    width:max-content!important;
    max-width:none!important;
  }
}


/* RU only — section 03: reduce first and last list titles
   (POZOR: jen desktop — na mobilu velikost řídí JS auto-fit) */
@media (min-width:981px){
  html[lang="ru"] #wardrobe .wardrobe-photo-trigger[data-image$="wardrobe-01.jpg"] > span,
  html[lang="ru"] #wardrobe .wardrobe-photo-trigger[data-image*="wardrobe-07.jpg"] > span{
    font-size:clamp(27px,2.9vw,48px)!important;
    line-height:1.04!important;
  }
}

/* RU only — section 03 modals: reduce first and last modal titles */
html[lang="ru"] .wardrobe-photo-modal.is-shirt-system .wardrobe-photo-caption .wardrobe-photo-heading,
html[lang="ru"] .wardrobe-photo-modal.is-women-wardrobe .wardrobe-photo-caption .wardrobe-photo-heading{
  font-size:clamp(24px,2.45vw,36px)!important;
  line-height:1.06!important;
}

@media (max-width:980px){
  html[lang="ru"] .wardrobe-photo-modal.is-shirt-system .wardrobe-photo-caption .wardrobe-photo-heading,
  html[lang="ru"] .wardrobe-photo-modal.is-women-wardrobe .wardrobe-photo-caption .wardrobe-photo-heading{
    font-size:clamp(24px,7vw,32px)!important;
  }
}


/* RU only: section 04 headline reduced to match the visual size of other languages */
@media (min-width:981px){
  html[lang="ru"] #value .value-title{
    font-size:clamp(54px,5.2vw,86px)!important;
    line-height:0.99!important;
    letter-spacing:-.032em!important;
    max-width:1120px!important;
  }
  html[lang="ru"] #value .value-title-desktop-line{
    white-space:nowrap!important;
  }
}
@media (max-width:980px){
  html[lang="ru"] #value .value-title{
    font-size:clamp(40px,10.2vw,62px)!important;
    line-height:1.02!important;
    letter-spacing:-.03em!important;
  }
}


/* RU only: section 04 lead copy fixed to 3 lines and 2 lines */
html[lang="ru"] #value .value-lead .value-lead-line{
  display:block!important;
}
@media (min-width:981px){
  html[lang="ru"] #value .value-lead{
    font-size:clamp(17px,1.45vw,22px)!important;
    line-height:1.52!important;
    max-width:1100px!important;
  }
  html[lang="ru"] #value .value-lead .value-lead-line{
    white-space:nowrap!important;
  }
}
@media (max-width:980px){
  html[lang="ru"] #value .value-lead{
    font-size:18px!important;
    line-height:1.58!important;
  }
}


/* RU only: first section 04 lead paragraph fixed to the requested two lines */
html[lang="ru"] #value .value-lead .value-lead-line{
  display:block!important;
}
@media (min-width:981px){
  html[lang="ru"] #value .value-lead .value-lead-line{
    white-space:nowrap!important;
  }
}


/* SECTION 04 CZ MASTER GEOMETRY FOR RU / IT / ES
   Title = exact CZ size and two lines.
   Lead paragraphs = exact CZ typography, 3 lines + 2 lines.
   This keeps the four cards at the same vertical position. */
@media (min-width:981px){
  /* CZ is the vertical master: reserve exactly 2 title lines, 3 first-lead lines and 2 second-lead lines for every language. */
  #value .value-title{
    min-height:1.96em!important;
  }
  #value .value-lead:not(.value-lead-second){
    min-height:4.74em!important;
  }
  #value .value-lead-second{
    min-height:3.16em!important;
  }

  html:is([lang="ru"],[lang="it"],[lang="es"]) #value .value-title{
    max-width:980px!important;
    font-size:clamp(42px,5.6vw,92px)!important;
    line-height:.98!important;
    letter-spacing:-.035em!important;
  }
  html:is([lang="ru"],[lang="it"],[lang="es"]) #value .value-title-desktop-line{
    display:block!important;
    white-space:nowrap!important;
    font-size:inherit!important;
    line-height:inherit!important;
    letter-spacing:inherit!important;
  }
  html:is([lang="ru"],[lang="it"],[lang="es"]) #value .value-lead{
    max-width:980px!important;
    font-size:clamp(18px,1.6vw,24px)!important;
    line-height:1.58!important;
  }
  html:is([lang="ru"],[lang="it"],[lang="es"]) #value .value-lead .value-lead-line{
    display:block!important;
    white-space:nowrap!important;
  }
}


/* RU only: section 05 headline slightly smaller, keep original top and bottom spacing */
@media (min-width:981px){
  html[lang="ru"] #journal > h2{
    font-size:clamp(50px,4.55vw,76px)!important;
    line-height:1!important;
  }
}
@media (max-width:980px){
  html[lang="ru"] #journal > h2{
    font-size:clamp(37px,8.4vw,52px)!important;
    line-height:1!important;
  }
}


/* RU only: add a little extra space below the journal heading so the 3 cards align with CZ */
@media (min-width:981px){
  html[lang="ru"] #journal > h2{
    margin-bottom:28px!important;
  }
}
@media (max-width:980px){
  html[lang="ru"] #journal > h2{
    margin-bottom:20px!important;
  }
}


/* RU desktop: move the journal cards down to match the CZ vertical geometry */
@media (min-width:981px){
  html[lang="ru"] #journal .journal-grid{
    margin-top:70px!important;
  }
}




/* RU only: journal modal titles smaller and balanced — no orphan word on its own line */
html[lang="ru"] .journal-modal-content .journal-modal-heading{
  font-size:clamp(36px,3.7vw,58px)!important;
  line-height:1.02!important;
  letter-spacing:-.03em!important;
}
@media (max-width:980px){
  html[lang="ru"] .journal-modal-content .journal-modal-heading{
    font-size:clamp(31px,8.2vw,46px)!important;
    line-height:1.04!important;
  }
}




/* ALL LANGUAGES: section 02 back-side time values reduced by about one third */
@media (min-width:981px){
  #method .method-grid .flip-back .flip-back-value{
    font-size:clamp(24px,2vw,32px)!important;
    line-height:1!important;
    letter-spacing:-.02em!important;
  }
}
@media (max-width:980px){
  #method .method-grid .flip-back .flip-back-value{
    font-size:clamp(24px,7vw,32px)!important;
    line-height:1!important;
    letter-spacing:-.02em!important;
  }
}


/* =====================================================================
   Jazykové konzistence (mobil): statement a citát nesmí vytvářet
   vodorovné rolování v žádném jazyce — řádky se přirozeně zalamují
   stejně jako v CZ/EN.
   ===================================================================== */
@media (max-width:980px){
  .statement p > span{ white-space:normal!important; }
  .quote-panel p > span{ white-space:normal!important; }
  .quote-panel p .quote-last-line{ white-space:normal!important; }
}

/* Mobil: řádky citátu se zalamují přirozeně ve VŠECH jazycích
   (přebíjí per-jazyk nowrap výše — stejná specificita, pozdější pořadí). */
@media (max-width:980px){
  html:is([lang="cs"],[lang="en"],[lang="de"],[lang="it"],[lang="es"],[lang="ru"]) .quote-panel blockquote p > span{
    white-space:normal!important;
  }
}

/* Mobil: nadpis sekce 04 škáluje s šířkou displeje (DE/IT/ES mají
   delší řádky – fixních 42px na úzkých telefonech přetékalo). */
@media (max-width:980px){
  html:is([lang="de"],[lang="it"],[lang="es"]) #value .value-title{
    font-size:min(42px, 9.6vw)!important;
  }
}

/* =====================================================================
   Desktop – jazykové korekce velikostí, aby žádný nadpis nepřetékal
   (ES/RU nadpis sekce 04, RU/IT hero titulek). Změřeno a škálováno
   s rezervou; vizuálně jde o 2–6 % rozdíl.
   ===================================================================== */
@media (min-width:981px){
  html[lang="es"] #value .value-title{ font-size:min(5.15vw, 76px)!important; }
  html[lang="ru"] #value .value-title{ font-size:min(5.45vw, 80px)!important; }
  html[lang="ru"] .hero .hero-title{ font-size:min(6.5vw, 96px)!important; }
  html[lang="it"] .hero .hero-title{ font-size:min(6.0vw, 88px)!important; }
}

/* Mobil – poslední jazykové korekce velikostí (změřeno):
   RU nadpis sekce 01, IT hero titulek; drobný 2px přesah dekorativních
   štítků (nbsp) jistí overflow-x pouze na mobilu. */
@media (max-width:980px){
  html[lang="ru"] #atelier .atelier-title{ font-size:min(46px, 11.6vw)!important; }
  html[lang="it"] .hero .hero-title{
    font-size:min(51px, 12.9vw)!important;
    max-width:100%!important;
  }
  html, body{ overflow-x:hidden; }
}

/* RU – rub karty 04c3: o 4 % menší nota, ať text nekončí na hraně karty */
@media (min-width:981px){
  html[lang="ru"] #value .value-grid article:nth-child(3) .flip-back-note{
    font-size:19px!important;
  }
}

/* =====================================================================
   04 – konzistentní geometrie napříč jazyky (desktop):
   nadpis má jednotnou výšku boxu, RU dostává lehký horní padding
   (kompenzace metrik Prata), karty jednotnou minimální výšku.
   Cíl: po zaparkování na 04 a přepnutí jazyka karty neskáčou.
   ===================================================================== */
@media (min-width:981px){
  #value .section-kicker{ display:block; height:15px!important; line-height:15px!important; }
  #value .value-title{ min-height:11.15vw!important; }
  /* RU: lehký optický posun textu nadpisu dolů (Prata) bez vlivu na box */
  html[lang="ru"] #value .value-title > span:first-child{ padding-top:0.14vw; display:inline-block; }
  #value .value-grid article{ min-height:23.2vw!important; }
}


/* RU mobile only: section 04 first lead paragraph flows naturally without forced line breaks */
@media (max-width:980px){
  html[lang="ru"] #value .value-lead:not(.value-lead-second) .value-lead-line{
    display:inline!important;
    white-space:normal!important;
  }
}


/* Mobile menu — narrower only; typography and vertical rhythm unchanged */
@media (max-width:980px){
  .site-header.menu-open .nav,
  .site-header.menu-open #primary-nav{
    width:min(300px,calc(100vw - 64px))!important;
    right:12px!important;
  }
}


/* Final mobile menu refinement: 290 px wide, no reserved top gap, smaller language type */
@media (max-width:980px){
  .site-header.menu-open .nav,
  .site-header.menu-open #primary-nav{
    width:min(285px,calc(100vw - 64px))!important;
    right:12px!important;
    padding-top:8px!important;
  }
  .mobile-language-trigger .language-trigger-label{
    font-size:8px!important;
  }
  .mobile-language-trigger .language-current{
    font-size:10px!important;
  }
  .mobile-language-panel .language-option-name{
    font-size:14px!important;
  }
  .mobile-language-panel .language-option-code{
    font-size:7px!important;
  }
}


/* Mobile primary menu only: save 30 px vertically across its three rows; language area unchanged */
@media (max-width:980px){
  .site-header.menu-open #primary-nav > a{
    min-height:50px!important;
  }
}


/* Mobile hero — CZ and EN matched to the calmer DE scale */
@media (max-width:980px){
  html[lang="cs"] .hero .hero-title,
  html[lang="en"] .hero .hero-title{
    font-size:clamp(42px,12.2vw,58px)!important;
    line-height:1.02!important;
  }
}

/* Mobile appointment form: force the native iOS date control to the same width as all other fields */
@media (max-width:980px){
  .appointment-request-form label,
  .appointment-form-row > label{
    min-width:0!important;
    max-width:100%!important;
  }
  .appointment-form-row > label:first-child{
    width:100%!important;
    overflow:hidden!important;
  }
  .appointment-request-form input[type="date"]{
    display:block!important;
    -webkit-appearance:none!important;
    appearance:none!important;
    inline-size:100%!important;
    width:100%!important;
    min-inline-size:0!important;
    min-width:0!important;
    max-inline-size:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}


/* EN section 04, card 01: keep EN card 01 concise title on one line */
html[lang="en"] #value .value-grid > article:first-child .flip-back-value{
  white-space:nowrap!important;
  font-size:clamp(27px,2.15vw,34px)!important;
  letter-spacing:-.03em!important;
}
@media (max-width:980px){
  html[lang="en"] #value .value-grid > article:first-child .flip-back-value{
    font-size:clamp(29px,7.7vw,34px)!important;
  }
}



/* Unified luxury reveal
   Hero: původní pomalé odhalování po třech řádcích, potom tři buttony.
   Ostatní nadpisy a položky 03: odhalování po slovech bez změny typografie. */
.hero .hero-title > span{
  opacity:0;
  transform:translateY(.55em);
  filter:blur(6px);
  will-change:transform,opacity,filter;
  animation:heroClaimReveal 1.05s cubic-bezier(.22,1,.36,1) forwards!important;
}
.hero .hero-title > span:nth-child(1){ animation-delay:.18s!important; }
.hero .hero-title > span:nth-child(2){ animation-delay:.38s!important; }
.hero .hero-title > span:nth-child(3){ animation-delay:.58s!important; }

.hero .hero-actions .hero-reveal-button{
  opacity:0;
  transform:translateY(.55em);
  filter:blur(6px);
  will-change:transform,opacity,filter;
  animation:heroButtonReveal 1.05s cubic-bezier(.22,1,.36,1) forwards;
}
/* Plynulé pokračování po třetím řádku: stejná délka i stejný 0,20s rytmus, bez mezery. */
.hero .hero-actions .hero-reveal-button:nth-child(1){ animation-delay:.78s; }
.hero .hero-actions .hero-reveal-button:nth-child(2){ animation-delay:.98s; }
.hero .hero-actions .hero-reveal-button:nth-child(3){ animation-delay:1.18s; }

@keyframes heroButtonReveal{
  to{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

.luxury-reveal-group .luxury-word,
.luxury-list-item .luxury-word{
  display:inline-block!important;
  opacity:0;
  transform:translateY(.55em);
  filter:blur(6px);
  will-change:transform,opacity,filter;
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform 1.05s cubic-bezier(.22,1,.36,1),
    filter 1.05s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--claim-delay,0s);
}

/* Sekce 03: původní barevný hover nesmí přepsat reveal opacity/transform. */
#wardrobe .luxury-list-item .luxury-word{
  transition-property:opacity,transform,filter!important;
  transition-duration:.9s,1.05s,1.05s!important;
  transition-timing-function:cubic-bezier(.22,1,.36,1)!important;
  transition-delay:var(--claim-delay,0s)!important;
}

/* Sekce 03: vnořené animační span musí pouze zdědit původní vzhled.
   Levý název tak zůstává velký a pravý doplňkový text menší. */
#wardrobe .wardrobe-photo-trigger .luxury-word{
  display:inline-block!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  font:inherit!important;
  letter-spacing:inherit!important;
  line-height:inherit!important;
  white-space:normal!important;
  text-align:inherit!important;
  color:inherit!important;
}

.luxury-reveal-group.is-luxury-visible .luxury-word,
.luxury-list-group.is-luxury-visible .luxury-word,
.luxury-list-item.is-luxury-visible .luxury-word{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

@media (prefers-reduced-motion: reduce){
  .hero .hero-title > span,
  .hero .hero-actions .hero-reveal-button,
  .luxury-reveal-group .luxury-word,
  .luxury-list-item .luxury-word{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    transition:none!important;
  }
}


/* ======================================================================
   HERO INTRO SEQUENCE — photo → claim → buttons → menu → brand
   The three claim rows, three buttons, navigation and brand follow the
   same 0.20 s start cadence. Navigation now overlaps the final button
   reveal instead of waiting for it to finish; the brand follows 0.20 s later.
   ====================================================================== */
body.hero-intro-pending .hero-media,
body.hero-intro-pending .site-header .nav,
body.hero-intro-pending .site-header .header-controls,
body.hero-intro-pending .hero .hero-title > span,
body.hero-intro-pending .hero .hero-actions .hero-reveal-button,
body.hero-intro-pending .site-header .brand{
  animation:none!important;
  opacity:0!important;
}
body.hero-intro-pending .hero-media{
  transform:scale(1.025);
  filter:blur(8px) saturate(.8) contrast(1.06);
}
body.hero-intro-pending .site-header .nav,
body.hero-intro-pending .site-header .header-controls,
body.hero-intro-pending .site-header .brand{
  transform:translateY(-10px);
  filter:blur(6px);
}
body.hero-intro-pending .hero .hero-title > span,
body.hero-intro-pending .hero .hero-actions .hero-reveal-button{
  transform:translateY(.55em);
  filter:blur(6px);
}

body.hero-intro-ready .hero-media{
  animation:heroPhotoIntroReveal 1.05s cubic-bezier(.22,1,.36,1) 0s both!important;
}
body.hero-intro-ready .hero .hero-title > span{
  animation:heroClaimReveal 1.05s cubic-bezier(.22,1,.36,1) both!important;
}
body.hero-intro-ready .hero .hero-title > span:nth-child(1){ animation-delay:.30s!important; }
body.hero-intro-ready .hero .hero-title > span:nth-child(2){ animation-delay:.50s!important; }
body.hero-intro-ready .hero .hero-title > span:nth-child(3){ animation-delay:.70s!important; }

body.hero-intro-ready .hero .hero-actions .hero-reveal-button{
  animation:heroButtonReveal 1.05s cubic-bezier(.22,1,.36,1) both!important;
}
body.hero-intro-ready .hero .hero-actions .hero-reveal-button:nth-child(1){ animation-delay:.90s!important; }
body.hero-intro-ready .hero .hero-actions .hero-reveal-button:nth-child(2){ animation-delay:1.10s!important; }
body.hero-intro-ready .hero .hero-actions .hero-reveal-button:nth-child(3){ animation-delay:1.30s!important; }

/* Menu starts 0.20 s after button 3 starts — no wait for its completion. */
body.hero-intro-ready .site-header .nav,
body.hero-intro-ready .site-header .header-controls{
  animation:heroMenuIntroReveal 1.05s cubic-bezier(.22,1,.36,1) 1.50s both!important;
}
/* The brand follows navigation in the same 0.20 s cadence. */
body.hero-intro-ready .site-header .brand{
  animation:heroBrandIntroReveal 1.05s cubic-bezier(.22,1,.36,1) 1.70s both!important;
}

@keyframes heroPhotoIntroReveal{
  from{
    opacity:0;
    transform:scale(1.025);
    filter:blur(8px) saturate(.8) contrast(1.06);
  }
  to{
    opacity:.82;
    transform:scale(1);
    filter:blur(0) saturate(.8) contrast(1.06);
  }
}
/* CSS does not permit grouped @keyframes names; the two animations are
   intentionally kept identical so menu and brand feel like one system. */
@keyframes heroMenuIntroReveal{
  from{ opacity:0; transform:translateY(-10px); filter:blur(6px); }
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}
@keyframes heroBrandIntroReveal{
  from{ opacity:0; transform:translateY(-10px); filter:blur(6px); }
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}

@media (prefers-reduced-motion:reduce){
  body.hero-intro-pending .hero-media,
  body.hero-intro-pending .site-header .nav,
  body.hero-intro-pending .site-header .header-controls,
  body.hero-intro-pending .hero .hero-title > span,
  body.hero-intro-pending .hero .hero-actions .hero-reveal-button,
  body.hero-intro-pending .site-header .brand,
  body.hero-intro-ready .hero-media,
  body.hero-intro-ready .site-header .nav,
  body.hero-intro-ready .site-header .header-controls,
  body.hero-intro-ready .hero .hero-title > span,
  body.hero-intro-ready .hero .hero-actions .hero-reveal-button,
  body.hero-intro-ready .site-header .brand{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
  }
  body.hero-intro-pending .hero-media,
  body.hero-intro-ready .hero-media{
    opacity:.82!important;
    filter:saturate(.8) contrast(1.06)!important;
  }
}


/* ======================================================================
   MOBILE MENU — direct tap always wins over the hero intro timeline
   The closed navigation may still be inside its delayed reveal animation.
   Once the visitor taps the hamburger, the opened panel must be fully
   visible immediately rather than inheriting that pending opacity/filter.
   ====================================================================== */
@media (max-width:980px){
  body.hero-menu-interacted .site-header.menu-open #primary-nav,
  body.hero-menu-interacted .site-header.menu-open .nav{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
}

/* Desktop language trigger — identical outer geometry for every language.
   The code itself is optically tuned so narrow IT and wider RU remain balanced
   without changing the size of the bordered control. */
@media (min-width:981px){
  .desktop-language-trigger{
    width:48px!important;
    min-width:48px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 7px!important;
    gap:5px!important;
  }
  .desktop-language-trigger .language-current{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:19px!important;
    min-width:19px!important;
    font-size:11px!important;
    line-height:1!important;
    letter-spacing:.12em!important;
  }
  .desktop-language-trigger .language-chevron{
    flex:0 0 8px!important;
    width:8px!important;
    text-align:center!important;
  }
  html[lang="it"] .desktop-language-trigger .language-current{
    font-size:11.5px!important;
    letter-spacing:.14em!important;
  }
  html[lang="ru"] .desktop-language-trigger .language-current{
    font-size:10.5px!important;
    letter-spacing:.09em!important;
  }
}


/* IT hero final: approved three-line wording and the same visual scale as CZ. */
@media (min-width:981px){
  html[lang="it"] .hero .hero-title{
    font-size:clamp(54px,6.8vw,108px)!important;
    line-height:1.01!important;
    max-width:12ch!important;
  }
}
@media (max-width:980px){
  html[lang="it"] .hero .hero-title{
    font-size:clamp(42px,12.2vw,58px)!important;
    line-height:1.02!important;
    max-width:10ch!important;
  }
}

/* ======================================================================
   SITE-WIDE LUXURY REVEAL — text, photography and cards
   Text follows the same soft rise/blur language used across the site.
   Desktop card and photo rows reveal from left to right; mobile items are
   revealed individually in their natural top-to-bottom scroll order.
   ====================================================================== */
.site-reveal-text,
.site-reveal-media,
.site-reveal-card{
  --site-reveal-delay:0s;
  will-change:opacity,transform,filter,clip-path;
}

.site-reveal-text{
  opacity:0;
  transform:translateY(22px);
  filter:blur(6px);
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    transform 1.05s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    filter 1.05s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay);
}

.site-reveal-media{
  opacity:0;
  transform:scale(1.018);
  filter:blur(8px) saturate(.86);
  clip-path:inset(0 0 10% 0);
  transition:
    opacity .95s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    transform 1.15s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    filter 1.15s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    clip-path 1.15s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay);
}

/* Cards do not animate transform, because the flip cards use transform for
   their own interaction. Opacity, blur and clip-path keep that interaction
   completely intact. */
.site-reveal-card{
  opacity:0;
  filter:blur(7px);
  clip-path:inset(0 0 12% 0);
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    filter 1.05s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    clip-path 1.05s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    transform .8s cubic-bezier(.2,.75,.2,1),
    background-color .28s var(--ease);
}

.site-reveal-text.is-site-reveal-visible,
.site-reveal-media.is-site-reveal-visible,
.site-reveal-card.is-site-reveal-visible{
  opacity:1;
  transform:none;
  filter:none;
  clip-path:inset(0 0 0 0);
}

@media (max-width:980px){
  .site-reveal-text{
    transform:translateY(18px);
  }
  .site-reveal-media{
    transform:scale(1.012);
  }
}

@media (prefers-reduced-motion:reduce){
  .site-reveal-text,
  .site-reveal-media,
  .site-reveal-card{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    clip-path:none!important;
    transition:none!important;
  }
}


/* =====================================================================
   02 + 04 — skutečně viditelný reveal flip karet
   Původní transform transition flip karet měl vyšší specificitu a přebíjel
   opacity/filter/clip-path reveal, takže se karty jen okamžitě objevily.
   Individual property `translate` zachovává 3D flip přes `transform`.
   ===================================================================== */
#method .method-grid .flip-card.site-reveal-card,
#value .value-grid .flip-card.site-reveal-card{
  translate:0 24px;
  /* clip-path is intentionally disabled here: on the same element as
     transform-style:preserve-3d it flattens the card and breaks its reverse. */
  clip-path:none!important;
  transition:
    opacity 1.00s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    translate 1.10s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    filter 1.10s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    transform .8s cubic-bezier(.2,.75,.2,1),
    background-color .28s var(--ease)!important;
}

#method .method-grid .flip-card.site-reveal-card.is-site-reveal-visible,
#value .value-grid .flip-card.site-reveal-card.is-site-reveal-visible{
  translate:0 0;
  clip-path:none!important;
}

@media (prefers-reduced-motion:reduce){
  #method .method-grid .flip-card.site-reveal-card,
  #value .value-grid .flip-card.site-reveal-card{
    translate:0 0!important;
  }
}

@media (prefers-reduced-motion:reduce){
  #method .method-grid .flip-card.site-reveal-card,
  #value .value-grid .flip-card.site-reveal-card{
    opacity:1!important;
    translate:0 0!important;
    filter:none!important;
    clip-path:none!important;
    transition:none!important;
  }
}


/* =====================================================================
   Tři fotografie za sekcí 01 — stejný čitelný rytmus jako karty 02/04
   Desktop: krátké nadechnutí a postup zleva doprava. Mobilní logika
   zůstává samostatně shora dolů bez skupinové prodlevy.
   ===================================================================== */
@media (min-width:981px){
  .media-band .image-slot.site-reveal-media{
    translate:0 24px;
    transform:scale(1.018);
    transition:
      opacity 1.00s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
      translate 1.10s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
      transform 1.10s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
      filter 1.10s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
      clip-path 1.10s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay);
  }

  .media-band .image-slot.site-reveal-media.is-site-reveal-visible{
    translate:0 0;
    transform:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .media-band .image-slot.site-reveal-media{
    translate:0 0!important;
  }
}


/* =====================================================================
   05 Journal — stejné čitelné postupné odhalení jako karty 02/04
   Základní .journal-card měl jen hover transition, takže reveal působil
   jako skok. Přidáváme vlastní opacity/translate/filter/clip-path rytmus.
   ===================================================================== */
#journal .journal-grid .journal-card.site-reveal-card{
  translate:0 24px;
  transition:
    opacity 1.00s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    translate 1.10s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    filter 1.10s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    clip-path 1.10s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    background-color .28s var(--ease)!important;
}

#journal .journal-grid .journal-card.site-reveal-card.is-site-reveal-visible{
  translate:0 0;
}

@media (prefers-reduced-motion:reduce){
  #journal .journal-grid .journal-card.site-reveal-card{
    opacity:1!important;
    translate:0 0!important;
    filter:none!important;
    clip-path:none!important;
    transition:none!important;
  }
}


/* =====================================================================
   04 Bespoke — bez vloženého podkladu a bez rámečku
   Při reveal má být vidět pouze samotná fotografie pozadí sekce,
   nikoli žádná bílá nebo tónovaná grid vrstva mezi kartami.
   ===================================================================== */
@media (min-width:981px){
  #value .value-grid{
    background:transparent!important;
    border:0!important;
    border-top:0!important;
    gap:0!important;
    padding:0!important;
    box-shadow:none!important;
    position:relative;
  }

  /* Rámeček se objeví až po dokončení reveal poslední karty. */
  #value .value-grid::after{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid rgba(123,79,50,.32);
    opacity:0;
    pointer-events:none;
    z-index:8;
    transition:opacity .38s cubic-bezier(.22,1,.36,1);
  }

  #value .value-grid.is-value-frame-visible::after{
    opacity:1;
  }
}


/* =====================================================================
   05 Journal — bez podkladu během reveal, rámeček až po odhalení všech karet
   Během nástupu je vidět pouze vínové pozadí sekce; po dokončení třetí karty
   jemně dofadeuje pouze vnější rámeček bez návratu podkladové vrstvy.
   ===================================================================== */
@media (min-width:981px){
  #journal .journal-grid{
    background:transparent!important;
    border:0!important;
    gap:0!important;
    padding:0!important;
    box-shadow:none!important;
    position:relative;
  }

  #journal .journal-grid::after{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid rgba(251,247,239,.18);
    opacity:0;
    pointer-events:none;
    z-index:8;
    transition:opacity .38s cubic-bezier(.22,1,.36,1);
  }

  #journal .journal-grid.is-journal-frame-visible::after{
    opacity:1;
  }
}


/* Footer must never remain hidden by the site-wide reveal observer. */
.site-footer,
.site-footer > span{
  opacity:1!important;
  transform:none!important;
  translate:none!important;
  filter:none!important;
  clip-path:none!important;
  visibility:visible!important;
}
.site-footer{
  position:relative;
  z-index:2;
}


/* =====================================================================
   04 Bespoke — mobil bez podkladu během reveal, rámeček až po všech kartách
   Konzistentně s desktopem: během reveal jen fotografie pozadí sekce,
   po plném odhalení všech čtyř karet jemně dofadeuje vnější rámeček.
   ===================================================================== */
@media (max-width:980px){
  #value .value-grid{
    background:transparent!important;
    border:0!important;
    border-top:0!important;
    gap:0!important;
    padding:0!important;
    box-shadow:none!important;
    position:relative;
  }

  #value .value-grid::after{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid rgba(123,79,50,.32);
    opacity:0;
    pointer-events:none;
    z-index:8;
    transition:opacity .38s cubic-bezier(.22,1,.36,1);
  }

  #value .value-grid.is-value-frame-visible::after{
    opacity:1;
  }
}


/* =====================================================================
   01 Ateliér — desktop truly centered across the full section width
   The user wants the heading centered and the intro text block stretched
   wider so each sentence fits comfortably on its own line.
   ===================================================================== */
@media (min-width:981px){
  #atelier{
    grid-template-columns:1fr!important;
    gap:0!important;
  }

  #atelier > .section-kicker{
    grid-column:1 / -1!important;
    margin-bottom:28px!important;
  }

  #atelier .atelier-main{
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:none!important;
    margin:0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
  }

  #atelier .atelier-main h2{
    width:min(100%, 1600px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }

  #atelier .atelier-intro{
    width:min(100%, 1700px)!important;
    max-width:1700px!important;
    margin:56px auto 0!important;
    font-size:clamp(23px,1.55vw,26px)!important;
    line-height:1.58!important;
    text-align:center!important;
  }

  #atelier .atelier-intro span + span{
    margin-top:10px!important;
  }
}


/* =====================================================================
   01 Ateliér — desktop: jemná hierarchie uvnitř tří vět intro textu
   1. věta cca +15 %, 2. věta cca +8 %, 3. věta zůstává základní.
   ===================================================================== */
@media (min-width:981px){
  #atelier .atelier-intro > span:nth-child(1){
    font-size:1.15em!important;
    line-height:1.48!important;
  }

  #atelier .atelier-intro > span:nth-child(2){
    font-size:1.15em!important;
    line-height:1.48!important;
  }

  #atelier .atelier-intro > span:nth-child(3){
    font-size:1em!important;
    line-height:1.58!important;
  }
}


/* =====================================================================
   01 Ateliér — desktop language-specific tuning for sentence 01
   DE still wraps too early -> reduce the first sentence from +15% to +10%.
   RU still wraps too early -> reduce the first sentence from +15% to +5%.
   ===================================================================== */
@media (min-width:981px){
  html[lang="de"] #atelier .atelier-intro > span:nth-child(1){
    font-size:1.10em!important;
    line-height:1.50!important;
  }

  html[lang="ru"] #atelier .atelier-intro > span:nth-child(1){
    font-size:1.05em!important;
    line-height:1.52!important;
  }
}


/* =====================================================================
   01 Ateliér — desktop final language-specific sentence 01 sizing
   All languages use +10 % for the first sentence, except RU which stays at +5 %.
   ===================================================================== */
@media (min-width:981px){
  #atelier .atelier-intro > span:nth-child(1){
    font-size:1.10em!important;
    line-height:1.50!important;
  }

  html[lang="ru"] #atelier .atelier-intro > span:nth-child(1){
    font-size:1.05em!important;
    line-height:1.52!important;
  }
}


/* =====================================================================
   01 Ateliér — RU first sentence back to base size (0 %)
   ===================================================================== */
@media (min-width:981px){
  html[lang="ru"] #atelier .atelier-intro > span:nth-child(1){
    font-size:1em!important;
    line-height:1.58!important;
  }
}


/* =====================================================================
   01 Ateliér — RU second sentence slightly larger (+3 %)
   ===================================================================== */
@media (min-width:981px){
  html[lang="ru"] #atelier .atelier-intro > span:nth-child(2){
    font-size:1.03em!important;
    line-height:1.55!important;
  }
}


/* =====================================================================
   Zelené pole / quote panel — pevná geometrie jako v CZ verzi
   Dlouhé překlady nesmí roztahovat textový sloupec a zužovat fotografii.
   ===================================================================== */
@media (min-width:981px){
  .quote-panel{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }

  .quote-panel .portrait,
  .quote-panel blockquote{
    min-width:0!important;
    width:100%!important;
  }

  .quote-panel blockquote{
    overflow:hidden;
  }
}




/* =====================================================================
   Zelené pole — přesné čtyři řádky a automatické zmenšení jen při nutnosti
   Fotografie má ve všech jazycích stejnou polovinu jako v CZ. Na desktopu
   se každý schválený textový span drží na jediném řádku; JS sníží celý citát
   jen tehdy, když nejdelší řádek skutečně přesahuje dostupnou šířku.
   ===================================================================== */
@media (min-width:981px){
  .quote-panel{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }

  .quote-panel .portrait,
  .quote-panel blockquote{
    min-width:0!important;
    width:100%!important;
  }

  .quote-panel blockquote{
    padding-left:4vw!important;
    padding-right:4vw!important;
    overflow:hidden!important;
  }

  .quote-panel blockquote p > span[data-cs]{
    display:block!important;
    white-space:nowrap!important;
    max-width:none!important;
  }
}


/* =====================================================================
   05 Journal — three separate gold-framed stories
   Instead of one shared block, each journal card gets its own subtle gold
   frame. The shared outer frame is disabled so the section reads as three
   distinct stories.
   ===================================================================== */
#journal .journal-grid{
  gap:14px!important;
  background:transparent!important;
  border:0!important;
}

#journal .journal-card{
  border:1px solid rgba(205,165,74,.52)!important;
  background:var(--burgundy)!important;
  box-shadow:none!important;
}

#journal .journal-card:hover{
  border-color:rgba(205,165,74,.9)!important;
}

@media (min-width:981px){
  #journal .journal-grid{
    gap:14px!important;
    background:transparent!important;
    border:0!important;
    padding:0!important;
  }

  #journal .journal-grid::after{
    display:none!important;
    content:none!important;
  }
}

@media (max-width:980px){
  #journal .journal-grid{
    gap:12px!important;
    background:transparent!important;
    border:0!important;
  }
}

/* Pojistka proti 1–2px zaokrouhlovacím přesahům (zoom na velkých displejích) */
html, body{ overflow-x:hidden; }

/* =====================================================================
   FINÁLNÍ KOREKCE (musí zůstat na konci souboru) — obnova oprav
   přetékání ověřených s reálným Didotem; edice s rámečky je přebila.
   ===================================================================== */
@media (min-width:981px){
  html[lang="it"] .hero .hero-title{ font-size:min(6.8vw, 98px)!important; }
  html[lang="de"] #method .method-grid article:nth-child(1) .flip-back-note{ font-size:19.4px!important; }
  html[lang="de"] #value .value-grid article:nth-child(1) .flip-back-note{ font-size:20px!important; }
}
@media (max-width:980px){
  html[lang="de"] .hero .hero-title{ max-width:100%!important; }
  html[lang="it"] .hero .hero-title{ font-size:min(51px, 12.9vw)!important; max-width:100%!important; }
}

/* =====================================================================
   02 — kompaktnější vertikální geometrie karet
   Zachovává plné překlady do maximálně pěti řádků bez zmenšování písma.
   ===================================================================== */
@media (min-width:981px){
  #method .method-grid > article,
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) #method .method-grid > article{
    min-height:0!important;
    padding:30px 26px 24px!important;
  }
  #method .method-grid h3{
    margin-top:22px!important;
  }
  #method .method-grid h3 + p,
  #method .method-grid article:last-child h3 + p{
    margin-top:14px!important;
    margin-bottom:0!important;
    line-height:1.55!important;
  }
  #method .method-grid .flip-back{
    gap:14px!important;
    padding:30px 26px!important;
  }
}

@media (max-width:980px){
  #method .method-grid > article,
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) #method .method-grid > article{
    min-height:0!important;
    padding:28px 24px 24px!important;
  }
  #method .method-grid h3{
    margin-top:20px!important;
  }
  #method .method-grid h3 + p,
  #method .method-grid article:last-child h3 + p{
    margin-top:14px!important;
    margin-bottom:0!important;
    line-height:1.55!important;
  }
  #method .method-grid .flip-back{
    gap:14px!important;
    padding:28px 24px!important;
  }
}

/* =====================================================================
   HERO DESKTOP — společná horní osa fotografie a claimu
   Textový blok už není přitlačen ke spodní hraně ani odsazen horním
   paddingem. První řádek claimu začíná přesně na horní hraně fotografie.
   ===================================================================== */
@media (min-width:981px){
  .hero{
    --hero-desktop-content-top:158px;
  }
  .hero-media{
    top:var(--hero-desktop-content-top)!important;
    height:calc(100% - var(--hero-desktop-content-top))!important;
  }
  .hero-copy{
    position:relative!important;
    grid-column:2!important;
    align-self:start!important;
    margin-top:var(--hero-desktop-content-top)!important;
    padding:0 6vw 0 4.25vw!important;
    max-width:720px!important;
  }
  .hero .hero-title{
    position:relative!important;
    margin:0!important;
    transform:none!important;
  }
}

/* =====================================================================
   HERO DESKTOP — jednotná typografická výška ve všech jazycích
   CZ / EN / DE / IT / ES / RU používají stejnou výslednou velikost claimu.
   Tím zůstává horní osa společná a trojice CTA při změně jazyka neposkakuje.
   ===================================================================== */
@media (min-width:981px){
  html[lang] .hero .hero-title{
    font-size:min(6.8vw, 98px)!important;
    line-height:1.01!important;
  }
}

/* =====================================================================
   HERO DESKTOP — skutečný crop do fyzické výšky viewportu
   Kompenzuje globální zoom velkých displejů: typografie zůstává škálovaná,
   ale fotografie ani celý hero blok už nepřerostou spodní hranu obrazovky.
   ===================================================================== */
@media (min-width:981px){
  .hero{
    min-height:0!important;
    height:var(--hero-viewport-height, 100vh)!important;
    max-height:var(--hero-viewport-height, 100vh)!important;
  }
  .hero-media{
    height:calc(var(--hero-viewport-height, 100vh) - var(--hero-desktop-content-top))!important;
  }
}

/* =====================================================================
   ZELENÉ POLE — portrét vždy ukotvený hlavou nahoře
   Na velmi širokých displejích se fotografie ořezává odspodu, nikoli přes
   hlavu. Horizontální usazení portrétu zůstává zachované.
   ===================================================================== */
@media (min-width:981px){
  .quote-panel .portrait{
    background-position:74% top!important;
  }
}

/* =====================================================================
   ZELENÉ POLE — maximálně jedna fyzická obrazovka na desktopu
   Při globálním zoomu velkých displejů používá stejnou kompenzovanou
   výšku jako hero. Standardní výška 820 px zůstává zachována všude,
   kde se do viewportu vejde; na nižším okně se panel pouze vertikálně
   ořízne na výšku obrazovky, bez změny šířky, fontu nebo jazykových textů.
   ===================================================================== */
@media (min-width:981px){
  .quote-panel{
    min-height:0!important;
    height:min(820px, var(--hero-viewport-height, 100vh))!important;
    max-height:var(--hero-viewport-height, 100vh)!important;
  }

  .quote-panel .portrait,
  .quote-panel blockquote{
    min-height:0!important;
    height:100%!important;
  }
}

/* Discreet entry price for the personal shirt programme */
.wardrobe-entry-price{
  margin-top:clamp(18px,2.1vw,30px);
  padding-top:clamp(14px,1.7vw,22px);
  border-top:1px solid rgba(251,247,239,.18);
  display:grid;
  gap:8px;
}
.wardrobe-entry-price-title{
  display:block;
  margin:0 0 2px;
  font:400 16px/1.25 var(--serif);
  letter-spacing:-.01em;
  font-style:normal;
  color:rgba(251,247,239,.88);
}
.wardrobe-entry-price strong{
  font:500 14px/1.25 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(251,247,239,.88);
}
.wardrobe-entry-price span{
  max-width:58ch;
  font-size:12px;
  line-height:1.55;
  color:rgba(251,247,239,.56);
}


/* Atelier intro — lead sentence + full-block quotation marks */
#atelier .atelier-intro{
  position:relative;
  padding-top:22px;
  padding-bottom:20px;
}
#atelier .atelier-intro > .atelier-intro-lead{
  font-family:var(--serif);
  font-size:clamp(23px,2vw,32px)!important;
  line-height:1.18!important;
  letter-spacing:-.02em;
  color:var(--black);
  max-width:34ch;
  margin-bottom:14px!important;
}
#atelier .atelier-intro > .atelier-quote-mark{
  display:block!important;
  font-family:var(--serif);
  font-size:58px!important;
  line-height:.55!important;
  color:var(--gold);
  height:28px;
  pointer-events:none;
}
#atelier .atelier-intro > .atelier-quote-open{
  margin:0 0 14px -2px!important;
}
#atelier .atelier-intro > .atelier-quote-close{
  margin:22px 0 0 -2px!important;
}
@media (max-width:980px){
  #atelier .atelier-intro{
    padding-top:14px;
    padding-bottom:12px;
  }
  #atelier .atelier-intro > .atelier-intro-lead{
    font-size:23px!important;
    line-height:1.2!important;
    margin-bottom:12px!important;
  }
  #atelier .atelier-intro > .atelier-quote-mark{
    font-size:48px!important;
    height:24px;
  }
  #atelier .atelier-intro > .atelier-quote-open{margin-bottom:12px!important;}
  #atelier .atelier-intro > .atelier-quote-close{margin-top:18px!important;}
}

/* =====================================================================
   01 ATELIÉR — finální korekce citátového bloku
   Lead zůstává na společné středové ose, na desktopu je na jednom řádku
   a je pouze typograficky větší. Uvozovky jsou plně viditelné nad a pod
   celým blokem.
   ===================================================================== */
#atelier .atelier-intro > .atelier-quote-mark{
  width:100%!important;
  height:auto!important;
  overflow:visible!important;
  text-align:center!important;
  font-family:var(--serif)!important;
  font-size:64px!important;
  line-height:1!important;
  color:var(--gold)!important;
}
#atelier .atelier-intro > .atelier-quote-open{
  margin:0 0 10px!important;
}
#atelier .atelier-intro > .atelier-quote-close{
  margin:18px 0 0!important;
}

@media (min-width:981px){
  #atelier .atelier-intro > .atelier-intro-lead{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0 0 16px!important;
    text-align:center!important;
    white-space:nowrap!important;
    font-size:clamp(24px,2.45vw,40px)!important;
    line-height:1.16!important;
    letter-spacing:-.02em!important;
  }
}

@media (max-width:980px){
  #atelier .atelier-intro > .atelier-quote-mark{
    font-size:54px!important;
    line-height:1!important;
  }
  #atelier .atelier-intro > .atelier-quote-open{
    margin:0 0 8px!important;
  }
  #atelier .atelier-intro > .atelier-quote-close{
    margin:16px 0 0!important;
  }
}

/* Atelier intro — lead and body use the same font weight; lead differs only by size */
#atelier .atelier-intro > .atelier-intro-lead,
#atelier .atelier-intro > .atelier-intro-body{
  font-weight:400!important;
}
#atelier .atelier-intro > .atelier-intro-body{
  color:var(--black)!important;
}


/* 02 / karta 02 — jemná korekce: zachovat 2 řádky bez viditelného zmenšení */
@media (min-width:981px){
  html[lang="cs"] #method .method-grid article:nth-child(2) .flip-back-note{
    font-size:19px!important;
  }
}

/* 02 icon optical tuning: slightly smaller clock in card 01 */
#method .method-grid article:nth-child(1) .flip-back .flip-icon{
  width:44px!important;
  height:44px!important;
}


/* Atelier quote marks — identical optical glyph size top/bottom */
#atelier .atelier-intro > .atelier-quote-open{
  transform:rotate(180deg)!important;
  transform-origin:center center!important;
}

/* FINAL atelier quotation marks — exact same rendered size; cache-busted 20260825-q2 */
#atelier .atelier-intro > .atelier-quote-open,
#atelier .atelier-intro > .atelier-quote-close{
  display:block!important;
  width:100%!important;
  height:64px!important;
  margin-left:0!important;
  margin-right:0!important;
  font-family:var(--serif)!important;
  font-size:64px!important;
  font-weight:400!important;
  line-height:64px!important;
  text-align:center!important;
  color:var(--gold)!important;
  overflow:visible!important;
}
#atelier .atelier-intro > .atelier-quote-open{
  transform:rotate(180deg)!important;
  transform-origin:50% 50%!important;
  margin-top:0!important;
  margin-bottom:10px!important;
}
#atelier .atelier-intro > .atelier-quote-close{
  transform:none!important;
  margin-top:18px!important;
  margin-bottom:0!important;
}
@media (max-width:980px){
  #atelier .atelier-intro > .atelier-quote-open,
  #atelier .atelier-intro > .atelier-quote-close{
    height:54px!important;
    font-size:54px!important;
    line-height:54px!important;
  }
}


/* HARD FIX q3 — quotation marks must override legacy nth-child rules */
#atelier .atelier-intro > span.atelier-quote-open:nth-child(1),
#atelier .atelier-intro > span.atelier-quote-close:last-child{
  display:block!important;
  width:100%!important;
  height:64px!important;
  font-family:var(--serif)!important;
  font-size:64px!important;
  font-weight:400!important;
  line-height:64px!important;
  text-align:center!important;
  color:var(--gold)!important;
  overflow:visible!important;
}
#atelier .atelier-intro > span.atelier-quote-open:nth-child(1){
  transform:rotate(180deg)!important;
  transform-origin:50% 50%!important;
}
#atelier .atelier-intro > span.atelier-quote-close:last-child{
  transform:none!important;
}
@media (max-width:980px){
  #atelier .atelier-intro > span.atelier-quote-open:nth-child(1),
  #atelier .atelier-intro > span.atelier-quote-close:last-child{
    height:54px!important;
    font-size:54px!important;
    line-height:54px!important;
  }
}


/* q4 — semantic atelier intro overrides; legacy nth-child rules must not touch quote marks */
@media (min-width:981px){
  #atelier .atelier-intro > span.atelier-quote-open:nth-child(1),
  #atelier .atelier-intro > span.atelier-quote-close:nth-child(5){
    display:block!important;
    width:100%!important;
    height:64px!important;
    font-family:var(--serif)!important;
    font-size:64px!important;
    font-weight:400!important;
    line-height:64px!important;
    text-align:center!important;
    color:var(--gold)!important;
    overflow:visible!important;
  }
  #atelier .atelier-intro > span.atelier-quote-open:nth-child(1){
    transform:rotate(180deg)!important;
    transform-origin:50% 50%!important;
  }
  #atelier .atelier-intro > span.atelier-quote-close:nth-child(5){
    transform:none!important;
  }
  #atelier .atelier-intro > span.atelier-intro-lead:nth-child(2){
    font-size:clamp(24px,2.45vw,40px)!important;
    line-height:1.16!important;
  }
  #atelier .atelier-intro > span.atelier-intro-body:nth-child(3),
  #atelier .atelier-intro > span.atelier-intro-body:nth-child(4){
    font-size:1em!important;
    line-height:1.58!important;
  }
}

/* q5 — atelier lead back to previous size; quote marks remain unchanged */
@media (min-width:981px){
  #atelier .atelier-intro > span.atelier-intro-lead:nth-child(2){
    font-size:clamp(23px,2vw,32px)!important;
    line-height:1.18!important;
  }
}


/* EN · sekce 02 · finální sazba karet 02–03 */
@media (min-width:981px){
  html[lang="en"] #method .method-grid article:nth-child(2) .flip-back-value{
    font-size:clamp(31px,2.35vw,37px)!important;
    letter-spacing:-.025em!important;
    white-space:nowrap!important;
  }
  html[lang="en"] #method .method-grid article:nth-child(2) .flip-back-note,
  html[lang="en"] #method .method-grid article:nth-child(3) .flip-back-note{
    font-size:18px!important;
    line-height:1.48!important;
    max-width:none!important;
    white-space:nowrap!important;
  }
}
@media (max-width:980px){
  html[lang="en"] #method .method-grid article:nth-child(2) .flip-back-value{
    font-size:clamp(30px,8.2vw,36px)!important;
    letter-spacing:-.025em!important;
    white-space:nowrap!important;
  }
  html[lang="en"] #method .method-grid article:nth-child(2) .flip-back-note,
  html[lang="en"] #method .method-grid article:nth-child(3) .flip-back-note{
    font-size:17px!important;
    line-height:1.46!important;
    max-width:none!important;
  }
}

/* EN statement: approved fixed line break */
html[lang="en"] .statement p > span{
  display:block!important;
}
html[lang="en"] .statement p > span::after{
  content:""!important;
}


/* EN · section 02 · card 02 final refinement */
@media (min-width:981px){
  html[lang="en"] #method .method-grid article:nth-child(2) .flip-back-value{
    font-size:clamp(27px,2.05vw,32px)!important;
    letter-spacing:-.02em!important;
    white-space:nowrap!important;
  }
  html[lang="en"] #method .method-grid article:nth-child(2) .flip-back-note{
    font-size:18px!important;
    line-height:1.48!important;
    white-space:nowrap!important;
  }
}
@media (max-width:980px){
  html[lang="en"] #method .method-grid article:nth-child(2) .flip-back-value{
    font-size:clamp(27px,7.2vw,32px)!important;
    letter-spacing:-.02em!important;
  }
  html[lang="en"] #method .method-grid article:nth-child(2) .flip-back-note{
    font-size:17px!important;
    line-height:1.46!important;
  }
}

/* EN FINAL — 02/04 flip-card typography, 2026-08-25 */
@media (min-width:981px){
  /* Section 02: all concise backs use an intentional two-line rhythm. */
  html[lang="en"] #method .method-grid .flip-back-note{
    font-size:17.5px!important;
    line-height:1.46!important;
    max-width:none!important;
    white-space:nowrap!important;
    letter-spacing:-.005em!important;
  }
  /* The long English measurement label needs a quieter scale. */
  html[lang="en"] #method .method-grid article:nth-child(2) .flip-back-value{
    font-size:32px!important;
    line-height:1!important;
    letter-spacing:-.02em!important;
    white-space:nowrap!important;
  }
  /* Section 04 / card 03: keep the DNA statement on exactly two lines. */
  html[lang="en"] #value .value-grid article:nth-child(3) .flip-back-note{
    font-size:16.5px!important;
    line-height:1.45!important;
    max-width:none!important;
    white-space:nowrap!important;
    letter-spacing:-.005em!important;
  }
}
@media (max-width:980px){
  html[lang="en"] #method .method-grid article:nth-child(2) .flip-back-value{
    font-size:30px!important;
    white-space:normal!important;
  }
  html[lang="en"] #method .method-grid .flip-back-note,
  html[lang="en"] #value .value-grid article:nth-child(3) .flip-back-note{
    white-space:normal!important;
  }
}

/* =====================================================================
   FINAL LANGUAGE VISUAL PARITY — CZ is the master
   02 + 04 flipped backs: one-line heading + exactly two-line note.
   This block intentionally overrides all earlier language experiments.
   ===================================================================== */
@media (min-width:981px){
  #method .method-grid .flip-back,
  #value .value-grid .flip-back{
    gap:18px!important;
  }
  #method .method-grid .flip-back-value,
  #value .value-grid .flip-back-value{
    display:block!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:visible!important;
    line-height:1!important;
  }
  #method .method-grid .flip-back-note,
  #value .value-grid .flip-back-note{
    display:block!important;
    width:auto!important;
    max-width:none!important;
    white-space:nowrap!important;
    line-height:1.48!important;
    letter-spacing:-.006em!important;
  }

  /* 02 notes — same optical rhythm as Czech, only language-length compensation */
  html[lang="cs"] #method .flip-back-note{font-size:20px!important;}
  html[lang="en"] #method .flip-back-note{font-size:17px!important;}
  html[lang="de"] #method .flip-back-note{font-size:16.5px!important;}
  html[lang="it"] #method .flip-back-note{font-size:16.5px!important;}
  html[lang="es"] #method .flip-back-note{font-size:16.5px!important;}
  html[lang="ru"] #method .flip-back-note{font-size:16px!important;}

  /* 02 headings */
  #method .flip-back-value{font-size:42px!important;}
  html[lang="en"] #method article:nth-child(2) .flip-back-value{font-size:29px!important;}
  html[lang="de"] #method article:nth-child(2) .flip-back-value{font-size:35px!important;}
  html[lang="it"] #method article:nth-child(2) .flip-back-value{font-size:31px!important;}
  html[lang="es"] #method article:nth-child(2) .flip-back-value{font-size:29px!important;}
  html[lang="ru"] #method article:nth-child(2) .flip-back-value{font-size:36px!important;}
  html[lang="de"] #method article:nth-child(3) .flip-back-value{font-size:34px!important;}
  html[lang="it"] #method article:nth-child(3) .flip-back-value{font-size:34px!important;}
  html[lang="es"] #method article:nth-child(3) .flip-back-value{font-size:31px!important;}
  html[lang="ru"] #method article:nth-child(3) .flip-back-value{font-size:31px!important;}
  html[lang="de"] #method article:nth-child(4) .flip-back-value{font-size:32px!important;}
  html[lang="it"] #method article:nth-child(4) .flip-back-value{font-size:31px!important;}
  html[lang="es"] #method article:nth-child(4) .flip-back-value{font-size:29px!important;}
  html[lang="ru"] #method article:nth-child(4) .flip-back-value{font-size:30px!important;}

  /* 04 notes — exactly two lines in every language */
  html[lang="cs"] #value .flip-back-note{font-size:20px!important;}
  html[lang="en"] #value .flip-back-note{font-size:18px!important;}
  html[lang="de"] #value .flip-back-note{font-size:17px!important;}
  html[lang="it"] #value .flip-back-note{font-size:17px!important;}
  html[lang="es"] #value .flip-back-note{font-size:17px!important;}
  html[lang="ru"] #value .flip-back-note{font-size:16.5px!important;}

  /* 04 headings — same visual scale; longer translations get only the minimum reduction needed */
  #value .flip-back-value{font-size:42px!important;}
  html[lang="en"] #value article:nth-child(1) .flip-back-value{font-size:38px!important;}
  html[lang="de"] #value article:nth-child(3) .flip-back-value{font-size:32px!important;}
  html[lang="it"] #value article:nth-child(3) .flip-back-value{font-size:34px!important;}
  html[lang="es"] #value article:nth-child(3) .flip-back-value{font-size:32px!important;}
  html[lang="ru"] #value article:nth-child(3) .flip-back-value{font-size:31px!important;}
  html[lang="de"] #value article:nth-child(4) .flip-back-value{font-size:35px!important;}
  html[lang="it"] #value article:nth-child(4) .flip-back-value{font-size:35px!important;}
  html[lang="es"] #value article:nth-child(4) .flip-back-value{font-size:35px!important;}
  html[lang="ru"] #value article:nth-child(4) .flip-back-value{font-size:34px!important;}
}

/* =====================================================================
   FINAL LANGUAGE CARD CLEANUP — 2026-08-25
   CZ remains the visual master. Foreign-language copy is shortened in HTML
   and these rules only provide minimal optical compensation.
   ===================================================================== */
@media (min-width:981px){
  #method .method-grid .flip-back-value,
  #value .value-grid .flip-back-value{
    white-space:nowrap!important;
    overflow:visible!important;
    max-width:100%!important;
    line-height:1.02!important;
  }
  #method .method-grid .flip-back-note,
  #value .value-grid .flip-back-note{
    white-space:nowrap!important;
    max-width:none!important;
    line-height:1.46!important;
    letter-spacing:-.008em!important;
  }

  /* section 02 — concise side */
  html[lang="en"] #method .flip-back-note,
  html[lang="de"] #method .flip-back-note,
  html[lang="es"] #method .flip-back-note,
  html[lang="it"] #method .flip-back-note{font-size:18.5px!important;}
  html[lang="ru"] #method .flip-back-note{font-size:18px!important;}

  html[lang="en"] #method article:nth-child(2) .flip-back-value{font-size:36px!important;}
  html[lang="es"] #method article:nth-child(2) .flip-back-value,
  html[lang="it"] #method article:nth-child(2) .flip-back-value{font-size:38px!important;}
  html[lang="ru"] #method article:nth-child(2) .flip-back-value{font-size:40px!important;}

  html[lang="de"] #method article:nth-child(3) .flip-back-value,
  html[lang="es"] #method article:nth-child(3) .flip-back-value,
  html[lang="it"] #method article:nth-child(3) .flip-back-value{font-size:40px!important;}
  html[lang="ru"] #method article:nth-child(3) .flip-back-value{font-size:37px!important;}

  html[lang="de"] #method article:nth-child(4) .flip-back-value{font-size:37px!important;}
  html[lang="es"] #method article:nth-child(4) .flip-back-value{font-size:36px!important;}
  html[lang="it"] #method article:nth-child(4) .flip-back-value{font-size:34px!important;}
  html[lang="ru"] #method article:nth-child(4) .flip-back-value{font-size:34px!important;}

  /* section 04 — concise side */
  html:not([lang="cs"]) #value .flip-back-note{font-size:18.5px!important;}
  html[lang="ru"] #value .flip-back-note{font-size:18px!important;}
  html[lang="de"] #value article:nth-child(3) .flip-back-value{font-size:36px!important;}
  html[lang="es"] #value article:nth-child(3) .flip-back-value,
  html[lang="it"] #value article:nth-child(3) .flip-back-value{font-size:35px!important;}
  html[lang="ru"] #value article:nth-child(3) .flip-back-value{font-size:35px!important;}

  /* RU long side in value card 03 — always two lines, never four */
  html[lang="ru"] #value .value-grid article:nth-child(3) > h3{
    font-size:clamp(38px,3.2vw,54px)!important;
    line-height:1.02!important;
    letter-spacing:-.025em!important;
  }

  /* Russian atelier intro: natural wrapping instead of oversized clipped lines */
  html[lang="ru"] #atelier .atelier-intro{
    max-width:1500px!important;
  }
  html[lang="ru"] #atelier .atelier-intro > .atelier-intro-lead{
    font-size:clamp(24px,1.75vw,30px)!important;
    line-height:1.2!important;
    white-space:normal!important;
  }
  html[lang="ru"] #atelier .atelier-intro > .atelier-intro-body{
    font-size:clamp(19px,1.25vw,22px)!important;
    line-height:1.5!important;
    white-space:normal!important;
  }
  html[lang="ru"] #atelier .atelier-intro > .atelier-quote-open,
  html[lang="ru"] #atelier .atelier-intro > .atelier-quote-close{
    font-size:64px!important;
    line-height:64px!important;
    height:64px!important;
  }
}

/* Quote marks — exact same computed size; defeats legacy nth-child intro rules */
#atelier .atelier-intro > span.atelier-quote-open.atelier-quote-mark:nth-child(1),
#atelier .atelier-intro > span.atelier-quote-close.atelier-quote-mark:nth-child(5){
  display:block!important;
  width:100%!important;
  height:64px!important;
  font-size:64px!important;
  line-height:64px!important;
  font-weight:400!important;
  text-align:center!important;
  color:var(--gold)!important;
}

/* =====================================================================
   LANGUAGE CARD REBUILD 4 — CZ geometry is the master.
   Explicit <br> controls line count; JS only reduces type when a line is
   physically wider than the card. No language is allowed to overflow.
   ===================================================================== */
@media (min-width:981px){
  #method .method-grid .flip-back,
  #value .value-grid .flip-back{
    gap:18px!important;
    padding:36px 30px!important;
  }
  #method .method-grid .flip-back-value,
  #value .value-grid .flip-back-value{
    display:block!important;
    font-size:42px!important;
    line-height:1.02!important;
    letter-spacing:-.025em!important;
    white-space:nowrap!important;
    max-width:none!important;
    width:auto!important;
    overflow:visible!important;
  }
  #method .method-grid .flip-back-note,
  #value .value-grid .flip-back-note{
    display:block!important;
    font-size:20px!important;
    line-height:1.48!important;
    letter-spacing:-.006em!important;
    white-space:nowrap!important;
    max-width:none!important;
    width:auto!important;
    overflow:visible!important;
  }

  /* Front-side headings use the same two-line architecture as CZ. */
  #value .value-grid > article > h3,
  #method .method-grid > article > h3{
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  /* RU atelier intro: intentionally narrower and controlled, never clipped. */
  html[lang="ru"] #atelier .atelier-intro{
    max-width:min(1560px,92vw)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html[lang="ru"] #atelier .atelier-intro > .atelier-intro-lead{
    font-size:clamp(23px,1.55vw,29px)!important;
    line-height:1.2!important;
    white-space:normal!important;
  }
  html[lang="ru"] #atelier .atelier-intro > .atelier-intro-body{
    font-size:clamp(18px,1.18vw,22px)!important;
    line-height:1.5!important;
    white-space:normal!important;
  }
}

/* Quote glyphs: the exact same glyph and physical type size. */
#atelier .atelier-intro > .atelier-quote-open,
#atelier .atelier-intro > .atelier-quote-close{
  display:block!important;
  width:100%!important;
  height:64px!important;
  min-height:64px!important;
  font-size:64px!important;
  line-height:64px!important;
  font-weight:400!important;
  text-align:center!important;
  color:var(--gold)!important;
  font-family:var(--serif)!important;
}
#atelier .atelier-intro > .atelier-quote-open{
  transform:rotate(180deg)!important;
  transform-origin:center center!important;
}
#atelier .atelier-intro > .atelier-quote-close{
  transform:none!important;
}


/* RU FINAL TUNING — 2026-08-26: visual parity with CZ */
@media (min-width:981px){
  /* Atelier quote: use the available horizontal space and keep RU readable. */
  html[lang="ru"] #atelier .atelier-intro{
    width:min(100%,1800px)!important;
    max-width:min(1800px,95vw)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html[lang="ru"] #atelier .atelier-intro > .atelier-intro-lead{
    width:100%!important;
    max-width:none!important;
    font-size:clamp(30px,1.9vw,38px)!important;
    line-height:1.18!important;
    white-space:normal!important;
  }
  html[lang="ru"] #atelier .atelier-intro > .atelier-intro-body{
    width:100%!important;
    max-width:none!important;
    font-size:clamp(23px,1.45vw,30px)!important;
    line-height:1.44!important;
    white-space:normal!important;
  }

  /* RU value card 03: visually match the other card headlines. */
  html[lang="ru"] #value .value-grid article:nth-child(3) > h3{
    font-size:38px!important;
    line-height:1.02!important;
    letter-spacing:-.025em!important;
  }
}




/* RU FINAL MICRO-TUNE — 2026-08-26 */
@media (min-width:981px){
  /* Philosophy card 02: compact three-line paragraph, no visual holes. */
  html[lang="ru"] #method .method-grid article:nth-child(2) > p{
    font-size:15.5px!important;
    line-height:1.55!important;
    letter-spacing:-.006em!important;
  }
}


/* RU card 02 micro-size — 2026-08-26 */
@media (min-width:981px){
  html[lang="ru"] #method .method-grid article:nth-child(2) .flip-back-value{
    font-size:37.5px!important;
  }
}

/* RU 04 concise card 04 — keep first sentence fragment on one line */
html[lang="ru"] #value .value-grid article:nth-child(4) .flip-back-note .nowrap-phrase{
  white-space:nowrap!important;
}


/* RU FINAL SIZE PARITY — 2026-08-26 */
@media (min-width:981px){
  /* Section 04 long face, card 03: visually align with neighboring headlines. */
  html[lang="ru"] #value .value-grid article:nth-child(3) > h3{
    font-size:35px!important;
    line-height:1.03!important;
    letter-spacing:-.02em!important;
  }
  /* Section 02 concise faces, cards 01–02: smaller numeral-led headlines.
     JS uses the same 36px base after fonts load, preventing later fit reset. */
  html[lang="ru"] #method .method-grid article:nth-child(1) .flip-back-value,
  html[lang="ru"] #method .method-grid article:nth-child(2) .flip-back-value{
    font-size:36px!important;
  }
}


/* RU OPTICAL PARITY — 2026-08-26: numerals/cyrillic matched by eye, not nominal size */
@media (min-width:981px){
  html[lang="ru"] #value .value-grid article:nth-child(3) > h3{
    font-size:31px!important;
    line-height:1.04!important;
    letter-spacing:-.015em!important;
  }
  html[lang="ru"] #method .method-grid article:nth-child(1) .flip-back-value,
  html[lang="ru"] #method .method-grid article:nth-child(2) .flip-back-value{
    font-size:31px!important;
  }
}

/* SECTION 04 CONCISE HEADLINE PARITY — all four cards use the same title metrics as “Trvalá hodnota”. */
@media (min-width:981px){
  #value .value-grid .flip-back .flip-back-value{
    font-size:42px!important;
    line-height:1.02!important;
    letter-spacing:-.025em!important;
    white-space:nowrap!important;
    min-height:1.02em!important;
  }
}

/* SECTION 04 — concise-side heading geometry is identical in all four cards. */
#value .value-grid .flip-back .flip-back-value{
  line-height:1.02!important;
  min-height:1.02em!important;
  margin:0!important;
}

/* SECTION 02 — concise card 01: numeral-led 60–90 title optically matched to the other card titles. */
@media (min-width:981px){
  #method .method-grid article:nth-child(1) .flip-back-value{
    font-size:36px!important;
    line-height:1.02!important;
    letter-spacing:-.02em!important;
  }
  html[lang="ru"] #method .method-grid article:nth-child(1) .flip-back-value{
    font-size:31px!important;
  }
}


/* SECTION 02 EXACT TITLE PARITY — card 01 uses card 03 as the size master.
   Initial paint shares the same base; JS copies card 03's post-fit computed size exactly. */
@media (min-width:981px){
  #method .method-grid article:nth-child(1) .flip-back-value{
    font-size:42px!important;
    line-height:1.02!important;
    letter-spacing:-.025em!important;
  }
}


/* RU atelier quote lead — 2026-08-26: slightly larger first sentence only */
@media (min-width:981px){
  html[lang="ru"] #atelier .atelier-intro > .atelier-intro-lead{
    font-size:clamp(32px,2.1vw,41px)!important;
  }
}

/* RU atelier lead — exact parity with the approved lead size in other languages. */
@media (min-width:981px){
  html[lang="ru"] #atelier .atelier-intro > .atelier-intro-lead{
    font-size:clamp(24px,2.45vw,40px)!important;
  }
}

/* RU atelier — ONLY the first sentence is enlarged. No body/quote changes. */
@media (min-width:981px){
  html[lang="ru"] #atelier .atelier-intro > span.atelier-intro-lead{
    font-size:clamp(28px,2.75vw,44px)!important;
  }
}

/* RU ATELIER — FINAL: enlarge ONLY the first sentence of the quotation. */
@media (min-width:981px){
  html[lang="ru"] #atelier .atelier-intro > span.atelier-intro-lead:nth-child(2){
    font-size:46px!important;
    line-height:1.14!important;
  }
}

/* RU ATELIER — exact parity with the approved first-sentence size in other languages. */
@media (min-width:981px){
  html[lang="ru"] #atelier .atelier-intro > span.atelier-intro-lead:nth-child(2){
    font-size:clamp(23px,2vw,32px)!important;
    line-height:1.18!important;
  }
}

/* RU ATELIER QUOTE — FINAL VISUAL TUNE 2026-08-26
   RU only. First sentence gets the same visual emphasis as CZ/EN; body remains quieter. */
@media (min-width:981px){
  html[lang="ru"] #atelier .atelier-intro{
    width:min(100%,1700px)!important;
    max-width:min(1700px,94vw)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html[lang="ru"] #atelier .atelier-intro > span.atelier-intro-lead:nth-child(2){
    font-size:36px!important;
    line-height:1.18!important;
    letter-spacing:-.015em!important;
    white-space:nowrap!important;
  }
  html[lang="ru"] #atelier .atelier-intro > span.atelier-intro-body:nth-child(3),
  html[lang="ru"] #atelier .atelier-intro > span.atelier-intro-body:nth-child(4){
    font-size:20px!important;
    line-height:1.50!important;
    letter-spacing:0!important;
    white-space:normal!important;
  }
}


/* RU Bespoke 04 / card 01 — only this concise headline is slightly smaller.
   JS fine-fits it after font load without shrinking cards 02–04. */
@media (min-width:981px){
  html[lang="ru"] #value .value-grid article:nth-child(1) .flip-back-value{
    font-size:31px!important;
  }
}

/* RU 04 Bespoke card 01 concise title — FINAL, must fit on wide desktop too. */
@media (min-width:981px){
  html[lang="ru"] #value .value-grid article:nth-child(1) .flip-back .flip-back-value{
    font-size:27px!important;
    line-height:1.02!important;
    letter-spacing:-.03em!important;
    white-space:nowrap!important;
    max-width:100%!important;
  }
}

/* RU 04 Bespoke card 01 — align body copy with the other concise card backs */
html[lang="ru"] #value .value-grid article:nth-child(1) .flip-back-note{
  transform:translateY(8px)!important;
}

/* Appointment — one-line Instagram inspiration note on desktop */
#appointment .appointment-instagram-note{
  margin-top:10px!important;
  margin-bottom:0!important;
  font-size:17px!important;
  line-height:1.5!important;
  white-space:nowrap!important;
}
@media (max-width:980px){
  #appointment .appointment-instagram-note{
    font-size:16px!important;
    white-space:normal!important;
  }
}

/* =====================================================================
   02 + 04 — initial-paint guard only
   Hide the initially visible flip-back before JS prepares the site-wide
   reveal. Timing is NOT defined here; 02/04 now use the exact Journal
   cadence from the shared site-wide reveal below.
   ===================================================================== */
html.js-flip-face-reveal #method .method-grid .flip-card:not([data-site-reveal-complete="true"]) .flip-back,
html.js-flip-face-reveal #value .value-grid .flip-card:not([data-site-reveal-complete="true"]) .flip-back{
  opacity:0;
}
@media (prefers-reduced-motion:reduce){
  html.js-flip-face-reveal #method .method-grid .flip-card:not([data-site-reveal-complete="true"]) .flip-back,
  html.js-flip-face-reveal #value .value-grid .flip-card:not([data-site-reveal-complete="true"]) .flip-back{
    opacity:1!important;
  }
}


/* =====================================================================
   02 + 04 — flip-card reveal matched exactly to Journal timing
   The 3D parent is never faded/filtered, so the initial face cannot mirror.
   Only the visible back face fades/rises with Journal's 1.00 / 1.10 s rhythm.
   ===================================================================== */
html.js-flip-face-reveal #method .method-grid .flip-card.site-reveal-flip-card .flip-back,
html.js-flip-face-reveal #value .value-grid .flip-card.site-reveal-flip-card .flip-back{
  opacity:0;
  translate:0 24px;
  filter:blur(7px);
  clip-path:inset(0 0 12% 0);
  will-change:opacity,translate,filter,clip-path;
  transition:
    opacity 1.00s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    translate 1.10s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    filter 1.10s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay),
    clip-path 1.10s cubic-bezier(.22,1,.36,1) var(--site-reveal-delay)!important;
}
html.js-flip-face-reveal #method .method-grid .flip-card.site-reveal-flip-card.is-site-reveal-visible .flip-back,
html.js-flip-face-reveal #value .value-grid .flip-card.site-reveal-flip-card.is-site-reveal-visible .flip-back{
  opacity:1;
  translate:0 0;
  filter:none;
  clip-path:inset(0 0 0 0);
}
/* Before reveal, section 04 must show its photographic background instead of
   the cream front-card background. The black section 02 already matches its
   parent background, so no special treatment is needed there. */
#value .value-grid .flip-card.site-reveal-flip-card:not(.is-site-reveal-visible){
  background:transparent!important;
}
@media (prefers-reduced-motion:reduce){
  #method .method-grid .flip-card.site-reveal-flip-card .flip-back,
  #value .value-grid .flip-card.site-reveal-flip-card .flip-back{
    opacity:1!important;
    translate:0 0!important;
    filter:none!important;
    clip-path:none!important;
    transition:none!important;
  }
}

/* =====================================================================
   ENTRY SHIRT PROGRAM — discreet pill label + quieter price
   ===================================================================== */
.wardrobe-entry-price-title{
  display:inline-flex!important;
  align-items:center!important;
  justify-self:start!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0 0 5px!important;
  padding:7px 12px 6px!important;
  border:1px solid rgba(251,247,239,.34)!important;
  border-radius:999px!important;
  font:500 10px/1 var(--sans)!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  font-style:normal!important;
  white-space:nowrap!important;
  color:rgba(251,247,239,.86)!important;
}
.wardrobe-entry-price > strong{
  font:500 12px/1.25 var(--sans)!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
  color:rgba(251,247,239,.80)!important;
}

/* ENTRY SHIRT PROGRAM — compact correction */
.wardrobe-entry-price-title{
  display:inline-flex!important;
  align-items:center!important;
  justify-self:start!important;
  width:auto!important;
  max-width:max-content!important;
  margin:0 0 4px!important;
  padding:4px 8px 3px!important;
  border:1px solid rgba(251,247,239,.28)!important;
  border-radius:999px!important;
  font:500 8px/1.05 var(--sans)!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  color:rgba(251,247,239,.80)!important;
}
.wardrobe-entry-price > strong{
  font:500 10px/1.2 var(--sans)!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:rgba(251,247,239,.76)!important;
}


/* ENTRY SHIRT PROGRAM — final compact sizing 2026-08-26 */
.wardrobe-entry-price-title{
  margin:0 0 3px!important;
  padding:3px 7px 2px!important;
  font:500 7px/1.05 var(--sans)!important;
  letter-spacing:.08em!important;
}
.wardrobe-entry-price > strong{
  font:500 8.5px/1.2 var(--sans)!important;
  letter-spacing:.07em!important;
}

/* ENTRY SHIRT PROGRAM — user requested at least one-third smaller */
.wardrobe-entry-price-title{
  margin:0 0 2px!important;
  padding:2px 5px 1px!important;
  font:500 4.6px/1.05 var(--sans)!important;
  letter-spacing:.07em!important;
}
.wardrobe-entry-price > strong{
  font:500 5.6px/1.18 var(--sans)!important;
  letter-spacing:.06em!important;
}

/* ENTRY SHIRT PROGRAM — real computed sizing fix (undefined --sans made prior font shorthands invalid) */
.wardrobe-entry-price-title{
  font-size:11.2px!important;
  line-height:1.1!important;
  font-weight:500!important;
}
.wardrobe-entry-price > strong{
  font-size:10.6px!important;
  line-height:1.2!important;
  font-weight:500!important;
}

/* ENTRY SHIRT PROGRAM — final pill breathing room 2026-08-26 */
.wardrobe-entry-price-title{
  padding:4px 9px 3px!important;
}


/* ENTRY SHIRT PROGRAM — align price with pill + equal brightness */
.wardrobe-entry-price-head{
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-self:start!important;
  width:max-content!important;
  max-width:100%!important;
}
.wardrobe-entry-price-head > .wardrobe-entry-price-title{
  justify-self:auto!important;
}
.wardrobe-entry-price-head > strong{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  text-align:center!important;
}
.wardrobe-entry-price > span{
  color:rgba(251,247,239,.80)!important;
}

/* ENTRY SHIRT PROGRAM — final alignment/readability correction */
.wardrobe-entry-price-head{
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-self:start!important;
  width:max-content!important;
  max-width:100%!important;
}
.wardrobe-entry-price-title{
  color:#fff!important;
  border-color:rgba(255,255,255,.72)!important;
}
.wardrobe-entry-price-head > strong{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  font-size:9.5px!important;
  line-height:1.2!important;
  color:#fff!important;
}
.wardrobe-entry-price > span{
  color:#fff!important;
}

/* ENTRY SHIRT PROGRAM — slightly more air between pill and price */
.wardrobe-entry-price-head > strong{
  margin-top:4px!important;
}

/* ENTRY SHIRT PROGRAM — price slightly larger than supporting copy */
.wardrobe-entry-price-head > strong{
  font-size:12px!important;
  line-height:1.2!important;
}

/* =====================================================================
   iPHONE — ATELIER QUOTE + SECTION 01 TYPOGRAPHY FIX — 2026-08-26
   Phone only (portrait + landscape). iPad/tablet and desktop untouched.
   ===================================================================== */
@media (max-width:932px) and (max-height:932px){
  /* Text between the quotation marks is centered on iPhone in both orientations. */
  #atelier .atelier-intro{
    text-align:center!important;
  }
  #atelier .atelier-intro > .atelier-intro-lead,
  #atelier .atelier-intro > .atelier-intro-body{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }

  /* CZ: “nepotřebují okázalost.” is longer than the former wording.
     Reduce only section 01 on phones so the approved line stays intact. */
  html[lang="cs"] #atelier .atelier-title{
    font-size:36px!important;
    line-height:1!important;
  }
  html[lang="cs"] #atelier .atelier-title-mobile-last{
    font-size:.88em!important;
    line-height:1!important;
    letter-spacing:-.05em!important;
    white-space:nowrap!important;
  }
}

/* iPhone landscape: restore the compact phone typography instead of letting
   the wide viewport inflate the text. This is deliberately limited to 01. */
@media (max-width:932px) and (max-height:500px) and (orientation:landscape){
  #atelier .atelier-title{
    font-size:36px!important;
    line-height:.98!important;
  }
  #atelier .atelier-title-mobile-last{
    font-size:.90em!important;
    line-height:.98!important;
  }
  #atelier .atelier-intro > .atelier-intro-lead{
    font-size:25px!important;
    line-height:1.20!important;
  }
  #atelier .atelier-intro > .atelier-intro-body{
    font-size:20.5px!important;
    line-height:1.48!important;
  }
  #atelier .atelier-intro > .atelier-quote-open,
  #atelier .atelier-intro > .atelier-quote-close,
  #atelier .atelier-intro > span.atelier-quote-open:nth-child(1),
  #atelier .atelier-intro > span.atelier-quote-close:last-child{
    height:46px!important;
    font-size:46px!important;
    line-height:46px!important;
  }
}

/* =====================================================================
   iPAD PORTRAIT — ATELIER QUOTE LEAD HIERARCHY — 2026-08-26
   On 1024px portrait iPads the desktop clamp previously resolved both the
   lead sentence and the body copy to 23px. Restore the intended hierarchy
   without changing iPhone, iPad landscape, or desktop.
   ===================================================================== */
@media (min-width:981px) and (max-width:1100px) and (orientation:portrait){
  #atelier .atelier-intro > span.atelier-intro-lead:nth-child(2){
    font-size:28px!important;
    line-height:1.18!important;
  }
}

/* =====================================================================
   iPHONE LANDSCAPE — ATELIER QUOTE FINAL HIERARCHY FIX — 2026-08-26
   Prevent Safari landscape text autosizing from inverting the intended
   hierarchy. First sentence remains larger; remaining copy stays smaller.
   ===================================================================== */
@media (max-width:932px) and (max-height:500px) and (orientation:landscape){
  #atelier .atelier-intro{
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important;
  }
  #atelier .atelier-intro > span.atelier-intro-lead:nth-child(2){
    font-size:25px!important;
    line-height:1.20!important;
  }
  #atelier .atelier-intro > span.atelier-intro-body:nth-child(3),
  #atelier .atelier-intro > span.atelier-intro-body:nth-child(4){
    font-size:20.5px!important;
    line-height:1.48!important;
  }
}

/* =====================================================================
   iPHONE — CZ ATELIER TITLE LAST LINE SIZE — 2026-08-26
   Restore more presence to “nepotřebují okázalost.” on iPhone only.
   iPad/tablet/desktop remain untouched.
   ===================================================================== */
@media (max-width:932px) and (max-height:932px){
  html[lang="cs"] #atelier .atelier-title-mobile-last{
    font-size:.95em!important;
  }
}
@media (max-width:932px) and (max-height:500px) and (orientation:landscape){
  html[lang="cs"] #atelier .atelier-title-mobile-last{
    font-size:.95em!important;
  }
}


/* =====================================================================
   iPHONE PORTRAIT — DE SECTION 01 FIXED 4-LINE TITLE — 2026-08-26
   Exact approved line breaks; iPhone landscape, iPad and other languages untouched.
   ===================================================================== */
#atelier .atelier-title-iphone-portrait-de-line{
  display:none!important;
}
@media (max-width:480px) and (orientation:portrait){
  html[lang="de"] #atelier .atelier-title-mobile-line{
    display:none!important;
  }
  html[lang="de"] #atelier .atelier-title-iphone-portrait-de-line{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    white-space:nowrap!important;
  }
  html[lang="de"] #atelier .atelier-title-iphone-portrait-de-line.atelier-title-mobile-last{
    font-size:.76em!important;
    letter-spacing:-.04em!important;
  }
}

/* =====================================================================
   iPHONE PORTRAIT — DE SECTION 02 TITLE FIT — 2026-08-26
   German only. Keeps the existing approved four lines and scales them
   down just enough to fit the phone content width. Other languages and
   all landscape/tablet/desktop layouts remain untouched.
   ===================================================================== */
@media (max-width:480px) and (orientation:portrait){
  html[lang="de"] #method .method-title-mobile{
    font-size:clamp(28px,7.7vw,33px)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
  }
}


/* =====================================================================
   iPHONE PORTRAIT — IT SECTION 01 FIXED LINE BREAK — 2026-08-26
   Italian only. Keep “che non” together and break before “serve”.
   iPhone landscape, iPad and other languages remain untouched.
   ===================================================================== */
#atelier .atelier-title-iphone-portrait-it-line{
  display:none!important;
}
@media (max-width:480px) and (orientation:portrait){
  html[lang="it"] #atelier .atelier-title-mobile-line{
    display:none!important;
  }
  html[lang="it"] #atelier .atelier-title-iphone-portrait-it-line{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    white-space:nowrap!important;
  }
  html[lang="it"] #atelier .atelier-title-iphone-portrait-it-middle{
    font-size:.88em!important;
  }
}



/* iPHONE PORTRAIT — IT quote last line stays together */
@media (max-width:480px) and (orientation:portrait){
  html[lang="it"] .quote-panel p .quote-last-line{
    white-space:nowrap!important;
  }
}


/* =====================================================================
   iPHONE PORTRAIT — ES SECTION 01 FIXED 3-LINE TITLE — 2026-08-26
   Spanish only. Approved 3-line layout; first and third lines slightly
   reduced so the longer phrases fit, middle line stays at standard size.
   ===================================================================== */
#atelier .atelier-title-iphone-portrait-es-line{
  display:none!important;
}
@media (max-width:480px) and (orientation:portrait){
  html[lang="es"] #atelier .atelier-title-mobile-line{
    display:none!important;
  }
  html[lang="es"] #atelier .atelier-title-iphone-portrait-es-line{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    white-space:nowrap!important;
  }
  html[lang="es"] #atelier .atelier-title-iphone-portrait-es-small{
    font-size:.78em!important;
    letter-spacing:-.045em!important;
  }
}


/* =====================================================================
   iPHONE PORTRAIT — ES SECTION 02 BREAK AFTER “LA” — 2026-08-26
   Spanish only: Cada prenda / comienza con la / personalidad y el cuerpo.
   / No con una talla. Landscape, tablet and other languages untouched.
   ===================================================================== */
#method .method-title-iphone-portrait-es{
  display:none!important;
}
@media (max-width:480px) and (orientation:portrait){
  html[lang="es"] #method .method-title-mobile:not(.method-title-iphone-portrait-es){
    display:none!important;
  }
  html[lang="es"] #method .method-title-iphone-portrait-es{
    display:block!important;
  }
  html[lang="es"] #method .method-title-iphone-portrait-es > span{
    display:block!important;
    white-space:nowrap!important;
  }
}

/* =====================================================================
   iPHONE PORTRAIT — ES SECTION 04 BLACK CARDS 03 + 04 — 2 LINES ONLY
   Keep the explicit HTML <br> as the only break; prevent either line from
   wrapping again on iPhone portrait. Other cards/languages untouched.
   ===================================================================== */
@media (max-width:480px) and (orientation:portrait){
  html[lang="es"] #value .value-grid > article:nth-child(3) .flip-back-note,
  html[lang="es"] #value .value-grid > article:nth-child(4) .flip-back-note{
    white-space:nowrap!important;
    max-width:none!important;
    width:auto!important;
    font-size:16.5px!important;
    line-height:1.48!important;
    letter-spacing:-.008em!important;
  }
}

/* iPHONE PORTRAIT — ES quote first line on one line */
@media (max-width:480px) and (orientation:portrait){
  html[lang="es"] .quote-panel blockquote p > span:nth-child(1){
    white-space:nowrap!important;
    font-size:.85em!important;
    letter-spacing:-.04em!important;
  }
}


/* =====================================================================
   iPHONE PORTRAIT — RU SECTION 01 FIXED 4-LINE TITLE — 2026-08-26
   Russian only: Пражское ателье / для мужчин, / которым не нужна /
   показная роскошь. Other languages/orientations untouched.
   ===================================================================== */
#atelier .atelier-title-iphone-portrait-ru-line{
  display:none!important;
}
@media (max-width:480px) and (orientation:portrait){
  html[lang="ru"] #atelier .atelier-title-mobile-line{
    display:none!important;
  }
  html[lang="ru"] #atelier .atelier-title-iphone-portrait-ru-line{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    white-space:nowrap!important;
  }
  html[lang="ru"] #atelier .atelier-title-iphone-portrait-ru-first{
    font-size:.94em!important;
  }
}


/* =====================================================================
   iPHONE PORTRAIT — RU SECTION 02 FIXED 4-LINE TITLE — 2026-08-26
   Russian only: Каждое изделие / начинается с / личности и тела. /
   Не с размера. Landscape, tablet and other languages untouched.
   ===================================================================== */
#method .method-title-iphone-portrait-ru{
  display:none!important;
}
@media (max-width:480px) and (orientation:portrait){
  html[lang="ru"] #method .method-title-mobile:not(.method-title-iphone-portrait-ru){
    display:none!important;
  }
  html[lang="ru"] #method .method-title-iphone-portrait-ru{
    display:block!important;
  }
  html[lang="ru"] #method .method-title-iphone-portrait-ru > span{
    display:block!important;
    white-space:nowrap!important;
  }
}


/* RU card 03 — iPhone portrait: one text, one conditional break before dash */
#method .ru-card03-iphone-break{
  display:none!important;
}
#method .ru-card03-desktop-space{
  display:inline!important;
}
@media (max-width:480px) and (orientation:portrait){
  html[lang="ru"] #method .method-grid article:nth-child(3) .ru-card03-desktop-space{
    display:none!important;
  }
  html[lang="ru"] #method .method-grid article:nth-child(3) .ru-card03-iphone-break{
    display:inline!important;
  }
  html[lang="ru"] #method .method-grid article:nth-child(3) .flip-back-note{
    line-height:1.34!important;
  }
}


/* =====================================================================
   iPHONE PORTRAIT — RU QUOTE LINE BREAKS — 2026-08-26
   Ваша одежда / не обязана / … ; other orientations/languages untouched.
   Inline display:none on the dedicated RU spans is a safe fallback if an
   older stylesheet is cached, preventing duplicate visible text.
   ===================================================================== */
.quote-panel .quote-ru-iphone-line{
  display:none!important;
}
@media (max-width:480px) and (orientation:portrait){
  html[lang="ru"] .quote-panel .quote-standard-line{
    display:none!important;
  }
  html[lang="ru"] .quote-panel .quote-ru-iphone-line{
    display:block!important;
  }
}

/* =====================================================================
   iPHONE — ENTRY SHIRT PROGRAM CENTER ALIGNMENT — 2026-08-26
   All languages, portrait + landscape. iPad/tablet/desktop untouched.
   ===================================================================== */
@media (max-width:932px) and (max-height:932px){
  .wardrobe-entry-price{
    justify-items:center!important;
    text-align:center!important;
  }
  .wardrobe-entry-price-head{
    justify-self:center!important;
    align-items:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .wardrobe-entry-price-title{
    justify-self:center!important;
  }
  .wardrobe-entry-price > span{
    display:block!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
}

/* =====================================================================
   DESKTOP — MAIN SECTION TITLES 02–05 CENTERED — 2026-08-26
   Main headings only. Kickers, body copy, cards and section 01 untouched.
   Fine-pointer desktop only; tablet/iPhone rules remain unchanged.
   ===================================================================== */
@media (min-width:1101px) and (hover:hover) and (pointer:fine){
  #method .method-title-desktop,
  #wardrobe h2.wardrobe-gold-heading,
  #value .value-title,
  #journal > h2{
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
}


/* =====================================================================
   DE DESKTOP — SECTION 02 EXACT 3-LINE TITLE — 2026-08-26
   Keep the existing semantic breaks, prevent each approved line from wrapping.
   Desktop only; phone/tablet layouts remain untouched.
   ===================================================================== */
@media (min-width:1101px) and (hover:hover) and (pointer:fine){
  html[lang="de"] #method .method-title-desktop{
    max-width:none!important;
    font-size:clamp(42px,4.6vw,76px)!important;
    line-height:1.02!important;
  }
  html[lang="de"] #method .method-title-desktop > span{
    display:block!important;
    white-space:nowrap!important;
  }
}


/* =====================================================================
   RU DESKTOP — SECTION 01 TITLE SIZE MATCH SECTION 02 — 2026-08-26
   RU only. Desktop only. Keep section 01 alignment/layout; match 02 scale.
   ===================================================================== */
@media (min-width:1101px) and (hover:hover) and (pointer:fine){
  html[lang="ru"] #atelier .atelier-title{
    font-size:clamp(38px,5vw,82px)!important;
    line-height:1!important;
  }
}


/* =====================================================================
   DESKTOP — SECTION 01 TITLE SCALE MATCHES SECTION 02 — ALL LANGUAGES
   2026-08-26. Desktop only. Mobile/tablet untouched.
   DE follows its approved smaller 02 scale; all other languages use the
   standard section 02 scale. Alignment/layout of section 01 is unchanged.
   ===================================================================== */
@media (min-width:1101px) and (hover:hover) and (pointer:fine){
  #atelier .atelier-main h2.atelier-title{
    font-size:clamp(38px,5vw,82px)!important;
    line-height:1!important;
    letter-spacing:-.03em!important;
  }
  html[lang="de"] #atelier .atelier-main h2.atelier-title{
    font-size:clamp(42px,4.6vw,76px)!important;
    line-height:1.02!important;
  }
}


/* =====================================================================
   iPAD LANDSCAPE — MIRROR DESKTOP TITLE SYSTEM — 2026-08-26
   Landscape tablet geometry follows the approved desktop hierarchy.
   Portrait tablet remains untouched.
   ===================================================================== */
@media (min-width:981px) and (max-width:1366px) and (orientation:landscape){
  /* Desktop alignment: only the main section headings 02–05 are centered. */
  #method .method-title-desktop,
  #wardrobe h2.wardrobe-gold-heading,
  #value .value-title,
  #journal > h2{
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }

  /* Section 01 uses the same scale as section 02, as on desktop. */
  #atelier .atelier-main h2.atelier-title{
    font-size:clamp(38px,5vw,82px)!important;
    line-height:1!important;
    letter-spacing:-.03em!important;
  }

  /* DE follows its approved desktop 3-line section-02 scale. */
  html[lang="de"] #method .method-title-desktop,
  html[lang="de"] #atelier .atelier-main h2.atelier-title{
    max-width:none!important;
    font-size:clamp(42px,4.6vw,76px)!important;
    line-height:1.02!important;
  }
  html[lang="de"] #method .method-title-desktop > span{
    display:block!important;
    white-space:nowrap!important;
  }
}

/* =====================================================================
   iPAD PORTRAIT — COMPACT DESKTOP SYSTEM — 2026-08-26
   Tablet portrait follows desktop/editorial composition, not the iPhone
   one-column system. Phone rules remain untouched below 700px.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  /* Keep tablet portrait in the desktop editorial family. */
  .section-kicker{
    width:auto!important;
    text-align:left!important;
  }

  /* 01 — desktop branch, compact tablet geometry. */
  #atelier.split{
    grid-template-columns:.48fr 1.25fr 1fr!important;
    gap:32px!important;
    padding:88px 40px!important;
  }
  #atelier .atelier-main{
    grid-column:2 / 4!important;
    max-width:100%!important;
    min-width:0!important;
  }
  #atelier .atelier-title-desktop-line{
    display:block!important;
  }
  #atelier .atelier-title-mobile-line,
  #atelier .atelier-title-iphone-portrait-de-line,
  #atelier .atelier-title-iphone-portrait-it-line,
  #atelier .atelier-title-iphone-portrait-es-line,
  #atelier .atelier-title-iphone-portrait-ru-line{
    display:none!important;
  }
  #atelier .atelier-title{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    font-size:clamp(42px,6.15vw,62px)!important;
    line-height:1!important;
    letter-spacing:-.03em!important;
    text-align:center!important;
  }
  html[lang="de"] #atelier .atelier-title{
    font-size:clamp(38px,5.55vw,56px)!important;
    line-height:1.02!important;
  }
  #atelier .atelier-intro{
    max-width:860px!important;
    margin:34px 0 0!important;
    text-align:left!important;
  }
  #atelier .atelier-intro > .atelier-intro-lead,
  #atelier .atelier-intro > .atelier-intro-body{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    text-align:left!important;
  }
  #atelier .atelier-intro > .atelier-intro-lead{
    font-size:clamp(24px,3vw,30px)!important;
    line-height:1.2!important;
  }
  #atelier .atelier-intro > .atelier-intro-body{
    font-size:clamp(17px,2vw,19px)!important;
    line-height:1.58!important;
  }

  /* Atelier image triptych stays a desktop-style row. */
  .media-band{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .media-band .image-slot{
    min-height:430px!important;
  }
  .media-band .image-slot::after{
    left:20px!important;
    right:auto!important;
    transform:none!important;
    width:auto!important;
    max-width:calc(100% - 40px)!important;
    text-align:left!important;
  }

  /* Main section headings 02–05 mirror the desktop centered system. */
  #method,
  #journal,
  .appointment{
    padding-left:40px!important;
    padding-right:40px!important;
  }
  #wardrobe,
  #value{
    padding-left:40px!important;
    padding-right:40px!important;
  }
  #method .method-title-desktop,
  #wardrobe h2.wardrobe-gold-heading,
  #value .value-title,
  #journal > h2{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
    font-size:clamp(42px,6.15vw,62px)!important;
    line-height:1!important;
    letter-spacing:-.03em!important;
  }

  /* 02 — desktop title branch. DE keeps its approved three-line rhythm. */
  #method .method-title-desktop{
    display:block!important;
  }
  #method .method-title-mobile,
  #method .method-title-iphone-portrait-es,
  #method .method-title-iphone-portrait-ru{
    display:none!important;
  }
  #method .method-title-desktop > span{
    display:block!important;
  }
  html[lang="de"] #method .method-title-desktop{
    max-width:none!important;
    font-size:clamp(36px,5.45vw,54px)!important;
    line-height:1.02!important;
  }
  html[lang="de"] #method .method-title-desktop > span{
    white-space:nowrap!important;
  }

  /* 02 cards: desktop cards in a tablet-safe 2x2 grid. */
  #method .method-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    margin-top:54px!important;
  }
  #method .method-grid article{
    min-width:0!important;
    min-height:330px!important;
    padding:34px 30px!important;
    border-right:1px solid var(--line-dark)!important;
    border-bottom:1px solid var(--line-dark)!important;
    align-items:stretch!important;
    text-align:left!important;
  }
  #method .method-grid article:nth-child(2n){
    border-right:0!important;
  }
  #method .method-grid article:nth-last-child(-n+2){
    border-bottom:0!important;
  }
  #method .method-grid article > span{
    width:auto!important;
    margin:0!important;
    text-align:left!important;
  }
  #method .method-grid h3{
    width:auto!important;
    max-width:100%!important;
    margin:28px 0 0!important;
    font-size:clamp(25px,3.2vw,30px)!important;
    line-height:1.08!important;
    text-align:left!important;
    text-wrap:balance!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  #method .method-grid h3 + p{
    max-width:100%!important;
    margin:18px 0 0!important;
    font-size:15px!important;
    line-height:1.62!important;
    text-align:left!important;
    text-wrap:pretty!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  #method .method-grid .flip-back{
    gap:16px!important;
    padding:30px 26px!important;
  }
  #method .method-grid .flip-back .flip-back-value{
    max-width:100%!important;
    font-size:clamp(29px,4.1vw,38px)!important;
    line-height:1.02!important;
    white-space:normal!important;
    text-align:center!important;
    text-wrap:balance!important;
  }
  #method .method-grid .flip-back .flip-back-note{
    max-width:30ch!important;
    font-size:17px!important;
    line-height:1.46!important;
    text-align:center!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  /* 03 — desktop two-column wardrobe rows, not the phone stack. */
  #wardrobe .product-list,
  #wardrobe .product-list button,
  #wardrobe .product-list a,
  #wardrobe .product-list span,
  #wardrobe .product-list em{
    text-align:left!important;
  }
  #wardrobe .product-list button,
  #wardrobe .product-list a{
    grid-template-columns:1.1fr 1fr!important;
    justify-items:stretch!important;
    align-items:center!important;
  }
  #wardrobe .product-list em{
    padding-left:36px!important;
    margin-left:0!important;
  }
  #wardrobe .product-list span{
    font-size:clamp(30px,4.9vw,48px)!important;
    white-space:nowrap!important;
  }
  .wardrobe-entry-price{
    justify-items:start!important;
    text-align:left!important;
  }
  .wardrobe-entry-price-head{
    justify-self:start!important;
    align-items:flex-start!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  .wardrobe-entry-price-title,
  .wardrobe-entry-price > span{
    margin-left:0!important;
    margin-right:0!important;
    text-align:left!important;
  }

  /* 04 — desktop title branch + safe two-column card grid. */
  #value{
    text-align:left!important;
  }
  #value .value-title-desktop-line{
    display:block!important;
  }
  #value .value-title-mobile-line{
    display:none!important;
  }
  #value .value-lead{
    margin-left:0!important;
    margin-right:0!important;
    max-width:900px!important;
    text-align:left!important;
    font-size:clamp(17px,2.2vw,21px)!important;
  }
  #value .value-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    margin-top:50px!important;
  }
  #value .value-grid article{
    min-width:0!important;
    min-height:330px!important;
    padding:32px 28px!important;
  }
  #value .value-grid h3{
    max-width:100%!important;
    font-size:clamp(25px,3.3vw,32px)!important;
    line-height:1.04!important;
    text-align:left!important;
    text-wrap:balance!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  #value .value-grid article > p{
    max-width:100%!important;
    font-size:15px!important;
    line-height:1.58!important;
    text-align:left!important;
    text-wrap:pretty!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  #value .value-grid .flip-back{
    padding:30px 26px!important;
  }
  #value .value-grid .flip-back .flip-back-value{
    max-width:100%!important;
    font-size:clamp(28px,4vw,36px)!important;
    line-height:1.02!important;
    white-space:normal!important;
    text-align:center!important;
    text-wrap:balance!important;
  }
  #value .value-grid .flip-back .flip-back-note{
    max-width:30ch!important;
    font-size:17px!important;
    line-height:1.48!important;
    text-align:center!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  #value .value-grid .flip-back-note .nowrap-phrase{
    white-space:nowrap!important;
  }

  /* Green quote returns to the desktop image/text split. */
  .quote-panel{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    min-height:600px!important;
  }
  .quote-panel .portrait{
    min-height:600px!important;
  }
  .quote-panel blockquote{
    padding:48px 34px!important;
    text-align:left!important;
  }
  .quote-panel p{
    font-size:clamp(29px,4vw,38px)!important;
    line-height:1.03!important;
    letter-spacing:-.04em!important;
    text-align:left!important;
  }
  .quote-panel blockquote p > span,
  .quote-panel blockquote p > .quote-standard-line{
    display:block!important;
    white-space:nowrap!important;
    text-align:left!important;
  }
  .quote-panel .quote-ru-iphone-line{
    display:none!important;
  }
  .quote-panel .quote-standard-line{
    display:block!important;
  }
  .quote-panel cite{
    text-align:left!important;
  }

  /* 05 — keep editorial cards across the width, but reduce card type safely. */
  #journal .journal-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  #journal .journal-card,
  #journal .journal-card-button,
  #journal .journal-card-copy{
    min-width:0!important;
  }
  #journal .journal-card-button{
    min-height:470px!important;
    text-align:left!important;
  }
  #journal .journal-card-copy{
    align-items:flex-start!important;
    padding:26px 22px 28px!important;
    text-align:left!important;
  }
  #journal .journal-read{
    padding-top:30px!important;
    text-align:left!important;
  }
}

/* =====================================================================
   iPAD PORTRAIT — ALIGNMENT + CARD RHYTHM REFINEMENT — 2026-08-26
   Keep the compact desktop composition, but make the editorial rhythm
   consistent across languages and cards.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  /* 01: centre the complete content block, not only the headline. */
  #atelier .atelier-main{
    text-align:center!important;
  }
  #atelier .atelier-title{
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
  #atelier .atelier-intro{
    width:100%!important;
    max-width:860px!important;
    margin:34px auto 0!important;
    text-align:center!important;
  }
  #atelier .atelier-intro > .atelier-intro-lead,
  #atelier .atelier-intro > .atelier-intro-body{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }

  /* 04 lead ("Vize..."): centre it beneath the centred section title. */
  #value .value-lead{
    width:100%!important;
    max-width:900px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }

  /* Card fronts: reserve the same two-line title zone everywhere.
     The supporting paragraph therefore starts at the same vertical point,
     using CZ 02 / card 04 as the visual rhythm reference. */
  #method .method-grid h3,
  #value .value-grid h3{
    min-height:2.16em!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
  }
  #method .method-grid h3 + p,
  #value .value-grid article > h3 + p{
    margin-top:18px!important;
  }

  /* Card backs: fixed icon/value zones keep the supplementary note from
     moving up and down when languages or value lengths change. */
  #method .method-grid .flip-back,
  #value .value-grid .flip-back{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:48px 62px auto!important;
    align-content:start!important;
    justify-content:stretch!important;
    align-items:start!important;
    row-gap:16px!important;
    column-gap:0!important;
    padding:52px 26px 28px!important;
  }
  #method .method-grid .flip-back .flip-icon,
  #value .value-grid .flip-back .flip-icon{
    grid-row:1!important;
    align-self:start!important;
    margin:0!important;
  }
  #method .method-grid .flip-back .flip-back-value,
  #value .value-grid .flip-back .flip-back-value{
    grid-row:2!important;
    align-self:center!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    font-size:clamp(26px,3.35vw,34px)!important;
    line-height:1.02!important;
    white-space:nowrap!important;
    text-align:left!important;
    overflow:visible!important;
  }
  #method .method-grid .flip-back .flip-back-note,
  #value .value-grid .flip-back .flip-back-note{
    grid-row:3!important;
    align-self:start!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    text-align:left!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
}


/* =====================================================================
   iPAD PORTRAIT — ATELIER MAIN BLOCK TRUE CENTERING — 2026-08-26
   The previous refinement centered text only, but the whole 01 content
   block still sat in the right-hand desktop columns. On iPad portrait,
   centre the actual block on the page while keeping the kicker separate.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  #atelier.split{
    grid-template-columns:minmax(0,1fr)!important;
    column-gap:0!important;
    row-gap:28px!important;
  }
  #atelier .section-kicker{
    grid-column:1!important;
    grid-row:1!important;
  }
  #atelier .atelier-main{
    grid-column:1!important;
    grid-row:2!important;
    width:min(100%,860px)!important;
    max-width:860px!important;
    margin:0 auto!important;
    justify-self:center!important;
    text-align:center!important;
  }
  #atelier .atelier-title,
  #atelier .atelier-intro{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* =====================================================================
   iPAD PORTRAIT — GREEN QUOTE PANEL LARGER TYPE — 2026-08-26
   There is enough room in the green panel on iPad portrait, so increase
   only the main quote size while keeping safe line breaks.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  .quote-panel p{
    font-size:clamp(38px,5.1vw,52px)!important;
    line-height:1.01!important;
    max-width:12ch!important;
  }
}


/* =====================================================================
   iPAD PORTRAIT — GREEN QUOTE PANEL EMPHASIS — 2026-08-26
   Strong tablet emphasis: close to 2x the earlier desktop-derived size.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  .quote-panel p{
    font-size:72px!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
  }
}




/* =====================================================================
   iPAD PORTRAIT — WARDROBE LEFT TITLE SAFETY — 2026-08-26
   Reduce only the large left-hand wardrobe item titles so they stay
   inside their column. Right-hand supporting copy keeps its prior size.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  #wardrobe .product-list span{
    font-size:clamp(29px,3.2vw,33px)!important;
    line-height:1.04!important;
    white-space:nowrap!important;
    letter-spacing:-.025em!important;
  }
}






/* =====================================================================
   iPAD PORTRAIT — ANCHOR LANDING / HEADER SAFE AREA — 2026-08-26
   Fixed header/logo is taller than the former section top padding on iPad.
   Give every navigation target enough internal top space so its kicker is
   visible after an anchor jump, and keep short sections at least one screen.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  #atelier,
  #method,
  #wardrobe,
  #value,
  #journal,
  #appointment{
    min-height:100svh!important;
    scroll-margin-top:0!important;
  }

  #atelier,
  #method,
  #wardrobe,
  #value,
  #journal{
    padding-top:clamp(120px,16vw,180px)!important;
  }

  #appointment{
    padding-top:clamp(120px,16vw,180px)!important;
    padding-bottom:clamp(120px,16vw,180px)!important;
  }
}


/* =====================================================================
   iPAD PORTRAIT — 01 ANCHOR EXTRA SAFE AREA — 2026-08-26
   Section 01 needs more clearance under the fixed brand than the other
   section targets. Keep only 01 lower after a navigation jump.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  #atelier{
    padding-top:210px!important;
  }
}


/* =====================================================================
   iPAD PORTRAIT — 01 KICKER LOWER POSITION — 2026-08-26
   Move only the visible 01 label lower. Navigation behavior remains the
   standard site behavior; no JS special-case is used.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  #atelier > .section-kicker{
    transform:translateY(18px)!important;
  }
}


/* =====================================================================
   iPAD PORTRAIT — 01 LANDING POSITION MATCH 03/04 — 2026-08-26
   Move the whole 01 content start substantially lower so its section
   marker lands with the same visual clearance as the later sections.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  #atelier{
    padding-top:300px!important;
  }
  #atelier > .section-kicker{
    transform:none!important;
  }
}


/* =====================================================================
   iPAD PORTRAIT — 01 KICKER ONLY, FINAL POSITION — 2026-08-26
   Do not move the section or navigation. Move only “01 · ATELIÉR” below
   the fixed logo/header, matching the visual clearance of later sections.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  #atelier{
    padding-top:clamp(120px,16vw,180px)!important;
  }
  #atelier > .section-kicker{
    position:relative!important;
    top:68px!important;
    transform:none!important;
    z-index:3!important;
  }
}


/* =====================================================================
   iPAD LANDSCAPE — 01 KICKER SLIGHT LOWER POSITION — 2026-08-26
   Move only “01 · ATELIÉR” a little lower; keep section, menu and scroll
   geometry unchanged.
   ===================================================================== */
@media (min-width:981px) and (max-width:1366px) and (orientation:landscape){
  #atelier > .section-kicker{
    position:relative!important;
    top:12px!important;
    transform:none!important;
    z-index:3!important;
  }
}






/* =====================================================================
   iPAD — HARD PAGE SCROLLER, NO VIEWPORT OVERSCROLL — 2026-08-26
   Keep the browser viewport fixed and scroll the complete page inside one
   dedicated container. This removes the elastic area beyond the footer.
   ===================================================================== */
.page-scroll-shell{
  display:block;
}
@media (min-width:700px) and (max-width:1366px){
  html.is-ipad-device,
  html.is-ipad-device body{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  html.is-ipad-device body{
    position:relative!important;
  }
  html.is-ipad-device .page-scroll-shell{
    position:relative!important;
    width:100%!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-x:none!important;
    overscroll-behavior-y:none!important;
    -webkit-overflow-scrolling:touch;
    background:var(--ivory);
  }
}


/* =====================================================================
   DESKTOP — 01 KICKER SLIGHT LOWER POSITION — 2026-08-26
   Move only the visible 01 label slightly lower on desktop.
   iPad and iPhone remain untouched.
   ===================================================================== */
@media (min-width:1367px){
  #atelier > .section-kicker{
    position:relative!important;
    top:10px!important;
    transform:none!important;
    z-index:3!important;
  }
}


/* =====================================================================
   IT — STATEMENT FIXED 3-LINE RHYTHM (DESKTOP + iPAD, NOT iPHONE)
   2026-08-26
   Non vendiamo abiti. / Diamo forma al modo in cui / entrate in una stanza.
   ===================================================================== */
@media (min-width:981px), (min-width:700px) and (orientation:portrait){
  html[lang="it"] .statement p > span{
    display:block!important;
    white-space:nowrap!important;
  }
  html[lang="it"] .statement p > span::after{
    content:""!important;
  }
}


/* =====================================================================
   DESKTOP + iPAD LANDSCAPE — SECTION 04 LEAD CENTERING — 2026-08-26
   Center the added copy below the main 04 title. Portrait tablet and
   phones remain untouched.
   ===================================================================== */
@media (min-width:1101px){
  #value .value-lead{
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
}
@media (min-width:981px) and (max-width:1366px) and (orientation:landscape){
  #value .value-lead{
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
}


/* =====================================================================
   iPHONE LANDSCAPE — GREEN QUOTE PORTRAIT HEAD SAFE CROP — 2026-08-26
   Wide/short phone view: keep the monochrome portrait anchored at the top
   so cover cropping happens below the subject instead of through the head.
   ===================================================================== */
@media (max-width:932px) and (max-height:500px) and (orientation:landscape){
  .quote-panel .portrait{
    background-position:74% top!important;
  }
}

/* =====================================================================
   iPHONE LANDSCAPE — COMPACT FOOTER — 2026-08-26
   Keep the three footer facts on one compact row instead of the mobile
   stacked footer. Portrait phones and tablet/desktop layouts stay intact.
   ===================================================================== */
@media (max-width:932px) and (max-height:500px) and (orientation:landscape){
  .site-footer{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:nowrap!important;
    gap:clamp(10px,2.4vw,22px)!important;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px))!important;
    text-align:center!important;
    font-size:8px!important;
    line-height:1.15!important;
    letter-spacing:.11em!important;
  }
  .site-footer > span{
    display:block!important;
    width:auto!important;
    margin:0!important;
    flex:0 0 auto!important;
    white-space:nowrap!important;
    text-align:center!important;
  }
}

/* =====================================================================
   iPHONE LANDSCAPE — FOOTER EDGE ALIGNMENT — 2026-08-26
   Left / true center / right, with slightly larger text.
   ===================================================================== */
@media (max-width:932px) and (max-height:500px) and (orientation:landscape){
  .site-footer{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:12px!important;
    width:100%!important;
    padding:14px 14px calc(8px + env(safe-area-inset-bottom, 0px))!important;
    font-size:9.5px!important;
    line-height:1.15!important;
    letter-spacing:.11em!important;
  }
  .site-footer > span{
    min-width:0!important;
    width:auto!important;
    margin:0!important;
    white-space:nowrap!important;
  }
  .site-footer > span:nth-child(1){
    justify-self:start!important;
    text-align:left!important;
  }
  .site-footer > span:nth-child(2){
    justify-self:center!important;
    text-align:center!important;
  }
  .site-footer > span:nth-child(3){
    justify-self:end!important;
    text-align:right!important;
  }
}

/* =====================================================================
   iPHONE LANDSCAPE — FOOTER ROW LOWER — 2026-08-26
   Move only the three footer facts one more visual row lower.
   ===================================================================== */
@media (max-width:932px) and (max-height:500px) and (orientation:landscape){
  .site-footer > span{
    transform:translateY(7px)!important;
  }
}

/* =====================================================================
   DE · 02 / CARD 01 — BODY: keep approved logical lines intact on iPhone/iPad
   No font/card-size changes; title remains in its original two-line form.
   ===================================================================== */
@media (max-width:980px),
       (min-width:700px) and (max-width:1100px) and (orientation:portrait),
       (min-width:981px) and (max-width:1366px) and (orientation:landscape){
  html[lang="de"] #method .method-grid article:nth-child(1) > p{
    max-width:none!important;
    white-space:nowrap!important;
  }
}

/* =====================================================================
   DE · 02 / CARD 02 — iPAD LANDSCAPE: KEEP APPROVED 5 LINES — 2026-08-27
   Preserve the explicit data-de-html <br> rhythm and prevent only the
   individual lines from wrapping again. Other devices remain untouched.
   ===================================================================== */
@media (min-width:981px) and (max-width:1366px) and (orientation:landscape){
  html[lang="de"] #method .method-grid article:nth-child(2) > p{
    max-width:none!important;
    white-space:nowrap!important;
  }
}

/* Wardrobe 06 — shift crop upward, show more top, less bottom */
.wardrobe-photo-modal.is-wardrobe-program .wardrobe-photo-image{
  object-fit:cover;
  object-position:50% 20%;
}

/* ENTRY SHIRT PROGRAM — gold treatment 2026-08-28 */
.wardrobe-entry-price{
  border-top-color:rgba(185,147,74,.28)!important;
}
.wardrobe-entry-price-title{
  color:#B9934A!important;
  border-color:rgba(185,147,74,.72)!important;
}
.wardrobe-entry-price-head > strong,
.wardrobe-entry-price > span{
  color:#B9934A!important;
}


/* Appointment booking — compact date + time pairs */
.appointment-term-fieldset{
  margin:0;
  padding:0;
  border:0;
  min-width:0;
}
.appointment-term-fieldset legend{
  display:block;
  width:100%;
  margin:0 0 10px;
  padding:0;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:10px;
  line-height:1.35;
}
.appointment-term-row{
  gap:12px;
}
.appointment-alt-fieldset{
  margin-top:2px;
  padding-top:16px;
  border-top:1px solid rgba(185,147,74,.18);
}
.appointment-confirmation-note{
  margin-top:2px!important;
  color:rgba(185,147,74,.88)!important;
  text-align:center;
  font-size:14px!important;
  line-height:1.45!important;
  letter-spacing:.04em;
}



/* Appointment — custom sartorial date picker */
.appointment-date-field{
  display:grid;
  gap:8px;
  min-width:0;
  text-align:left;
}
.appointment-date-field-label{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:10px;
}
.appointment-date-control{min-width:0}
.appointment-date-trigger{
  width:100%;
  min-height:46px;
  padding:11px 42px 11px 12px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  border:1px solid rgba(185,147,74,.34)!important;
  background:rgba(251,247,239,.04)!important;
  color:rgba(251,247,239,.58)!important;
  border-radius:0!important;
  text-align:left;
  cursor:pointer;
  transition:border-color .22s var(--ease),background .22s var(--ease),color .22s var(--ease);
  animation:none!important;
}
.appointment-date-trigger:hover,
.appointment-date-trigger:focus-visible{
  border-color:rgba(185,147,74,.82)!important;
  background:rgba(185,147,74,.06)!important;
  color:var(--ivory)!important;
  outline:none!important;
}
.appointment-date-trigger.has-value{color:var(--ivory)!important}
.appointment-date-icon{
  position:absolute;
  right:14px;
  top:50%;
  width:15px;
  height:15px;
  transform:translateY(-50%);
  border:1px solid rgba(185,147,74,.72);
  border-top-width:3px;
  pointer-events:none;
}
.appointment-date-icon::before,
.appointment-date-icon::after{
  content:"";
  position:absolute;
  top:-5px;
  width:1px;
  height:5px;
  background:var(--gold);
}
.appointment-date-icon::before{left:3px}
.appointment-date-icon::after{right:3px}

.appointment-datepicker-layer{
  position:absolute;
  inset:0;
  z-index:12;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(17,17,17,.68);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s var(--ease),visibility .22s var(--ease);
}
.appointment-datepicker-layer.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.appointment-datepicker{
  width:min(360px,100%);
  padding:24px 24px 18px;
  background:var(--black);
  color:var(--ivory);
  border:1px solid rgba(185,147,74,.52);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  outline:none;
}
.appointment-datepicker-head{
  display:grid;
  grid-template-columns:38px 1fr 38px;
  align-items:center;
  gap:8px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(185,147,74,.2);
}
.appointment-datepicker-month{
  color:var(--gold);
  font-size:22px;
  line-height:1;
  text-align:center;
  text-transform:none;
}
.appointment-datepicker-nav{
  width:38px!important;
  height:38px!important;
  min-height:38px!important;
  padding:0!important;
  display:grid!important;
  place-items:center;
  border:1px solid rgba(185,147,74,.28)!important;
  background:transparent!important;
  color:var(--gold)!important;
  font-family:inherit!important;
  font-size:20px!important;
  line-height:1!important;
  cursor:pointer;
  animation:none!important;
}
.appointment-datepicker-nav:hover:not(:disabled),
.appointment-datepicker-nav:focus-visible:not(:disabled){
  border-color:var(--gold)!important;
  background:rgba(185,147,74,.08)!important;
  outline:none!important;
}
.appointment-datepicker-nav:disabled{opacity:.22;cursor:default}
.appointment-datepicker-weekdays,
.appointment-datepicker-days{
  display:grid;
  grid-template-columns:repeat(7,1fr);
}
.appointment-datepicker-weekdays{
  padding:18px 0 8px;
  color:rgba(185,147,74,.72);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:10px;
  font-weight:500;
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
}
.appointment-datepicker-days{gap:4px 2px}
.appointment-datepicker-day{
  aspect-ratio:1;
  width:100%!important;
  min-height:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center;
  border:1px solid transparent!important;
  background:transparent!important;
  color:rgba(251,247,239,.84)!important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:14px!important;
  line-height:1!important;
  cursor:pointer;
  animation:none!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.appointment-datepicker-day:hover:not(:disabled),
.appointment-datepicker-day:focus-visible:not(:disabled){
  border-color:rgba(185,147,74,.72)!important;
  background:rgba(185,147,74,.09)!important;
  outline:none!important;
}
.appointment-datepicker-day.is-today:not(.is-selected){
  border-color:rgba(185,147,74,.42)!important;
  color:var(--gold)!important;
}
.appointment-datepicker-day.is-selected{
  border-color:var(--gold)!important;
  background:var(--gold)!important;
  color:var(--black)!important;
  font-weight:600!important;
}
.appointment-datepicker-day:disabled{
  color:rgba(251,247,239,.2)!important;
  cursor:default;
}
.appointment-datepicker-blank{aspect-ratio:1}
.appointment-datepicker-footer{
  min-height:37px;
  margin-top:16px;
  padding-top:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid rgba(185,147,74,.2);
}
.appointment-datepicker-footer button{
  min-height:0!important;
  width:auto!important;
  padding:5px 0!important;
  border:0!important;
  background:transparent!important;
  color:rgba(185,147,74,.86)!important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:11px!important;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  animation:none!important;
}
.appointment-datepicker-footer button:hover,
.appointment-datepicker-footer button:focus-visible{
  color:var(--ivory)!important;
  outline:none!important;
}
.appointment-datepicker-clear[hidden]{visibility:hidden;display:block!important}

@media (max-width:520px){
  .appointment-datepicker-layer{padding:18px}
  .appointment-datepicker{width:min(340px,100%);padding:20px 18px 16px}
  .appointment-datepicker-month{font-size:20px}
  .appointment-datepicker-day{font-size:13px!important}
}

/* Appointment form — keep browser autofill in site design */
.appointment-request-form input:-webkit-autofill,
.appointment-request-form input:-webkit-autofill:hover,
.appointment-request-form input:-webkit-autofill:focus,
.appointment-request-form textarea:-webkit-autofill,
.appointment-request-form textarea:-webkit-autofill:hover,
.appointment-request-form textarea:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ivory)!important;
  caret-color:var(--ivory)!important;
  border:1px solid rgba(185,147,74,.34)!important;
  -webkit-box-shadow:0 0 0 1000px #171717 inset!important;
  box-shadow:0 0 0 1000px #171717 inset!important;
  background-color:#171717!important;
  transition:background-color 9999s ease-out 0s!important;
}
.appointment-request-form input:autofill,
.appointment-request-form textarea:autofill{
  color:var(--ivory)!important;
  background:#171717!important;
  border-color:rgba(185,147,74,.34)!important;
}

/* Appointment form — normalize control geometry across Safari and Chromium.
   Safari's native menulist can ignore min-height and render a shorter control,
   so use one explicit control height and a browser-independent chevron. */
.appointment-request-form input:not([type="hidden"]),
.appointment-request-form select,
.appointment-date-trigger{
  height:46px;
  min-height:46px;
  box-sizing:border-box;
}
.appointment-request-form select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:42px;
  background-color:rgba(251,247,239,.04);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.25 11 1.25' fill='none' stroke='%23FBF7EF' stroke-opacity='.88' stroke-width='1.35' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px 8px;
}

/* =====================================================================
   ENTRY SHIRT PROGRAM — DESKTOP + iPAD LANDSCAPE CENTER AXIS — 2026-08-28
   Center only the pill + price pair as one unit. Supporting copy unchanged.
   ===================================================================== */
@media (min-width:981px) and (hover:hover) and (pointer:fine),
       (min-width:981px) and (max-width:1366px) and (orientation:landscape){
  .wardrobe-entry-price-head{
    justify-self:center!important;
    align-items:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .wardrobe-entry-price-title,
  .wardrobe-entry-price-head > strong{
    align-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
}

/* =====================================================================
   ENTRY SHIRT PROGRAM — iPAD LANDSCAPE HARD CENTER — 2026-08-28
   Explicit iPad-device rule also covers Safari landscape viewports that
   resolve to 980px. Portrait iPad and phones remain untouched.
   ===================================================================== */
@media (min-width:700px) and (max-width:1366px) and (orientation:landscape){
  html.is-ipad-device .wardrobe-entry-price{
    width:100%!important;
  }
  html.is-ipad-device .wardrobe-entry-price-head{
    justify-self:center!important;
    align-items:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html.is-ipad-device .wardrobe-entry-price-title,
  html.is-ipad-device .wardrobe-entry-price-head > strong{
    align-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
}

/* =====================================================================
   02 — iPAD PORTRAIT CHROME ONLY: match 04 card geometry + wider copy
   Section 04 remains the untouched geometry reference.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  html.is-ipad-device #method .method-grid article{
    min-height:330px!important;
    padding-left:28px!important;
    padding-right:28px!important;
  }

  /* Use the same full content width as 04. The localized desktop <br>
     markup remains in the DOM for every other breakpoint; on iPad portrait
     the plain data-* copy is rendered so the browser can wrap naturally. */
  html.is-ipad-device #method .method-grid article > h3 + p{
    width:100%!important;
    max-width:100%!important;
    font-size:0!important;
    line-height:0!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  html.is-ipad-device #method .method-grid article > h3 + p::before{
    content:attr(data-cs);
    display:block;
    width:100%;
    max-width:100%;
    font-size:16px;
    line-height:1.55;
    letter-spacing:normal;
    white-space:normal;
    text-align:left;
    text-wrap:pretty;
  }
  html[lang="de"].is-ipad-device #method .method-grid article > h3 + p::before{ content:attr(data-de); }
  html[lang="en"].is-ipad-device #method .method-grid article > h3 + p::before{ content:attr(data-en); }
  html[lang="es"].is-ipad-device #method .method-grid article > h3 + p::before{ content:attr(data-es); }
  html[lang="it"].is-ipad-device #method .method-grid article > h3 + p::before{ content:attr(data-it); }
  html[lang="ru"].is-ipad-device #method .method-grid article > h3 + p::before{ content:attr(data-ru); }

  /* One fixed arrow anchor on both faces. On the back, use only the arrow
     that lives inside .flip-back so the transformed front hint cannot mirror. */
  html.is-ipad-device #method .method-grid .flip-card:not(.is-flipped) > .flip-hint,
  html.is-ipad-device #method .method-grid .flip-back .flip-return-hint{
    position:absolute!important;
    right:20px!important;
    bottom:18px!important;
    left:auto!important;
    top:auto!important;
    width:26px!important;
    height:26px!important;
    margin:0!important;
  }
  html.is-ipad-device #method .method-grid .flip-card.is-flipped > .flip-hint{
    visibility:hidden!important;
    opacity:0!important;
  }
}

/* =====================================================================
   iPAD PORTRAIT — FLIPPED CARD TYPE SLIGHTLY LARGER — 2026-08-28
   Back faces only in sections 02 + 04. Front faces and card geometry stay unchanged.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  html.is-ipad-device #method .method-grid .flip-back .flip-back-value,
  html.is-ipad-device #value .value-grid .flip-back .flip-back-value{
    font-size:40px!important;
  }
  html.is-ipad-device #method .method-grid .flip-back .flip-back-note,
  html.is-ipad-device #value .value-grid .flip-back .flip-back-note{
    font-size:20px!important;
  }
}

/* RU 02 — iPad portrait: prevent legacy RU card-02 type rule from revealing the
   localized HTML copy underneath the natural-wrap pseudo copy. */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  html[lang="ru"].is-ipad-device #method .method-grid article:nth-child(2) > h3 + p{
    font-size:0!important;
    line-height:0!important;
  }
}

/* =====================================================================
   iPAD PORTRAIT — HERO FULL-BLEED / CENTERED CLAIM — 2026-08-28
   Mirror the approved iPhone portrait idea on tablet portrait only:
   full-width/full-height image, centered large claim, existing CTA content.
   Desktop, iPad landscape and phones remain untouched.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  html.is-ipad-device .hero{
    display:block!important;
    position:relative!important;
    min-height:100dvh!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }

  html.is-ipad-device .hero-media{
    top:0!important;
    left:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    opacity:.62!important;
    background-size:cover,cover!important;
    background-position:center,50% center!important;
  }

  html.is-ipad-device .hero-media::before{
    background:linear-gradient(180deg,
      rgba(17,17,17,.76) 0%,
      rgba(17,17,17,.30) 28%,
      rgba(17,17,17,.28) 56%,
      rgba(17,17,17,.86) 100%)!important;
  }

  html.is-ipad-device .hero-copy{
    position:relative!important;
    z-index:3!important;
    grid-column:auto!important;
    width:100%!important;
    max-width:none!important;
    min-height:100dvh!important;
    height:100dvh!important;
    margin:0!important;
    padding:clamp(150px,17vh,210px) 56px clamp(72px,8vh,108px)!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    text-align:center!important;
  }

  html.is-ipad-device .hero .hero-title{
    position:relative!important;
    width:100%!important;
    max-width:12ch!important;
    margin:0 auto!important;
    transform:none!important;
    font-size:clamp(82px,9.4vw,96px)!important;
    line-height:.98!important;
    letter-spacing:-.03em!important;
    text-align:center!important;
  }

  html.is-ipad-device .hero .hero-title > span{
    text-align:center!important;
  }

  html.is-ipad-device .hero-media-label{
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:max-content!important;
    max-width:calc(100% - 56px)!important;
    text-align:center!important;
    white-space:normal!important;
    bottom:26px!important;
  }

  html.is-ipad-device .hero-actions{
    width:min(100%, 520px)!important;
    align-items:stretch!important;
    gap:16px!important;
    margin-top:48px!important;
    position:relative!important;
  }

  html.is-ipad-device .hero-actions .btn,
  html.is-ipad-device .hero-actions .hero-bespoke-button{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    justify-content:center!important;
    min-height:60px!important;
    padding:14px 28px!important;
    font-size:17px!important;
    letter-spacing:.10em!important;
    line-height:1.2!important;
    white-space:normal!important;
    text-align:center!important;
    box-sizing:border-box!important;
  }

  /* Same click-fill timing as iPhone: fill completely before navigation. */
  html.is-ipad-device .hero-actions .btn::before{
    transition-duration:.5s!important;
  }
  html.is-ipad-device .hero-actions .btn.is-filling::before{
    width:100%!important;
  }
  html.is-ipad-device .hero-actions .btn.is-filling{
    color:var(--black)!important;
    border-color:var(--gold)!important;
    transform:none!important;
    pointer-events:none!important;
  }
}

/* =====================================================================
   04 — iPAD PORTRAIT: NATURAL LEAD PARAGRAPH HEIGHT — 2026-08-28
   Desktop reserves fixed line-heights for both lead paragraphs. On portrait
   iPad that reservation creates an extra blank row between the paragraphs.
   Keep the existing paragraph margin, but let both paragraphs use their
   natural height so the cards sit higher without changing card geometry.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  html.is-ipad-device #value .value-lead,
  html.is-ipad-device #value .value-lead-second{
    min-height:0!important;
  }
  html.is-ipad-device #value .value-grid{
    margin-top:25px!important;
  }
}

/* =====================================================================
   04 — iPAD PORTRAIT: UNIFIED LANGUAGE TYPOGRAPHY — 2026-08-28
   Override legacy desktop language-specific type scaling on portrait iPad.
   All languages use the same tablet 04 title + lead typography.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  html.is-ipad-device #value .value-title{
    font-size:clamp(42px,6.15vw,62px)!important;
    line-height:1!important;
    letter-spacing:-.03em!important;
  }
  html.is-ipad-device #value .value-lead{
    font-size:clamp(17px,2.2vw,21px)!important;
    line-height:1.58!important;
  }
}

/* =====================================================================
   CZ · 03 — iPAD PORTRAIT: ONE-LINE WARDROBE HEADING — 2026-08-28
   Match the already approved EN tablet scale so the Czech heading stays
   on one line without changing any other language or breakpoint.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  html[lang="cs"].is-ipad-device #wardrobe h2.wardrobe-gold-heading,
  html[lang="cs"].is-ipad-device #wardrobe > h2{
    width:max-content!important;
    max-width:none!important;
    white-space:nowrap!important;
    font-size:clamp(38px,5vw,82px)!important;
  }
}

/* =====================================================================
   03 — WARDROBE DETAIL: wider text panel — 2026-08-28
   Desktop/tablet two-column modal: make the text panel visibly wider.
   Mobile remains a single full-width column.
   ===================================================================== */
@media (min-width:981px){
  .wardrobe-photo-modal .wardrobe-photo-modal-inner{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }
}

/* =====================================================================
   JOURNAL DETAIL — 50 / 50 media + text — 2026-08-28
   Match the approved section 03 detail proportion on desktop/tablet.
   Mobile keeps its existing stacked full-width layout.
   ===================================================================== */
@media (min-width:981px){
  .journal-modal-panel{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }
}

/* =====================================================================
   JOURNAL 03 — PHOTO CROP SLIGHTLY LEFT — 2026-08-28
   Keep the third Journal image framing consistent in the card and detail.
   ===================================================================== */
#journal .journal-card-button[data-journal-entry="suit"] img,
.journal-modal-media img[src$="journal-suit-custom.jpg"]{
  object-position:68% 58%!important;
}

/* =====================================================================
   03 / SHIRT PROGRAM — DESKTOP PRICE NOTE USE FULL PANEL WIDTH — 2026-08-28
   The detail panel was widened to 50/50; remove the legacy 58ch cap only
   for the supporting programme note on pointer desktop layouts.
   ===================================================================== */
@media (min-width:981px) and (hover:hover) and (pointer:fine){
  .wardrobe-photo-modal.is-shirt-system .wardrobe-entry-price > span{
    width:100%!important;
    max-width:none!important;
    text-align:center!important;
  }
}

/* =====================================================================
   03 / SHIRT PROGRAM — iPAD PRICE NOTE FULL WIDTH + CENTER — 2026-08-28
   Match the desktop treatment in both iPad portrait and landscape only.
   ===================================================================== */
@media (min-width:700px) and (max-width:1366px){
  html.is-ipad-device .wardrobe-photo-modal.is-shirt-system .wardrobe-entry-price > span{
    width:100%!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
}

/* =====================================================================
   03 / SHIRT PROGRAM — iPAD PORTRAIT PRICE BLOCK TRUE CENTER — 2026-08-28
   Center the programme pill + price pair as one unit. Supporting note keeps
   its existing full-width centered treatment. Landscape/desktop untouched.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  html.is-ipad-device .wardrobe-photo-modal.is-shirt-system .wardrobe-entry-price{
    width:100%!important;
    justify-items:center!important;
    text-align:center!important;
  }
  html.is-ipad-device .wardrobe-photo-modal.is-shirt-system .wardrobe-entry-price-head{
    justify-self:center!important;
    align-items:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html.is-ipad-device .wardrobe-photo-modal.is-shirt-system .wardrobe-entry-price-title,
  html.is-ipad-device .wardrobe-photo-modal.is-shirt-system .wardrobe-entry-price-head > strong{
    align-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
}


/* =====================================================================
   05 JOURNAL — SAFE DESKTOP CHROME FIX ONLY — 2026-08-29
   IMPORTANT: no phone selectors in this block. iPhone layout remains exactly
   as in the last confirmed-good pre-Journal build.
   ===================================================================== */
.journal-modal-desktop-break{ display:none; }

@media (min-width:981px){
  html:not(.is-ipad-device) .journal-modal-panel{
    height:auto!important;
    max-height:min(82vh,860px)!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    overflow:hidden!important;
  }
  html:not(.is-ipad-device) .journal-modal-media{
    min-height:520px!important;
  }
  html:not(.is-ipad-device) .journal-modal-media img{
    height:100%!important;
    min-height:520px!important;
  }
  html:not(.is-ipad-device) .journal-modal-content{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    min-height:0!important;
    height:auto!important;
    max-height:min(82vh,860px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box!important;
  }
  html:not(.is-ipad-device)[lang="cs"] #journal-modal-title:has(.journal-modal-desktop-break){
    font-size:64px!important;
    line-height:.98!important;
    letter-spacing:-.035em!important;
  }
  html:not(.is-ipad-device)[lang="cs"] #journal-modal-title .journal-modal-desktop-break{
    display:block!important;
  }
}

/* iPad: remove only the native/white focus frame. No geometry changes. */
@media (min-width:700px) and (max-width:1366px){
  html.is-ipad-device #journal .journal-card-button,
  html.is-ipad-device #journal .journal-card-button:focus,
  html.is-ipad-device #journal .journal-card-button:focus-visible,
  html.is-ipad-device #journal .journal-card-button:active,
  html.is-ipad-device .journal-modal-close,
  html.is-ipad-device .journal-modal-close:focus,
  html.is-ipad-device .journal-modal-close:focus-visible,
  html.is-ipad-device .journal-modal-close:active{
    outline:0!important;
    outline-offset:0!important;
    box-shadow:none!important;
    -webkit-box-shadow:none!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  html.is-ipad-device #journal .journal-card-button{
    border:0!important;
    -webkit-appearance:none!important;
    appearance:none!important;
  }
}

/* iPhone: same as iPad — remove the native/white tap/focus frame on Journal
   cards. Selection is already shown via the gold border, the white frame
   is redundant. No geometry changes. */
@media (max-width:699px){
  #journal .journal-card-button,
  #journal .journal-card-button:focus,
  #journal .journal-card-button:focus-visible,
  #journal .journal-card-button:active,
  .journal-modal-close,
  .journal-modal-close:focus,
  .journal-modal-close:focus-visible,
  .journal-modal-close:active{
    outline:0!important;
    outline-offset:0!important;
    box-shadow:none!important;
    -webkit-box-shadow:none!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  #journal .journal-card-button{
    border:0!important;
    -webkit-appearance:none!important;
    appearance:none!important;
  }
}

/* =====================================================================
   06 APPOINTMENT — iPhone landscape contact buttons in one compact row
   2026-08-29
   Portrait / iPad / desktop untouched.
   ===================================================================== */
@media (max-width:980px) and (max-height:500px) and (orientation:landscape){
  .contact-lines{
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    width:100%!important;
  }
  .contact-lines a{
    width:auto!important;
    min-width:0!important;
    flex:0 0 auto!important;
    min-height:42px!important;
    padding-left:10px!important;
    padding-right:10px!important;
    white-space:nowrap!important;
    font-size:clamp(10px,1.55vw,13px)!important;
    letter-spacing:.10em!important;
  }
}



/* =====================================================================
   05 STORIES — DE intro one line on desktop / iPad landscape — 2026-09-03
   Keep the exact standard typography shared with IT; only give the longer
   German sentence enough horizontal room so it does not wrap unnecessarily.
   Portrait/mobile remain untouched.
   ===================================================================== */
@media (min-width:981px){
  html[lang="de"] #journal .journal-intro{
    max-width:1040px;
  }
}

/* RU only — section 03: women’s sartorial wardrobe title visually aligned with the other rows */
@media (min-width:981px){
  html[lang="ru"] #wardrobe .wardrobe-photo-trigger[data-image*="wardrobe-07.jpg"] > span{
    font-size:clamp(27px,2.55vw,40px)!important;
    line-height:1.04!important;
  }
}
html[lang="ru"] .wardrobe-photo-modal.is-women-wardrobe .wardrobe-photo-caption .wardrobe-photo-heading{
  font-size:clamp(24px,2.15vw,32px)!important;
  line-height:1.06!important;
}
@media (max-width:980px){
  html[lang="ru"] .wardrobe-photo-modal.is-women-wardrobe .wardrobe-photo-caption .wardrobe-photo-heading{
    font-size:clamp(24px,6.4vw,30px)!important;
  }
}

/* =====================================================================
   05 STORIES — RESPONSIVE TITLE FOUNDATION — 2026-09-03
   One authoritative title system. It is scoped only to Stories and cannot
   modify section 02/03/04 typography or card geometry.
   ===================================================================== */

/* Approved editorial <br> breaks are hard breaks on phones/tablets. The
   browser may not insert an extra wrap inside an approved line. */
@media (max-width:980px){
  html[lang="cs"] #journal .journal-card h3[data-cs-html],
  html[lang="en"] #journal .journal-card h3[data-en-html],
  html[lang="de"] #journal .journal-card h3[data-de-html],
  html[lang="it"] #journal .journal-card h3[data-it-html],
  html[lang="es"] #journal .journal-card h3[data-es-html],
  html[lang="ru"] #journal .journal-card h3[data-ru-html]{
    white-space:nowrap!important;
    text-wrap-mode:nowrap!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
}
@media (min-width:700px) and (max-width:1366px){
  html.is-ipad-device[lang="cs"] #journal .journal-card h3[data-cs-html],
  html.is-ipad-device[lang="en"] #journal .journal-card h3[data-en-html],
  html.is-ipad-device[lang="de"] #journal .journal-card h3[data-de-html],
  html.is-ipad-device[lang="it"] #journal .journal-card h3[data-it-html],
  html.is-ipad-device[lang="es"] #journal .journal-card h3[data-es-html],
  html.is-ipad-device[lang="ru"] #journal .journal-card h3[data-ru-html]{
    white-space:nowrap!important;
    text-wrap-mode:nowrap!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
}

/* Desktop (up to the separate >1440 large-desktop stylesheet): preserve the
   approved language metrics while keeping each language internally uniform. */
@media (min-width:981px) and (max-width:1440px){
  html[lang="en"] #journal .journal-card-button[data-journal-entry] h3{
    font-size:clamp(28px,2.35vw,40px)!important;
    line-height:1.08!important;
  }
  html[lang="de"] #journal .journal-card-button[data-journal-entry] h3{
    line-height:1.08!important;
    letter-spacing:-.02em!important;
    white-space:nowrap!important;
    text-wrap-mode:nowrap!important;
    max-width:100%!important;
  }
  html[lang="it"] #journal .journal-card-button[data-journal-entry] h3{
    line-height:1.1!important;
    letter-spacing:-.02em!important;
    white-space:nowrap!important;
    text-wrap-mode:nowrap!important;
    max-width:100%!important;
  }
  html[lang="ru"] #journal .journal-card-button[data-journal-entry] h3{
    font-size:clamp(25px,2.05vw,34px)!important;
    line-height:1.08!important;
    letter-spacing:-.02em!important;
    white-space:nowrap!important;
    text-wrap-mode:nowrap!important;
    max-width:none!important;
  }
  html[lang="ru"] #journal .journal-card-button[data-journal-entry="journey"] h3{
    margin-top:28px!important;
  }
}

/* iPhone: keep the confirmed LKG typography. Only make its existing manual
   line breaks authoritative. */
@media (max-width:699px){
  html[lang="en"] #journal .journal-card-button[data-journal-entry] h3{
    font-size:28px!important;
    line-height:1.08!important;
  }
  html[lang="ru"] #journal .journal-card-button[data-journal-entry] h3{
    font-size:clamp(24px,6.6vw,31px)!important;
    line-height:1.08!important;
  }
  html[lang="ru"] #journal .journal-card-button[data-journal-entry="journey"] h3{
    margin-top:24px!important;
  }
}

/* iPad portrait: one common Stories title scale for every language. Give the
   card copy a few extra pixels horizontally instead of shrinking DE. RU uses
   this same standard scale rather than the obsolete 31px phone override. */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  html.is-ipad-device #journal .journal-card-copy{
    padding-left:17px!important;
    padding-right:17px!important;
  }
  html.is-ipad-device #journal .journal-card h3{
    width:100%!important;
    max-width:100%!important;
    margin-top:26px!important;
    font-size:clamp(20px,2.7vw,27px)!important;
    line-height:1.08!important;
    text-align:left!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  html.is-ipad-device[lang="it"] #journal .journal-card h3{
    line-height:1.1!important;
  }
}

/* iPad landscape: desktop-like scale, including Safari layouts that report
   980px. No phone-size RU rule is allowed to leak into landscape. */
@media (min-width:700px) and (max-width:1366px) and (orientation:landscape){
  html.is-ipad-device[lang="cs"] #journal .journal-card h3[data-cs-html],
  html.is-ipad-device[lang="en"] #journal .journal-card h3[data-en-html],
  html.is-ipad-device[lang="de"] #journal .journal-card h3[data-de-html],
  html.is-ipad-device[lang="it"] #journal .journal-card h3[data-it-html],
  html.is-ipad-device[lang="es"] #journal .journal-card h3[data-es-html],
  html.is-ipad-device[lang="ru"] #journal .journal-card h3[data-ru-html]{
    width:auto!important;
    max-width:none!important;
  }
  html.is-ipad-device[lang="en"] #journal .journal-card-button[data-journal-entry] h3{
    font-size:clamp(28px,2.35vw,40px)!important;
    line-height:1.08!important;
  }
  html.is-ipad-device[lang="ru"] #journal .journal-card-button[data-journal-entry] h3{
    font-size:clamp(25px,2.05vw,34px)!important;
    line-height:1.08!important;
    letter-spacing:-.02em!important;
    white-space:nowrap!important;
    text-wrap-mode:nowrap!important;
    max-width:100%!important;
  }
  html.is-ipad-device[lang="ru"] #journal .journal-card-button[data-journal-entry="journey"] h3{
    margin-top:28px!important;
  }
}

/* =====================================================================
   05 STORIES DETAIL — iPHONE PORTRAIT SINGLE SCROLL — 2026-09-03
   One scroll container only. Dynamic viewport height avoids Chrome/iOS
   toolbar-induced outer scrolling. Bottom reserve is a simple 50px padding.
   ===================================================================== */
@media (max-width:699px) and (orientation:portrait){
  #value .cz04-portrait-breaks{display:inline!important;}
  #value .cz04-nonportrait-breaks{display:none!important;}

  .journal-modal{
    height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  .journal-modal-panel{
    height:100dvh!important;
    max-height:100dvh!important;
    grid-template-rows:40dvh minmax(0,1fr)!important;
    overflow:hidden!important;
  }
  .journal-modal-media{
    min-height:0!important;
    overflow:hidden!important;
  }
  .journal-modal-content{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:50px!important;
  }
  .journal-modal-content::after{
    content:none!important;
    display:none!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
  }
}

/* =====================================================================
   iPAD PORTRAIT — 02 + 04 CARD FRONT TYPOGRAPHY — 2026-09-03
   Use the available tablet card space more confidently. Front faces only;
   flipped/icon faces, iPhone and landscape remain untouched.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  html.is-ipad-device #method .method-grid article.flip-card > h3,
  html.is-ipad-device #value .value-grid article.flip-card > h3{
    font-size:32px!important;
  }

  /* 02 portrait uses localized plain copy via ::before. */
  html.is-ipad-device #method .method-grid article.flip-card > h3 + p::before{
    font-size:17px!important;
  }

  /* 04 front supporting copy is the direct paragraph. */
  html.is-ipad-device #value .value-grid article.flip-card > h3 + p{
    font-size:17px!important;
  }
}

/* =====================================================================
   iPHONE LANDSCAPE — FINAL HEIGHT-TARGETED LAYOUT — 2026-09-03
   Targets phone landscape by viewport height, not width/device UA.
   iPhone portrait and iPad portrait/landscape remain untouched.
   ===================================================================== */
@media (orientation:landscape) and (max-height:550px){
  html body .site-header{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:10px 14px 12px!important;
    gap:0!important;
    background:transparent!important;
  }
  html body .site-header .brand{
    position:relative!important;
    z-index:43!important;
    display:grid!important;
    width:92px!important;
    flex:0 0 92px!important;
  }
  html body .site-header .brand-logo{width:92px!important;}
  html body .site-header .brand-sub{font-size:4.6px!important;}

  html body .site-header .nav,
  html body .site-header #primary-nav,
  html body .site-header.menu-open .nav,
  html body .site-header.menu-open #primary-nav{
    position:static!important;
    inset:auto!important;
    display:flex!important;
    flex:0 1 auto!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:auto!important;
    min-width:0!important;
    margin:0 18px 0 auto!important;
    padding:0!important;
    gap:clamp(12px,1.6vw,18px)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    color:inherit!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
    font-family:var(--serif)!important;
    font-size:clamp(11px,1.40vw,13px)!important;
    line-height:1!important;
    letter-spacing:.075em!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
  }
  html body .site-header #primary-nav > a,
  html body .site-header.menu-open #primary-nav > a{
    position:relative!important;
    display:inline-flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:0!important;
    height:34px!important;
    min-height:0!important;
    padding:0!important;
    border:0!important;
    font-size:inherit!important;
    line-height:1!important;
    letter-spacing:inherit!important;
    text-transform:uppercase!important;
    opacity:.88!important;
    color:inherit!important;
  }
  html body .site-header #primary-nav > a::before{content:none!important;display:none!important;}
  html body .site-header #primary-nav > a::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:0!important;
    right:.055em!important;
    bottom:3px!important;
    height:1px!important;
    background:currentColor!important;
    border:0!important;
    transform:scaleX(0)!important;
    transform-origin:center!important;
  }
  html body .site-header #primary-nav > a:hover::after,
  html body .site-header #primary-nav > a.is-active::after{transform:scaleX(1)!important;}
  html body .site-header .mobile-language-control{display:none!important;}
  html body .site-header .header-controls{
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
    margin-left:0!important;
    gap:0!important;
  }
  html body .site-header .desktop-language-control{display:block!important;}
  html body .site-header .desktop-language-trigger{
    min-height:32px!important;
    padding:6px 7px!important;
    font-size:9px!important;
    letter-spacing:.09em!important;
  }
  html body .site-header .menu-toggle{display:none!important;}

  html body #method .method-grid,
  html body #value .value-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:auto auto!important;
    grid-auto-flow:row!important;
  }
  html body #method .method-grid > article,
  html body #value .value-grid > article{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
  }
  html body #method .method-grid > article{
    border-right:1px solid var(--line-dark)!important;
    border-bottom:1px solid var(--line-dark)!important;
  }
  html body #method .method-grid > article:nth-child(2n){border-right:0!important;}
  html body #method .method-grid > article:nth-last-child(-n+2){border-bottom:0!important;}

  /* 04 main heading: use the approved desktop two-line wording in every
     language, all at one common RU-like scale. */
  html body #value .value-title-desktop-line{
    display:block!important;
    white-space:nowrap!important;
  }
  html body #value .value-title-mobile-line{
    display:none!important;
  }
  /* EN is the size master for every non-RU language. Explicit language
     specificity is intentional here: it beats the older per-language
     !important rules without adding another override layer. */
  html:is([lang="cs"],[lang="en"],[lang="de"],[lang="it"],[lang="es"]) body #value .value-title{
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
    font-size:clamp(48px,7.35vw,62px)!important;
    line-height:.98!important;
    letter-spacing:-.032em!important;
  }
  html:is([lang="cs"],[lang="en"],[lang="de"],[lang="it"],[lang="es"]) body #value .value-title-desktop-line{
    font-size:inherit!important;
    line-height:inherit!important;
    letter-spacing:inherit!important;
  }
}

/* =====================================================================
   iPHONE LANDSCAPE — HERO DESKTOP COMPOSITION — 2026-09-03
   Photo left / claim + 3 CTA right. Portrait and iPad untouched.
   ===================================================================== */
@media (orientation:landscape) and (max-height:550px){
  html body .hero{
    position:relative!important;
    display:grid!important;
    grid-template-columns:48% 52%!important;
    align-items:stretch!important;
    min-height:100dvh!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    background:var(--black)!important;
  }

  html body .hero-media{
    position:absolute!important;
    top:76px!important;
    left:0!important;
    width:48%!important;
    height:calc(100dvh - 76px)!important;
    min-height:0!important;
    opacity:.82!important;
    filter:saturate(.8) contrast(1.06)!important;
    background-size:cover,cover!important;
    background-position:center,50% center!important;
  }
  html body .hero-media::before{
    background:linear-gradient(90deg,
      rgba(17,17,17,.05) 0%,
      rgba(17,17,17,.02) 86%,
      var(--black) 100%)!important;
  }
  html body .hero-media-label{
    left:14px!important;
    right:auto!important;
    bottom:12px!important;
    transform:none!important;
    width:max-content!important;
    max-width:calc(100% - 28px)!important;
    font-size:8px!important;
    letter-spacing:.15em!important;
    padding:7px 8px!important;
    text-align:left!important;
  }

  html body .hero-copy{
    position:relative!important;
    z-index:3!important;
    grid-column:2!important;
    grid-row:1!important;
    align-self:stretch!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:flex-start!important;
    min-height:0!important;
    height:100dvh!important;
    max-width:none!important;
    margin:0!important;
    padding:64px 24px 12px clamp(22px,3.2vw,38px)!important;
    text-align:left!important;
    box-sizing:border-box!important;
  }

  html[lang] body .hero .hero-title{
    position:relative!important;
    top:8px!important;
    width:100%!important;
    max-width:9.4ch!important;
    margin:0!important;
    font-size:clamp(44px,6.35vw,66px)!important;
    line-height:.96!important;
    letter-spacing:-.028em!important;
    text-align:left!important;
  }
  html body .hero .hero-title > span{
    display:block!important;
    width:100%!important;
    text-align:left!important;
  }

  html body .hero-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    width:min(100%,246px)!important;
    gap:6px!important;
    margin-top:32px!important;
  }
  html body .hero-actions .btn,
  html body .hero-actions .hero-bespoke-button{
    width:100%!important;
    max-width:246px!important;
    min-width:0!important;
    min-height:32px!important;
    height:32px!important;
    padding:0 11px!important;
    font-size:9.5px!important;
    line-height:1!important;
    letter-spacing:.11em!important;
    white-space:nowrap!important;
    justify-content:center!important;
  }
  html body .hero-actions .hero-bespoke-button{
    position:static!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    margin-top:0!important;
  }
}

/* =====================================================================
   iPHONE LANDSCAPE — COMPACT LANGUAGE PANEL — 2026-09-03
   Keep the desktop-style language control, but make its opened selector
   proportionate to the shallow phone viewport. Portrait/tablet untouched.
   ===================================================================== */
@media (orientation:landscape) and (max-height:550px){
  html body .site-header .desktop-language-panel{
    top:calc(100% + 6px)!important;
    right:0!important;
    width:230px!important;
    padding:4px!important;
    gap:1px!important;
    border:1px solid rgba(255,255,255,.9)!important;
  }
  html body .site-header .desktop-language-panel .language-option{
    min-height:36px!important;
    padding:5px 6px!important;
    grid-template-columns:24px 1fr!important;
    gap:4px!important;
  }
  html body .site-header .desktop-language-panel .language-option-code{
    font-size:10px!important;
    letter-spacing:.13em!important;
  }
  html body .site-header .desktop-language-panel .language-option-name{
    font-size:13.5px!important;
    line-height:1.05!important;
  }
}


/* iPhone landscape — exact Bespoke parking, no tobacco seam */
@media (orientation:landscape) and (max-height:550px){
  html body #value{
    border-top:0!important;
  }
}

/* =====================================================================
   iPHONE LANDSCAPE — SECTION 01 CZ + RU MATCH OTHER LANGUAGE TITLE SIZE
   2026-09-03. The standard phone landscape section-01 title resolves to
   64px; CZ/RU historical language overrides were smaller. Match them.
   ===================================================================== */
@media (orientation:landscape) and (max-height:550px){
  html[lang="cs"] body #atelier .atelier-main h2.atelier-title,
  html[lang="ru"] body #atelier .atelier-main h2.atelier-title{
    font-size:64px!important;
    line-height:1.02!important;
  }
}

/* =====================================================================
   iPHONE LANDSCAPE — ATELIER TRIPTYCH ROW — 2026-09-03
   Keep the three images between sections 01 and 02 side by side.
   Portrait and iPad/desktop remain untouched.
   ===================================================================== */
@media (orientation:landscape) and (max-height:550px){
  html body .media-band{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;
    gap:1px!important;
  }
  html body .media-band .image-slot{
    width:auto!important;
    min-width:0!important;
    min-height:54vh!important;
  }
}


/* =====================================================================
   iPHONE LANDSCAPE — 03 WARDROBE DESKTOP / iPAD-LANDSCAPE COMPOSITION
   2026-09-03 — keep portrait/tablet/desktop untouched.
   ===================================================================== */
@media (orientation:landscape) and (max-height:550px){
  html body #wardrobe{
    padding-left:7vw!important;
    padding-right:7vw!important;
  }
  html body #wardrobe .section-kicker{
    width:auto!important;
    text-align:left!important;
  }
  html body #wardrobe h2.wardrobe-gold-heading,
  html body #wardrobe > h2{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
    white-space:nowrap!important;
    text-wrap:nowrap!important;
    overflow:visible!important;
    font-size:64px!important; /* JS fits each language to the maximum available width */
    line-height:1!important;
    letter-spacing:-.03em!important;
    box-sizing:border-box!important;
  }
  html body #wardrobe .product-list{
    width:100%!important;
    margin-top:48px!important;
    text-align:left!important;
  }
  html body #wardrobe .product-list button,
  html body #wardrobe .product-list a{
    display:grid!important;
    grid-template-columns:1.1fr 1fr!important;
    gap:20px!important;
    align-items:center!important;
    justify-items:stretch!important;
    width:100%!important;
    padding:22px 0!important;
    text-align:left!important;
  }
  html body #wardrobe .product-list span{
    display:block!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    text-align:left!important;
    font-size:clamp(32px,4vw,44px)!important;
    line-height:1.05!important;
    letter-spacing:-.025em!important;
    white-space:nowrap!important;
    text-wrap:nowrap!important;
  }
  html body #wardrobe .product-list em{
    display:block!important;
    min-width:0!important;
    padding-left:44px!important;
    margin:0!important;
    text-align:left!important;
    font-size:clamp(15px,2vw,19px)!important;
    line-height:1.35!important;
    letter-spacing:.02em!important;
    white-space:normal!important;
  }
  html[lang="ru"] body #wardrobe .wardrobe-photo-trigger[data-image*="wardrobe-07.jpg"] > span{
    font-size:clamp(28px,3.5vw,38px)!important;
  }
}

/* =====================================================================
   iPHONE LANDSCAPE — ALL SECTION KICKERS LEFT — 2026-09-03
   Match the current left-aligned 03/Bespoke-style section label across
   sections 01–05. Portrait, iPad and desktop remain untouched.
   ===================================================================== */
@media (orientation:landscape) and (max-height:550px){
  html body #atelier > .section-kicker,
  html body #method > .section-kicker,
  html body #wardrobe > .section-kicker,
  html body #value > .section-kicker,
  html body #journal > .section-kicker{
    display:block!important;
    width:auto!important;
    margin-left:0!important;
    margin-right:auto!important;
    text-align:left!important;
  }
}

/* =====================================================================
   iPHONE LANDSCAPE — SECTION KICKERS ALIGN TO 04 BESPOKE — 2026-09-03
   04 Bespoke is the visual master: 7vw from the left, 10vw from section top.
   Move only the kicker labels; section content/layout remains untouched.
   ===================================================================== */
@media (orientation:landscape) and (max-height:550px){
  html body #atelier > .section-kicker,
  html body #method > .section-kicker,
  html body #wardrobe > .section-kicker,
  html body #value > .section-kicker,
  html body #journal > .section-kicker{
    position:relative!important;
    width:auto!important;
    margin-right:auto!important;
    text-align:left!important;
    transform:none!important;
  }
}

/* On phone-landscape widths that still enter the legacy <=980 mobile branch,
   01/02/05 sit in 24px gutters while Bespoke sits in 7vw. Compensate label only. */
@media (orientation:landscape) and (max-height:550px) and (max-width:980px){
  html body #atelier > .section-kicker,
  html body #method > .section-kicker,
  html body #journal > .section-kicker{
    left:calc(7vw - 24px)!important;
  }
  html body #wardrobe > .section-kicker{
    left:0!important;
  }
  html body #value > .section-kicker{
    left:calc(7vw - 24px)!important;
  }

  /* Match Bespoke's 10vw vertical kicker start without moving section content. */
  html body #atelier > .section-kicker,
  html body #method > .section-kicker,
  html body #journal > .section-kicker{
    top:calc(10vw - 80px)!important;
  }
  html body #wardrobe > .section-kicker{
    top:calc(10vw - 100px)!important;
  }
  html body #value > .section-kicker{
    top:calc(10vw - 92px)!important;
  }
}

/* Above 980px the desktop-family gutters are already 7vw. Only 01 uses
   a 9vw section top while Bespoke/02/03/05 use 10vw, so correct 01 by 1vw. */
@media (orientation:landscape) and (max-height:550px) and (min-width:981px){
  html body #atelier > .section-kicker{
    left:0!important;
    top:1vw!important;
  }
  html body #method > .section-kicker,
  html body #wardrobe > .section-kicker,
  html body #value > .section-kicker,
  html body #journal > .section-kicker{
    left:0!important;
    top:0!important;
  }
}


/* =====================================================================
   iPHONE LANDSCAPE — STORIES 3-UP ROW — 2026-09-03
   Show the three story cards side by side like desktop. Portrait, iPad and
   desktop remain untouched.
   ===================================================================== */
@media (orientation:landscape) and (max-height:550px){
  html body #journal .journal-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    align-items:stretch!important;
    gap:12px!important;
  }
  html body #journal .journal-card,
  html body #journal .journal-card-button{
    min-width:0!important;
    width:100%!important;
  }
}


/* =====================================================================
   iPHONE LANDSCAPE — 03 + 05 OPEN DETAIL HORIZONTAL — 2026-09-03
   Match desktop/iPad-landscape reading logic: image left, copy right.
   The right copy pane is the only scrolling area. Portrait/iPad/desktop
   remain untouched.
   ===================================================================== */
@media (orientation:landscape) and (max-height:550px){
  /* 03 — Personal Wardrobe detail */
  html body .wardrobe-photo-modal{
    padding:10px!important;
    overflow:hidden!important;
  }
  html body .wardrobe-photo-modal .wardrobe-photo-modal-inner{
    width:100%!important;
    height:calc(100dvh - 20px)!important;
    max-height:none!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    overflow:hidden!important;
  }
  html body .wardrobe-photo-modal .wardrobe-photo-image-wrap{
    min-width:0!important;
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
  }
  html body .wardrobe-photo-modal .wardrobe-photo-image{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    object-fit:cover!important;
  }
  html body .wardrobe-photo-modal .wardrobe-photo-caption{
    min-width:0!important;
    min-height:0!important;
    height:100%!important;
    max-height:none!important;
    padding:24px 28px 26px!important;
    justify-content:flex-start!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    box-sizing:border-box!important;
  }
  html body .wardrobe-photo-modal .wardrobe-photo-kicker{
    font-size:9px!important;
  }
  html body .wardrobe-photo-modal .wardrobe-photo-caption .wardrobe-photo-heading{
    margin-top:14px!important;
    font-size:clamp(28px,3.6vw,42px)!important;
    line-height:1!important;
  }
  html body .wardrobe-photo-modal .wardrobe-photo-caption .wardrobe-photo-lead{
    margin-top:16px!important;
    font-size:17px!important;
  }
  html body .wardrobe-photo-modal .wardrobe-photo-caption .wardrobe-photo-body{
    margin-top:14px!important;
  }
  html body .wardrobe-photo-modal .wardrobe-photo-caption .wardrobe-photo-body p:not(.wardrobe-photo-lead){
    font-size:13.5px!important;
    line-height:1.55!important;
    margin-bottom:10px!important;
  }
  html body .wardrobe-photo-close{
    position:absolute!important;
    top:14px!important;
    right:14px!important;
    z-index:20!important;
    pointer-events:auto!important;
    width:38px!important;
    height:38px!important;
    font-size:26px!important;
  }

  /* 05 — Stories detail */
  html body .journal-modal{
    height:100dvh!important;
    max-height:100dvh!important;
    padding:10px!important;
    overflow:hidden!important;
  }
  html body .journal-modal-panel{
    width:100%!important;
    height:calc(100dvh - 20px)!important;
    max-height:none!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    overflow:hidden!important;
  }
  html body .journal-modal-media{
    min-width:0!important;
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
  }
  html body .journal-modal-media img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  html body .journal-modal-content{
    min-width:0!important;
    min-height:0!important;
    height:100%!important;
    max-height:none!important;
    padding:28px 34px 30px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    box-sizing:border-box!important;
  }
  html body .journal-modal-content::after{
    content:none!important;
    display:none!important;
  }
  html body .journal-modal-content .journal-modal-heading{
    margin-top:14px!important;
    font-size:clamp(30px,4vw,46px)!important;
    line-height:1!important;
  }
  html body .journal-modal-lead{
    margin-top:18px!important;
    font-size:16px!important;
    line-height:1.45!important;
  }
  html body .journal-modal-body{
    margin-top:18px!important;
  }
  html body .journal-modal-body p{
    margin-bottom:12px!important;
    font-size:13.5px!important;
    line-height:1.58!important;
  }
  html body .journal-modal-close{
    top:14px!important;
    right:14px!important;
    width:38px!important;
    height:38px!important;
    font-size:28px!important;
  }
}


/* =====================================================================
   iPHONE LANDSCAPE — 05 STORIES SINGLE AUTHORITY — 2026-09-03
   One and only one typography block for Stories cards in phone landscape.
   No later overrides are allowed to re-write these values.
   ===================================================================== */
@media (orientation:landscape) and (max-height:550px){
  /* Width first: use the card width instead of crushing type. */
  html body #journal .journal-card-copy{
    padding-left:6px!important;
    padding-right:6px!important;
  }

  /* Keep every fixed editorial line inside the card. */
  html body #journal .journal-card h3{
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  html body #journal .journal-card h3 .story-line{
    display:inline!important;
    width:auto!important;
    max-width:none!important;
    white-space:nowrap!important;
  }

  /* CZ: same visual size as EN, fixed three-line titles. */
  html[lang="cs"] body #journal .journal-card-button[data-journal-entry] h3{
    font-size:28px!important;
    line-height:1.08!important;
    letter-spacing:normal!important;
  }

  /* IT can use the full EN scale. */
  html[lang="it"] body #journal .journal-card-button[data-journal-entry] h3{
    font-size:28px!important;
    line-height:1.06!important;
    letter-spacing:normal!important;
  }

  /* ES/DE only as small as their longest fixed line requires. */
  html[lang="es"] body #journal .journal-card-button[data-journal-entry] h3{
    font-size:24px!important;
    line-height:1.06!important;
    letter-spacing:normal!important;
  }
  html[lang="de"] body #journal .journal-card-button[data-journal-entry] h3{
    font-size:24px!important;
    line-height:1.06!important;
    letter-spacing:-.01em!important;
  }

  /* RU: one common scale across all three cards. Reduced here directly,
     not by a later override. */
  html[lang="ru"] body #journal .journal-card-button[data-journal-entry] h3{
    font-size:14px!important;
    line-height:1.08!important;
    letter-spacing:-.01em!important;
  }

  /* RU cards 2 + 3 centered without changing their available width. */
  html[lang="ru"] body #journal .journal-card-button[data-journal-entry="shirts"] .journal-card-copy,
  html[lang="ru"] body #journal .journal-card-button[data-journal-entry="suit"] .journal-card-copy{
    align-items:stretch!important;
    text-align:center!important;
  }
  html[lang="ru"] body #journal .journal-card-button[data-journal-entry="shirts"] h3,
  html[lang="ru"] body #journal .journal-card-button[data-journal-entry="suit"] h3,
  html[lang="ru"] body #journal .journal-card-button[data-journal-entry="shirts"] .meta,
  html[lang="ru"] body #journal .journal-card-button[data-journal-entry="suit"] .meta,
  html[lang="ru"] body #journal .journal-card-button[data-journal-entry="shirts"] .journal-read,
  html[lang="ru"] body #journal .journal-card-button[data-journal-entry="suit"] .journal-read{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    text-align:center!important;
  }
}

/* =====================================================================
   06 APPOINTMENT — framed icon contacts + international atelier address — 2026-09-07
   ===================================================================== */
#appointment .contact-lines{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:18px!important;
  width:100%!important;
  margin-top:40px!important;
}
#appointment .contact-icons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(22px,3vw,34px);
}
#appointment .contact-icon{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid var(--gold)!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--gold)!important;
  box-shadow:none!important;
  transform:none;
  transition:background-color .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease), transform .18s var(--ease), box-shadow .24s var(--ease)!important;
}
#appointment .contact-icon svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#appointment .contact-icon .contact-icon-dot{
  fill:currentColor;
  stroke:none;
}
#appointment .contact-icon:hover,
#appointment .contact-icon:focus-visible{
  color:#0b0b0b!important;
  background:var(--gold)!important;
  border-color:var(--gold)!important;
  transform:translateY(-2px)!important;
  box-shadow:0 8px 18px rgba(185,147,74,.18)!important;
}
#appointment .contact-icon:active{
  transform:translateY(0) scale(.96)!important;
}
#appointment .contact-icon:focus-visible,
#appointment .contact-address:focus-visible{
  outline:1px solid var(--gold)!important;
  outline-offset:5px!important;
}
#appointment .contact-address{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  width:auto!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--gold)!important;
  box-shadow:none!important;
  font-size:13px!important;
  line-height:1.45!important;
  letter-spacing:.08em!important;
  text-transform:none!important;
  white-space:nowrap!important;
  transition:color .22s var(--ease), opacity .22s var(--ease)!important;
}
#appointment .contact-address svg{
  width:17px;
  height:17px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#appointment .contact-address:hover,
#appointment .contact-address:focus-visible{
  color:#d3b36c!important;
  background:transparent!important;
  transform:none!important;
  box-shadow:none!important;
}
@media (max-width:600px){
  #appointment .contact-lines{gap:16px!important;margin-top:34px!important;}
  #appointment .contact-icons{gap:20px;}
  #appointment .contact-icon{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;}
  #appointment .contact-icon svg{width:22px;height:22px;}
  #appointment .contact-address{font-size:12px!important;letter-spacing:.07em!important;white-space:normal!important;max-width:100%!important;text-align:center!important;}
  #appointment .contact-address span{text-align:center;}
}
@media (max-width:980px) and (max-height:500px) and (orientation:landscape){
  #appointment .contact-lines{flex-direction:column!important;gap:11px!important;margin-top:24px!important;}
  #appointment .contact-icons{gap:18px!important;}
  #appointment .contact-icon{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;}
  #appointment .contact-icon svg{width:20px;height:20px;}
  #appointment .contact-address{font-size:11px!important;}
}


/* =====================================================================
   SEO SEMANTIC DOM CLEANUP — 2026-09-10
   One textual source per heading/copy block. Responsive line breaks remain
   purely presentational, so crawlers no longer receive duplicated wording.
   ===================================================================== */
.seo-semantic-heading{white-space:nowrap;}
.seo-semantic-heading .seo-token{display:inline!important;}
.seo-br-mobile,.seo-br-phone,.seo-br-portrait{display:none;}
.seo-br-desktop,.seo-br-nonportrait{display:inline;}

@media (max-width:980px){
  .seo-br-desktop{display:none;}
  .seo-br-mobile{display:inline;}
  #method .method-title-desktop.seo-method-title{
    display:block!important;
    font-size:clamp(44px,11vw,66px)!important;
    line-height:.96!important;
    margin-top:34px!important;
    text-align:center!important;
    max-width:100%!important;
  }
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) #method .seo-method-title{
    font-size:clamp(40px,10.2vw,58px)!important;
  }
  #atelier .seo-generic-last{
    white-space:nowrap!important;
    font-size:.94em!important;
    letter-spacing:-.045em!important;
  }
  html[lang="cs"] #atelier .seo-generic-last{font-size:.95em!important;letter-spacing:-.05em!important;}
  html[lang="en"] #atelier .seo-generic-last{font-size:1em!important;letter-spacing:-.045em!important;}
  html:is([lang="de"],[lang="it"],[lang="es"],[lang="ru"]) #atelier .seo-generic-last{
    font-size:.84em!important;
    letter-spacing:-.05em!important;
  }
}

@media (max-width:420px){
  html[lang="en"] #atelier .seo-generic-last{font-size:.92em!important;}
}

/* iPad portrait deliberately follows the approved desktop/editorial line rhythm. */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  .seo-br-desktop{display:inline!important;}
  .seo-br-mobile,.seo-br-phone{display:none!important;}
  #method .method-title-desktop.seo-method-title{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
    font-size:clamp(42px,6.15vw,62px)!important;
    line-height:1!important;
    letter-spacing:-.03em!important;
  }
  html[lang="de"] #method .method-title-desktop.seo-method-title{
    max-width:none!important;
    font-size:clamp(36px,5.45vw,54px)!important;
    line-height:1.02!important;
  }
  #atelier .seo-generic-last{font-size:inherit!important;letter-spacing:inherit!important;}
}

/* Exact iPhone portrait alternatives that previously required duplicate headings. */
@media (max-width:480px) and (orientation:portrait){
  .seo-has-phone-lines .seo-br-mobile{display:none!important;}
  .seo-has-phone-lines .seo-br-phone{display:inline!important;}
  html[lang="de"] #method .seo-method-title{
    font-size:clamp(28px,7.7vw,33px)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
  }
  html[lang="ru"] #method .seo-method-title{
    font-size:clamp(36px,9.4vw,52px)!important;
    line-height:.98!important;
  }

  /* Cancel generic last-line scaling where a word moves to the prior phone line. */
  html:is([lang="de"],[lang="es"],[lang="ru"]) #atelier .seo-phone-line-1,
  html:is([lang="de"],[lang="es"],[lang="ru"]) #atelier .seo-phone-line-2,
  html:is([lang="de"],[lang="es"],[lang="ru"]) #atelier .seo-phone-line-3{
    font-size:1em!important;
    letter-spacing:inherit!important;
  }
  html[lang="de"] #atelier .seo-phone-line-4{font-size:.76em!important;letter-spacing:-.04em!important;}
  html[lang="it"] #atelier .seo-phone-line-2{font-size:.88em!important;}
  html[lang="it"] #atelier .seo-phone-line-3{font-size:.84em!important;letter-spacing:-.05em!important;}
  html[lang="es"] #atelier .seo-phone-line-4{font-size:.78em!important;letter-spacing:-.045em!important;}
  html[lang="ru"] #atelier .seo-phone-line-1{font-size:.94em!important;}
  html[lang="ru"] #atelier .seo-phone-line-4{font-size:.84em!important;letter-spacing:-.05em!important;}
}

/* Section 04 body copy keeps the approved phone-portrait line rhythm without duplicate spans. */
@media (max-width:699px) and (orientation:portrait){
  #value .seo-br-nonportrait{display:none!important;}
  #value .seo-br-portrait{display:inline!important;}
}

/* Runtime modal headings: same visual styling, no empty H2/H3 in source outline. */
.journal-modal-content .journal-modal-heading{
  font-family:var(--serif);
  font-weight:400;
  margin:0;
}
.wardrobe-photo-caption .wardrobe-photo-heading{
  font-family:var(--serif);
  font-weight:400;
  margin:0;
}

/* =====================================================================
   02 — ONE SEMANTIC H2 / ROBUST RESPONSIVE LINES — 2026-09-10
   Three logical desktop+iPad lines are real span rows, not duplicate text.
   On phone/tablet-mobile layouts the spans become transparent containers
   and the existing mobile/phone BRs preserve the approved narrow layout.
   ===================================================================== */
#method .seo-method-title > .seo-method-line{
  display:block;
  white-space:nowrap;
}

@media (max-width:980px){
  #method .seo-method-title > .seo-method-line{
    display:contents;
  }
}

@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  #method .seo-method-title > .seo-method-line{
    display:block!important;
    white-space:nowrap!important;
  }
  #method .seo-method-title .seo-br-mobile,
  #method .seo-method-title .seo-br-phone{
    display:none!important;
  }
}