/* =====================================================================
   URBAN ELEGANCE INTERIORS  --  assets/css/style.css   (v2)
   ---------------------------------------------------------------------
   Theme  : Metallic Orange + White
   Type   : California (self-hosted) with a close fallback stack
   Motion : Blueprint-to-solid 3D page transitions
   Layout : mobile-first, CSS grid + flex, zero framework

   Sections
     01 Fonts            08 Header / Nav        15 Survey
     02 Tokens           09 Hero                16 Blogs
     03 Reset            10 Sections            17 Forms
     04 Typography       11 Cards               18 Footer / WhatsApp
     05 Layout           12 Portfolio           19 3D Page Transitions
     06 Utilities        13 Materials           20 Admin CMS
     07 Buttons          14 Services + Catalogues   21 Press feedback + glow
   ===================================================================== */

/* ---------------------------------------------------------------------
   01. FONTS  --  California
   ---------------------------------------------------------------------
   California is a licensed typeface and is NOT bundled with this project.
   Drop your licensed web-font files into assets/fonts/ using the exact
   names below and the whole site picks them up - nothing else to change.

       assets/fonts/California.woff2         (400 regular)
       assets/fonts/California.woff
       assets/fonts/California-Medium.woff2  (500)
       assets/fonts/California-Bold.woff2    (700)

   Until those files exist the fallback stack renders, so the site never
   breaks - it just uses the nearest available humanist face.
   font-display:swap keeps text visible while the font loads.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'California';
  src: url('../fonts/California.woff2') format('woff2'),
       url('../fonts/California.woff')  format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'California';
  src: url('../fonts/California-Medium.woff2') format('woff2'),
       url('../fonts/California-Medium.woff')  format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'California';
  src: url('../fonts/California-Bold.woff2') format('woff2'),
       url('../fonts/California-Bold.woff')  format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'California';
  src: url('../fonts/California-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------------------------------------------------------------------
   02. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
  /* Metallic orange ---------------------------------------------- */
  --accent-100: #FFF1E6;
  --accent-200: #FFD9BC;
  --accent-300: #FBA968;
  --accent-400: #F5883A;
  --accent-500: #E86A17;   /* primary */
  --accent-600: #C4530B;
  --accent-700: #9A3F06;
  --accent-800: #6B2B04;
  --accent-soft: rgba(232, 106, 23, 0.10);
  --accent-line: rgba(232, 106, 23, 0.28);

  /* The "metallic" is a gradient, not a flat fill - a bright edge,
     a saturated body and a burnt shadow read as brushed metal. */
  --metal: linear-gradient(135deg,
            #FFC79A 0%, #F5883A 22%, #E86A17 48%,
            #C4530B 72%, #F09A55 100%);
  --metal-soft: linear-gradient(135deg,
            #FFF1E6 0%, #FFD9BC 45%, #FFC199 100%);
  --metal-dark: linear-gradient(135deg,
            #C4530B 0%, #9A3F06 55%, #E86A17 100%);

  /* White / neutral ---------------------------------------------- */
  --white:     #FFFFFF;
  --paper-50:  #FEFDFC;
  --paper-100: #FAF8F6;
  --paper-200: #F3EFEB;
  --paper-300: #E6DFD8;

  --ink:       #1C1714;   /* warm near-black, sits with orange */
  --ink-soft:  #4A423C;
  --muted:     #857B73;
  --line:      rgba(28, 23, 20, 0.12);

  /* Blueprint (the "from scratch" motif) ------------------------- */
  --blueprint-bg:   #101A2B;
  --blueprint-line: rgba(120, 180, 255, 0.30);
  --blueprint-glow: rgba(232, 106, 23, 0.55);

  --ok:    #1E7A54;
  --warn:  #B46A12;
  --error: #B02A22;

  /* Type --------------------------------------------------------- */
  --font-display: 'California', 'Optima', 'Palatino Linotype', 'Palatino', Georgia, serif;
  --font-body: 'California', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-hero:  clamp(2.5rem, 5.8vw, 4.8rem);
  --fs-h1:    clamp(2rem, 4.2vw, 3.4rem);
  --fs-h2:    clamp(1.75rem, 3.2vw, 2.6rem);
  --fs-h3:    clamp(1.25rem, 2.1vw, 1.7rem);
  --fs-body:  clamp(0.98rem, 1.05vw, 1.06rem);
  --fs-sm:    0.875rem;
  --fs-xs:    0.78rem;

  /* Space -------------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;

  --container: 1240px;
  --container-narrow: 880px;

  /* Effects ------------------------------------------------------ */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 3px rgba(28, 23, 20, 0.07);
  --shadow:    0 10px 34px rgba(28, 23, 20, 0.10);
  --shadow-lg: 0 26px 76px rgba(28, 23, 20, 0.20);
  --shadow-accent: 0 12px 36px rgba(196, 83, 11, 0.34);

  /* Metallic-orange glow. Separate from --shadow-accent because a glow
     reads as light coming off the element, not the element casting one. */
  --glow:    0 4px 20px -2px rgba(234, 88, 12, 0.25);
  --glow-lg: 0 8px 30px -4px rgba(234, 88, 12, 0.34);
  --glow-amber: 0 4px 20px -2px rgba(217, 119, 6, 0.25);

  /* ---------------------------------------------------------------
     MOTION
     ---------------------------------------------------------------
     Durations are capped so nothing on screen outlasts intent:
       fast  - press feedback, the finger is still down
       base  - the default for hover and state change
       slow  - larger surfaces that travel further (drawers, panels)
       page  - the whole 3D page transition, start to finish

     Easing: --ease is an expo-out. It leaves fast and settles slowly,
     which is what makes a 200ms move feel like it arrived rather than
     stopped. Never linear, never ease-in, for anything entering.
     --------------------------------------------------------------- */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);      /* entering, decelerate */
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);     /* symmetrical moves */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* tactile overshoot */
  --ease-out-back: var(--ease-spring);               /* legacy alias */

  --dur-fast: 200ms;
  --dur:      350ms;
  --dur-slow: 500ms;
  --dur-page: 800ms;

  --header-h: 74px;
}

/* ---------------------------------------------------------------------
   03. RESET
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  /* Also on the root, not just body. The closed mobile nav drawer is parked
     off-screen with translateX(100%); because it is position:fixed, body's
     overflow-x cannot contain it. Overflow on the root propagates to the
     viewport, which does clip it - without this the document is ~335px wider
     than a phone screen and the browser zooms out to fit, taking the header
     and its menu button off the side.

     `clip` not `hidden`: hidden turns the root into a scroll container, which
     kills position:sticky on the header. clip does the same clipping without
     creating one, so the header still sticks. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--ink-soft);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* Clipping lives on the root (see html above). Repeating overflow-x:hidden
     here makes body a scroll container, which silently disables position:
     sticky on the header. */
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--accent-600); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--accent-700); }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--ink); color: #fff; padding: var(--sp-3) var(--sp-5);
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   04. TYPOGRAPHY
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.08rem; font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 700; }

/* Small uppercase kicker above headings - core brand device */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-600); margin-bottom: var(--sp-4);
}
.eyebrow::before { content: ''; width: 34px; height: 2px; background: var(--metal); flex: none; }
.eyebrow--center::after { content: ''; width: 34px; height: 2px; background: var(--metal); flex: none; }

.lead { font-size: 1.1rem; color: var(--ink-soft); }

/* Metallic-filled emphasis inside display headings */
.accent {
  background: var(--metal);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent-600);
  font-style: italic;
}

.rule-accent { width: 68px; height: 3px; background: var(--metal); margin: var(--sp-5) 0; border: 0; border-radius: 2px; }
.rule-accent--center { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------
   05. LAYOUT
   --------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding: var(--sp-8) 0; }
