/* =====================================================================
   Salón Rubia — stylesheet
   1. Tokens          6. Sections & cards     11. Price list
   2. Reset & base    7. Split layouts        12. Contact & form
   3. Buttons         8. Photo slots          13. Map
   4. Header          9. Reviews              14. Footer & utilities
   5. Hero           10. CTA band             15. Motion

   Sections 1–15 are the desktop design and are written unconditionally.
   16 and 17 are the responsive layer: nothing in them applies at 1200px
   and over, so widening the window always lands back on 1–15 exactly.

  16. Mobile nav (burger + drawer)   17. Breakpoints
   ===================================================================== */

/* ------------------------------------------------------------ 1. TOKENS */
:root{
  --paper:#FDFBF9;
  --paper-2:#FAF4F0;
  --cream:#F8F1EB;
  --blush:#F2E7E4;
  --blush-2:#E8D5D1;

  --ink:#1D1613;
  --ink-2:#4B3F3A;
  --ink-3:#82736C;
  --ink-4:#A79790;

  --line:#EDE3DC;
  --line-2:#F4ECE6;

  --red:#7A1E28;
  --red-dark:#571620;
  --red-light:#A8434B;
  --red-tint:#F1E6E4;

  --white:#FFFFFF;

  /* --sh-0 is the resting twin of the three shadows below: same shape,
     zero size, fully transparent. Cards rest on it so the hover shadow
     has something to interpolate *from* and grows in smoothly. */
  --sh-0:0 0 0 0 rgba(85,45,38,0);
  --sh-s:0 2px 8px 0 rgba(85,45,38,.05);
  --sh-m:0 16px 34px -16px rgba(85,45,38,.20);
  --sh-l:0 38px 70px -30px rgba(85,45,38,.28);

  /* Gap above the "Cena a dĺžka ošetrenia" link in the mesotherapy block. */
  --meso-cta-space:30px;

  --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:34px; --r-pill:999px;

  /* Font pack. Every type decision that has to move when the pair changes
     lives here: the two families, the three display weights and the body
     size, because a serif's 600 is not another serif's 600. */
  --ff-display:'Fraunces',Georgia,'Times New Roman',serif;
  --ff-body:'DM Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --fw-h:400;      /* h1–h4 */
  --fw-hero:300;   /* the two oversized hero titles */
  --fw-num:500;    /* prices, counters, ratings set in the display face */
  --fs-body:16px;

  --wrap:1200px;
  --gutter:96px;  /* total side margin .wrap leaves; narrows per breakpoint */
  --sec-pad:112px;/* vertical padding of a .section; narrows per breakpoint */
  --cta-pad:96px; /* the same for the red CTA band */
  /* Height of the wave that tops the footer. It hangs above the footer and
     covers that much of the section before it, so the last section on every
     page adds it back as padding. */
  --wave-h:56px;
  --hh:94px;      /* header height at the top of the page */
  --hh-stuck:78px;/* header height once the page is scrolled */
  --ease:cubic-bezier(.22,.68,.24,1);
  --ease-out:cubic-bezier(.16,.84,.32,1);
}

/* -------------------------------------------------------- 2. RESET/BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  font-weight:300;
  line-height:1.72;
  /* Fraunces is a variable face; SOFT rounds the terminals. Unknown axes
     are ignored, so the body font is unaffected by it inheriting. */
  font-variation-settings:'SOFT' 30;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* 1.16 rather than 1.05: Slovak stacks carons and acutes above the cap
   height, and a tighter leading makes them collide with the line above. */
h1,h2,h3,h4{margin:0;font-family:var(--ff-display);font-weight:var(--fw-h);color:var(--ink);line-height:1.16;letter-spacing:-.01em}

/* Some display faces default to old-style figures, so "01" reads as "OI" and
   "17" as "I7". Force lining, tabular digits wherever numbers matter. */
.stat-num,.card-num,.card-price strong,.pi-price,.pricecard-price,
.passcard-credit,.pricegroup-count,.footer-phone,.infocard-strong,.cta-phone,
.hours-time,.ratingcard-num,.ratingcard-count strong{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}

/* The I-beam belongs to fields you type into, nowhere else. `body` sets the
   arrow as the site-wide default; the two rules under it hand the caret back
   to real text fields and the hand back to anything clickable. Anchors and
   buttons carry their own UA `cursor:pointer`, which beats an inherited
   value, but they are listed anyway so the intent survives future edits. */
body{cursor:default}
input:not([type]),input[type="text"],input[type="search"],input[type="email"],
input[type="tel"],input[type="url"],input[type="password"],input[type="number"],
input[type="date"],input[type="time"],textarea,[contenteditable="true"]{cursor:text}
a[href],button,summary,select,label.check,
input[type="checkbox"],input[type="radio"],input[type="submit"],
input[type="button"],input[type="reset"],input[type="file"],
input[type="range"],input[type="color"]{cursor:pointer}
:disabled,[aria-disabled="true"]{cursor:default}

/* Mobilné prehliadače (Chrome na Androide, Safari na iOSe) preblysnú nad
   klepnutým prvkom modrý obdĺžnik. Vlastnosť sa dedí, takže jeden zápis na
   <html> ju vypne v celej stránke — spätnú väzbu na dotyk už dávajú vlastné
   :hover / :active štýly. */
html{-webkit-tap-highlight-color:transparent}

/* Klepnutie na ovládací prvok (burger, tlačidlá vo formulári) občas spustí aj
   výber textu a popisok ostane modro zvýraznený. Nad ovládačmi výber
   vypíname; bežný text stránky ostáva označiteľný a kopírovateľný. */
button,summary,[role="button"],label.check,
input[type="checkbox"],input[type="radio"],input[type="submit"],
input[type="button"],input[type="reset"]{-webkit-user-select:none;user-select:none}

::selection{background:var(--red);color:#fff}

:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:#E3D2CB;border:3px solid var(--paper-2);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#D2B9B1}

.wrap{width:min(var(--wrap),calc(100% - var(--gutter)));margin-inline:auto}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--red);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-s) 0;
}
.skip-link:focus{left:0}

.ico{flex:none;overflow:visible}
.ico-sm{width:16px;height:16px}
.ico-star{color:#E8A33D}

/* Typography helpers */
.h2{font-size:47px;letter-spacing:-.018em}
.h3{font-size:31px}
.h2 em,.h3 em,.hero-title em,.pagehero-title em{
  font-style:italic;color:var(--red);
}
.eyebrow{
  margin:0 0 14px;font-size:12px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--red);
}
.eyebrow-line{display:flex;align-items:center;gap:14px}
.eyebrow-line::after{content:"";height:1px;width:56px;background:linear-gradient(90deg,var(--red),transparent)}
.eyebrow-center{text-align:center}
.divider{display:flex;justify-content:center;color:var(--red);margin:22px 0}
.divider-art{opacity:.8}

.section{padding:var(--sec-pad) 0;position:relative}
.section-head{max-width:660px;margin:0 auto 62px;text-align:center}
.section-head .eyebrow{display:block}
.section-lead{color:var(--ink-3);font-size:17.5px;margin:0}
.section-lead-left{max-width:520px}
.section-head-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:48px;
  max-width:none;text-align:left;margin-bottom:48px;
}
.section-head-row .eyebrow-line::after{width:40px}

/* ----------------------------------------------------------- 3. BUTTONS */
.btn{
  --bg:var(--red);--fg:#fff;--bd:var(--red);
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:var(--r-pill);
  font-size:14.5px;font-weight:500;letter-spacing:.06em;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  overflow:hidden;isolation:isolate;
  transition:transform .52s var(--ease),box-shadow .52s var(--ease-out),
             background-color .52s var(--ease),color .52s var(--ease),border-color .52s var(--ease);
}
.btn > *{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.32) 48%,transparent 76%);
  transform:translateX(-120%);
}
.btn:hover::before{transform:translateX(120%);transition:transform 1.28s var(--ease)}
.btn .ico{transition:transform .52s var(--ease)}
.btn:hover .ico{transform:translateX(4px)}
/* The hero "Objednať sa" button: the button moves, its phone icon does not. */
.btn-ico-static .ico,.btn-ico-static:hover .ico{transform:none;transition:none}

.btn-primary{box-shadow:0 12px 24px -12px rgba(122,30,40,.65)}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-2px);box-shadow:0 18px 32px -12px rgba(122,30,40,.6)}

.btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
.btn-ghost:hover{--bd:var(--red);--fg:var(--red);background:var(--red-tint);transform:translateY(-2px)}

