/* ═══════════════════════════════════════════
   martynkova.cz — Global Stylesheet
   ═══════════════════════════════════════════ */

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ─── VARIABLES ─── */
:root{
  --dark:#161310;
  --dark2:#201C18;
  --cream:#EAE0CE;
  --cream2:#CFC3AC;
  --orange:#C44F0F;
  --fd:'DM Serif Display',Georgia,serif;
  --fb:'Inter',system-ui,sans-serif;
  --page-px:20px;
}

@media(min-width:768px){
  :root{--page-px:32px}
}
@media(min-width:1024px){
  :root{--page-px:44px}
}

/* ─── BASE ─── */
html{scroll-behavior:smooth}

body{
  background:var(--dark);
  color:var(--cream);
  font-family:var(--fb);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}

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

/* ─── TYPOGRAPHY ─── */
h1,h2,h3{
  font-family:var(--fd);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.01em;
}

/* ─── SKIP LINK ─── */
.skip-link{
  position:absolute;
  top:-100%;
  left:16px;
  background:var(--orange);
  color:#fff;
  padding:8px 16px;
  z-index:999;
  border-radius:4px;
  font-size:14px;
}
.skip-link:focus{top:8px}

/* ═══════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════ */
nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:200;
  height:64px;
  padding:0 var(--page-px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(22,19,16,.75);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(234,224,206,.07);
}

.nav-logo{
  font-family:var(--fd);
  font-size:21px;
  font-weight:400;
  color:var(--cream);
  letter-spacing:.01em;
}

.nav-links{
  display:none;
  align-items:center;
  gap:44px;
  list-style:none;
}

.nav-links a{
  font-family:var(--fb);
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(234,224,206,.5);
  transition:color .2s;
}
.nav-links a:hover,
.nav-links a.active{color:var(--cream)}

@media(min-width:1024px){
  .nav-links{display:flex}
  .nav-burger{display:none!important}
}

/* Burger */
.nav-burger{
  display:flex;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  z-index:210;
}
.nav-burger span{
  display:block;
  width:22px;
  height:1.5px;
  background:var(--cream);
  transition:transform .3s,opacity .3s;
}
.nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile overlay */
.mobile-nav{
  position:fixed;
  inset:0;
  z-index:205;
  background:rgba(22,19,16,.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:40px;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.mobile-nav.open{opacity:1;pointer-events:auto}

.mobile-nav a{
  font-family:var(--fd);
  font-size:32px;
  color:var(--cream);
  opacity:.6;
  transition:opacity .2s;
}
.mobile-nav a:hover,
.mobile-nav a.active{opacity:1}

/* ═══════════════════════════════════════════
   HERO — Homepage split
   ═══════════════════════════════════════════ */
.hero{
  padding-top:64px;
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  grid-template-columns:1fr;
}

.hero-panel{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:50vh;
  min-height:50dvh;
}

.panel-photo{
  position:absolute;
  inset:0;
  background:var(--dark2);
}

.panel-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(22,19,16,.15) 0%,
    rgba(22,19,16,.30) 40%,
    rgba(22,19,16,.78) 100%
  );
  z-index:1;
}

.panel-content{
  position:relative;
  z-index:2;
  padding:36px var(--page-px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}

.panel-word{
  font-family:var(--fd);
  font-size:clamp(52px,12vw,130px);
  font-weight:400;
  line-height:.95;
  letter-spacing:-.02em;
  color:var(--cream);
}

.panel-sub{
  font-family:var(--fb);
  font-size:14px;
  font-weight:300;
  line-height:1.7;
  color:rgba(234,224,206,.65);
  max-width:none;
}

.panel-photo-label{
  position:absolute;
  top:80px;
  left:var(--page-px);
  font-family:var(--fb);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(234,224,206,.18);
  z-index:3;
}

@media(min-width:1024px){
  .hero{
    grid-template-columns:1fr 1fr;
    min-height:100vh;
  }
  .hero-panel{min-height:auto}
  .hero-panel:first-child{border-right:1px solid rgba(234,224,206,.1)}
  .panel-content{
    padding:48px var(--page-px);
    gap:28px;
  }
}

/* ═══════════════════════════════════════════
   HERO — Subpage (single column)
   ═══════════════════════════════════════════ */
.subpage-hero{
  padding:140px var(--page-px) 80px;
  max-width:800px;
  margin:0 auto;
}

.subpage-hero h1{
  font-size:clamp(32px,5vw,56px);
  margin-bottom:18px;
}

.subpage-hero .hero-sub{
  font-size:16px;
  font-weight:300;
  line-height:1.7;
  color:rgba(234,224,206,.65);
  max-width:560px;
}

@media(min-width:1024px){
  .subpage-hero{padding:180px var(--page-px) 100px}
}

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn{
  font-family:var(--fb);
  font-size:11px;
  font-weight:400;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--cream);
  border:1px solid rgba(234,224,206,.4);
  padding:13px 28px;
  border-radius:100px;
  display:inline-block;
  transition:background .25s,border-color .25s;
  cursor:pointer;
  background:transparent;
}
.btn:hover{
  background:rgba(234,224,206,.12);
  border-color:rgba(234,224,206,.7);
}

