/* =============================================================
   ALTIN — shared stylesheet
   Layout & motion language from DESIGN.md (editorial luxury):
   flat surfaces, near-zero radius, oversized light display type.
   Brand palette is Altin's own (see assets/logo): forest green
   + warm gold. Duality rule — GREEN is the accent on light
   surfaces, GOLD is the accent on dark surfaces. This mirrors the
   logo (gold + green on near-black) and keeps both colours legible.
   Display face: self-hosted "Lemon Milk" (all-caps geometric, assets/fonts),
   with Archivo as the web fallback. Body/UI: Red Hat Display.
   ============================================================= */

@font-face {
  font-family: "Lemon Milk";
  src: url("../fonts/LEMONMILK-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lemon Milk";
  src: url("../fonts/LEMONMILK-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand palette (Altin: forest green + warm gold) ---- */
  --brand-green:          #325535;          /* primary green */
  --brand-green-deep:     #1C3320;          /* deep green — dark canvas + ink */
  --brand-green-darker:   #0B110C;          /* near-black green — footer / preloader (hosts the logo) */
  --brand-gold:           #E0B55C;          /* warm gold — accent on dark surfaces */
  --brand-gold-rgb:       224, 181, 92;

  --color-primary:        #325535;
  --color-primary-dark:   #1C3320;          /* ink on light + dark section surface */
  --color-primary-light:  #E7ECE4;          /* faint green-tinted light surface */
  --color-accent:         #325535;          /* DEFAULT accent = green (light surfaces) */
  --color-accent-rgb:     50, 85, 53;       /* flipped to gold inside dark contexts (below) */
  --color-bg:             #F5F4EF;          /* warm off-white */
  --color-bg-dark:        #1C3320;          /* deep green section background */
  --color-bg-light:       #FFFFFF;
  --color-black:          #0B110C;
  --color-white:          #FFFFFF;
  --color-contrast:       #6C7065;          /* warm green-grey muted text */
  --color-contrast-light: #D9DCD1;          /* hairlines */
  --color-error:          #B23A2C;

  /* ---- Type ---- */
  --font-display: "Lemon Milk", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-ui:      "Red Hat Display", Arial, Helvetica, sans-serif;

  --text-xxs: .625rem;  --text-xs: .75rem;   --text-sm: .875rem;
  --text-base: 1rem;    --text-lg: 1.125rem; --text-xl: 1.25rem;
  --text-1xl: 1.5625rem;--text-2xl: 1.75rem; --text-3xl: 2.125rem;
  --text-4xl: 2.5rem;   --text-5xl: 3.375rem;--text-6xl: 5.625rem;

  --leading-none: 1;    --leading-xtight: 1.1; --leading-tight: 1.25;
  --leading-snug: 1.3;  --leading-normal: 1.5; --leading-relaxed: 1.6;

  /* ---- Layout ---- */
  --gutter: 4vw;
  --maxw: 1480px;
  --z-header: 10; --z-menu: 20; --z-popin: 30; --z-preloader: 40;

  /* ---- Motion ---- */
  --ease-quart-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-quart-out:    cubic-bezier(.165, .84, .44, 1);
  --ease-expo-out:     cubic-bezier(.19, 1, .22, 1);
  --dur: .8s;

  /* ---- Fallback art (used when a hotlinked photo fails to load) ---- */
  --grain: 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---- Brand duality: gold becomes the accent on every dark surface ----
   These contexts paint white text on deep green / near-black, so the
   accent variable is re-pointed to gold and every var(--color-accent)
   usage below (eyebrows, rules, markers, hovers, gradients) follows. */
.site-header,
.hero,
.section--dark,
.contact-band,
.choose,
.preloader,
.studio-stage,
.ob,
.site-footer {
  --color-accent: var(--brand-gold);
  --color-accent-rgb: var(--brand-gold-rgb);
}

/* ---- Brand logo (assets/logo/Image.png) ----
   The artwork sits on its own near-black backdrop, so it is only ever
   placed on near-black surfaces (preloader, footer) where that backdrop
   blends away and the gold + green mark reads cleanly. */
.brand-logo { display: block; width: auto; height: auto; }
.brand-logo--preloader { width: min(72vw, 360px); }
.brand-logo--footer { width: clamp(150px, 15vw, 184px); margin: -0.6rem 0 0.6rem -0.4rem; }
/* Header lockup. Uses the chroma-keyed transparent mark (logo-mark.png) so it
   reads cleanly over the photo hero and the solid deep-green scrolled header. */
.site-logo { display: inline-flex; align-items: center; }
.brand-logo--header { height: clamp(20px, 1.5vw, 50px); width: auto; }

/* ============================ Reset / base ============================ */
*, *::before, *::after { box-sizing: border-box; }
* { transition-timing-function: var(--ease-quart-in-out); }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-primary-dark);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: rgba(50, 85, 53, .95); color: #fff; }

/* ============================ Typography ============================ */
.display {
  font-family: var(--font-display);
  font-weight: 400;              /* Lemon Milk Regular */
  line-height: var(--leading-none);
  letter-spacing: 0;
  margin: 0;
}
.display--hero { font-size: clamp(2.75rem, 7vw, 5.625rem); }
.display--xl   { font-size: clamp(2.25rem, 5.2vw, 3.375rem); }
.display--lg   { font-size: clamp(1.9rem, 4vw, 2.5rem); }

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-accent);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--color-accent);
  display: inline-block;
}
.eyebrow--plain::before { display: none; }

.lead { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--color-contrast); font-weight: 300; }
p { font-weight: 300; line-height: var(--leading-normal); }

/* ============================ Layout ============================ */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4.5rem, 9vw, 9rem); position: relative; }
.section--dark { background: var(--color-bg-dark); color: var(--color-white); }
.section--dark .lead { color: rgba(255,255,255,.62); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.rule { height: 1px; background: var(--color-contrast-light); border: 0; margin: 0; }
.section--dark .rule { background: rgba(255,255,255,.16); }

/* ============================ Text link (.a-B) ============================ */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: inherit;
  padding-bottom: .35rem;
  position: relative;
  width: fit-content;
}
.text-link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-quart-in-out);
}
.text-link .arw { transition: transform var(--dur) var(--ease-quart-in-out); }
.text-link:hover { color: var(--color-accent); }
.text-link:hover::after { transform: scaleX(0); transform-origin: right; }
.text-link:hover .arw { transform: translateX(6px); }

