/* 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:flex;order:3;width:100%;flex-direction:column;padding:0;margin-top:0;max-height:0;overflow:hidden;opacity:0;
  transition:max-height .25s ease,opacity .2s ease,padding .25s ease,margin-top .25s ease,border-color .25s ease;border-top:1px solid transparent;}
.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{max-height:400px;opacity:1;padding:8px 0 6px;margin-top:4px;border-top-color:var(--line);}
.menubtn svg{transition:transform .2s ease;}
nav.top.open .menubtn svg{transform:rotate(90deg);}
@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;max-height:none;overflow:visible;opacity:1;}
  .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;}}

/* ------------------------------------------------------------------------
   Morzine Shuttle: culorile brandului (albastru #2454b6 si verde #38ae1c, luate din logoul
   lui Carl de pe morzineshuttle.com), poze reale din Morzine si iconite desenate in pagina.
   Alex, 12 sept 2026: "e prea alb negru, fa-l mai cu culori, poze, iconite".
   Verdele de pe butoane e mai inchis decat cel din logo, altfel textul alb nu se citeste.
   ------------------------------------------------------------------------ */
:root{
  --bg:#f2f6fb; --ink:#10203f; --ink-2:#3b4c6b; --muted:#5b6a85; --line:#d7e0ee;
  --accent:#2454b6;                      /* albastrul din logo */
  --green:#227a10; --green-dark:#1a5f0c; /* verdele, inchis cat sa treaca la contrast */
  --green-bright:#38ae1c;                /* verdele exact din logo, doar pentru semn */
}
body{background:var(--bg);}

/* Semnul din logo, langa numele din bara de sus */
.brand{display:inline-flex;align-items:center;gap:10px;}
.mark{width:40px;height:28px;flex:none;}