.btn-outline{--bg:transparent;--fg:var(--red);--bd:#D8BFB9}
.btn-outline:hover{--bg:var(--red);--fg:#fff;--bd:var(--red);transform:translateY(-2px)}

.btn-light{--bg:#fff;--fg:var(--red);--bd:#fff;box-shadow:0 14px 30px -14px rgba(87,22,32,.5)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 20px 38px -14px rgba(87,22,32,.5)}

.btn-sm{padding:11px 20px;font-size:13.5px}
.btn-block{width:100%;justify-content:center;padding-block:17px}
.btn[disabled]{opacity:.6;pointer-events:none}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--red);
}
.link-arrow span{position:relative}
.link-arrow span::after{
  content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .6s var(--ease);
}
.link-arrow:hover span::after{transform:scaleX(1);transform-origin:left}
.link-arrow .ico{transition:transform .52s var(--ease)}
.link-arrow:hover .ico{transform:translateX(5px)}
.link-arrow-lg{font-size:15px;margin-top:var(--meso-cta-space)}

/* ------------------------------------------------------------ 4. HEADER */
.site-header{
  position:sticky;top:0;z-index:55;
  background:rgba(253,251,249,.86);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .6s var(--ease-out),border-color .6s var(--ease),background-color .6s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 10px 30px -20px rgba(85,45,38,.4)}
.header-in{display:flex;align-items:center;gap:40px;height:var(--hh);transition:height .6s var(--ease)}
.site-header.is-stuck .header-in{height:var(--hh-stuck)}

.brand{display:flex;align-items:center;margin-right:auto}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{
  font-family:var(--ff-display);font-size:25px;font-weight:var(--fw-num);color:var(--ink);letter-spacing:.005em;
  transition:color .45s var(--ease);
}
.brand-sub{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4)}
.site-header .brand:hover .brand-name,
.site-header .brand:focus-visible .brand-name{color:var(--red)}

.mainnav{display:flex;align-items:center;gap:34px}
.navlink{
  position:relative;font-size:14px;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);padding:6px 0;
  transition:color .45s var(--ease);
}
/* A whole-pixel height: at 1.5px the browser rasterises the line one way
   while the transform is running and another once it settles, which reads
   as the underline getting thinner at the end of the sweep. */
.navlink::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:right;
  transition:transform .68s var(--ease);
}
.navlink:hover{color:var(--red)}
.navlink:hover::after{transform:scaleX(1);transform-origin:left}
.navlink.is-active{color:var(--red)}
.navlink.is-active::after{transform:scaleX(1)}

/* Phone + language switch: what used to sit in the dark strip above the
   header. `margin-left:auto` is on .brand, so this cluster and the CTA
   ride along on the right edge. */
.header-tools{display:flex;align-items:center;gap:18px;flex:none}
.header-sep{width:1px;height:20px;background:var(--line)}

.header-phone{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;letter-spacing:.04em;color:var(--ink-2);
  transition:color .45s var(--ease);
}
.header-phone strong{font-weight:500;letter-spacing:.06em}
.header-phone .ico{color:var(--red);opacity:.7;transition:opacity .45s var(--ease)}
.header-phone:hover{color:var(--red)}
.header-phone:hover .ico{opacity:1}

/* A segmented pill rather than "SK / EN": on the pale header the active
   language needs a shape of its own, otherwise the two read as one word. */
.langswitch{
  display:inline-flex;align-items:center;gap:2px;padding:3px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-pill);
}
.lang-opt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:26px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:500;letter-spacing:.12em;color:var(--ink-4);
  transition:color .45s var(--ease),background-color .45s var(--ease),box-shadow .45s var(--ease);
}
.lang-opt:hover{color:var(--red)}
.lang-opt.is-active{background:var(--white);color:var(--red);box-shadow:var(--sh-s)}

/* -------------------------------------------------------------- 5. HERO */
.hero{position:relative;padding:64px 0 96px;overflow:hidden}
/* Radial gradients rather than blurred circles: they fade to nothing
   inside the section, so `overflow:hidden` never leaves a hard edge. */
.hero-blob{position:absolute;inset:0;pointer-events:none}
.hero-blob-a{background:radial-gradient(640px 580px at 76% 26%,rgba(214,188,178,.5),rgba(214,188,178,0) 68%)}
.hero-blob-b{background:radial-gradient(520px 460px at 2% 92%,rgba(247,230,216,.7),rgba(247,230,216,0) 70%)}
/* guarantees the washes melt into the page instead of stopping at the clip */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:180px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(253,251,249,0),var(--paper))
}

.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}

/* The title opens the page on its own: the eyebrow and the opening-hours
   light that used to sit above it are gone, so nothing stands between the
   top of the column and the first line of type. */
.hero-title{font-size:76px;font-weight:var(--fw-hero);line-height:1.14;letter-spacing:-.024em;margin:0 0 26px}
.hero-lead{font-size:18.5px;color:var(--ink-3);max-width:490px;margin:0 0 34px}
.hero-actions{display:flex;align-items:center;gap:16px;margin-bottom:52px}

.hero-stats{display:flex;align-items:center;gap:30px}
.stat{display:flex;flex-direction:column;gap:2px}
.stat-num{font-family:var(--ff-display);font-size:38px;font-weight:var(--fw-num);color:var(--ink);line-height:1}
.stat-num-rating{display:inline-flex;align-items:center;gap:7px}
/* The star icon ships solid; here it is drawn as an outline in the ink colour
   so its line weight reads the same as the "+" suffix on the stat beside it.
   Rendered at 22px from a 24 viewBox, so 2.4 units land at ~2.2px on screen. */
.stat-star{margin-top:-3px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.stat-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.stat-sep{width:1px;height:40px;background:var(--line)}

/* Three cards used to hover over the photograph. They said what the stats
   row now says, and every one of them hid a piece of the
   picture. What is left is the frame itself: the softened rectangle, an
   outline of the same rectangle stepped down and to the right, a sprig rising
   on the left, and the address ruled underneath like a plate caption. */
.hero-visual{position:relative;justify-self:center;width:470px}
.hero-frame{position:relative;width:470px}
/* A very slow push in and back out. Half a minute each way is below the
   threshold where the eye catches it moving — the picture just never sits
   completely still. */
.hero-frame .photo-slot-img{transform-origin:56% 44%;animation:breathe 29s var(--ease) infinite alternate}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.055)}}

/* Same box as the photo, shifted 26px down and right, so the outline is
   hidden behind the picture on the left and steps out along the right and
   bottom. It has to carry the photo's radius exactly, or the two edges stop
   running parallel where the outline emerges — see .photo-slot-arch. */
.hero-frame-ring{
  position:absolute;z-index:0;inset:26px -26px -26px 26px;
  border:1px solid var(--blush-2);
  border-radius:28px;
  pointer-events:none;
}

/* Left of the frame, with its inner leaves tucked behind the picture so it
   reads as growing from behind it. It stands opposite the ring on purpose:
   put both on the right and the stem runs alongside the ring's line, and the
   two quiet marks start competing. */
.hero-sprig{
  position:absolute;z-index:0;left:-72px;bottom:-6px;width:104px;
  color:rgba(122,30,40,.17);pointer-events:none;rotate:-5deg;
}
.hero-sprig svg{width:100%;height:auto}

/* A gallery plate rather than a badge: hairlines, no box, no shadow. */
.hero-place{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:46px 0 0;font-size:11.5px;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-4);
}
.hero-place::before,.hero-place::after{content:"";height:1px;width:32px;background:var(--line)}

/* -------------------------------------------------------------- 5b RULE */
/* The hand-off from hero to the first section. It sits inside .wrap, so it
   stops where every card and heading on the page stops — a break in the
   column, not a band across the viewport. */
.rule{
  height:1px;margin:0;border:0;
  background:var(--ink-4);
}

