/* Les Rhodos Hotel · un singur stylesheet, mobil intai.
   v3 (8 sept 2026), dupa reactia lui Alex la v2 ("scris mic, inghesuit, AI slop"):
   text mare (18px baza), sectiuni putine si aerisite, fara etichete uppercase in serie,
   galerii cu swipe pe telefon, poze din originalele de 8192px in WebP + JPEG.
   Fara logica de pret/disponibilitate pe site: singurul lucru viu e linkul catre Cloudbeds
   si formularele de cerere (transfer, lift pass, depozitare, contact) care merg pe email. */

:root{
  --bg:#f6f4ef; --ink:#151412; --ink-2:#44423d; --muted:#6b6862; --line:#e4e1d9;
  /* --muted era #75726b, adica 4,37:1 pe fondul nostru, sub minimul de 4,5:1. E culoarea
     folosita de aproape tot textul secundar, deci pica peste tot. #6b6862 da 5,1:1. */
  --paper:#fff; --accent:#9c3a26;   /* burgundy-ul hotelului, de pe site-ul vechi */
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,-apple-system,sans-serif;
  --pad:22px; --max:1160px; --r:6px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);font-family:var(--sans);color:var(--ink);font-size:18px;line-height:1.6;font-weight:400;}
a{color:inherit;text-decoration:none;}
img,picture{max-width:100%;display:block;}
img{height:auto;}
/* <picture> nu are inaltime proprie: in cutiile cu object-fit trebuie sa umple parintele */
.pic picture,.photo picture,.bigphoto picture{height:100%;width:100%;}
button{font-family:inherit;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);}
.narrow{max-width:820px;}

/* Tipografie: mare, putina, cu aer */
.k{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--accent);line-height:1.3;}
.h1,.h2{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:.98;margin:0;}
.h1{font-size:clamp(50px,13vw,108px);}
.h2{font-size:clamp(38px,9.5vw,66px);line-height:1.02;margin-bottom:18px;}
.h3{font-family:var(--serif);font-weight:500;font-size:clamp(27px,6.5vw,32px);line-height:1.12;margin:0 0 8px;}
.lede{font-size:20px;line-height:1.55;color:var(--ink-2);max-width:34em;margin:0 0 28px;}
p{margin:0 0 16px;}
.muted{color:var(--muted);}
.small{font-size:16px;line-height:1.55;color:var(--muted);}

/* Butoane: 56px, text normal, nu majuscule spatiate */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:15px 28px;font-size:17px;font-weight:500;letter-spacing:.01em;border:1px solid var(--ink);border-radius:var(--r);cursor:pointer;line-height:1.2;text-align:center;}
.btn-dark{background:var(--ink);color:var(--bg);}
.btn-line{background:transparent;color:var(--ink);}
.btn-light{border-color:rgba(246,244,239,.85);color:var(--bg);background:rgba(21,20,18,.25);backdrop-filter:blur(6px);}
.btn-full{width:100%;scroll-margin-bottom:96px;}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.ext::after{content:' \2197';font-size:.9em;}

/* Nav */
/* Fondul e OPAC, nu .94: la orice scroll, titlurile mari treceau prin bara si se citeau
   peste "Les Rhodos". Cel mai vizibil defect de pe telefon, gasit la auditul din 10 sept. */
nav.top{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);}
nav.top .bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px var(--pad);}
.brand{font-family:var(--serif);font-weight:500;font-size:29px;letter-spacing:.005em;white-space:nowrap;}
.brand span{font-style:italic;font-weight:400;}
.navright{display:flex;align-items:center;gap:10px;}
.navright .btn{min-height:48px;padding:10px 20px;font-size:16px;}
.menubtn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--line);background:transparent;cursor:pointer;border-radius:var(--r);}
.menubtn svg{width:24px;height:24px;stroke:var(--ink);stroke-width:1.8;fill:none;}
.navlinks{display:none;order:3;width:100%;flex-direction:column;border-top:1px solid var(--line);padding:8px 0 6px;margin-top:4px;}
.navlinks a{font-size:20px;padding:14px 0;border-bottom:1px solid var(--line);}
.navlinks a:last-child{border-bottom:none;}
.navcall{color:var(--muted);}
@media (min-width:900px){.navcall{display:none;}}
nav.top.open .navlinks{display:flex;}
@media (min-width:900px){
  nav.top .bar{padding:16px 40px;display:grid;grid-template-columns:auto 1fr auto;}
  .menubtn{display:none;}
  .navlinks{display:flex;order:0;width:auto;flex-direction:row;align-items:center;justify-content:center;gap:30px;border:none;padding:0;margin:0;}
  .navlinks a{font-size:16px;padding:0;border:none;}
}

