/* ==========================================================================
   EZTiling premium layer — typography, motion and micro-interactions.
   Loaded after site.css. Motion states are gated behind html.js so the site
   stays fully visible without JavaScript.
   ========================================================================== */

:root {
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --ink: #0e100e;
  --ink-2: #161916;
  --paper: #f8f6f1;
  --cream: #efebe2;
  --gold: #cfa65d;
  --gold-light: #e6c98c;
  --gold-dark: #9c7630;
  --green: #1d2b23;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --gold-sheen: linear-gradient(105deg, #b8893c 0%, #e6c98c 38%, #cfa65d 55%, #f1dcae 72%, #b8893c 100%);
}

/* --- Typography ---------------------------------------------------------- */
body { font-family: var(--font-body); font-feature-settings: "ss01", "cv11"; letter-spacing: -.005em; }
h1, h2, .service-row h3, .next-project strong, .portfolio-card-copy h2 {
  font-family: var(--font-display);
  font-weight: 360;
  font-variation-settings: "opsz" 72, "SOFT" 30;
  letter-spacing: -.035em;
}
h1, h2 { line-height: 1; }
h1 em, h2 em { font-style: italic; font-weight: 300; }
h3 { font-weight: 700; letter-spacing: -.01em; }

.hero h1 span, .portfolio-hero h1 span { color: inherit; }
.hero h1 em, .portfolio-hero h1 em {
  color: transparent;
  background: var(--gold-sheen);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sheen 9s ease-in-out infinite;
}
@keyframes sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.kicker, .section-label {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: .7rem; font-weight: 700; letter-spacing: .24em;
}
.kicker::before, .section-label::before {
  content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7;
  transform-origin: left; transition: transform 1s var(--ease-out) .2s;
}
html.js .reveal:not(.is-visible) .kicker::before,
html.js .reveal.kicker:not(.is-visible)::before,
html.js .section-label.reveal:not(.is-visible)::before { transform: scaleX(0); }

::selection { color: var(--ink); background: var(--gold-light); }

/* Film grain for depth */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 9990; pointer-events: none; opacity: .045;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* --- Tile curtain: first-visit loader + page transition ----------------- */
.tile-curtain {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  pointer-events: none; visibility: hidden;
}
.tile-curtain-grid {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr);
}
.tile-curtain-grid span {
  background: var(--ink);
  border-right: 1px solid rgba(207,166,93,.08); border-bottom: 1px solid rgba(207,166,93,.08);
  transform: scale(1.01);
  transition: transform .75s var(--ease-in-out), opacity .75s var(--ease-in-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.tile-curtain-mark { position: relative; z-index: 2; transition: opacity .45s ease, transform .9s var(--ease-out); }
.tile-curtain-mark img { width: 220px; height: auto; }
.tile-curtain-mark::after {
  content: ""; display: block; height: 1px; margin-top: 22px; background: var(--gold);
  transform-origin: left; animation: curtain-load 1.1s var(--ease-in-out) forwards;
}
@keyframes curtain-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }

html.is-covered .tile-curtain,
.tile-curtain.is-active { visibility: visible; pointer-events: auto; }
.tile-curtain.is-leaving .tile-curtain-grid span { transform: scale(0) rotate(8deg); opacity: 0; }
.tile-curtain.is-leaving .tile-curtain-mark { opacity: 0; transform: translateY(-14px) scale(.96); }
.tile-curtain.is-entering .tile-curtain-grid span { transform: scale(0) rotate(-8deg); opacity: 0; transition: none; }
.tile-curtain.is-entering .tile-curtain-mark { opacity: 0; transition: none; }
.tile-curtain.is-entering .tile-curtain-mark::after { animation: none; }
html.is-covered body { overflow: hidden; }

/* --- Scroll progress ------------------------------------------------------ */
.scroll-progress {
  position: fixed; z-index: 1100; inset: 0 0 auto; height: 2px; pointer-events: none;
  background: var(--gold-sheen); transform-origin: left; transform: scaleX(var(--progress, 0));
}

/* --- Custom cursor (fine pointers only) ---------------------------------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.js .cursor {
    position: fixed; z-index: 9995; top: 0; left: 0; display: grid; place-items: center;
    width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
    pointer-events: none; background: var(--gold); mix-blend-mode: normal;
    transform: translate3d(var(--x, -100px), var(--y, -100px), 0);
    transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out), background .3s ease, opacity .3s ease;
  }
  .cursor span {
    color: var(--ink); font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .45s var(--ease-out);
  }
  .cursor.is-link { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgba(207,166,93,.22); }
  .cursor.is-label { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--gold); }
  .cursor.is-label span { opacity: 1; transform: none; }
  .cursor.is-hidden { opacity: 0; }
  [data-cursor-text], [data-cursor-text] * { cursor: none; }
}

/* --- Header -------------------------------------------------------------- */
.site-header { transition: background .5s ease, border-color .5s ease, transform .6s var(--ease-out), height .5s var(--ease-out); }
.site-header.is-scrolled { height: 72px; background: rgba(14,16,14,.78); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); }
.site-header.is-hidden { transform: translateY(-100%); }
body.menu-open .site-header { transform: none; }
.site-nav ul a:not(.nav-quote) { position: relative; letter-spacing: .04em; }
.site-nav ul a:not(.nav-quote)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out);
}
.site-nav ul a:not(.nav-quote):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-quote { display: inline-flex; position: relative; overflow: hidden; isolation: isolate; border-radius: 999px; padding: 12px 22px; transition: color .4s ease, translate .6s var(--ease-out); }
.nav-quote::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white);
  transform: translateY(101%); transition: transform .5s var(--ease-out);
}
.nav-quote:hover::before { transform: none; }