/* ------------------------------------------------ 6. SECTIONS AND CARDS */
.section-services{background:var(--paper)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{
  position:relative;padding:38px 34px 30px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-0);
  transition:transform .75s var(--ease),box-shadow .75s var(--ease-out),border-color .75s var(--ease);
  overflow:hidden;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 80% at 100% 0%,rgba(232,214,206,.8),transparent 60%);
  opacity:0;transition:opacity .75s var(--ease);
}
.card:hover{transform:translateY(-8px);box-shadow:var(--sh-l);border-color:#E4D2CE}
.card:hover::after{opacity:1}
.card > *{position:relative;z-index:1}

.card-num{
  position:absolute;top:22px;right:28px;z-index:1;
  font-family:var(--ff-display);font-size:42px;font-weight:var(--fw-num);
  color:var(--blush-2);line-height:1;transition:color .75s var(--ease)
}
.card:hover .card-num{color:#D9B8B4}

.card-ico{
  display:grid;place-items:center;width:64px;height:64px;margin-bottom:26px;
  border-radius:20px;background:var(--red-tint);color:var(--red);
  transition:transform .82s var(--ease),background-color .68s var(--ease);
}
.card:hover .card-ico{transform:rotate(-6deg) scale(1.06);background:#EDDAD5}
.card-title{font-size:26px;margin-bottom:12px}
.card-text{font-size:15.5px;color:var(--ink-3);margin-bottom:24px}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:20px;border-top:1px solid var(--line-2)}
.card-price{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.card-price strong{font-family:var(--ff-display);font-size:19px;font-weight:var(--fw-num);color:var(--ink);letter-spacing:0}

/* Featured price cards */
.section-featured{background:var(--paper-2)}
.pricecards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pricecard{
  display:flex;flex-direction:column;padding:30px 26px 24px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh-0);
  transition:transform .68s var(--ease),box-shadow .68s var(--ease-out),border-color .68s var(--ease);
}
.pricecard:hover{transform:translateY(-6px);box-shadow:var(--sh-m);border-color:#E4D2CE}
.pricecard-ico{
  display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:var(--cream);color:var(--red);margin-bottom:20px;
  transition:background-color .6s var(--ease)
}
.pricecard:hover .pricecard-ico{background:var(--red-tint)}
.pricecard-cat{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);margin-bottom:8px}
.pricecard-name{font-size:21px;line-height:1.2;margin-bottom:8px}
.pricecard-note{font-size:13.5px;color:var(--ink-3);margin:0}
/* Duration and price are single values: they may never be shrunk into a
   second line ("60 / min", "66,00 / €"). If the card is too narrow to hold
   both side by side, the price drops onto its own line, still right-aligned. */
.pricecard-foot{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px 12px;
  margin-top:auto;padding-top:20px;border-top:1px solid var(--line-2)
}
.tag{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font-size:12px;letter-spacing:.06em;color:var(--ink-4);white-space:nowrap;
  background:var(--paper-2);border-radius:var(--r-pill);padding:5px 11px;
}
.pricecard-price{
  flex:0 0 auto;margin-left:auto;white-space:nowrap;
  font-family:var(--ff-display);font-size:25px;font-weight:var(--fw-num);color:var(--red)
}

/* ------------------------------------------------------ 7. SPLIT BLOCKS */
.split{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}
.split-reverse .split-copy{order:2}
.split-reverse .split-art{order:1}
.split-copy{max-width:540px}
.split-copy p{color:var(--ink-3);font-size:16.5px}
.split-copy .h2{margin-bottom:20px}
/* Needs a definite width: as a shrink-to-fit grid item it sized itself from
   its content, and the photo slot inside asks for width:100% — which resolved
   against nothing and collapsed the column.
   margin:0 is not decoration: the device block's art is a <figure> (it carries
   a caption) and the browser default `margin:1em 40px` applied to that one and
   not to the mesotherapy <div>. With width:100% the 40px pushed the photo off
   the column's left edge and spilled the same 40px into the gap, so the two
   photos started at different x and the device one nearly touched its text
   once the gap narrowed at tablet widths. */
.split-art{position:relative;width:100%;margin:0}

.section-meso{background:var(--cream);overflow:hidden}
.meso-glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(540px 500px at 14% 18%,rgba(214,188,178,.45),rgba(214,188,178,0) 70%)
}
/* An outline offset behind the photo — the editorial "double frame". It
   replaced a slowly rotating dashed blob, which read as noise the moment a
   rectangular photograph sat inside it. */
.split-art-ring{
  position:absolute;z-index:0;inset:-20px -20px 20px 20px;
  border:1px solid var(--blush-2);border-radius:var(--r-l);pointer-events:none
}

.ticks{display:flex;flex-direction:column;gap:12px;margin:28px 0 0}
.ticks li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;color:var(--ink-2)}
.ticks .ico{color:var(--red);margin-top:3px}

.section-device{background:var(--paper)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px;max-width:560px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2);
  transition:transform .52s var(--ease),border-color .52s var(--ease),color .52s var(--ease),background-color .52s var(--ease);
}
.chip:hover{transform:translateY(-3px);border-color:#E0C7C1;color:var(--red);background:var(--red-tint)}
.chip-dot{width:5px;height:5px;border-radius:50%;background:var(--red);opacity:.6;flex:none}
.chip:hover .chip-dot{opacity:1}

/* ------------------------------------------------------- 8. PHOTO SLOTS */
/* One component for every photograph on the site. photo_slot() in
   includes/illustrations.php picks up assets/img/<slug>.jpg on its own; until
   a file is dropped there the slot paints itself as a warm wash carrying a
   faint sprig, so an empty frame reads as a surface rather than a gap. */
.photo-slot{
  position:relative;z-index:1;overflow:hidden;
  background:var(--cream);border:1px solid var(--line);box-shadow:var(--sh-m);
}
.photo-slot-img{width:100%;height:100%;object-fit:cover}

/* The empty state has to hold the composition on its own, so it carries a
   deeper wash and a warmer edge than a slot with a photo in it needs — at
   the page's own value the frame dissolved into the hero background. */
.photo-slot.is-empty{
  background:linear-gradient(168deg,var(--blush-2),var(--blush) 46%,var(--cream));
  border-color:var(--blush-2);
}

/* The hero portrait. It used to be an arch — a true semicircle domed over a
   47/60 box — which meant the radii had to be written as percentages so the
   dome survived the slot narrowing. A soft rectangle needs none of that: one
   absolute radius holds its shape at every width, so the same rule now covers
   the breakpoints that used to re-derive the dome. 28px sits a step above the
   --r-l cards elsewhere on the page, which keeps the photograph reading as the
   largest, softest surface in the composition rather than as another card. */
.photo-slot-arch{
  width:470px;aspect-ratio:47/60;
  border-radius:28px;
}
.photo-slot-soft{width:100%;aspect-ratio:4/3;border-radius:var(--r-l)}

/* Only a real photo gets the bottom warm-up; over the empty wash it would
   just muddy the gradient. */
.photo-slot:not(.is-empty)::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,transparent 58%,rgba(112,60,52,.10));
}

/* Rises from the bottom edge rather than hanging off the side: run it off the
   right instead and the stem lands flush with the frame, reading as a seam. */
.photo-slot-sprig{
  position:absolute;right:24px;bottom:-40px;width:140px;rotate:5deg;
  color:rgba(122,30,40,.16);pointer-events:none
}
.photo-slot-sprig svg{width:100%;height:auto}
.photo-slot-arch .photo-slot-sprig{left:34px;right:auto;bottom:-52px;width:172px;rotate:-6deg}

.photo-caption{
  margin-top:14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);text-align:center;
}

/* ----------------------------------------------------------- 9. REVIEWS */
/* Three boxed cards is the shape this page has already used twice by the time
   you reach it, so the testimony is set as an editorial spread instead: the
   Google score anchors a panel on the left, the quotes run down the right as
   a hairline-ruled list with no frames of their own. */
.section-reviews{
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,var(--paper-2),var(--cream) 46%,var(--blush));
}
/* the same soft wash the mesotherapy block carries, mirrored to the right so
   it lights the column the quotes sit in rather than the panel */
.reviews-glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 540px at 82% 6%,rgba(214,188,178,.5),rgba(214,188,178,0) 70%)
}
.reviews-sprig{
  position:absolute;left:-40px;bottom:-46px;width:230px;
  color:rgba(122,30,40,.09);pointer-events:none
}
.reviews-sprig svg{width:100%;height:auto}

.reviews-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:400px 1fr;gap:92px;align-items:start;
}

/* -- the panel ------------------------------------------------------- */
/* The glyph carries its own bearing inside the 24-unit box, so it needs
   pulling left to sit on the same edge as the eyebrow under it. */
.reviews-mark{display:block;color:var(--blush-2);margin:0 0 22px -8px}
.reviews-aside .h2{margin-bottom:0}

.ratingcard{
  margin-top:36px;padding:28px 32px 24px;
  background:rgba(255,255,255,.68);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-s);
}
.ratingcard-label{
  display:flex;align-items:center;gap:9px;margin:0 0 18px;
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);
}
.ratingcard-label .ico{color:var(--red);opacity:.7}
.ratingcard-score{display:flex;align-items:baseline;gap:12px;margin:0}
.ratingcard-num{
  font-family:var(--ff-display);font-size:62px;font-weight:var(--fw-num);
  color:var(--ink);line-height:.9;letter-spacing:-.02em
}
.ratingcard-of{font-size:15px;color:var(--ink-4);letter-spacing:.06em}
.stars{display:flex;gap:3px}
.ratingcard .stars{margin-top:16px}
.ratingcard-count{margin:11px 0 0;font-size:14px;color:var(--ink-3)}
.ratingcard-count strong{font-weight:500;color:var(--ink)}
.ratingcard-foot{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-2)}

/* -- the list -------------------------------------------------------- */
/* This is the only <ol> on the site and the reset up top zeroes <ul> alone,
   so left to itself the list kept the UA `padding-inline-start:40px` plus its
   1em block margins: every row plus its hairline rule sat 40px inside the
   grid column the panel is measured against — flush right, indented left —
   and the first quote dropped below the panel's opening glyph. Nothing to
   suppress marker-side: the rows are grids, not `list-item`, so no marker box
   is ever generated. The `list-style` is insurance for whoever changes that. */
.reviews-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
/* The avatar owns a gutter that both rows sit beside, so the name line and
   the quote under it share one left edge, and the avatar itself sets the
   column's left edge — the same edge the panel's eyebrow starts on. */
.review{
  display:grid;grid-template-columns:52px 1fr;column-gap:22px;
  padding:32px 0;border-top:1px solid var(--blush-2);
}
.review:first-child{border-top:0;padding-top:4px}
.review:last-child{padding-bottom:0}

.avatar{flex:none;border-radius:50%}
.review .avatar{grid-row:1 / span 2;width:52px;height:52px}

