/* ===================================================================
   Yaadhum Studioz — warm editorial theme
=================================================================== */

:root{
  --cream:        #F7F1E4;
  --cream-deep:   #ECE0C7;
  --paper:        #FFFDF8;
  --ink:          #241B10;
  --ink-soft:     #6B5D48;
  --espresso:     #241B10;
  --espresso-deep:#150F09;
  --olive:        #5B6236;
  --olive-deep:   #241B10;
  --sage:         #AEB98A;
  --sage-pale:    #E4E8D3;
  --terracotta:   #8C4A32;
  --terracotta-deep:#6E3A27;
  --gold:         #B8862F;
  --gold-deep:    #96702A;
  --gold-pale:    #E7D3A1;
  --line:         #DED0AC;

  --serif: "Fraunces", "Georgia", serif;
  --sans:  "Jost", "Poppins", "Helvetica Neue", Arial, sans-serif;

  /* Fixed up to normal desktop widths; beyond that it grows with the
     viewport (88vw) instead of staying pinned to 1180px, so wide/4K
     monitors don't end up with huge idle margins on either side. */
  --container: clamp(1180px, 88vw, 2200px);
  --radius: 4px;
  --shadow: 0 18px 40px -18px rgba(21,15,9,.4);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  color:var(--olive-deep);
  line-height:1.15;
  margin:0 0 .5em;
}
p{ margin:0 0 1em; }
.container{ max-width:var(--container); margin:0 auto; padding:0 28px; }
section{ position:relative; }

.eyebrow, .kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-weight:600; font-size:.76rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep);
  margin-bottom:16px;
}
.eyebrow::before, .kicker::before{ content:""; width:26px; height:1px; background:var(--gold); display:inline-block; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 52px; }
.section-head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); }
.section-head p{ color:var(--ink-soft); }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-weight:600; font-size:.86rem;
  letter-spacing:.08em; text-transform:uppercase;
  padding:15px 30px; border-radius:2px; border:1px solid transparent;
  cursor:pointer; transition:all .25s ease;
}
.btn-primary{ background:var(--espresso); color:var(--gold-pale); border-color:var(--espresso); }
.btn-primary:hover{ background:var(--espresso-deep); color:var(--gold); }
.btn-outline{ border-color:currentColor; color:var(--paper); }
.btn-outline:hover{ background:rgba(255,255,255,.14); }
.btn-ghost{ border-color:var(--gold); color:var(--gold-deep); }
.btn-ghost:hover{ background:var(--gold); color:var(--paper); }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:18px 0;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-header.is-scrolled{
  background:rgba(251,245,234,.96);
  backdrop-filter:blur(6px);
  box-shadow:0 6px 24px -12px rgba(47,42,32,.25);
  padding:10px 0;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ height:52px; width:auto; flex:none; transition:filter .35s ease; }
.site-header.is-dark .brand-logo{ filter:brightness(0) invert(1); }
.site-header.is-dark.is-scrolled .brand-logo{ filter:none; }
.site-header.no-invert .brand-logo{ filter:none; }

.main-nav{ display:flex; align-items:center; gap:36px; }
.main-nav a{
  font-size:.83rem; letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; color:var(--ink); position:relative; padding:4px 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px;
  background:var(--gold); transition:right .25s ease;
}
.main-nav a:hover::after, .main-nav a.active::after{ right:0; }
.main-nav a.active{ color:var(--gold-deep); }
.site-header.is-dark .main-nav a{ color:var(--paper); }
.site-header.is-dark.is-scrolled .main-nav a{ color:var(--ink); }

.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-phone{ font-size:.85rem; font-weight:600; display:none; }
.header-actions{ display:flex; align-items:center; gap:14px; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;
}
.nav-toggle span{ width:24px; height:2px; background:var(--ink); }
.site-header.is-dark .nav-toggle span{ background:var(--paper); }
.site-header.is-dark.is-scrolled .nav-toggle span{ background:var(--ink); }

.nav-item.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--paper); box-shadow:var(--shadow); border-radius:4px; padding:10px 0;
  min-width:190px; opacity:0; visibility:hidden; transition:all .2s ease; z-index:10;
}
.nav-item.has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown li a{
  display:block; padding:10px 20px; color:var(--ink) !important; text-transform:none;
  font-weight:500; letter-spacing:0; font-size:.9rem;
}
.dropdown li a::after{ display:none; }
.dropdown li a:hover{ background:var(--gold-pale); color:var(--espresso) !important; }