.btn--solid{
  color:var(--dark);
  background:var(--cream);
  border-color:var(--cream);
}
.btn--solid:hover{
  background:var(--cream2);
  border-color:var(--cream2);
}

.btn--orange{
  color:#fff;
  background:var(--orange);
  border-color:var(--orange);
}
.btn--orange:hover{
  background:#a8420d;
  border-color:#a8420d;
}

/* Inline link with arrow */
.link-arrow{
  font-family:var(--fb);
  font-size:11px;
  font-weight:400;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--cream);
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(234,224,206,.25);
  padding-bottom:4px;
  transition:gap .25s,border-color .25s;
}
.link-arrow::after{content:'\2192'}
.link-arrow:hover{gap:18px;border-color:rgba(234,224,206,.6)}

/* ═══════════════════════════════════════════
   EYEBROW TAG
   ═══════════════════════════════════════════ */
.tag{
  font-family:var(--fb);
  font-size:10px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:24px;
  display:flex;
  align-items:center;
  gap:12px;
}
.tag::before{
  content:'';
  display:block;
  width:26px;
  height:1px;
  background:var(--orange);
}

/* ═══════════════════════════════════════════
   TICKER
   ═══════════════════════════════════════════ */
.ticker-wrap{
  background:var(--cream);
  overflow:hidden;
  padding:28px 0;
  border-top:1px solid var(--cream2);
  border-bottom:1px solid var(--cream2);
}

.ticker-track{
  display:flex;
  width:max-content;
  animation:ticker 30s linear infinite;
}

.ticker-item{
  font-family:var(--fd);
  font-size:20px;
  color:rgba(22,19,16,.55);
  padding:0 52px;
  white-space:nowrap;
}

.ticker-sep{
  font-family:var(--fb);
  font-size:14px;
  color:var(--orange);
  align-self:center;
  flex-shrink:0;
  opacity:.9;
}

@keyframes ticker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ═══════════════════════════════════════════
   STORY SECTIONS (photo + text, alternating)
   ═══════════════════════════════════════════ */
.story-section{
  display:grid;
  grid-template-columns:1fr;
}

.story-photo{
  position:relative;
  overflow:hidden;
  background:var(--dark2);
  min-height:300px;
}

.story-photo-img{
  position:absolute;
  inset:0;
  background:var(--dark2);
  filter:brightness(.5);
}

.photo-label{
  position:absolute;
  bottom:24px;
  left:var(--page-px);
  font-family:var(--fb);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(234,224,206,.25);
  z-index:2;
}

.story-text{
  padding:60px var(--page-px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-top:1px solid rgba(234,224,206,.07);
}

.story-h2{
  font-size:clamp(32px,5vw,64px);
  margin-bottom:22px;
}

.story-body{
  font-size:15px;
  font-weight:300;
  line-height:1.8;
  color:rgba(234,224,206,.6);
  max-width:none;
  margin-bottom:36px;
}
.story-body + .story-body{margin-top:-20px}

@media(min-width:1024px){
  .story-section{
    grid-template-columns:1fr 1fr;
    min-height:70vh;
  }
  .story-photo{min-height:500px}
  .story-text{padding:80px 68px}

  .story-section.flip .story-photo{order:2}
  .story-section.flip .story-text{
    order:1;
    border-right:1px solid rgba(234,224,206,.07);
  }
}

/* ═══════════════════════════════════════════
   NUMBERS — light background
   ═══════════════════════════════════════════ */
.numbers-section{
  background:var(--cream);
  padding:80px var(--page-px);
}

.numbers-inner{max-width:1380px;margin:0 auto}

.numbers-heading{
  font-family:var(--fd);
  font-size:clamp(28px,4vw,48px);
  font-weight:400;
  font-style:normal;
  line-height:1.15;
  letter-spacing:-.01em;
  color:#1A1510;
  max-width:none;
  margin-bottom:56px;
}

.numbers-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  border-top:1px solid rgba(26,21,16,.13);
  padding-top:40px;
}

