/* ========== THEME / VARIABLES ========== */

:root{

  --bg: #040404;

  --surface: #121212;

  --surface-2: #1a1a1a;

  --text: #d2d2d2;

  --muted: #b4b3b3;

  --brand: #F7C34E;



  --radius: 14px;

  --shadow-soft: 0 10px 24px rgba(0,0,0,.35);

  --shadow: 0 12px 34px rgba(0,0,0,.45);



  --container: 1140px;

  --nav-h: 72px;

  --gap: 18px;

  --type-scale: 1;



  /* Home/References hero focus (used by hero-cover) */

  --hero-x: 78%;

  --hero-y: 22%;



  /* About/Blog page-hero background focus */

  --about-bg-x: 50%;

  --about-bg-y: 35%;

}



/* ========== BASE / RESET ========== */

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{

  margin:0;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  font-size: calc(16px * var(--type-scale));

  background: var(--bg);

  color: var(--text);

  line-height: 1.55;

}

a{ color: inherit; }

img{ max-width: 100%; display:block; }



/* ========== LAYOUT ========== */

.container{

  width: min(100% - 32px, var(--container));

  margin-inline: auto;

}



/* Skip link (a11y) */

.skip-link{

  position:absolute;

  left:-999px;

  top:auto;

  width:1px;

  height:1px;

  overflow:hidden;

  z-index:9999;

}

.skip-link:focus{

  left:16px;

  top:16px;

  width:auto;

  height:auto;

  padding:10px 12px;

  background: var(--surface);

  border:1px solid rgba(255,255,255,.18);

  border-radius: 10px;

}



/* ========== HEADER / NAV ========== */

header{

  position: sticky;

  top:0;

  z-index:50;

  background: rgba(18,18,18,.72);

  backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(255,255,255,.08);

}



.nav{

  height: var(--nav-h);

  display:flex;

  align-items:center;

  justify-content:space-between;

}



.brand{

  display:flex;

  align-items:center;

  gap:10px;

  text-decoration:none;

  white-space: nowrap;

}

.brand__name{

  font-size: 24px;

  color: var(--brand);

  font-weight: 850;

  letter-spacing: .2px;

}



.nav-links{

  display:flex;

  align-items:center;

  gap: 14px;

}



.nav-dropdown{

  position: relative;

}



.nav-links a{

  text-decoration:none;

  color: var(--muted);

  font-weight: 700;

  font-size: 14px;

  padding: 10px 10px;

  border-radius: 10px;

  transition: color .2s ease, background .2s ease;

  white-space: nowrap;

}

.nav-links a:hover,

.nav-links a:focus-visible{

  color: var(--brand);

  background: rgba(247,195,78,.08);

  outline: none;

}

.nav-links a.active{

  color: var(--brand);

  background: rgba(247,195,78,.10);

}



.nav-dropdown-toggle{

  display:inline-flex;

  align-items:center;

  gap: 7px;

}



.nav-dropdown-toggle::after{

  content: "";

  display: inline-block;

  width: 7px;

  height: 7px;

  border-right: 2px solid currentColor;

  border-bottom: 2px solid currentColor;

  transform: rotate(45deg);

  position: relative;

  top: -3px;

  opacity: .85;

}



.nav-dropdown-menu{

  position: absolute;

  left: 0;

  top: 100%;

  min-width: 210px;

  padding: 8px;

  border-radius: 12px;

  background: rgba(18,18,18,.98);

  border: 1px solid rgba(255,255,255,.10);

  box-shadow: var(--shadow-soft);

  display: grid;

  gap: 6px;

  opacity: 0;

  transform: translateY(8px);

  pointer-events: none;

  transition: opacity .24s ease, transform .24s ease;

  z-index: 60;

}



.nav-dropdown-menu a{

  display: block;

  padding: 10px 12px;

  border-radius: 10px;

  font-size: 14px;

  text-transform: uppercase;

}



.nav-dropdown:hover .nav-dropdown-menu,

.nav-dropdown:focus-within .nav-dropdown-menu{

  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;

}



.nav-right{

  display:flex;

  align-items:center;

  gap: 12px;

}



.contact-inline{

  display:flex;

  align-items:center;

  gap: 10px;

  font-size: 14px;

  color: var(--muted);

  white-space: nowrap;

}

.contact-inline a{

  text-decoration:none;

  color: var(--muted);

}

.contact-inline a.tel{

  color: var(--brand);

  font-weight: 800;

}

.contact-inline a:hover,

.contact-inline a:focus-visible{

  color: var(--brand);

  outline:none;

}



.social a{

  display:flex;

  align-items:center;

  justify-content:center;

  width: 38px;

  height: 38px;

  border-radius: 12px;

  background: rgba(255,255,255,.06);

  border: 1px solid rgba(255,255,255,.10);

  transition: transform .2s ease, background .2s ease;

  text-decoration:none;

}

.social a:hover,

.social a:focus-visible{

  background: rgba(247,195,78,.12);

  transform: translateY(-1px);

  outline: none;

}

.social img{ width: 20px; height: 20px; }



/* Primary CTA */

.cta{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding: 11px 14px;

  border-radius: 12px;

  background: var(--brand);

  color: #111;

  text-decoration:none;

  font-weight: 900;

  font-size: 14px;

  box-shadow: 0 10px 25px rgba(247,195,78,.18);

  transition: transform .2s ease, filter .2s ease;

  white-space: nowrap;

}

.cta:hover,

.cta:focus-visible{

  transform: translateY(-1px);

  filter: brightness(1.02);

  outline:none;

}



/* Secondary button/link */

.btn-secondary{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding: 11px 14px;

  border-radius: 12px;

  background: rgba(255,255,255,.06);

  border: 1px solid rgba(255,255,255,.12);

  color: var(--text);

  text-decoration:none;

  font-weight: 850;

  font-size: 14px;

  transition: transform .2s ease, background .2s ease;

}

.btn-secondary:hover,

.btn-secondary:focus-visible{

  background: rgba(247,195,78,.08);

  transform: translateY(-1px);

  outline:none;

}



/* Hamburger */

.hamburger{

  display:none;

  width: 42px;

  height: 42px;

  border-radius: 12px;

  border: 1px solid rgba(255,255,255,.12);

  background: rgba(255,255,255,.06);

  color: var(--brand);

  cursor:pointer;

  font-size: 20px;

  align-items:center;

  justify-content:center;

  transition: background .2s ease;

}

.hamburger:hover,

.hamburger:focus-visible{

  background: rgba(247,195,78,.10);

  outline:none;

}



/* Mobile menu panel */

.mobile-panel{

  display:none;

  padding: 10px 0 18px;

  border-top: 1px solid rgba(255,255,255,.08);

}

.mobile-panel.is-open{ display:block; }



.mobile-links{

  display:flex;

  flex-direction:column;

  gap: 8px;

  padding-top: 8px;

}

.mobile-links a{

  text-decoration:none;

  color: var(--muted);

  font-size: 14px;

  font-weight: 800;

  padding: 12px 12px;

  border-radius: 12px;

  background: rgba(255,255,255,.04);

  border: 1px solid rgba(255,255,255,.08);

}

.mobile-links a:hover,

.mobile-links a:focus-visible{

  color: var(--brand);

  background: rgba(247,195,78,.08);

  outline:none;

}



.mobile-services{

  display:grid;

  gap: 8px;

}



.mobile-services-toggle{

  width: 100%;

  display:flex;

  align-items:center;

  justify-content:space-between;

  font-family: inherit;

  text-decoration:none;

  color: var(--muted);

  font-weight: 800;

  font-size: 14px;

  padding: 12px 12px;

  border-radius: 12px;

  background: rgba(255,255,255,.04);

  border: 1px solid rgba(255,255,255,.08);

  cursor: pointer;

}