/* ============================ Circular icon button ============================ */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-contrast-light);
  border-radius: 100%;
  color: var(--color-primary-dark);
  transition: background var(--dur) var(--ease-quart-in-out),
              color var(--dur) var(--ease-quart-in-out),
              border-color var(--dur) var(--ease-quart-in-out);
}
.icon-btn:hover { background: var(--color-primary-dark); color: #fff; border-color: var(--color-primary-dark); }
.icon-btn svg { width: 18px; height: 18px; }

/* ============================ Media + fallback art ============================ */
.media {
  position: relative;
  overflow: hidden;
  background: var(--color-primary-dark);
  isolation: isolate;
}
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: relative; z-index: 1;
}
/* Parallax targets: the photo AND its fallback gradient share a --py offset
   plus a scale overscan, so motion shows whether or not the photo loads. */
.media[data-parallax] img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.media[data-parallax] img,
.media[data-parallax]::before {
  transform: translate3d(0, calc(var(--py, 0) * 1%), 0) scale(1.4);
  will-change: transform;
}
.media.is-failed img { display: none; }
.media::before { /* gradient base */
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(var(--color-accent-rgb), .28), transparent 55%),
    linear-gradient(155deg, #2B4A30 0%, var(--color-primary-dark) 48%, #0B110C 100%);
}
.media::after { /* grain + hairline */
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: .35; mix-blend-mode: overlay;
}
.media--garden::before    { background:
  radial-gradient(110% 80% at 80% 20%, rgba(64,120,72,.45), transparent 60%),
  linear-gradient(160deg, #17331f 0%, #11261A 55%, #0B110C 100%); }
.media--stone::before     { background:
  radial-gradient(120% 90% at 15% 85%, rgba(var(--color-accent-rgb), .22), transparent 55%),
  linear-gradient(155deg, #3a3531 0%, #1C2A1F 55%, #0B110C 100%); }
.media--backyard::before  { background:
  radial-gradient(120% 90% at 70% 10%, rgba(96,140,96,.34), transparent 55%),
  linear-gradient(155deg, #1f2a2a 0%, #14271A 55%, #0B110C 100%); }
.media--water::before     { background:
  radial-gradient(120% 90% at 25% 20%, rgba(70,120,96,.4), transparent 55%),
  linear-gradient(155deg, #16332B 0%, #102A1F 55%, #0B110C 100%); }
.media--construction::before { background:
  radial-gradient(120% 90% at 80% 80%, rgba(var(--color-accent-rgb), .34), transparent 55%),
  linear-gradient(155deg, #2a2620 0%, #1A2A1D 55%, #0B110C 100%); }

/* ============================ Header ============================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem var(--gutter);
  color: #fff;
  transition: background var(--dur) var(--ease-quart-in-out),
              color var(--dur) var(--ease-quart-in-out),
              padding var(--dur) var(--ease-quart-in-out),
              border-color var(--dur) var(--ease-quart-in-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: rgba(28,51,32,.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: rgba(255,255,255,.1);
  padding-block: 0.7rem;
}
/* Pages with no dark hero (the gallery pages) keep a solid header at all
   times so the white nav text stays legible over the light background.
   main.js still toggles .is-solid on scroll; this just guarantees a
   backdrop when at the top. */
.site-header--solid {
  background: rgba(28,51,32,.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: rgba(255,255,255,.1);
}
.wordmark {
  font-family: var(--font-ui);
  font-weight: 700; font-size: var(--text-sm);
  letter-spacing: .22em; text-transform: uppercase;
  display: inline-flex; align-items: baseline; gap: .55em;
}
.wordmark b { color: var(--color-accent); font-weight: 700; }
.wordmark .line { font-weight: 300; color: rgba(255,255,255,.7); letter-spacing: .18em; }

.nav { display: flex; align-items: center; gap: 2.2rem; }
.nav a {
  font-family: var(--font-ui);
  font-weight: 500; font-size: var(--text-sm);
  letter-spacing: .04em; color: rgba(255,255,255,.82);
  position: relative; padding-block: .3rem;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-quart-in-out);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { transform: scaleX(1); }
.nav a.is-active { color: #fff; }
.nav a.is-active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 1.2rem; }
.header-actions .icon-btn { width: 42px; height: 42px; background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.header-actions .icon-btn:hover { background: #fff; color: var(--color-primary-dark); }
.cta-quote {
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: .12em; color: #fff;
  display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid rgba(255,255,255,.34); padding: .7rem 1.2rem;
  transition: background var(--dur) var(--ease-quart-in-out), color var(--dur) var(--ease-quart-in-out), border-color var(--dur) var(--ease-quart-in-out);
}
.cta-quote:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--brand-green-deep); }

.menu-toggle { display: none; width: 42px; height: 42px; background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: 100%; align-items: center; justify-content: center; }
.menu-toggle span { display: block; width: 16px; height: 1px; background: #fff; position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: #fff; }
.menu-toggle span::before { top: -5px; } .menu-toggle span::after { top: 5px; }

/* ============================ Hero (landing) ============================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; }
.hero .media { position: absolute; inset: 0; z-index: 0; }
.hero .media img { will-change: transform; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(28,51,32,.55) 0%, rgba(28,51,32,.2) 40%, rgba(28,51,32,.82) 100%); }
.hero .container { position: relative; z-index: 2; padding-bottom: clamp(3.5rem, 8vh, 7rem); padding-top: 8rem; }
.hero .eyebrow { color: #fff; }
.hero .eyebrow::before { background: var(--color-accent); }
.hero .display--hero { max-width: 16ch; margin-top: 1.6rem; }
.hero .hero-sub { max-width: 46ch; margin: 1.8rem 0 2.4rem; color: rgba(255,255,255,.78); font-size: var(--text-xl); line-height: var(--leading-normal); }
.scroll-cue { position: absolute; bottom: 1.6rem; right: var(--gutter); z-index: 2; display: flex; align-items: center; gap: .7rem; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .18em; color: rgba(255,255,255,.6); }
.scroll-cue .bar { width: 1px; height: 46px; background: rgba(255,255,255,.4); position: relative; overflow: hidden; }
.scroll-cue .bar::after { content: ""; position: absolute; inset: 0; background: var(--color-accent); transform: translateY(-100%); animation: cue 2.4s var(--ease-quart-in-out) infinite; }
@keyframes cue { 0% { transform: translateY(-100%);} 50%{ transform: translateY(0);} 100%{ transform: translateY(100%);} }

/* ============================ Feature rows ============================ */
.feature { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.feature + .feature { margin-top: clamp(4rem, 8vw, 7rem); }
.feature .feature-media { grid-column: 1 / 7; }
.feature .feature-body { grid-column: 8 / 13; }
.feature--reverse .feature-media { grid-column: 7 / 13; order: 2; }
.feature--reverse .feature-body { grid-column: 1 / 6; order: 1; }
.feature-media { aspect-ratio: 4 / 3; }
.feature-body .display { margin: 1.2rem 0 1.4rem; }
.feature-list { list-style: none; margin: 1.6rem 0 2rem; padding: 0; display: grid; gap: 0; }
.feature-list li { display: flex; gap: 1rem; align-items: baseline; padding: .9rem 0; border-top: 1px solid var(--color-contrast-light); font-size: var(--text-lg); font-weight: 300; }
.feature-list li:last-child { border-bottom: 1px solid var(--color-contrast-light); }
.section--dark .feature-list li { border-color: rgba(255,255,255,.16); }
.feature-list li::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; margin-top: .55em; background: var(--color-accent); }

/* ============================ Intro / statement ============================ */
.statement { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.statement .eyebrow { grid-column: 1 / 4; }
.statement .statement-body { grid-column: 4 / 12; }
.statement-body .display { margin: 0 0 1.6rem; }

/* ============================ Marquee strip ============================ */
.strip { border-block: 1px solid var(--color-contrast-light); overflow: hidden; }
/* Seamless marquee: the track holds two identical copies of the list and
   slides exactly one copy width (-50%) then loops. Spacing lives on each
   item's margin (not a flex `gap`) so the two halves are byte-for-byte equal
   in width — otherwise the trailing gap makes -50% land short and visibly jump. */
.strip-track { display: flex; width: max-content; white-space: nowrap; padding-block: 1.4rem; animation: marquee 34s linear infinite; will-change: transform; }
.strip-track span { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-contrast); display: inline-flex; align-items: center; gap: 3.5rem; margin-right: 3.5rem; flex: 0 0 auto; }
.strip-track span::after { content: "✦"; color: var(--color-accent); font-size: 1rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.strip:hover .strip-track { animation-play-state: paused; }

/* ============================ Quote / contact band ============================ */
.contact-band { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: end; }
.contact-band .cb-head { grid-column: 1 / 7; }
.contact-band .cb-actions { grid-column: 7 / 13; display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.contact-line { font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.375rem); color: #fff; }
.contact-line a:hover { color: var(--color-accent); }

/* ============================ Official partners ============================ */
.partners-head { text-align: center; max-width: 48rem; margin: 0 auto; }
.partners-grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(2rem, 5vw, 4.5rem) clamp(2.5rem, 6vw, 5.5rem);
}
.partner-logo { display: inline-flex; align-items: center; justify-content: center; }
.partner-logo img {
  max-height: 52px; max-width: 170px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: .55;
  transition: filter var(--dur) var(--ease-quart-in-out),
              opacity var(--dur) var(--ease-quart-in-out),
              transform var(--dur) var(--ease-quart-in-out);
}
.partner-logo:hover img { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }

/* ============================ Footer ============================ */
.site-footer { background: #0B110C; color: rgba(255,255,255,.7); padding-block: clamp(3rem, 6vw, 5rem); }
.footer-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; align-items: start; }
.footer-grid .fcol-brand { grid-column: 1 / 5; }
.footer-grid .fcol-nav { grid-column: 6 / 9; }
.footer-grid .fcol-contact { grid-column: 9 / 13; }
.site-footer .wordmark { color: #fff; margin-bottom: 1rem; }
.footer-grid h4 { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.5); margin: 0 0 1.2rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: var(--text-xs); color: rgba(255,255,255,.45); letter-spacing: .04em; }

/* =============================================================
   INTRO / WELCOME PRELOADER
   ============================================================= */
.no-scroll { overflow: hidden; height: 100svh; }

.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--brand-green-darker);
  display: flex; align-items: center; justify-content: center;
  /* JS controls exit; this is a safety auto-dismiss if JS never runs/fails */
  animation: preloaderSafety .6s var(--ease-quart-in-out) 6s forwards;
}
.preloader.is-done { pointer-events: none; }
@keyframes preloaderSafety { to { opacity: 0; visibility: hidden; } }

.preloader-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; padding: 2rem; }
.preloader-brand {
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: .3em; text-transform: uppercase;
  color: #fff; display: inline-flex; gap: .4em; align-items: baseline;
}
.preloader-brand b { color: var(--color-accent); }
.preloader-brand em { font-style: normal; font-weight: 300; letter-spacing: .22em; color: rgba(255,255,255,.55); font-size: .6em; }
.preloader-line { width: min(46vw, 360px); height: 1px; background: rgba(255,255,255,.18); position: relative; overflow: hidden; }
.preloader-line i { display: block; width: 100%; height: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left; }
.preloader-count { font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: .2em; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }
/* Two-panel wipe layers used by the JS exit animation */
.preloader-veil { position: fixed; inset: 0; z-index: 9998; pointer-events: none; }

/* =============================================================
   CUSTOM CURSOR (desktop / fine-pointer only; enabled by JS)
   ============================================================= */
.cursor, .cursor-dot { position: fixed; top: 0; left: 0; z-index: 5000; pointer-events: none; border-radius: 50%; opacity: 0; mix-blend-mode: difference; }
.cursor { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid #fff; transition: width .4s var(--ease-quart-out), height .4s var(--ease-quart-out), margin .4s var(--ease-quart-out), opacity .4s, background-color .4s; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.cursor-on .cursor, .cursor-on .cursor-dot { opacity: 1; }
.cursor.is-hover { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: rgba(255,255,255,.12); }
body.cursor-on { cursor: none; }
body.cursor-on a, body.cursor-on button { cursor: none; }

/* =============================================================
   GALLERY — filterable project grid + lightbox
   ============================================================= */
.gallery-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem,4vw,3rem); align-items: end; margin-bottom: clamp(2rem,4vw,3.2rem); }
.gallery-head .gh-text { grid-column: 1 / 8; }
.gallery-head .display { margin: 1.2rem 0 0; }
.gallery-filters { grid-column: 8 / 13; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-start; }
@media (min-width: 901px) { .gallery-filters { justify-content: flex-end; } }
.filter-chip {
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .1em; color: var(--color-contrast);
  background: transparent; border: 1px solid var(--color-contrast-light);
  border-radius: 100px; padding: .55rem 1.05rem;
  transition: color var(--dur) var(--ease-quart-in-out), border-color var(--dur) var(--ease-quart-in-out), background var(--dur) var(--ease-quart-in-out);
}
.filter-chip:hover { color: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.filter-chip.is-active { color: #fff; background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 11vw; gap: 14px; grid-auto-flow: dense;
}
.g-item {
  position: relative; overflow: hidden; display: block;
  grid-column: span 1; grid-row: span 2; color: #fff;
  transition: opacity .5s var(--ease-quart-in-out), transform .5s var(--ease-quart-in-out);
}
.g-item--tall { grid-row: span 3; }
.g-item--wide { grid-column: span 2; }
.g-item .media { position: absolute; inset: 0; }
.g-item .media img { transition: transform 1.1s var(--ease-quart-out); }
.g-item::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(28,51,32,0) 40%, rgba(28,51,32,.72)); opacity: .85; transition: opacity var(--dur) var(--ease-quart-in-out); }
.g-item:hover .media img { transform: scale(1.07); }
.g-item:hover::after { opacity: 1; }
.g-cap { position: absolute; left: 0; bottom: 0; z-index: 3; padding: 1.1rem 1.2rem; transform: translateY(8px); opacity: 0; transition: opacity var(--dur) var(--ease-quart-out), transform var(--dur) var(--ease-quart-out); }
.g-item:hover .g-cap { opacity: 1; transform: none; }
.g-cap .g-cat { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xxs); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-gold); }
.g-cap .g-title { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; margin-top: .25rem; display: block; }
.g-view { position: absolute; top: 1rem; right: 1rem; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.8); transition: opacity var(--dur) var(--ease-quart-out), transform var(--dur) var(--ease-quart-out), background var(--dur), color var(--dur); }
.g-item:hover .g-view { opacity: 1; transform: none; }
.g-view svg { width: 16px; height: 16px; }
.g-item.is-hidden { display: none; }

@media (max-width: 900px) {
  .gallery-head .gh-text, .gallery-head .gallery-filters { grid-column: 1 / -1; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 30vw; gap: 10px; }
  .g-item--wide { grid-column: span 2; }
  .g-item--tall { grid-row: span 2; }
}

/* =============================================================
   Reduced-motion: disable preloader animation, cursor, parallax drift
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .preloader { animation: none; }
  .cursor, .cursor-dot { display: none; }
  body.cursor-on { cursor: auto; }
  .media[data-parallax] img { position: absolute; inset: 0; }
  .media[data-parallax] img,
  .media[data-parallax]::before { transform: none; }
}

/* ============================ Reveal on scroll ============================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease-quart-out), transform 1s var(--ease-quart-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; scroll-behavior: auto; }
}

/* =============================================================
   SELECTION PAGE — split-screen line-of-work chooser
   ============================================================= */
.choose { height: 100svh; min-height: 600px; overflow: hidden; background: var(--color-primary-dark); }
.choose-brand {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-menu);
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: 1.6rem var(--gutter); pointer-events: none;
}
.choose-brand .wordmark { font-size: var(--text-base); letter-spacing: .3em; color: #fff; }
.choose-tagline { position: fixed; bottom: 1.6rem; left: 0; right: 0; z-index: var(--z-menu); text-align: center; color: rgba(255,255,255,.5); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .2em; pointer-events: none; }

.panels { display: flex; height: 100%; width: 100%; }
.panel {
  position: relative; flex: 1 1 50%; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: #fff; text-align: center;
  transition: flex var(--dur) var(--ease-quart-in-out);
}
.panel .media { position: absolute; inset: 0; z-index: 0; }
.panel .media img { transform: scale(1.08); transition: transform 1.6s var(--ease-quart-out); }
.panel::after { /* darkening veil */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(28,51,32,.5), rgba(28,51,32,.78));
  transition: background var(--dur) var(--ease-quart-in-out);
}
.panel-divider { width: 1px; background: rgba(255,255,255,.16); position: relative; z-index: 3; flex: 0 0 1px; }
.panel-divider::after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 90px; background: var(--color-accent); }

.panel-inner { position: relative; z-index: 2; padding: 2rem; max-width: 30ch; transform: translateY(0); transition: transform var(--dur) var(--ease-quart-in-out); }
.panel-index { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs); letter-spacing: .3em; color: rgba(255,255,255,.6); }
.panel .eyebrow { color: var(--color-accent); justify-content: center; margin-top: 1rem; }
.panel-title { font-family: var(--font-display); font-weight: 400; line-height: var(--leading-none); font-size: clamp(2.6rem, 5.5vw, 4.6rem); margin: 1rem 0 1.2rem; letter-spacing: 0; }
.panel-desc { color: rgba(255,255,255,.74); font-weight: 300; font-size: var(--text-base); line-height: var(--leading-normal); max-width: 34ch; margin: 0 auto 2rem; opacity: 0; transform: translateY(12px); transition: opacity var(--dur) var(--ease-quart-out), transform var(--dur) var(--ease-quart-out); }
.panel-enter { opacity: 0; transform: translateY(12px); transition: opacity var(--dur) var(--ease-quart-out) .05s, transform var(--dur) var(--ease-quart-out) .05s; }
.panel-enter .text-link { color: #fff; }

/* hover / focus interaction (desktop) */
@media (hover: hover) and (min-width: 901px) {
  .panels:hover .panel { flex-grow: .72; }
  .panels .panel:hover { flex-grow: 1.9; }
  .panel:hover::after { background: linear-gradient(180deg, rgba(28,51,32,.28), rgba(28,51,32,.62)); }
  .panel:hover .media img { transform: scale(1); }
  .panel:hover .panel-desc, .panel:hover .panel-enter { opacity: 1; transform: none; }
}

/* Construction = coming soon */
.panel--soon { cursor: default; }
.panel--soon .panel-title { color: rgba(255,255,255,.92); }
.soon-tag { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .16em; color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 100px; padding: .5rem 1rem; }

@media (max-width: 900px) {
  .choose { height: auto; min-height: 100svh; }
  .panels { flex-direction: column; height: auto; }
  .panel { flex: 1 1 50svh; min-height: 56svh; }
  .panel-divider { width: 100%; height: 1px; flex-basis: 1px; }
  .panel-divider::after { left: 50%; top: 0; transform: translateX(-50%); width: 90px; height: 1px; }
  .panel-desc, .panel-enter { opacity: 1; transform: none; }
}

/* ============================ Responsive ============================ */
@media (max-width: 900px) {
  .nav, .header-actions .cta-quote { display: none; }
  .menu-toggle { display: inline-flex; }
  .feature .feature-media, .feature .feature-body,
  .feature--reverse .feature-media, .feature--reverse .feature-body { grid-column: 1 / -1; order: initial; }
  .statement .eyebrow, .statement .statement-body { grid-column: 1 / -1; }
  .contact-band .cb-head, .contact-band .cb-actions { grid-column: 1 / -1; }
  .footer-grid .fcol-brand, .footer-grid .fcol-nav, .footer-grid .fcol-contact { grid-column: 1 / -1; }
  .footer-grid { gap: 2.4rem; }

  /* Mobile nav overlay */
  .nav.is-open {
    display: flex; position: fixed; inset: 0; z-index: var(--z-menu);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1.6rem; padding: 2rem var(--gutter);
    background: var(--color-primary-dark);
  }
  .nav.is-open a { font-family: var(--font-display); font-size: var(--text-3xl); color: #fff; }
}

/* =============================================================
   AI DESIGN STUDIO — interactive before/after preview
   Dark feature section, single vermilion accent, flat surfaces.
   Same image on both layers: "before" is desaturated/dimmed to
   read as the uploaded photo; "after" is the vivid AI-rendered
   finish, recolored live by the interlock chooser (--tint).
   ============================================================= */
.ai-studio { overflow: hidden; }

/* ---- header: headline left, supporting lead right ---- */
.ai-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: end; margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem); }
.ai-head .ai-head-text { grid-column: 1 / 8; }
.ai-head .display { margin-top: 1.2rem; max-width: 20ch; }
.ai-head .ai-head-lead { grid-column: 8 / 13; margin: 0; }
.ai-spark { color: var(--color-accent); display: inline-flex; }
.ai-spark svg { width: 16px; height: 16px; animation: aiSpark 2.6s var(--ease-quart-in-out) infinite; }
@keyframes aiSpark { 0%, 100% { transform: scale(.84); opacity: .65; } 50% { transform: scale(1.14); opacity: 1; } }

/* ---- before / after compare frame ---- */
.ba { position: relative; --pos: 55%; }
.ba-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-primary-dark); }
.ba-layer { position: absolute; inset: 0; }
.ba-layer img { width: 100%; height: 100%; object-fit: cover; }
.ba-layer--after img { filter: saturate(1.08) contrast(1.03); }
.ba-tint { position: absolute; inset: 0; background: var(--tint, transparent); mix-blend-mode: multiply; opacity: .3; transition: background .6s var(--ease-quart-out); }
/* "before" clipped to the divider position; treated to look raw/unfinished */
.ba-layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-layer--before img { filter: grayscale(.62) brightness(.8) contrast(.92) saturate(.7); }
.ba-layer--before::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: overlay; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* moving "AI render" scan sweep */
.ba-scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 44%, rgba(var(--color-accent-rgb),0) 47%, rgba(var(--color-accent-rgb),.32) 50%, rgba(var(--color-accent-rgb),0) 53%, transparent 56%);
  background-size: 260% 100%; background-repeat: no-repeat;
  animation: aiScan 4.2s linear infinite;
}
@keyframes aiScan { 0% { background-position: 128% 0; } 100% { background-position: -28% 0; } }