.review-head{grid-column:2;display:flex;align-items:center;gap:20px;min-height:52px}
.review-who{display:flex;flex-direction:column;line-height:1.4}
.review-who strong{font-size:15.5px;font-weight:500;color:var(--ink);letter-spacing:.01em}
.review-who em{font-style:normal;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.stars-sm{margin-left:auto}

.review-text{
  grid-column:2;margin:14px 0 0;max-width:620px;
  font-family:var(--ff-display);font-size:21.5px;line-height:1.56;color:var(--ink);
}

/* --------------------------------------------------------- 10. CTA BAND */
.cta-band{
  position:relative;overflow:hidden;
  /* the footer wave sits over the bottom of this band — hence the extra */
  padding:var(--cta-pad) 0 calc(var(--cta-pad) + var(--wave-h));
  background:linear-gradient(135deg,var(--red-dark),var(--red) 55%,#9C3444);
  color:#fff;text-align:center;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 120% at 50% -20%,rgba(255,255,255,.18),transparent 60%);
}
.cta-sprig{position:absolute;color:rgba(255,255,255,.22);pointer-events:none}
.cta-sprig-l{left:60px;top:-10px;width:110px}
.cta-sprig-r{right:50px;bottom:calc(var(--wave-h) - 6px);width:190px}
.cta-sprig svg{width:100%;height:auto}
.cta-in{position:relative;max-width:660px}
.cta-title{color:#fff;font-size:46px;margin-bottom:16px}
.cta-text{color:rgba(255,255,255,.86);font-size:17px;margin-bottom:34px}
.cta-actions{display:flex;align-items:center;justify-content:center;gap:22px}
.cta-or{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.cta-phone{
  display:inline-flex;align-items:center;gap:9px;font-size:20px;font-weight:400;
  font-family:var(--ff-display);letter-spacing:.03em;
  border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px;
  transition:border-color .52s var(--ease)
}
.cta-phone:hover{border-color:#fff}

/* -------------------------------------------------------- 11. PAGE HERO */
.pagehero{position:relative;padding:76px 0 60px;overflow:hidden;background:var(--paper);text-align:center}
.pagehero-sm{padding-bottom:48px}
.pagehero-blob{
  position:absolute;width:760px;height:420px;border-radius:50%;
  background:rgba(216,192,183,.45);filter:blur(80px);
  top:-160px;left:50%;translate:-50% 0;pointer-events:none
}
.pagehero-sprig{position:absolute;color:var(--blush-2);width:80px;pointer-events:none}
.pagehero-sprig svg{width:100%;height:auto}
.pagehero-sprig-l{left:40px;bottom:-30px;rotate:-14deg}
.pagehero-sprig-r{right:40px;bottom:-30px;rotate:14deg;scale:-1 1}
.pagehero-in{position:relative}
.pagehero-title{font-size:62px;font-weight:var(--fw-hero);letter-spacing:-.02em}
.pagehero-lead{max-width:600px;margin:0 auto;color:var(--ink-3);font-size:17.5px}

.badges{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:30px}
.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 18px;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--line);
  font-size:13px;letter-spacing:.05em;color:var(--ink-2);box-shadow:var(--sh-s);
}
.badge .ico{color:var(--red)}

/* -------------------------------------------------------- 11b PRICE LIST */
.toolbar{
  position:sticky;top:var(--hh);z-index:40;
  background:rgba(253,251,249,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:top .6s var(--ease);
}
.is-stuck-body .toolbar{top:var(--hh-stuck)}
.toolbar-in{display:flex;align-items:center;gap:24px;padding:16px 0}

.searchbox{
  position:relative;display:flex;align-items:center;gap:10px;flex:none;width:280px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:0 16px;height:44px;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease-out)
}
.searchbox:focus-within{border-color:#D3ADA5;box-shadow:0 0 0 4px var(--red-tint)}
.searchbox .ico{color:var(--ink-4)}
.searchbox input{
  border:0;background:none;outline:none;width:100%;font-size:14.5px;font-weight:300;
}
.searchbox input::-webkit-search-cancel-button{display:none}
.search-clear{
  display:none;color:var(--ink-4);padding:4px;border-radius:50%;
  transition:color .45s var(--ease),background-color .45s var(--ease)
}
.search-clear:hover{color:var(--red);background:var(--red-tint)}
.searchbox.has-value .search-clear{display:block}

.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{
  padding:8px 15px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--white);
  font-size:12.8px;letter-spacing:.03em;color:var(--ink-3);white-space:nowrap;
  transition:all .48s var(--ease)
}
.pill:hover{color:var(--red);border-color:#E0C7C1;background:var(--red-tint)}
.pill.is-active{background:var(--ink);border-color:var(--ink);color:#fff}

.section-prices{padding-top:64px}
.pricegroup{margin-bottom:64px;scroll-margin-top:150px}
.pricegroup:last-of-type{margin-bottom:0}
.pricegroup-head{display:flex;align-items:center;gap:18px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.pricegroup-ico{
  display:grid;place-items:center;width:54px;height:54px;flex:none;
  border-radius:17px;background:var(--red-tint);color:var(--red)
}
.pricegroup-titles{flex:1}
.pricegroup-titles .h3{margin-bottom:4px}
.pricegroup-titles p{margin:0;font-size:14.5px;color:var(--ink-4)}
.pricegroup-count{
  font-family:var(--ff-display);font-size:30px;font-weight:var(--fw-num);color:var(--blush-2)
}

.pricelist{display:flex;flex-direction:column}
.priceitem{
  display:flex;align-items:baseline;gap:0;padding:14px 16px;border-radius:var(--r-s);
  transition:background-color .45s var(--ease),transform .45s var(--ease)
}
.priceitem:nth-child(odd){background:rgba(250,244,240,.6)}
.priceitem:hover{background:var(--red-tint);transform:translateX(4px)}
.pi-main{display:flex;flex-direction:column;flex:none;max-width:56%}
.pi-name{font-size:16px;color:var(--ink);font-weight:400}
.pi-note{font-size:13px;color:var(--ink-4);line-height:1.5}
.pi-dur{
  display:inline-flex;align-items:center;gap:5px;flex:none;margin-left:14px;
  font-size:12px;letter-spacing:.05em;color:var(--ink-4);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:3px 10px;align-self:center
}
.priceitem:hover .pi-dur{border-color:#DFC5C0}
.pi-leader{
  flex:1 1 auto;height:2px;min-width:20px;margin:0 14px;align-self:center;
  background-image:radial-gradient(circle,var(--line) 1px,transparent 1.3px);
  background-size:7px 2px;background-repeat:repeat-x
}
.pi-price{
  flex:none;font-family:var(--ff-display);font-size:22px;font-weight:var(--fw-num);
  color:var(--ink);letter-spacing:.01em;white-space:nowrap
}
.priceitem:hover .pi-price{color:var(--red)}
.priceitem.is-hidden,.pricegroup.is-hidden,.passcard.is-hidden{display:none}
.pricegroup.is-flash{animation:flashHl 2.55s var(--ease)}
@keyframes flashHl{
  0%{background:rgba(232,214,206,0)}
  16%{background:rgba(232,214,206,.95)}
  100%{background:rgba(232,214,206,0)}
}

/* Prepaid passes */
.pricegroup-pass .pricegroup-ico{background:var(--ink);color:#fff}
.passcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.passcard{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding:32px 30px;border-radius:var(--r-l);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-0);
  transition:transform .68s var(--ease),box-shadow .68s var(--ease-out),border-color .68s var(--ease)
}
.passcard:hover{transform:translateY(-6px);box-shadow:var(--sh-m);border-color:#E4D2CE}
.passcard.is-best{
  background:linear-gradient(170deg,#fff,var(--red-tint));
  border-color:#DEC3BE;box-shadow:var(--sh-m)
}
.passcard-flag{
  position:absolute;top:-11px;left:30px;
  background:var(--red);color:#fff;border-radius:var(--r-pill);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:5px 14px
}
.passcard-ico{
  display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:var(--cream);color:var(--red);margin-bottom:18px
}
.passcard-credit{font-family:var(--ff-display);font-size:52px;font-weight:var(--fw-num);color:var(--ink);line-height:1}
.passcard-credit span{font-size:28px;margin-left:3px;color:var(--red)}
.passcard-label{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);margin-bottom:18px}
.passcard-price{
  display:flex;align-items:baseline;gap:8px;
  font-family:var(--ff-display);font-size:24px;font-weight:var(--fw-num);color:var(--ink);
  border-top:1px dashed var(--line);width:100%;padding-top:16px;
  font-variant-numeric:lining-nums tabular-nums
}
.passcard-price em{
  font-family:var(--ff-body);font-style:normal;font-size:11px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)
}
.passcard-save{
  display:inline-flex;align-items:center;gap:7px;margin:10px 0 22px;
  font-size:13px;color:var(--red)
}
.passcard .btn{margin-top:auto}

.empty{
  display:none;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:70px 20px;color:var(--ink-3)
}
.empty.is-shown{display:flex}
.empty .ico{color:var(--blush-2);margin-bottom:6px}
.empty h3{font-size:26px}
.empty .btn{margin-top:14px}

.notice{
  display:flex;gap:20px;align-items:flex-start;
  margin:60px 0;padding:30px 34px;border-radius:var(--r-l);
  background:var(--cream);border:1px solid var(--line)
}
.notice .ico{color:var(--red);flex:none;margin-top:2px}
.notice h2{font-size:24px;margin-bottom:8px}
.notice p{margin:0;color:var(--ink-3);font-size:15.5px}
.notice code{
  font-family:ui-monospace,Consolas,monospace;font-size:13.5px;
  background:var(--white);border:1px solid var(--line);border-radius:5px;padding:1px 7px
}

/* ------------------------------------------------------ 12. CONTACT/FORM */
.section-contact{padding-top:56px;scroll-margin-top:120px}
.contact-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:start}

.infolist{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.infocard{
  display:flex;gap:18px;padding:26px 28px;border-radius:var(--r-l);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-0);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease-out),border-color .6s var(--ease)
}
.infocard:hover{transform:translateX(5px);box-shadow:var(--sh-m);border-color:#E4D2CE}
.infocard-ico{
  display:grid;place-items:center;width:50px;height:50px;flex:none;
  border-radius:16px;background:var(--red-tint);color:var(--red)
}
.infocard-h{font-family:var(--ff-body);font-size:11.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-4);margin:0 0 8px}
.infocard-body{font-size:15.5px;color:var(--ink-2);margin:0 0 10px;line-height:1.65}
.infocard-body strong{font-weight:500;color:var(--ink)}
.infocard-small{font-size:13.5px;color:var(--ink-4);margin:6px 0 0}
.infocard-booking{transition:color .45s var(--ease)}
.infocard-booking strong{
  border-bottom:1px solid var(--line);
  transition:color .45s var(--ease),border-color .45s var(--ease)
}
.infocard-booking:hover{color:var(--ink-2)}
.infocard-booking:hover strong{color:var(--red);border-bottom-color:var(--red)}
.infocard-strong{
  font-family:var(--ff-display);font-size:26px;font-weight:var(--fw-num);color:var(--ink);
  transition:color .45s var(--ease)
}
.infocard-strong:hover{color:var(--red)}

.hourscard{padding:28px 30px;border-radius:var(--r-l);background:var(--cream);border:1px solid var(--line)}
.hourscard-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.hourscard-head .ico{color:var(--red)}
.hourscard-head .infocard-h{margin:0;flex:1}
.hours-list{display:flex;flex-direction:column}
.hours-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:7px 0;font-size:14px;border-bottom:1px dashed transparent
}
.hours-day{color:var(--ink-3)}
.hours-time{color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right}
.hours-list li.is-closed .hours-time{color:var(--ink-4)}
.hours-list li.is-today{color:var(--ink)}
.hours-list li.is-today .hours-day,.hours-list li.is-today .hours-time{color:var(--red);font-weight:400}
.hours-list-lg li{padding:11px 0;border-bottom:1px dashed var(--line);font-size:15px}
.hours-list-lg li:last-child{border-bottom:0}
.hours-day em{
  font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--red);color:#fff;border-radius:var(--r-pill);padding:2px 8px;margin-left:9px
}
.hours-time small{display:block;font-size:11.5px;color:var(--ink-4);letter-spacing:.02em;text-align:right}

.formcard{
  position:relative;overflow:hidden;
  padding:44px 46px;border-radius:var(--r-xl);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-l)
}
.formcard-sprig{position:absolute;top:-14px;right:-14px;width:120px;color:var(--blush);pointer-events:none}
.formcard-sprig svg{width:100%;height:auto}
.formcard .h3{margin-bottom:10px}
.formcard-lead{font-size:15.5px;color:var(--ink-3);margin-bottom:28px}

.alert{display:none;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r-m);margin-bottom:24px}
.alert.is-shown{display:flex;animation:pop .75s var(--ease)}
.alert div{display:flex;flex-direction:column;gap:3px}
.alert strong{font-weight:500;font-size:15px}
.alert span{font-size:14px;opacity:.85}
.alert-ok{background:#EDF7F0;border:1px solid #CBE7D5;color:#2C6B44}
.alert-err{background:var(--red-tint);border:1px solid #DFC4C0;color:var(--red-dark)}
@keyframes pop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.form{display:flex;flex-direction:column;gap:18px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
/* :not(.check) — the consent label is a full sentence, not a field caption */
.field > label:not(.check){
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)
}
.field > label i{color:var(--red);font-style:normal}
.field input,.field textarea,.field select{
  width:100%;padding:13px 16px;border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--paper);
  font-size:15.5px;font-weight:300;outline:none;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease-out),background-color .45s var(--ease)
}
.field textarea{resize:vertical;min-height:130px;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:#D3ADA5;background:var(--white);box-shadow:0 0 0 4px var(--red-tint)
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4);opacity:.75}
.field-msg{font-size:12.5px;color:var(--red);min-height:0;display:none}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:#BE6F72;background:#F7F0EE}
.field.has-error .field-msg{display:block;animation:pop .52s var(--ease)}