/* Hero: slideshow pe tot ecranul, DOAR cu poze care sunt sigur ale hotelului (balcon,
   camera cu usile spre munti, barul), toate din sedinta lui Martyn Butler, mai 2026.
   titlu + buton de rezervare direct peste poza, cu gradient solid jos ca sa se citeasca.
   Alex, 9 sept: "o poza ca lumea, calitativ, clientii sa vada direct book, ca la competitie". */
.hero{position:relative;background:var(--ink);color:var(--bg);overflow:hidden;min-height:92svh;display:flex;align-items:flex-end;}
.hero .slides{position:absolute;inset:0;}
.hero .slides picture{position:absolute;inset:0;opacity:0;animation:heroFade 30s infinite;}
/* Prima poza sta mereu dedesubt, vizibila din prima clipa; celelalte doar vin peste ea pe rand.
   Fara asta, in prima secunda (si pe date mobile lente) se vedea fundal negru cu text alb. */
.hero .slides picture:nth-child(1){opacity:1;animation:none;}
/* Cinci slide-uri, ciclu de 30s, fiecare 6s pe ecran. Erau cinci, dar doua dintre poze
   (winter, summer) nu erau ale hotelului si au fost scoase pe 10 sept. */
.hero .slides picture:nth-child(2){animation-delay:6s;}
.hero .slides picture:nth-child(3){animation-delay:12s;}
.hero .slides picture:nth-child(4){animation-delay:18s;}
.hero .slides picture:nth-child(5){animation-delay:24s;}
/* Poza cu fatada e mai lata decat inalta, iar pe telefon hero-ul e portret: decupajul cade
   pe orizontala, deci mutarea pe verticala n-ar schimba nimic. O tinem centrata, ca sa
   intre toata cladirea in cadru. */
.hero .slides .slide-front{object-position:50% 50%;}
.hero .slides img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;}
@keyframes heroFade{0%{opacity:0}4%{opacity:1}20%{opacity:1}24%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero .slides picture{animation:none;}}
/* Gradientul trebuie sa faca doua lucruri deodata: sa lase poza sa se vada, si sa tina
   textul alb lizibil (Alex, 8 sept: textul alb nu se citea peste balustrada balconului).
   Concurenta buna sta pe 20-30% peste toata poza; noi avem nevoie de mai mult jos, unde e
   textul, dar putem lasa partea de sus mult mai curata. Inainte ajungea la 93% negru si
   mancarea jumatate de poza. */
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,9,.12) 0%,rgba(10,10,9,0) 45%,rgba(10,10,9,.35) 70%,rgba(10,10,9,.62) 100%);pointer-events:none;}
/* Umbra care tine textul lizibil urmeaza CHIAR blocul de text, nu o inaltime fixa din poza.
   Cu gradient pe tot hero-ul, pe telefon textul cadea peste biserica alba si peste
   balustrada, adica exact reclamatia lui Alex din 8 sept; iar ca sa se citeasca trebuia
   inecata jumatate de poza. Asa, restul pozei ramane curat oriunde ar cadea textul. */
.hero-inner::before{content:'';position:absolute;left:0;right:0;top:-120px;bottom:-40px;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,9,0) 0%,rgba(10,10,9,.5) 26%,rgba(10,10,9,.72) 52%,rgba(10,10,9,.8) 100%);
  pointer-events:none;}
