/* ══════════════════════════════════════════════════════════
   ANASTASIOU MARBLES — main.css
   Identical to the standalone HTML — full pixel match
══════════════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:300;overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none}

/* ── NAV ────────────────────────────────────────────────── */
#am-nav{
  position:fixed;top:0;left:0;right:0;z-index:999999;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 56px;height:70px;
  transition:background .5s,height .4s,box-shadow .4s;
}
#am-nav.sc{
  background:rgba(250,248,244,.97);height:56px;
  box-shadow:0 1px 0 var(--bd);backdrop-filter:blur(18px);
}
.nav-logo img{
  height:36px;width:auto;
  filter:brightness(0) invert(1);transition:filter .5s;
}
#am-nav.sc .nav-logo img{filter:none}
.nav-links{display:flex;gap:38px;list-style:none}
.nav-links a{
  font-size:10px;letter-spacing:3px;text-transform:uppercase;font-weight:300;
  color:rgba(255,255,255,.8);transition:color .3s;position:relative;padding-bottom:3px;
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:1px;
  background:var(--gold-lt);transition:width .35s;
}
.nav-links a:hover{color:#fff}.nav-links a:hover::after{width:100%}
#am-nav.sc .nav-links a{color:var(--stone)}
#am-nav.sc .nav-links a:hover{color:var(--ink)}
#am-nav.sc .nav-links a::after{background:var(--gold)}
.nav-cta{
  font-size:10px;letter-spacing:3px;text-transform:uppercase;font-weight:300;
  padding:8px 20px;border:1px solid var(--gold);color:#fff;
  background:rgba(8,6,3,.42);backdrop-filter:blur(6px);transition:all .35s;
}
.nav-cta:hover{background:var(--gold-dk);border-color:var(--gold-dk);color:#fff}
#am-nav.sc .nav-cta{color:var(--gold-dk);background:transparent}
#am-nav.sc .nav-cta:hover{background:var(--gold-dk);color:#fff}
.nav-burger{
  display:none;flex-direction:column;gap:5px;
  cursor:pointer;padding:4px;background:none;border:none;
}
.nav-burger span{display:block;width:24px;height:1px;background:#fff;transition:all .35s}
#am-nav.sc .nav-burger span{background:var(--ink)}
.nav-drawer{
  display:none;position:fixed;inset:0;z-index:790;
  background:rgba(8,6,3,.97);flex-direction:column;
  align-items:center;justify-content:center;gap:32px;
}
.nav-drawer.open{display:flex}
.nav-drawer a{
  font-size:24px;letter-spacing:4px;text-transform:uppercase;
  font-family:var(--serif);color:rgba(255,255,255,.85);font-weight:300;
}
.nav-drawer a:hover{color:var(--gold-lt)}
.nav-drawer .drawer-cta{
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  font-family:var(--sans);padding:11px 28px;border:1px solid var(--gold);color:#fff;
}
.drawer-close{
  position:absolute;top:24px;right:28px;font-size:1.6rem;
  color:rgba(255,255,255,.4);background:none;border:none;cursor:pointer;
}
.drawer-close:hover{color:#fff}

/* ── HERO ───────────────────────────────────────────────── */
#hero{
  height:100vh;min-height:680px;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.hbg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  animation:hzoom 26s ease-in-out infinite alternate;
}
@keyframes hzoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.hoverlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 62% 58% at 50% 46%,
      rgba(8,6,3,.00)  0%,rgba(8,6,3,.28) 44%,
      rgba(8,6,3,.72) 68%,rgba(8,6,3,.92) 84%,rgba(8,6,3,.97) 100%),
    linear-gradient(to bottom,rgba(8,6,3,.55) 0%,rgba(8,6,3,0) 18%,rgba(8,6,3,0) 80%,rgba(8,6,3,.6) 100%);
}
.htopline{
  position:absolute;top:0;left:0;right:0;height:3px;z-index:10;
  background:linear-gradient(to right,transparent,var(--gold) 30%,var(--gold-lt) 50%,var(--gold) 70%,transparent);
  box-shadow:0 0 18px rgba(184,144,86,.45);
}
.hcontent{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 24px;animation:rise 2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.h-eyebrow{
  font-family:var(--sans);font-size:10px;letter-spacing:8px;
  text-transform:uppercase;font-weight:300;color:rgba(184,144,86,.72);
  margin-bottom:34px;display:flex;align-items:center;gap:14px;
}
.h-eyebrow span{display:block;height:1px;width:30px}
.h-eyebrow span:first-child{background:linear-gradient(to right,transparent,rgba(184,144,86,.6))}
.h-eyebrow span:last-child{background:linear-gradient(to left,transparent,rgba(184,144,86,.6))}
.h-logo{
  width:min(310px,70vw);height:auto;
  filter:brightness(0) invert(1) drop-shadow(0 3px 22px rgba(0,0,0,.65));
}
.h-rule{display:flex;align-items:center;gap:12px;margin:24px 0;width:min(260px,60vw)}
.h-rule span{flex:1;height:1px;background:rgba(184,144,86,.4)}
.h-rule i{width:5px;height:5px;background:var(--gold);transform:rotate(45deg);flex-shrink:0;display:block}
.h-rule i.sm{width:3px;height:3px;opacity:.5}
.h-tagline{
  font-family:var(--serif);font-size:clamp(.9rem,1.8vw,1.45rem);
  font-weight:300;letter-spacing:7px;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-bottom:18px;
}
.h-badge{
  font-family:var(--sans);font-size:10px;letter-spacing:5px;
  text-transform:uppercase;font-weight:300;color:#fff;
  background:rgba(6,5,3,.68);
  border-top:1px solid rgba(184,144,86,.35);border-bottom:1px solid rgba(184,144,86,.35);
  border-left:2px solid var(--gold);border-right:2px solid var(--gold);
  padding:10px 26px;display:inline-block;margin-bottom:36px;
}
.h-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.h-btns a{
  font-family:var(--sans);font-size:10px;letter-spacing:3px;
  text-transform:uppercase;font-weight:300;
  padding:12px 26px;transition:all .35s;display:inline-flex;align-items:center;gap:6px;
}
.hbtn-g{background:var(--gold);color:#fff;border:1px solid var(--gold)}
.hbtn-g:hover{background:var(--gold-dk);border-color:var(--gold-dk);color:#fff}
.hbtn-o{background:rgba(8,6,3,.5);color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.32)}
.hbtn-o:hover{border-color:var(--gold);color:#fff}
.h-scroll{
  position:absolute;bottom:72px;left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.4;
}
.h-scroll p{font-family:var(--sans);font-size:9px;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.8)}
.h-scroll-bar{width:1px;height:38px;background:rgba(255,255,255,.15);position:relative;overflow:hidden}
.h-scroll-bar::after{
  content:'';position:absolute;left:0;right:0;top:-100%;bottom:0;
  background:var(--gold);animation:sbar 1.9s ease-in-out infinite;
}
@keyframes sbar{0%{top:-100%}100%{top:100%}}
.h-side{
  position:absolute;right:28px;top:50%;transform:translateY(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;
}
.h-side p{
  writing-mode:vertical-rl;font-family:var(--sans);font-size:9px;
  letter-spacing:4px;text-transform:uppercase;font-weight:300;
  color:rgba(255,255,255,.52);text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.h-side-bar{width:1px;height:44px;position:relative;overflow:hidden;background:rgba(255,255,255,.12)}
.h-side-bar::after{content:'';position:absolute;left:0;right:0;top:-100%;bottom:0;background:var(--gold);animation:sbar 2.2s ease-in-out infinite}
#hstrip{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  display:flex;align-items:stretch;
  background:rgba(8,6,3,.82);backdrop-filter:blur(12px);
  border-top:1px solid rgba(184,144,86,.3);
}
.hsi{flex:1;padding:14px 26px;display:flex;flex-direction:column;gap:5px;border-right:1px solid rgba(184,144,86,.15);transition:background .3s;cursor:default}
.hsi:last-child{border-right:none}
.hsi:hover{background:rgba(184,144,86,.08)}
.hsi-l{font-family:var(--sans);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.42)}
.hsi-v{font-family:var(--serif);font-size:16px;font-weight:400;color:#fff;letter-spacing:.04em}

/* ── SECTIONS ───────────────────────────────────────────── */
.sec{padding:100px 60px}
.sec-cream{background:var(--cream)}
.sec-off{background:var(--off)}
.sec-divider{height:1px;margin:0 60px;background:linear-gradient(to right,transparent,var(--bd) 20%,var(--bd) 80%,transparent)}
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--sans);font-size:11px;letter-spacing:5px;text-transform:uppercase;font-weight:300;color:var(--gold-dk);margin-bottom:22px}
.eyebrow::before{content:'';display:block;width:16px;height:1px;background:var(--gold);flex-shrink:0}
h2.sec-h2{font-family:var(--serif);font-size:clamp(2rem,3.5vw,3.1rem);font-weight:400;line-height:1.08;color:var(--ink);margin-bottom:22px}
h2.sec-h2 em{font-style:italic;color:var(--gold-dk)}
h3.sec-h3{font-family:var(--serif);font-size:32px;font-weight:400;color:var(--ink);margin-bottom:8px;line-height:1.1}
h3.sec-h3 em{font-style:italic}
.sec-body{font-family:var(--sans);font-size:13px;color:var(--stone);line-height:2.2;letter-spacing:.06em}
.sec-body strong{color:var(--ink);font-weight:400}
.gold-line{width:100%;height:1px;margin:26px 0;background:linear-gradient(to right,var(--gold),var(--bd) 60%,transparent);opacity:.5}

/* ══════════════════════════════════════════════════════════
   CHANGE 1 — MATERIALS: text overlaid inside the image
══════════════════════════════════════════════════════════ */
.mat-header{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:52px}
.mat-header-r{font-family:var(--sans);font-size:13px;color:var(--stone);line-height:2.1;letter-spacing:.06em;align-self:end}
/* Full-bleed — pull out of section padding */
.mat-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-left:-60px;
  margin-right:-60px;
}

/* Card height via padding-bottom trick */
.mat-card{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  width:100%;
  padding-bottom:125%;   /* 4:5 portrait ratio — original */
  height:0;
}

/* The image fills the whole card */
.mat-card-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.mat-card:hover .mat-card-img{transform:scale(1.06)}

/* Subtle gradient — text legible but stone texture fully visible */
.mat-card-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;          /* pin content to bottom */
  padding:32px 28px;
  background:linear-gradient(
    to top,
    rgba(8,6,3,.68) 0%,
    rgba(8,6,3,.22) 30%,
    rgba(8,6,3,.04) 52%,
    transparent 100%
  );
}

