@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/cormorant-garamond-cyrillic-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/cormorant-garamond-cyrillic-500-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/cormorant-garamond-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/cormorant-garamond-cyrillic-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/cormorant-garamond-cyrillic-600-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/cormorant-garamond-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/cormorant-garamond-cyrillic-ext-500-italic.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/cormorant-garamond-cyrillic-500-italic.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/cormorant-garamond-latin-ext-500-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/cormorant-garamond-cyrillic-ext-600-italic.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/cormorant-garamond-cyrillic-600-italic.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/cormorant-garamond-latin-ext-600-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/cormorant-garamond-latin-600-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/manrope-cyrillic-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/manrope-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/manrope-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/manrope-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/manrope-cyrillic-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/manrope-cyrillic-600-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/manrope-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/manrope-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/manrope-cyrillic-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/manrope-cyrillic-700-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/manrope-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/manrope-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(../fonts/manrope-cyrillic-ext-800-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(../fonts/manrope-cyrillic-800-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(../fonts/manrope-latin-ext-800-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(../fonts/manrope-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ODA Optika — site styles. Desktop follows the 1440 mock-up; phones get their own layout below. */
:root {
  --red: #991B23; --red-d: #7A141B; --cream: #F4EEE6; --sand: #ECE4D8; --paper: #FBF8F4; --ink: #1B1715;
  --mute: #6B635B; --line: #E3DAD0; --line2: #D5CCC1; --white: #FFFFFF; --rose: #F0D9D3;
  --r-s: 10px; --r-m: 18px; --r-l: 24px;
  --gut: clamp(20px, 3.4vw, 40px); --maxw: 1200px; --hdr: 84px;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } * { transition: none !important } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased }
img { display: block; max-width: 100%; height: auto }
a { color: var(--red) }
h1, h2, h3, p { margin: 0 }
.wrap { width: min(var(--maxw), 100% - 2 * var(--gut)); margin-inline: auto }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-s) }
.skip:focus { left: 8px }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px }
section[id] { scroll-margin-top: calc(var(--hdr) + 12px) }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: var(--r-s); font: 700 15px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, border-color .2s }
.btn svg { width: 18px; height: 18px; flex-shrink: 0 }
.btn-red { background: var(--red); color: var(--paper) } .btn-red:hover { background: var(--red-d); color: var(--paper) }
.btn-line { border: 1px solid var(--ink); color: var(--ink) } .btn-line:hover { background: var(--ink); color: var(--paper) }
.btn-cream { background: var(--cream); color: var(--red) } .btn-cream:hover { background: #fff; color: var(--red) }
.btn-sm { height: 44px; padding: 0 18px; font-size: 14px }
.btn-sm svg { width: 16px; height: 16px }

/* header */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(251, 248, 244, .94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line) }
.hdr .wrap { height: var(--hdr); display: flex; align-items: center; justify-content: space-between; gap: 20px }
.logo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; color: var(--red); flex-shrink: 0 }
.logo-w { display: flex; align-items: baseline; gap: 1px; font: 600 40px/1 var(--serif); letter-spacing: .04em }
.logo-w svg { width: 28px; height: 28px; flex-shrink: 0 }
.logo-o { font-size: 7.5px; font-weight: 700; letter-spacing: .55em; color: var(--ink); margin-left: 2px }
.nav { display: flex; gap: 22px }
.nav a { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap }
.nav a:hover { color: var(--red) }
.hdr-r { display: flex; align-items: center; gap: 12px }
.lang { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-s); font-size: 13px; font-weight: 700 }
.lang a { padding: 7px 10px; border-radius: 7px; color: var(--mute); text-decoration: none; line-height: 1 }
.lang a[aria-current] { background: var(--red); color: var(--paper) }
.lang a:not([aria-current]):hover { color: var(--ink); background: var(--cream) }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-s); background: transparent; color: var(--ink); align-items: center; justify-content: center; cursor: pointer; padding: 0 }
.burger svg { width: 22px; height: 22px }

