/* ==========================================================================
   PAGE LAYOUTS
   ========================================================================== */

/* --- Hero (home) ---------------------------------------------------------- */
.hero{
  position:relative;min-height:clamp(640px,96vh,1000px);
  display:flex;align-items:center;overflow:hidden;
  padding-block:clamp(4rem,10vh,7rem);
  background:var(--ink)
}
.hero__bg{
  position:absolute;inset:-8% -4%;z-index:0;
  background-size:cover;background-position:center 34%;
  opacity:.26;will-change:transform
}
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 22% 42%,rgba(14,14,16,.42) 0%,rgba(14,14,16,.9) 62%,var(--ink) 100%),
    linear-gradient(to top,var(--ink) 2%,transparent 42%)
}
.hero__glow{
  position:absolute;z-index:1;width:min(760px,88vw);aspect-ratio:1;right:-10%;top:8%;
  background:radial-gradient(circle,rgba(201,162,39,.15),transparent 66%);
  filter:blur(30px);animation:breathe 9s var(--ease-out) infinite;pointer-events:none
}
@keyframes breathe{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}
.hero .wrap{position:relative;z-index:3;width:100%}
.hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero__title{
  font-size:var(--fs-hero);line-height:.94;letter-spacing:-.025em;font-weight:500;
  margin-bottom:1.5rem
}
.hero__title em{font-style:italic;color:var(--gilt)}
.hero__sub{font-size:clamp(1rem,1.55vw,1.1875rem);color:var(--text-lo);max-width:52ch;line-height:1.66}
.hero__trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;
  margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid rgba(246,242,234,.1);
  font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-lo);font-weight:600
}
.hero__trust b{color:var(--gilt);font-weight:700}
.hero__trust span{display:inline-flex;align-items:center;gap:.5rem}

/* Floating 3D frame stack */
.hero__stage{position:relative;aspect-ratio:1/1.06;perspective:1400px;transform-style:preserve-3d}
.float-frame{
  position:absolute;border-radius:var(--radius);will-change:transform;
  transform-style:preserve-3d;
  animation:floatDrift var(--dur-float,13s) var(--ease-out) infinite;
  animation-delay:var(--delay,0s)
}
.float-frame:nth-child(1){width:53%;top:2%;left:4%;--depth:60;--dur-float:13s;z-index:3}
.float-frame:nth-child(2){width:44%;top:20%;right:0%;--depth:26;--delay:-3.4s;--dur-float:15s;z-index:2}
.float-frame:nth-child(3){width:40%;bottom:8%;left:0%;--depth:38;--delay:-6.8s;--dur-float:14s;z-index:4}
.float-frame:nth-child(4){width:33%;bottom:2%;right:11%;--depth:14;--delay:-9.2s;--dur-float:16s;z-index:1}
@keyframes floatDrift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-16px,0)}
}
.hero__scroll{
  position:absolute;left:50%;bottom:1.75rem;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--text-lo)
}
.hero__scroll i{display:block;width:1px;height:46px;background:linear-gradient(to bottom,var(--gilt),transparent);
  animation:scrollCue 2.1s var(--ease-out) infinite}
@keyframes scrollCue{0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* --- Page hero (inner pages) ---------------------------------------------- */
.pagehero{
  position:relative;padding-block:clamp(4.5rem,11vw,8rem) clamp(3rem,7vw,5rem);
  background:var(--ink-soft);overflow:hidden;border-bottom:1px solid var(--glass-border)
}
.pagehero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 78% 0%,rgba(201,162,39,.11),transparent 62%)
}
.pagehero .wrap{position:relative;z-index:2}
.pagehero h1{max-width:20ch}
.pagehero p{margin-top:1.25rem;color:var(--text-lo);font-size:clamp(1rem,1.5vw,1.125rem)}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;font-size:var(--fs-xs);color:var(--text-lo);margin-bottom:1.5rem}
.crumbs a:hover{color:var(--gilt)}
.crumbs span[aria-hidden]{opacity:.45}