.mobile-services-toggle::after{

  content: "";

  width: 7px;

  height: 7px;

  border-right: 2px solid currentColor;

  border-bottom: 2px solid currentColor;

  transform: rotate(45deg);

  transition: transform .2s ease;

}



.mobile-services-toggle:hover,

.mobile-services-toggle:focus-visible{

  color: var(--brand);

  background: rgba(247,195,78,.08);

  outline: none;

}



.mobile-services-toggle[aria-expanded="true"]{

  color: var(--brand);

  background: rgba(247,195,78,.08);

}



.mobile-services-toggle[aria-expanded="true"]::after{

  transform: rotate(-135deg);

}



.mobile-services-list{

  display:none;

  gap: 8px;

  padding-left: 10px;

}



.mobile-services-list.is-open{

  display:grid;

}



.mobile-services-list a{

  font-size: 14px;

  padding: 10px 12px;

  background: rgba(255,255,255,.03);

}



/* ========== TYPOGRAPHY HELPERS ========== */

h1{

  margin: 0 0 12px;

  font-size: calc(clamp(30px, 4vw, 52px) * var(--type-scale));

  line-height: 1.08;

  letter-spacing: -0.6px;

  color: var(--brand);

}

.lead{

  margin: 0;

  max-width: 70ch;

  font-size: calc(18px * var(--type-scale));

  color: var(--muted);

}

.hero-lead{

  margin: 0 0 20px;

  color: var(--text);

  font-size: calc(clamp(16px, 1.55vw, 19px) * var(--type-scale));

  line-height: 1.6;

  max-width: 58ch;

}

.page-lead{

  margin: 0 0 22px;

  color: var(--muted);

  max-width: 70ch;

}



/* ========== GENERIC HERO (simple) ========== */

.hero{

  padding: 50px 0 24px;

}



/* ========== HERO COVER (Home + References) ==========

   Add class="hero hero-cover" to keep the big background hero.

*/

.hero-cover{

  position: relative;

  overflow:hidden;

  padding: clamp(34px, 5vw, 70px) 0;

  min-height: calc(80vh - var(--nav-h));

  display:flex;

  align-items:center;

}

.hero-cover::before{

  content:"";

  position:absolute;

  inset:0;

  background:

    radial-gradient(1200px 600px at 20% 20%, rgba(247,195,78,.10), transparent 60%),

    linear-gradient(90deg, rgba(4,4,4,.96) 0%, rgba(4,4,4,.86) 42%, rgba(4,4,4,.40) 100%),

    url("IMG_6387.jpg");

  background-size: auto, auto, cover;

  background-repeat: no-repeat;

  background-position: 20% 20%, 0 0, var(--hero-x) var(--hero-y);

  opacity: .90;

  z-index:-2;

  transform: none;

}

.hero-cover::after{

  content:"";

  position:absolute;

  inset:0;

  background: linear-gradient(180deg, rgba(4,4,4,.10) 0%, rgba(4,4,4,.65) 100%);

  z-index:-1;

}





/* Hero inner layout */

.hero-grid{

  display:grid;

  grid-template-columns: 1.2fr .8fr;

  gap: clamp(18px, 4vw, 40px);

  align-items: start;

}

.hero-kicker{

  color: rgba(247,195,78,.97);

  font-weight: 860;

  letter-spacing: .1px;

  font-size: clamp(21px, 2.9vw, 36px);

  line-height: 1.16;

  text-transform: none;

  text-wrap: balance;

  max-width: 21ch;

  margin: 0 0 14px;

}



.kicker{

  color: rgba(247,195,78,.95);

  font-weight: 850;

  letter-spacing: .4px;

  font-size: 13px;

  text-transform: uppercase;

  margin: 0 0 10px;

}

.hero-actions,

.side-actions{

  display:flex;

  align-items:center;

  gap: 12px;

  flex-wrap: wrap;

  margin-top: 12px;

  margin-bottom: 18px;

}



/* Side panel (used on home + refs) */

.hero-side{

  background: rgba(18,18,18,.72);

  border: 1px solid rgba(255,255,255,.10);

  border-radius: var(--radius);

  padding: 18px;

  box-shadow: var(--shadow);

  

}

.hero-side h3{

  margin: 0 0 10px;

  color: var(--brand);

  font-size: 18px;

}

.hero-side p{

  margin: 0 0 12px;

  color: var(--muted);

  font-size: 14px;

}

.hero-side ul{

  margin: 0;

  padding-left: 18px;

  color: var(--muted);

  font-size: 14px;

}

.hero-side li{ margin: 6px 0; }



/* ========== CARDS (generic panel) ========== */

.card{

  background: rgba(18,18,18,.78);

  border: 1px solid rgba(255,255,255,.10);

  border-radius: var(--radius);

  padding: 18px;

  box-shadow: var(--shadow-soft);

}



/* Home service cards grid */

.cards{

  display:grid;

  grid-template-columns: repeat(3, 1fr);

  gap: var(--gap);

}



/* Home service cards (links) */

.cards .card{

  display:block;

  text-decoration:none;

  transition: transform .42s cubic-bezier(.22, .61, .36, 1), border-color .36s ease, background .36s ease;

  position: relative;

  overflow:hidden;

  padding: 18px 18px 16px;

}

.cards .card::before{

  content:"";

  position:absolute;

  inset:-2px;

  background: radial-gradient(600px 200px at 30% 0%, rgba(247,195,78,.16), transparent 60%);

  opacity: .6;

  z-index: 0;

  pointer-events:none;

}

.cards .card > *{ position:relative; z-index:1; }

.cards .card:hover,

.cards .card:focus-visible{

  transform: translateY(-2px);

  border-color: rgba(247,195,78,.35);

  background: rgba(26,26,26,.85);

  outline:none;

}

.cards .card h2{

  margin: 0 0 8px;

  font-size: 18px;

  color: var(--brand);

  letter-spacing: -.2px;

}

.cards .card p{

  margin: 0;

  color: var(--muted);

  font-size: 15px;

}

.cards .card .card-extra{

  margin-top: 0;

  padding-top: 0;

  border-top: 1px solid transparent;

  max-height: 0;

  opacity: 0;

  transform: translateY(3px);

  overflow: hidden;

  transition: max-height .52s cubic-bezier(.16, 1, .3, 1), opacity .42s ease, transform .42s ease, margin-top .42s ease, padding-top .42s ease, border-color .42s ease;

}

.cards .card .card-extra h3{

  margin: 0 0 8px;

  font-size: 14px;

  color: var(--brand);

}

.cards .card .card-extra ul{

  margin: 0;

  padding-left: 18px;

  color: var(--text);

  font-size: 14px;

  line-height: 1.45;

}

.cards .card .card-extra li{

  margin: 4px 0;

}

.cards .card:hover .card-extra,

.cards .card:focus-visible .card-extra,

.cards .card:focus-within .card-extra{

  margin-top: 12px;

  padding-top: 12px;

  border-top-color: rgba(255,255,255,.12);

  max-height: 420px;

  opacity: 1;

  transform: translateY(0);

}

.cards .card .hint{

  margin-top: 12px;

  display:inline-flex;

  align-items:center;

  gap: 8px;

  color: rgba(247,195,78,.92);

  font-weight: 850;

  font-size: 13px;

}



/* ========== ABOUT / BLOG PAGE HERO (background2.jpeg) ========== */

.page-hero{

  position: relative;

  overflow:hidden;

  padding: clamp(34px, 5vw, 64px) 0;

}

.page-hero::before{

  content:"";

  position:absolute;

  inset:0;

  background:

    radial-gradient(1200px 600px at 20% 0%, rgba(247,195,78,.10), transparent 60%),

    linear-gradient(180deg, rgba(4,4,4,.50) 40%, rgba(4,4,4,.82) 100%),

    url("about_me/background2.jpeg");

  background-size: auto, auto, cover;

  background-repeat:no-repeat;

  background-position: 20% 0%, 0 0, var(--about-bg-x) var(--about-bg-y);

  opacity: .95;

  z-index:-2;

  transform: scale(1.02);

}