/* All text inside overlay is white */
.mat-card-overlay .mat-num{
  font-family:var(--sans);font-size:9px;letter-spacing:4px;
  text-transform:uppercase;color:var(--gold-lt);
  display:block;margin-bottom:8px;opacity:.85;
}
.mat-card-overlay .sec-h3{
  font-family:var(--serif);font-size:28px;font-weight:400;
  color:#fff !important;margin-bottom:8px;line-height:1.1;
}
.mat-card-overlay .sec-h3 em{font-style:italic}
.mat-card-overlay .mat-desc{
  font-family:var(--sans);font-size:12px;
  color:rgba(255,255,255,.82);line-height:1.9;margin-bottom:16px;
}
.mat-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .5s cubic-bezier(.16,1,.3,1);z-index:3;
}
.mat-card:hover::after{transform:scaleX(1)}

/* ══════════════════════════════════════════════════════════
   CHANGE 2 — STRIPS: images fill the full row, split evenly
   Uses CSS custom property --strip-count set inline in PHP
══════════════════════════════════════════════════════════ */
/* Strips — also full-bleed, zero gap, flex equal split */
.strips{
  display:flex;
  gap:0;
  margin-top:0;
  margin-left:-60px;
  margin-right:-60px;
}
.strip{
  /* Each strip takes an equal share regardless of how many there are */
  flex:1 1 0;
  min-width:0;
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;      /* short landscape thumbnail */
  max-height:220px;      /* cap height so they stay small */
  cursor:pointer;
}
.strip img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.strip:hover img{transform:scale(1.06)}
.strip::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .5s;
}
.strip:hover::after{transform:scaleX(1)}