@media (max-width: 980px){
  .dropdown{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    background:none; padding:6px 0 6px 16px; display:grid; gap:14px; min-width:0;
  }
  .dropdown li a{ color:var(--ink-soft) !important; padding:0; font-size:.92rem; }
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,86vw); height:100vh;
    background:var(--paper); flex-direction:column; align-items:flex-start;
    padding:110px 34px 40px; gap:26px; transform:translateX(100%);
    transition:transform .4s ease; box-shadow:-10px 0 40px rgba(0,0,0,.15);
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{ color:var(--ink) !important; font-size:1rem; }
  .nav-toggle{ display:flex; }
  .btn-outline.nav-cta-btn{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  min-height:100vh; display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
  position:relative; color:#fff;
}
.hero::before{
  content:""; position:absolute; inset:0;
  /* background:linear-gradient(180deg, rgba(30,26,16,.35) 0%, rgba(24,20,12,.35) 45%, rgba(20,16,10,.82) 100%); */
}
.hero-inner{ position:relative; z-index:2; padding-bottom:9vh; width:100%; }
.hero .eyebrow{ color:var(--white); text-shadow:0 2px 14px rgba(0,0,0,.6); }
.hero h1{
  font-size:clamp(2.4rem,6vw,4.6rem); color:#fff; max-width:16ch; margin-bottom:.3em;
  text-shadow:0 4px 24px rgba(0,0,0,.35);
}
.hero p.lead{ max-width:46ch; color:#f1e9da; font-size:1.08rem; margin-bottom:2em; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:2; color:#fff; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:10px; opacity:.85;
}
.scroll-cue span{ width:1px; height:34px; background:#fff; opacity:.6;
  animation:scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue{ 0%{transform:scaleY(.3);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(.3);transform-origin:bottom;} }

/* page (non-home) hero, shorter */
.page-hero{ min-height:52vh; }
.page-hero .hero-inner{ padding-bottom:7vh; }
.breadcrumb{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#eadfc9; margin-bottom:14px; }
.breadcrumb a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.4); }

/* ---------- Intro / mission ---------- */
.intro{ padding:110px 0 90px; text-align:center; }
.intro .eyebrow{ }
.intro blockquote{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,2.6vw,2rem);
  color:var(--olive-deep); max-width:820px; margin:0 auto 30px; line-height:1.5;
}
.intro p.sub{ max-width:640px; margin:0 auto; color:var(--ink-soft); }

/* ---------- Services / category grid ---------- */
.categories{ padding:20px 0 110px; }
.cat-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:2px;
  background:var(--line); border-radius:var(--radius); overflow:hidden;
}
.cat-card{
  position:relative; aspect-ratio:3/4; overflow:hidden; background:#000;
}
.cat-card img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; opacity:.88; }
.cat-card:hover img{ transform:scale(1.08); opacity:1; }
.cat-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,16,10,0) 40%, rgba(20,16,10,.75) 100%); }
.cat-card .cat-label{
  position:absolute; left:0; right:0; bottom:0; padding:22px 16px; z-index:2;
  color:#fff; text-align:center;
}
.cat-label .num{ font-family:var(--sans); font-weight:800; font-style:normal; color:var(--gold); font-size:1.3rem; display:block; margin-bottom:2px; }
.cat-label .name{ font-family:var(--serif); font-size:1.15rem; }
@media (max-width:980px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px){
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .cat-grid a:last-child{ grid-column:1/-1; }
}

/* ---------- Split feature (about teaser, story blocks) ---------- */
.split-section{ padding:100px 0; }
.container.split{
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px;
}
.split.reverse .split-media{ order:2; }
.split-media{ position:relative; }
.split-media img{ border-radius:var(--radius); box-shadow:var(--shadow); }
.split-media .frame{
  position:absolute; inset:22px -22px -22px 22px; border:2px solid var(--gold);
  border-radius:var(--radius); z-index:-1;
}
.split-body .eyebrow{ }
.split-body h2{ font-size:clamp(1.8rem,3vw,2.4rem); }
.split-body p{ color:var(--ink-soft); }
.check-list{ margin:26px 0; display:grid; gap:12px; }
.check-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft); }
.check-list li svg{ flex:none; margin-top:4px; width:16px; height:16px; color:var(--gold-deep); }
@media (max-width:900px){
  .split-section{ padding:70px 0; }
  .container.split{ grid-template-columns:1fr; gap:36px; }
  .split.reverse .split-media{ order:0; }
  .split-media{ margin:0 14px; }
}

/* ---------- Video feature ---------- */
.video-feature{ padding:100px 0; }
.video-frame{
  position:relative; width:100%; max-width:900px; margin:0 auto;
  aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); background:#000;
}
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.video-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; }
.video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; border:2px solid rgba(255,255,255,.85);
  background:rgba(20,16,10,.4); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.video-play svg{ width:26px; height:26px; margin-left:4px; }
.video-play:hover{ background:var(--gold); border-color:var(--gold); transform:translate(-50%,-50%) scale(1.06); }
.video-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px; }
.video-grid .video-frame{ max-width:none; margin:0; }
.video-grid figcaption{ margin-top:12px; color:var(--ink-soft); font-size:.9rem; text-align:center; }

