/* ============================================ */
/* V3 — DENSITY, CONVERSION, ANIMATIONS          */
/* ============================================ */

/* tighten section padding */
section{padding:110px 0}
@media (max-width:760px){section{padding:72px 0}}

/* ---------- floating WhatsApp ---------- */
.fab{
  position:fixed; right:24px; bottom:24px; z-index:70;
  width:60px; height:60px; border-radius:99px;
  background:#25d366; color:#fff;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 12px 32px rgba(37,211,102,.4), 0 4px 12px rgba(0,0,0,.3);
  transition:transform .35s var(--ease), box-shadow .35s;
  text-decoration:none;
}
.fab:hover{transform:translateY(-4px) scale(1.08); box-shadow:0 18px 42px rgba(37,211,102,.55), 0 6px 16px rgba(0,0,0,.4)}
.fab svg{width:30px; height:30px; fill:currentColor}
.fab .pulse{position:absolute; inset:-4px; border-radius:99px; border:2px solid #25d366; animation:pulse 2.4s infinite}
@keyframes pulse{0%{transform:scale(.95);opacity:.7}70%{transform:scale(1.4);opacity:0}100%{opacity:0}}
.fab .lbl{
  position:absolute; right:74px; top:50%; transform:translateY(-50%);
  background:var(--ink); color:var(--bg);
  padding:10px 18px; border-radius:99px;
  font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  white-space:nowrap; pointer-events:none; opacity:0; transform:translate(8px,-50%);
  transition:opacity .3s, transform .3s var(--ease);
}
.fab:hover .lbl{opacity:1; transform:translate(0,-50%)}
@media (max-width:560px){.fab .lbl{display:none}}

/* ---------- press logos strip ---------- */
.featured-in{
  background:var(--paper); padding:36px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.fi-grid{display:grid; grid-template-columns:auto repeat(5,1fr); gap:48px; align-items:center}
.fi-lbl{font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--mute); white-space:nowrap}
.fi-logo{
  font-family:var(--serif); font-size:clamp(15px,1.4vw,21px); font-weight:400;
  color:rgba(242,239,232,.7); text-align:center; letter-spacing:.02em;
  transition:color .35s, transform .35s var(--ease);
}
.fi-logo em{font-style:italic; color:var(--accent); opacity:.85}
.fi-logo:hover{color:var(--ink); transform:translateY(-2px)}
@media (max-width:760px){.fi-grid{grid-template-columns:1fr 1fr; gap:24px} .fi-lbl{grid-column:1/-1; text-align:center}}

/* ---------- discipline cards (replaces sparse list) ---------- */
.disc-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px}
@media (max-width:900px){.disc-cards{grid-template-columns:1fr}}
.dc{
  position:relative; overflow:hidden; aspect-ratio:5/6; min-height:520px;
  background:#1a1a18; cursor:pointer;
  border:1px solid var(--line);
}
.dc .dc-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform 1.6s var(--ease), filter .8s;
  filter:brightness(.55) contrast(1.05);
}
.dc:hover .dc-bg{transform:scale(1.08); filter:brightness(.65) contrast(1.05)}
.dc::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.1) 0%, rgba(10,10,10,.15) 50%, rgba(10,10,10,.95) 100%);
  pointer-events:none;
}
.dc-content{
  position:absolute; inset:0; z-index:2;
  padding:36px; display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--ink);
}
.dc-num{position:absolute; top:24px; left:24px; font-family:var(--serif); font-size:13px; letter-spacing:.06em; color:var(--accent)}
.dc-content h3{font-family:var(--serif); font-weight:300; font-size:clamp(28px,3vw,42px); line-height:1; letter-spacing:-.02em; margin-bottom:16px}
.dc-content h3 em{color:var(--accent)}
.dc-content p{font-size:14px; line-height:1.65; color:rgba(242,239,232,.85); margin-bottom:24px; max-width:32ch}
.dc-tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px}
.dc-tags span{font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:6px 12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:99px; color:rgba(242,239,232,.85); backdrop-filter:blur(8px)}
.dc-cta{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); padding-top:18px; border-top:1px solid rgba(212,208,99,.4); display:flex; justify-content:space-between; align-items:center}
.dc-cta .arr{transition:transform .4s var(--ease)}
.dc:hover .dc-cta .arr{transform:translateX(8px)}