.num-cell{}

.num-big{
  font-family:var(--fd);
  font-size:clamp(40px,6vw,56px);
  font-weight:400;
  line-height:1;
  color:#1A1510;
  margin-bottom:10px;
  letter-spacing:-.03em;
}
.num-big b{color:var(--orange);font-weight:400}

.num-lbl{
  font-family:var(--fb);
  font-size:11px;
  font-weight:400;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(26,21,16,.5);
}

/* Tag in light sections */
.tag--dark{color:var(--orange)}
.tag--dark::before{background:var(--orange)}

@media(min-width:768px){
  .numbers-grid{
    grid-template-columns:repeat(3,1fr);
    gap:0;
  }
  .num-cell{
    padding:52px 0;
    border-right:1px solid rgba(26,21,16,.13);
  }
  .num-cell + .num-cell{padding-left:52px}
  .num-cell:last-child{border-right:none}
  .numbers-section{padding:100px var(--page-px)}
}

/* ═══════════════════════════════════════════
   NEWSLETTER
   ═══════════════════════════════════════════ */
.nl-section{
  padding:80px var(--page-px);
  border-top:1px solid rgba(234,224,206,.06);
}

.nl-inner{
  max-width:1380px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  align-items:center;
}

.nl-h2{
  font-size:clamp(24px,3.2vw,40px);
  line-height:1.15;
  margin-bottom:18px;
}

.nl-body{
  font-size:15px;
  font-weight:300;
  line-height:1.8;
  color:rgba(234,224,206,.6);
}

.nl-cta{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
}

.nl-fine{
  font-size:12px;
  color:rgba(234,224,206,.5);
  letter-spacing:.04em;
  line-height:1.5;
}

@media(min-width:1024px){
  .nl-inner{
    grid-template-columns:1fr 1fr;
    gap:80px;
  }
  .nl-section{padding:112px var(--page-px)}
}

/* ═══════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════ */
.form-field{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(234,224,206,.2);
  color:var(--cream);
  font-family:var(--fb);
  font-size:16px;
  font-weight:300;
  padding:14px 0;
  outline:none;
  transition:border-color .2s;
  -webkit-appearance:none;
  border-radius:0;
}
.form-field:focus{border-color:rgba(234,224,206,.55)}
.form-field::placeholder{color:rgba(234,224,206,.22)}

textarea.form-field{
  resize:vertical;
  min-height:120px;
  line-height:1.6;
}

select.form-field{
  color:rgba(234,224,206,.22);
  cursor:pointer;
  background:var(--dark);
}
select.form-field:valid:not([value=""]){color:var(--cream)}
select.form-field option{
  background:var(--dark2);
  color:var(--cream);
}

/* ═══════════════════════════════════════════
   PRODUCT CARDS
   ═══════════════════════════════════════════ */
.product-card{
  padding:60px 0;
  border-bottom:1px solid rgba(234,224,206,.07);
}