/* mobile menu */
.menu { position: fixed; inset: 0; z-index: 70; background: var(--paper); display: flex; flex-direction: column; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom) }
.menu[hidden] { display: none }
.menu-top .lang { margin-left: auto }
.menu-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 64px; padding: 0 20px; border-bottom: 1px solid var(--line) }
.menu nav { display: flex; flex-direction: column; padding: 12px 20px 8px }
.menu nav a { font: 600 34px/1.1 var(--serif); color: var(--ink); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--line) }
.menu nav a:active { color: var(--red) }
.menu-calls { display: grid; gap: 10px; padding: 20px }
.menu-call { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: var(--r-m); background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--ink) }
.menu-call b { display: block; font-size: 16px } .menu-call > span > span { font-size: 14px; color: var(--mute) }
.menu-call i { width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: var(--paper); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.menu-call i svg { width: 20px; height: 20px }
.menu-soc { display: flex; gap: 18px; padding: 4px 20px 28px; font-weight: 700; font-size: 15px }
.menu-soc a { color: var(--ink); text-decoration: none }
body.menu-open { overflow: hidden }

/* hero */
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; padding-block: 72px 80px }
.hero-t { display: flex; flex-direction: column; gap: 26px }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .24em; color: var(--red); text-transform: uppercase }
.hero h1 { font: 600 clamp(48px, 6.4vw, 92px)/.98 var(--serif); letter-spacing: -.01em }
.hero h1 em { color: var(--red) }
.hero-lead { max-width: 500px; font-size: 19px; line-height: 1.55; color: var(--mute) }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px }
.trust { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; color: #3E3833 }
.trust li { display: flex; align-items: center; gap: 8px }
.trust li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0 }
.hero-ph { position: relative; height: 540px; border-radius: var(--r-l); overflow: hidden; background: #D9CFC2 }
.hero-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18% }
.ring { position: absolute; top: -70px; right: -70px; width: 300px; height: 300px; border-radius: 50%; border: 10px solid var(--red); pointer-events: none }

/* sections */
.sec { padding-block: 96px }
.sec-tint { background: var(--cream) }
.sh { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 36px }
.sh h2, .h2 { font: 600 clamp(34px, 4vw, 48px)/1.04 var(--serif) }
.more { font-size: 14px; font-weight: 700; text-decoration: none; color: var(--red); white-space: nowrap }
.more:hover { text-decoration: underline; text-underline-offset: 4px }
.note { margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--mute) }

/* offers */
.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.offer { min-height: 270px; padding: 32px; border-radius: var(--r-m); background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px }
.offer-k { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--red) }
.offer h3 { font: 600 38px/1.05 var(--serif) }
.offer p { font-size: 16px; color: var(--mute) }
.offer a { margin-top: auto; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--red) }
.offer.red { background: var(--red); border-color: var(--red); color: var(--cream) }
.offer.red .offer-k, .offer.red p { color: var(--rose) }
.offer.red a { color: var(--paper) }
.offer a:hover { text-decoration: underline; text-underline-offset: 4px }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none }
.step { background: var(--white); border-radius: var(--r-m); padding: 28px; display: flex; flex-direction: column; gap: 10px }
.step-n { font: 600 52px/1 var(--serif); color: var(--red) }
.step h3 { font-size: 19px; font-weight: 700 }
.step p { font-size: 15px; line-height: 1.55; color: var(--mute) }

/* products */
.prods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px }
.prod { display: flex; flex-direction: column; gap: 8px }
.prod-ph { height: 230px; border-radius: 16px; background: var(--cream); display: flex; align-items: center; justify-content: center; margin-bottom: 8px }
.prod:nth-child(even) .prod-ph { background: var(--sand) }
.prod-ph img { width: 84%; height: 72%; object-fit: contain }
.prod-b { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--mute) }
.prod-m { font-size: 18px; font-weight: 700 }
.prod-p { font: 600 28px/1.1 var(--serif); color: var(--red) }