/* ---------- testimonials carousel ---------- */
.testimonials{background:var(--paper); position:relative; overflow:hidden}
.t-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:64px}
@media (max-width:900px){.t-grid{grid-template-columns:1fr; gap:32px}}
.t-card{
  padding:48px; border:1px solid var(--line); background:var(--bg);
  position:relative; transition:transform .5s var(--ease), border-color .5s;
}
.t-card:hover{transform:translateY(-6px); border-color:var(--accent)}
.t-card::before{
  content:"\201C"; position:absolute; top:18px; left:24px;
  font-family:var(--serif); font-size:96px; line-height:1; color:var(--accent); opacity:.5; font-weight:300;
}
.t-quote{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(20px,2vw,26px); line-height:1.4; letter-spacing:-.012em;
  color:var(--ink); margin-bottom:32px; padding-top:28px;
}
.t-meta{display:flex; align-items:center; gap:16px; padding-top:28px; border-top:1px solid var(--line)}
.t-avatar{
  width:54px; height:54px; border-radius:99px; background:var(--paper);
  border:1px solid var(--accent); display:grid; place-items:center;
  font-family:var(--serif); font-size:22px; color:var(--accent); flex-shrink:0;
}
.t-name strong{display:block; font-family:var(--serif); font-size:18px; font-weight:400; color:var(--ink); margin-bottom:2px}
.t-name span{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute)}

/* ---------- conversion / lead block ---------- */
.lead-cta{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--bg);
  padding:0;
}
.lead-cta-grid{display:grid; grid-template-columns:1fr 1fr; min-height:560px; align-items:stretch}
@media (max-width:900px){.lead-cta-grid{grid-template-columns:1fr}}
.lc-img{position:relative; overflow:hidden; min-height:380px}
.lc-img > div{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.04); transition:transform 1.4s var(--ease)}
.lead-cta:hover .lc-img > div{transform:scale(1.08)}
.lc-text{padding:80px; display:flex; flex-direction:column; justify-content:center}
@media (max-width:900px){.lc-text{padding:60px 24px}}
.lc-text .eyebrow{color:var(--accent); margin-bottom:24px}
.lc-text h2{font-family:var(--serif); font-weight:300; font-size:clamp(40px,5vw,72px); line-height:1; letter-spacing:-.025em; margin-bottom:28px; color:var(--ink)}
.lc-text h2 em{color:var(--accent)}
.lc-text p{font-size:15.5px; line-height:1.7; color:rgba(242,239,232,.78); margin-bottom:36px; max-width:46ch}
.lc-actions{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 32px; background:var(--accent); color:var(--ink);
  font-family:var(--sans); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  border-radius:99px; cursor:pointer; border:1px solid var(--accent);
  transition:transform .35s var(--ease), background .35s, color .35s;
}
.btn-primary:hover{transform:translateX(6px); background:var(--bg); color:var(--accent); border-color:var(--accent)}
.btn-secondary{
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 28px; background:transparent; color:rgba(242,239,232,.95);
  font-family:var(--sans); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  border-radius:99px; cursor:pointer; border:1px solid rgba(242,239,232,.3);
  transition:border-color .35s, color .35s;
}
.btn-secondary:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- FAQ accordion ---------- */
.faq{padding:120px 0}
.faq-grid{display:grid; grid-template-columns:1fr 1.6fr; gap:80px; align-items:start}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr; gap:32px}}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line); cursor:pointer}
.faq-q{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:28px 0; font-family:var(--serif); font-weight:300;
  font-size:clamp(20px,2.2vw,28px); letter-spacing:-.012em;
  transition:padding .4s var(--ease), color .4s;
}
.faq-item:hover .faq-q{padding-left:14px; color:var(--accent)}
.faq-q .ic{
  width:32px; height:32px; border:1px solid var(--line); border-radius:99px;
  display:grid; place-items:center; font-family:var(--sans); font-size:14px;
  flex-shrink:0; transition:transform .4s var(--ease), background .4s, color .4s, border-color .4s;
}
.faq-item.open .faq-q .ic{transform:rotate(45deg); background:var(--accent); color:var(--bg); border-color:var(--accent)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .6s var(--ease), padding .6s var(--ease)}
.faq-item.open .faq-a{max-height:400px; padding:0 0 32px}
.faq-a p{font-size:15px; color:var(--mute); line-height:1.75; max-width:62ch}