.product-card--box{
  background:var(--cream);
  color:#1A1510;
  border:none;
  border-radius:6px;
  padding:28px;
  margin-bottom:32px;
  border-bottom:none;
}
.product-card--box h3{color:#1A1510}
.product-card--box .tag{color:var(--orange)}
.product-card--box .tag::before{background:var(--orange)}
.product-card--box .product-desc{color:rgba(26,21,16,.65)}
.product-card--box .product-for{
  color:rgba(26,21,16,.55);
  border-left-color:var(--orange);
}
.product-card--box .product-list li{color:rgba(26,21,16,.65)}
.product-card--box .product-list li::before{background:var(--orange)}
.product-card--box .product-logistics{color:rgba(26,21,16,.35)}
.product-card--box .btn{
  color:#1A1510;
  border-color:rgba(26,21,16,.3);
}
.product-card--box .btn:hover{
  background:rgba(26,21,16,.08);
  border-color:rgba(26,21,16,.5);
}

@media(min-width:768px){
  .product-card--box{padding:40px 44px}
}

.product-card h3{
  font-size:clamp(24px,3vw,36px);
  margin-bottom:18px;
}

.product-desc{
  font-size:15px;
  font-weight:300;
  line-height:1.8;
  color:rgba(234,224,206,.65);
  max-width:600px;
  margin-bottom:24px;
}

.product-for{
  font-size:14px;
  font-weight:300;
  line-height:1.7;
  color:rgba(234,224,206,.55);
  max-width:560px;
  margin-bottom:32px;
  padding-left:16px;
  border-left:2px solid var(--orange);
}

.product-list{
  list-style:none;
  margin-bottom:36px;
}

.product-list li{
  font-size:15px;
  font-weight:300;
  line-height:1.8;
  color:rgba(234,224,206,.65);
  padding-left:20px;
  position:relative;
}
.product-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:11px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
}

.product-logistics{
  font-size:13px;
  font-weight:300;
  letter-spacing:.05em;
  color:rgba(234,224,206,.5);
  margin-bottom:28px;
}

/* ═══════════════════════════════════════════
   SERVICE CARDS (3-column grid)
   ═══════════════════════════════════════════ */
.services-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  max-width:1380px;
  margin:0 auto;
  padding:0 var(--page-px);
}

.service-card{
  padding:40px 0;
  border-top:1px solid rgba(234,224,206,.07);
}

.service-card h3{
  font-size:clamp(22px,2.5vw,28px);
  margin-bottom:14px;
}

.service-card p{
  font-size:15px;
  font-weight:300;
  line-height:1.8;
  color:rgba(234,224,206,.6);
  max-width:380px;
}

@media(min-width:768px){
  .services-grid{grid-template-columns:repeat(3,1fr);gap:52px}
}

/* ═══════════════════════════════════════════
   PROCESS STEPS
   ═══════════════════════════════════════════ */
.process-section{
  padding:80px var(--page-px);
  max-width:none;
  margin:0;
  background:var(--cream);
}

.process-section-inner{
  max-width:800px;
  margin:0 auto;
}

.process-section .tag{color:var(--orange)}
.process-section .tag::before{background:var(--orange)}

.process-section .story-h2{color:#1A1510}

.process-step{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:20px;
  padding:32px 0;
  border-bottom:1px solid rgba(234,224,206,.07);
}

.step-num{
  font-family:var(--fd);
  font-size:32px;
  color:var(--orange);
  line-height:1;
}

.step-title{
  font-family:var(--fd);
  font-size:20px;
  color:#1A1510;
  margin-bottom:8px;
  line-height:1.3;
}

.step-desc{
  font-size:15px;
  font-weight:300;
  line-height:1.7;
  color:rgba(26,21,16,.5);
}

.process-section .process-step{
  border-bottom-color:rgba(26,21,16,.1);
}

/* Process — dark variant */
.process-section--dark{
  background:var(--dark);
}
.process-section--dark .story-h2{color:var(--cream)}
.process-section--dark .step-title{color:var(--cream)}
.process-section--dark .step-desc{color:rgba(234,224,206,.6)}
.process-section--dark .process-step{border-bottom-color:rgba(234,224,206,.08)}

/* ═══════════════════════════════════════════
   PORTFOLIO GRID
   ═══════════════════════════════════════════ */
.portfolio-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  max-width:1380px;
  margin:0 auto;
  padding:0 var(--page-px);
}

.portfolio-item{
  position:relative;
  overflow:hidden;
  background:var(--dark2);
  border-radius:4px;
  min-height:240px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px;
}

.portfolio-item-name{
  font-family:var(--fd);
  font-size:22px;
  margin-bottom:6px;
}

.portfolio-item-desc{
  font-size:13px;
  font-weight:300;
  color:rgba(234,224,206,.55);
}

@media(min-width:768px){
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){
  .portfolio-grid{grid-template-columns:repeat(3,1fr)}
}

/* Portfolio — light variant */
.portfolio-section-light{
  background:var(--cream);
  padding:80px 0;
}

.portfolio-section-inner{
  max-width:800px;
  margin:0 auto;
  padding:0 var(--page-px) 48px;
}

.portfolio-section-light .tag{color:var(--orange)}
.portfolio-section-light .tag::before{background:var(--orange)}