/* corner tags */
.ba-tag {
  position: absolute; top: 1rem; z-index: 3;
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xxs);
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  padding: .4rem .7rem; background: rgba(28,51,32,.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ba-tag--before { left: 1rem; }
.ba-tag--after { right: 1rem; color: var(--color-accent); }

/* divider + draggable handle */
.ba-divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; transform: translateX(-1px); z-index: 3; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(28,51,32,.22); pointer-events: none; }
.ba-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; background: var(--color-accent); color: var(--brand-green-deep); display: flex; align-items: center; justify-content: center; }
.ba-handle svg { width: 20px; height: 20px; }
.ba-handle::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(var(--color-accent-rgb),.7); animation: aiPulse 2.4s var(--ease-quart-in-out) infinite; }
.ba.is-touched .ba-handle::after { animation: none; opacity: 0; }
@keyframes aiPulse { 0% { transform: scale(.78); opacity: .85; } 70% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }

/* transparent range input drives --pos (keyboard + screen-reader accessible) */
.ba-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 100%; cursor: ew-resize; }
.ba-range::-moz-range-thumb { width: 48px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.ba-frame:focus-within .ba-handle { box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb),.45); }

/* ---- image + chooser side-by-side ---- */
.ai-split {
  display: grid;
  grid-template-columns: 70fr 30fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

/* ---- interlock chooser ---- */
.ai-ink { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: clamp(1.4rem, 3vw, 2rem); }
.ai-split .ai-ink {
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
  gap: 1.4rem;
  padding-left: clamp(1rem, 2vw, 1.8rem);
  border-left: 1px solid rgba(255,255,255,.12);
}
.ai-ink-label { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.6); }
.ink-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.ink-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.82);
  background: transparent; border: 1px solid rgba(255,255,255,.22); border-radius: 100px; padding: .5rem .95rem;
  transition: color var(--dur) var(--ease-quart-in-out), border-color var(--dur) var(--ease-quart-in-out), background var(--dur) var(--ease-quart-in-out);
}
.ink-chip .sw { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.ink-chip:hover { color: #fff; border-color: rgba(255,255,255,.6); }
.ink-chip.is-active { color: var(--color-primary-dark); background: #fff; border-color: #fff; }
.ai-ink-selected { font-size: var(--text-sm); color: rgba(255,255,255,.55); }
.ai-ink-selected strong { color: #fff; font-weight: 700; }

/* ---- 3-step flow ---- */
.ai-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.ai-step { position: relative; border-top: 1px solid rgba(255,255,255,.16); padding-top: 1.5rem; }
.ai-step-ic { display: inline-flex; color: var(--color-accent); margin-bottom: 1rem; }
.ai-step-ic svg { width: 26px; height: 26px; }
.ai-step-n { position: absolute; top: 1.3rem; right: 0; font-family: var(--font-display); font-size: var(--text-xl); color: rgba(255,255,255,.32); }
.ai-step h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: var(--leading-none); margin: 0 0 .5rem; color: #fff; }
.ai-step p { margin: 0; color: rgba(255,255,255,.6); font-size: var(--text-base); line-height: var(--leading-normal); }

/* ---- closing CTA ---- */
.ai-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: clamp(2.2rem, 4.5vw, 3.2rem); }
.ai-cta-note { font-size: var(--text-sm); color: rgba(255,255,255,.5); }

@media (max-width: 900px) {
  .ai-head .ai-head-text, .ai-head .ai-head-lead { grid-column: 1 / -1; }
  .ai-head { align-items: start; }
  .ai-head .display { max-width: none; }
  .ba-frame { aspect-ratio: 4 / 3; }
  .ai-split { grid-template-columns: 1fr; }
  .ai-split .ai-ink { flex-direction: row; flex-wrap: wrap; padding-left: 0; border-left: none; margin-top: clamp(1.4rem, 3vw, 2rem); gap: .9rem; }
  .ink-chips { width: 100%; }
  .ai-steps { grid-template-columns: 1fr; gap: 0; }
  .ai-step { padding-block: 1.4rem; }
  .ai-step-n { top: 1.2rem; }
}
@media (max-width: 560px) {
  .ai-head .display { font-size: clamp(1.65rem, 7.4vw, 2.1rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ba-scan { display: none; }
  .ba-handle::after, .ai-spark svg { animation: none; }
}

/* =============================================================
   SERVICES CAROUSEL — horizontal card track (landscaping.html)
   Light surface, green accent (brand duality). Native scroll-snap
   + drag, arrow controls, edge-fade mask hinting more cards.
   ============================================================= */
.svc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.svc-head .display { margin: 1.2rem 0 0; max-width: 18ch; }
.svc-nav { display: flex; gap: .6rem; flex-shrink: 0; }
.svc-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 100%;
  background: transparent; border: 1px solid var(--color-contrast-light);
  color: var(--color-primary-dark);
  transition: background var(--dur) var(--ease-quart-in-out),
              color var(--dur) var(--ease-quart-in-out),
              border-color var(--dur) var(--ease-quart-in-out),
              opacity var(--dur) var(--ease-quart-in-out);
}
.svc-arrow:hover { background: var(--color-primary-dark); color: #fff; border-color: var(--color-primary-dark); }
.svc-arrow svg { width: 20px; height: 20px; }
.svc-arrow[disabled] { opacity: .25; pointer-events: none; }

.svc-viewport {
  position: relative;
  /* Fades apply only on a side that has off-screen cards (toggled in JS),
     so the first/last card is never clipped at rest. */
  --fade-l: 0px; --fade-r: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.svc-track {
  display: flex; gap: clamp(1rem, 2vw, 1.6rem);
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.svc-track::-webkit-scrollbar { display: none; }
.svc-track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }

.svc-card { flex: 0 0 auto; width: clamp(15rem, 30vw, 22rem); scroll-snap-align: start; }
.svc-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.svc-card-media { display: block; aspect-ratio: 4 / 3; }
.svc-card-media img { transition: transform 1.1s var(--ease-quart-out); }
.svc-card-link:hover .svc-card-media img { transform: scale(1.06); }
.svc-card-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 0 0; }
.svc-card-title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: var(--leading-xtight); }
.svc-card-desc { font-size: var(--text-sm); color: var(--color-contrast); line-height: var(--leading-normal); }
.svc-card-cta {
  margin-top: .35rem; font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .12em; color: var(--color-accent);
  display: inline-flex; align-items: center; gap: .5rem;
}
.svc-card-cta .arw { transition: transform var(--dur) var(--ease-quart-in-out); }
.svc-card-link:hover .svc-card-cta .arw { transform: translateX(6px); }
.svc-foot { margin-top: clamp(2rem, 4vw, 3rem); }

@media (max-width: 900px) {
  .svc-head { flex-direction: column; align-items: flex-start; }
  .svc-head .display { max-width: none; }
  .svc-card { width: clamp(14rem, 80vw, 20rem); }
}

/* Gallery teaser → full gallery CTA (landscaping.html) */
.gallery-more { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: flex; flex-direction: column; gap: .6rem; align-items: center; text-align: center; }
.gallery-more-note { font-size: var(--text-sm); color: var(--color-contrast); }

/* =============================================================
   GALLERY PAGE — dedicated, manifest-driven grid + modal (gallery.html)
   ============================================================= */
.gpage-head { max-width: 60rem; }
.gpage-head .display { margin: 1.1rem 0 0; }
.gpage-head .lead { margin-top: 1.2rem; }
.gpage-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin: clamp(1.8rem, 4vw, 2.6rem) 0 clamp(2rem, 4vw, 3rem); }

.gpage-grid { display: grid; gap: clamp(12px, 1.4vw, 18px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.gcard {
  position: relative; overflow: hidden; display: block; width: 100%;
  aspect-ratio: 4 / 3; color: #fff; cursor: pointer;
  background: var(--color-primary-dark); border: none; padding: 0; text-align: left;
}
.gcard .media { position: absolute; inset: 0; }
.gcard .media img { transition: transform 1.1s var(--ease-quart-out); }
.gcard:hover .media img { transform: scale(1.07); }
.gcard::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(28,51,32,0) 40%, rgba(28,51,32,.72)); opacity: .85; transition: opacity var(--dur) var(--ease-quart-in-out); }
.gcard:hover::after { opacity: 1; }
.gcard:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 3px; }
.gcard-cap { position: absolute; left: 0; bottom: 0; z-index: 3; padding: 1.1rem 1.2rem; }
.gcard-cat { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xxs); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-gold); }
.gcard-title { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; margin-top: .25rem; display: block; }
.gcard-view { position: absolute; top: 1rem; right: 1rem; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.8); transition: opacity var(--dur) var(--ease-quart-out), transform var(--dur) var(--ease-quart-out); }
.gcard:hover .gcard-view { opacity: 1; transform: none; }
.gcard-view svg { width: 16px; height: 16px; }
.gcard.is-hidden { display: none; }
.gpage-empty { padding: 3rem 0; color: var(--color-contrast); font-size: var(--text-lg); }