@media (min-width: 768px) { .section { padding: var(--sp-9) 0; } }

.section--dark {
  background: var(--ink); color: rgba(255, 255, 255, 0.78);
  position: relative; overflow: hidden;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark a { color: var(--accent-300); }
.section--dark .lead { color: rgba(255, 255, 255, 0.74); }

.section--tint { background: var(--paper-100); }
.section--white { background: var(--white); }
.section--paper { background: var(--paper-50); }

/* Faint blueprint grid, the "built from scratch" motif */
.section--grid { position: relative; }
.section--grid::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
}
.section--grid > * { position: relative; z-index: 1; }

.section-head { max-width: 740px; margin-bottom: var(--sp-7); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.grid { display: grid; gap: var(--sp-5); }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid { gap: var(--sp-6); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.split { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
}

/* ---------------------------------------------------------------------
   06. UTILITIES
   --------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; } .mb-6 { margin-bottom: var(--sp-6); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Entering elements resolve from 0.95, never from 0. The translate is
   kept short because scale already carries the arrival.

   No will-change: main.js now reveals most blocks on the page, and giving
   every one of them its own compositor layer costs far more memory than
   the transition saves. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.95);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

/* ---------------------------------------------------------------------
   Pre-hide the blocks main.js reveals.

   main.js adds .reveal after the document has parsed, and on a long page
   the top of it may already have painted by then - so without this the
   content appears, vanishes, then fades back in. Hiding up front costs
   nothing and removes the flash.

   KEEP IN SYNC with the SELECTORS list in main.js initReveal(). The two
   describe the same set: this one hides them, that one animates them.
   The .js gate means anyone without JavaScript still sees everything.
   --------------------------------------------------------------------- */
.js .section-head:not(.is-visible),
.js .grid > *:not(.is-visible),
.js .metrics__grid > .metric:not(.is-visible),
.js .split > *:not(.is-visible),
.js .svc-group__head:not(.is-visible),
.js .svc-list > .svc-item:not(.is-visible),
.js .cat-section__head:not(.is-visible),
.js .cat-grid > .cat-card:not(.is-visible),
.js .blog-grid > .blog-card:not(.is-visible),
.js .mat-group__head:not(.is-visible),
.js .mat-item:not(.is-visible),
.js .tick-list > li:not(.is-visible),
.js .carousel:not(.is-visible),
.js .frame:not(.is-visible),
.js .disclaimer:not(.is-visible),
.js .compare-table:not(.is-visible),
.js .empty-state:not(.is-visible),
.js .mat-toc:not(.is-visible),
.js .pagination:not(.is-visible),
.js .catalog-row:not(.is-visible),
.js .survey__panel:not(.is-visible),
.js .survey__aside:not(.is-visible),
.js .blog-article:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.95);
}

/* Motion off: never hide anything, whatever the class says. */
@media (prefers-reduced-motion: reduce) {
  .js [class]:not(.is-visible) { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------------
   07. BUTTONS
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 0.95rem 2rem;
  font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; text-align: center;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
  position: relative; overflow: hidden;
}
/* Press feedback: the button gives under the finger, then springs back. */
.btn:active { transform: scale(0.97); transition-duration: var(--dur-fast); }

/* Metallic fill with a sweeping highlight on hover */
.btn--accent { background: var(--metal); color: #fff; border-color: transparent; box-shadow: var(--shadow-sm); }
.btn--accent::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.42) 48%, transparent 66%);
  transform: translate3d(-120%, 0, 0); transition: transform 650ms var(--ease);
}
.btn--accent:hover { color: #fff; transform: translate3d(0, -2px, 0); box-shadow: var(--glow-lg); }
.btn--accent:hover::after { transform: translate3d(120%, 0, 0); }
.btn--accent:active { transform: scale(0.97); }

.btn--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--dark:hover { background: #000; color: var(--accent-300); transform: translate3d(0, -2px, 0); box-shadow: var(--glow); }

.btn--outline { background: transparent; color: var(--accent-600); border-color: var(--accent-500); }
.btn--outline:hover { background: var(--accent-500); color: #fff; }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--sm { padding: 0.6rem 1.2rem; font-size: var(--fs-xs); border-width: 1px; }
.btn--lg { padding: 1.15rem 2.6rem; }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: 0.5; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row--center { justify-content: center; }

/* ---------------------------------------------------------------------
   08. TOPBAR / HEADER / NAV
   --------------------------------------------------------------------- */
.topbar {
  background: var(--ink); color: rgba(255, 255, 255, 0.66);
  font-size: var(--fs-xs); letter-spacing: 0.05em;
}
.topbar__inner { display: flex; align-items: center; gap: var(--sp-5); height: 38px; }
.topbar__spacer { flex: 1; }
.topbar__item { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__item:hover { color: var(--accent-300); }
@media (max-width: 640px) {
  .topbar__item--hide-sm { display: none; }
  .topbar__inner > .topbar__item:first-child { font-size: 0.72rem; }
}

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); background: rgba(255, 255, 255, 0.99); }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h); gap: var(--sp-4);
}

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--ink); }
.brand__mark { color: var(--accent-500); flex: none; }
/* Uploaded logo (Admin > Settings). Height-capped so any aspect ratio fits. */
.brand__logo { height: 46px; width: auto; max-width: 260px; object-fit: contain; display: block; }
@media (max-width: 640px) { .brand__logo { height: 38px; max-width: 190px; } }
.brand__name {
  display: block; font-family: var(--font-display); font-size: 1.42rem;
  font-weight: 700; line-height: 1; letter-spacing: 0.005em; color: var(--ink);
}
.brand__sub {
  display: block; font-size: 0.62rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--accent-600); margin-top: 4px;
}
.brand--footer .brand__name { color: #fff; }

.nav__list { display: flex; align-items: center; gap: var(--sp-5); }
.nav__link {
  position: relative; font-size: 0.83rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink);
  padding: var(--sp-2) 0;
}
/* Underline grows via scaleX, not width - width forces layout on every
   frame, scaleX is composited. */
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--metal);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--accent-600); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--accent-600); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: var(--sp-2); }
.nav-toggle span {
  display: block; width: 26px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Desktop: the shell is transparent to layout, so .nav sits in the header
   flex row exactly as before. */
.nav-shell { display: contents; }

@media (max-width: 1099px) {
  .nav-toggle { display: flex; }

  /* THE menu bug. backdrop-filter makes .site-header a containing block for
     position:fixed descendants, so the drawer was being sized and clipped to
     the 74px header instead of the viewport - it could never cover the screen.
     The header is already 94% opaque, so at phone sizes the blur is
     imperceptible; dropping it only here frees the drawer while leaving the
     frosted header exactly as designed on desktop. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* Mobile: the shell becomes a viewport-sized clipping box. The drawer is
     absolute inside it rather than fixed, so the shell's overflow actually
     contains it. Parking a fixed drawer off-screen with translateX(100%)
     instead widens the whole document and makes the browser zoom out. */
  .nav-shell {
    display: block;
    position: fixed; inset: 0; z-index: 70;
    overflow: hidden;
    pointer-events: none;
  }
  .nav {
    position: absolute; inset: 0 0 0 auto; width: min(340px, 86vw);
    background: var(--ink); padding: 96px var(--sp-6) var(--sp-6);
    transform: translateX(100%); transition: transform var(--dur) var(--ease);
    overflow-y: auto;
    pointer-events: auto;
  }
  .nav.is-open { transform: none; box-shadow: var(--shadow-lg); }

  /* .site-header is sticky with z-index:60, which makes it a stacking
     context - so the drawer's z-index only competes INSIDE the header, and
     the scrim (65), the mobile CTA bar (75) and the WhatsApp widget (80) all
     painted on top of it. The menu opened but every link was untappable.
     Lifting the whole header above them while the drawer is open is what
     makes the links reachable. */
  body.nav-open .site-header { z-index: 90; }

  /* The open drawer covers the header, so the button that closes it has to
     sit above the panel - and its bars are --ink, which is invisible against
     that dark panel. Both are needed for the X to be seen and tapped. */
  .nav-toggle { position: relative; z-index: 80; }
  body.nav-open .nav-toggle span { background: #fff; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
  .nav__link { display: block; padding: var(--sp-4) 0; color: rgba(255, 255, 255, 0.88); font-size: 0.95rem; }
  .nav__link.is-active { color: var(--accent-300); }
  .nav__cta-wrap { border-bottom: 0 !important; padding-top: var(--sp-5); }
  /* Lock scrolling at the ROOT, not on body. body { overflow:hidden } makes
     body a scroll container, which disables position:sticky on the header -
     so opening the menu scrolled the header, and its close button, out of
     view. Locking html leaves body a normal element and sticky keeps working.
     If :has() is unsupported the page simply stays scrollable behind the
     drawer, which is a far better failure than a missing close button. */
  html:has(body.nav-open) { overflow: hidden; }
  .nav-scrim {
    position: fixed; inset: 0; background: rgba(16, 26, 43, 0.6);
    z-index: 65; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);
  }
  .nav-scrim.is-open { opacity: 1; pointer-events: auto; }
}

/* ---------------------------------------------------------------------
   09. HERO  --  blueprint plane resolving into a lit interior
   --------------------------------------------------------------------- */
.hero {
  position: relative; min-height: min(88vh, 780px);
  display: flex; align-items: center; overflow: hidden;
  color: #fff;
  background:
    linear-gradient(102deg, rgba(16,26,43,0.95) 0%, rgba(16,26,43,0.82) 45%, rgba(196,83,11,0.55) 100%),
    var(--blueprint-bg);
}
/* Blueprint grid that fades toward the warm side */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,0.35) 55%, transparent 85%);
  mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,0.35) 55%, transparent 85%);
  animation: gridDrift 34s linear infinite;
}
@keyframes gridDrift { to { background-position: 60px 60px; } }

