/* ===== Rock & Home — shared styles ===== */
:root{
  --green-900:#152420; --green-800:#1c3129; --green-700:#254237;
  --green-600:#356152; --green-500:#4f7c68;
  --sand:#e9e3d5; --cream:#f6f2e9; --paper:#fbf9f4;
  --gold:#c2a878; --ink:#20302a; --muted:#6a7a72;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Georgia","Times New Roman",serif;color:var(--ink);background:var(--paper);line-height:1.65}
h1,h2,h3,.brand{font-family:"Georgia",serif;font-weight:400}
.sans{font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:-apple-system,"Segoe UI",sans-serif;text-transform:uppercase;letter-spacing:3px;font-size:.72rem;color:var(--gold);font-weight:600}
.lead-p{font-size:1.12rem;color:#40514a;font-family:-apple-system,"Segoe UI",sans-serif;font-weight:300}
.center{text-align:center}

.btn{display:inline-block;background:var(--green-600);color:var(--cream);padding:13px 26px;border-radius:40px;font-family:-apple-system,"Segoe UI",sans-serif;font-size:.95rem;letter-spacing:.3px;border:none;cursor:pointer;transition:.25s}
.btn:hover{background:var(--green-700);transform:translateY(-1px)}
.btn-outline{background:transparent;border:1px solid var(--cream);color:var(--cream)}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-sm{padding:8px 18px;font-size:.88rem}

/* ===== NAV ===== */
header.nav{position:sticky;top:0;z-index:50;background:rgba(21,36,32,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(194,168,120,.18)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{color:var(--cream);font-size:1.35rem;letter-spacing:1px;display:flex;align-items:center;gap:10px}
.brand .mark{width:30px;height:30px;border:1.5px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--gold)}
.brand .mark-img{height:42px;width:auto;display:block}
.foot-logo{height:96px;width:auto;display:block;margin-bottom:14px}
@media(max-width:1024px){.brand .mark-img{height:36px}}
nav.links{display:flex;gap:18px;align-items:center}
nav.links a{color:var(--sand);font-family:-apple-system,"Segoe UI",sans-serif;font-size:.9rem;letter-spacing:.4px;opacity:.85;transition:.2s}
nav.links a:hover,nav.links a.active{opacity:1;color:var(--cream)}
nav.links a.active:not(.btn):not(.nav-side){border-bottom:1px solid var(--gold);padding-bottom:2px}
nav.links a.nav-side{border:1px solid var(--gold);color:var(--gold);opacity:1;padding:7px 15px;border-radius:40px;font-size:.82rem;letter-spacing:.4px;margin-left:8px}
nav.links a.nav-side:hover,nav.links a.nav-side.active{background:var(--gold);color:var(--green-900)}
.lang{display:flex;gap:2px;margin-left:6px}
.lang button{background:transparent;border:none;color:var(--sand);opacity:.55;font-size:.8rem;cursor:pointer;font-family:-apple-system,sans-serif;padding:4px 5px;letter-spacing:.5px}
.lang button.active{opacity:1;color:var(--gold);font-weight:700}
.menu-toggle{display:none;background:none;border:none;color:var(--cream);font-size:1.6rem;cursor:pointer;line-height:1}

@media(max-width:1024px){
  nav.links{position:fixed;top:70px;right:0;left:0;background:var(--green-900);flex-direction:column;gap:0;
    padding:8px 0;transform:translateY(-120%);transition:.3s;border-bottom:1px solid rgba(194,168,120,.2);max-height:calc(100vh - 70px);overflow:auto}
  nav.links.open{transform:translateY(0)}
  nav.links a{padding:14px 24px;width:100%;opacity:.9}
  nav.links a.btn{margin:8px 24px;width:auto;text-align:center}
  nav.links a.nav-side{margin:8px 24px;width:auto;text-align:center}
  nav.links a.active:not(.btn){border:none;background:rgba(255,255,255,.04)}
  .lang{margin:10px 24px}
  .menu-toggle{display:block}
}

/* focus visibility (accessibility) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--green-500);outline:none}
.dark .fg input:focus,.dark .fg select:focus,.dark .fg textarea:focus{border-color:var(--gold)}

/* ===== HERO ===== */
.hero{position:relative;display:flex;align-items:center;color:var(--cream);overflow:hidden}
.hero.home{min-height:90vh;
  background:linear-gradient(180deg,rgba(21,36,32,.35),rgba(21,36,32,.72)),
    linear-gradient(90deg,rgba(15,26,22,.75),rgba(15,26,22,.15) 55%,transparent),
    url("images/hero.jpg") center 42%/cover no-repeat,#152420}
.hero.sub{min-height:52vh;
  background:linear-gradient(180deg,rgba(21,36,32,.45),rgba(21,36,32,.7)),
    url("images/hero.jpg") center 45%/cover no-repeat,#152420}
.hero-content{position:relative;max-width:660px}
.hero h1{font-size:3.4rem;line-height:1.1;margin:16px 0}
.hero.sub h1{font-size:2.7rem;margin:10px 0 6px}
.hero p.lead{font-size:1.18rem;opacity:.92;margin-bottom:28px;font-family:-apple-system,"Segoe UI",sans-serif;font-weight:300}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .place{margin-top:32px;font-family:-apple-system,sans-serif;font-size:.85rem;letter-spacing:2px;opacity:.7;text-transform:uppercase}

/* ===== SECTIONS ===== */
section{padding:84px 0}
section.tight{padding:60px 0}
section h2{font-size:2.3rem;margin:12px 0 16px}
.intro{max-width:660px}
.alt{background:var(--paper)}
.dark{background:var(--green-900);color:var(--cream)}
.dark h2{color:var(--cream)} .dark .lead-p{color:rgba(233,227,213,.8)}
.mid{background:var(--green-700);color:var(--cream)}
.mid h2{color:var(--cream)} .mid .lead-p{color:rgba(233,227,213,.82)}
.cream-bg{background:var(--cream)}

/* two-column */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;margin-top:20px}
.split.rev{grid-template-columns:.95fr 1.05fr}
.ph{border-radius:16px;box-shadow:0 18px 40px rgba(21,36,32,.18);min-height:420px;background-size:cover;background-position:center}
.stats{display:flex;gap:34px;margin-top:28px;flex-wrap:wrap}
.stat b{display:block;font-size:2rem;color:var(--green-600)}
.dark .stat b{color:var(--gold)}
.stat span{font-family:-apple-system,sans-serif;font-size:.82rem;color:var(--muted);letter-spacing:.5px}
.dark .stat span{color:rgba(233,227,213,.7)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper);border:1px solid rgba(32,48,42,.1);border-radius:16px;overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(21,36,32,.14)}
.dark .card{background:var(--green-800);border-color:rgba(194,168,120,.15)}
.dark .card:hover{border-color:rgba(194,168,120,.4)}
.card .thumb{height:200px;background-size:cover;background-position:center;background-color:var(--green-700)}
.card .body{padding:22px;flex:1;display:flex;flex-direction:column}
.card h3{font-size:1.3rem;margin-bottom:6px}
.dark .card h3{color:var(--cream)}
.card .feat{font-family:-apple-system,sans-serif;font-size:.83rem;color:var(--muted);margin:10px 0 16px;display:flex;gap:14px;flex-wrap:wrap}
.dark .card .feat{color:rgba(233,227,213,.6)}
.card .feat span::before{content:"• ";color:var(--gold)}
.card p.desc{font-family:-apple-system,sans-serif;font-size:.9rem;color:var(--muted);margin-bottom:14px}
.dark .card p.desc{color:rgba(233,227,213,.7)}
.card .price{margin-top:auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(32,48,42,.1);padding-top:14px}
.dark .card .price{border-top-color:rgba(194,168,120,.15)}
.card .price b{font-size:1.5rem;color:var(--green-600)}
.dark .card .price b{color:var(--gold)}
.card .price small{font-family:-apple-system,sans-serif;font-size:.72rem;color:var(--muted)}
.dark .card .price small{color:rgba(233,227,213,.5)}

/* feature grid (island tiles) */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.tile{background:rgba(255,255,255,.05);border:1px solid rgba(194,168,120,.15);border-radius:14px;padding:24px}
.tile .ic{font-size:1.7rem;margin-bottom:10px}
.tile h3{font-size:1.1rem;margin-bottom:6px;color:var(--cream)}
.tile p{font-family:-apple-system,sans-serif;font-size:.84rem;color:rgba(233,227,213,.7)}

/* ===== GALLERY SLIDER ===== */
.slider{position:relative;margin-top:40px;border-radius:18px;overflow:hidden;box-shadow:0 22px 50px rgba(0,0,0,.35)}
.slides{display:flex;transition:transform .6s cubic-bezier(.6,.05,.2,.95)}
.slide{min-width:100%;position:relative;aspect-ratio:16/9;background:#152420}
.slide img{width:100%;height:100%;object-fit:cover}
.slide .cap{position:absolute;inset:auto 0 0 0;padding:40px 28px 22px;background:linear-gradient(transparent,rgba(15,26,22,.85));font-family:-apple-system,"Segoe UI",sans-serif}
.slide .cap b{display:block;font-family:"Georgia",serif;font-size:1.5rem;margin-bottom:2px;color:var(--cream)}
.slide .cap span{font-size:.9rem;color:rgba(233,227,213,.8)}
.s-btn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(21,36,32,.5);border:1px solid rgba(233,227,213,.4);color:var(--cream);font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;backdrop-filter:blur(4px);z-index:5}
.s-btn:hover{background:rgba(21,36,32,.85)}
.s-prev{left:16px}.s-next{right:16px}
.dots{display:flex;gap:9px;justify-content:center;margin-top:22px}
.dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(233,227,213,.35);cursor:pointer;padding:0;transition:.2s}
.dark .dots button{background:rgba(233,227,213,.3)}
.dots button.active{background:var(--gold);width:26px;border-radius:6px}

/* ===== BOOKING / FORMS ===== */
.book-bar{position:relative;margin:-46px auto 0;max-width:960px;background:var(--cream);border-radius:16px;box-shadow:0 20px 50px rgba(21,36,32,.22);display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;overflow:hidden;z-index:20}
.book-bar .field{padding:16px 20px;border-right:1px solid rgba(32,48,42,.1)}
.book-bar label{display:block;font-family:-apple-system,sans-serif;font-size:.68rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:4px}
.book-bar input,.book-bar select{width:100%;border:none;background:transparent;font-family:-apple-system,sans-serif;font-size:1rem;color:var(--ink);outline:none}
.book-bar .go{display:flex;align-items:center;padding:0 8px}
.book-bar .go .btn{border-radius:12px;margin:8px;width:100%;justify-content:center;display:flex;align-items:center}

form.rh{font-family:-apple-system,"Segoe UI",sans-serif}
.form-row{display:flex;gap:16px;flex-wrap:wrap}
.form-row .fg{flex:1;min-width:180px}
.fg{margin-bottom:16px}
.fg label{display:block;font-size:.78rem;letter-spacing:.5px;margin-bottom:6px;color:var(--muted)}
.dark .fg label{color:rgba(233,227,213,.7)}
.fg input,.fg select,.fg textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(32,48,42,.2);background:#fff;color:var(--ink);font-family:-apple-system,sans-serif;font-size:.95rem}
.dark .fg input,.dark .fg select,.dark .fg textarea{border-color:rgba(194,168,120,.25);background:rgba(255,255,255,.05);color:var(--cream)}
.fg textarea{min-height:120px;resize:vertical}
.form-note{font-size:.82rem;color:var(--muted);margin-top:8px}
.dark .form-note{color:rgba(233,227,213,.6)}

.contact-info{font-family:-apple-system,sans-serif}
.contact-info p{margin-bottom:14px;color:rgba(233,227,213,.85)}
.contact-info .k{color:var(--gold);font-size:.75rem;text-transform:uppercase;letter-spacing:1.5px;display:block;margin-bottom:2px}

/* CTA band */
.cta-band{background:linear-gradient(120deg,var(--green-700),var(--green-900));color:var(--cream);text-align:center;padding:70px 24px;border-radius:0}
.cta-band h2{color:var(--cream);margin-bottom:12px}
.cta-band p{font-family:-apple-system,sans-serif;color:rgba(233,227,213,.85);max-width:520px;margin:0 auto 26px}

/* top-aligned split (forms) */
.split.top{align-items:start}

/* steps (how it works) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;counter-reset:step}
.step{position:relative;padding:26px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(194,168,120,.15)}
.step h3{font-size:1.1rem;margin-bottom:6px;color:var(--cream)}
.step p{font-family:-apple-system,sans-serif;font-size:.9rem;color:rgba(233,227,213,.75)}

/* portfolio grid */
.folio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.folio-item{border-radius:14px;overflow:hidden;background:var(--paper);border:1px solid rgba(32,48,42,.1)}
.folio-item .img{height:180px;background-size:cover;background-position:center;position:relative;
  background-color:var(--green-700)}
.folio-item .img::after{content:"📷";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2rem;opacity:.25}
.folio-item .cap{padding:16px 18px}
.folio-item .cap b{display:block;font-family:"Georgia",serif;font-size:1.05rem;margin-bottom:2px}
.folio-item .cap span{font-family:-apple-system,sans-serif;font-size:.82rem;color:var(--muted)}

/* service list */
.serv-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.serv-item{background:var(--paper);border:1px solid rgba(32,48,42,.1);border-radius:14px;padding:26px}
.serv-item .ic{font-size:1.6rem;margin-bottom:10px}
.serv-item h3{font-size:1.15rem;margin-bottom:6px}
.serv-item p{font-family:-apple-system,sans-serif;font-size:.88rem;color:var(--muted)}

footer{background:#0f1a16;color:rgba(233,227,213,.6);padding:46px 0;font-family:-apple-system,sans-serif;font-size:.85rem}
.foot-inner{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px}
.foot-col a{display:block;color:rgba(233,227,213,.7);margin-bottom:8px;transition:.2s}
.foot-col a:hover{color:var(--cream)}
.foot-col .h{color:var(--gold);text-transform:uppercase;letter-spacing:1.5px;font-size:.72rem;margin-bottom:12px}

@media(max-width:920px){
  section{padding:64px 0}
  section h2{font-size:2rem}
  .hero.home h1{font-size:2.6rem}.hero.sub h1{font-size:2rem}
  .split,.split.rev{grid-template-columns:1fr;gap:32px}
  .ph{min-height:300px}
  .cards,.cards.two,.serv-list,.steps,.folio{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .book-bar{grid-template-columns:1fr 1fr;margin:-30px 24px 0}
  .book-bar .go{grid-column:span 2}
  .s-btn{width:40px;height:40px;font-size:1.2rem}.slide .cap b{font-size:1.2rem}
}

/* ===== PHONES ===== */
@media(max-width:600px){
  .wrap{padding:0 18px}
  section{padding:48px 0}
  section.tight{padding:40px 0}
  section h2{font-size:1.65rem;margin:10px 0 12px}
  .intro{max-width:100%}
  .lead-p{font-size:1rem}
  .eyebrow{letter-spacing:2px;font-size:.68rem}

  /* nav */
  .nav-inner{height:62px}
  .brand{font-size:1.15rem;letter-spacing:.5px;gap:8px}
  .brand .mark-img{height:32px}
  nav.links{top:62px;max-height:calc(100vh - 62px)}
  .lang{gap:6px}
  .lang button{padding:8px 9px;font-size:.85rem}

  /* hero */
  .hero.home{min-height:80vh}
  .hero.sub{min-height:40vh}
  .hero h1,.hero.home h1{font-size:2rem;line-height:1.15;margin:12px 0}
  .hero.sub h1{font-size:1.7rem}
  .hero p.lead{font-size:1.02rem;margin-bottom:22px}
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
  .hero-cta .btn{text-align:center}
  .hero .place{margin-top:22px;font-size:.72rem;letter-spacing:1.5px}

  /* booking bar -> single clean column */
  .book-bar{grid-template-columns:1fr;margin:-22px 16px 0;border-radius:14px}
  .book-bar .field{padding:12px 16px;border-right:none;border-bottom:1px solid rgba(32,48,42,.1)}
  .book-bar .go{grid-column:auto;padding:10px 16px 14px}
  .book-bar .go .btn{margin:0}

  /* content blocks */
  .stats{gap:22px;margin-top:22px}
  .stat b{font-size:1.7rem}
  .split,.split.rev{gap:26px}
  .ph{min-height:240px;border-radius:14px}
  .cards,.serv-list,.steps,.folio{margin-top:28px}
  .card .thumb{height:180px}
  .card .body{padding:18px}
  .card h3{font-size:1.2rem}

  /* gallery */
  .slider{margin-top:26px;border-radius:14px}
  .slide .cap{padding:26px 16px 16px}
  .slide .cap b{font-size:1.15rem}
  .s-btn{width:36px;height:36px;font-size:1.1rem}
  .s-prev{left:10px}.s-next{right:10px}

  /* cta + forms */
  .cta-band{padding:52px 20px}
  .cta-band h2{font-size:1.6rem}
  .form-row{gap:0}
  .form-row .fg{min-width:100%}

  /* footer */
  footer{padding:40px 0}
  .foot-inner{gap:26px}
  .foot-col{width:100%;max-width:100%!important}
  .foot-logo{height:72px}
}

@media(max-width:380px){
  .hero h1,.hero.home h1{font-size:1.8rem}
  .hero.sub h1{font-size:1.55rem}
  .section h2,section h2{font-size:1.5rem}
  .brand{font-size:1.05rem}
}