/* ==========================================================================
   Picturist — Editorial / Magazine Business-Plan Site
   ========================================================================== */

:root{
  --cream:#f4efe6;
  --cream-2:#ece3d3;
  --paper:#faf7f0;
  --ink:#231f1a;
  --ink-soft:#4a443c;
  --line:#d9cdb8;
  --accent:#a8532f;   /* terracotta */
  --accent-2:#5b6653; /* sage */
  --gold:#9c7a3c;
  --white:#ffffff;
  --shadow: 0 20px 60px -20px rgba(35,31,26,.35);
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tracking: .18em;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:var(--tracking);
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
}

.section-title{
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:700;
  line-height:1.1;
  margin:.4em 0 .5em;
  letter-spacing:-.01em;
}

.section-lede{
  max-width:680px;
  font-size:1.05rem;
  color:var(--ink-soft);
}

.rule{
  height:1px;
  background:linear-gradient(90deg,var(--line),transparent);
  margin:2.5rem 0;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
  padding:.35em .8em;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink-soft);
  background:var(--paper);
}

/* ---------------- Top utility bar ---------------- */
.topbar{
  background:var(--ink);
  color:var(--cream-2);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 32px;
}
.topbar span{opacity:.8;}
.topbar .issue-date{opacity:.6;}

/* ---------------- Header / Nav ---------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(244,239,230,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 32px;
}
.logo{
  font-family:var(--serif);
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:.02em;
}
.logo span{color:var(--accent);}
.nav-links{
  display:flex;
  gap:2rem;
  list-style:none;
  margin:0;
  padding:0;
  font-size:.82rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:600;
}
.nav-links a{
  position:relative;
  padding-bottom:4px;
  transition:color .2s;
}
.nav-links a:after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background:var(--accent);
  transition:width .25s;
}
.nav-links a:hover:after{width:100%;}
.nav-links a:hover{color:var(--accent);}

.nav-cta{
  background:var(--ink);
  color:var(--cream);
  padding:.65em 1.4em;
  border-radius:2px;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  transition:background .2s, transform .2s;
}
.nav-cta:hover{background:var(--accent); transform:translateY(-1px);}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{width:24px; height:2px; background:var(--ink); display:block;}

/* ---------------- Hero (magazine cover) ---------------- */
.hero{
  position:relative;
  padding:70px 0 0;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:50px;
  align-items:center;
}
.hero-copy .eyebrow{margin-bottom:1.2rem; display:block;}
.hero-title{
  font-family:var(--serif);
  font-size:clamp(2.6rem,6vw,4.6rem);
  line-height:1.02;
  font-weight:700;
  letter-spacing:-.015em;
  margin:0 0 1.1rem;
}
.hero-title em{color:var(--accent); font-style:italic;}
.hero-desc{
  font-size:1.12rem;
  color:var(--ink-soft);
  max-width:520px;
  margin-bottom:2rem;
}
.hero-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:2.4rem;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.9em 1.8em;
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  border-radius:2px;
  cursor:pointer;
  border:1px solid var(--ink);
  transition:all .25s;
}
.btn-primary{background:var(--ink); color:var(--cream); }
.btn-primary:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--cream); transform:translateY(-2px);}

.hero-meta{
  display:flex;
  gap:2.2rem;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
}
.hero-meta .stat-num{
  font-family:var(--serif);
  font-size:1.7rem;
  font-weight:700;
  color:var(--accent);
  display:block;
}
.hero-meta .stat-label{
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* Hero visual composition - collage of photos */
.hero-visual{
  position:relative;
  height:560px;
}
.photo-card{
  position:absolute;
  border-radius:3px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--paper);
}
.photo-card img{width:100%; height:100%; object-fit:cover;}
.pc-1{width:62%; height:64%; top:0; right:0; z-index:3;}
.pc-2{width:48%; height:42%; left:0; bottom:12%; z-index:4; border:6px solid var(--paper);}
.pc-3{width:34%; height:30%; left:14%; top:6%; z-index:2; border:6px solid var(--paper); opacity:.95;}
.plate-caption{
  position:absolute;
  bottom:-30px; left:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:.85rem;
  color:var(--ink-soft);
}

.float-badge{
  position:absolute;
  z-index:5;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:50%;
  width:110px; height:110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:var(--shadow);
  bottom:-10px; right:6%;
  animation:float 5s ease-in-out infinite;
}
.float-badge strong{font-family:var(--serif); font-size:1.4rem; color:var(--accent);}
.float-badge small{font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}