/* Pe desktop textul sta doar in coltul din stanga jos, deci poza poate ramane curata mult
   mai sus. Pe telefon textul ocupa jumatate de ecran si trece peste balustrada balconului,
   exact ce a reclamat Alex pe 8 sept cu o captura: acolo umbra trebuie sa inceapa devreme. */
@media (min-width:900px){
  /* Pe desktop textul sta doar in stanga jos, deci umbra lui se poate opri inainte de
     marginea din dreapta si poza ramane intreaga. */
  /* O elipsa ancorata in coltul din stanga jos, nu un dreptunghi: altfel se vedea marginea
     dreapta a umbrei taiata drept peste poza. */
  .hero-inner::before{top:-160px;bottom:-60px;left:-10%;right:auto;width:min(1100px,78%);
    background:radial-gradient(120% 130% at 8% 100%,rgba(10,10,9,.82) 0%,rgba(10,10,9,.6) 38%,rgba(10,10,9,.22) 66%,rgba(10,10,9,0) 82%);}
}
.hero-inner{position:relative;z-index:2;width:100%;padding:40px var(--pad) 40px;display:flex;flex-direction:column;gap:12px;}
.hero .k{color:rgba(246,244,239,.96);text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 16px rgba(0,0,0,.45);}
.hero .h1{color:var(--bg);text-shadow:0 2px 6px rgba(0,0,0,.4),0 4px 30px rgba(0,0,0,.4);}
.hero p{font-size:20px;line-height:1.45;color:rgba(246,244,239,.97);max-width:24em;margin:0;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 18px rgba(0,0,0,.5);}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.hero .btn-dark{background:var(--bg);color:var(--ink);border-color:var(--bg);}
.hero .btn-line{border-color:rgba(246,244,239,.85);color:var(--bg);}
@media (min-width:900px){
  .hero{min-height:94svh;}
  .hero-inner{padding:60px 40px 64px;max-width:var(--max);margin:0 auto;}
  .hero p{font-size:22px;}
}

/* Bara de rezervare: card alb sub hero. Datele merg direct in linkul Cloudbeds. */
.bookwrap{position:relative;z-index:3;margin-top:-30px;}
.bookbar{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:20px;display:grid;gap:14px;box-shadow:0 18px 44px rgba(0,0,0,.12);}
.bookbar label{display:block;font-size:16px;color:var(--muted);margin-bottom:6px;font-weight:500;}
.bookbar input,.bookbar select{width:100%;min-height:56px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-family:inherit;font-size:17px;padding:10px 14px;color:var(--ink);-webkit-appearance:none;appearance:none;}
.bookbar select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23151412' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
.bookbar input[type=date]{padding:10px 8px;font-size:16px;letter-spacing:-.01em;}
.bookbar input:focus-visible,.bookbar select:focus-visible{outline:2px solid var(--ink);outline-offset:1px;}
.bookbar .dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
.bookbar .dates>div{min-width:0;}
.bookbar .btn{width:100%;}
.bookbar .hint{font-size:16px;color:var(--muted);margin:0;line-height:1.5;}
@media (min-width:760px){
  .bookwrap{margin-top:-40px;}
  .bookbar{grid-template-columns:1.2fr 1.2fr .8fr auto;align-items:end;gap:14px;padding:22px;}
  .bookbar .dates{display:contents;}
  .bookbar .hint{grid-column:1/-1;}
}

/* Cifrele de sub hero */
.trust{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;padding:36px 0 0;}
.trust b{display:block;font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.05;margin-bottom:4px;}
.trust span{font-size:16px;color:var(--muted);line-height:1.4;display:block;}
@media (min-width:760px){.trust{grid-template-columns:repeat(4,1fr);padding-top:48px;}}

section{padding:64px 0;}
@media (min-width:900px){section{padding:104px 0;}}
.sechead{margin-bottom:26px;}
.sechead .k{display:block;margin-bottom:8px;}