/* ---------- Clients / logo strip ---------- */
.clients{ padding:20px 0 100px; }
.clients-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:40px 56px;
}
.client-logo{ flex:none; height:56px; display:flex; align-items:center; }
.client-logo img{
  height:100%; width:auto; max-width:160px; object-fit:contain;
  filter:grayscale(1); opacity:.6; transition:opacity .25s ease, filter .25s ease;
}
.client-logo img:hover{ filter:none; opacity:1; }
.clients-row:empty{ display:none; }

/* ---------- Values / why-us ---------- */
.values{ background:var(--cream-deep); padding:100px 0; }
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.value{ text-align:center; padding:0 18px; }
.value .icon{
  width:64px; height:64px; margin:0 auto 20px; border-radius:50%;
  background:var(--paper); display:flex; align-items:center; justify-content:center;
  color:var(--gold-deep); box-shadow:0 10px 24px -14px rgba(21,15,9,.35);
}
.value h3{ font-size:1.2rem; }
.value p{ color:var(--ink-soft); font-size:.95rem; }
@media (max-width:820px){ .values-grid{ grid-template-columns:1fr; gap:44px; } }

/* ---------- Gallery grid (category pages) ---------- */
.gallery-strip{ padding:100px 0; }
.g-grid{ column-count:3; column-gap:14px; }
.g-grid figure{ margin:0 0 14px; break-inside:avoid; border-radius:4px; overflow:hidden; position:relative; cursor:zoom-in; }
.g-grid img{ width:100%; display:block; transition:transform .6s ease, filter .4s ease; }
.g-grid figure:hover img{ transform:scale(1.04); }
.g-grid figure::after{
  content:"\2295"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.6rem; background:rgba(47,42,32,0); transition:background .3s ease; opacity:0;
}
.g-grid figure:hover::after{ background:rgba(47,42,32,.28); opacity:1; }
@media (max-width:900px){ .g-grid{ column-count:2; } }
@media (max-width:520px){ .g-grid{ column-count:1; } }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(20,16,10,.94); z-index:2000;
  display:none; align-items:center; justify-content:center; padding:5vh 4vw;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:88vh; border-radius:2px; box-shadow:0 30px 70px rgba(0,0,0,.6); }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25);
  color:#fff; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.1rem; transition:background .25s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:rgba(255,255,255,.2); }
.lightbox-close{ top:24px; right:24px; }
.lightbox-prev{ left:24px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:24px; top:50%; transform:translateY(-50%); }
@media (max-width:640px){ .lightbox-prev,.lightbox-next{ width:38px; height:38px; } }