/* ── Shared button ─────────────────────────────────────── */
.btn-gold{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:10px;letter-spacing:3px;
  text-transform:uppercase;font-weight:300;
  background:var(--gold);color:#fff;border:1px solid var(--gold);
  padding:11px 22px;transition:all .35s;cursor:pointer;
  position:relative;z-index:4;    /* sit above the overlay gradient */
}
.btn-gold:hover{background:var(--gold-dk);border-color:var(--gold-dk);color:#fff}

/* ══════════════════════════════════════════════════════════
   CHANGE 3 — RESIZABLE images (all sections except hero)
   .am-resizable wraps any image container and gets a
   CSS resize handle. JS keeps the image filling the box.
══════════════════════════════════════════════════════════ */
.am-resizable{
  resize:both;
  overflow:hidden;          /* required for resize to work */
  min-width:80px;
  min-height:80px;
  position:relative;
}

/* A subtle gold corner handle so the user knows it's draggable */
.am-resizable::before{
  content:'◢';
  position:absolute;
  bottom:4px;right:5px;
  z-index:20;
  font-size:11px;
  color:rgba(184,144,86,.45);
  pointer-events:none;
  line-height:1;
  opacity:0;
  transition:opacity .25s;
}
.am-resizable:hover::before{opacity:1}

/* Images inside .am-resizable should fill the box */
.am-resizable > img,
.am-resizable .mat-card-img,
.qry-frame.am-resizable > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ── QUARRY ─────────────────────────────────────────────── */
.qry-top{display:grid;grid-template-columns:5fr 6fr;gap:88px;align-items:center;margin-bottom:64px;padding-bottom:28px}
.qry-frame{
  position:relative;
  min-width:200px;
  min-height:300px;
  overflow:visible;        /* allow badge to sit outside the image */
}
.qry-frame::before{content:'';position:absolute;top:-10px;left:-10px;width:48px;height:48px;border-top:2px solid var(--gold);border-left:2px solid var(--gold);z-index:2}
.qry-frame::after{content:'';position:absolute;bottom:-10px;right:-10px;width:48px;height:48px;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold);z-index:2}
.qry-frame img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;display:block}
.qry-badge{
  position:absolute;
  bottom:-24px;
  right:-24px;
  background:var(--ink);
  padding:20px 24px;
  text-align:center;
  border-top:2px solid var(--gold);
  z-index:10;
  min-width:90px;
}
.qry-badge-n{font-family:var(--serif);font-size:2.2rem;color:#fff;display:block;line-height:1}
.qry-badge-l{font-family:var(--sans);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-lt);display:block;margin-top:6px;opacity:.85}
.qry-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.qry-stat{border-top:1px solid var(--bd);padding-top:13px}
.qry-stat-n{font-family:var(--serif);font-size:2.3rem;color:var(--ink);display:block;line-height:1.1;margin-bottom:3px}
.qry-stat-l{font-family:var(--sans);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--stone)}
.qgrid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:320px;gap:3px}
.qgrid-item{position:relative;overflow:hidden;cursor:pointer;min-width:80px;}
.qgrid-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.qgrid-item:hover img{transform:scale(1.05)}
.qgrid-item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,var(--gold),transparent);transform:scaleX(0);transition:transform .5s}
.qgrid-item:hover::after{transform:scaleX(1)}