/* --- Buttons ------------------------------------------------------------- */
.button {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 999px;
  padding: 16px 30px; letter-spacing: .03em;
  transition: transform .5s var(--ease-out), translate .6s var(--ease-out), color .4s ease, border-color .4s ease, box-shadow .5s ease;
}
.button::before {
  content: ""; position: absolute; left: 50%; top: 100%; z-index: -1; width: 160%; aspect-ratio: 1;
  border-radius: 50%; background: var(--white); transform: translate(-50%, 0) scale(.2);
  transition: transform .7s var(--ease-out);
}
.button:hover::before { transform: translate(-50%, -50%) scale(1); }
.button:hover { transform: translateY(-2px); }
.button > span { display: inline-block; transition: transform .5s var(--ease-out); }
.button-gold { background: var(--gold-sheen); background-size: 200% 100%; box-shadow: 0 10px 30px -12px rgba(207,166,93,.55); }
.button-gold:hover { color: var(--ink); background-color: transparent; box-shadow: 0 18px 40px -14px rgba(207,166,93,.7); }
.button-ghost::before { background: rgba(255,255,255,.12); }
.button-ghost { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.button-wide { border-radius: 999px; }
[data-magnetic] { will-change: transform; }

/* --- Hero ---------------------------------------------------------------- */
.hero { min-height: max(840px, 100svh); }
.hero-inner { min-height: max(840px, 100svh); }
.hero-media { will-change: transform; transform: scale(1.12); animation: hero-zoom 2.6s var(--ease-out) both; }
@keyframes hero-zoom { from { transform: scale(1.28); filter: brightness(.6); } to { transform: scale(1.12); filter: none; } }
.hero-media.is-parallax { animation: none; }
.hero-shade {
  background:
    radial-gradient(120% 90% at 85% 20%, transparent 0%, rgba(10,12,10,.35) 60%),
    linear-gradient(90deg, rgba(8,10,8,.95) 0%, rgba(8,10,8,.72) 42%, rgba(8,10,8,.18) 78%, rgba(8,10,8,.1) 100%),
    linear-gradient(0deg, rgba(8,10,8,.85) 0%, transparent 34%);
}
.hero h1 { font-size: clamp(4rem, 8.6vw, 9.4rem); line-height: .96; }
.hero-text { font-weight: 400; line-height: 1.65; }
.hero-panel { border-radius: 4px; background: rgba(14,16,14,.42); border-color: rgba(255,255,255,.14); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.hero-panel li { position: relative; padding-left: 18px; }
.hero-panel li::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; background: var(--gold); transform: translateY(-50%) rotate(45deg); }
.hero-panel a span { display: inline-block; transition: transform .5s var(--ease-out); }
.hero-panel a:hover span { transform: translate(4px, -4px); }
.hero-meta span { letter-spacing: .08em; text-transform: uppercase; font-size: .66rem; }

.scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 92px; width: 26px; height: 42px; margin-left: -13px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 20px;
}
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 2px; height: 8px; margin-left: -1px; border-radius: 2px; background: var(--gold); animation: scroll-cue 2s var(--ease-in-out) infinite; }
@keyframes scroll-cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 80%, 100% { transform: translateY(16px); opacity: 0; } }