/* Metallic arc sweeping the warm edge */
.hero::after {
  content: ''; position: absolute; right: -12%; top: -18%;
  width: 60vw; height: 60vw; max-width: 780px; max-height: 780px;
  border-radius: 50%; pointer-events: none;
  border: 2px solid transparent;
  background: var(--metal) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.5;
}

.hero__inner { position: relative; z-index: 2; padding: var(--sp-9) 0; max-width: 780px; }
.hero .eyebrow { color: var(--accent-300); }
.hero .eyebrow::before { background: var(--metal); }
.hero__title { font-size: var(--fs-hero); color: #fff; margin-bottom: var(--sp-5); line-height: 1.04; }
.hero__sub {
  font-size: clamp(1rem, 1.6vw, 1.18rem); color: rgba(255, 255, 255, 0.8);
  max-width: 56ch; margin-bottom: var(--sp-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.hero__scroll {
  position: absolute; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55); z-index: 2;
}

/* Interior page banner */
.page-banner {
  background: linear-gradient(115deg, var(--blueprint-bg) 0%, #1E2B42 55%, var(--accent-700) 140%);
  color: #fff; padding: var(--sp-8) 0 var(--sp-7); text-align: center;
  position: relative; overflow: hidden;
}
.page-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.7;
  background-image:
    linear-gradient(to right, var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 120%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 120%, #000 0%, transparent 70%);
}
.page-banner::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 140px; height: 3px; background: var(--metal);
}
.page-banner > .container { position: relative; z-index: 1; }
.page-banner h1 { color: #fff; margin-bottom: var(--sp-3); }
.page-banner p { color: rgba(255, 255, 255, 0.76); max-width: 64ch; margin: 0 auto; }
.breadcrumb { font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-300); margin-bottom: var(--sp-4); }
.breadcrumb a { color: rgba(255, 255, 255, 0.62); }

/* ---------------------------------------------------------------------
   10. TRUST METRICS
   --------------------------------------------------------------------- */
.metrics { background: var(--ink); color: #fff; border-top: 3px solid transparent; border-image: var(--metal) 1; }
.metrics__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.09); }
@media (min-width: 900px) { .metrics__grid { grid-template-columns: repeat(4, 1fr); } }

.metric { background: var(--ink); padding: var(--sp-6) var(--sp-4); text-align: center; }
.metric__value {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1;
  background: var(--metal); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent-400);
}
.metric__value sup { font-size: 0.44em; top: -0.9em; }
.metric__label {
  display: block; margin-top: var(--sp-3);
  font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* ---------------------------------------------------------------------
   11. CARDS
   --------------------------------------------------------------------- */
/* Same reasoning as .tier - a light card carries its own text colour so it
   is legible on any section background. */
.card {
  background: var(--white); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-6); height: 100%;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { transform: translate3d(0, -5px, 0); box-shadow: var(--glow); border-color: var(--accent-line); }
.card__icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  color: #fff; background: var(--metal);
  border-radius: var(--radius-sm); margin-bottom: var(--sp-4);
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
}
.card h3 { margin-bottom: var(--sp-3); font-size: 1.22rem; }
.card p { font-size: 0.95rem; }

/* Numbered process step */
.step {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-6) var(--sp-5) var(--sp-5); height: 100%;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.step:hover { border-color: var(--accent-500); transform: translate3d(0, -4px, 0); }
.step__num {
  display: block; font-family: var(--font-display); font-size: 3rem; font-weight: 700;
  line-height: 1; color: var(--paper-300); margin-bottom: var(--sp-3);
  transition: color var(--dur) var(--ease);
}
.step:hover .step__num {
  background: var(--metal); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.step h3 { font-size: 1.14rem; margin-bottom: var(--sp-2); }
.step p { font-size: 0.92rem; margin: 0; }
.step__meta {
  display: block; margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-600);
}

/* Tier / pricing card */
/* A white card must declare its own text colour. Without this it inherits
   from the section, so inside .section--dark it renders white on white and
   only the explicitly-coloured <strong> survives. */
.tier {
  background: var(--white); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-6); display: flex; flex-direction: column; height: 100%;
  position: relative; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tier:hover { box-shadow: var(--glow); transform: translate3d(0, -4px, 0); }
.tier--featured { border-color: var(--accent-500); box-shadow: var(--shadow); }
.tier--featured::before {
  content: 'Most Chosen'; position: absolute; top: -12px; left: var(--sp-6);
  background: var(--metal); color: #fff;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 3px;
}
.tier__name { font-family: var(--font-display); font-size: 1.7rem; color: var(--ink); margin-bottom: var(--sp-2); }
.tier__rate { font-size: 1.45rem; font-weight: 700; color: var(--accent-600); font-family: var(--font-display); }
.tier__rate small { font-size: 0.72rem; color: var(--muted); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; }
.tier__list { margin: var(--sp-5) 0; flex: 1; }
.tier__list li { position: relative; padding-left: var(--sp-5); margin-bottom: var(--sp-3); font-size: 0.93rem; }
.tier__list li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; background: var(--metal); transform: rotate(45deg);
}

.tick-list li { position: relative; padding-left: var(--sp-6); margin-bottom: var(--sp-3); }
.tick-list li::before {
  content: ''; position: absolute; left: 2px; top: 0.5em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--accent-500); border-bottom: 2px solid var(--accent-500);
  transform: rotate(-45deg);
}