.portfolio-heading{
  font-family:var(--fd);
  font-size:clamp(28px,4vw,44px);
  font-weight:400;
  color:#1A1510;
  line-height:1.05;
}

.portfolio-grid--light{padding:0 var(--page-px)}

.portfolio-item--light{
  background:rgba(26,21,16,.06);
  border:1px solid rgba(26,21,16,.08);
}
.portfolio-item--light .portfolio-item-name{color:#1A1510}
.portfolio-item--light .portfolio-item-desc{color:rgba(26,21,16,.5)}

/* ═══════════════════════════════════════════
   LONGTERM SECTION
   ═══════════════════════════════════════════ */
.longterm-section{
  max-width:none;
  padding:80px var(--page-px);
}
.longterm-section > .reveal,
.longterm-section > .longterm-list{
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

.longterm-list{
  list-style:none;
  margin-top:40px;
}
.longterm-list li{
  font-size:15px;
  font-weight:300;
  line-height:1.8;
  color:rgba(234,224,206,.65);
  padding-left:20px;
  position:relative;
  margin-bottom:10px;
}
.longterm-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:12px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
}

@media(min-width:1024px){
  .longterm-section{padding:100px var(--page-px)}
}

/* ═══════════════════════════════════════════
   CTA BANNER (end of page) — light
   ═══════════════════════════════════════════ */
.cta-banner{
  padding:80px var(--page-px);
  text-align:center;
  background:var(--cream);
}

.cta-banner h2{
  font-size:clamp(28px,4vw,48px);
  margin-bottom:14px;
  color:#1A1510;
}

.cta-banner p{
  font-size:15px;
  font-weight:300;
  color:rgba(26,21,16,.5);
  margin-bottom:32px;
}

.cta-banner .btn{
  color:#1A1510;
  border-color:rgba(26,21,16,.3);
}
.cta-banner .btn:hover{
  background:rgba(26,21,16,.08);
  border-color:rgba(26,21,16,.5);
}

/* CTA dark variant */
.cta-banner--dark{
  background:var(--dark);
}
.cta-banner--dark h2{color:var(--cream)}
.cta-banner--dark p{color:rgba(234,224,206,.6)}
.cta-banner--dark .btn{
  color:var(--cream);
  border-color:rgba(234,224,206,.4);
}
.cta-banner--dark .btn:hover{
  background:rgba(234,224,206,.1);
  border-color:rgba(234,224,206,.7);
}

@media(min-width:1024px){
  .cta-banner{padding:112px var(--page-px)}
}

/* ═══════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════ */
.about-text{
  max-width:680px;
  margin:0 auto;
  padding:0 var(--page-px) 80px;
}

.about-text p{
  font-size:16px;
  font-weight:300;
  line-height:1.85;
  color:rgba(234,224,206,.65);
  margin-bottom:28px;
}
.about-text p:first-child{
  font-size:18px;
  font-weight:400;
  color:var(--cream);
  line-height:1.7;
}

.about-photos{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  margin-bottom:80px;
}

@media(min-width:768px){
  .about-photos{grid-template-columns:repeat(3,1fr)}
}

.about-photo-placeholder{
  background:var(--dark2);
  min-height:280px;
  position:relative;
}

.about-socials{
  display:flex;
  justify-content:center;
  gap:36px;
  padding-bottom:60px;
}

.about-socials a{
  font-family:var(--fb);
  font-size:11px;
  font-weight:400;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(234,224,206,.55);
  transition:color .2s;
}
.about-socials a:hover{color:var(--cream)}

/* ═══════════════════════════════════════════
   CONTACT SECTION — homepage (light)
   ═══════════════════════════════════════════ */
.contact-section{
  background:var(--cream);
  padding:80px var(--page-px);
}

.contact-section-inner{
  max-width:900px;
  margin:0 auto;
}

.contact-heading{
  font-family:var(--fd);
  font-size:clamp(32px,4vw,48px);
  font-weight:400;
  color:#1A1510;
  margin-bottom:12px;
}

.contact-sub{
  font-size:16px;
  font-weight:300;
  color:rgba(26,21,16,.55);
  margin-bottom:48px;
}

.contact-section .tag{color:var(--orange)}
.contact-section .tag::before{background:var(--orange)}

/* Light form fields */
.form-field--light{
  color:#1A1510;
  border-bottom-color:rgba(26,21,16,.2);
  background:transparent;
}
.form-field--light:focus{border-bottom-color:rgba(26,21,16,.5)}
.form-field--light::placeholder{color:rgba(26,21,16,.3)}

select.form-field--light{
  color:rgba(26,21,16,.3);
  background:var(--cream);
}
select.form-field--light:valid:not([value=""]){color:#1A1510}
select.form-field--light option{
  background:var(--cream);
  color:#1A1510;
}

/* Light contact info */
.contact-info--light{color:rgba(26,21,16,.45)}
.contact-info--light strong{color:#1A1510;font-weight:400}
.contact-info--light a{color:#1A1510}

/* Contact sidebar */
.contact-sidebar{
  display:flex;
  flex-direction:column;
  gap:44px;
}

.contact-sidebar-label{
  font-family:var(--fb);
  font-size:10px;
  font-weight:400;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(26,21,16,.35);
  margin-bottom:10px;
}

.contact-sidebar-email{
  font-size:16px;
  font-weight:300;
  color:#1A1510!important;
  transition:opacity .2s;
}
.contact-sidebar-email:hover{opacity:.6}

.social-icons{
  display:flex;
  gap:24px;
}

.social-icons a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(26,21,16,.15);
  color:rgba(26,21,16,.45);
  transition:color .2s,border-color .2s,background .2s;
}
.social-icons a:hover{
  color:#1A1510;
  border-color:rgba(26,21,16,.35);
  background:rgba(26,21,16,.04);
}

/* Light button in contact */
.contact-section .btn{
  color:#1A1510;
  border-color:rgba(26,21,16,.3);
}
.contact-section .btn:hover{
  background:rgba(26,21,16,.08);
  border-color:rgba(26,21,16,.5);
}

/* Contact success state */
.contact-success-heading{
  font-family:var(--fd);
  font-size:28px;
  color:#1A1510;
  margin-bottom:14px;
}

.contact-success-text{
  font-size:16px;
  font-weight:300;
  line-height:1.7;
  color:rgba(26,21,16,.6);
  margin-bottom:18px;
}

.contact-success-fallback{
  font-size:14px;
  font-weight:300;
  color:rgba(26,21,16,.45);
}

.contact-success-fallback a{
  color:var(--orange);
  text-decoration:underline;
}

@media(min-width:1024px){
  .contact-section{padding:100px var(--page-px)}
}

/* ═══════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════ */
.contact-grid{
  max-width:900px;
  margin:0 auto;
  padding:0 var(--page-px) 80px;
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
}

.contact-form{display:flex;flex-direction:column;gap:24px}

.contact-info{
  font-size:14px;
  font-weight:300;
  color:rgba(234,224,206,.55);
  line-height:1.8;
}

.contact-info a{
  color:var(--cream);
  transition:opacity .2s;
}
.contact-info a:hover{opacity:.7}

@media(min-width:768px){
  .contact-grid{grid-template-columns:1fr 280px;gap:80px}
}

/* ═══════════════════════════════════════════
   REFERENCES
   ═══════════════════════════════════════════ */
.references-section{
  padding:60px var(--page-px) 80px;
  max-width:none;
  margin:0;
  background:var(--cream);
}

.references-section .tag{color:var(--orange)}
.references-section .tag::before{background:var(--orange)}

.references-section-inner{
  max-width:800px;
  margin:0 auto;
}

.references-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  list-style:none;
}

.references-list li{
  font-size:14px;
  font-weight:300;
  color:rgba(26,21,16,.45);
}

/* ═══════════════════════════════════════════
   SECTION UTILITY
   ═══════════════════════════════════════════ */
.section-padded{
  padding:80px var(--page-px);
  max-width:800px;
  margin:0 auto;
}

@media(min-width:1024px){
  .section-padded{padding:100px var(--page-px)}
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
footer{
  border-top:1px solid rgba(234,224,206,.08);
  padding:28px var(--page-px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}

.f-logo{font-family:var(--fd);font-size:18px;font-weight:400;color:var(--cream)}

.f-links{display:flex;gap:28px;list-style:none}
.f-links a{
  font-family:var(--fb);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(234,224,206,.28);
  transition:color .2s;
}
.f-links a:hover{color:rgba(234,224,206,.65)}

.f-copy{
  font-family:var(--fb);
  font-size:11px;
  letter-spacing:.04em;
  color:rgba(234,224,206,.45);
}

.f-legal{
  display:flex;
  gap:20px;
  list-style:none;
}
.f-legal a{
  font-family:var(--fb);
  font-size:11px;
  letter-spacing:.04em;
  color:rgba(234,224,206,.5);
  transition:color .2s;
}
.f-legal a:hover{color:var(--cream)}

@media(min-width:768px){
  footer{
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:center;
    padding:36px var(--page-px);
  }
}

/* ═══════════════════════════════════════════
   REVEAL ANIMATIONS
   ═══════════════════════════════════════════ */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 1.2s cubic-bezier(0.16,1,0.3,1),
             transform 1.2s cubic-bezier(0.16,1,0.3,1);
}
.reveal.on{
  opacity:1;
  transform:none;
}
.reveal-d1{transition-delay:.15s}
.reveal-d2{transition-delay:.3s}

/* ═══════════════════════════════════════════
   TIMELINE
   ═══════════════════════════════════════════ */
.timeline-section{
  max-width:none;
  margin:0;
  padding:80px var(--page-px);
  background:var(--cream);
}

.timeline-section-inner{
  max-width:680px;
  margin:0 auto;
}

.timeline-heading{
  font-size:clamp(24px,4vw,36px);
  line-height:1.2;
  color:#1A1510;
  margin-bottom:16px;
}

.timeline-intro{
  font-size:16px;
  font-weight:300;
  line-height:1.7;
  color:rgba(26,21,16,.45);
  margin-bottom:56px;
  max-width:540px;
}

.timeline{
  position:relative;
  padding-left:48px;
}

.timeline::before{
  content:'';
  position:absolute;
  left:15px;
  top:8px;
  bottom:8px;
  width:1px;
  background:rgba(26,21,16,.12);
}

.timeline-item{
  position:relative;
  padding-bottom:56px;
}
.timeline-item:last-child{padding-bottom:0}

/* Dot outer */
.timeline-item::before{
  content:'';
  position:absolute;
  left:-48px;
  top:6px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--cream);
  border:1px solid rgba(26,21,16,.15);
  z-index:1;
  transition:border-color .3s,box-shadow .3s;
}

/* Dot inner */
.timeline-item::after{
  content:'';
  position:absolute;
  left:-39px;
  top:15px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--orange);
  z-index:2;
  transform:scale(.6);
  transition:transform .3s;
}

.timeline-item:hover::before{
  border-color:var(--orange);
  box-shadow:0 0 0 6px rgba(196,79,15,.12);
}
.timeline-item:hover::after{transform:scale(1)}

.timeline-year{
  font-family:var(--fd);
  font-size:32px;
  color:var(--orange);
  line-height:1;
  margin-bottom:12px;
  letter-spacing:-.02em;
}

.timeline-title{
  font-family:var(--fd);
  font-size:20px;
  color:#1A1510;
  margin-bottom:10px;
  line-height:1.3;
}

.timeline-text{
  font-size:15px;
  font-weight:300;
  line-height:1.7;
  color:rgba(26,21,16,.45);
  max-width:480px;
}

.timeline-tag{
  display:inline-block;
  margin-top:14px;
  padding:5px 14px;
  background:rgba(196,79,15,.1);
  color:var(--orange);
  font-size:12px;
  font-weight:400;
  border-radius:100px;
  letter-spacing:.03em;
}

@media(max-width:480px){
  .timeline{padding-left:40px}
  .timeline::before{left:11px}
  .timeline-item::before{left:-40px;width:24px;height:24px}
  .timeline-item::after{left:-34px;top:12px;width:10px;height:10px}
  .timeline-year{font-size:26px}
}

/* ═══════════════════════════════════════════
   LEGAL PAGES
   ═══════════════════════════════════════════ */
.legal-content{
  max-width:600px;
  margin:0 auto;
  padding:0 var(--page-px) 100px;
}

.legal-intro{
  font-size:16px;
  font-weight:300;
  line-height:1.85;
  color:rgba(234,224,206,.6);
  margin-bottom:56px;
  font-style:italic;
  border-left:2px solid var(--orange);
  padding-left:20px;
}

.legal-section{
  margin-bottom:56px;
  padding-bottom:56px;
  border-bottom:1px solid rgba(234,224,206,.06);
}
.legal-section:last-child{border-bottom:none;padding-bottom:0}

.legal-section h2{
  font-size:clamp(18px,2.5vw,22px);
  margin-bottom:20px;
  color:var(--cream);
  letter-spacing:.01em;
}

.legal-section h3{
  font-size:16px;
  margin-bottom:12px;
  margin-top:32px;
  color:var(--cream);
  letter-spacing:.01em;
}

.legal-section p{
  font-size:15px;
  font-weight:300;
  line-height:1.85;
  color:rgba(234,224,206,.6);
  margin-bottom:16px;
}

.legal-section ul{
  list-style:none;
  margin-bottom:16px;
}

.legal-section li{
  font-size:15px;
  font-weight:300;
  line-height:1.85;
  color:rgba(234,224,206,.6);
  padding-left:20px;
  position:relative;
  margin-bottom:8px;
}

.legal-section li::before{
  content:'';
  position:absolute;
  left:0;
  top:12px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--orange);
  opacity:.7;
}