/* ---- Modal ---- */
.gmodal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(11,17,12,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease-quart-in-out), visibility .4s var(--ease-quart-in-out);
}
.gmodal.is-open { opacity: 1; visibility: visible; }
.gmodal-dialog {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  width: min(1100px, 100%); max-height: 100%;
  background: var(--color-bg); color: var(--color-primary-dark);
  transform: translateY(14px) scale(.99); transition: transform .5s var(--ease-quart-out);
}
.gmodal.is-open .gmodal-dialog { transform: none; }
.gmodal-figure { position: relative; background: var(--color-primary-dark); aspect-ratio: 4 / 3; max-height: 82vh; }
.gmodal-figure img { width: 100%; height: 100%; object-fit: contain; }
.gmodal-info { padding: clamp(1.5rem, 3vw, 2.6rem); display: flex; flex-direction: column; overflow-y: auto; }
.gmodal-cat { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--color-accent); }
.gmodal-title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: var(--leading-xtight); margin: .6rem 0 1rem; }
.gmodal-desc { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-contrast); }
.gmodal-counter { margin-top: auto; padding-top: 1.6rem; font-size: var(--text-sm); color: var(--color-contrast); letter-spacing: .02em; }
.gmodal-close { position: absolute; top: 1rem; right: 1rem; z-index: 4; width: 44px; height: 44px; border-radius: 50%; background: var(--color-bg); border: 1px solid var(--color-contrast-light); color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; transition: background var(--dur), color var(--dur); }
.gmodal-close:hover { background: var(--color-primary-dark); color: #fff; }
.gmodal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 48px; height: 48px; border-radius: 50%; background: rgba(245,244,239,.92); border: 1px solid var(--color-contrast-light); color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; transition: background var(--dur), color var(--dur); }
.gmodal-nav:hover { background: var(--color-primary-dark); color: #fff; }
.gmodal-prev { left: 1rem; }
.gmodal-next { right: 1rem; }
.gmodal-nav svg, .gmodal-close svg { width: 20px; height: 20px; }
body.modal-open { overflow: hidden; }

@media (max-width: 760px) {
  .gmodal { padding: 0; }
  .gmodal-dialog { grid-template-columns: 1fr; max-height: 100%; height: 100%; overflow-y: auto; }
  .gmodal-figure { aspect-ratio: auto; height: 52vh; max-height: 52vh; }
  .gmodal-info { flex: 1 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-track { scroll-behavior: auto; }
  .gmodal, .gmodal-dialog { transition: none; }
  .gcard .media img, .svc-card-media img { transition: none; }
}

/* =============================================================
   AI DESIGN STUDIO PAGE (ai-studio.html)
   A dark "studio canvas" placeholder behind a first-run onboarding
   walkthrough modal. Deep-green surface, gold accent (brand duality).
   Page content is intentionally minimal — the real tool lands later.
   ============================================================= */

/* ---- shared button shapes (used by stage + onboarding) ---- */
.btn-solid {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--brand-green-deep);
  background: var(--color-accent); border: 1px solid var(--color-accent);
  padding: .85rem 1.5rem;
  transition: background var(--dur) var(--ease-quart-in-out),
              border-color var(--dur) var(--ease-quart-in-out),
              transform .18s var(--ease-quart-out);
}
.btn-solid:hover { background: #fff; border-color: #fff; }
.btn-solid:active { transform: translateY(1px); }
.btn-solid .arw { transition: transform var(--dur) var(--ease-quart-in-out); }
.btn-solid:hover .arw { transform: translateX(5px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: .12em; color: #fff;
  background: transparent; border: 1px solid rgba(255,255,255,.32);
  padding: .85rem 1.5rem;
  transition: background var(--dur) var(--ease-quart-in-out),
              color var(--dur) var(--ease-quart-in-out),
              border-color var(--dur) var(--ease-quart-in-out),
              opacity var(--dur) var(--ease-quart-in-out),
              transform .18s var(--ease-quart-out);
}
.btn-ghost:hover { background: #fff; color: var(--brand-green-deep); border-color: #fff; }
.btn-ghost:active { transform: translateY(1px); }
.btn-ghost[disabled] { opacity: .28; pointer-events: none; }

/* ---- studio stage (the page behind the modal) ---- */
.studio-stage {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; background: var(--color-bg-dark);
  isolation: isolate;
}
.studio-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(110% 80% at 80% 18%, rgba(64,120,72,.42), transparent 60%),
    radial-gradient(120% 90% at 12% 88%, rgba(var(--brand-gold-rgb), .16), transparent 55%),
    linear-gradient(160deg, #17331f 0%, #11261A 55%, #0B110C 100%);
}
.studio-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--grain); background-size: 180px 180px;
  opacity: .3; mix-blend-mode: overlay; pointer-events: none;
}
.studio-stage .container { position: relative; z-index: 2; }
.studio-intro {
  max-width: 46rem; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: 1.3rem;
}
.studio-intro .eyebrow { color: #fff; justify-content: center; }
.studio-intro .eyebrow::before { background: var(--color-accent); }
.studio-intro .display { margin: .3rem 0 0; max-width: 18ch; }
.studio-intro .lead { color: rgba(255,255,255,.72); max-width: 50ch; }
.studio-actions {
  display: flex; flex-wrap: wrap; gap: 1rem 1.4rem;
  align-items: center; justify-content: center; margin-top: .8rem;
}
.studio-actions .text-link { color: #fff; }

/* =============================================================
   ONBOARDING WALKTHROUGH MODAL (.ob)
   ============================================================= */
.ob {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(11,17,12,.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease-quart-in-out), visibility .45s var(--ease-quart-in-out);
}
.ob.is-open { opacity: 1; visibility: visible; }

.ob-dialog {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: min(980px, 100%); max-height: 100%;
  background: var(--color-bg-dark); color: #fff;
  border: 1px solid rgba(255,255,255,.1); overflow: hidden;
  transform: translateY(16px) scale(.99);
  transition: transform .55s var(--ease-quart-out);
}
.ob.is-open .ob-dialog { transform: none; }

/* top bar: eyebrow + skip */
.ob-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.3rem, 3vw, 2.2rem);
}
.ob-top .eyebrow { color: var(--color-accent); margin: 0; }
.ob-spark { color: var(--color-accent); display: inline-flex; }
.ob-spark svg { width: 15px; height: 15px; animation: aiSpark 2.6s var(--ease-quart-in-out) infinite; }
.ob-skip {
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.55);
  background: transparent; border: 0; padding: .4rem .2rem;
  transition: color var(--dur) var(--ease-quart-in-out);
}
.ob-skip:hover { color: #fff; }

/* segmented progress rail */
.ob-rail { display: flex; gap: 4px; padding: 0 clamp(1.3rem, 3vw, 2.2rem); }
.ob-rail i {
  flex: 1 1 0; height: 3px; background: rgba(255,255,255,.16); display: block;
  transition: background var(--dur) var(--ease-quart-in-out);
}
.ob-rail i.is-done { background: rgba(var(--brand-gold-rgb), .5); }
.ob-rail i.is-on { background: var(--color-accent); }

/* slides */
.ob-viewport { position: relative; overflow: hidden; flex: 1 1 auto; }
.ob-track { display: flex; width: 100%; transition: transform .6s var(--ease-quart-in-out); }
.ob-slide {
  flex: 0 0 100%; min-width: 100%;
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center;
  padding: clamp(1.4rem, 3.2vw, 2.4rem) clamp(1.3rem, 3vw, 2.2rem);
}

/* figure + branded placeholder */
.ob-figure {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--color-primary-dark); isolation: isolate;
}
.ob-figure::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 20% 12%, rgba(var(--brand-gold-rgb), .22), transparent 55%),
    linear-gradient(155deg, #2B4A30 0%, var(--color-primary-dark) 48%, #0B110C 100%);
}
.ob-figure img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.ob-ph {
  position: absolute; inset: 0; z-index: 2; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: .7rem; text-align: center; padding: 1.4rem;
}
.ob-figure.is-empty .ob-ph { display: flex; }
.ob-ph svg { width: 30px; height: 30px; color: var(--color-accent); }
.ob-ph-dim {
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xxs);
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45);
}
.ob-ph-label { font-size: var(--text-sm); color: rgba(255,255,255,.6); max-width: 26ch; line-height: var(--leading-normal); }