/* Blueprint-styled image placeholder */
.frame {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(140deg, var(--blueprint-bg), #23324B);
}
.frame::before {
  content: ''; position: absolute; inset: 0; opacity: 0.6;
  background-image:
    linear-gradient(to right, var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line) 1px, transparent 1px);
  background-size: 34px 34px;
}
.frame::after {
  content: ''; position: absolute; inset: 12px;
  border: 1px solid var(--accent-line); pointer-events: none; border-radius: 3px;
}
.frame img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.frame--4x3 { aspect-ratio: 4 / 3; }
.frame--3x4 { aspect-ratio: 3 / 4; }
.frame--1x1 { aspect-ratio: 1 / 1; }
.frame--16x9 { aspect-ratio: 16 / 9; }
.frame__label {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: var(--sp-5); color: rgba(255, 209, 173, 0.82); z-index: 2;
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------------
   12. CAROUSEL + PORTFOLIO
   --------------------------------------------------------------------- */
.carousel { position: relative; }
.carousel__track {
  display: flex; gap: var(--sp-5);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: var(--sp-4);
  scrollbar-width: thin; scrollbar-color: var(--accent-500) transparent;
}
.carousel__track::-webkit-scrollbar { height: 4px; }
.carousel__track::-webkit-scrollbar-thumb { background: var(--accent-500); border-radius: 4px; }
.carousel__track::-webkit-scrollbar-track { background: var(--paper-300); }

.carousel__item { flex: 0 0 84%; scroll-snap-align: start; }
@media (min-width: 700px) { .carousel__item { flex-basis: 46%; } }
@media (min-width: 1100px) { .carousel__item { flex-basis: 31.4%; } }

.carousel__nav { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-4); }
.carousel__btn {
  width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  background: var(--white); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.carousel__btn:hover { background: var(--metal); color: #fff; border-color: transparent; }

.project-card { display: block; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ink); }
.project-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 850ms var(--ease); }
.project-card:hover .project-card__media img { transform: scale(1.07); }
.project-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,15,12,0.94) 0%, rgba(20,15,12,0.35) 44%, transparent 70%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-5); color: #fff;
}
.project-card__tag { font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-300); margin-bottom: var(--sp-2); }
.project-card__title { font-family: var(--font-display); font-size: 1.32rem; color: #fff; margin: 0 0 var(--sp-1); }
.project-card__meta { font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); }

.filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.filter-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.filter-group__label { font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-right: var(--sp-2); }
.chip {
  display: inline-block; padding: 0.5rem 1.1rem;
  border: 1px solid var(--line); border-radius: 100px;
  font-size: 0.82rem; font-weight: 500; color: var(--ink);
  background: var(--white); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); cursor: pointer;
}
.chip:hover { border-color: var(--accent-500); color: var(--accent-600); }
.chip.is-active { background: var(--metal); border-color: transparent; color: #fff; }

.pagination { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-7); flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 42px; height: 42px; display: grid; place-items: center; padding: 0 var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.9rem; background: var(--white);
}
.pagination .is-current { background: var(--metal); color: #fff; border-color: transparent; }

.empty-state {
  text-align: center; padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--accent-line); border-radius: var(--radius); background: var(--paper-50);
}

/* ---------------------------------------------------------------------
   13. MATERIALS  --  Core Substrates + Surface Finishes
   --------------------------------------------------------------------- */
.mat-toc {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-4); background: var(--paper-100);
  border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--sp-7);
}
.mat-toc__label { font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); width: 100%; margin-bottom: var(--sp-2); }

/* One numbered family: "1. Plywood (Cross-Laminated Veneers)" */
.mat-group { margin-bottom: var(--sp-7); }
.mat-group__head { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.mat-group__num {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; line-height: 1; flex: none;
  background: var(--metal); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mat-group__title { margin: 0; font-size: 1.4rem; }
.mat-group__sub { display: block; font-size: 0.82rem; font-weight: 400; color: var(--muted); letter-spacing: 0.04em; margin-top: 2px; }

/* One material row inside a family */
.mat-item {
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--accent-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-5); margin-bottom: var(--sp-3);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mat-item:hover { box-shadow: var(--glow); transform: translate3d(3px, 0, 0); }
.mat-item__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0 0 var(--sp-2); }
.mat-item__name em { font-style: normal; color: var(--accent-600); font-size: 0.86rem; font-family: var(--font-body); font-weight: 500; display: block; letter-spacing: 0.03em; margin-top: 2px; }
.mat-item p { font-size: 0.93rem; margin: 0; }

/* Overview / Variants / Best For / Pros & Cons blocks */
.mat-spec { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
@media (min-width: 720px) { .mat-spec { grid-template-columns: repeat(2, 1fr); } }
.mat-spec__row { font-size: 0.9rem; }
.mat-spec__k {
  display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-600); margin-bottom: 3px;
}
.mat-spec__row--full { grid-column: 1 / -1; }

.compare-table { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table th, .compare-table td {
  padding: var(--sp-4); text-align: left; border-bottom: 1px solid var(--line);
  font-size: 0.9rem; white-space: nowrap;
}
.compare-table th { background: var(--ink); color: #fff; font-weight: 700; letter-spacing: 0.06em; font-size: 0.8rem; text-transform: uppercase; }
.compare-table td:first-child { font-weight: 700; color: var(--ink); }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table tbody tr:nth-child(even) { background: var(--paper-50); }

.badge { display: inline-block; padding: 2px 9px; border-radius: 100px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.badge--accent { background: var(--metal); color: #fff; }
.badge--ok { background: rgba(30, 122, 84, 0.12); color: var(--ok); }
.badge--warn { background: rgba(180, 106, 18, 0.14); color: var(--warn); }
.badge--neutral { background: rgba(28, 23, 20, 0.08); color: var(--ink-soft); }

.catalog-row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); margin-bottom: var(--sp-3);
  transition: border-color var(--dur) var(--ease);
}
.catalog-row:hover { border-color: var(--accent-500); }
.catalog-row__icon {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  background: var(--metal); color: #fff; border-radius: var(--radius-sm);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em;
}
.catalog-row__body { flex: 1; min-width: 0; }
.catalog-row__title { display: block; font-weight: 700; color: var(--ink); }
.catalog-row__meta { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* ---------------------------------------------------------------------
   14. SERVICES + CATALOGUES
   ---------------------------------------------------------------------
   Services are six CMS-managed groups with their individual services
   nested underneath, so 75 offerings read as six decisions.
   Catalogues are downloadable PDFs in a grid, grouped by category.
   --------------------------------------------------------------------- */

/* --- one service group --- */
.svc-group { margin-bottom: var(--sp-8); scroll-margin-top: 110px; }
.svc-group__head { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.svc-group__icon {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  background: var(--metal); color: #fff; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: 0.02em;
}
.svc-group__titles { min-width: 0; }
.svc-group__title { margin: 0 0 var(--sp-1); font-size: 1.35rem; }
.svc-group__sub { display: block; font-size: 0.9rem; color: var(--muted); line-height: 1.6; }
.svc-group__count {
  margin-left: auto; flex: none; align-self: center;
  font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-600);
  font-variant-numeric: tabular-nums;
}

/* --- the services inside it --- */
.svc-list { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .svc-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .svc-list { grid-template-columns: repeat(3, 1fr); } }

.svc-item {
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--accent-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--sp-3) var(--sp-4);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.svc-item:hover { box-shadow: var(--glow); transform: translate3d(3px, 0, 0); border-color: var(--accent-line); border-left-color: var(--accent-500); }
.svc-item__name { display: block; font-weight: 700; color: var(--ink); font-size: 0.93rem; line-height: 1.4; }
.svc-item__desc { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 3px; line-height: 1.55; }

.section--dark .svc-group__title { color: #fff; }
.section--dark .svc-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.section--dark .svc-item__name { color: #fff; }

/* --- catalogue grid --- */
.cat-section { margin-bottom: var(--sp-8); scroll-margin-top: 110px; }
.cat-section__head {
  display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap;
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-5);
  border-bottom: 2px solid var(--line);
}
.cat-section__head h2 { margin: 0; font-size: 1.3rem; }
.cat-section__desc { font-size: 0.88rem; color: var(--muted); margin: 0; }
.cat-section__count {
  margin-left: auto; font-size: var(--fs-xs); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-600); font-variant-numeric: tabular-nums;
}

.cat-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

.cat-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat-card:hover { transform: translate3d(0, -5px, 0); box-shadow: var(--glow); border-color: var(--accent-line); }

.cat-card__cover {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: linear-gradient(140deg, var(--blueprint-bg), #23324B);
  display: grid; place-items: center;
}
.cat-card__cover::before {
  content: ''; position: absolute; inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(to right, var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line) 1px, transparent 1px);
  background-size: 30px 30px;
}
.cat-card__cover img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.cat-card__glyph {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 209, 173, 0.9);
  border: 1px solid var(--accent-line); padding: 7px 13px; border-radius: 3px;
}
.cat-card__badge {
  position: absolute; z-index: 2; top: 10px; right: 10px;
  background: var(--metal); color: #fff;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px;
}

.cat-card__body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; }
.cat-card__title { font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); margin: 0 0 var(--sp-2); line-height: 1.3; }
.cat-card__meta { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-2); }
.cat-card__desc { font-size: 0.85rem; margin: 0 0 var(--sp-4); flex: 1; }
.cat-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.cat-card__size { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ---------------------------------------------------------------------
   15. SURVEY
   --------------------------------------------------------------------- */
.survey { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 1000px) { .survey { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); gap: var(--sp-7); } }