.select-wrap{position:relative}
.select-wrap select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px}
.select-wrap .ico{position:absolute;right:14px;top:50%;translate:0 -50%;color:var(--ink-4);pointer-events:none}

.field-check{gap:8px}
.check{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.check input{position:absolute;opacity:0;width:0;height:0}
.check-box{
  display:grid;place-items:center;width:21px;height:21px;flex:none;margin-top:1px;
  border:1px solid var(--line);border-radius:6px;background:var(--paper);color:transparent;
  transition:all .42s var(--ease)
}
.check-box .ico{transform:scale(.5);transition:transform .42s var(--ease)}
.check input:checked + .check-box{background:var(--red);border-color:var(--red);color:#fff}
.check input:checked + .check-box .ico{transform:scale(1)}
.check input:focus-visible + .check-box{box-shadow:0 0 0 4px var(--red-tint)}
.check-text{font-size:13.8px;color:var(--ink-3);line-height:1.55}
.field-check.has-error .check-box{border-color:#BE6F72}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.btn.is-sending{pointer-events:none;opacity:.75}

/* ------------------------------------------------------------- 13. MAP */
.section-map{padding-top:40px}
.mapcard{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-m);background:var(--paper-2)
}
/* The card is a shell waiting for a real embed — drop an <iframe> or a static
   Maps image in and it inherits the frame. The drawn map that used to sit
   here is gone. */
.mapcard iframe,.mapcard img{width:100%;height:460px;border:0;display:block}
.mapcard-panel{
  position:absolute;top:38px;left:38px;width:324px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:var(--r-l);
  padding:28px 30px;box-shadow:var(--sh-m)
}
.mapcard-ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--red-tint);color:var(--red);margin-bottom:16px
}
.mapcard-panel .h3{font-size:26px;margin-bottom:10px}
.mapcard-panel p{font-size:15px;color:var(--ink-2);margin-bottom:12px}
.mapcard-note{font-size:13.5px !important;color:var(--ink-4) !important;margin-bottom:20px !important}

/* --------------------------------------------------- 14. FOOTER & UTILS */
.site-footer{position:relative;background:var(--ink);color:#CFC1BB;padding-top:0}

/* The wave is cut *out of the footer* and hung above it, so it is the footer's
   own ink over whatever section ends the page and everything above the crest
   stays transparent. Drawn the other way round — a paper-coloured wave sitting
   inside the footer — it left a cream strip above the ridges everywhere the
   section above wasn't paper, which on the red CTA band read as a stray line.
   Sections that end a page pay the height back in padding, so nothing moves.
   Its bottom edge is then sunk 1px into the footer, and the height takes the
   same pixel back so the crest stays where it was: the wave is an antialiased
   SVG shape and the footer is a snapped background box, so wherever the
   footer's top landed on a fractional device pixel the two rounded apart and
   the sliver of the band behind showed as a hairline that flickered with the
   width and the scroll. Overlapping them leaves nothing to round. */
.footer-trim{
  position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:calc(var(--wave-h) + 1px);
  color:var(--ink);line-height:0;pointer-events:none
}
.wave-trim{display:block;width:100%;height:100%}
main>.section:last-child{padding-bottom:calc(var(--sec-pad) + var(--wave-h))}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:56px;
  padding:56px 0 60px
}
.footer-col{min-width:0}
.footer-h{
  font-family:var(--ff-body);font-size:11.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:#8F7E77;margin:0 0 18px
}
.footer-h-2{margin-top:30px}
.brand-foot{margin-bottom:20px}
.brand-foot .brand-name{color:#fff}
.brand-foot .brand-sub{color:#8F7E77}
.footer-about{font-size:14.5px;color:#A8968F;max-width:320px;line-height:1.75}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.13);color:#CFC1BB;
  transition:all .52s var(--ease)
}
.socials a:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-3px)}