/* marquee strip under hero */
.marquee-strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--ink);
  color:var(--cream-2);
  padding:14px 0;
  overflow:hidden;
  white-space:nowrap;
  margin-top:60px;
}
.marquee-track{
  display:inline-flex;
  gap:3rem;
  animation:marquee 28s linear infinite;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.marquee-track span{opacity:.75;}
@keyframes marquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* ---------------- Section shells ---------------- */
section{padding:110px 0;}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  margin-bottom:3.5rem;
  flex-wrap:wrap;
}
.section-index{
  font-family:var(--serif);
  font-size:.85rem;
  color:var(--ink-soft);
  border-left:2px solid var(--accent);
  padding-left:.8em;
}

/* ---------------- How photos are made (explainer) ---------------- */
.process-section{background:var(--paper);}
.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.6rem;
}
.process-card{
  background:var(--cream);
  border:1px solid var(--line);
  padding:2rem 1.6rem;
  border-radius:4px;
  transition:transform .3s, box-shadow .3s;
  position:relative;
}
.process-card:hover{transform:translateY(-8px); box-shadow:var(--shadow);}
.process-num{
  font-family:var(--serif);
  font-size:.85rem;
  color:var(--accent);
  letter-spacing:.1em;
}
.process-card h3{
  font-family:var(--serif);
  font-size:1.25rem;
  margin:.6em 0 .5em;
}
.process-card p{
  font-size:.92rem;
  color:var(--ink-soft);
  margin:0;
}
.process-icon{
  width:46px;height:46px;
  border-radius:50%;
  background:var(--cream-2);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);
  font-size:1.1rem;
  margin-bottom:1rem;
}

/* Before/After Slider */
.compare-wrap{
  margin-top:4.5rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}
.compare-slider{
  position:relative;
  border-radius:6px;
  overflow:hidden;
  box-shadow:var(--shadow);
  aspect-ratio:4/5;
  cursor:ew-resize;
  user-select:none;
}
.compare-slider img{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
}
.compare-after-wrap{
  position:absolute; top:0; left:0;
  width:50%; height:100%;
  overflow:hidden;
  z-index:2;
}
.compare-after-wrap img{width:200%; max-width:none; height:100%;}
.compare-handle{
  position:absolute;
  top:0; left:50%;
  width:3px; height:100%;
  background:var(--paper);
  z-index:3;
  transform:translateX(-1.5px);
}
.compare-handle::after{
  content:'⟷';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  background:var(--paper);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  color:var(--ink);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.compare-label{
  position:absolute;
  bottom:14px;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(0,0,0,.55);
  padding:.4em .8em;
  z-index:4;
  border-radius:2px;
}
.label-before{left:14px;}
.label-after{right:14px;}

.compare-copy h3{
  font-family:var(--serif);
  font-size:1.8rem;
  margin-bottom:.6rem;
}
.compare-list{list-style:none; padding:0; margin:1.4rem 0;}
.compare-list li{
  display:flex;
  gap:.8em;
  padding:.6em 0;
  border-bottom:1px dashed var(--line);
  font-size:.95rem;
  color:var(--ink-soft);
}
.compare-list li i{color:var(--accent-2); margin-top:3px;}

/* ---------------- Index / Table of contents ---------------- */
.index-section{background:var(--ink); color:var(--cream-2);}
.index-section .eyebrow{color:var(--gold);}
.index-section .section-title{color:var(--cream);}
.index-section .section-lede{color:#c8c0b1;}
.index-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 3rem;
  margin-top:3rem;
  border-top:1px solid rgba(244,239,230,.15);
}
.index-item{
  display:flex;
  align-items:baseline;
  gap:1.2rem;
  padding:1.3rem 0;
  border-bottom:1px solid rgba(244,239,230,.15);
  cursor:pointer;
  transition:padding-left .25s, color .25s;
}
.index-item:hover{padding-left:.6rem; color:var(--gold);}
.index-item .idx-no{
  font-family:var(--serif);
  font-size:1rem;
  color:var(--accent);
  min-width:2.4em;
}
.index-item .idx-title{
  font-family:var(--serif);
  font-size:1.15rem;
  flex:1;
}
.index-item .idx-page{
  font-size:.75rem;
  color:#8f8878;
  letter-spacing:.08em;
}

/* ---------------- Market section ---------------- */
.market-section .stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  margin-top:3rem;
}
.stat-card{
  background:var(--paper);
  border:1px solid var(--line);
  padding:2.2rem 1.6rem;
  text-align:left;
  border-radius:4px;
}
.stat-card .stat-figure{
  font-family:var(--serif);
  font-size:2.6rem;
  font-weight:700;
  color:var(--accent);
  line-height:1;
}
.stat-card .stat-desc{
  font-size:.85rem;
  color:var(--ink-soft);
  margin-top:.6rem;
}
.market-quote{
  margin-top:3.5rem;
  border-left:3px solid var(--accent);
  padding-left:2rem;
  font-family:var(--serif);
  font-size:1.5rem;
  font-style:italic;
  color:var(--ink);
  max-width:820px;
}
.market-quote cite{
  display:block;
  margin-top:1rem;
  font-family:var(--sans);
  font-style:normal;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---------------- Services / Plates gallery ---------------- */
.gallery-section{background:var(--paper);}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.6rem;
  margin-top:3rem;
}
.plate{
  position:relative;
  border-radius:4px;
  overflow:hidden;
  aspect-ratio:3/4;
  box-shadow:var(--shadow);
}
.plate img{width:100%; height:100%; object-fit:cover; transition:transform .5s;}
.plate:hover img{transform:scale(1.06);}
.plate-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(20,16,12,.85) 100%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1.6rem;
  color:#fff;
}
.plate-overlay .plate-tag{font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:.4em;}
.plate-overlay h4{font-family:var(--serif); font-size:1.3rem; margin:0;}

