/* Forever Young Designs — Gallery preview v1 (PREVIEW ONLY, not live)
   Gallery-only stylesheet. Replaces old styles.css for gallery pages only.
   Main site pages (index/offerings/connect) are NOT restyled by this file.
   Palette, exactly as approved: chocolate #1a0f05, champagne gold #c9a227,
   deep gold #8a6d12, warm ivory #fdf8ec, bright white marble with elegant
   gold veining = marble-new-sections.jpg (NOT yellow marble.jpg, NOT cream
   white-marble.jpg). No flat clipart, no thick gold rectangular frames,
   no giant flat gold circles, no generic identical rectangular card grids. */
:root{
  --choc:#1a0f05; --brown:#2b1d0e; --brown2:#4a2f14;
  --gold:#c9a227; --gold-deep:#8a6d12; --gold-light:#e8c766; --gold-pale:#f0d878;
  --ivory:#fdf8ec; --ink:#171009; --muted:#5a4630;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{
  margin:0; font-family:Jost,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--ivory);
  background-image:linear-gradient(rgba(253,248,236,.94),rgba(253,248,236,.94)),url(marble-new-sections.jpg);
  background-size:cover; background-attachment:scroll;
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:inherit}
img{max-width:100%}
main{flex:1; width:100%}
.wrap{max-width:1180px; margin:0 auto; padding:0 22px}