/* ── STORY ──────────────────────────────────────────────── */
.story-grid{display:grid;grid-template-columns:1fr 1.7fr;gap:86px;align-items:start}
.story-est{font-family:var(--serif);font-style:italic;font-size:4rem;color:var(--warm);display:block;margin-top:12px;line-height:1}
.story-quote{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--ink);line-height:1.68;border-left:2px solid var(--gold);padding-left:22px;margin-bottom:32px;opacity:.85}

/*
  Gallery layout (matches reference image 2):
  Row 1 — 1 wide full-width image
  Row 2 — 2-column grid (2 images side by side)
  Row 3 — 2-column grid (2 images side by side)
  Row 4 — 1 wide full-width image
  Total: 6 images. If fewer are provided, empty slots collapse.
*/
.mosaic{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  margin-top:66px;
}

/* Items 1 and 6 span the full row */
.mo-wide{
  grid-column:1 / 3;
  aspect-ratio:16/6;   /* cinematic wide crop */
}

/* Items 2–5 each take one column */
.mo-sq{
  aspect-ratio:1 / 1;
}

/* Shared cell styles */
.mo-wide,
.mo-sq{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  min-width:80px;
  min-height:80px;
}
.mo-wide img,
.mo-sq img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.mo-wide:hover img,
.mo-sq:hover img{transform:scale(1.05)}
.mo-wide::after,
.mo-sq::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .5s;
}
.mo-wide:hover::after,
.mo-sq:hover::after{transform:scaleX(1)}