/* ---------- Other galleries teaser (bottom of category pages) ---------- */
.more-cats{ background:var(--cream-deep); padding:90px 0; }
.more-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.more-card{ position:relative; border-radius:4px; overflow:hidden; aspect-ratio:1/1; }
.more-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.more-card:hover img{ transform:scale(1.06); }
.more-card::after{ content:""; position:absolute; inset:0; background:rgba(20,16,10,.4); }
.more-card span{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--serif); font-size:1.05rem; z-index:2; text-align:center; padding:10px;
}
@media (max-width:820px){ .more-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- CTA band ---------- */
.cta-band{
  padding:100px 0; text-align:center; background:linear-gradient(160deg, var(--espresso-deep), var(--espresso));
  color:#fff;
}
.cta-band h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,2.7rem); }
.cta-band p{ color:#DCCFAE; max-width:520px; margin:0 auto 34px; }
.cta-band .btn-primary{ background:var(--gold); color:var(--espresso-deep); border-color:var(--gold); }
.cta-band .btn-primary:hover{ background:var(--gold-pale); color:var(--espresso-deep); }

/* ---------- Contact ---------- */
.contact-section{ padding:100px 0; }
.container.contact-wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:60px; }
.contact-info h2{ font-size:1.9rem; }
.info-line{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.info-line .icon{ color:var(--gold-deep); flex:none; width:22px; margin-top:3px; }
.info-line strong{ display:block; font-family:var(--serif); font-size:1.02rem; color:var(--olive-deep); margin-bottom:2px; }
.info-line span, .info-line a{ color:var(--ink-soft); }
.map-wrap{ margin-top:30px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.map-wrap iframe{ width:100%; height:280px; border:0; display:block; filter:sepia(12%) saturate(85%); }

.contact-form{ background:var(--paper); padding:44px; border-radius:var(--radius); box-shadow:var(--shadow); }
.contact-form h3{ font-size:1.4rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form label{ display:block; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; font-weight:600; }
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:3px;
  background:var(--cream); font-family:var(--sans); font-size:.95rem; color:var(--ink); margin-bottom:18px;
}
.contact-form textarea{ resize:vertical; min-height:110px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ outline:2px solid var(--gold-pale); border-color:var(--espresso); }
.contact-form button{ width:100%; justify-content:center; }
.form-note{ font-size:.8rem; color:var(--ink-soft); margin-top:10px; }
.form-status{ font-size:.85rem; margin-top:14px; padding:10px 14px; border-radius:4px; }
.form-status.ok{ background:#eaf3e6; color:#3d6b34; }
.form-status.err{ background:#fbeceA; color:var(--terracotta-deep); }
.wa-link{ color:var(--gold-deep); font-weight:600; white-space:nowrap; }
.ico-inline{ display:inline-flex; width:15px; height:15px; vertical-align:-2px; }
.ico-inline svg{ width:100%; height:100%; }
@media (max-width:900px){ .container.contact-wrap{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }

/* ---------- About page extras ---------- */
.founder-quote{ padding:90px 0; }
.founder-quote .container{ max-width:820px; text-align:center; }
.founder-quote svg{ color:var(--gold); width:40px; height:40px; margin-bottom:20px; }
.founder-quote p{ font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.8rem); color:var(--olive-deep); }
.founder-quote .who{ font-family:var(--sans); font-style:normal; font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-deep); margin-top:20px; }

.process{ padding:100px 0; background:var(--cream-deep); }
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; counter-reset:step; }
.process-step{ position:relative; padding-top:10px; }
.process-step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--serif); font-size:2.6rem; color:var(--gold-pale); display:block; margin-bottom:10px;
}
.process-step h3{ font-size:1.1rem; }
.process-step p{ color:var(--ink-soft); font-size:.92rem; }
@media (max-width:900px){ .process-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .process-grid{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
.site-footer{ background:var(--espresso-deep); color:#EFE9D8; padding:90px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:50px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand .brand-logo{ height:52px; filter:brightness(0) invert(1); }
.footer-brand p{ color:#CBCBA f; color:#C7C7AC; margin-top:18px; max-width:280px; font-size:.92rem; }
.footer-col h4{ color:#fff; font-family:var(--sans); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:20px; }
.footer-col ul{ display:grid; gap:12px; }
.footer-col a{ color:#D7D6C3; font-size:.92rem; }
.footer-col a:hover{ color:var(--gold); }
.footer-col address{ font-style:normal; color:#D7D6C3; font-size:.92rem; line-height:1.7; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; flex-wrap:wrap; gap:10px; font-size:.82rem; color:#B9B99E; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; color:#fff; }
.footer-social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--espresso-deep); }
@media (max-width:980px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Instagram scroll ---------- */
.insta-strip{ padding:90px 0 100px; overflow:hidden; }
.insta-strip .section-head{ margin-bottom:44px; }
.insta-strip .section-head a{ color:var(--gold-deep); font-weight:600; }
.insta-track{
  width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.insta-row{ display:flex; gap:16px; width:max-content; animation:insta-scroll 44s linear infinite; }
.insta-track:hover .insta-row{ animation-play-state:paused; }
.insta-tile{ position:relative; flex:none; width:230px; height:230px; border-radius:4px; overflow:hidden; display:block; background:#000; }
.insta-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.insta-tile:hover img{ transform:scale(1.07); }
.insta-tile::after{ content:""; position:absolute; inset:0; background:rgba(20,16,10,0); transition:background .3s ease; }
.insta-tile:hover::after{ background:rgba(20,16,10,.3); }
.insta-tile .insta-ico{
  position:absolute; right:12px; bottom:12px; width:32px; height:32px; border-radius:50%;
  background:rgba(255,253,248,.95); display:flex; align-items:center; justify-content:center;
  color:var(--espresso); opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease;
}
.insta-tile .insta-ico svg{ width:16px; height:16px; }
.insta-tile:hover .insta-ico{ opacity:1; transform:none; }
@keyframes insta-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:620px){ .insta-tile{ width:160px; height:160px; } }
@media (prefers-reduced-motion: reduce){
  .insta-row{ animation:none; }
  .insta-track{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
}

/* ---------- Reveal-on-scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ---------- Misc ---------- */
.tag-strip{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px; }
.tag-strip span{ border:1px solid var(--line); padding:8px 16px; border-radius:30px; font-size:.8rem; color:var(--ink-soft); }

/* ---------- Large screens / 4K ----------
   --container itself now scales fluidly with the viewport (see :root), so
   every section built on .container automatically widens with it. This
   just tunes the bits that don't scale on their own: side padding, gallery
   column count, and base type size. */
@media (min-width:1600px){
  .container{ padding:0 48px; }
  .g-grid{ column-count:4; }
}
@media (min-width:2200px){
  body{ font-size:17px; }
  .g-grid{ column-count:5; }
}