.page-hero::after{

  content:"";

  position:absolute;

  inset:0;

  background: linear-gradient(90deg, rgba(4,4,4,.92) 0%, rgba(4,4,4,.76) 55%, rgba(4,4,4,.35) 100%);

  z-index:-1;

}



/* About page content blocks */

.content-card{

  background: rgba(18,18,18,.72);

  border: 1px solid rgba(255,255,255,.10);

  border-radius: var(--radius);

  padding: 18px;

  box-shadow: var(--shadow);

}

.content-card p{ margin: 0 0 12px; color: var(--text); }

.content-card p:last-child{ margin-bottom: 0; }



.side-card{

  background: rgba(18,18,18,.72);

  border: 1px solid rgba(255,255,255,.10);

  border-radius: var(--radius);

  padding: 18px;

  box-shadow: var(--shadow-soft);

}

.side-card h2{

  margin: 0 0 10px;

  color: var(--brand);

  font-size: 18px;

}

.side-card ul{

  margin: 0;

  padding-left: 18px;

  color: var(--muted);

  font-size: 14px;

}

.side-card li{ margin: 6px 0; }



/* ========== CONTACT PAGE ========== */

.page{

  padding: 0 0 clamp(26px, 4vw, 46px) 0;

}

.page h1{

  font-size: calc(clamp(28px, 3.2vw, 44px) * var(--type-scale));

}



.contact-grid{

  display:grid;

  grid-template-columns: 1.15fr .85fr;

  gap: 22px;

  align-items: start;

}



.map-title{

  margin: 0 0 12px;

  color: var(--brand);

  font-size: 18px;

}

.map-embed{

  border-radius: 14px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.10);

  aspect-ratio: 16 / 10;

}

.map-embed iframe{

  width: 100%;

  height: 100%;

  border: 0;

  display:block;

}



/* Form base (shared by contact + price) */

form h2{

  margin: 0 0 12px;

  color: var(--brand);

  font-size: 18px;

}

label{

  display:block;

  font-size: 14px;

  color: var(--muted);

  margin-bottom: 6px;

}

input, select, textarea{

  width:100%;

  padding:12px;

  border-radius:12px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.18);

  color:var(--text);

  font-size:14px;

  outline: none;

}

textarea{ resize: vertical; }

input:focus, select:focus, textarea:focus{

  border-color: rgba(247,195,78,.45);

  box-shadow: 0 0 0 4px rgba(247,195,78,.10);

}



select{ cursor: pointer; }





/* ===== SELECT DROPDOWN (options) – lepší čitelnost ===== */

select option,

select optgroup{

  background-color: #121212; /* stejné jako --surface */

  color: #eaeaea;           /* světlejší než --text pro lepší kontrast */

}









.toggle-row{

  margin-top: 12px;

  display:flex;

  align-items:center;

  gap: 10px;

  color: var(--muted);

  font-size: 14px;

  user-select: none;

}

.toggle-row input{

  width: 16px;

  height: 16px;

  padding: 0;

  margin: 0;

}



.hidden{ display:none; }



.submit-row{

  margin-top: 16px;

  display:flex;

  gap: 10px;

  align-items:center;

  justify-content:flex-start;

  flex-wrap: wrap;

}

button[type="submit"]{

  border: 0;

  border-radius: 12px;

  padding: 12px 16px;

  background: var(--brand);

  color: #111;

  font-weight: 900;

  cursor: pointer;

  transition: transform .2s ease, filter .2s ease;

}

button[type="submit"]:hover{

  transform: translateY(-1px);

  filter: brightness(1.02);

}



/* ========== PRICE ESTIMATION PAGE (tabs + form grid) ========== */

.tabs{

  display:grid;

  grid-template-columns: repeat(3,1fr);

  gap:10px;

  margin-bottom:20px;

}

.tabs button{

  padding:12px;

  border-radius:12px;

  background:rgba(255,255,255,.06);

  border:1px solid rgba(255,255,255,.12);

  color:var(--text);

  font-weight:800;

  cursor:pointer;

}

.tabs button.active{

  background:var(--brand);

  color:#111;

}



form{ margin-top: 10px; }



.grid{

  display:grid;

  grid-template-columns: repeat(2,1fr);

  gap:14px;

}

@media (max-width:800px){

  .grid{ grid-template-columns: 1fr; }

}



label{

  display:block;

  font-size:14px;

  color:var(--muted);

  margin-bottom:6px;

}

input, select, textarea{

  width:100%;

  padding:12px;

  border-radius:12px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.18);

  color:var(--text);

  font-size:14px;

}



textarea{resize:vertical}







.choice-block{

  display:flex;

  flex-direction:column;

  gap:10px;

}



.choice-title{

  font-size: 14px;

  color: var(--muted);

  margin-top: 2px;

}



/* container for multiple pills */

.choice-group{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

  align-items:flex-start;

}



/* label acts as the button */

.choice-pill{

  position:relative;

  display:inline-flex;

  align-items:center;

  cursor:pointer;

  user-select:none;

}



/* hide the real checkbox but keep it accessible */

.choice-pill input{

  position:absolute;

  opacity:0;

  pointer-events:none;

  width:1px;

  height:1px;

}



/* the visible "button" surface */

.choice-pill span{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding: 10px 12px;

  border-radius: 12px;

  background: rgba(255,255,255,.06);

  border: 1px solid rgba(255,255,255,.12);

  color: var(--text);

  font-weight: 800;

  font-size: 14px;

  line-height: 1;

  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;

}



/* hover/focus */

.choice-pill:hover span{

  background: rgba(247,195,78,.08);

  border-color: rgba(247,195,78,.30);

  transform: translateY(-1px);

}



.choice-pill input:focus-visible + span{

  outline:none;

  border-color: rgba(247,195,78,.45);

  box-shadow: 0 0 0 4px rgba(247,195,78,.12);

}



/* ACTIVE state */

.choice-pill input:checked + span{

  background: var(--brand);

  border-color: var(--brand);

  color: #111;

  box-shadow: 0 10px 25px rgba(247,195,78,.18);

}



/* optional: make some pills full width (useful for message/file toggles) */

.choice-pill--wide{

  margin-top: 14px;

  width: 60%;

}

.choice-pill--wide span{

  width: 75%;

  justify-content: flex-start;

  min-height: 32px;      

  padding: 12px 16px;    

  font-size: 14px;       

  font-weight: 800;      

  border-radius: 14px;



}



#msgField textarea{

  height: 64px;          /* <- dej stejnou hodnotu jako input Telefon */

  min-height: 48px;

  padding: 12px 16px;    /* podobné jako input */

  font-size: 16px;

  line-height: 24px;

  box-sizing: border-box;

  width: 50%;

}





#fileField input[type="file"]{

  height: 48px;          /* <- stejná výška jako Telefon */

  padding: 10px 12px;

  font-size: 16px;

  box-sizing: border-box;

  width: 50%;

}







.hidden{display:none}



.divider{

  margin:28px 0;

  border-top:1px solid #222;

}



/* Price submit button */

.submit{

  width:100%;

  margin-top:20px;

  padding:14px;

  border-radius:14px;

  background:var(--brand);

  color:#111;

  font-size:16px;

  font-weight:900;

  border:0;

  cursor:pointer;

}

.submit:hover{ filter: brightness(1.02); }



.gdpr{

  margin-top:12px;

  font-size:12px;

  color:var(--muted);

}

.gdpr a{ color: var(--brand); }



/* ========== BLOG PAGE ========== */