/* ── CONTACT ────────────────────────────────────────────── */
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:66px;align-items:stretch}
.ct-grid > div:last-child{display:flex;flex-direction:column}
.ct-grid > div:last-child #map{flex:1;min-height:480px}

/* Two-column row — target CF7's span wrappers */
.cf7-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.cf7-col{min-width:0}
.cf7-col.full{grid-column:1 / 3}
.cf7-row label{display:contents!important}
.cf7-row .wpcf7-form-control-wrap{display:block}

.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 select,.wpcf7 textarea{
  font-family:var(--sans)!important;font-weight:300!important;font-size:13px!important;
  color:var(--ink)!important;background:var(--cream)!important;
  border:none!important;border-bottom:1px solid var(--bd)!important;
  padding:12px 14px!important;width:100%!important;outline:none!important;
  border-radius:0!important;display:block!important;margin-bottom:10px!important;
  letter-spacing:.04em!important;transition:background .2s,border-color .2s!important;appearance:none!important;
}
.wpcf7 input:focus,.wpcf7 textarea:focus{background:#fff!important;border-bottom-color:var(--gold)!important}
.wpcf7 textarea{min-height:106px!important;resize:vertical!important}
.wpcf7 input[type=submit]{
  background:linear-gradient(135deg,var(--gold-dk),var(--gold))!important;color:#fff!important;
  font-family:var(--sans)!important;font-weight:300!important;font-size:10px!important;
  letter-spacing:3px!important;text-transform:uppercase!important;border:none!important;
  padding:12px 26px!important;cursor:pointer!important;border-radius:0!important;transition:opacity .3s!important;
}
.wpcf7 input[type=submit]:hover{opacity:.85!important}
.cinfo{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:16px}
.ci{background:var(--cream);padding:14px 16px;display:flex;align-items:flex-start;gap:10px;text-decoration:none;transition:all .25s;border-bottom:1px solid transparent}
.ci:hover{background:#fff;border-bottom-color:var(--gold)}
.ci-icon{font-size:.9rem;margin-top:2px;flex-shrink:0}
.ci-l{font-family:var(--sans);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-dk);display:block;margin-bottom:3px;opacity:.8}
.ci-v{font-family:var(--sans);font-size:12px;color:var(--ink);letter-spacing:.03em}
.wa-btn{display:inline-flex;align-items:center;gap:9px;margin-top:3px;padding:10px 16px;border:1px solid #25d166;color:#1aaa54;font-family:var(--sans);font-size:10px;letter-spacing:3px;text-transform:uppercase;background:transparent;transition:all .3s}
.wa-btn:hover{background:rgba(37,209,102,.07)}
.map-label{font-family:var(--sans);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--stone);margin-bottom:10px}
#map{height:100%;min-height:480px;width:100%}

/* ── FOOTER ─────────────────────────────────────────────── */
.site-footer{
  background:var(--off);border-top:1px solid var(--bd);
  padding:48px 60px 32px;
}
.footer-top{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:24px;margin-bottom:32px;
}
.footer-logo img{height:32px;width:auto}
.footer-nav{display:flex;gap:28px;flex-wrap:wrap}
.footer-nav a{
  font-family:var(--sans);font-size:9px;letter-spacing:3px;
  text-transform:uppercase;color:var(--stone);transition:color .3s;
}
.footer-nav a:hover{color:var(--gold-dk)}
.footer-contact{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.footer-contact a{
  font-family:var(--sans);font-size:11px;letter-spacing:.04em;
  color:var(--stone);transition:color .3s;
}
.footer-contact a:hover{color:var(--gold-dk)}
.footer-rule{
  height:1px;
  background:linear-gradient(to right,transparent,var(--bd) 20%,var(--bd) 80%,transparent);
  margin-bottom:24px;
}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
}
.footer-copy{
  font-family:var(--sans);font-size:9px;letter-spacing:1px;
  text-transform:uppercase;color:var(--stone);opacity:.7;
}
.footer-legal{display:flex;gap:22px;flex-wrap:wrap}
.footer-legal a{
  font-family:var(--sans);font-size:9px;letter-spacing:2px;
  text-transform:uppercase;color:var(--stone);
  transition:color .3s;
}
.footer-legal a:hover{color:var(--gold-dk)}

/* ── WA FLOAT ───────────────────────────────────────────── */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:999999;width:50px;height:50px;border-radius:50%;background:#25d166;display:flex;align-items:center;justify-content:center;font-size:22px;text-decoration:none;box-shadow:0 4px 20px rgba(37,209,102,.35);transition:transform .3s}
.wa-float:hover{transform:scale(1.1)}
.wa-ring{position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(37,209,102,.35);animation:ring 2.2s ease-out infinite}
@keyframes ring{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}

/* ── SCROLL REVEAL ──────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}

/* ══════════════════════════════════════════════════════════
   MOBILE SLIDERS — all image-heavy sections become swipeable
   carousels on screens ≤ 768px. Desktop layout unchanged.
══════════════════════════════════════════════════════════ */

/* ── Shared slider shell ──────────────────────────────── */
.am-slider{
  position:relative;
  overflow:hidden;
  touch-action:pan-y;   /* allow vertical scroll, capture horizontal */
}
.am-slider-track{
  display:flex;
  transition:transform .42s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
}
/* Each slide fills the slider width */
.am-slider-track > *{
  flex:0 0 100%;
  width:100%;
  min-width:0;
}
/* Dot indicators */
.am-dots{
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:14px;
}
.am-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--bd);
  border:none;padding:0;cursor:pointer;
  transition:background .25s,transform .25s;
}
.am-dot.active{background:var(--gold);transform:scale(1.25)}