/* rodenstock panel */
.rod { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 580px; border-radius: var(--r-l); overflow: hidden }
.rod-t { padding: 72px 64px; background: var(--red); color: var(--cream); display: flex; flex-direction: column; justify-content: center; gap: 24px }
.rod-t .eyebrow { color: var(--rose) }
.rod-t h2 { font: 600 48px/1.04 var(--serif) }
.rod-t p { max-width: 520px; font-size: 17px; line-height: 1.6; color: #F4E6E1 }
.rod-t .btn { align-self: flex-start }
.rod-ph { position: relative; background: var(--cream); display: flex; align-items: center; justify-content: center; padding: 40px 0 60px }
.rod-ph img { width: 78% }
.rod-cap { position: absolute; left: 28px; bottom: 26px; right: 28px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--mute) }

/* b2b */
.b2b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center }
.b2b-t { display: flex; flex-direction: column; gap: 20px }
.b2b-t p { font-size: 16px; line-height: 1.6; color: var(--mute) }
.b2b-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m); padding: 36px; display: flex; flex-direction: column; gap: 18px }
.b2b-box ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px }
.b2b-box li { display: flex; align-items: center; gap: 14px; font-size: 17px }
.b2b-box li svg { width: 22px; height: 22px; flex-shrink: 0 }
.b2b-box .btn { align-self: flex-start; margin-top: 8px }

/* stores */
.stores-lead { font-size: 17px; color: var(--mute); margin: -20px 0 32px }
.stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px }
.store { display: grid; grid-template-columns: 300px minmax(0, 1fr); background: var(--white); border-radius: var(--r-m); overflow: hidden; min-height: 300px }
.store-ph { position: relative; background: #D9CFC2; min-height: 300px }
.store-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.store-i { padding: 30px; display: flex; flex-direction: column; gap: 10px }
.store-i h3 { font: 600 34px/1 var(--serif) }
.addr { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px }
.addr:hover { text-decoration-color: var(--red) }
.addr svg { width: 17px; height: 17px; flex-shrink: 0 }
.hours { font-size: 15px; line-height: 1.6; color: var(--mute) }
.tel { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none }
.tel svg { width: 16px; height: 16px }
.store-b { display: flex; gap: 10px; margin-top: auto; padding-top: 6px }

/* reviews */
.rate { font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap }
.rate:hover { color: var(--red) }
.revs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.rev { margin: 0; min-height: 200px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m); padding: 30px; display: flex; flex-direction: column; gap: 14px }
.stars { color: var(--red); font-size: 16px; letter-spacing: .1em }
.rev blockquote { margin: 0; font: italic 500 22px/1.35 var(--serif) }
.rev figcaption { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--mute) }