/* ---------------- Service tabs / pricing plans ---------------- */
.pricing-section{}
.plan-toggle{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px;
  margin-bottom:3rem;
  background:var(--paper);
}
.plan-toggle button{
  border:none;
  background:transparent;
  padding:.6em 1.4em;
  border-radius:999px;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
  color:var(--ink-soft);
  transition:all .25s;
}
.plan-toggle button.active{background:var(--ink); color:var(--cream);}

.plans-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.8rem;
}
.plan-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  padding:2.6rem 2rem;
  position:relative;
  transition:transform .3s, box-shadow .3s;
}
.plan-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.plan-card.featured{
  border-color:var(--accent);
  background:var(--ink);
  color:var(--cream);
}
.plan-card.featured .plan-desc,
.plan-card.featured .plan-list li{color:#c8c0b1;}
.plan-badge{
  position:absolute; top:-13px; right:2rem;
  background:var(--accent);
  color:#fff;
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.4em .9em;
  border-radius:999px;
  font-weight:700;
}
.plan-name{
  font-family:var(--serif);
  font-size:1.5rem;
  margin:0 0 .3em;
}
.plan-desc{font-size:.88rem; color:var(--ink-soft); margin-bottom:1.4rem; min-height:40px;}
.plan-price{
  font-family:var(--serif);
  font-size:2.6rem;
  font-weight:700;
  margin-bottom:.2rem;
}
.plan-price span{font-size:.9rem; font-family:var(--sans); font-weight:400; opacity:.7;}
.plan-per{font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; opacity:.6; margin-bottom:1.8rem;}
.plan-list{list-style:none; padding:0; margin:0 0 2rem;}
.plan-list li{
  display:flex; gap:.7em;
  padding:.55em 0;
  font-size:.88rem;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.plan-card.featured .plan-list li{border-bottom:1px solid rgba(255,255,255,.1);}
.plan-list li i{color:var(--accent-2); margin-top:2px;}
.plan-card.featured .plan-list li i{color:var(--gold);}
.plan-btn{
  display:block;
  text-align:center;
  padding:.9em;
  border-radius:2px;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  border:1px solid var(--ink);
  transition:all .25s;
}
.plan-card:not(.featured) .plan-btn{color:var(--ink);}
.plan-card:not(.featured) .plan-btn:hover{background:var(--ink); color:var(--cream);}
.plan-card.featured .plan-btn{background:var(--cream); color:var(--ink); border-color:var(--cream);}
.plan-card.featured .plan-btn:hover{background:var(--gold); border-color:var(--gold); color:#fff;}

/* ---------------- Process timeline (24hr flow) ---------------- */
.timeline-section{background:var(--ink); color:var(--cream-2);}
.timeline-section .eyebrow{color:var(--gold);}
.timeline-section .section-title{color:var(--cream);}
.timeline-section .section-lede{color:#c8c0b1;}
.timeline{
  margin-top:4rem;
  position:relative;
  padding-left:2.6rem;
  border-left:1px solid rgba(244,239,230,.2);
}
.timeline-step{
  position:relative;
  padding-bottom:3rem;
}
.timeline-step:last-child{padding-bottom:0;}
.timeline-step::before{
  content:'';
  position:absolute;
  left:-2.95rem;
  top:2px;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--accent);
  border:3px solid var(--ink);
  box-shadow:0 0 0 3px rgba(168,83,47,.3);
}
.timeline-step .t-time{
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.4em;
}
.timeline-step h4{
  font-family:var(--serif);
  font-size:1.35rem;
  margin:0 0 .5em;
  color:var(--cream);
}
.timeline-step p{
  color:#c8c0b1;
  font-size:.92rem;
  max-width:600px;
  margin:0;
}

/* ---------------- Financials ---------------- */
.financials-section{background:var(--paper);}
.fin-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:3rem;
  margin-top:3rem;
  align-items:start;
}
.chart-card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:6px;
  padding:2rem;
}
.chart-card h4{
  font-family:var(--serif);
  font-size:1.15rem;
  margin:0 0 1.4rem;
}
.fin-list{list-style:none; margin:0; padding:0;}
.fin-list li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:1.1rem 0;
  border-bottom:1px solid var(--line);
}
.fin-list li:last-child{border-bottom:none;}
.fin-list .fin-label{
  font-size:.9rem;
  color:var(--ink-soft);
}
.fin-list .fin-value{
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:700;
  color:var(--accent);
}