/* ---- Marble header, official logo unchanged ---- */
.topbar{
  background:url(marble-new-sections.jpg) center/cover;
  border-bottom:4px solid var(--gold);
  position:sticky; top:0; z-index:50;
}
.topbar-inner{max-width:1300px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative}
.logo-img{height:68px; width:auto; display:block}
.nav-desktop{display:flex; align-items:center; gap:18px; font-size:.82em; font-weight:700; letter-spacing:.02em}
.nav-desktop a{text-decoration:none; padding:10px 8px; color:var(--brown)}
.menu-btn{display:none; font-size:28px; cursor:pointer; padding:8px 12px; background:none; border:0; color:var(--brown)}
.mobile-nav{display:none}
.mobile-nav.open{display:block; background:url(marble-new-sections.jpg) center/cover; border-top:3px solid var(--gold); padding:14px 20px 18px}
.mobile-nav a{display:block; padding:13px 0; text-decoration:none; font-weight:800; border-bottom:1px solid #e8d9a8; color:var(--brown)}

/* ---- Page hero: chocolate, editorial, not a little box ---- */
.show-hero{
  background:linear-gradient(160deg,#2b1d0e 0%,#1a0f05 62%,#1a0f05 100%);
  color:var(--ivory); padding:52px 0 44px; border-bottom:1px solid rgba(201,162,39,.55);
}
.show-hero .wrap{max-width:900px; text-align:center}
.back-link{margin:0 0 18px; text-align:left}
.back-link a{color:var(--gold-light); text-decoration:none; font-weight:700; font-size:.92em; letter-spacing:.04em}
.show-hero h2{
  font-family:Cinzel,Georgia,serif; font-weight:700; font-size:2.6em; line-height:1.08;
  margin:0 0 10px; color:var(--ivory); letter-spacing:.01em;
}
.show-hero .section-sub{
  color:var(--gold-light); letter-spacing:.16em; font-size:.82em; font-weight:700; margin:0;
}
.gold-rule{width:64px; height:2px; margin:20px auto 0; background:linear-gradient(90deg,transparent,#c9a227,transparent); border:0}

/* ---- Body: ivory marble, faded, text on clean surfaces ---- */
.show-body{padding:48px 0 64px}
.show-body .wrap{max-width:1180px}
.work-note{
  text-align:center; font-size:.95em; line-height:1.6; color:var(--muted);
  max-width:760px; margin:34px auto 0;
}

/* ---- Overview categories: uniform boxes, same size every tile ---- */
.cards{display:grid; grid-template-columns:repeat(12,1fr); gap:28px 24px; align-items:stretch; grid-auto-rows:1fr}
.card{
  grid-column:span 6; background:var(--ivory); border:1px solid rgba(201,162,39,.55);
  box-shadow:0 18px 38px rgba(26,15,5,.16), 0 4px 12px rgba(26,15,5,.08);
  overflow:hidden; margin:0; display:flex; flex-direction:column; height:100%;
}
.card .photo{background:#fff; display:flex; align-items:center; justify-content:center; line-height:0; height:300px; flex:none}
.card .photo img{width:auto; max-width:100%; height:100%; max-height:100%; object-fit:contain; display:block; background:#fff}
.card .photo span{
  display:flex; align-items:center; justify-content:center; height:100%; width:100%; padding:28px;
  font-family:Cinzel,Georgia,serif; font-size:1.05em; line-height:1.5; color:var(--brown2);
  background:linear-gradient(rgba(253,248,236,.92),rgba(253,248,236,.92)),url(marble-new-sections.jpg) center/cover;
  text-align:center;
}
.card-body{padding:22px 22px 24px; background:var(--ivory); flex:1; display:flex; flex-direction:column}
.card-body h3{font-family:Cinzel,Georgia,serif; font-size:1.35em; margin:0 0 8px; color:var(--brown)}
.card-body p{margin:0 0 14px; line-height:1.55; color:var(--muted)}
.card-body p:last-child{margin-bottom:0; margin-top:auto}
.btn-gold{
  display:inline-block; background:linear-gradient(180deg,#fff8c0 0%,#f7e08a 18%,#e8c766 38%,#c9a227 62%,#8a6d12 100%);
  color:#171009; text-decoration:none; font-weight:800; padding:13px 20px; min-height:44px; line-height:1.2;
  box-shadow:0 6px 16px rgba(0,0,0,.28), inset 0 1px 0 #fff8c0; border-radius:8px;
}

/* ---- Detail galleries: every box the same size ---- */
.gallery{display:grid; grid-template-columns:repeat(12,1fr); gap:28px 24px; align-items:stretch; grid-auto-rows:1fr}
.gallery figure{
  grid-column:span 6; margin:0; background:#fff; border:1px solid rgba(201,162,39,.55);
  box-shadow:0 18px 38px rgba(26,15,5,.16), 0 4px 12px rgba(26,15,5,.08); overflow:hidden;
  display:flex; flex-direction:column; height:100%;
}
.gallery img{width:100%; height:360px; object-fit:contain; display:block; background:#fff; flex:none}
.gallery video{width:100%; height:360px; object-fit:contain; display:block; background:#fff; flex:none}
.gallery figcaption{
  padding:16px 18px 18px; text-align:center; font-weight:600; line-height:1.45; color:var(--brown);
  border-top:1px solid rgba(201,162,39,.45); background:var(--ivory); font-size:.98em; flex:1;
  display:flex; align-items:center; justify-content:center;
}
.gallery figure:only-child{grid-column:4 / span 6; max-width:780px; width:100%}

/* ---- Websites page: showcase video full-bleed, edge to edge like the Services hero ---- */
.video-hero{margin:0; width:100%; background:#000}
.video-hero .video-frame{position:relative; width:100%; height:0; padding-top:56.25%; overflow:hidden; background:#000}
.video-hero .video-frame video{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; background:#000}
.video-hero figcaption{
  padding:16px 18px 18px; text-align:center; font-weight:600; line-height:1.45; color:var(--brown);
  background:var(--ivory); font-size:.98em; border-top:1px solid rgba(201,162,39,.45);
}

/* ---- Experience / process: editorial vertical on mobile, staggered on desktop ---- */
.process{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.process li{
  background:var(--ivory); border:1px solid rgba(201,162,39,.55); padding:24px 20px;
  box-shadow:0 14px 30px rgba(26,15,5,.14); text-align:left; line-height:1.5;
}
.process li:nth-child(3n+2){margin-top:18px}
.step-icon{
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:12px;
  background:linear-gradient(180deg,#f0d878,#c9a227); color:#171009; font-size:22px; border-radius:50%;
  box-shadow:inset 0 1px 0 #fff8c0, 0 4px 10px rgba(0,0,0,.22);
}
.process strong{display:block; font-family:Cinzel,Georgia,serif; font-size:1.05em; color:var(--brown); letter-spacing:.02em}
.step-desc{display:block; font-size:.92em; line-height:1.55; margin-top:8px; color:var(--muted)}
.terms{
  font-size:.95em; line-height:1.65; background:var(--ivory); border:1px solid rgba(201,162,39,.45);
  padding:24px 26px; margin-top:28px; box-shadow:0 10px 24px rgba(26,15,5,.10);
}
.terms p{margin:0 0 14px}
.terms p:last-child{margin-bottom:0}

/* ---- Footer: dark chocolate, as on main site ---- */
.site-footer{background:#1a0f05; color:#fdf8ec; border-top:4px solid #c9a227; padding:28px 20px 0; margin-top:auto; width:100%}
.footer-wrap{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:20px; text-align:left}
.footer-tagline{font-size:.88em; line-height:1.55; color:#fdf8ec; margin:0}
.footer-col h3{font-size:.78em; letter-spacing:.14em; text-transform:uppercase; color:#e8c766; margin:0 0 8px}
.footer-col p{font-size:.88em; line-height:1.55; margin:0}
.footer-col a{color:#fdf8ec}
.footer-legal{max-width:1100px; margin:18px auto 0; padding-top:14px; border-top:1px solid rgba(232,199,102,.35); text-align:center; display:flex; gap:24px; justify-content:center; flex-wrap:wrap}
.footer-legal a{color:#e8c766; text-decoration:none; font-size:.78em; letter-spacing:.12em; font-weight:700; padding:6px 0}
.footer-bottom{margin:16px -20px 0; padding:16px 20px 18px; background:#1a0f05; color:#d8d0c0; text-align:center; border-top:1px solid rgba(232,199,102,.35)}
.footer-bottom .credit-top{display:block; letter-spacing:.28em; font-weight:600; font-size:.8em; line-height:1.5}
.footer-bottom .credit-name{display:block; font-family:Cinzel,Georgia,serif; font-size:1.25em; letter-spacing:.02em; color:#c9a227; font-weight:700; margin:6px 0 8px; line-height:1.2}
.footer-bottom .credit-services{display:block; letter-spacing:.18em; line-height:1.5; font-size:.8em}

/* ---- Tablet ---- */
@media(max-width:900px){
  .process{grid-template-columns:repeat(2,1fr)}
  .process li:nth-child(3n+2){margin-top:0}
}

/* ---- Mobile: single column, projects prominent, large tap targets ---- */
@media(max-width:820px){
  .nav-desktop{display:none}
  .menu-btn{display:block; position:absolute; right:14px; top:50%; transform:translateY(-50%)}
  .topbar-inner{justify-content:center}
  .logo-img{height:52px}
  .show-hero{padding:40px 0 34px}
  .show-hero h2{font-size:2em}
  .back-link{text-align:left}
  .show-body{padding:34px 0 48px}
  .cards,.gallery{grid-template-columns:1fr; gap:26px}
  .card,.gallery figure,.gallery figure:only-child{grid-column:span 1; margin-top:0}
  .card .photo{height:260px}
  .gallery img,.gallery .photo,.gallery video{height:300px}
  .process{grid-template-columns:1fr}
  .process li{padding:22px 18px}
  .footer-wrap{grid-template-columns:1fr; text-align:center; gap:14px}
  .footer-bottom .credit-top{letter-spacing:.14em}
  .footer-bottom .credit-name{font-size:1.05em}
  .footer-bottom .credit-services{letter-spacing:.10em; font-size:.78em}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
}

/* ---- Gallery preview v1 additions: active nav, tile counts, Experience band, placeholder figures ---- */
.nav-desktop a.nav-active{background:linear-gradient(180deg,#f0d878,#c9a227);border-radius:8px;padding:8px 14px;color:#171009}
.mobile-nav a.nav-active{color:var(--gold-deep)}
.card-body p.tile-count{font-size:.8em;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin:0 0 10px}
.card > a{text-decoration:none}
.exp-link{margin:30px auto 0;max-width:760px;text-align:center}
.exp-link a{display:block;text-decoration:none;background:linear-gradient(180deg,#fffdf6,#f8eed6);border:2px solid #c9a227;border-radius:12px;padding:20px 22px;color:#1a0f05;box-shadow:0 14px 30px rgba(26,15,5,.14)}
.exp-link strong{display:block;font-family:Cinzel,Georgia,serif;font-size:1.2em;margin-bottom:6px}
.exp-link span{font-size:.95em;line-height:1.55;color:#5a4630}
.gallery .photo{background:#fff; line-height:0; height:360px; flex:none; display:flex; align-items:center; justify-content:center}
.gallery .photo span{display:flex; align-items:center; justify-content:center; height:100%; width:100%; padding:28px; font-family:Cinzel,Georgia,serif; font-size:1.05em; line-height:1.5; color:var(--brown2); background:linear-gradient(rgba(253,248,236,.92),rgba(253,248,236,.92)),url(marble-new-sections.jpg) center/cover; text-align:center}
@media(max-width:820px){
  .gallery .photo{height:300px}
}

/* ---- Grouped entries: related images share one box, same fixed height ---- */
.gallery .group-imgs{display:flex; height:360px; background:#fff; flex:none}
.gallery .group-imgs img{height:100%; width:auto; max-width:100%; flex:1 1 0; min-width:0; object-fit:contain}
@media(max-width:820px){
  .gallery .group-imgs{height:300px}
}

/* ---- Grouped entries, stacked variant: wide landscape images, one above the other ---- */
.gallery .group-imgs-col{flex-direction:column}
.gallery .group-imgs-col img{height:auto; width:100%; flex:1 1 0; min-height:0}