.survey__panel {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm);
}
@media (min-width: 700px) { .survey__panel { padding: var(--sp-7); } }

.survey__step { margin-bottom: var(--sp-7); }
.survey__step:last-of-type { margin-bottom: 0; }
.survey__step-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.survey__step-num {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--metal); color: #fff; font-size: 0.8rem; font-weight: 700;
}
.survey__step-head h3 { margin: 0; font-size: 1.14rem; }

/* Selectable tiles (space type) */
.opt-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .opt-grid { grid-template-columns: repeat(3, 1fr); } }
.opt-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .opt-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Three tiles in a two-column grid leave the last one orphaned at half
   width. Let it span the row instead - tidier, and a bigger tap target. */
@media (max-width: 619px) {
  .opt-grid > .opt:nth-child(3):last-child { grid-column: 1 / -1; }
}

.opt { position: relative; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt__box {
  display: block; padding: var(--sp-5) var(--sp-3); text-align: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); height: 100%; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.opt__box:hover { border-color: var(--accent-400); transform: translate3d(0, -2px, 0); }
.opt input:checked + .opt__box {
  border-color: var(--accent-500); background: var(--accent-100);
  box-shadow: 0 0 0 1px var(--accent-500);
}
.opt input:focus-visible + .opt__box { outline: 2px solid var(--accent-500); outline-offset: 2px; }
.opt__icon { display: block; margin: 0 auto var(--sp-3); color: var(--accent-600); }
.opt__title { display: block; font-weight: 700; color: var(--ink); font-size: 0.98rem; }
.opt__sub { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }

/* Floor-plan dropzone */
.upload-zone {
  position: relative; display: block;
  border: 2px dashed var(--accent-line); border-radius: var(--radius);
  background: var(--paper-50); padding: var(--sp-6) var(--sp-5); text-align: center;
  cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.upload-zone:hover, .upload-zone.is-dragover { border-color: var(--accent-500); background: var(--accent-100); }
.upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-zone__icon { color: var(--accent-500); margin: 0 auto var(--sp-3); }
.upload-zone__title { display: block; font-weight: 700; color: var(--ink); }
.upload-zone__hint { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-2); }
.upload-zone__file {
  display: none; margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: var(--white); border: 1px solid var(--accent-line); border-radius: var(--radius-sm);
  font-size: 0.84rem; color: var(--ink); word-break: break-all;
}
.upload-zone.has-file .upload-zone__file { display: block; }

/* Sticky side rail */
.survey__aside {
  background: linear-gradient(160deg, var(--blueprint-bg) 0%, #1B2436 100%);
  color: rgba(255, 255, 255, 0.76);
  border-radius: var(--radius-lg); padding: var(--sp-6);
  position: relative; overflow: hidden;
}
@media (min-width: 1000px) { .survey__aside { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } }
.survey__aside::before {
  content: ''; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line) 1px, transparent 1px);
  background-size: 40px 40px;
}
.survey__aside > * { position: relative; z-index: 1; }
.survey__aside h3 { color: #fff; font-size: 1.15rem; }
.survey__aside .tick-list li::before { border-color: var(--accent-400); }
.survey__aside .tick-list li { font-size: 0.9rem; color: rgba(255,255,255,0.76); }

.disclaimer {
  background: var(--paper-100); border: 1px solid var(--line);
  border-left: 3px solid var(--accent-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-5); font-size: 0.83rem; line-height: 1.68; color: var(--ink-soft);
}
.disclaimer strong { display: block; margin-bottom: var(--sp-2); color: var(--ink); letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--fs-xs); }
.disclaimer--dark {
  background: rgba(0, 0, 0, 0.24); border-color: rgba(255, 255, 255, 0.1);
  border-left-color: var(--accent-500); color: rgba(255, 255, 255, 0.66);
}
.disclaimer--dark strong { color: var(--accent-300); }

/* ---------------------------------------------------------------------
   16. BLOGS
   --------------------------------------------------------------------- */
.blog-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 700px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.blog-card:hover { transform: translate3d(0, -5px, 0); box-shadow: var(--glow); border-color: var(--accent-line); }

.blog-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease); }
.blog-card:hover .blog-card__media img { transform: scale(1.06); }

/* Play badge marks posts that carry a video */
.blog-card__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(20, 15, 12, 0.32); transition: background var(--dur) var(--ease);
}
.blog-card:hover .blog-card__play { background: rgba(20, 15, 12, 0.15); }
.blog-card__play span {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--metal); color: #fff; box-shadow: var(--shadow-accent);
  transition: transform var(--dur) var(--ease-out-back);
}
.blog-card:hover .blog-card__play span { transform: scale(1.12); }

.blog-card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.blog-card__meta {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center;
  font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--sp-3);
}
.blog-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--accent-400); }
.blog-card__title { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 var(--sp-3); color: var(--ink); line-height: 1.25; }
.blog-card__excerpt { font-size: 0.92rem; margin: 0 0 var(--sp-4); flex: 1; }
.blog-card__more {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-600); display: inline-flex; align-items: center; gap: var(--sp-2);
}
.blog-card:hover .blog-card__more { gap: var(--sp-3); }

/* Expanded article */
.blog-article {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--sp-7);
  scroll-margin-top: 110px;
}
.blog-article__head { padding: var(--sp-6) var(--sp-5) var(--sp-4); }
@media (min-width: 700px) { .blog-article__head { padding: var(--sp-7) var(--sp-7) var(--sp-5); } }
.blog-article__head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: var(--sp-3); }

/* Responsive 16:9 YouTube frame */
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Click-to-load facade: no YouTube request until the user opts in */
.video-facade { position: absolute; inset: 0; cursor: pointer; border: 0; padding: 0; width: 100%; height: 100%; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; }
.video-facade__btn {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(20, 15, 12, 0.3); transition: background var(--dur) var(--ease);
}
.video-facade:hover .video-facade__btn { background: rgba(20, 15, 12, 0.14); }
.video-facade__btn span {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: var(--metal); color: #fff; box-shadow: var(--shadow-accent);
  transition: transform var(--dur) var(--ease-out-back);
}
.video-facade:hover .video-facade__btn span { transform: scale(1.1); }

