/* ============================================================
   Glass Hart — propozycja redesignu
   Style: jasny premium minimalizm + ciemny akcent
   ============================================================ */

/* ==========================
   FONTS
   ========================== */
@font-face { font-family:'Cormorant'; font-style:normal; font-weight:300; src:url('../fonts/cormorant-300.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Cormorant'; font-style:normal; font-weight:400; src:url('../fonts/cormorant-400.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Cormorant'; font-style:normal; font-weight:500; src:url('../fonts/cormorant-500.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Cormorant'; font-style:normal; font-weight:600; src:url('../fonts/cormorant-600.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Cormorant'; font-style:italic; font-weight:400; src:url('../fonts/cormorant-400i.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; src:url('../fonts/inter-300.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; src:url('../fonts/inter-400.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; src:url('../fonts/inter-500.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; src:url('../fonts/inter-600.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; src:url('../fonts/inter-700.ttf') format('truetype'); font-display:swap; }

/* ==========================
   DESIGN TOKENS
   ========================== */
:root {
  --bg:        #F7F5F0;
  --bg-soft:   #F0EDE5;
  --bg-dark:   #14181B;
  --bg-darker: #0E1113;
  --ink:       #14181B;
  --ink-2:     #3F4549;
  --ink-3:     #5C5A55;
  --line:      #E5E1D8;
  --line-2:    #DDD7C8;
  --gold:      #B89968;
  --gold-2:    #DBC59A;
  --gold-3:    #8C7A55;
  --muted:     #7C7B78;
  --max-w:     1280px;
  --pad-x:     80px;
}

/* ==========================
   RESET & BASE
   ========================== */
* { box-sizing:border-box; margin:0; padding:0; }
*:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img, svg { display:block; max-width:100%; }
img { height:auto; }
a { color:inherit; text-decoration:none; transition:color .25s ease; }
a:hover { color:var(--gold); }
button { font-family:inherit; cursor:pointer; border:0; background:transparent; }
ul { list-style:none; }
::selection { background:var(--gold); color:var(--ink); }

/* ==========================
   UTILITIES
   ========================== */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--pad-x); }

.eyebrow {
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-3); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before {
  content:''; width:6px; height:6px; background:var(--gold); border-radius:50%; flex-shrink:0;
}
.eyebrow.light { color:var(--gold-2); }

.h-display, h1, h2, h3 {
  font-family:'Cormorant', serif;
  font-weight:400;
  letter-spacing:-.005em;
  color:var(--ink);
}
em { font-style:italic; color:var(--ink-2); font-weight:400; }

.btn {
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 32px; border-radius:999px;
  font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  cursor:pointer;
  text-decoration:none;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--ink); color:var(--bg); }
.btn-primary:hover { background:var(--gold); color:var(--ink); }
.btn-ghost { background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn-ghost:hover { background:var(--ink); color:var(--bg); }
.btn-gold { background:var(--gold); color:var(--ink); }
.btn-gold:hover { background:var(--gold-2); color:var(--ink); }
.btn-arrow { font-size:16px; transition:transform .25s ease; }
.btn:hover .btn-arrow { transform:translateX(4px); }

.text-link {
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:4px;
  transition:color .25s ease, border-color .25s ease;
}
.text-link:hover { color:var(--gold); border-color:var(--gold); }

/* ==========================
   TOP UTILITY BAR
   ========================== */
.utility {
  background:var(--bg-soft);
  font-size:12px; color:var(--ink-3);
  padding:11px var(--pad-x);
  display:flex; justify-content:space-between; align-items:center;
  letter-spacing:.04em;
}
.utility .left { display:flex; flex-wrap:wrap; gap:32px; }
.utility .left strong { color:var(--ink); font-weight:500; }
.utility .right { display:flex; gap:20px; }
.utility .right a { font-weight:400; color:#A09F9C; }
.utility .right a.lang-active { color:var(--ink); font-weight:500; }
.utility .right a:hover { color:var(--gold); }

/* ==========================
   MAIN NAV
   ========================== */
.nav {
  background:var(--bg);
  padding:26px var(--pad-x);
  border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; z-index:100;
  transition:padding .25s ease, box-shadow .25s ease;
}
.nav.scrolled { padding:14px var(--pad-x); box-shadow:0 6px 24px rgba(20,24,27,.06); }
.logo { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.logo img { height:48px; width:auto; transition:height .25s ease; filter:brightness(0); }
.nav.scrolled .logo img { height:38px; }
.footer .logo img { filter:brightness(0) invert(1); }
.logo .text { display:none !important; }
.logo .text {
  display:flex; flex-direction:column; line-height:1;
}
.logo .text .name {
  font-family:'Cormorant', serif; font-weight:500; font-size:22px; letter-spacing:.02em; color:var(--ink);
}
.logo .text .tag {
  font-family:'Inter', sans-serif; font-weight:500;
  font-size:9px; letter-spacing:.4em; color:var(--gold-3);
  text-transform:uppercase; margin-top:4px;
}

.menu {
  display:flex; gap:28px;
  font-size:13px; font-weight:500; letter-spacing:.04em;
}
.menu li { position:relative; white-space:nowrap; }
.menu li > a {
  display:inline-flex; align-items:center; gap:6px; padding:6px 0;
  color:var(--ink);
}
.menu li > a:hover { color:var(--gold); }
.menu li.active > a { color:var(--gold); }
.menu li.active > a::after {
  content:''; position:absolute; left:0; right:0; bottom:-30px; height:2px; background:var(--gold);
}
.menu .chev { font-size:9px; opacity:.5; }
.menu .submenu {
  position:absolute; top:calc(100% + 14px); left:-20px;
  background:var(--bg); border:1px solid var(--line);
  padding:18px 0; min-width:280px;
  border-radius:4px;
  box-shadow:0 18px 40px rgba(20,24,27,.10);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .25s ease, visibility .25s ease, transform .25s ease;
  z-index:10;
}
.menu li:hover .submenu { opacity:1; visibility:visible; transform:translateY(0); }
.menu .submenu li { display:block; }
.menu .submenu a {
  display:block; padding:9px 22px;
  font-size:13px; font-weight:400; letter-spacing:.02em; color:var(--ink);
  text-transform:none;
}
.menu .submenu a:hover { background:var(--bg-soft); color:var(--gold); }

.nav-cta { display:flex; align-items:center; gap:18px; }
.nav-cta .icon-btn {
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-2);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--ink);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.nav-cta .icon-btn:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.nav-cta .btn { padding:13px 22px; font-size:11.5px; }
.nav-toggle { display:none; }

/* ==========================
   HERO
   ========================== */
.hero {
  background:var(--bg);
  padding:90px var(--pad-x) 100px;
  position:relative; overflow:hidden;
}
.hero-grid {
  display:flex; gap:80px; align-items:flex-end;
  max-width:var(--max-w); margin:0 auto;
}
.hero-left { flex:0 0 600px; padding-bottom:30px; }
.hero-left .eyebrow { margin-bottom:38px; }
.hero h1 {
  font-size:clamp(56px, 7.5vw, 108px);
  line-height:.96; letter-spacing:-.018em;
  margin-bottom:36px;
}
.hero h1 em { color:#5A4F35; }
.hero h1 .accent { color:var(--gold); font-style:italic; }
.hero .lead {
  font-weight:300; font-size:19px; line-height:1.55;
  color:var(--ink-2); max-width:500px; margin-bottom:48px;
}
.hero-cta-row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:60px; }
.hero-meta { display:flex; gap:60px; padding-top:32px; border-top:1px solid var(--line-2); }
.hero-meta .num { font-family:'Cormorant', serif; font-weight:400; font-size:42px; line-height:1; color:var(--ink); }
.hero-meta .lab { font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:8px; }

.hero-right {
  flex:1; position:relative; min-height:680px;
}
.hero-img {
  position:absolute; border-radius:4px; overflow:hidden;
  box-shadow:0 30px 60px rgba(20,24,27,.10);
  background:#1a1d20;
}
.hero-img img { width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.hero-img:hover img { transform:scale(1.04); }
.hero-img-1 { top:0; right:0; width:62%; height:480px; z-index:1; }
.hero-img-2 { bottom:60px; right:55%; width:42%; height:340px; z-index:2; }
.hero-img-3 { bottom:0; right:0; width:35%; height:180px; z-index:3; }

.hero-badge {
  position:absolute; top:30px; left:0;
  background:var(--ink); color:var(--bg);
  padding:22px 26px; max-width:240px;
  z-index:4; border-radius:4px;
  box-shadow:0 20px 50px rgba(20,24,27,.18);
}
.hero-badge .stars { color:var(--gold); letter-spacing:6px; font-size:14px; margin-bottom:8px; }
.hero-badge .num { font-family:'Cormorant', serif; font-size:36px; line-height:1; }
.hero-badge .copy { font-size:12px; line-height:1.45; color:#A8A6A0; margin-top:10px; }

.hero-watermark {
  position:absolute; left:-40px; bottom:-100px;
  font-family:'Cormorant', serif; font-style:italic; font-weight:400;
  font-size:280px; line-height:1; color:rgba(184,153,104,.07);
  pointer-events:none; white-space:nowrap; z-index:0;
}

.scroll-cue {
  position:absolute; left:var(--pad-x); bottom:30px;
  display:inline-flex; align-items:center; gap:14px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.scroll-cue::before { content:''; display:inline-block; width:40px; height:1px; background:var(--muted); }

/* ==========================
   TRUST STRIP
   ========================== */
.trust {
  background:var(--bg-soft);
  padding:28px var(--pad-x);
  display:flex; justify-content:space-between; align-items:center; gap:30px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.trust .label { font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.trust .logos {
  display:flex; flex-wrap:wrap; gap:40px; align-items:center;
  font-family:'Cormorant', serif; font-style:italic; font-size:21px;
  color:var(--ink-3); font-weight:400;
}
.trust .pt { display:inline-flex; align-items:center; gap:10px; }
.trust .pt::before {
  content:''; width:5px; height:5px; background:var(--gold); border-radius:50%;
}

/* ==========================
   FEATURED WORK (REALIZACJE)
   ========================== */
.featured { background:var(--bg); padding:130px var(--pad-x) 110px; }
.featured-inner { max-width:var(--max-w); margin:0 auto; }
.featured .head {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:60px; gap:40px; flex-wrap:wrap;
}
.featured .head .eyebrow { margin-bottom:22px; }
.featured h2 {
  font-size:clamp(40px, 5.5vw, 76px);
  line-height:1.02; letter-spacing:-.015em;
  max-width:780px;
}
.featured h2 em { color:#5A4F35; }
.featured .head .right {
  font-size:15px; color:var(--ink-2); max-width:340px; line-height:1.6;
}
.featured .head .right .text-link { margin-top:22px; }

.work-row { display:flex; gap:24px; }
.work-row + .work-row { margin-top:24px; }
.work-col { display:flex; flex-direction:column; gap:24px; flex:1; }

.work-card {
  position:relative; flex:1;
  border-radius:4px; overflow:hidden; background:#1a1d20;
  cursor:pointer;
  isolation:isolate;
}
.work-card img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.6,.2,1);
}
.work-card:hover img { transform:scale(1.04); }
.work-card.tall { height:660px; flex:1.4; }
.work-card.med  { height:320px; }
.work-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,24,27,.78) 0%, rgba(20,24,27,.25) 40%, rgba(20,24,27,0) 70%);
  z-index:1; pointer-events:none;
}
.work-card .meta {
  position:absolute; left:32px; right:32px; bottom:32px;
  color:var(--bg); z-index:2;
}
.work-card .cat {
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-2);
  display:inline-block; padding-bottom:10px;
  border-bottom:1px solid rgba(219,197,154,.35);
  margin-bottom:14px;
}
.work-card h3 {
  color:var(--bg);
  font-family:'Cormorant', serif; font-weight:400;
  font-size:30px; line-height:1.1;
}
.work-card.med h3 { font-size:24px; }
.work-card .loc { margin-top:10px; font-size:13px; color:rgba(247,245,240,.7); font-weight:300; font-family:'Inter',sans-serif; }
.work-card .corner-num {
  position:absolute; top:24px; right:28px; z-index:2;
  font-family:'Cormorant', serif; font-style:italic; font-size:22px;
  color:rgba(247,245,240,.7);
}

/* ==========================
   MANIFESTO / O FIRMIE
   ========================== */
.manifesto {
  background:var(--bg-dark); color:#F2EFE7;
  padding:130px var(--pad-x);
  position:relative; overflow:hidden;
}
.manifesto-inner { max-width:var(--max-w); margin:0 auto; }
.manifesto-grid { display:flex; gap:90px; align-items:center; }
.manifesto-img {
  flex:0 0 500px; height:660px;
  border-radius:4px; overflow:hidden; position:relative;
}
.manifesto-img img { width:100%; height:100%; object-fit:cover; }
.manifesto-img .frame {
  position:absolute; inset:18px;
  border:1px solid rgba(184,153,104,.4); pointer-events:none;
}
.manifesto-text { flex:1; max-width:640px; }
.manifesto-text .eyebrow { margin-bottom:28px; }
.manifesto-text h2 {
  font-size:clamp(36px, 4.5vw, 60px);
  line-height:1.05; letter-spacing:-.012em;
  color:var(--bg); margin-bottom:36px;
}
.manifesto-text h2 em { color:var(--gold-2); }
.manifesto-text p {
  font-weight:300; font-size:17px; line-height:1.65;
  color:#C2BFB6; margin-bottom:18px;
}
.manifesto-text p strong { color:var(--bg); font-weight:500; }

.values {
  display:flex; gap:32px;
  margin-top:56px; padding-top:44px;
  border-top:1px solid rgba(247,245,240,.12);
}
.value { flex:1; }
.value .num { font-family:'Cormorant',serif; font-style:italic; font-size:22px; color:var(--gold); margin-bottom:12px; }
.value h4 {
  font-family:'Cormorant',serif; font-size:24px; font-weight:400;
  color:var(--bg); margin-bottom:10px;
}
.value p { font-size:13px; line-height:1.55; color:#A8A6A0; font-weight:300; }

.manifesto-watermark {
  position:absolute; right:-50px; top:80px;
  font-family:'Cormorant',serif; font-style:italic; font-weight:300;
  font-size:240px; color:rgba(184,153,104,.06); line-height:1;
  pointer-events:none;
}

/* ==========================
   PRODUKTY GRID
   ========================== */
.products { background:var(--bg); padding:130px var(--pad-x); }
.products-inner { max-width:var(--max-w); margin:0 auto; }
.products .head {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:70px; gap:40px; flex-wrap:wrap;
}
.products .head .eyebrow { margin-bottom:22px; }
.products h2 {
  font-size:clamp(40px, 5vw, 70px);
  line-height:1.04; letter-spacing:-.015em;
}
.products h2 em { color:#5A4F35; }
.products .head .right { font-size:14px; line-height:1.65; color:var(--ink-2); max-width:340px; }

.product-grid {
  display:grid; grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--line-2);
}
.product {
  padding:36px 28px 28px;
  border-right:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  position:relative;
  transition:background .3s ease;
  cursor:pointer;
}
.product:nth-child(4n) { border-right:0; }
.product:hover { background:var(--bg-soft); }
.product .num {
  font-family:'Cormorant',serif; font-style:italic; font-size:14px; color:var(--gold);
  letter-spacing:.06em; margin-bottom:28px; display:block;
}
.product h3 {
  font-family:'Cormorant',serif; font-weight:400;
  font-size:22px; line-height:1.22; margin-bottom:14px;
  min-height:54px;
}
.product p { font-size:13px; line-height:1.55; color:var(--ink-3); margin-bottom:22px; min-height:70px; }
.product .more {
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  display:inline-flex; align-items:center; gap:10px;
}
.product .more::after {
  content:'→'; transition:transform .25s ease;
}
.product:hover .more { color:var(--gold); }
.product:hover .more::after { transform:translateX(4px); }

/* ==========================
   PROCES
   ========================== */
.process { background:var(--bg-soft); padding:130px var(--pad-x); }
.process-inner { max-width:var(--max-w); margin:0 auto; }
.process .head { text-align:center; margin-bottom:80px; }
.process .head .eyebrow { display:inline-flex; margin-bottom:22px; }
.process h2 {
  font-size:clamp(38px, 4.5vw, 60px);
  line-height:1.05; letter-spacing:-.012em;
  max-width:780px; margin:0 auto;
}
.process h2 em { color:#5A4F35; }
.process-steps {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  position:relative;
}
.process-steps::before {
  content:''; position:absolute;
  top:30px; left:60px; right:60px; height:1px;
  background:repeating-linear-gradient(to right, var(--line-2), var(--line-2) 6px, transparent 6px, transparent 12px);
  z-index:0;
}
.step { padding:0 28px; text-align:left; position:relative; z-index:1; }
.step .dot {
  width:60px; height:60px; border-radius:50%;
  background:var(--bg-soft); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant',serif; font-size:22px; color:var(--ink);
  margin-bottom:36px;
}
.step.active .dot { background:var(--ink); color:var(--gold); border-color:var(--ink); }
.step h4 {
  font-family:'Cormorant',serif; font-weight:400;
  font-size:24px; line-height:1.18; margin-bottom:12px;
}
.step p { font-size:13px; line-height:1.6; color:var(--ink-3); }

/* ==========================
   EDITORIAL / TESTIMONIAL
   ========================== */
.editorial { background:var(--bg); display:flex; align-items:stretch; min-height:680px; }
.editorial-img { flex:0 0 60%; overflow:hidden; }
.editorial-img img { width:100%; height:100%; min-height:680px; object-fit:cover; transition:transform 1s ease; }
.editorial-img:hover img { transform:scale(1.03); }
.editorial-text {
  flex:1; padding:120px 80px;
  background:var(--bg-soft); display:block; position:relative;
}
.editorial-text .quote-mark {
  font-family:'Cormorant',serif; font-style:italic; font-weight:300;
  font-size:140px; line-height:.7; color:var(--gold);
  margin-bottom:12px; display:block;
}
.editorial-text blockquote {
  font-family:'Cormorant',serif; font-style:italic; font-weight:400;
  font-size:30px; line-height:1.25; color:var(--ink);
  margin:0 0 40px 0;
}
.editorial-text .author-name {
  font-family:'Cormorant',serif; font-style:italic; font-weight:500;
  font-size:20px; color:var(--ink); display:block; margin-bottom:6px;
}
.editorial-text .author-meta {
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); font-weight:500; display:block; line-height:1.6;
}

/* ==========================
   STATS
   ========================== */
.stats {
  background:var(--bg-dark); color:var(--bg);
  padding:80px var(--pad-x);
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:0;
}
.stat { padding-right:40px; }
.stat + .stat { border-left:1px solid rgba(247,245,240,.12); padding-left:60px; }
.stat .num {
  font-family:'Cormorant',serif; font-weight:400;
  font-size:clamp(56px, 6.5vw, 84px); line-height:1;
  color:var(--bg); margin-bottom:14px;
}
.stat .num .acc { color:var(--gold); font-style:italic; }
.stat .lab { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#A8A6A0; }

/* ==========================
   INSIGHTS / BLOG
   ========================== */
.insights { background:var(--bg); padding:130px var(--pad-x) 110px; }
.insights-inner { max-width:var(--max-w); margin:0 auto; }
.insights .head {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:60px; gap:30px; flex-wrap:wrap;
}
.insights .head .eyebrow { margin-bottom:22px; }
.insights h2 {
  font-size:clamp(36px, 4.5vw, 56px);
  line-height:1.05; letter-spacing:-.012em;
}
.insights h2 em { color:#5A4F35; }
.posts { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.post { display:flex; flex-direction:column; cursor:pointer; }
.post-img {
  position:relative; height:280px; overflow:hidden;
  border-radius:4px; margin-bottom:28px; background:#1a1d20;
}
.post-img img { width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.post:hover .post-img img { transform:scale(1.04); }
.post-img .tag {
  position:absolute; top:20px; left:20px;
  background:rgba(247,245,240,.94); color:var(--ink);
  padding:8px 14px; border-radius:999px;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
}
.post .date { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.post h3 {
  font-family:'Cormorant',serif; font-weight:400;
  font-size:26px; line-height:1.18; margin-bottom:16px;
  transition:color .25s ease;
}
.post:hover h3 { color:var(--gold); }
.post p { font-size:14px; line-height:1.6; color:var(--ink-3); margin-bottom:18px; flex:1; }
.post .read {
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  display:inline-flex; align-items:center; gap:10px;
}
.post .read::after { content:'→'; transition:transform .25s ease; }
.post:hover .read::after { transform:translateX(4px); }

/* ==========================
   CTA BANNER
   ========================== */
.cta-banner {
  background:var(--bg-dark); color:var(--bg);
  padding:120px var(--pad-x);
  position:relative; overflow:hidden;
}
.cta-banner-grid {
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center; gap:80px;
  position:relative; z-index:2;
}
.cta-banner .left { flex:1; }
.cta-banner .eyebrow { margin-bottom:28px; }
.cta-banner h2 {
  font-size:clamp(40px, 5.5vw, 72px);
  line-height:1.02; letter-spacing:-.015em;
  color:var(--bg);
}
.cta-banner h2 em { color:var(--gold-2); }
.cta-banner .desc {
  font-size:17px; line-height:1.6; font-weight:300;
  color:#C2BFB6; max-width:540px; margin-top:28px;
}
.cta-banner .right { flex:0 0 380px; display:flex; flex-direction:column; gap:14px; }
.cta-banner .right .btn-gold {
  padding:22px 32px; font-size:14px; font-weight:600;
  display:flex; justify-content:space-between; align-items:center; text-transform:uppercase; letter-spacing:.06em;
}
.cta-banner .right .btn-outline {
  padding:22px 32px; font-size:14px; font-weight:500;
  display:flex; justify-content:space-between; align-items:center;
  background:transparent; color:var(--bg);
  border:1px solid rgba(247,245,240,.3); border-radius:999px;
  text-transform:uppercase; letter-spacing:.06em;
  transition:background .25s ease, border-color .25s ease;
}
.cta-banner .right .btn-outline:hover { background:rgba(247,245,240,.06); border-color:var(--gold); color:var(--gold-2); }
.cta-banner .right .btn-outline .arrow { color:var(--gold); }
.cta-banner .right .phone {
  margin-top:18px; padding-top:18px;
  border-top:1px solid rgba(247,245,240,.12);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#A8A6A0;
}
.cta-banner .right .phone strong {
  display:block; font-family:'Cormorant',serif; font-style:italic; font-weight:400;
  font-size:32px; letter-spacing:.02em; color:var(--bg);
  text-transform:none; margin-top:8px;
}
.cta-bg {
  position:absolute; right:-80px; top:50%;
  transform:translateY(-50%);
  font-family:'Cormorant',serif; font-style:italic; font-weight:300;
  font-size:340px; line-height:1;
  color:rgba(184,153,104,.05); z-index:1; pointer-events:none;
}

/* ==========================
   FOOTER
   ========================== */
.footer {
  background:var(--bg-darker); color:#A8A6A0;
  padding:80px var(--pad-x) 28px;
}
.footer-inner { max-width:var(--max-w); margin:0 auto; }
.footer-top {
  display:flex; gap:80px;
  padding-bottom:50px;
  border-bottom:1px solid rgba(247,245,240,.08);
}
.footer .brand { flex:0 0 380px; }
.footer .brand .logo .name { color:var(--bg); }
.footer .brand p {
  font-size:14px; line-height:1.65; margin-top:24px;
  color:#A8A6A0; font-weight:300; max-width:320px;
}
.footer .brand .social { display:flex; gap:12px; margin-top:32px; }
.footer .brand .social a {
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(247,245,240,.15);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--bg); font-weight:500;
  text-transform:uppercase;
  transition:background .25s ease, border-color .25s ease;
}
.footer .brand .social a:hover { background:var(--gold); border-color:var(--gold); color:var(--ink); }

.footer-cols { flex:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:60px; }
.footer-col h5 {
  font-family:'Inter',sans-serif;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:500; margin-bottom:22px;
}
.footer-col ul { list-style:none; }
.footer-col li { font-size:14px; color:#A8A6A0; margin-bottom:12px; font-weight:300; }
.footer-col li a:hover { color:var(--gold); }
.footer-col li.bold { color:var(--bg); font-weight:400; }
.footer-col li.gap { margin-top:14px; }

.footer-bottom {
  padding-top:28px;
  display:flex; justify-content:space-between;
  font-size:12px; color:#6C6B66; letter-spacing:.04em;
  flex-wrap:wrap; gap:14px;
}
.footer-bottom a { margin-left:24px; }
.footer-bottom .credit-design { color:var(--gold); }

/* ==========================
   ANIMATIONS / REVEAL
   Only hide content when JS is enabled.
   This keeps the page accessible without JS (and renders in PDF/SSR).
   ========================== */
.js .reveal {
  opacity:0; transform:translateY(24px);
  transition:opacity .8s ease, transform .8s ease;
}
.js .reveal.is-visible { opacity:1; transform:translateY(0); }
.js .reveal-delay-1 { transition-delay:.1s; }
.js .reveal-delay-2 { transition-delay:.2s; }
.js .reveal-delay-3 { transition-delay:.3s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity:1; transform:none; transition:none; }
}

/* ==========================
   RESPONSIVE
   ========================== */
@media (max-width: 1280px) {
  :root { --pad-x:48px; }
  .hero-grid { gap:48px; }
  .hero-left { flex:0 0 50%; }
  .hero-watermark { font-size:200px; }
  .manifesto-grid { gap:60px; }
  .manifesto-img { flex:0 0 420px; height:560px; }
  .editorial-text { padding:80px 60px; }
}

@media (max-width: 1024px) {
  :root { --pad-x:32px; }
  .utility { font-size:11px; padding:9px var(--pad-x); }
  .utility .left { gap:20px; }
  .nav { padding:18px var(--pad-x); }
  .menu { display:none; }
  .nav-toggle {
    display:inline-flex; width:40px; height:40px; border-radius:50%;
    border:1px solid var(--line-2); align-items:center; justify-content:center;
    flex-direction:column; gap:5px;
  }
  .nav-toggle span { display:block; width:16px; height:1.5px; background:var(--ink); }

  .hero { padding:60px var(--pad-x) 80px; }
  .hero-grid { flex-direction:column; gap:40px; align-items:stretch; }
  .hero-left { flex:0 0 auto; padding-bottom:0; }
  .hero h1 { font-size:64px; }
  .hero-right { min-height:520px; }
  .hero-img-1 { width:70%; height:380px; }
  .hero-img-2 { width:50%; height:280px; }
  .hero-img-3 { width:40%; height:160px; }
  .hero-meta { gap:36px; }
  .hero-meta .num { font-size:32px; }
  .scroll-cue { display:none; }

  .trust { flex-direction:column; gap:18px; padding:24px var(--pad-x); }
  .trust .logos { justify-content:center; gap:24px; font-size:18px; }
  .trust .label { text-align:center; }

  .featured, .manifesto, .products, .process, .insights, .cta-banner { padding:90px var(--pad-x); }

  .work-card.tall { height:520px; }
  .work-row { flex-direction:column; }
  .work-row .work-card { height:300px; }
  .work-card.tall { height:420px; }

  .manifesto-grid { flex-direction:column; }
  .manifesto-img { flex:0 0 auto; width:100%; height:480px; }
  .manifesto-watermark { font-size:160px; right:-30px; top:40px; }

  .product-grid { grid-template-columns:repeat(2, 1fr); }
  .product:nth-child(2n) { border-right:0; }
  .product:nth-child(4n) { border-right:1px solid var(--line-2); }
  .product:nth-child(2n) { border-right:0 !important; }

  .process-steps { grid-template-columns:repeat(2, 1fr); gap:40px 0; }
  .process-steps::before { display:none; }

  .editorial { flex-direction:column; min-height:auto; }
  .editorial-img { flex:0 0 auto; height:420px; min-height:auto; }
  .editorial-img img { min-height:420px; height:420px; }
  .editorial-text { padding:64px var(--pad-x); }

  .stats { grid-template-columns:repeat(2, 1fr); gap:40px 0; padding:60px var(--pad-x); }
  .stat { padding-right:0; padding-bottom:30px; border-bottom:1px solid rgba(247,245,240,.12); }
  .stat:nth-child(2n+1) { padding-left:0 !important; border-left:0 !important; }

  .posts { grid-template-columns:1fr; gap:40px; }

  .cta-banner-grid { flex-direction:column; align-items:flex-start; gap:48px; }
  .cta-banner .right { flex:0 0 auto; width:100%; max-width:480px; }
  .cta-bg { font-size:200px; }

  .footer-top { flex-direction:column; gap:50px; }
  .footer .brand { flex:0 0 auto; }
}

@media (max-width: 640px) {
  :root { --pad-x:20px; }
  .utility .right { display:none; }
  .utility .left { font-size:11px; gap:14px; }
  .utility .left span:nth-child(n+3) { display:none; }

  .hero { padding:48px var(--pad-x) 64px; }
  .hero h1 { font-size:48px; }
  .hero .lead { font-size:16px; }
  .hero-cta-row .btn { padding:14px 22px; font-size:11px; }
  .hero-meta { gap:20px; flex-wrap:wrap; }
  .hero-meta .num { font-size:26px; }
  .hero-right { min-height:380px; }
  .hero-img-1 { height:280px; }
  .hero-img-2 { height:200px; }
  .hero-img-3 { height:120px; }
  .hero-badge { padding:14px 18px; max-width:200px; }
  .hero-badge .num { font-size:28px; }

  .featured, .manifesto, .products, .process, .insights, .cta-banner { padding:64px var(--pad-x); }

  .work-card.tall { height:360px; }
  .work-row .work-card { height:240px; }
  .work-card .meta { left:20px; right:20px; bottom:20px; }
  .work-card h3 { font-size:22px; }
  .work-card.med h3 { font-size:18px; }

  .product-grid { grid-template-columns:1fr; }
  .product { border-right:0 !important; }

  .editorial-text { padding:48px var(--pad-x); }
  .editorial-text blockquote { font-size:24px; }

  .stat .num { font-size:48px; }

  .post-img { height:220px; }

  .cta-banner h2 { font-size:36px; }
  .cta-banner .desc { font-size:15px; }
  .cta-banner .right .phone strong { font-size:24px; }

  .footer-cols { grid-template-columns:1fr; gap:40px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .footer-bottom > div:nth-child(2) a { margin-left:0; margin-right:18px; }
}

/* Print: hide chrome only (keep CTA + footer for context) */
@media print {
  .utility, .scroll-cue { display:none; }
  .nav { position:static; box-shadow:none; }
  body { background:#fff; }
  .cta-banner, .stats, .manifesto, .footer { break-inside:avoid; }
}