.legal-section li strong{
  color:var(--cream);
  font-weight:400;
}

.legal-section a{
  color:var(--orange);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ═══════════════════════════════════════════
   COOKIE BANNER
   ═══════════════════════════════════════════ */
.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:300;
  background:var(--dark2);
  border-top:1px solid rgba(234,224,206,.1);
  padding:20px var(--page-px);
  display:flex;
  flex-direction:column;
  gap:16px;
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(0.16,1,0.3,1);
}
.cookie-banner.visible{transform:translateY(0)}

.cookie-banner-text{
  font-size:13px;
  font-weight:300;
  line-height:1.6;
  color:rgba(234,224,206,.55);
}
.cookie-banner-text a{
  color:var(--cream);
  text-decoration:underline;
}

.cookie-banner-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.cookie-btn{
  font-family:var(--fb);
  font-size:11px;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:10px 22px;
  border-radius:100px;
  cursor:pointer;
  transition:background .2s,border-color .2s;
}

.cookie-btn--accept{
  background:var(--cream);
  color:var(--dark);
  border:1px solid var(--cream);
}
.cookie-btn--accept:hover{
  background:var(--cream2);
  border-color:var(--cream2);
}

.cookie-btn--necessary{
  background:transparent;
  color:var(--cream);
  border:1px solid rgba(234,224,206,.3);
}
.cookie-btn--necessary:hover{
  background:rgba(234,224,206,.08);
  border-color:rgba(234,224,206,.5);
}