/* ---------- gallery strip (full-bleed image breaks) ---------- */
.gallery{padding:0; display:grid; grid-template-columns:2fr 1fr; gap:4px; height:60vh; min-height:480px; background:var(--bg)}
.gallery > div{background-size:cover; background-position:center; position:relative; overflow:hidden}
.gallery > div::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(10,10,10,.6))}
.gallery .gcap{position:absolute; left:24px; bottom:24px; z-index:2; font-family:var(--serif); font-style:italic; font-size:18px; color:#fff}
@media (max-width:760px){.gallery{grid-template-columns:1fr; height:auto} .gallery > div{height:50vh}}

/* ---------- sticky CTA bar ---------- */
.sticky-bar{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(160%);
  z-index:65;
  background:#0e0e0c;
  border:1px solid var(--accent);
  padding:14px 14px 14px 28px; border-radius:99px;
  display:flex; align-items:center; gap:18px;
  box-shadow:0 18px 48px rgba(0,0,0,.65), 0 0 0 4px rgba(212,208,99,.08);
  transition:transform .6s var(--ease);
  max-width:calc(100vw - 32px);
  backdrop-filter:blur(8px);
}
.sticky-bar.show{transform:translateX(-50%) translateY(0)}
.sticky-bar .sb-text{font-family:var(--serif); font-style:italic; font-size:15px; color:#f2efe8; white-space:nowrap}
.sticky-bar .sb-text em{color:var(--accent); font-weight:400; font-style:italic}
.sticky-bar .sb-cta{
  background:var(--accent); color:var(--bg);
  padding:11px 22px; border-radius:99px;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  transition:background .3s, color .3s;
}
.sticky-bar .sb-cta:hover{background:var(--bg); color:var(--accent)}
@media (max-width:560px){.sticky-bar .sb-text{font-size:13px} .sticky-bar{padding:10px 10px 10px 18px} .sticky-bar .sb-cta{padding:9px 16px}}

/* ---------- bigger / brighter manifesto ---------- */
.manifesto-quote{color:var(--ink) !important}
.manifesto-side p{color:rgba(242,239,232,.78) !important; font-size:16px !important}

/* ---------- scroll reveal variants ---------- */
.r-up{opacity:0; transform:translateY(60px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.r-up.in{opacity:1; transform:none}
.r-mask{position:relative; overflow:hidden}
.r-mask > *{display:block; transform:translateY(110%); transition:transform 1.2s var(--ease)}
.r-mask.in > *{transform:translateY(0)}
.r-zoom{opacity:0; transform:scale(.94); transition:opacity 1.2s var(--ease), transform 1.4s var(--ease)}
.r-zoom.in{opacity:1; transform:scale(1)}
.r-fade{opacity:0; transition:opacity 1.4s var(--ease)}
.r-fade.in{opacity:1}

/* parallax helper */
.parallax{will-change:transform}

/* counter ticker */
.count-up{display:inline-block; font-variant-numeric:tabular-nums}

/* hero scroll arrow */
.hero-arrow{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:3; width:24px; height:40px; border:1px solid rgba(242,239,232,.6); border-radius:14px;
  display:grid; place-items:center;
}
.hero-arrow::after{
  content:""; width:3px; height:8px; background:var(--accent); border-radius:99px;
  animation:harrow 2s infinite var(--ease);
}
@keyframes harrow{0%{transform:translateY(-6px); opacity:0}50%{opacity:1}100%{transform:translateY(8px); opacity:0}}

/* ---------- numbered process timeline ---------- */
.timeline{padding:120px 0; background:var(--paper)}
.tl-rows{margin-top:64px}
.tl-row{
  display:grid; grid-template-columns:auto 1fr 2fr auto; gap:48px;
  padding:36px 0; border-bottom:1px solid var(--line); align-items:center;
  transition:padding .5s var(--ease), background .5s;
}
.tl-row:hover{padding-left:18px; background:linear-gradient(90deg,rgba(212,208,99,.04),transparent 50%)}
.tl-step{
  width:64px; height:64px; border-radius:99px;
  border:1px solid var(--accent); display:grid; place-items:center;
  font-family:var(--serif); font-size:24px; color:var(--accent); font-weight:300;
}
.tl-name{font-family:var(--serif); font-weight:300; font-size:clamp(28px,3vw,42px); letter-spacing:-.02em; line-height:1}
.tl-name em{color:var(--accent)}
.tl-desc{font-size:14.5px; color:var(--mute); line-height:1.7; max-width:60ch}
.tl-time{font-family:var(--serif); font-size:14px; color:var(--mute); white-space:nowrap; font-style:italic}
@media (max-width:900px){.tl-row{grid-template-columns:auto 1fr; gap:24px} .tl-desc,.tl-time{display:none}}

/* ---------- improve nav-cta visibility ---------- */
.nav-cta{
  background:var(--accent); border-color:var(--accent) !important; color:var(--bg) !important;
  font-weight:600;
}
.nav-cta:hover{background:var(--bg) !important; color:var(--accent) !important; border-color:var(--accent) !important}

/* ---------- scroll progress indicator (sidebar dots) ---------- */
.section-dots{
  position:fixed; right:32px; top:50%; transform:translateY(-50%); z-index:55;
  display:flex; flex-direction:column; gap:14px;
}
.section-dots a{
  width:8px; height:8px; border-radius:99px; background:rgba(242,239,232,.25);
  transition:all .3s; position:relative;
}
.section-dots a:hover, .section-dots a.active{background:var(--accent); transform:scale(1.4)}
.section-dots a .lab{
  position:absolute; right:18px; top:50%; transform:translate(8px,-50%);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute);
  white-space:nowrap; opacity:0; transition:opacity .3s, transform .3s var(--ease);
  pointer-events:none;
}
.section-dots a:hover .lab{opacity:1; transform:translate(0,-50%); color:var(--accent)}
@media (max-width:1100px){.section-dots{display:none}}

/* ============================================ */
/* RESPONSIVE FIXES & POLISH                     */
/* ============================================ */

/* hero — add safe top padding so content can't crash into nav */
.hero-content{padding-top:120px}
@media (max-width:760px){
  .hero-content{padding-top:100px; padding-bottom:80px}
}

/* hero tag — keep on one line, smaller on mobile */
.hero-tag{flex-wrap:wrap; line-height:1.4}
@media (max-width:760px){
  .hero-tag{font-size:9.5px; letter-spacing:.24em; margin-bottom:28px}
  .hero-tag span:not(.dot){white-space:nowrap}
}

/* hero h1 — better mobile sizing */
@media (max-width:760px){
  .hero h1{font-size:clamp(40px,11vw,72px) !important; line-height:.95}
}

/* hero foot — wrap correctly on mobile */
@media (max-width:760px){
  .hero-foot{margin-top:36px; gap:24px; padding-top:18px}
  .hero-foot p{font-size:14px}
  .hero-foot .scroll-cue{display:none}
  .hero-arrow{display:none}
}

/* nav brand — smaller on mobile */
@media (max-width:560px){
  .brand{gap:10px; font-size:18px}
  .brand-mark{width:28px; height:28px}
  .brand-mark::after{width:8px; height:8px}
  .brand-name span:last-child{font-size:8px; margin-top:3px}
  .nav-cta{padding:9px 16px; font-size:10px}
  .nav, .nav.scrolled{padding-left:16px; padding-right:16px; padding-top:14px; padding-bottom:14px}
}

/* sticky bar — center variant overrides at desktop are inherited from base */
.sticky-bar{}
.sticky-bar.show{}
@media (max-width:760px){
  .sticky-bar{display:none}
}

/* fab — slightly smaller on mobile */
@media (max-width:560px){
  .fab{width:54px; height:54px; right:16px; bottom:16px}
  .fab svg{width:26px; height:26px}
}

/* sec-head — better mobile alignment */
@media (max-width:900px){
  .sec-head{gap:20px; margin-bottom:48px}
  .sec-head h2{font-size:clamp(32px,8vw,48px)}
}

/* manifesto — readable on mobile */
@media (max-width:760px){
  .manifesto-quote{font-size:22px; line-height:1.3}
  .manifesto-side p{font-size:15px !important}
}

/* featured-in — stack on mobile */
@media (max-width:760px){
  .fi-grid{gap:14px}
  .fi-logo{font-size:14px}
}

/* founder note — stack image above text on mobile */
@media (max-width:900px){
  .fn-grid{gap:36px}
  .fn-portrait{aspect-ratio:4/4; max-height:420px}
  .fn-text h2{font-size:clamp(28px,5vw,40px) !important; line-height:1.1}
  .fn-quote{font-size:18px; line-height:1.5; padding-left:18px}
  .fn-bio{font-size:14.5px}
}

/* index strip — 2x2 on mobile */
@media (max-width:760px){
  .index-grid{grid-template-columns:1fr 1fr}
  .ix{padding:36px 20px}
  .ix .v{font-size:42px}
  .ix .l{font-size:10px}
  .ix .num{font-size:11px; margin-bottom:24px}
}

/* feature rows — stack with image first on mobile */
@media (max-width:900px){
  .feat-text{padding:48px 22px 60px}
  .feat-name{font-size:36px !important}
  .feat-desc{font-size:14px}
  .feat-meta{gap:24px}
  .feat-meta dd{font-size:15px}
  .feature.reverse .feat-grid{direction:ltr}
}

/* discipline cards — full width on mobile */
@media (max-width:900px){
  .dc{min-height:480px}
  .dc-content h3{font-size:32px}
  .dc-content p{font-size:13.5px}
}

/* gallery — stack on mobile */
@media (max-width:760px){
  .gallery{grid-template-columns:1fr; gap:4px; height:auto}
  .gallery > div{aspect-ratio:5/4; height:auto}
}

/* testimonials */
@media (max-width:760px){
  .t-card{padding:32px 24px}
  .t-quote{font-size:18px}
  .t-card::before{font-size:64px}
}

/* timeline — cleaner mobile stack */
@media (max-width:900px){
  .tl-row{padding:24px 0; gap:18px}
  .tl-step{width:48px; height:48px; font-size:16px}
  .tl-name{font-size:24px}
}

/* lead-cta */
@media (max-width:900px){
  .lead-cta-grid{grid-template-columns:1fr}
  .lc-img{min-height:280px}
  .lc-text{padding:48px 22px 64px}
  .lc-text h2{font-size:36px !important}
  .lc-text p{font-size:14.5px}
  .lc-actions{flex-direction:column; align-items:stretch}
  .btn-primary, .btn-secondary{justify-content:center; padding:16px 24px; font-size:11px}
}

/* faq */
@media (max-width:900px){
  .faq{padding:80px 0}
  .faq-grid{gap:32px}
  .faq-q{font-size:18px; padding:22px 0; gap:16px}
  .faq-q .ic{width:28px; height:28px}
  .faq-a p{font-size:14px}
}

/* contact */
@media (max-width:900px){
  .contact{padding:90px 0 40px}
  .contact h2{font-size:48px !important; line-height:1; margin-bottom:48px}
  .contact-grid{gap:28px}
  .ci{font-size:14px !important}
  .ci a{font-size:14px !important}
}

/* studio bleed caption — readable on mobile */
@media (max-width:760px){
  .studio-bleed{height:48vh; min-height:340px; margin-bottom:60px}
  .studio-bleed .caption{font-size:24px; left:22px; bottom:22px; max-width:14ch}
}

/* press rows — already responsive but tweak */
@media (max-width:760px){
  .press-row{padding:22px 0}
  .press-row .pub{font-size:18px}
}

/* page-hero (internal pages) */
@media (max-width:900px){
  .page-hero{padding:140px 0 70px}
  .page-hero h1{font-size:clamp(40px,10vw,68px) !important}
  .page-hero .lede{font-size:14.5px; margin-top:24px}
  .page-hero .crumbs{font-size:10px; margin-bottom:24px}
}

/* archive grid — single col mobile */
@media (max-width:560px){
  .archive-grid{gap:32px}
  .archive-card .img-wrap{aspect-ratio:4/4}
}

/* contact form — stack labels properly */
@media (max-width:760px){
  .cp-grid{gap:48px}
  .cp-field input, .cp-field textarea, .cp-field select{font-size:17px}
  .cp-form{gap:24px}
  .cp-row{gap:24px}
}

/* sub-foot stacking */
@media (max-width:760px){
  .sub-foot{padding:60px 0 28px}
  .sub-foot .sf-grid{flex-direction:column; align-items:flex-start; gap:24px}
  .sub-foot .sf-cta{font-size:24px}
  .sub-foot .copy{font-size:10px; gap:12px; margin-top:36px}
}

/* hide section dots when overlapping content */
@media (max-width:1280px){.section-dots{display:none}}

/* hide custom cursor on touch devices */
@media (hover:none){.cursor{display:none !important}}

/* ============================================ */
/* V4 — LIGHTER, READABLE, PERSONALIZED         */
/* ============================================ */

/* lift paragraph contrast everywhere */
p{color:var(--ink); opacity:.85}
.manifesto-side p, .fn-bio, .feat-desc, .lc-text p, .faq-a p, .step p, .founder p,
.j-row p, .archive-card .meta, .lede{
  color:var(--mute) !important; opacity:1;
}

/* slightly larger body text */
body{font-size:15.5px; letter-spacing:.005em}

/* warmer hero overlay (less heavy black) */
.hero::after{
  background:
    linear-gradient(180deg,rgba(15,15,12,.55) 0%,rgba(15,15,12,.18) 30%,rgba(15,15,12,.55) 70%,rgba(19,19,15,.92) 100%),
    radial-gradient(ellipse at left bottom,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 65%) !important;
}

/* warmer page-hero overlay */
.page-hero .ph-bg{filter:brightness(.78) contrast(1.05) saturate(1) !important}
.page-hero::after{
  background:linear-gradient(180deg, rgba(19,19,15,.35) 0%, rgba(19,19,15,.05) 30%, var(--bg) 95%) !important;
}

/* card backgrounds — slightly lifted from bg */
.t-card, .feat-text, .lc-text, .archive-card{background:var(--paper)}
.feature{background:var(--bg)}

/* ============================================ */
/* MOBILE-ONLY FIXES                            */
/* ============================================ */
@media (max-width:900px){
  /* DISABLE parallax on mobile — was causing image off-center drift */
  .parallax, .dc-bg.parallax{
    transform:none !important;
    transition:none !important;
  }
  /* ensure dc-bg fills card cleanly on mobile */
  .dc-bg{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important;
    transform:none !important;
    background-position:center center !important;
    background-size:cover !important;
  }
  /* center all card images and section images */
  .archive-card .img-wrap > div,
  .feat-img > div,
  .lc-img > div,
  .j-img > div,
  .gallery > div{
    background-position:center center !important;
    transform:none !important;
  }
  /* ensure feature rows stack image first cleanly */
  .feature .feat-grid{grid-template-columns:1fr !important; direction:ltr !important}
  .feature .feat-img{order:1; min-height:320px !important; aspect-ratio:5/4}
  .feature .feat-text{order:2}
  /* discipline cards full-width with no parallax overflow */
  .disc-cards{gap:18px}
  .dc{aspect-ratio:auto; min-height:440px !important; width:100%}
}

/* ============================================ */
/* FOOTER CREDIT                                 */
/* ============================================ */
.built-by{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute); opacity:.75;
  display:inline-flex; gap:6px; align-items:center;
}
.built-by a{
  color:var(--accent); border-bottom:1px solid transparent; padding-bottom:1px;
  transition:border-color .3s, color .3s;
}
.built-by a:hover{border-bottom-color:var(--accent); color:var(--ink)}
.built-by .heart{color:var(--accent); font-style:normal}

/* ============================================ */
/* PERSONALIZED KERALA SIGNATURE                 */
/* ============================================ */
.kerala-stamp{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 16px; border:1px solid var(--line); border-radius:99px;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mute); background:rgba(216,201,122,.04);
  margin-top:24px;
}
.kerala-stamp::before{
  content:"◆"; color:var(--accent); font-size:14px;
}

/* ============================================ */
/* V5 — REAL PROJECT CREDIT + PREMIUM POLISH    */
/* ============================================ */

/* "Built · Published" flag on real projects */
.feat-flag{
  display:inline-block; margin-right:10px; padding:4px 10px;
  background:rgba(216,201,122,.14); border:1px solid rgba(216,201,122,.45);
  border-radius:99px; color:var(--accent);
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  vertical-align:middle;
}
.feat-credit{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.06em; color:var(--mute); opacity:.85;
  font-style:italic; font-family:var(--serif);
}

/* archive card real-project ribbon */
.archive-card .img-wrap .flag{
  position:absolute; top:14px; left:14px; z-index:3;
  padding:5px 11px; background:rgba(19,19,15,.72); backdrop-filter:blur(8px);
  border:1px solid rgba(216,201,122,.5); border-radius:99px;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:600;
}

/* ---- premium micro-polish ---- */

/* grain/texture overlay for depth (kills the flat "coded" feel) */
body::after{
  content:""; position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* refined link underline reveal on nav */
.nav-links a{position:relative}

/* feature image — subtle warm vignette + duotone lift on hover */
.feat-img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(19,19,15,.35) 100%);
  opacity:.8; transition:opacity .8s var(--ease);
}
.feature:hover .feat-img::after{opacity:.4}

/* eyebrow accent dot */
.eyebrow{position:relative}

/* section number watermark — big faint serif numeral behind heads (editorial) */
.sec-head{position:relative}

/* smoother heading drop on reveal */
.reveal{will-change:transform,opacity}

/* brass divider used between content blocks */
.brass-rule{height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.4; margin:0 auto; max-width:120px}

/* improve focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
}