nav.top{background:#fff;border-bottom:1px solid var(--line);}
.menubtn{border-color:var(--line);}
.menubtn svg{stroke:var(--accent);}

/* Butonul principal e verde, ca "pleaca"; restul albastru */
.btn-dark{background:var(--green);border-color:var(--green);color:#fff;}
.btn-dark:hover{background:var(--green-dark);border-color:var(--green-dark);}
.btn-line{border-color:var(--accent);color:var(--accent);}
.btn:focus-visible{outline:3px solid var(--accent);}
.hero .btn-dark{background:var(--green);color:#fff;border-color:var(--green);}
.hero .btn-line{border-color:#fff;color:#fff;background:rgba(8,18,40,.28);backdrop-filter:blur(4px);}

/* Poza din hero e insorita, deci umbra de sub text trebuie sa fie mai apasata */
.hero::after{background:linear-gradient(180deg,rgba(8,18,40,.5) 0%,rgba(8,18,40,.2) 42%,rgba(8,18,40,.78) 100%);}

/* Carduri cu iconite */
.iconcards{display:grid;gap:14px;}
.iconcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;}
.iconcard p{font-size:17px;line-height:1.5;color:var(--ink-2);margin:0;}
.icowrap{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;margin-bottom:14px;}
.icowrap.blue{background:#e3ebfa;color:var(--accent);}
.icowrap.green{background:#e2f4dd;color:var(--green-dark);}
.icowrap.sm{width:46px;height:46px;border-radius:13px;margin:0;flex:none;}
.ico{width:26px;height:26px;}
.ico.sm{width:20px;height:20px;}
.withico{display:inline-flex;align-items:center;gap:10px;}
.withico .ico{color:var(--accent);flex:none;}
.fact{align-items:center;gap:14px;color:var(--ink);}

/* Banda cu poza dintre sectiuni */
.photoband{max-width:var(--max);margin:0 auto;padding:0 var(--pad);}
.photoband picture{display:block;border-radius:14px;overflow:hidden;}
.photoband img{width:100%;height:clamp(200px,44vw,380px);object-fit:cover;}
.photoband .caption{font-size:16px;color:var(--muted);margin:10px 0 0;}

/* Fondurile inchise devin bleumarin, nu negru */
.dark,footer,.bookband{background:#0c1a33;}
.bookband .pic{opacity:.4;}
.seg input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff;}
.seg input:focus-visible+span{outline-color:var(--accent);}
.step input:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:1px;}
.sent,.fact b{color:var(--ink);}

@media (min-width:760px){
  .iconcards{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* Poza din hero e foarte luminoasa (cer albastru), iar regula veche stingea umbra pe ecran
   mare. Aici o punem la loc, mai apasata, si intunecam putin poza: altfel titlul alb dispare. */
header.hero::after{display:block;background:linear-gradient(180deg,rgba(8,18,40,.66) 0%,rgba(8,18,40,.42) 50%,rgba(8,18,40,.82) 100%);}
header.hero .slides img{filter:brightness(.88) saturate(1.04);}
header.hero .h1,header.hero p,header.hero .k{text-shadow:0 2px 10px rgba(5,12,28,.6),0 1px 3px rgba(5,12,28,.7);}
/* Bara lipita jos ramasese crem de la Rhodos */
.stickybook{background:rgba(255,255,255,.96);border-top:1px solid var(--line);}

/* Cei trei pasi de deasupra formularului: omul trebuie sa vada din prima ca cere un pret,
   nu ca plateste. Vechiul site sarea direct intr-un motor de rezervare care nu mai exista. */
.steps{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px;counter-reset:pas;}
.steps li{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:17px;line-height:1.5;color:var(--ink-2);}
.steps b{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--accent);color:#fff;font-size:17px;font-weight:600;}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* ------------------------------------------------------------------------
   Logoul lui Carl, primit pe 12 sept 2026, si culorile luate direct din el:
   bleumarin #0b355b si verde-petrol #288d78. Verdele de pe butoane e mai inchis,
   altfel textul alb nu trece pragul de contrast.
   ------------------------------------------------------------------------ */
:root{
  --accent:#0b355b;
  --green:#1c6b59; --green-dark:#145143; --green-bright:#288d78;
  --ink:#0d2338; --ink-2:#38506b; --muted:#586b83; --line:#d6dfea; --bg:#f2f6fb;
}
.mark{width:54px;height:auto;}
.icowrap.blue{background:#e4ecf6;color:var(--accent);}
.icowrap.green{background:#ddf0ea;color:var(--green-dark);}
.dark,footer,.bookband{background:#0b2540;}
.logo-lockup{display:block;width:min(300px,72vw);height:auto;margin:0 0 18px;}
/* Logoul in bara: semnul plus numele, din fisierul lui Carl. Inlocuieste si numele scris,
   ca sa nu apara de doua ori. */
.brandlogo{height:38px;width:auto;display:block;}
@media (min-width:900px){.brandlogo{height:44px;}}

/* ------------------------------------------------------------------------
   Logoul nou al lui Carl, 16 sept 2026 (munti, drum verde, minibus, fond aproape negru).
   Originalul: archive/logo/morzine-shuttle-logo-16sept-original.png.
   Bara de sus devine inchisa ca logoul, cu numele din el; hero-ul arata logoul intreg.
   Verdele e cel din logo (#2fbe90); pe butoane e mai inchis, pentru contrast cu textul alb.
   ------------------------------------------------------------------------ */
:root{
  --logo-bg:#030d17;
  --green:#0f7a5b; --green-dark:#0b5f47; --green-bright:#2fbe90;
}
nav.top{background:var(--logo-bg);border-bottom:1px solid rgba(255,255,255,.08);}
nav.top .navlinks a{color:#e8eef5;}
nav.top .navlinks a:hover{color:var(--green-bright);}
nav.top .menubtn{border-color:rgba(255,255,255,.25);}
nav.top .menubtn svg{stroke:#fff;}
@media (max-width:899px){nav.top .navlinks a{border-color:rgba(255,255,255,.12);}nav.top .navlinks{border-color:rgba(255,255,255,.12);}}
.brandlogo{height:22px;width:auto;}
@media (min-width:400px){.brandlogo{height:24px;}}
@media (min-width:900px){.brandlogo{height:28px;}}
.btn:focus-visible{outline-color:var(--green-bright);}

header.hero.brandhero{background:var(--logo-bg);display:block;min-height:0;}
.brandhero .brandart{max-width:760px;margin:0 auto;}
.brandhero .brandart img{width:100%;height:auto;display:block;}
.brandhero .hero-inner{padding:8px var(--pad) 48px;}
.brandhero .h1,.brandhero p,.brandhero .k{text-shadow:none;}
.brandhero .k{color:var(--green-bright);}
@media (min-width:900px){
  header.hero.brandhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
    max-width:none;padding:24px max(40px,calc((100vw - var(--max))/2));gap:24px;}
  .brandhero .brandart{order:2;max-width:none;margin:0;}
  .brandhero .hero-inner{padding:40px 0;margin:0;}
  .brandhero .h1{font-size:clamp(48px,5vw,76px);}
}
.dark,footer,.bookband{background:var(--logo-bg);}
/* Pe telefon numele din logo e lat: butonul "Request" din bara nu mai incape langa meniu.
   Hero-ul are deja butonul mare, iar mai jos apare bara lipita de jos. */
@media (max-width:479px){nav.top .navright .btn{display:none;}}
/* Marginile pozei de logo se topesc in fundal, sa nu se vada dreptunghiul */
.brandhero .brandart img{-webkit-mask-image:radial-gradient(ellipse 58% 56% at 50% 52%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 58% 56% at 50% 52%,#000 70%,transparent 100%);}
header.hero.brandhero::after{display:none;}

/* Banda de jos fara poza (Alex, 17 sept: orice poza iesea taiata ciudat intr-o banda atat de lata
   si joasa). Bleumarinul din logo, doar titlul si butonul. */
.bookband.plain{background:#0b2238;padding:72px 0;}

/* Poze cu hotelul Rhodos (Alex, 17 sept: "pune poze cu hotel"). Banda cu fatada e mai inalta,
   ca hotelul, biserica si muntele sa intre intregi; jos, Rhodos pe ninsoare langa text, nu
   intinsa pe toata latimea (acolo orice poza iesea taiata). */
.photoband img{height:auto;aspect-ratio:16/10;object-position:50% 20%;}
@media (min-width:760px){.photoband img{aspect-ratio:16/8;}}
.bookband.split{background:#0b2238;padding:56px 0;text-align:left;}
.splitband{display:grid;gap:28px;align-items:center;}
.splitpic picture,.splitpic img{display:block;width:100%;border-radius:14px;}
.splitpic img{aspect-ratio:4/3;object-fit:cover;object-position:50% 55%;}
.splittext .h2{color:#fff;margin:0 0 12px;max-width:none;}
.splittext p{color:rgba(255,255,255,.86);font-size:19px;line-height:1.5;margin:0 0 22px;}
@media (min-width:760px){
  .splitband{grid-template-columns:1fr 1fr;gap:56px;}
  .splitpic img{aspect-ratio:4/4.4;}
}

/* ------------------------------------------------------------------------
   Aerisire si aliniere, 17 sept 2026, dupa critica de design (OpenCode, qwen3.8-max) pe capturi
   reale: logoul impingea titlul sub ecran pe telefon, sectiunile aveau latimi si margini diferite,
   pasii erau inghesuiti, "Both ways" ramanea orfan, notele din "Where we go" strigau mai tare
   decat locurile, poza hotelului era centrata pe strada, butonul de jos era gri.
   Textul ramane minim 16px (regula site-ului).
   ------------------------------------------------------------------------ */

/* Bara de sus: linkurile langa buton, nu plutind la mijloc */
@media (min-width:900px){
  .navlinks{justify-content:flex-end;gap:28px;margin-right:28px;}
}

/* Hero pe telefon: intai titlul si butoanele, logoul dupa ele, mai mic */
@media (max-width:899px){
  header.hero.brandhero{display:flex;flex-direction:column;}
  .brandhero .hero-inner{order:1;padding:32px var(--pad) 8px;}
  .brandhero .brandart{order:2;max-width:340px;margin:0 auto 32px;padding:0 var(--pad);}
}

/* Coloanele de citit (formularul, Where we go, How it is run) stau CENTRATE, cu aceeasi latime,
   ca sa nu ramana gol in dreapta (Alex, 17 sept: "tot site-ul centrat frumos"). */
.wrap.narrow,.wrap.formwrap{max-width:860px;margin-left:auto;margin-right:auto;}
.wrap.narrow > *,.wrap.formwrap > *{max-width:none;}
.sechead{margin-bottom:32px;}

/* Spatii egale intre sectiuni si in jurul pozei */
@media (min-width:900px){
  section{padding:96px 0;}
  #how{padding-bottom:56px;}
  .photoband + section{padding-top:72px;}
}
.photoband .caption{margin-top:12px;}

/* Cei trei pasi: numarul deasupra, textul pe toata latimea cardului */
.steps li{padding:20px 22px;}
@media (min-width:760px){
  .steps{gap:20px;}
  .steps li{flex-direction:column;gap:14px;}
}

/* Directia: pe telefon trei randuri egale, pe ecran mare trei coloane egale */
.seg:has(> label:nth-child(3)){display:grid;grid-template-columns:1fr;gap:8px;}
@media (min-width:600px){.seg:has(> label:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr));}}

/* Where we go: locul e titlul, nota e discreta */
#where .line{font-size:18px;font-weight:500;padding:18px 0;}
#where .line .v{font-family:var(--sans);font-style:normal;font-weight:400;font-size:16px;color:var(--muted);max-width:45%;}

/* Poza hotelului: fatada in cadru, nu strada */
.photoband img{object-position:72% 25%;}
@media (min-width:760px){.photoband img{aspect-ratio:21/9;object-position:70% 30%;}}

/* Banda de jos: poza cu firma intreaga, buton verde ca in rest */
.bookband.split{padding:64px 0;}
@media (min-width:900px){.bookband.split{padding:96px 0;}}
.splitpic img{object-position:50% 62%;}
@media (min-width:760px){
  .splitband{gap:64px;}
  .splitpic{max-width:480px;}
  .splitpic img{aspect-ratio:4/5;object-position:50% 58%;}
}
.bookband .btn-dark,.bookband.split .btn-dark{background:var(--green);border-color:var(--green);color:#fff;}
.bookband .btn-dark:hover{background:var(--green-dark);border-color:var(--green-dark);}

/* Subsol: trei coloane egale, linkuri mai apropiate */
@media (min-width:760px){
  .footgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;}
  footer{padding:64px 0 32px;}
}
footer a{padding:4px 0;}
.footbottom{margin-top:8px;}

/* Runda 2 (qwen3.8-max): marginea stanga a hero-ului = marginea sectiunilor; data si ora din
   formular aratau ca un placeholder dezactivat (albastru deschis). */
@media (min-width:900px){
  header.hero.brandhero{padding-left:max(40px,calc((100vw - var(--max))/2 + var(--pad)));padding-right:max(40px,calc((100vw - var(--max))/2 + var(--pad)));}
}
input[type="date"],input[type="time"]{color:var(--ink);}
input[type="date"]::-webkit-datetime-edit,input[type="time"]::-webkit-datetime-edit{color:var(--ink);}
input[type="date"]::-webkit-datetime-edit-month-field,input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,input[type="time"]::-webkit-datetime-edit-ampm-field{color:var(--ink);}

/* Imaginile generate (17 sept): minibuzul pe drum in banda lata, sosirea la aeroport langa text.
   Ambele sunt late (16:9), deci nu le mai taiem in portret. */
.photoband img{object-position:50% 62%;}
@media (min-width:760px){.photoband img{aspect-ratio:21/9;object-position:50% 62%;}}
.splitpic img,.splitpic img[src*="aeroport"]{aspect-ratio:4/3;object-position:55% 60%;}
@media (min-width:760px){.splitpic{max-width:none;} .splitpic img{aspect-ratio:4/3;}}

@media (min-width:760px){.photoband img{object-position:50% 45%;}}

/* ------------------------------------------------------------------------
   Micro-animatii, 17 sept 2026 (Alex: site-ul parea inert, nimic nu raspundea la click).
   Tranzitii scurte pe orice e apasabil, plus scroll lin la ancorele de meniu (#request etc).
   Respecta prefers-reduced-motion: pe orice telefon cu miscarea redusa activata, totul devine
   instant, ca inainte.
   ------------------------------------------------------------------------ */
html{scroll-behavior:smooth;}
a,button,.btn,input,textarea,select,.seg span,.line,.fact,.iconcard,.step button,summary,.menubtn{
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .1s ease,opacity .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
a:hover{opacity:.75;}
.iconcard:hover{box-shadow:0 8px 24px rgba(20,20,18,.08);}
input:focus-visible,textarea:focus-visible,select:focus-visible{box-shadow:0 0 0 3px rgba(0,0,0,.06);}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  a,button,.btn,input,textarea,select,.seg span,.line,.fact,.iconcard,.step button,summary,.menubtn{transition:none;}
  .btn:hover,.btn:active{transform:none;}
}

/* Hero cu peisajul din logo ca fundal (Alex, 29 sept): munti, drumul verde si minibusul, fara scrisul
   logoului (numele e deja in bara de sus). Telefon: poza sus, textul dedesubt pe o trecere lina.
   Desktop: poza pe tot hero-ul, textul in stanga pe umbra. */
header.hero.scenehero{background:var(--logo-bg);min-height:0;display:block;}
.scenehero .scene{position:absolute;left:0;right:0;top:0;height:clamp(300px,50svh,460px);}
.scenehero .scene picture,.scenehero .scene img{display:block;width:100%;height:100%;}
.scenehero .scene img{object-fit:cover;object-position:72% 60%;}
.scenehero .scene::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,13,23,0) 0%,rgba(3,13,23,0) 80%,var(--logo-bg) 100%);}
.scenehero .hero-inner{position:relative;z-index:2;padding:calc(clamp(300px,50svh,460px) - 8px) var(--pad) 48px;}
.scenehero .k{color:var(--green-bright);}
.scenehero .h1,.scenehero p,.scenehero .k{text-shadow:0 2px 20px rgba(3,13,23,.85);}
@media (min-width:900px){
  header.hero.scenehero{min-height:min(80vh,780px);display:flex;align-items:center;}
  .scenehero .scene{height:auto;bottom:0;}
  .scenehero .scene img{object-position:70% 55%;}
  .scenehero .scene::after{background:
    linear-gradient(90deg,var(--logo-bg) 0%,rgba(3,13,23,.82) 24%,rgba(3,13,23,.3) 44%,rgba(3,13,23,0) 58%),
    linear-gradient(180deg,rgba(3,13,23,0) 84%,var(--logo-bg) 100%);}
  .scenehero .hero-inner{padding:96px max(40px,calc((100vw - var(--max))/2 + var(--pad)));max-width:none;margin:0;}
  .scenehero .hero-inner > *{max-width:600px;}
  .scenehero .h1{font-size:clamp(48px,5vw,80px);}
}

/* Ecrane foarte inguste (iPhone SE, 320px): numele din bara si butonul de meniu pe acelasi rand. */
@media (max-width:379px){.brandlogo{height:18px;}}