/* Benzi orizontale cu swipe pe telefon, grid pe desktop */
.strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--pad) 12px;margin:0 calc(-1 * var(--pad));scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.strip::-webkit-scrollbar{display:none;}
.strip>*{flex:0 0 84%;scroll-snap-align:start;}
.strip.photos>*{flex-basis:80%;}
@media (min-width:760px){
  .strip{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;overflow:visible;padding:0;margin:0;}
  .strip.photos{grid-template-columns:repeat(3,1fr);}
}
/* Patru coloane intrau in 1160px la 263px fiecare: poza de 195px si text de 17px pe vreo
   31 de caractere, adica patru cuvinte pe rand. Exact acolo, si aproape numai acolo, mai
   traia "ingramadit si scris mic" din versiunea respinsa. Trei coloane dau ~355px. */
@media (min-width:1000px){.strip.four{grid-template-columns:repeat(3,1fr);} .strip.three{grid-template-columns:repeat(3,1fr);}}
@media (min-width:1320px){.strip.four{grid-template-columns:repeat(4,1fr);}}

/* Carduri camere: poza mare, nume ca in Cloudbeds */
.room{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;}
.room .pic{aspect-ratio:16/10;overflow:hidden;background:#e6e4dd;}
.room .pic img{width:100%;height:100%;object-fit:cover;}
.room .body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1;}
.room .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:16px;color:var(--muted);}
.room .meta b{color:var(--ink);font-weight:500;}
.room p{font-size:17px;line-height:1.5;color:var(--ink-2);margin:0;}
.room .btn{margin-top:auto;align-self:flex-start;min-height:50px;padding:12px 22px;font-size:16px;}

/* Poze in banda */
.photo{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:#e6e4dd;}
.photo img{width:100%;height:100%;object-fit:cover;}
.bigphoto{aspect-ratio:4/3;overflow:hidden;border-radius:10px;margin:0 0 28px;}
.bigphoto img{width:100%;height:100%;object-fit:cover;}
@media (min-width:760px){.bigphoto{aspect-ratio:21/9;}}

/* Randuri de informatii */
.lines{margin:0 0 24px;}
.line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:18px;}
/* Randul arata de 58px, dar linkul era doar pe text: 28,8px de atins cu degetul, sub minimul
   de 44. Acum zona de atins acopera tot randul, inclusiv spatiul din dreapta. */
.line > a:first-child{display:block;flex:1;padding:14px 0;margin:-14px 0;min-height:44px;display:flex;align-items:center;}
.line .v{font-family:var(--serif);font-size:24px;font-style:italic;color:var(--ink);text-align:right;max-width:62%;}
.twocol{display:grid;gap:8px 64px;grid-template-columns:minmax(0,1fr);}
@media (min-width:820px){.twocol{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}

/* Sectiune inchisa (o singura data pe pagina) */
.dark{background:var(--ink);color:var(--bg);}
.dark .k,.dark .muted,.dark .small{color:rgba(246,244,239,.66);}
.dark .lede{color:rgba(246,244,239,.9);}
.dark .btn-line{border-color:rgba(246,244,239,.8);color:var(--bg);}
.dark .line{border-color:rgba(246,244,239,.16);}
.dark .line .v{color:rgba(246,244,239,.8);}
.dark .fact{border-color:rgba(246,244,239,.16);color:rgba(246,244,239,.9);}

/* Servicii si evenimente: randuri mari, nu carduri mici */
.svc{display:flex;flex-direction:column;gap:14px;padding:26px 0;border-bottom:1px solid var(--line);}
.svc:first-of-type{border-top:1px solid var(--ink);}
.svc .h3{margin:0;}
.svc .day{font-size:16px;color:var(--muted);margin-bottom:2px;}
.svc p{margin:0;font-size:18px;line-height:1.55;color:var(--ink-2);max-width:34em;}
.svc .btn{align-self:flex-start;}
@media (min-width:700px){.svc{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:28px;} .svc .btn{flex:none;}}
.cards{display:grid;gap:0;}
.card{padding:22px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;}
.card:first-child{border-top:1px solid var(--ink);}
.card .day{font-size:16px;color:var(--muted);}
.card .title{font-family:var(--serif);font-size:27px;font-weight:500;line-height:1.12;}
.card p{font-size:17px;line-height:1.5;color:var(--ink-2);margin:0;}
.card .btn{margin-top:8px;align-self:flex-start;min-height:50px;padding:12px 20px;font-size:16px;}
@media (min-width:760px){.cards{grid-template-columns:1fr 1fr;column-gap:48px;} .card:nth-child(2){border-top:1px solid var(--ink);}}
.dark .card,.dark .svc{border-color:rgba(246,244,239,.16);}
.dark .card:first-child,.dark .svc:first-of-type{border-top-color:rgba(246,244,239,.5);}
.dark .card p,.dark .svc p{color:rgba(246,244,239,.85);}

/* Banda finala */
.bookband{position:relative;overflow:hidden;background:var(--ink);color:var(--bg);padding:88px 0;text-align:center;}
.bookband .pic{position:absolute;inset:0;opacity:.42;}
.bookband .pic img{width:100%;height:100%;object-fit:cover;}
.bookband-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;}
.bookband p{font-size:19px;color:rgba(246,244,239,.85);margin:0 0 8px;max-width:28em;}
.bookband .btn{min-width:260px;}
.bookband .btn-dark{background:var(--bg);color:var(--ink);border-color:var(--bg);}