/* ---------------- Team ---------------- */
.team-section{}
.team-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin-top:3rem;
}
.team-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  transition:transform .3s;
}
.team-card:hover{transform:translateY(-6px);}
.team-photo{
  aspect-ratio:4/5;
  background:var(--cream-2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-size:3rem;
  color:var(--accent);
}
.team-info{padding:1.6rem;}
.team-info h4{font-family:var(--serif); font-size:1.2rem; margin:0 0 .2em;}
.team-info .role{font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:.8em; display:block;}
.team-info p{font-size:.88rem; color:var(--ink-soft); margin:0;}

/* ---------------- FAQ Accordion ---------------- */
.faq-section{background:var(--paper);}
.faq-list{max-width:800px; margin:3rem auto 0;}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-question{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.6rem 0;
  cursor:pointer;
  font-family:var(--serif);
  font-size:1.15rem;
}
.faq-question .faq-plus{
  font-size:1.4rem;
  color:var(--accent);
  transition:transform .3s;
  flex-shrink:0;
  margin-left:1rem;
}
.faq-item.open .faq-plus{transform:rotate(45deg);}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  font-size:.92rem;
  color:var(--ink-soft);
}
.faq-answer-inner{padding-bottom:1.6rem; max-width:680px;}

/* ---------------- CTA banner ---------------- */
.cta-section{
  background:var(--accent);
  color:#fff;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-section h2{
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,3rem);
  margin:0 0 .8rem;
}
.cta-section p{
  max-width:560px;
  margin:0 auto 2rem;
  opacity:.9;
}
.cta-section .btn-primary{background:#fff; color:var(--ink); border-color:#fff;}
.cta-section .btn-primary:hover{background:var(--ink); color:#fff; border-color:var(--ink);}
.cta-section .btn-ghost{border-color:rgba(255,255,255,.6); color:#fff;}
.cta-section .btn-ghost:hover{background:#fff; color:var(--accent); border-color:#fff;}

/* ---------------- Footer ---------------- */
.site-footer{
  background:var(--ink);
  color:#c8c0b1;
  padding:80px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(244,239,230,.12);
}
.footer-logo{
  font-family:var(--serif);
  font-size:1.6rem;
  color:var(--cream);
  margin-bottom:1rem;
}
.footer-logo span{color:var(--accent);}
.footer-about{font-size:.88rem; max-width:280px; opacity:.85;}
.footer-social{display:flex; gap:.8rem; margin-top:1.4rem;}
.footer-social a{
  width:36px; height:36px;
  border:1px solid rgba(244,239,230,.25);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:all .25s;
}
.footer-social a:hover{background:var(--accent); border-color:var(--accent);}
.footer-col h5{
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.2rem;
}
.footer-col ul{list-style:none; margin:0; padding:0;}
.footer-col li{margin-bottom:.8rem; font-size:.88rem;}
.footer-col a{opacity:.85; transition:opacity .2s, padding-left .2s;}
.footer-col a:hover{opacity:1; color:var(--gold); padding-left:3px;}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.8rem 0;
  font-size:.78rem;
  opacity:.7;
  flex-wrap:wrap;
  gap:1rem;
}
.footer-bottom .legal-links{display:flex; gap:1.6rem;}
.footer-bottom a:hover{color:var(--gold);}

/* ---------------- Legal pages (cookies/terms/privacy) ---------------- */
.legal-page main{padding-top:60px;}
.legal-hero{
  background:var(--paper);
  padding:80px 0 60px;
  border-bottom:1px solid var(--line);
}
.legal-hero h1{
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,3rem);
  margin:0 0 .6rem;
}
.legal-hero .updated{font-size:.82rem; color:var(--ink-soft);}
.legal-content{
  max-width:760px;
  margin:0 auto;
  padding:70px 32px;
}
.legal-content h2{
  font-family:var(--serif);
  font-size:1.5rem;
  margin:2.2rem 0 .8rem;
}
.legal-content h2:first-child{margin-top:0;}
.legal-content p, .legal-content li{
  font-size:.96rem;
  color:var(--ink-soft);
  margin-bottom:1rem;
}
.legal-content ul{padding-left:1.4rem;}
.legal-toc{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  padding:1.6rem 2rem;
  margin-bottom:2.5rem;
}
.legal-toc h3{font-family:var(--serif); margin:0 0 1rem; font-size:1.05rem;}
.legal-toc ol{margin:0; padding-left:1.2rem;}
.legal-toc li{font-size:.88rem; margin-bottom:.5rem;}
.legal-toc a{color:var(--accent);}

/* ---------------- Cookie consent banner ---------------- */
.cookie-banner{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:200;
  background:var(--ink);
  color:var(--cream-2);
  padding:1.4rem 2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2rem;
  flex-wrap:wrap;
  transform:translateY(120%);
  transition:transform .5s ease;
  box-shadow:0 -10px 40px rgba(0,0,0,.3);
}
.cookie-banner.show{transform:translateY(0);}
.cookie-banner p{margin:0; font-size:.88rem; max-width:600px;}
.cookie-banner p a{color:var(--gold); text-decoration:underline;}
.cookie-actions{display:flex; gap:.8rem; flex-shrink:0;}
.cookie-actions button{
  padding:.6em 1.3em;
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  border-radius:2px;
  cursor:pointer;
  border:1px solid rgba(244,239,230,.3);
  background:transparent;
  color:var(--cream);
}
.cookie-actions .cookie-accept{background:var(--accent); border-color:var(--accent);}
.cookie-actions button:hover{opacity:.85;}

/* ---------------- Reveal animation ---------------- */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* ---------------- Back to top ---------------- */
.back-to-top{
  position:fixed;
  bottom:2rem; right:2rem;
  width:48px; height:48px;
  background:var(--ink);
  color:var(--cream);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s, transform .3s;
  z-index:90;
  box-shadow:var(--shadow);
}
.back-to-top.show{opacity:1; pointer-events:auto;}
.back-to-top:hover{background:var(--accent); transform:translateY(-3px);}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{height:420px; margin-top:2rem;}
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .plans-grid{grid-template-columns:1fr; max-width:460px; margin:0 auto;}
  .market-section .stat-grid{grid-template-columns:repeat(2,1fr);}
  .fin-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .compare-wrap{grid-template-columns:1fr;}
  .index-list{grid-template-columns:1fr;}
}

@media (max-width: 720px){
  .container{padding:0 20px;}
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .nav-cta{display:none;}
  section{padding:70px 0;}
  .hero{padding-top:40px;}
  .hero-meta{flex-wrap:wrap; gap:1.2rem;}
  .process-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:1fr;}
  .market-section .stat-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; text-align:left;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
  .topbar .container{flex-direction:column; gap:2px; padding:8px 20px;}
  .float-badge{width:86px; height:86px; right:0;}
  .cookie-banner{flex-direction:column; text-align:center; padding:1.4rem;}
}

/* Mobile nav drawer */
.mobile-nav{
  position:fixed;
  top:0; right:0;
  width:78%;
  max-width:320px;
  height:100vh;
  background:var(--ink);
  color:var(--cream);
  z-index:150;
  transform:translateX(100%);
  transition:transform .35s ease;
  padding:90px 2rem 2rem;
  box-shadow:-10px 0 40px rgba(0,0,0,.3);
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav ul{list-style:none; padding:0; margin:0 0 2rem;}
.mobile-nav li{margin-bottom:1.4rem;}
.mobile-nav a{font-family:var(--serif); font-size:1.3rem;}
.mobile-nav-close{
  position:absolute; top:24px; right:24px;
  background:none; border:none; color:var(--cream);
  font-size:1.6rem; cursor:pointer;
}
.mobile-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  z-index:140;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.mobile-overlay.show{opacity:1; pointer-events:auto;}