.blog-article__body { padding: var(--sp-5); font-size: 1rem; line-height: 1.8; }
@media (min-width: 700px) { .blog-article__body { padding: var(--sp-7); } }
.blog-article__body p { margin-bottom: var(--sp-4); }

/* ---------------------------------------------------------------------
   17. FORMS
   --------------------------------------------------------------------- */
.form-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 620px) { .form-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.field--full { grid-column: 1 / -1; }

.field { display: block; }
.field label, .label {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink);
}
.field .req { color: var(--error); }

.input, .select, .textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="date"], input[type="url"], input[type="file"], select, textarea {
  width: 100%; padding: 0.85rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink); font-size: 0.95rem;
  font-family: var(--font-body);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea { min-height: 130px; resize: vertical; line-height: 1.65; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857B73' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 17px;
  padding-right: 2.5rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[aria-invalid="true"], .has-error input, .has-error select, .has-error textarea { border-color: var(--error); }
.field-error { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--error); }
.field-hint { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }

.hp-field { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }

/* A consent line is a sentence, not a field label - so it has to undo the
   uppercase/tracking that `.field label` would otherwise inherit to it.
   Specificity is raised to beat `.field label` (0,1,1). */
.consent, .field .consent, label.consent {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: 0.86rem; font-weight: 400; line-height: 1.6;
  letter-spacing: normal; text-transform: none;
  color: var(--ink-soft); margin-bottom: 0;
}
.consent input { margin-top: 3px; accent-color: var(--accent-500); width: 17px; height: 17px; flex: none; }

.alert {
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-sm);
  margin-bottom: var(--sp-5); font-size: 0.92rem; border-left: 3px solid;
}
.alert--success { background: rgba(30, 122, 84, 0.08); border-color: var(--ok); color: #14563a; }
.alert--error { background: rgba(176, 42, 34, 0.07); border-color: var(--error); color: #86211b; }
.alert--info { background: var(--accent-100); border-color: var(--accent-500); color: var(--accent-700); }

/* Google Places dropdown, restyled to match the site */
.pac-container {
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  box-shadow: var(--shadow); font-family: var(--font-body); margin-top: 4px;
}
.pac-item { padding: 8px 12px; font-size: 0.88rem; cursor: pointer; border-top: 1px solid var(--line); }
.pac-item:first-child { border-top: 0; }
.pac-item:hover, .pac-item-selected { background: var(--accent-100); }
.pac-item-query { font-size: 0.92rem; color: var(--ink); }
.pac-matched { color: var(--accent-600); }

/* ---------------------------------------------------------------------
   18. FOOTER / WHATSAPP / MOBILE BAR
   --------------------------------------------------------------------- */
.site-footer {
  background: var(--ink); color: rgba(255, 255, 255, 0.62);
  padding: var(--sp-8) 0 var(--sp-5); font-size: 0.9rem;
  border-top: 3px solid transparent; border-image: var(--metal) 1;
}
.footer-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: var(--sp-7); } }

.footer-blurb { margin-top: var(--sp-4); max-width: 42ch; line-height: 1.75; font-size: 0.88rem; }
.footer-head {
  color: #fff; font-size: var(--fs-xs); letter-spacing: 0.18em;
  text-transform: uppercase; margin-bottom: var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-list li { margin-bottom: var(--sp-3); }
.footer-list a { color: rgba(255, 255, 255, 0.62); font-size: 0.88rem; }
/* Nudge on hover via transform - padding-left would reflow the column. */
.footer-list a { display: inline-block; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.footer-list a:hover { color: var(--accent-300); transform: translate3d(5px, 0, 0); }
.footer-address { font-style: normal; line-height: 1.8; font-size: 0.88rem; }
.footer-address a { color: rgba(255, 255, 255, 0.78); }
.footer-address a:hover { color: var(--accent-300); }
.footer-hours { color: var(--accent-300); font-size: 0.82rem; }

.footer-social { display: flex; gap: var(--sp-4); margin-top: var(--sp-5); }
.footer-social a {
  font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-300); padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.footer-social a:hover { border-color: var(--accent-300); }

.footer-bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.44);
}
.footer-bottom p { margin: 0; }
.footer-bottom__note { max-width: 56ch; }

.wa-widget { position: fixed; right: 18px; bottom: 18px; z-index: 80; }
.wa-widget__fab {
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.42);
  transition: transform var(--dur) var(--ease); margin-left: auto; position: relative;
}
.wa-widget__fab:hover { transform: scale(1.07); }
.wa-widget__fab::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: #25D366; opacity: 0.55; animation: waPulse 2.4s ease-out infinite; z-index: -1;
}
.wa-widget.is-open .wa-widget__fab::before { animation: none; }
@keyframes waPulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.9); opacity: 0; }
}