/* footer */
.ftr { background: var(--ink); color: #E9E1D6; padding: 64px 0 40px }
.ftr a { color: #E9E1D6; text-decoration: none } .ftr a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px }
.ftr-g { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px }
.ftr-c { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5 }
.ftr-k { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #B5ABA0 }
.ftr .logo-w { color: var(--cream); font-size: 44px } .ftr .logo-w svg { width: 31px; height: 31px }
.ftr-tag { font-size: 14px; color: #B5ABA0; margin-bottom: 6px }
.lang-f a[aria-current] { color: #fff; font-weight: 700 }
.ftr-b { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; border-top: 1px solid #3A332F; padding-top: 20px; font-size: 13px; color: #B5ABA0 }
.ftr-b > div { display: flex; flex-wrap: wrap; gap: 4px 16px }

/* bottom action bar (phones) */
.bar { display: none }

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1180px) {
  .nav { display: none }
  .burger { display: inline-flex }
  .stores { grid-template-columns: 1fr }
}
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; padding-block: 40px 56px }
  .hero-ph { height: auto; aspect-ratio: 4 / 5; max-height: 620px }
  .offer { padding: 26px } .offer h3 { font-size: 32px }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .prods { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .rod { grid-template-columns: 1fr }
  .rod-ph { order: -1; min-height: 280px }
  .b2b { grid-template-columns: 1fr; gap: 28px }
  .revs { grid-template-columns: 1fr }
  .ftr-g { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .ftr-brand { grid-column: 1 / -1 }
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 760px) {
  :root { --hdr: 64px }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)) }
  .hdr .wrap { gap: 10px }
  .logo-w { font-size: 34px } .logo-w svg { width: 24px; height: 24px } .logo-o { font-size: 6.5px }
  .hdr-call, .hdr-book { display: none }
  .lang a { padding: 7px 8px }

  .hero .wrap { padding-block: 28px 44px; gap: 28px }
  .hero-t { gap: 18px }
  .hero h1 { font-size: clamp(44px, 12.4vw, 60px) }
  .hero-lead { font-size: 17px }
  .hero-ctas { flex-direction: column; gap: 10px }
  .hero-ctas .btn { width: 100% }
  .trust { flex-direction: column; gap: 8px; margin-top: 8px }
  .hero-ph { border-radius: 20px; aspect-ratio: 4 / 4.6 }
  .ring { width: 180px; height: 180px; border-width: 7px; top: -46px; right: -46px }

  .sec { padding-block: 56px }
  .sh { margin-bottom: 22px; flex-wrap: wrap; align-items: baseline }
  .more { white-space: normal }
  .sh h2, .h2 { font-size: 36px }

  /* swipe rows: one card in view, the next one peeking */
  .swipe { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); scrollbar-width: none; -webkit-overflow-scrolling: touch }
  .swipe::-webkit-scrollbar { display: none }
  .swipe > * { scroll-snap-align: start }
  .offer { min-height: 230px; padding: 24px; gap: 10px }
  .offer h3 { font-size: 32px }

  .steps { gap: 10px }
  .step { padding: 18px; gap: 6px; border-radius: 16px }
  .step-n { font-size: 38px }
  .step h3 { font-size: 16px }
  .step p { font-size: 14px; line-height: 1.45 }

  .prods { gap: 12px 10px }
  .prod { gap: 4px }
  .prod-ph { height: 150px; border-radius: 14px; margin-bottom: 6px }
  .prod-b { font-size: 10.5px; letter-spacing: .12em }
  .prod-m { font-size: 15px }
  .prod-p { font-size: 23px }

  .rod { border-radius: 20px; min-height: 0 }
  .rod-ph { min-height: 230px; padding: 24px 0 44px }
  .rod-ph img { width: 82% }
  .rod-cap { left: 18px; bottom: 16px; font-size: 10.5px }
  .rod-t { padding: 32px 22px 36px; gap: 18px }
  .rod-t h2 { font-size: 36px }
  .rod-t p { font-size: 16px }
  .rod-t .btn { align-self: stretch }

  .b2b-box { padding: 22px; gap: 14px }
  .b2b-box ul { gap: 14px }
  .b2b-box li { font-size: 16px; align-items: flex-start }
  .b2b-box .btn { align-self: stretch }

  .stores-lead { font-size: 16px; margin: -10px 0 22px }
  .stores { gap: 14px }
  .store { grid-template-columns: 1fr; min-height: 0; border-radius: 20px }
  .store-ph { min-height: 0; aspect-ratio: 16 / 10 }
  .store-i { padding: 22px; gap: 8px }
  .store-i h3 { font-size: 30px }
  .store-b { padding-top: 10px }
  .store-b .btn { flex: 1; height: 50px }

  .sh-rev { flex-direction: column; align-items: flex-start; gap: 10px }
  .rev { padding: 22px; min-height: 0 }
  .rev blockquote { font-size: 20px }

  .ftr { padding: 44px 0 28px }
  .ftr-g { grid-template-columns: 1fr 1fr; gap: 28px 20px }
  .ftr-b { flex-direction: column; margin-top: 32px }

  .bar { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(251, 248, 244, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line) }
  .bar .btn { height: 52px; border-radius: 12px; padding: 0 12px; width: 100% }
}
@media (max-width: 380px) {
  .lang a { padding: 7px 6px }
  .steps { grid-template-columns: 1fr }
}