.blog-grid{

  display:grid;

  grid-template-columns: repeat(3,1fr);

  gap: var(--gap);

}

.blog-card{

  background: rgba(18,18,18,.78);

  border: 1px solid rgba(255,255,255,.1);

  border-radius: var(--radius);

  padding: 18px;

  transition: .25s;

}

.blog-card:hover{

  transform: translateY(-4px);

  border-color: rgba(247,195,78,.35);

}

.blog-card h2{

  font-size: 18px;

  color: var(--brand);

  margin: 12px 0 6px;

}

.meta{

  font-size: 13px;

  color: rgba(247,195,78,.85);

  margin-bottom: 8px;

}

.excerpt{ color: var(--muted); font-size: 15px; }



.search-box{ margin: 30px 0 18px; }

.search-box input{

  width:100%;

  max-width:520px;

  padding:12px 14px;

  border-radius:12px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.2);

  color:var(--text);

}



.no-results{

  margin: 6px 0 10px;

  color: var(--muted);

  font-size: 14px;

}



.older{ margin-top: 50px; }

table{

  width:100%;

  border-collapse: collapse;

}

th, td{

  padding:12px 8px;

  border-bottom:1px solid #333;

  text-align:left;

}

th{ color: var(--brand); }

.load-more{

  margin-top:20px;

  padding:10px 16px;

  border-radius:10px;

  background: var(--brand);

  color:#000;

  border:0;

  font-weight:800;

  cursor:pointer;

}



/* ========== BOTTOM SECTION (shared) ========== */

.bottom{

  padding: 34px 0;

  background: var(--surface-2);

  border-top: 1px solid rgba(255,255,255,.08);

  margin-top: 0;

}

.bottom-grid{

  display:grid;

  grid-template-columns: 1.4fr 1fr;

  gap: 26px;

  align-items: start;

}

.panel{

  background: rgba(255,255,255,.03);

  border: 1px solid rgba(255,255,255,.08);

  border-radius: var(--radius);

  padding: 18px;

}

.panel h2{

  margin: 0 0 14px;

  color: var(--brand);

  font-size: 20px;

}

.address{

  display:flex;

  gap: 16px;

  align-items:flex-start;

  justify-content: space-between;

}

.address-text{

  color: var(--text);

  font-size: 14px;

  line-height: 1.6;

}

.address-text p{ margin: 4px 0; }



.logo-box{

  width: 92px;

  flex: 0 0 auto;

  opacity: .95;

}

.logo-box > img{

  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.10);

  background: rgba(0,0,0,.25);

  padding: 8px;

}



.footer-social{

  display: flex;

  width: 100%;

  justify-content: flex-end;

  gap: 8px;

  margin-top: 10px;

}



.footer-social img{

  width: 20px;

  height: 20px;

  border: 0;

  background: transparent;

  padding: 0;

  border-radius: 0;

}



footer{

  padding: 18px 0 24px;

  text-align:center;

  color: var(--muted);

  font-size: 13px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 8px;

}



.cookie-settings-trigger{

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 0;

  padding: 0;

  border: 0;

  border-radius: 0;

  background: transparent;

  color: var(--brand);

  font: inherit;

  font-weight: 800;

  cursor: pointer;

}



.cookie-settings-trigger:hover,

.cookie-settings-trigger:focus-visible{

  text-decoration: underline;

  outline: none;

}



/* ========== COOKIE BANNER ========== */

.cookie-banner{

  position: fixed;

  inset: 0;

  z-index: 1200;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  padding: 24px;

  background: rgba(4,4,4,.48);

  pointer-events: auto;

}



.cookie-banner__panel{

  width: min(100%, 760px);

  padding: 20px 22px;

  border-radius: 20px;

  background: rgba(18,18,18,.97);

  border: 1px solid rgba(255,255,255,.12);

  box-shadow: 0 28px 60px rgba(0,0,0,.42);

  backdrop-filter: blur(14px);

  pointer-events: auto;

  display: grid;

  gap: 14px;

  animation: cookieBannerIn .22s ease-out;

}



.cookie-banner__content{

  display: grid;

  gap: 8px;

}



.cookie-banner__panel > :not(.cookie-banner__settings){

  width: 100%;

}



.cookie-banner__title{

  margin: 0;

  color: var(--brand);

  font-size: 18px;

}



.cookie-banner__text{

  margin: 0;

  color: var(--text);

  font-size: 14px;

}



.cookie-banner__link{

  color: var(--brand);

  text-decoration: none;

  font-weight: 800;

}



.cookie-banner__actions{

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  justify-content: flex-start;

}



.cookie-banner__actions--compact{

  justify-content: space-between;

}



.cookie-banner__button{

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 42px;

  padding: 10px 14px;

  border-radius: 12px;

  border: 1px solid transparent;

  background: var(--brand);

  color: #111;

  font-weight: 900;

  cursor: pointer;

  text-decoration: none;

}



.cookie-banner__button--ghost{

  background: rgba(255,255,255,.05);

  border-color: rgba(255,255,255,.12);

  color: var(--text);

}



.cookie-banner__button:hover,

.cookie-banner__button:focus-visible{

  transform: translateY(-1px);

  outline: none;

}



.cookie-banner__settings{

  width: 100%;

  display: grid;

  gap: 12px;

  padding-top: 14px;

  border-top: 1px solid rgba(255,255,255,.10);

}



@keyframes cookieBannerIn{

  from{

    opacity: 0;

    transform: translateY(16px);

  }

  to{

    opacity: 1;

    transform: translateY(0);

  }

}



.cookie-banner__row{

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 12px;

}



.cookie-banner__row strong{

  display: block;

  color: var(--text);

  margin-bottom: 4px;

}



.cookie-banner__small{

  margin: 0;

  color: var(--muted);

  font-size: 12px;

}



.cookie-banner__badge{

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 6px 10px;

  border-radius: 999px;

  background: rgba(247,195,78,.10);

  border: 1px solid rgba(247,195,78,.28);

  color: var(--brand);

  font-size: 12px;

  font-weight: 850;

  white-space: nowrap;

}



.cookie-banner__toggle{

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 14px;

  border-radius: 14px;

  background: rgba(255,255,255,.04);

  border: 1px solid rgba(255,255,255,.10);

  cursor: pointer;

}



.cookie-banner__toggle input{

  width: 18px;

  height: 18px;

  flex: 0 0 auto;

}



.cookie-banner__toggle span{

  display: grid;

  gap: 2px;

}



.cookie-banner__toggle small{

  color: var(--muted);

}



@media (max-width: 640px){

  .cookie-banner{

    inset: 0;

    padding: 12px;

    align-items: flex-end;

  }



  .cookie-banner__panel{

    width: 100%;

    padding: 16px;

  }



  .cookie-banner__row,

  .cookie-banner__actions,

  .cookie-banner__actions--compact{

    flex-direction: column;

    align-items: stretch;

  }



  .cookie-banner__button{

    width: 100%;

  }

}







.hero-cover--refs .hero-grid{

  grid-template-columns: 1fr;      

  align-items: start;

}



.hero-cover--refs .refs-wide{

  grid-column: 1 / -1;             

  width: 100%;

  margin-top: 26px;                 

}



.hero-cover--refs .review-section{

  width: min(100%, 980px);          

  margin-inline: auto;              

}





.hero-cover--refs::before{

  background:

    radial-gradient(1200px 600px at 20% 20%, rgba(247,195,78,.10), transparent 60%),

    linear-gradient(90deg, rgba(4,4,4,.96) 0%, rgba(4,4,4,.86) 42%, rgba(4,4,4,.40) 100%);

  background-size: auto;

  background-repeat: no-repeat;

  background-position: center;

}





.page-gdpr .hero-cover::before,

.page-gdpr .hero-cover::after{

  display: none ;

}