/* ── RESPONSIVE 900px ───────────────────────────────────── */
@media(max-width:900px){
  #am-nav{padding:0 20px;height:60px}
  #am-nav.sc{height:50px}
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
  .sec{padding:68px 20px}
  .sec-divider{margin:0 20px}
  .h-side{display:none}
  .h-logo{width:min(200px,55vw)}
  .h-tagline{font-size:.9rem;letter-spacing:4px}
  #hstrip .hsi:nth-child(3),#hstrip .hsi:nth-child(4){display:none}
  .hsi{padding:12px 16px}
  .mat-header{grid-template-columns:1fr}
  .story-grid{grid-template-columns:1fr;gap:36px}
  .ct-grid{grid-template-columns:1fr;gap:40px}
  .cinfo{grid-template-columns:1fr}
  #map{height:260px}
  .site-footer{padding:36px 20px 24px}
  .footer-top{flex-direction:column;align-items:center;text-align:center}
  .footer-contact{align-items:center}
  .footer-bottom{flex-direction:column;align-items:center;text-align:center}
  .footer-legal{justify-content:center}

  /* ── Materials cards: single-card slider ── */
  .mat-cards{
    display:block;          /* slider replaces grid */
    margin-left:-20px;
    margin-right:-20px;
  }
  .mat-cards.am-slider .am-slider-track{
    /* track wraps both cards side by side */
  }
  .mat-card{
    padding-bottom:110%;    /* slightly less tall on mobile */
  }

  /* ── Quarry grid: slider ── */
  .qry-top{grid-template-columns:1fr;gap:36px}
  .qry-frame::before,.qry-frame::after{display:none}
  .qry-badge{bottom:-12px;right:0}
  .qgrid{margin-left:-20px;margin-right:-20px}
  .qgrid-item{aspect-ratio:4/3}

  /* ── Story mosaic: slider ── */
  .mosaic{
    display:block;
    margin-left:-20px;
    margin-right:-20px;
    margin-top:36px;
  }
  .mosaic.am-slider .am-slider-track > *{
    aspect-ratio:4/3;
  }
  .mo-wide,.mo-sq{
    grid-column:auto;
    aspect-ratio:4/3;
  }

  /* ── Strips: horizontal scroll peek row ── */
  .strips{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:6px;
    margin-left:-20px;
    margin-right:-20px;
    padding:0 20px;
    scrollbar-width:none;
  }
  .strips::-webkit-scrollbar{display:none}
  .strip{
    flex:0 0 72vw;          /* peek next image on right */
    min-width:0;
    scroll-snap-align:start;
    aspect-ratio:4/3;
    max-height:none;
  }
}

@media(max-width:480px){
  .h-btns{flex-direction:column;align-items:center}
  .h-btns a{width:200px;justify-content:center}
  .h-badge{font-size:9px;letter-spacing:3px;padding:8px 16px}
  h2.sec-h2{font-size:1.9rem}
  .strip{flex:0 0 82vw}
}

.footer-nav {
    display: flex;
    gap: 25px !important;
    flex-wrap: wrap;
}