/* Fapte numerotate / FAQ */
.fact{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-size:18px;line-height:1.55;color:var(--ink-2);max-width:40em;}
/* Exact actiunile principale ale paginii de contact (harta, doua telefoane, emailul) aveau
   27,9px inaltime de atins. Se rateaza cu degetul. */
.fact a{display:inline-flex;align-items:center;min-height:44px;}
.fact b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;color:#b5b3aa;min-width:32px;line-height:1.25;}
.faq{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;padding:20px 0;font-family:var(--serif);font-weight:500;font-size:25px;line-height:1.25;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:20px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';font-family:var(--sans);font-size:24px;color:var(--muted);flex:0 0 auto;}
.faq[open] summary::after{content:'\2013';}
.faq p,.faq ul{margin:0 0 24px;font-size:18px;line-height:1.6;color:var(--ink-2);max-width:40em;}
.faq ul{padding-left:20px;}
.faq li{margin-bottom:6px;}
.grouphead{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--muted);margin:44px 0 2px;}

/* Pagini interioare: poza curata, titlul sub ea */
.pband{background:var(--bg);}
.pband .pic{height:46svh;min-height:300px;overflow:hidden;background:#e6e4dd;}
.pband .pic img{width:100%;height:100%;object-fit:cover;}
.pband-inner{padding:30px var(--pad) 0;color:var(--ink);}
.pband .k{display:block;margin-bottom:8px;}
@media (min-width:900px){.pband .pic{height:56svh;} .pband-inner{padding:44px 40px 0;max-width:var(--max);margin:0 auto;}}
.phead{padding:52px 0 28px;}
.phead .k{display:block;margin-bottom:8px;}
.phead p{font-size:19px;color:var(--ink-2);max-width:32em;margin:14px 0 0;}

/* Formulare */
.facts .fact{flex-direction:column;gap:4px;}
.facts .fact span{font-size:16px;color:var(--muted);font-weight:500;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.field label{font-size:16px;color:var(--ink-2);}
.field input,.field textarea,.field select{border:1px solid var(--line);border-radius:var(--r);background:#fff;font-family:inherit;font-size:17px;padding:14px 14px;outline:none;width:100%;color:var(--ink);min-height:56px;}
.field textarea{min-height:140px;}
.field select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23151412' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:2px solid var(--ink);outline-offset:1px;}
.field .opt{color:var(--muted);font-weight:400;}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
.hint{font-size:16px;line-height:1.5;color:var(--muted);margin:-6px 0 16px;}
.err{font-size:16px;line-height:1.4;color:#a23a20;margin:-10px 0 14px;scroll-margin-bottom:96px;}
.note{font-size:16px;color:var(--ink-2);margin:6px 0 0;font-style:italic;}
.formnote{font-size:16px;line-height:1.55;color:var(--muted);margin:14px 0 0;}
.formnote a,.facts a{text-decoration:underline;}
.seg{display:flex;flex-wrap:wrap;gap:8px;}
.seg label{position:relative;flex:1 1 auto;}
.seg input{position:absolute;opacity:0;width:1px;height:1px;}
.seg span{display:block;text-align:center;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:14px 12px;font-size:17px;cursor:pointer;min-height:54px;}
.seg input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.seg input:focus-visible+span{outline:2px solid var(--ink);outline-offset:1px;}
.step{display:flex;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;}
.step button{width:54px;min-height:54px;border:none;background:transparent;font-size:24px;cursor:pointer;color:var(--ink);}
.step button:disabled{color:#c9c7bf;}
.step input{flex:1;border:none;text-align:center;font-family:inherit;font-size:19px;width:40px;min-width:0;color:var(--ink);background:transparent;-moz-appearance:textfield;}
.step input::-webkit-inner-spin-button,.step input::-webkit-outer-spin-button{-webkit-appearance:none;}
.sent{text-align:center;padding:40px 22px;border:1px solid var(--line);border-radius:10px;background:#fff;}
.sent .tick{width:58px;height:58px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 16px;}
.sent b{display:block;font-family:var(--serif);font-weight:500;font-size:30px;margin-bottom:8px;}
.sent p{font-size:18px;color:var(--ink-2);margin:0;}
.fail{border:1px solid #c98a6a;border-radius:var(--r);background:#faf1ec;padding:14px 16px;font-size:17px;line-height:1.5;color:#8a4a2c;margin-top:14px;}
.fail a{text-decoration:underline;font-weight:500;}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.pricetab{width:100%;border-collapse:collapse;font-size:17px;margin:6px 0 10px;}
.pricetab th{font-size:16px;color:var(--muted);font-weight:500;text-align:right;padding:10px 0;border-bottom:1px solid var(--ink);}
.pricetab th:first-child,.pricetab td:first-child{text-align:left;}
.pricetab td{padding:11px 0;border-bottom:1px solid var(--line);text-align:right;color:var(--ink-2);}
.pricetab td:first-child{color:var(--ink);font-weight:500;}
.estimate{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:14px 0;margin:4px 0 18px;}
.estimate b{font-family:var(--serif);font-weight:500;font-size:32px;}
.estimate span{font-size:16px;color:var(--muted);}

/* Footer */
footer{background:var(--ink);color:rgba(246,244,239,.85);padding:56px 0 104px;}
.footgrid{display:grid;gap:34px;margin-bottom:40px;}
footer h4{font-family:var(--serif);font-style:italic;font-weight:400;font-size:21px;color:rgba(246,244,239,.6);margin:0 0 12px;}
footer a{display:block;padding:8px 0;font-size:18px;}
footer p{font-size:18px;line-height:1.65;margin:0;}
/* Linkurile din subsol aveau 26px inaltime si 3px intre ele. Imposibil de nimerit. */
.foot a,.footbottom a{display:inline-flex;align-items:center;min-height:44px;padding-right:14px;}
.footbottom{border-top:1px solid rgba(246,244,239,.14);padding-top:20px;font-size:16px;color:rgba(246,244,239,.72);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
@media (min-width:760px){.footgrid{grid-template-columns:1.4fr 1fr 1.1fr .8fr;gap:40px;} footer{padding:72px 0 44px;}}

/* Bara lipita jos pe mobil */
.stickybook{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px var(--pad) max(10px,env(safe-area-inset-bottom));background:rgba(246,244,239,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;transform:translateY(110%);transition:transform .25s ease;}
.stickybook.show{transform:none;}
.stickybook .btn{flex:1;min-height:54px;}
/* Padding-ul compensa bara lipita de jos, dar era pus exact pe ecranele unde bara NU
   exista. Acum e invers, cum trebuia. */
@media (min-width:900px){.stickybook{display:none;}}
@media (max-width:899px){footer{padding-bottom:88px;}}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* Galerie: grila de poze cu lightbox (tap = poza mare). Pe telefon 2 coloane, pe desktop 4. */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.gal a{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:#e6e4dd;}
.gal a.tall{grid-row:span 2;aspect-ratio:auto;}
.gal picture,.gal img{width:100%;height:100%;object-fit:cover;display:block;}
@media (min-width:760px){.gal{grid-template-columns:repeat(4,1fr);gap:12px;}}
.lb{position:fixed;inset:0;z-index:100;background:rgba(14,13,12,.96);display:none;flex-direction:column;align-items:center;justify-content:center;padding:52px 12px 24px;}
.lb.open{display:flex;}
.lb img{max-width:100%;max-height:calc(100svh - 120px);object-fit:contain;border-radius:var(--r);}
.lb .cap{color:rgba(246,244,239,.8);font-size:16px;margin-top:12px;text-align:center;}
.lb button{position:absolute;background:rgba(246,244,239,.12);color:var(--bg);border:none;border-radius:999px;width:48px;height:48px;font-size:26px;cursor:pointer;}
.lb .x{top:12px;right:12px;}
.lb .prev{left:8px;top:50%;transform:translateY(-50%);}
.lb .next{right:8px;top:50%;transform:translateY(-50%);}

/* Morzine Shuttle: the Rhodos design, with a typographic hero and request forms. */
[hidden]{display:none !important;}
html{scroll-padding-top:96px;scroll-padding-bottom:100px;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.skip{position:absolute;top:8px;left:var(--pad);z-index:100;transform:translateY(-150%);background:var(--bg);padding:12px 18px;min-height:44px;}
.skip:focus{transform:none;}
.brand{display:inline-flex;align-items:center;gap:.22em;min-height:48px;font-size:27px;}
nav.top .bar{gap:8px;}
.navright{gap:8px;}
.navright .btn{padding:10px 12px;}
.navlinks a{display:flex;align-items:center;min-height:44px;}
.navlinks a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;}
.hero{min-height:0;align-items:center;}
.hero::after,.hero-inner::before{display:none;}
.hero-inner{padding:56px var(--pad) 64px;gap:20px;}
.hero .h1{font-size:clamp(48px,8.2vw,96px);line-height:1.04;text-shadow:none;}
.hero .k,.hero p{text-shadow:none;}
.hero p{max-width:34em;}
.formwrap{max-width:720px;}
fieldset.field{border:0;padding:0;min-width:0;}
.field legend{font-size:16px;color:var(--ink-2);padding:0;margin-bottom:6px;}
.field{min-width:0;}
.field input,.field select,.field textarea{min-width:0;max-width:100%;}
.field textarea{resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1;}
.field .err{margin:2px 0 0;}
.step button{flex-shrink:0;}
.step input:focus-visible{outline-offset:-3px;}
.seg input:focus-visible{outline:0;}
.seg input{min-height:0;padding:0;border:0;}
.row2{grid-template-columns:minmax(0,1fr);gap:0;}
.card p{font-size:18px;}
.aftercards{margin:24px 0 0;}
#how,#fleet{padding-top:0;}
.pagebody{padding-top:24px;}
.prose .h3{margin-top:32px;}
.email-link,.faq p a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;}
.sent{scroll-margin:104px 0;}
.sent p + p{margin-top:20px;}
.footgrid{grid-template-columns:minmax(0,1fr);}
footer a{min-height:44px;overflow-wrap:anywhere;}
footer h4{color:rgba(246,244,239,.75);}
.bookband{padding:64px 0;}
.bookband .h2{max-width:12em;}
html:not(.js) .menubtn{display:none;}
html:not(.js) .navlinks{display:flex;}
@media (min-width:600px){.row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}}
@media (min-width:760px){.footgrid{grid-template-columns:1.2fr 1fr 1.2fr;}}
@media (min-width:900px){
  nav.top .bar{padding:12px 24px;}
  .navlinks{gap:18px;}
  .hero-inner{padding:72px var(--pad) 80px;}
}
@media (max-width:359px){:root{--pad:16px;}.brand{font-size:23px;}.navright{gap:5px;}.navright .btn{padding:10px;}}
@media (prefers-reduced-motion:reduce){.stickybook{transition:none;}}