/* Line-mask headline reveal */
.split-lines .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.split-lines .line > span { display: inline-block; transition: transform 1.3s var(--ease-out); transition-delay: calc(.12s * var(--l, 0) + .15s); }
.split-lines .line:nth-child(2) > span { --l: 1; }
html.js .split-lines:not(.is-visible) .line > span,
html.js .reveal:not(.is-visible) .split-lines .line > span { transform: translateY(105%); }
html.js .hero-copy.reveal:not(.is-visible) { transform: none; opacity: 1; }
html.js .hero-copy .kicker, html.js .hero-copy .hero-text, html.js .hero-copy .hero-actions { transition: opacity 1s ease, transform 1.2s var(--ease-out); }
html.js .hero-copy .hero-text { transition-delay: .55s; }
html.js .hero-copy .hero-actions { transition-delay: .7s; }
html.js .hero-copy:not(.is-visible) .kicker,
html.js .hero-copy:not(.is-visible) .hero-text,
html.js .hero-copy:not(.is-visible) .hero-actions,
html.is-covered .hero-copy .kicker,
html.is-covered .hero-copy .hero-text,
html.is-covered .hero-copy .hero-actions { opacity: 0; transform: translateY(26px); }
html.is-covered .split-lines .line > span { transform: translateY(105%); }
html.is-covered .hero-media, html.is-covered .case-hero > img { animation-play-state: paused; }

/* --- Marquee ------------------------------------------------------------- */
.marquee { overflow: hidden; padding: 30px 0; color: var(--ink); background: var(--gold); border-block: 1px solid rgba(0,0,0,.08); }
.marquee-track { display: flex; align-items: center; gap: 44px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 340; font-style: italic; letter-spacing: -.02em; white-space: nowrap; }
.marquee i { width: 12px; height: 12px; flex: none; border: 1px solid var(--ink); transform: rotate(45deg); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- Reveals ------------------------------------------------------------- */
.reveal { transition: opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out), clip-path 1.4s var(--ease-out); transition-delay: calc(var(--stagger, 0) * 90ms); }
html:not(.js) .reveal { opacity: 1; transform: none; }
html.js .reveal:not(.is-visible) { opacity: 0; transform: translateY(40px); }
html.js .reveal-clip:not(.is-visible) { opacity: 1; transform: none; clip-path: inset(18% 0 0 0); }
.reveal-clip { clip-path: inset(0 0 0 0); }
.reveal-clip img { transition: transform 1.8s var(--ease-out), filter .6s ease; }
html.js .reveal-clip:not(.is-visible) img { transform: scale(1.25); }

/* Children that cascade in when their parent becomes visible */
html.js .reveal [data-cascade] > * { transition: opacity .9s ease, transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms + .2s); }
html.js .reveal:not(.is-visible) [data-cascade] > * { opacity: 0; transform: translateY(18px); }

/* --- Sections ------------------------------------------------------------ */
.section { padding: clamp(96px, 11vw, 160px) 0; }
.intro-copy h2 { font-size: clamp(2.6rem, 4.6vw, 4.8rem); }

.service-row { position: relative; transition: color .4s ease; }
.service-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(207,166,93,.1), rgba(207,166,93,0) 70%);
  transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease-out);
}
.service-list { isolation: isolate; }
.service-row:hover { padding-inline: 0; background: transparent; }
.service-row:hover::before { transform: scaleY(1); }
.service-row h3 { transition: transform .6s var(--ease-out), color .4s ease; }
.service-row:hover h3 { transform: translateX(16px); color: var(--gold-light); }
.service-arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(207,166,93,.4); border-radius: 50%; font-size: 1rem; transition: transform .6s var(--ease-out), translate .6s var(--ease-out), background .4s ease, color .4s ease; }
.service-row:hover .service-arrow { color: var(--ink); background: var(--gold); transform: rotate(45deg); }
.service-row { grid-template-columns: 70px minmax(230px, .65fr) minmax(280px, 1fr) 44px; }

.standards-media img, .finish-card, .portfolio-card, .case-photo, .quote-form { border-radius: 4px; }
.standards-media { overflow: hidden; border-radius: 4px; }
.standards-media:hover img { transform: scale(1.04); }
.standard-items > div, .experience-list > div { transition: padding .5s var(--ease-out), background .4s ease; }
.standard-items > div:hover, .experience-list > div:hover { padding-left: 12px; }

.finish-card img { transition: transform 1.6s var(--ease-out); }
.finish-card:hover img { transform: scale(1.06); }
.finish-card figcaption strong { font-family: var(--font-display); font-weight: 340; font-size: 1.6rem; letter-spacing: -.02em; }
.finish-card figcaption { transition: transform .7s var(--ease-out); }
.finish-card:hover figcaption { transform: translateY(-8px); }

.portfolio-card { overflow: hidden; transition: transform .8s var(--ease-out), box-shadow .8s ease; }
.portfolio-card:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.55); }
.portfolio-card-media img { transition: transform 1.6s var(--ease-out), filter .6s ease; }
.portfolio-card:hover img { transform: scale(1.06); }
.portfolio-card[data-filtering] { animation: card-in .8s var(--ease-out) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(30px) scale(.98); } }

.experience-list span, .standard-items span, .process-grid span, .service-index { font-family: var(--font-display); font-style: italic; font-size: .95rem; font-weight: 400; letter-spacing: 0; }