/* ========== ARTICLE PAGE ========== */

.page-article .page-hero{

  padding-bottom: 22px;

  position: relative;

  z-index: 5;

  overflow: visible;

}



.article-hero{

  display: grid;

  grid-template-columns: 1.25fr .75fr;

  gap: clamp(18px, 4vw, 34px);

  align-items: start;

}



.article-hero-text .kicker{

  margin-bottom: 10px;

}



.article-meta{

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px;

  margin-top: 10px;

  color: rgba(247,195,78,.88);

  font-weight: 800;

  font-size: 13px;

}



.meta-pill{

  display: inline-flex;

  align-items: center;

  gap: 8px;

}



.article-cover{

  width: 100%;

  border-radius: var(--radius);

  border: 1px solid rgba(255,255,255,.10);

  box-shadow: var(--shadow-soft);

}





.article-hero,

.article-hero-text,

.share-bar{

  overflow: visible;

}





/* share dropdown */

.share-bar{

  margin-top: 10px;

  display: inline-flex;

  width: fit-content;

  justify-content: flex-start;

  position: relative;

  z-index: 50;

  overflow: visible;

  align-items: flex-start;

}



.share-button{

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 10px 14px;

  border-radius: 12px;

  background: rgba(255,255,255,.06);

  border: 1px solid rgba(255,255,255,.12);

  color: var(--text);

  font-weight: 900;

  cursor: pointer;

  transition: transform .15s ease, background .15s ease, border-color .15s ease;

}



.share-button:hover,

.share-button:focus-visible{

  background: rgba(247,195,78,.08);

  border-color: rgba(247,195,78,.30);

  transform: translateY(-1px);

  outline: none;

}



.share-options{

  display: none;

  position: absolute;

  left: calc(100% + 10px);

  top: 0;

  bottom: auto;

  right: auto;

  background: rgba(18,18,18,.98);

  border: 1px solid rgba(255,255,255,.12);

  border-radius: 14px;

  padding: 6px;

  min-width: 160px;

  box-shadow: var(--shadow);

  z-index: 9999;

}



.share-options.is-open{ display: block; }



.share-options a,

.share-options button{

  display: block;

  width: 100%;

  text-align: left;

  padding: 8px 10px;

  border-radius: 10px;

  text-decoration: none;

  color: var(--text);

  font-size: 13px;

  background: transparent;

  border: 0;

  cursor: pointer;

  line-height: 1.2;

}



.share-options a:hover,

.share-options button:hover{

  background: rgba(247,195,78,.08);

  color: var(--brand);

}





.share-icon{

  width: 18px;

  height: 18px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  opacity: .95;

}



/* svg ať se chová konzistentně */

.share-icon svg{

  width: 16px;

  height: 16px;

  display: block;

}



/* text label */

.share-label{

  white-space: nowrap;

}



/* Skrytý text pro čtečky (a11y) */

.sr-only{

  position:absolute;

  width:1px;

  height:1px;

  padding:0;

  margin:-1px;

  overflow:hidden;

  clip:rect(0,0,0,0);

  white-space:nowrap;

  border:0;

}



/* Share dropdown: ikonky vedle sebe */

.share-options--icons{

  min-width: auto;

  width: auto;

  padding: 6px;

  display: none;                /* respektuje tvé .is-open */

  gap: 6px;

  grid-auto-flow: column;

  grid-auto-columns: max-content;

}



/* když je otevřeno */

.share-options--icons.is-open{

  display: grid;

}



/* ikonkové "tlačítko" */

.share-icon-btn{

  width: 38px;

  height: 38px;

  display: inline-flex;

  align-items: center;

  justify-content: center;



  border-radius: 12px;

  background: rgba(255,255,255,.06);

  border: 1px solid rgba(255,255,255,.12);

  color: var(--text);



  text-decoration: none;

  cursor: pointer;

  padding: 0;                   /* důležité – ať je to čistě ikonka */

  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;

}



.share-icon-btn:hover,

.share-icon-btn:focus-visible{

  background: rgba(247,195,78,.10);

  border-color: rgba(247,195,78,.30);

  color: var(--brand);

  transform: translateY(-1px);

  outline: none;

}



.share-icon-btn svg{

  width: 16px;

  height: 16px;

  display: block;

}



/* Volitelné: pozice dropdownu vedle tlačítka Sdílet */

.share-options--icons{

  left: calc(100% + 10px);

  top: 0;

}





/* article card */

.article-section{

  padding: 18px 0 8px;

}



.article-card{

  background: rgba(18,18,18,.72);

  border: 1px solid rgba(255,255,255,.10);

  border-radius: var(--radius);

  padding: clamp(16px, 3vw, 22px);

  box-shadow: var(--shadow-soft);

  position: relative;

  z-index: 1;

}



.article-card p{

  margin: 0 0 14px;

  color: var(--text);

  font-size: 16px;

  line-height: 1.75;

}



.article-card ul,

.article-card ol{

  margin: 0 0 16px;

  padding-left: 18px;

  color: var(--text);

  font-size: 16px;

  line-height: 1.7;

}



.article-card li{

  font-size: inherit;

}



.article-h2{

  margin: 22px 0 12px;

  color: var(--brand);

  font-size: 22px;

  letter-spacing: -0.2px;

}



.article-h3{

  margin: 16px 0 10px;

  color: var(--text);

  font-size: 18px;

}



.article-note{

  display: inline-block;

  max-width: 100%;

  padding: 12px 14px;

  border-left: 4px solid rgba(247,195,78,.6);

  background: rgba(255,255,255,.03);

  border-radius: 12px;

}



.article-cta{

  margin-top: 18px;

  padding: 14px 16px;

  border-radius: 14px;

  background: rgba(247,195,78,.08);

  border: 1px solid rgba(247,195,78,.22);

  color: var(--text);

}



/* ========== PRODEJ PAGE ENHANCEMENTS ========== */

.page-prodej .contact-grid,

.page-nakup .contact-grid,

.page-pronajem .contact-grid{

  align-items: start;

}



.page-prodej .side-card--sticky,

.page-nakup .side-card--sticky,

.page-pronajem .side-card--sticky,

.page-offer-detail .side-card--sticky{

  position: sticky;

  top: calc(var(--nav-h) + 18px);

}



.page-prodej .content-card--timeline,

.page-nakup .content-card--timeline,

.page-pronajem .content-card--timeline{

  background: rgba(18,18,18,.76);

}



.process-timeline{

  list-style: none;

  margin: 0;

  padding: 4px 0 0;

  display: grid;

  gap: 14px;

}



.process-step{

  display: grid;

  grid-template-columns: 60px 1fr;

  gap: 14px;

  padding: 10px 0;

  position: relative;

}



.process-step:not(:last-child)::after{

  content: "";

  position: absolute;

  left: 29px;

  top: 52px;

  bottom: -10px;

  width: 1px;

  background: linear-gradient(180deg, rgba(247,195,78,.40) 0%, rgba(255,255,255,.12) 100%);

}



.process-step__num{

  width: 58px;

  height: 36px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 999px;

  border: 1px solid rgba(247,195,78,.36);

  background: rgba(247,195,78,.08);

  color: var(--brand);

  font-weight: 900;

  font-size: 13px;

  letter-spacing: .6px;

}



.process-step__body .article-h3{

  margin-top: 6px;

}



.process-step__body p{

  margin: 0;

}



.article-cta--strong{

  margin-top: 24px;

  padding: 18px;

  background: linear-gradient(135deg, rgba(247,195,78,.16) 0%, rgba(247,195,78,.08) 100%);

  border: 1px solid rgba(247,195,78,.30);

}



.article-cta--strong strong{

  display: block;

  margin-bottom: 6px;

  font-size: 18px;

  color: #f4d27d;

}