.cookie-btn--settings{
  background:transparent;
  color:rgba(234,224,206,.55);
  border:1px solid rgba(234,224,206,.25);
  font-size:10px;
}
.cookie-btn--settings:hover{
  color:var(--cream);
  border-color:rgba(234,224,206,.3);
}

/* Cookie settings panel */
.cookie-settings{
  display:none;
  padding-top:16px;
  border-top:1px solid rgba(234,224,206,.08);
  margin-top:4px;
}
.cookie-settings.open{display:block}

.cookie-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid rgba(234,224,206,.05);
}

.cookie-option-label{
  font-size:13px;
  font-weight:300;
  color:rgba(234,224,206,.55);
}
.cookie-option-label strong{
  color:var(--cream);
  font-weight:400;
}

/* Toggle switch */
.cookie-toggle{
  position:relative;
  width:40px;
  height:22px;
  flex-shrink:0;
}
.cookie-toggle input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}
.cookie-toggle-track{
  position:absolute;
  inset:0;
  background:rgba(234,224,206,.12);
  border-radius:11px;
  cursor:pointer;
  transition:background .2s;
}
.cookie-toggle-track::after{
  content:'';
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  background:var(--cream);
  border-radius:50%;
  transition:transform .2s;
}
.cookie-toggle input:checked + .cookie-toggle-track{
  background:var(--orange);
}
.cookie-toggle input:checked + .cookie-toggle-track::after{
  transform:translateX(18px);
}
.cookie-toggle input:disabled + .cookie-toggle-track{
  opacity:.4;
  cursor:not-allowed;
}

@media(min-width:768px){
  .cookie-banner{
    flex-direction:row;
    align-items:center;
    gap:24px;
  }
  .cookie-banner-text{flex:1}
  .cookie-banner-actions{flex-shrink:0}
}

/* ═══════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════ */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:rgba(234,224,206,.12);border-radius:2px}