.process-grid li { position: relative; transition: background .5s ease; }
.process-grid li::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out);
  transition-delay: calc(var(--stagger, 0) * 120ms + .3s);
}
.process-grid li.is-visible::before { transform: scaleX(1); }
.process-grid h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; letter-spacing: -.02em; }

.quote { position: relative; overflow: hidden; background: radial-gradient(90% 120% at 0% 0%, #2a3d31 0%, var(--green) 55%, #142019 100%); }
.quote::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: linear-gradient(rgba(255,255,255,.9) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.9) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(70% 70% at 20% 30%, #000, transparent); mask-image: radial-gradient(70% 70% at 20% 30%, #000, transparent);
}
.quote-grid { position: relative; }
.quote-form { box-shadow: 0 50px 100px -40px rgba(0,0,0,.6); }
.quote-form input, .quote-form select, .quote-form textarea { border-radius: 3px; border-color: rgba(14,16,14,.14); background: #fff; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { box-shadow: 0 0 0 4px rgba(207,166,93,.2); }
.contact-lines a { position: relative; width: fit-content; }
.contact-lines a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); }
.contact-lines a:hover::after { transform: scaleX(1); transform-origin: left; }

.text-link span, .case-back, .next-project b { display: inline-block; transition: transform .5s var(--ease-out); }
.text-link:hover span, .next-project:hover b { transform: translate(5px, -5px); }
.case-back:hover { transform: translateX(-6px); }

.category-card { transition: background .5s var(--ease-out), color .4s ease; }
.category-card strong { font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; font-size: 1.6rem; }

.case-hero > img { will-change: transform; animation: hero-zoom 2.6s var(--ease-out) both; }
.case-hero > img.is-parallax { animation: none; }
.case-photo img { transition: transform 1.6s var(--ease-out), filter .6s ease; }
.case-photo:hover img { transform: scale(1.05); }

.next-project { position: relative; overflow: hidden; isolation: isolate; }
.next-project::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold); transform: translateY(101%); transition: transform .8s var(--ease-out); }
.next-project:hover::before { transform: none; }
.next-project:hover span, .next-project:hover b { color: var(--ink); }
.next-project:hover strong { color: var(--ink); }
.next-project strong, .next-project span { transition: color .5s ease; }

/* Lightbox */
.gallery-dialog[open] { animation: dialog-in .7s var(--ease-out); }
.gallery-dialog[open]::backdrop { animation: backdrop-in .5s ease; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(24px) scale(.96); } }
@keyframes backdrop-in { from { opacity: 0; } }
.gallery-close { border-radius: 50%; transition: transform .5s var(--ease-out), background .3s ease; }
.gallery-close:hover { transform: rotate(90deg); background: var(--gold); color: var(--ink); }

/* Footer */
.footer { position: relative; }
.footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(207,166,93,.6), transparent); }
.footer nav a { position: relative; transition: color .3s ease; }
.footer nav a:hover { color: var(--gold); }

/* Mobile menu */
@media (max-width: 1000px) {
  .site-nav { transform: none; background: var(--ink); clip-path: circle(0% at calc(100% - 46px) 39px); transition: clip-path .9s var(--ease-in-out); }
  .site-nav.is-open { clip-path: circle(150% at calc(100% - 46px) 39px); }
  .site-nav ul li { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .7s var(--ease-out); }
  .site-nav.is-open ul li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 60ms + .35s); }
  .site-nav ul a:not(.nav-quote) { font-family: var(--font-display); font-weight: 340; font-size: 2.2rem; letter-spacing: -.02em; }
  .site-header.is-scrolled { height: 72px; }
  .scroll-cue { display: none; }
  .service-row { grid-template-columns: 70px minmax(200px, .65fr) minmax(220px, 1fr) 44px; }
}
@media (max-width: 680px) {
  .service-row { grid-template-columns: 42px 1fr 36px; }
  .service-arrow { grid-column: 3; grid-row: 1; width: 36px; height: 36px; }
  .service-row:hover h3 { transform: none; }
  .marquee { padding: 20px 0; }
  .tile-curtain-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(8, 1fr); }
  .tile-curtain-mark img { width: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  body::after, .marquee-track, .hero h1 em, .scroll-cue span { animation: none !important; }
  html.js .reveal:not(.is-visible), html.js .reveal-clip:not(.is-visible) { opacity: 1; transform: none; clip-path: none; }
  html.js .split-lines .line > span, html.js .reveal [data-cascade] > *, html.js .hero-copy * { transform: none !important; opacity: 1 !important; }
  .tile-curtain { display: none; }
  html.is-covered body { overflow: auto; }
  .cursor { display: none !important; }
}