.article-cta-note{

  margin-top: 0;

  margin-bottom: 12px;

  color: rgba(247,195,78,.95);

  font-size: 14px;

}



/* float images in article body (keeps your old layout feel, but cleaner) */

.article-float-right{

  float: right;

  width: min(280px, 42%);

  margin: 6px 0 12px 18px;

  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.10);

}



.article-float-left{

  float: left;

  width: min(280px, 42%);

  margin: 6px 18px 12px 0;

  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.10);

}



/* clear floats */

.article-card::after{

  content: "";

  display: block;

  clear: both;

}



/* responsive */

@media (max-width: 980px){

  .article-hero{

    grid-template-columns: 1fr;

  }

  .article-float-right,

  .article-float-left{

    float: none;

    width: 100%;

    margin: 10px 0 14px;

  }

  .share-bar{

    justify-content: flex-start;

  }



  .page-prodej .side-card--sticky,

  .page-nakup .side-card--sticky,

  .page-pronajem .side-card--sticky,

  .page-offer-detail .side-card--sticky{

    position: static;

  }



  .process-step{

    grid-template-columns: 1fr;

    gap: 10px;

  }



  .process-step:not(:last-child)::after{

    display: none;

  }

}



  /* ========== OFFER PAGES ========== */

  .offer-intro-grid{

    display: grid;

    grid-template-columns: 1.25fr .75fr;

    gap: 22px;

    align-items: start;

  }



  .offer-toolbar-wrap{ padding-top: 0; }



  .offer-toolbar{

    display: grid;

    gap: 14px;

  }



  .offer-pills{

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

  }



  .offer-pill{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 12px;

    border-radius: 999px;

    border: 1px solid rgba(255,255,255,.14);

    background: rgba(255,255,255,.04);

    color: var(--text);

    text-decoration: none;

    font-size: 13px;

    font-weight: 850;

    transition: transform .2s ease, background .2s ease, border-color .2s ease;

  }



  .offer-pill:hover,

  .offer-pill:focus-visible{

    background: rgba(247,195,78,.08);

    border-color: rgba(247,195,78,.34);

    transform: translateY(-1px);

    outline: none;

  }



  .offer-pill.is-active{

    background: var(--brand);

    border-color: var(--brand);

    color: #111;

  }



  .offer-toolbar-fields{

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;

  }



  .offer-field{

    display: grid;

    gap: 6px;

    font-size: 13px;

    color: var(--muted);

  }



  .offer-grid{

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

  }



  .offer-card{

    background: rgba(18,18,18,.78);

    border: 1px solid rgba(255,255,255,.10);

    border-radius: var(--radius);

    box-shadow: var(--shadow-soft);

    overflow: hidden;

    display: grid;

  }



  .offer-card.hidden{

    display: none;

  }



  .offer-card-media{

    position: relative;

    min-height: 210px;

    background:

      linear-gradient(165deg, rgba(247,195,78,.18) 0%, rgba(247,195,78,.05) 34%, rgba(18,18,18,.45) 100%),

      radial-gradient(900px 260px at 0% 0%, rgba(255,255,255,.10), transparent 60%),

      linear-gradient(120deg, #252525 0%, #111 100%);

    border-bottom: 1px solid rgba(255,255,255,.10);

    display: flex;

    align-items: center;

    justify-content: center;

  }



  .offer-card-upsell{

    position: absolute;

    font-size: clamp(16px, 3vw, 32px);

    font-weight: 900;

    color: rgba(247,195,78,.92);

    text-shadow: 0 2px 8px rgba(0,0,0,.6);

    transform: rotate(-12deg);

    pointer-events: none;

    letter-spacing: -0.5px;

  }



  .offer-tag,

  .offer-state{

    position: absolute;

    top: 12px;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .3px;

  }



  .offer-tag{

    left: 12px;

    background: rgba(247,195,78,.16);

    border: 1px solid rgba(247,195,78,.45);

    color: #f6d27d;

  }



  .offer-tag--rent{

    background: rgba(154,197,255,.15);

    border-color: rgba(154,197,255,.45);

    color: #c9dfff;

  }



  .offer-state{

    right: 12px;

    background: rgba(125,227,171,.15);

    border: 1px solid rgba(125,227,171,.45);

    color: #b8f0d2;

  }



  .offer-state--reserved{

    background: rgba(220,53,69,.15);

    border: 1px solid rgba(220,53,69,.55);

    color: #f8b7bd;

  }



  .offer-state--sold{

    background: rgba(108,117,125,.15);

    border: 1px solid rgba(108,117,125,.55);

    color: #d8dadc;

  }



  .offer-state--muted{

    background: rgba(255,255,255,.09);

    border-color: rgba(255,255,255,.25);

    color: #d9d9d9;

  }



  .offer-card-body{

    padding: 16px;

  }



  .offer-card-body h2{

    margin: 0 0 8px;

    font-size: 22px;

    line-height: 1.2;

  }



  .offer-card-body h2 a{

    text-decoration: none;

    color: var(--brand);

  }



  .offer-location{

    margin: 0 0 8px;

    color: var(--muted);

    font-size: 14px;

  }



  .offer-price{

    margin: 0 0 10px;

    font-size: 22px;

    font-weight: 900;

    color: #f3d07b;

  }



  .offer-meta{

    margin: 0 0 12px;

    padding: 0;

    list-style: none;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

  }



  .offer-meta li{

    padding: 6px 10px;

    border-radius: 999px;

    background: rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.10);

    color: var(--muted);

    font-size: 12px;

    font-weight: 800;

  }



  .offer-copy{

    margin: 0 0 14px;

    color: var(--text);

  }



  .offer-structure-note ul{

    margin: 0;

    padding-left: 18px;

  }



  .offer-structure-note li{ margin: 7px 0; }



  .offer-breadcrumb{

    margin-bottom: 14px;

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

    color: var(--muted);

    font-size: 13px;

  }



  .offer-breadcrumb a{

    text-decoration: none;

    color: var(--muted);

  }



  .offer-breadcrumb a:hover,

  .offer-breadcrumb a:focus-visible{

    color: var(--brand);

    outline: none;

  }



  /* Simplified header for offer detail page */

  .header--offer-detail{

    border-bottom: 1px solid rgba(255,255,255,.10);

  }



  .nav--offer-detail{

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

    align-items: center;

    gap: 24px;

    padding-block: 6px;

  }



  .nav--offer-detail .brand{

    grid-column: 1;

    justify-self: start;

    flex-shrink: 0;

  }



  .nav--offer-detail .offer-section-nav{

    grid-column: 2;

    justify-self: center;

    position: static;

    margin: 0;

    padding: 0;

    width: auto;

  }



  .offer-section-nav{

    position: static;

    margin-top: 14px;

    margin-inline: auto;

    width: fit-content;

    max-width: 100%;

    padding: 8px;

    border-radius: 14px;

    border: 0;

    background: transparent;

    backdrop-filter: none;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    overflow-x: auto;

    scrollbar-width: thin;

  }



  .offer-section-nav a{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 12px;

    border-radius: 999px;

    border: 1px solid rgba(255,255,255,.12);

    background: rgba(255,255,255,.03);

    color: var(--muted);

    text-decoration: none;

    font-size: 13px;

    font-weight: 850;

    white-space: nowrap;

    transition: background .2s ease, color .2s ease, border-color .2s ease;

  }



  .offer-section-nav a:hover,

  .offer-section-nav a:focus-visible{

    color: var(--brand);

    border-color: rgba(247,195,78,.38);

    background: rgba(247,195,78,.08);

    outline: none;

  }



  .offer-section-nav a.is-active{

    color: #111;

    border-color: var(--brand);

    background: var(--brand);

  }



  .offer-detail-head{

    display: grid;

    gap: 18px;

  }



  .offer-detail-top{

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 18px;

    flex-wrap: wrap;

  }



  .offer-detail-price-wrap{

    display: grid;

    justify-items: end;

    gap: 8px;

  }



  .offer-detail-price{

    font-size: clamp(28px, 4vw, 40px);

    line-height: 1;

    color: #f3d07b;

  }



  /* ── Full-bleed hero ─────────────────────────────── */

  .offer-hero{

    position: relative;

    overflow: hidden;

  }



  .offer-hero-bg{

    position: relative;

    width: 100%;

    height: clamp(272px, 52vh, 578px);

  }



  .offer-hero-bg img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

  }



  .offer-hero-overlay{

    position: absolute;

    inset: 0;

    background: linear-gradient(

      to bottom,

      rgba(0,0,0,.08) 0%,

      transparent 28%,

      rgba(0,0,0,.55) 72%,

      rgba(0,0,0,.82) 100%

    );

  }



  .offer-hero-upsell{

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: clamp(28px, 5vw, 52px);

    font-weight: 900;

    color: rgba(247,195,78,.92);

    text-shadow: 0 4px 16px rgba(0,0,0,.6);

    transform: rotate(-12deg);

    pointer-events: none;

    letter-spacing: -1px;

    z-index: 1;

  }



  .offer-hero-content{

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding-top: 18px;

    padding-bottom: 28px;

  }



  .offer-hero .offer-breadcrumb a,

  .offer-hero .offer-breadcrumb span{

    color: rgba(255,255,255,.72);

  }



  .offer-hero .offer-breadcrumb a:hover{

    color: var(--brand);

  }



  .offer-hero-bottom{

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 24px;

  }



  .offer-hero .offer-detail-top{

    display: flex;

    flex: 1 1 auto;

    flex-direction: column;

    justify-content: flex-end;

    align-items: flex-start;

    gap: 20px;

    min-width: 0;

  }



  .offer-hero .kicker{

    color: var(--brand);

    margin-bottom: 4px;

  }



  .offer-hero h1{

    color: #fff;

    text-shadow: 0 1px 6px rgba(0,0,0,.45);

    margin-bottom: 4px;

  }



  .offer-hero .page-lead{

    color: rgba(255,255,255,.80);

    margin: 0;

  }



  .offer-hero .offer-detail-price-wrap{

    text-align: left;

    justify-items: start;

    flex-shrink: 0;

  }



  .offer-hero .offer-detail-price{

    color: #fff;

    font-size: clamp(20px, 3vw, 32px);

    display: block;

    margin-block: 4px;

  }



  .offer-hero .offer-gallery-video{

    flex: 0 1 420px;

    width: min(100%, 420px);

    border-radius: 16px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.22);

    background: rgba(0,0,0,.45);

    box-shadow: 0 18px 42px rgba(0,0,0,.38);

    backdrop-filter: blur(10px);

  }



  .offer-hero .offer-gallery-video video{

    width: 100%;

    aspect-ratio: 16 / 10;

    display: block;

    object-fit: cover;

  }



  /* ── legacy gallery (keep for other pages) ────── */

  .offer-gallery{

    display: grid;

    gap: 10px;

  }



  .offer-gallery-main{

    border-radius: var(--radius);

    min-height: clamp(230px, 42vw, 420px);

    border: 1px solid rgba(255,255,255,.10);

    background:

      linear-gradient(165deg, rgba(247,195,78,.14), rgba(255,255,255,.05) 50%, rgba(12,12,12,.78)),

      repeating-linear-gradient(45deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 10px, transparent 10px, transparent 20px);

    overflow: hidden;

  }



  .offer-gallery-main img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

  }



  .offer-gallery-thumbs{

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;

  }



  .offer-gallery-thumb{

    min-height: 90px;

    border-radius: 12px;

    border: 1px solid rgba(255,255,255,.10);

    background:

      linear-gradient(135deg, rgba(247,195,78,.08), rgba(255,255,255,.03) 55%, rgba(0,0,0,.45));

    overflow: hidden;

  }



  .offer-gallery-thumb img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

  }



  .offer-detail-grid{

    display: grid;

    grid-template-columns: 1.25fr .75fr;

    gap: 22px;

    align-items: start;

  }



  .offer-detail-main{

    display: grid;

    gap: 16px;

  }



  .offer-section{

    scroll-margin-top: calc(var(--nav-h) + 86px);

  }



  .offer-tech-grid{

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

  }



  .offer-tech-item{

    padding: 12px;

    border-radius: 12px;

    border: 1px solid rgba(255,255,255,.10);

    background: rgba(255,255,255,.03);

    color: var(--text);

    font-size: 14px;

  }



  .offer-doc-grid{

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

  }



  .offer-doc{

    display: grid;

    gap: 5px;

    text-decoration: none;

    color: var(--text);

    padding: 12px;

    border-radius: 12px;

    border: 1px solid rgba(255,255,255,.10);

    background: rgba(255,255,255,.03);

    transition: border-color .2s ease, background .2s ease;

  }



  .offer-doc strong{ color: var(--brand); }



  .offer-doc span{

    font-size: 13px;

    color: var(--muted);

  }



  .offer-doc:hover,

  .offer-doc:focus-visible{

    border-color: rgba(247,195,78,.34);

    background: rgba(247,195,78,.08);

    outline: none;

  }



  .offer-photo-grid{

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;

    align-items: start;

  }



  .offer-photo-tile{

    border-radius: 12px;

    border: 1px solid rgba(255,255,255,.10);

    background:

      linear-gradient(145deg, rgba(247,195,78,.11), rgba(255,255,255,.04) 45%, rgba(5,5,5,.62));

    overflow: hidden;

    display: block;

  }



  .offer-photo-tile[hidden]{

    display: none;

  }



  .offer-photo-tile img{

    width: 100%;

    height: auto;

    min-height: 0;

    object-fit: contain;

    display: block;

    transition: filter .25s ease;

  }



  .offer-photo-tile:hover img,

  .offer-photo-tile:focus-visible img{

    filter: brightness(1.06);

  }



  .photo-hover-preview{

    position: fixed;

    left: 0;

    top: 0;

    width: auto;

    height: auto;

    max-width: min(62vw, 920px);

    max-height: min(60vh, 620px);

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.22);

    box-shadow: 0 24px 60px rgba(0,0,0,.52);

    background: rgba(16,16,16,.95);

    opacity: 0;

    visibility: hidden;

    transform: translateY(6px) scale(.98);

    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;

    pointer-events: none;

    z-index: 1200;

  }



  .photo-hover-preview.is-visible{

    opacity: 1;

    visibility: visible;

    transform: translateY(0) scale(1);

  }



  .photo-hover-preview img{

    width: auto;

    height: auto;

    max-width: min(62vw, 920px);

    max-height: min(60vh, 620px);

    object-fit: contain;

    background: #0a0a0a;

    display: block;

  }



  body.lightbox-open{

    overflow: hidden;

  }



  .photo-lightbox{

    position: fixed;

    inset: 0;

    display: grid;

    grid-template-columns: auto minmax(0, 1fr) auto;

    align-items: center;

    gap: 12px;

    padding: clamp(16px, 3vw, 30px);

    background: rgba(5,5,5,.88);

    backdrop-filter: blur(3px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity .2s ease, visibility .2s ease;

    z-index: 1400;

  }



  .photo-lightbox.is-open{

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

  }



  .photo-lightbox-figure{

    margin: 0;

    min-width: 0;

    display: grid;

    gap: 8px;

    justify-items: center;

  }



  .photo-lightbox-figure img{

    width: auto;

    height: auto;

    max-width: min(90vw, 1400px);

    max-height: min(82vh, 900px);

    object-fit: contain;

    border-radius: 12px;

    border: 1px solid rgba(255,255,255,.25);

    background: rgba(0,0,0,.95);

    box-shadow: 0 24px 60px rgba(0,0,0,.5);

  }



  .photo-lightbox-figure figcaption{

    color: #f2f2f2;

    font-weight: 700;

    letter-spacing: .02em;

  }



  .photo-lightbox-nav,

  .photo-lightbox-close{

    border: 1px solid rgba(255,255,255,.22);

    background: rgba(20,20,20,.74);

    color: #fff;

    cursor: pointer;

  }



  .photo-lightbox-nav{

    width: clamp(38px, 4vw, 56px);

    height: clamp(38px, 4vw, 56px);

    border-radius: 999px;

    font-size: clamp(24px, 3vw, 36px);

    line-height: 1;

  }



  .photo-lightbox-close{

    position: absolute;

    top: clamp(12px, 2vw, 20px);

    right: clamp(12px, 2vw, 20px);

    width: clamp(36px, 3.4vw, 48px);

    height: clamp(36px, 3.4vw, 48px);

    border-radius: 999px;

    font-size: clamp(24px, 2.8vw, 32px);

    line-height: 1;

  }



  .photo-lightbox-nav:hover,

  .photo-lightbox-close:hover{

    background: rgba(247,195,78,.18);

    border-color: rgba(247,195,78,.52);

  }



  @media (max-width: 760px){

    .photo-lightbox{

      grid-template-columns: 1fr;

      justify-items: center;

      gap: 10px;

    }



    .photo-lightbox-nav{

      position: absolute;

      bottom: 14px;

      z-index: 1;

    }



    .photo-lightbox-prev{

      left: 14px;

    }



    .photo-lightbox-next{

      right: 14px;

    }



    .photo-lightbox-figure img{

      width: auto;

      height: auto;

      max-width: 94vw;

      max-height: 78vh;

    }

  }



  @media (hover: none), (pointer: coarse), (max-width: 1180px){

    .photo-hover-preview{

      display: none;

    }

  }



  #toggleMorePhotos{

    margin-top: 10px;

  }



  .offer-price-panel{

    padding: 14px;

    border-radius: 14px;

    border: 1px solid rgba(247,195,78,.26);

    background: rgba(247,195,78,.07);

  }



  .offer-price-panel-main{

    margin: 0 0 8px;

    color: #f3d07b;

    font-size: clamp(28px, 4vw, 40px);

    line-height: 1;

    font-weight: 900;

  }



  .offer-price-panel ul{

    margin-bottom: 0;

  }



  .offer-contact-row{

    margin-top: 12px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

  }



  .offer-detail-sidebar ul{

    margin: 0;

    padding-left: 18px;

    color: var(--muted);

  }



  .offer-detail-sidebar li{ margin: 7px 0; }



  .offer-facts-grid{

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;

  }



  .offer-fact{

    padding: 12px;

    border-radius: 12px;

    border: 1px solid rgba(255,255,255,.10);

    background: rgba(255,255,255,.03);

    display: grid;

    gap: 5px;

  }



  .offer-fact span{

    color: var(--muted);

    font-size: 13px;

  }



  .offer-fact strong{

    color: var(--text);

    font-size: 15px;

  }