/* --- Bento grid ----------------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1.25rem}
.bento > *:nth-child(1){grid-column:span 4}
.bento > *:nth-child(2){grid-column:span 2}
.bento > *:nth-child(3){grid-column:span 2}
.bento > *:nth-child(4){grid-column:span 2}
.bento > *:nth-child(5){grid-column:span 2}
.bento > *:nth-child(6){grid-column:span 6}
.bento > *:nth-child(1) .card__media{aspect-ratio:21/9}
.bento > *:nth-child(6) .card__media{aspect-ratio:21/7}

/* --- Split feature -------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--reverse > *:first-child{order:2}
.watermark{
  font-family:var(--font-display);font-size:clamp(6rem,15vw,12rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(201,162,39,.34);
  margin-bottom:-.15em;pointer-events:none;user-select:none
}
/* overflow-x clip contains the hover nudge so it can never widen the page */
.steps{display:grid;gap:1rem;overflow-x:clip}
.step{
  display:flex;gap:1.25rem;padding:1.5rem;min-width:0;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:transform var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)
}
.step:hover{transform:translateX(7px);border-color:rgba(201,162,39,.44)}
.step > div{min-width:0}
.step__n{
  font-family:var(--font-display);font-size:1.5rem;color:var(--gilt);line-height:1;flex:none;
  width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--glass-border);
  border-radius:var(--radius)
}
.step h3{font-size:1.125rem;margin-bottom:.3rem}
.step p{font-size:var(--fs-sm);color:var(--text-lo)}

/* --- Materials scroller --------------------------------------------------- */
.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(276px,1fr);gap:1.25rem;
  overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory;scrollbar-width:thin}
.scroller > *{scroll-snap-align:start}
.scroller::-webkit-scrollbar{height:4px}
.scroller::-webkit-scrollbar-thumb{background:var(--gilt);border-radius:2px}
.scroller::-webkit-scrollbar-track{background:rgba(246,242,234,.08)}
.tilt{transform-style:preserve-3d;will-change:transform;
  transition:transform 500ms var(--ease-frame)}
.material{padding:2rem 1.75rem;display:flex;flex-direction:column;gap:.7rem;min-height:100%}
.material__ico{width:38px;height:38px;color:var(--gilt);margin-bottom:.4rem}
.material h3{font-size:1.1875rem}
.material p{font-size:var(--fs-sm);color:var(--text-lo)}

/* --- Masonry gallery ------------------------------------------------------ */
.masonry{columns:3;column-gap:1.25rem}
.masonry > *{break-inside:avoid;margin-bottom:1.25rem;cursor:pointer}
.gallery-filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2.5rem}
.gallery-item.is-hidden{display:none}

/* --- Services page -------------------------------------------------------- */
.svc-block{padding-block:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--border-light);scroll-margin-top:130px}
.svc-block:first-of-type{border-top:0}
.svc-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.svc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem 1.5rem;margin-top:1.75rem}
.svc-list li{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--fs-sm);color:var(--text-dark-lo)}
.svc-list svg{width:15px;height:15px;color:var(--gilt);flex:none;margin-top:.32rem}
.section--dark .svc-list li{color:var(--text-lo)}

/* --- Contact -------------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.hours-table{width:100%;border-collapse:collapse;margin-top:1.25rem;font-size:var(--fs-sm)}
.hours-table th{text-align:left;font-weight:500;padding:.62rem 0;color:var(--text-lo)}
.hours-table td{text-align:right;padding:.62rem 0;color:var(--text-hi);font-variant-numeric:tabular-nums}
.hours-table tr{border-bottom:1px solid rgba(246,242,234,.08)}
.hours-table tr.is-today th,.hours-table tr.is-today td{color:var(--gilt);font-weight:600}
.info-list{display:grid;gap:1.25rem;margin-top:1.75rem}
.info-item{display:flex;gap:1rem;align-items:flex-start}
.info-item svg{width:19px;height:19px;color:var(--gilt);flex:none;margin-top:.22rem}
.info-item strong{display:block;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-lo);margin-bottom:.2rem;font-weight:600}
.info-item a,.info-item span{font-size:1.0625rem}
.map-embed{border:1px solid var(--glass-border);aspect-ratio:16/11;overflow:hidden;margin-top:2rem}
.map-embed iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(.9) contrast(.86)}

/* --- CTA band ------------------------------------------------------------- */
.cta-band{position:relative;overflow:hidden;background:var(--ink-soft)}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 50% 0%,rgba(201,162,39,.13),transparent 62%)
}
.cta-band .wrap{position:relative;z-index:2}

/* --- Thank you / 404 ------------------------------------------------------ */
.centered-page{min-height:76vh;display:grid;place-items:center;text-align:center;padding-block:5rem}
.centered-page p{margin-inline:auto;color:var(--text-lo);margin-top:1.15rem}
.centered-page .btn-row{justify-content:center}

/* --- Legal pages ---------------------------------------------------------- */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.375rem,2.6vw,1.75rem);margin-top:2.75rem;margin-bottom:.85rem}
.prose p,.prose li{color:var(--text-lo);font-size:var(--fs-sm);margin-bottom:.85rem}
.prose ul{list-style:disc;padding-left:1.25rem;margin-bottom:1.25rem}
.prose a{color:var(--gilt);text-decoration:underline;text-underline-offset:3px}