.wa-widget__panel {
  width: min(330px, calc(100vw - 36px));
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); margin-bottom: var(--sp-3);
  animation: waIn 280ms var(--ease);
}
@keyframes waIn { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.95); } }
.wa-widget__head { background: #075E54; color: #fff; padding: var(--sp-4) var(--sp-5); position: relative; }
.wa-widget__head strong { display: block; font-size: 0.94rem; color: #fff; }
.wa-widget__head span { font-size: 0.72rem; color: rgba(255, 255, 255, 0.7); }
.wa-widget__close { position: absolute; right: 10px; top: 8px; color: #fff; font-size: 1.5rem; line-height: 1; width: 30px; height: 30px; }
.wa-widget__body { padding: var(--sp-4) var(--sp-5); background: #ECE5DD; }
.wa-bubble {
  background: var(--white); padding: var(--sp-3) var(--sp-4); border-radius: 0 10px 10px 10px;
  font-size: 0.86rem; color: var(--ink); box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-4); line-height: 1.6;
}
.wa-widget__quick { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wa-chip {
  padding: 6px 12px; border: 1px solid #25D366; border-radius: 100px;
  font-size: 0.74rem; color: #075E54; background: var(--white); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.wa-chip:hover, .wa-chip.is-active { background: #25D366; color: #fff; }
.wa-widget__go { border-radius: 0; letter-spacing: 0.1em; }
@media (max-width: 480px) { .wa-widget { right: 12px; bottom: 12px; } }

.mobile-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
  background: var(--ink); border-top: 2px solid transparent; border-image: var(--metal) 1;
}
.mobile-cta a {
  flex: 1; padding: var(--sp-4) var(--sp-2); text-align: center;
  font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; font-weight: 700;
}
.mobile-cta a + a { border-left: 1px solid rgba(255, 255, 255, 0.14); color: var(--accent-300); }
@media (max-width: 640px) {
  .mobile-cta { display: flex; }
  body { padding-bottom: 54px; }
  .wa-widget { bottom: 66px; }
}

/* ---------------------------------------------------------------------
   19. 3D PAGE TRANSITIONS
   ---------------------------------------------------------------------
   Narrative: a blueprint is drawn in wireframe, then extrudes and
   solidifies into a finished surface - "made from scratch".

   Two halves:
     .pt.is-building  runs on link click, before navigation
     .pt.is-revealing runs on load, lifting the solid away
   --------------------------------------------------------------------- */
.pt {
  /* Out of layout entirely until a transition runs. .pt__floor is 200vmax
     across and escapes both overflow and clip-path because .pt__stage is a
     preserve-3d context - left in the document it added ~335px of horizontal
     overflow on a phone, so the browser widened the layout viewport, zoomed
     out to fit, and pushed the header and its menu button off the side. */
  display: none;
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none; opacity: 0; visibility: hidden;
  /* Clip to the viewport. .pt__floor is 200vmax across, and because this
     overlay is position:fixed the body's overflow-x:hidden cannot contain
     it - without this the whole document becomes nearly twice the screen
     width on a phone, the browser zooms out to fit, and the header (with
     the menu button) is pushed off the side.
     clip-path rather than overflow: .pt__stage uses transform-style:
     preserve-3d, and 3D-rendered descendants escape ordinary overflow
     clipping. clip-path applies regardless. */
  overflow: hidden;
  clip-path: inset(0);
  perspective: 1400px; perspective-origin: 50% 45%;
  background: radial-gradient(ellipse at 50% 40%, #16233A 0%, #0B1220 70%, #070B13 100%);
}
.pt.is-active { display: block; opacity: 1; visibility: visible; pointer-events: all; }

.pt__stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  display: grid; place-items: center;
}

/* Blueprint grid floor, rotated away into depth */
.pt__floor {
  position: absolute; left: 50%; top: 62%;
  width: 200vmax; height: 200vmax;
  margin-left: -100vmax; margin-top: -100vmax;
  transform: rotateX(74deg) translateZ(-120px);
  background-image:
    linear-gradient(to right, var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line) 1px, transparent 1px);
  background-size: 70px 70px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 42%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 42%);
  opacity: 0;
}

/* The wireframe that draws, then fills */
.pt__svg { position: relative; width: min(56vw, 460px); height: auto; transform-style: preserve-3d; }
.pt__svg .pt-line {
  fill: none; stroke: var(--accent-400); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600);
}
.pt__svg .pt-fill { opacity: 0; fill: url(#ptMetal); }

.pt__label {
  position: absolute; left: 0; right: 0; bottom: 16%;
  text-align: center; color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-xs); letter-spacing: 0.32em; text-transform: uppercase;
  opacity: 0;
}

/* ---- BUILDING (on exit) ----------------------------------------
   Budget: 380ms end to end. The wireframe draws while the outgoing
   page recedes behind it, so the two read as one movement rather
   than a sequence of two.
   ---------------------------------------------------------------- */
.pt.is-building { animation: ptIn 220ms var(--ease) forwards; }
.pt.is-building .pt__floor { animation: ptFloor 850ms var(--ease) forwards; }
.pt.is-building .pt-line   { animation: ptDraw 620ms var(--ease) forwards; }
.pt.is-building .pt-fill   { animation: ptFill 500ms var(--ease) 500ms forwards; }
.pt.is-building .pt__svg   { animation: ptExtrude 900ms var(--ease) forwards; }
.pt.is-building .pt__label { animation: ptLabel 700ms var(--ease) 220ms forwards; }

/* The page being left behind recedes into depth. This is what makes
   the transition read as spatial rather than as a wipe. */
body.pt-exit main {
  animation: ptRecede var(--dur-page) var(--ease) forwards;
  transform-origin: 50% 40%;
}
@keyframes ptRecede {
  0%   { opacity: 1; transform: perspective(1400px) translate3d(0, 0, 0) rotateX(0deg); }
  100% { opacity: 0; transform: perspective(1400px) translate3d(0, 0, -50px) rotateX(2deg); }
}

@keyframes ptIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ptFloor {
  0%   { opacity: 0;    transform: rotateX(74deg) translateZ(-260px); }
  100% { opacity: 0.85; transform: rotateX(74deg) translateZ(-120px); }
}
@keyframes ptDraw { to { stroke-dashoffset: 0; } }
@keyframes ptFill { to { opacity: 1; } }
/* Resolves from 0.95, never from 0. */
@keyframes ptExtrude {
  0%   { transform: rotateX(6deg) rotateY(-5deg) scale(0.95); }
  100% { transform: rotateX(0deg) rotateY(0deg)  scale(1); }
}
@keyframes ptLabel {
  0%   { opacity: 0; transform: translate3d(0, 8px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---- REVEALING (on enter) --------------------------------------
   The solid lifts away while the new page resolves underneath it.
   ---------------------------------------------------------------- */
.pt.is-revealing { animation: ptOut 720ms var(--ease) forwards; }
.pt.is-revealing .pt__svg { animation: ptLift 720ms var(--ease) forwards; }
.pt.is-revealing .pt-fill { opacity: 1; }
.pt.is-revealing .pt-line { stroke-dashoffset: 0; }
.pt.is-revealing .pt__floor { opacity: 0.85; animation: ptFloorOut 720ms var(--ease) forwards; }

@keyframes ptOut {
  0%   { opacity: 1; visibility: visible; }
  99%  { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes ptLift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  100% { transform: translate3d(0, -8%, 0) scale(1.12); opacity: 0; }
}
@keyframes ptFloorOut {
  0%   { opacity: 0.85; transform: rotateX(74deg) translateZ(-120px); }
  100% { opacity: 0;    transform: rotateX(74deg) translateZ(140px); }
}

/* The arriving page: blueprint resolving into the finished room. */
body.pt-enter main { animation: ptContent 700ms var(--ease) 120ms backwards; }
@keyframes ptContent {
  0%   { opacity: 0; transform: perspective(1400px) translate3d(0, 0, -40px) scale(0.95); }
  100% { opacity: 1; transform: perspective(1400px) translate3d(0, 0, 0) scale(1); }
}

/* Motion-sensitive users get a plain crossfade, no 3D, no delay. */
@media (prefers-reduced-motion: reduce) {
  .pt, .pt__floor, .pt__svg, .pt__label { animation: none !important; }
  body.pt-exit main { animation: none !important; opacity: 1 !important; }
  .pt.is-active { opacity: 0; visibility: hidden; }
  body.pt-enter main { animation: none !important; }
}

/* ---------------------------------------------------------------------
   20. ADMIN CMS
   --------------------------------------------------------------------- */
body.admin { background: var(--paper-200); }

.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5);
  background: linear-gradient(150deg, var(--blueprint-bg) 0%, #23324B 60%, var(--accent-700) 160%);
  position: relative; overflow: hidden;
}
.auth-wrap::before {
  content: ''; position: absolute; inset: 0; opacity: 0.4;
  background-image:
    linear-gradient(to right, var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line) 1px, transparent 1px);
  background-size: 52px 52px;
}
.auth-card {
  width: 100%; max-width: 430px; background: var(--white);
  border-radius: var(--radius-lg); padding: var(--sp-7) var(--sp-6);
  box-shadow: var(--shadow-lg); position: relative; z-index: 1;
}
.auth-card__brand { text-align: center; margin-bottom: var(--sp-6); }
.auth-card h1 { font-size: 1.3rem; text-align: center; margin-bottom: var(--sp-2); }
.auth-card__sub { text-align: center; font-size: 0.85rem; color: var(--muted); margin-bottom: var(--sp-6); }
.auth-foot { text-align: center; margin-top: var(--sp-5); font-size: var(--fs-xs); color: var(--muted); }

.admin-shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 1024px) { .admin-shell { grid-template-columns: 250px 1fr; } }

.admin-side { background: var(--ink); color: rgba(255, 255, 255, 0.7); padding: var(--sp-5) 0; display: flex; flex-direction: column; }
@media (max-width: 1023px) {
  .admin-side {
    position: fixed; inset: 0 auto 0 0; width: 250px; z-index: 90;
    transform: translateX(-100%); transition: transform var(--dur) var(--ease);
  }
  .admin-side.is-open { transform: none; box-shadow: var(--shadow-lg); }
}
.admin-side__brand { padding: 0 var(--sp-5) var(--sp-5); border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: var(--sp-4); }
.admin-side__brand .brand__name { color: #fff; font-size: 1.3rem; }
.admin-nav { flex: 1; }
.admin-nav a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0.78rem var(--sp-5); color: rgba(255, 255, 255, 0.68);
  font-size: 0.88rem; border-left: 3px solid transparent; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.admin-nav a:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.admin-nav a.is-active { background: rgba(232, 106, 23, 0.14); color: var(--accent-300); border-left-color: var(--accent-500); }
.admin-nav__sep { padding: var(--sp-4) var(--sp-5) var(--sp-2); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.32); }
.admin-side__foot { padding: var(--sp-4) var(--sp-5) 0; border-top: 1px solid rgba(255,255,255,0.1); font-size: var(--fs-xs); }
.admin-side__foot a { color: var(--accent-300); }

.admin-main { padding: var(--sp-5); min-width: 0; }
@media (min-width: 700px) { .admin-main { padding: var(--sp-6); } }

.admin-bar {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-6); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line);
}
.admin-bar h1 { margin: 0; font-size: 1.55rem; }
.admin-bar__spacer { flex: 1; }
.admin-burger { display: none; }
@media (max-width: 1023px) {
  .admin-burger { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }

  /* Sticky on phones. Settings runs past 3,500px, and without this the only
     way back to the menu is scrolling all the way to the top. The bar shares
     the page background, so it reads as part of the page rather than a bar
     stuck over it. */
  .admin-bar {
    position: sticky; top: 0; z-index: 50;
    background: var(--paper-200);
    padding-top: var(--sp-4);
    box-shadow: 0 10px 18px -14px rgba(28, 23, 20, 0.55);
  }
}

.stat-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); margin-bottom: var(--sp-6); }
@media (min-width: 1000px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); border-top: 3px solid transparent; border-image: var(--metal) 1; }
.stat__label { display: block; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.stat__value { display: block; font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--ink); line-height: 1.15; margin-top: var(--sp-2); }
.stat__delta { display: block; font-size: var(--fs-xs); color: var(--ok); margin-top: var(--sp-1); }
.stat--alt { border-image: none; border-top-color: var(--ink); }