/* ========== RESPONSIVE ========== */

@media (max-width: 980px){

  :root{

    --hero-x: 70%;

    --hero-y: 18%;

    --about-bg-x: 52%;

    --about-bg-y: 24%;

  }



  .nav-links{ display:none; }

  .hamburger{ display:inline-flex; }

  .contact-inline{ display:none; }



  .nav--offer-detail{

    display: flex;

    align-items: center;

    flex-wrap: nowrap;

    gap: 12px;

  }



  .nav--offer-detail .offer-section-nav{

    display: none;

  }



  .hero-grid{ grid-template-columns: 1fr; }

  .hero-cover{ min-height: auto; }



  .cards{ grid-template-columns: 1fr; }

  .cards .card .card-extra{

    margin-top: 12px;

    padding-top: 12px;

    border-top-color: rgba(255,255,255,.12);

    max-height: none;

    opacity: 1;

    transform: none;

  }

  .blog-grid{ grid-template-columns: 1fr; }



  .offer-intro-grid,

  .offer-detail-grid{

    grid-template-columns: 1fr;

  }



  .offer-toolbar-fields{

    grid-template-columns: 1fr;

  }



  .offer-grid{

    grid-template-columns: 1fr;

  }



  .offer-facts-grid{

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .offer-gallery-thumbs{

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .offer-hero-bg{

    position: absolute;

    inset: 0;

    height: auto;

  }



  .offer-hero-bg img{

    object-position: 50% 74% !important;

  }



  .offer-hero-content{

    position: relative;

    inset: auto;

    justify-content: flex-start;

    gap: 20px;

    min-height: clamp(420px, 72vh, 620px);

    padding-bottom: 0;

  }



  .offer-hero-bottom{

    flex-direction: column;

    align-items: flex-start;

    width: 100%;

    margin-top: auto;

  }



  .offer-hero .offer-detail-top{

    width: 100%;

  }



  .offer-hero .offer-gallery-video{

    width: min(100%, 360px);

  }



  .offer-tech-grid,

  .offer-doc-grid,

  .offer-photo-grid{

    grid-template-columns: 1fr;

  }



  .contact-grid{ grid-template-columns: 1fr; }

  .bottom-grid{ grid-template-columns: 1fr; }

}



@media (max-width: 520px){

  :root{

    --hero-x: 65%;

    --hero-y: 12%;

    --about-bg-x: 54%;

    --about-bg-y: 28%;

    --type-scale: 0.75;

  }



  .hero-kicker{

    font-size: clamp(18px, 7vw, 24px);

    max-width: 24ch;

    line-height: 1.2;

  }



  .footer-social{

    gap: 6px;

  }



  .footer-social a{

    width: 30px;

    height: 30px;

  }



  .footer-social img{

    width: 16px;

    height: 16px;

  }



  .offer-facts-grid{

    grid-template-columns: 1fr;

  }



  .offer-hero{

    min-height: clamp(640px, 108vh, 840px);

  }



  .offer-hero-bg{

    min-height: 100%;

    overflow: hidden;

  }



  .offer-hero-bg img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: 50% 86% !important;

    transform: scale(1.2);

    transform-origin: 50% 86%;

  }



  .offer-hero-content{

    position: absolute;

    inset: 0;

    justify-content: space-between;

    min-height: auto;

    gap: 10px;

    padding-top: 12px;

    padding-bottom: 12px;

  }



  .offer-hero-bottom{

    margin-top: auto;

    gap: 10px;

  }



  .offer-hero .offer-detail-top{

    gap: 10px;

  }



  .offer-hero .page-lead{

    font-size: 13px;

    line-height: 1.35;

  }



  .offer-hero .offer-gallery-video{

    flex: 0 0 210px;

    display: block;

    width: 100%;

    max-width: none;

    height: 210px;

    min-height: 0;

  }



  .offer-hero .offer-gallery-video video{

    width: 100%;

    height: 100%;

    aspect-ratio: auto;

  }



  .article-hero-text .kicker{

    font-size: 14px;

  }



  .article-hero-text h1{

    font-size: clamp(30px, 8.4vw, 36px);

    line-height: 1.14;

  }



  .article-hero-text .page-lead{

    font-size: 16px;

    line-height: 1.6;

  }



  .article-meta{

    font-size: 14px;

  }



  .share-button{

    font-size: 15px;

  }



  .article-card p,

  .article-card ul,

  .article-card ol{

    font-size: 17px;

    line-height: 1.78;

  }



  .article-h2{

    font-size: 24px;

    line-height: 1.28;

  }

}



@media (prefers-reduced-motion: reduce){

  html{ scroll-behavior: auto; }

  .card, .cta, .btn-secondary, .social a, button, .blog-card { transition: none; }

}