.footer-phone{
  font-family:var(--ff-display);font-size:28px;font-weight:var(--fw-num);color:#fff;
  display:inline-block;margin-bottom:6px;transition:color .45s var(--ease)
}
.footer-phone:hover{color:var(--red-light)}
.footer-note{font-size:13.5px;color:#8F7E77;margin:0 0 18px}
.footer-note strong{color:#CFC1BB;font-weight:400}
.footer-note-sm{font-size:12px;margin-top:14px;margin-bottom:0}
.footer-booking{transition:color .45s var(--ease)}
.footer-booking strong{
  border-bottom:1px solid rgba(255,255,255,.2);
  transition:color .45s var(--ease),border-color .45s var(--ease)
}
.footer-booking:hover{color:#CFC1BB}
.footer-booking:hover strong{color:#fff;border-bottom-color:var(--red-light)}
.footer-link{
  display:flex;align-items:center;gap:9px;font-size:14px;color:#A8968F;
  padding:5px 0;transition:color .45s var(--ease)
}
.footer-link .ico{color:#6E5D57;transition:color .45s var(--ease)}
.footer-link:hover{color:#fff}
.footer-link:hover .ico{color:var(--red-light)}

.site-footer .hours-list li{border-bottom:1px solid rgba(255,255,255,.07);padding:8px 0}
.site-footer .hours-day{color:#8F7E77}
.site-footer .hours-time{color:#CFC1BB}
.site-footer .hours-list li.is-today .hours-day,
.site-footer .hours-list li.is-today .hours-time{color:var(--red-light)}

.sheltered{display:flex;gap:14px;align-items:flex-start}
.sheltered .ico{color:var(--red-light);flex:none;margin-top:2px}
.sheltered p{font-size:13.5px;color:#A8968F;margin:0;line-height:1.7}

.footer-nav{display:flex;flex-direction:column;gap:8px}
.footer-nav a{font-size:14px;color:#A8968F;transition:color .6s var(--ease),padding-left .6s var(--ease)}
.footer-nav a:hover{color:#fff;padding-left:3px}

.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 0;border-top:1px solid rgba(255,255,255,.08);
  font-size:12.5px;color:#7E6D67;letter-spacing:.04em
}
/* Author's watermark: the lead-in stays as muted as the copyright line, only
   the name itself is lifted out so it reads. */
.footer-made{display:flex;align-items:center;gap:8px}
.footer-made a{
  color:#fff;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.55);
  transition:text-decoration-color .6s var(--ease)
}
.footer-made a:hover{text-decoration-color:#fff}

/* Author's wordmark: same face and hover as on kolibriiik.sk, sized down to
   sit on the copyright line, with the "iii" carrying the salon's red. */
.kb-logo{
  font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  font-size:12.5px;font-weight:700;line-height:1;
  letter-spacing:-.02em;color:#CFC1BB;
  transition:color .6s var(--ease)
}
.kb-logo-iii{color:var(--red-light);transition:letter-spacing .3s ease}
.kb-logo:hover{color:#fff}
.kb-logo:hover .kb-logo-iii{letter-spacing:.05em}

.to-top{
  position:fixed;right:34px;bottom:34px;z-index:70;
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:var(--ink);color:#fff;box-shadow:var(--sh-m);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:all .68s var(--ease)
}
.to-top.is-shown{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--red);transform:translateY(-3px)}

/* ----------------------------------------------------------- 15. MOTION */
/* Every duration in this stylesheet runs at 1.5× its original length —
   the site moves at two-thirds speed. Scale them together if you want it
   quicker again. */

/* The entrance is a keyframe animation rather than a transition, and it moves
   `translate` rather than `transform`. Both halves of that are about hover:
   a `transition` here would replace — not merge with — the one a card declares
   for itself, and a `transform` here would outrank `.card:hover`. Either way
   an early hover changed colour but refused to move, or moved without easing,
   until the entrance was over. Animating a property nothing hovers leaves the
   component's own hover transition untouched from the very first frame. */
.js .reveal{opacity:0}
.js .reveal.is-in{animation:revealIn 1.2s var(--ease) var(--d,0ms) both}
@keyframes revealIn{
  from{opacity:0;translate:0 26px}
  to{opacity:1;translate:none}
}

/* Parallax layers are driven from main.js. Their own compositor layer keeps
   the drift from repainting the section underneath them. */
[data-parallax]{will-change:transform}

/* Line-draw for the six service icons. Runs as a keyframe animation so the
   resting state is always "fully drawn" — if JS never fires, icons still show. */
.js .card.is-in .card-ico [pathLength]{animation:drawIcon 1.72s var(--ease) .22s both}
@keyframes drawIcon{
  from{stroke-dasharray:1;stroke-dashoffset:1}
  to{stroke-dasharray:1;stroke-dashoffset:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .reveal{opacity:1}
  .js .reveal.is-in{animation:none}
  .js .card.is-in .card-ico [pathLength]{animation:none}
  [data-parallax]{transform:none !important}
  /* The global rule above only shortens animations; this one loops, so it
     needs the name taken away rather than the clock sped up. */
  .hero-frame .photo-slot-img{animation:none;transform:none}
}

/* -------------------------------------------------------- 16. MOBILE NAV */
/* Both pieces are in the markup on every screen and both are switched off
   here; the 899px block in section 17 is the only place they turn on. Below
   that width .mainnav and .header-tools go away and this replaces them. */

.navtoggle{display:none}
.navdrawer{display:none}

/* The button keeps its own layer. It is centred in a bar whose height
   animates by 10px as the page leaves the top, so for those .6s its box
   lands on a different fraction of a device pixel every frame — and a 1.5px
   bar redrawn at a new fraction sixty times a second inside a backdrop-
   filtered header is exactly the shimmer that reads as the icon flickering.
   Promoted, the strokes are rasterised once and the layer is only moved.
   The size never changes, so there is nothing to re-rasterise. */
.navtoggle{
  position:relative;flex:none;width:46px;height:46px;margin-right:-11px;
  border-radius:50%;color:var(--ink);
  transform:translateZ(0);
  transition:color .45s var(--ease),background-color .45s var(--ease);
}
.navtoggle:hover{color:var(--red)}
/* Two rules rather than three: the shorter lower one is what stops it from
   reading as a generic burger, and it grows to full width as it becomes the
   second stroke of the cross. */
.navtoggle-bars i{
  position:absolute;left:50%;top:50%;width:19px;height:1.5px;margin:-1px 0 0 -9.5px;
  background:currentColor;border-radius:2px;
  transition:transform .58s var(--ease),width .58s var(--ease);
}
.navtoggle-bars i:first-child{transform:translateY(-4px)}
.navtoggle-bars i:last-child{width:13px;transform:translateY(4px)}
.navtoggle[aria-expanded="true"]{background:var(--red-tint);color:var(--red)}
.navtoggle[aria-expanded="true"] .navtoggle-bars i:first-child{transform:rotate(45deg)}
.navtoggle[aria-expanded="true"] .navtoggle-bars i:last-child{width:19px;transform:rotate(-45deg)}

/* Exactly one screen tall, and everything inside is measured against that
   height rather than against the width: what the panel has to fit into is
   the strip left under the bar, and sideways on a phone that is barely
   300px for three links and five rows of tools. --du is one percent of the
   panel's own height, so every clamp below reads as "this many vh, never
   more than the design asks for, never less than legible".
     The dvh pass keeps the panel level with the phone's own toolbars as
   they slide in and out; without it the bottom row hides behind them. */
.navdrawer{
  --dvh:100vh;
  --du:calc(var(--dvh) / 100);
  --fs-link:28px;--fs-phone:27px;              /* ceilings; only these move per breakpoint */
  position:fixed;left:0;top:0;z-index:54;          /* the header sits at 55, on top */
  /* 100vw rather than right:0 because the scroll lock below reserves a
     scrollbar gutter: that gutter shrinks the containing block a fixed panel
     resolves against, which left a strip of bare page down the right edge of
     the drawer on a narrow desktop window. vw counts the gutter, so the panel
     covers it. On a phone the gutter is zero and this is just full width. */
  width:100vw;
  height:var(--dvh);
  flex-direction:column;
  /* Centred, but `safe` for the one case the clamps cannot save — a screen
     so short that even the floors do not fit. Centring would then eat the
     first link's top edge; this drops back to the top instead, so what runs
     out at the bottom is the address line rather than the navigation. */
  justify-content:center;justify-content:safe center;
  padding:var(--hh) 0 clamp(6px,calc(var(--du) * 2.4),30px);
  background:var(--paper);
  /* Nothing in here scrolls. The sizes below are what makes that hold, and
     the clip is also what stops the sprig hanging off the bottom corner
     from handing the panel a horizontal scrollbar of its own. */
  overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .5s var(--ease),transform .62s var(--ease),visibility .62s;
}
@supports (height:100dvh){.navdrawer{--dvh:100dvh}}
.is-stuck-body .navdrawer{padding-top:var(--hh-stuck)}
.navdrawer.is-open{opacity:1;visibility:visible;transform:none}
/* The same wash the hero carries, so the panel reads as part of the page
   rather than as a white sheet dropped over it. */
.navdrawer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 480px at 92% 2%,rgba(214,188,178,.45),rgba(214,188,178,0) 70%);
}
.navdrawer-sprig{
  position:absolute;right:-30px;bottom:-40px;width:150px;rotate:8deg;
  color:rgba(122,30,40,.09);pointer-events:none;
}
.navdrawer-sprig svg{width:100%;height:auto}

.navdrawer-in{position:relative;z-index:1;display:flex;flex-direction:column}

.drawerlink{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:clamp(5px,calc(var(--du) * 1.9),19px) 2px;border-bottom:1px solid var(--line);
  font-family:var(--ff-display);font-size:clamp(17px,calc(var(--du) * 4.4),var(--fs-link));
  font-weight:var(--fw-h);color:var(--ink);line-height:1.2;
}
.drawerlink:first-child{border-top:1px solid var(--line)}
.drawerlink .ico{color:var(--blush-2);transition:color .45s var(--ease)}
.drawerlink.is-active{color:var(--red)}
.drawerlink.is-active .ico{color:var(--red)}

/* The five rows under the links are the ones that run out of room first, so
   the button, the switch and the address shrink on the same height scale as
   the links above them. The tight leading is part of it: a display face at
   1.72 spends more of the panel on air above the number than on the number. */
.navdrawer-tools{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(7px,calc(var(--du) * 2.3),22px);margin-top:clamp(10px,calc(var(--du) * 3.4),34px);
}
.drawer-phone{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--ff-display);font-size:clamp(16px,calc(var(--du) * 4.2),var(--fs-phone));
  font-weight:var(--fw-num);line-height:1.15;
  color:var(--ink);letter-spacing:.01em;overflow-wrap:anywhere;
  font-variant-numeric:lining-nums tabular-nums;
}
.drawer-phone .ico{color:var(--red);flex:none}
.navdrawer .btn-block{padding-block:clamp(7px,calc(var(--du) * 1.8),17px)}
.navdrawer .langswitch{padding:clamp(3px,calc(var(--du) * .5),4px)}
.navdrawer .lang-opt{min-width:54px;height:clamp(24px,calc(var(--du) * 5.2),36px);font-size:12.5px}
.drawer-place{
  margin:0;font-size:clamp(9px,calc(var(--du) * 1.7),11px);line-height:1.45;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);
}

/* Each row arrives a beat after the one above it — the entrance the rest of
   the page uses, borrowed. Only on the way in: closing, everything leaves
   together, so the panel does not appear to unravel. */
.navdrawer .drawerlink,.navdrawer .navdrawer-tools{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .56s var(--ease);
}
.navdrawer.is-open .drawerlink,.navdrawer.is-open .navdrawer-tools{
  opacity:1;transform:none;transition-delay:var(--dd,0ms);
}
.navdrawer .drawerlink:nth-child(1){--dd:70ms}
.navdrawer .drawerlink:nth-child(2){--dd:125ms}
.navdrawer .drawerlink:nth-child(3){--dd:180ms}
.navdrawer .navdrawer-tools{--dd:245ms}

/* The page behind the open panel must not scroll with it — but the lock has
   to stay off <body>. A body with an overflow of its own stops handing that
   overflow to the viewport and becomes a scroll container itself, and one
   that is never scrolled: the sticky header then measures against the top of
   the document rather than the top of the screen, so opening the panel
   part-way down a page threw the bar — and the button that closes it — off
   screen. Handing body's `overflow-x` back to visible for the duration is
   what keeps the header sticky; the root clips both axes anyway while the
   panel is up. The gutter is reserved so losing the scrollbar on a narrow
   desktop window does not shift the page sideways underneath it. */
html.nav-open{overflow:hidden;scrollbar-gutter:stable}
html.nav-open body{overflow:visible}

/* The scroll-to-top button outranks the panel (70 against 54), so opening the
   menu part-way down a page left it floating over the drawer, landing on the
   address line. It is also meaningless while the panel is up — there is
   nothing to scroll. Beats .to-top.is-shown on specificity. */
html.nav-open .to-top{opacity:0;visibility:hidden;pointer-events:none}

/* ------------------------------------------------------- 17. RESPONSIVE */
/* Everything above this line is the design. Everything below only takes
   room away as the viewport narrows — no rule here is reachable at 1200px
   and over, so the desktop layout is exactly what it was.
     1199   gutters and display sizes come in
     1099   the hero stats reflow inside a narrower copy column
     1023   the three- and four-up grids fold to two
      899   the mobile layout: drawer nav, every split stacks
      639   one column throughout; price rows reflow
      400   small-phone tightening
   ===================================================================== */

@media (max-width:1199px){
  :root{--gutter:64px;--sec-pad:96px}

  .h2{font-size:42px}
  .h3{font-size:29px}
  .section-head{margin-bottom:54px}

  .header-in{gap:30px}
  .mainnav{gap:26px}

  .hero{padding:56px 0 88px}
  .hero-in{gap:44px}
  .hero-title{font-size:64px}
  .hero-visual,.hero-frame,.photo-slot-arch{width:420px}

  .cards{gap:20px}
  .pricecards{gap:18px}
  .split{gap:56px}
  .reviews-in{grid-template-columns:330px 1fr;gap:62px}
  .review-text{font-size:20px}
  .cta-title{font-size:42px}
  .pagehero-title{font-size:54px}
  .footer-grid{gap:40px}
}

/* The featured cards hold four columns all the way down to 1024px, where a
   card is only ~226px wide — the narrowest they ever get, narrower than the
   two-up cards below this range. At full size the footer row (duration tag
   plus a price like "66,00 €") no longer fits on one line there, so the card
   steps down with the column instead of letting the two values collide. The
   sizes go back up at 1023px, where the grid folds to two. */
@media (max-width:1199px) and (min-width:1024px){
  .pricecard{padding:26px 22px 20px}
  .pricecard-ico{width:44px;height:44px;margin-bottom:16px}
  .pricecard-name{font-size:19.5px}
  .pricecard-note{font-size:13px}
  .pricecard-foot{padding-top:16px;gap:8px 10px}
  .pricecard-foot .tag{font-size:11.5px;gap:5px;padding:5px 9px;letter-spacing:.04em}
  .pricecard-price{font-size:22px}
}

/* The hero keeps its two columns well below 1200px, but the copy column does
   not: by here it is too narrow to hold the three stats side by side with
   rules between them. They take the shape they will keep all the way down to
   the smallest phone. */
@media (max-width:1099px){
  .hero-title{font-size:58px}
  .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
  .stat-sep{display:none}
  .stat{gap:4px}
  .stat-num{font-size:32px}
  .stat-label{font-size:11px;letter-spacing:.08em;line-height:1.45}
}

@media (max-width:1023px){
  :root{--gutter:56px;--sec-pad:84px}

  .h2{font-size:38px}
  .h3{font-size:27px}
  .section-lead{font-size:16.5px}

  .header-in{gap:22px}
  .mainnav{gap:20px}
  .header-tools{gap:13px}
  .navlink{font-size:13.5px}

  .hero{padding:48px 0 80px}
  .hero-title{font-size:56px}
  .hero-lead{font-size:17.5px}
  .hero-visual,.hero-frame,.photo-slot-arch{width:380px}

  /* Three-up and four-up both fold to two; the passes follow so the
     "najobľúbenejšia" card keeps a neighbour to be compared against. */
  .cards,.pricecards,.passcards{grid-template-columns:repeat(2,1fr)}

  .split{gap:44px}
  .split-copy{max-width:none}
  .reviews-in{grid-template-columns:290px 1fr;gap:44px}
  .review-text{font-size:19px}
  .contact-grid{gap:38px}
  .formcard{padding:38px 34px}
  .cta-title{font-size:38px}
  .pagehero-title{font-size:48px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px 48px}
  .mapcard iframe,.mapcard img{height:400px}
}

/* ---------------------------------------------------- the mobile layout */
@media (max-width:899px){
  :root{--gutter:44px;--hh:74px;--hh-stuck:64px;--sec-pad:74px;--cta-pad:80px}

  .h2{font-size:35px}
  .section-head{margin-bottom:44px}

  /* -- header ---------------------------------------------------------- */
  .mainnav,.header-tools{display:none}
  .navtoggle{display:block}
  .navdrawer{display:flex}

  /* -- hero ------------------------------------------------------------ */
  /* One column from here down, so the title is the first thing under the
     bar rather than the second: the padding carries the air the kicker
     used to stand in, or the display face lands against the header. */
  .hero{padding:62px 0 68px}
  .hero-in{grid-template-columns:1fr;gap:48px}
  .hero-copy{width:100%}
  .hero-title{font-size:52px;margin-bottom:22px}
  .hero-lead{max-width:none;margin-bottom:30px}
  .hero-actions{margin-bottom:42px}
  /* The copy column is the full width here, and three stats spread across
     700px stop reading as one group. */
  .hero-stats{max-width:560px}
  .hero-visual{justify-self:center;width:min(430px,100%)}
  .hero-frame,.photo-slot-arch{width:100%}
  .hero-frame-ring{inset:18px -18px -18px 18px}
  /* Pulled in tight against the frame: at this width the old -72px ran off
     the side of the screen and the section's overflow clipped the stem. */
  .hero-sprig{left:-18px;bottom:-14px;width:88px}
  .hero-place{margin-top:30px}

  /* -- sections -------------------------------------------------------- */
  .section-head-row{flex-direction:column;align-items:flex-start;gap:22px}
  .section-lead-left{max-width:none}

  .split{grid-template-columns:1fr;gap:38px}
  /* Both splits lead with the words on a phone. Alternating is what the
     two-column layout was for; stacked, the reversed one would just read
     as the odd one out. */
  .split-copy,.split-reverse .split-copy{order:0}
  .split-art,.split-reverse .split-art{order:1;width:100%;max-width:520px;margin-inline:auto}
  .split-art-ring{inset:-14px -14px 14px 14px}
  .chips{max-width:none}

  .reviews-in{grid-template-columns:1fr;gap:40px}
  .reviews-aside{max-width:560px}
  .ratingcard{margin-top:26px}
  .reviews-sprig{width:170px;left:-34px;bottom:-34px}

  .cta-title{font-size:35px}
  .cta-sprig-l{left:16px;top:-6px;width:84px}
  .cta-sprig-r{right:12px;width:132px}

  .pagehero{padding:52px 0 48px}
  .pagehero-title{font-size:44px}
  .pagehero-sprig{width:58px}
  .pagehero-sprig-l{left:6px;bottom:-24px}
  .pagehero-sprig-r{right:6px;bottom:-24px}

  /* -- price list ------------------------------------------------------ */
  .toolbar-in{flex-direction:column;align-items:stretch;gap:12px;padding:12px 0}
  .searchbox{width:100%}
  /* One scrolling row instead of four wrapped ones. It bleeds half a gutter
     each way so the strip runs to the edges of the screen and reads as
     something you can push, rather than as a row that got cut off. */
  .pills{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-inline:calc(var(--gutter) / -2);
    padding:0 calc(var(--gutter) / 2) 2px;
  }
  .pills::-webkit-scrollbar{display:none}
  .pricegroup{scroll-margin-top:200px}
  .section-contact{scroll-margin-top:96px}

  /* -- contact --------------------------------------------------------- */
  .contact-grid{grid-template-columns:1fr;gap:34px}
  .formcard{padding:36px 30px}
  .infocard-strong,.footer-link,.footer-phone{overflow-wrap:anywhere}

  /* -- map ------------------------------------------------------------- */
  /* The panel stops floating over the map and sits under it, where it has
     the full column instead of 324px of it. */
  .mapcard iframe,.mapcard img{height:320px}
  .mapcard-panel{position:static;width:auto;box-shadow:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:26px 24px}

  /* -- footer ---------------------------------------------------------- */
  .footer-grid{gap:34px 40px;padding:44px 0 48px}
  .footer-about{max-width:none}
  /* The button is fixed, so at the foot of the page it sits on the closing
     line rather than beside it — and 16px put it straight through the "website
     made by" credit, which ends 44px above the page bottom (22px of footer
     padding plus a 21.5px line). 60px leaves that credit a clear band and
     still reads as a corner button. env() adds the home-indicator inset on
     notched phones and resolves to 0 everywhere else. */
  .to-top{right:16px;bottom:calc(60px + env(safe-area-inset-bottom,0px));width:44px;height:44px}
}

/* ----------------------------------------------------------- one column */
@media (max-width:639px){
  :root{--gutter:34px;--hh:70px;--hh-stuck:62px;--sec-pad:62px;--cta-pad:66px;--wave-h:34px}

  .h2{font-size:31px;letter-spacing:-.012em}
  .h3{font-size:24px}
  .section-head{margin-bottom:36px}
  .section-lead{font-size:16px}
  .divider{margin:18px 0}
  .btn{padding:14px 24px;font-size:14px}
  .eyebrow{font-size:11px;letter-spacing:.22em}

  .brand-name{font-size:22px}
  .brand-sub{font-size:9.5px;letter-spacing:.18em}
  /* Only the two ceilings move: the drawer's own clamps take every size in
     it further down from here as the screen gets shorter. */
  .navdrawer{--fs-link:25px;--fs-phone:24px}

  .hero{padding:50px 0 56px}
  .hero::after{height:110px}
  .hero-in{gap:40px}
  .hero-title{font-size:40px;margin-bottom:18px}
  .hero-lead{font-size:16.5px;margin-bottom:26px}
  .hero-actions{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:36px}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-stats{gap:14px}
  .stat-num{font-size:28px}
  .stat-star{width:18px;height:18px}
  .stat-label{font-size:10.5px;letter-spacing:.07em;line-height:1.45}
  .hero-frame-ring{inset:14px -14px -14px 14px}
  .hero-sprig{left:-14px;bottom:-12px;width:74px}
  .hero-place{margin-top:24px;font-size:10.5px;letter-spacing:.2em}
  .hero-place::before,.hero-place::after{width:22px}

  .cards,.pricecards,.passcards{grid-template-columns:1fr;gap:16px}
  .card{padding:30px 26px 24px}
  .card-num{font-size:34px;top:18px;right:22px}
  .card-ico{width:56px;height:56px;margin-bottom:20px}
  .card-title{font-size:23px}
  .pricecard{padding:26px 22px 20px}

  .split{gap:32px}
  .split-copy p{font-size:16px}
  .ticks li{font-size:15px}
  .photo-caption{margin-top:12px;font-size:12px;letter-spacing:.12em}

  .review{grid-template-columns:42px 1fr;column-gap:15px;padding:26px 0}
  .review .avatar{width:42px;height:42px}
  .review-head{min-height:42px;flex-wrap:wrap;gap:4px 14px}
  .review-text{font-size:17.5px;margin-top:12px;line-height:1.5}
  .reviews-mark{width:38px;height:38px;margin:0 0 16px -6px}
  .reviews-sprig{width:140px;left:-28px;bottom:-26px}
  .ratingcard{padding:24px 22px 20px}
  .ratingcard-num{font-size:52px}

  .cta-title{font-size:31px}
  .cta-text{font-size:16px;margin-bottom:28px}
  .cta-actions{flex-direction:column;gap:18px}
  .cta-sprig-l{width:66px;left:10px}
  .cta-sprig-r{width:104px;right:8px}

  .pagehero{padding:40px 0 40px}
  .pagehero-title{font-size:34px}
  .pagehero-lead{font-size:16px}
  .pagehero-blob{width:440px;height:270px;top:-118px}
  .pagehero-sprig{width:46px}

  /* Header plus toolbar are both sticky, and together they were holding a
     fifth of a phone screen while you scroll a very long price list. */
  .toolbar-in{gap:10px;padding:10px 0}
  .searchbox{height:40px}
  .pill{padding:7px 13px;font-size:12.2px}

  .section-prices{padding-top:40px}
  .pricegroup{margin-bottom:46px;scroll-margin-top:190px}
  .pricegroup-head{gap:14px;margin-bottom:16px;padding-bottom:14px}
  .pricegroup-ico{width:46px;height:46px;border-radius:14px}
  .pricegroup-count{font-size:24px}
  /* Name and price hold the top line, the duration drops underneath. The
     leader dots go: the gap they used to bridge is now a few pixels wide. */
  .priceitem{
    display:grid;grid-template-columns:1fr auto;column-gap:14px;
    align-items:baseline;padding:13px 12px;
  }
  .pi-main{grid-column:1;grid-row:1;max-width:none}
  .pi-price{grid-column:2;grid-row:1;font-size:19px}
  .pi-leader{display:none}
  .pi-dur{grid-column:1;grid-row:2;justify-self:start;margin:7px 0 0;align-self:start}
  .pi-name{font-size:15.5px}
  .passcard{padding:28px 24px}
  .passcard-flag{left:24px}
  .passcard-credit{font-size:46px}
  .empty{padding:48px 12px}
  .empty h3{font-size:22px}
  .notice{flex-direction:column;gap:14px;margin:36px 0;padding:24px 22px}

  .infolist{gap:12px;margin-bottom:20px}
  .infocard{padding:20px 18px;gap:14px}
  .infocard-ico{width:44px;height:44px;border-radius:14px}
  .infocard-strong{font-size:19px}
  .hourscard{padding:22px 20px}
  .formcard{padding:30px 22px;border-radius:var(--r-l)}
  .formcard-sprig{width:86px}
  .formcard-lead{margin-bottom:22px}
  .field-row{grid-template-columns:1fr;gap:18px}

  .footer-grid{grid-template-columns:1fr;gap:32px;padding:36px 0 40px}
  .footer-h-2{margin-top:26px}
  .footer-phone{font-size:25px}
  .footer-bottom{flex-direction:column;align-items:center;gap:10px;text-align:center;padding:20px 0}
  /* Stacking that block doubles its height, and on the narrowest phones the
     copyright wraps to two lines of its own on top of the credit: 20px of
     padding + a 21.5px credit line + the 10px gap + 43px of copyright puts the
     highest text ~95px above the page bottom. 104px clears the wrapped case
     as well as the common one, and the copyright is centred here rather than
     off to one side, so anything less would cross it. */
  .to-top{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
}

/* -------------------------------------------------------- small phones */
@media (max-width:400px){
  :root{--gutter:26px;--sec-pad:54px}

  .h2{font-size:28px}
  .h3{font-size:22px}

  .brand-name{font-size:20px}
  .brand-sub{font-size:9px;letter-spacing:.15em}
  .navdrawer{--fs-link:23px;--fs-phone:22px}

  .hero-title{font-size:34px}
  .hero-stats{gap:10px}
  .stat-num{font-size:25px}
  .stat-label{font-size:9.5px;letter-spacing:.04em}
  /* Under 400px the gutter is thinner than the offset these two need, so
     they would be clipped rather than seen. */
  .split-art-ring{display:none}
  .hero-frame-ring{inset:11px -11px -11px 11px}
  .hero-sprig{width:62px;left:-11px}

  .card{padding:26px 22px 20px}
  .card-title{font-size:21px}
  .pagehero-title{font-size:30px}
  .cta-title{font-size:28px}
  .review-text{font-size:16.5px}
  .ratingcard-num{font-size:46px}
  .pi-price{font-size:18px}
  .passcard-credit{font-size:40px}
  .formcard{padding:26px 18px}
  .infocard-strong{font-size:17.5px}
}

/* --------------------------------------------------------- touch input */
/* Without a pointer to leave, a :hover transform sticks after a tap and the
   card stays lifted until you touch something else. The colour and shadow
   changes are harmless and stay — it is only the movement that misreads. */
@media (hover:none){
  .card:hover,.pricecard:hover,.passcard:hover,.infocard:hover,.chip:hover,
  .priceitem:hover,.btn:hover,.socials a:hover,.to-top:hover,.pill:hover{transform:none}
  .card:hover::after{opacity:0}
  .card:hover .card-ico{transform:none}
  .btn:hover .ico,.link-arrow:hover .ico{transform:translateX(0)}
  .link-arrow:hover span::after{transform:scaleX(0)}
  .navlink:hover::after{transform:scaleX(0)}
  .navlink.is-active::after{transform:scaleX(1)}
  .footer-nav a:hover{padding-left:0}
  .btn:hover::before{transform:translateX(-120%)}
}