.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--sp-6); overflow: hidden; }
.panel__head {
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; background: var(--paper-50);
}
.panel__head h2, .panel__head h3 { margin: 0; font-size: 1.1rem; }
.panel__head .btn { margin-left: auto; }
.panel__body { padding: var(--sp-5); }
.panel__body--flush { padding: 0; }

.data-table { font-size: 0.88rem; }
.data-table th {
  background: var(--paper-100); text-align: left; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.data-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--paper-50); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table__thumb { width: 62px; height: 46px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); }
.data-table__actions { display: flex; gap: var(--sp-2); white-space: nowrap; }

.btn-icon {
  padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; background: var(--white);
  color: var(--ink); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); text-transform: uppercase;
}
.btn-icon:hover { border-color: transparent; background: var(--metal); color: #fff; }
.btn-icon--danger { color: var(--error); border-color: rgba(176, 42, 34, 0.3); }
.btn-icon--danger:hover { background: var(--error); border-color: var(--error); color: #fff; }

.status-pill { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.status-new        { background: var(--accent-100); color: var(--accent-700); }
.status-contacted  { background: rgba(28, 23, 20, 0.09);  color: var(--ink-soft); }
.status-site_visit { background: rgba(90, 120, 180, 0.16); color: #3B5A8C; }
.status-quoted     { background: rgba(180, 106, 18, 0.16); color: var(--warn); }
.status-won        { background: rgba(30, 122, 84, 0.14);  color: var(--ok); }
.status-lost       { background: rgba(176, 42, 34, 0.11);  color: var(--error); }

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
.filter-bar .field { min-width: 150px; flex: 1; }
.filter-bar .field label { margin-bottom: 5px; }

.inline-form { display: flex; gap: var(--sp-2); align-items: center; }
.inline-form select, .inline-form input { padding: 5px 9px; font-size: 0.82rem; }
.inline-form select { min-width: 124px; padding-right: 2rem; background-position: right 0.5rem center; }


.help-note {
  background: var(--accent-100); border-left: 3px solid var(--accent-500);
  padding: var(--sp-4); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.85rem; margin-bottom: var(--sp-5); color: var(--ink-soft);
}
.help-note strong { color: var(--accent-700); }

.tier-editor { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .tier-editor { grid-template-columns: repeat(3, 1fr); } }
.tier-editor__card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-5); background: var(--paper-50);
  border-top: 3px solid transparent; border-image: var(--metal) 1;
}
.tier-editor__card h3 { font-size: 1.25rem; margin-bottom: var(--sp-4); }
.rate-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.preview-strip {
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-5); font-size: 0.85rem;
}
.preview-strip b { color: var(--accent-300); display: block; font-family: var(--font-display); font-size: 1.15rem; }
.preview-strip span { color: rgba(255,255,255,0.55); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; }

/* Import review queue */
.import-item {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line);
  border-radius: var(--radius-sm); margin-bottom: var(--sp-2); background: var(--white);
}
.import-item.is-low { border-left: 3px solid var(--warn); }
.import-item.is-good { border-left: 3px solid var(--ok); }
.import-item__fields { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; flex: 1; min-width: 0; }
@media (min-width: 720px) { .import-item__fields { grid-template-columns: 110px 1fr 120px 130px; align-items: center; } }
.import-item input, .import-item select { padding: 6px 9px; font-size: 0.82rem; }
.conf {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 100px; white-space: nowrap;
}
.conf--high { background: rgba(30,122,84,0.13); color: var(--ok); }
.conf--mid  { background: rgba(180,106,18,0.15); color: var(--warn); }
.conf--low  { background: rgba(176,42,34,0.11); color: var(--error); }

/* ---------------------------------------------------------------------
   21. PRESS FEEDBACK + FOCUS GLOW
   ---------------------------------------------------------------------
   Anything a customer taps to choose something gets the same two-part
   response: it gives under the finger at 150ms, then springs back. The
   spring is what makes a tap feel acknowledged rather than merely
   registered. Grouped here so the interaction reads as one system.
   --------------------------------------------------------------------- */

.chip,
.opt__box,
.cat-card,
.wa-chip,
.btn-icon,
.carousel__btn {
  transition: transform var(--dur) var(--ease-spring),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

/* Down: fast and small. Up: the shared spring curve above. */
.chip:active,
.opt__box:active,
.wa-chip:active,
.btn-icon:active,
.carousel__btn:active {
  transform: scale(0.96);
  transition-duration: var(--dur-fast);
}

.cat-card:active { transform: scale(0.985); transition-duration: var(--dur-fast); }

/* A selected tile holds the metallic glow, so the choice stays visible
   after the finger lifts. */
.chip.is-active { box-shadow: var(--glow); }
.opt input:checked + .opt__box {
  box-shadow: 0 0 0 1px var(--accent-500), var(--glow);
}
.opt__box:hover { box-shadow: var(--glow); }

/* Focus ring picks up the same glow rather than a separate blue. */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px var(--accent-soft), var(--glow);
}

/* The drop target already changed colour on drag; it now carries the
   same glow as every other active state. */
.upload-zone.is-dragover { box-shadow: var(--glow); }

/* ---- admin panel: same rules, same feel ---- */
.data-table tbody tr { transition: background-color var(--dur) var(--ease); }

/* Motion-sensitive users keep the colour feedback, lose the movement. */
@media (prefers-reduced-motion: reduce) {
  .chip:active, .opt__box:active, .wa-chip:active, .btn-icon:active,
  .carousel__btn:active, .cat-card:active, .btn:active {
    transform: none !important;
  }
}

@media print {
  .site-header, .topbar, .site-footer, .wa-widget, .mobile-cta, .admin-side, .btn, .pt { display: none !important; }
  body { background: #fff; color: #000; }
}