/* copy */
.ob-step-n {
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.5);
}
.ob-copy h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.25rem); line-height: var(--leading-xtight);
  margin: .65rem 0 .9rem; color: #fff;
}
.ob-copy p { margin: 0; color: rgba(255,255,255,.68); font-size: var(--text-lg); line-height: var(--leading-normal); }

/* footer: counter + nav buttons */
.ob-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.3rem, 3vw, 2.2rem);
  border-top: 1px solid rgba(255,255,255,.1);
}
.ob-count {
  font-family: var(--font-display); font-size: var(--text-sm);
  letter-spacing: .12em; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums;
}
.ob-actions { display: flex; gap: .7rem; }
.ob-actions .btn-ghost, .ob-actions .btn-solid { padding: .7rem 1.25rem; }

@media (max-width: 760px) {
  .ob { padding: 0; }
  .ob-dialog { width: 100%; height: 100%; max-height: 100%; }
  .ob-viewport { overflow-y: auto; }
  .ob-slide { grid-template-columns: 1fr; align-content: start; gap: 1.3rem; }
  .ob-figure { aspect-ratio: 16 / 9; }
  .ob-foot { padding-block: 1rem; }
  .ob-actions .btn-ghost, .ob-actions .btn-solid { padding: .7rem 1rem; font-size: var(--text-xs); }
}

@media (prefers-reduced-motion: reduce) {
  .ob, .ob-dialog, .ob-track { transition: none; }
  .ob-spark svg { animation: none; }
}