/*
Theme Name: Rizco Contracting
Theme URI: https://rizcocontracting.ca
Author: Rizco Contracting Ltd.
Description: Custom architectural EPS theme for Rizco Contracting Ltd. Navy, cream and brass, built around real project photography.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rizco
*/

/* ==========================================================================
   Rizco Contracting Ltd. — "Architectural Editorial"
   Design system v2 · Architectural EPS Installation, Vancouver BC
   Palette: bone / plaster / espresso ink / clay accent
   Type:    Fraunces (display, incl. italic section labels) · Inter (UI)
   ========================================================================== */

:root {
  --bone:      #f3efe9;
  --paper:     #faf9f4;
  --plaster:   #e8e3d7;
  --plaster-2: #d9d3c5;
  --ink:       #0b2239;   /* brand navy (from logo) */
  --ink-2:     #16324f;
  --stone:     #59606e;   /* body text (cool slate) */
  --stone-lt:  #97a0af;
  --line:      rgba(11,34,57,.15);
  --line-2:    rgba(11,34,57,.08);
  --clay:      #b86f34;   /* brand gold (from logo rule) */
  --clay-2:    #d18b4c;
  --clay-deep: #93531f;
  --cream-line:rgba(255,255,255,.14);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --container: 1280px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-2: cubic-bezier(.4, 0, .1, 1);
}

/* --- Reset ----------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink-2);
  background: var(--bone);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}
/* fine paper grain — static, GPU-cheap, non-repainting */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px; will-change: auto;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }
::selection { background: var(--clay); color: #fff; }

/* --- Type -----------------------------------------------------------------*/
h1,h2,h3,h4 { font-family: var(--display); font-weight: 400; font-optical-sizing: auto; color: var(--ink); line-height: .98; letter-spacing: -.02em; }
.display { font-size: clamp(3rem, 8.5vw, 7.5rem); font-weight: 340; }
h1 { font-size: clamp(2.7rem, 6.5vw, 5.5rem); }
h2 { font-size: clamp(2.1rem, 5vw, 4rem); font-weight: 360; }
h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
p  { color: var(--stone); }
em { font-style: italic; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--ink-2); }

/* Section label. Deliberately NOT the mono / uppercase / wide-tracked "eyebrow
   with a dash" that every template ships: a monospace face reads as software,
   and this business is millwork. Display serif italic, sentence case, no rule. */
.kicker {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.02rem, 1.25vw, 1.2rem); letter-spacing: 0; text-transform: none;
  color: var(--clay-deep); display: block; line-height: 1.15;
}
.kicker::before { display: none; }

/* --- Layout ---------------------------------------------------------------*/
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.section { padding: clamp(4.5rem, 11vw, 9rem) 0; }
.section--sm { padding: clamp(3rem, 6vw, 5rem) 0; }
.rule { height: 1px; background: var(--line); border: 0; }
.bg-plaster { background: var(--plaster); }
.bg-paper { background: var(--paper); }
.bg-ink { background: var(--ink); color: #d8cfc0; }
.bg-ink h1,.bg-ink h2,.bg-ink h3 { color: #fff; }

.head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head h2 { margin: 1.2rem 0 0; }
.head--between { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }

/* --- Buttons / links ------------------------------------------------------*/
.btn {
  --bg: var(--ink); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; gap: .7rem;
  padding: 1.05rem 1.9rem; font-family: var(--sans); font-weight: 500; font-size: .92rem;
  color: var(--fg); background: var(--bg); border-radius: 100px; overflow: hidden;
  transition: transform .5s var(--ease), color .4s var(--ease-2);
  isolation: isolate; letter-spacing: .01em;
}
.btn > * { position: relative; z-index: 2; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--clay);
  transform: translateY(101%); transition: transform .5s var(--ease); }
.btn:hover::before { transform: translateY(0); }
.btn:hover { transform: translateY(-3px); }
.btn svg { width: 17px; height: 17px; }
.btn--clay { --bg: var(--clay); }
.btn--clay::before { background: var(--ink); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border: 1px solid var(--line); }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { --fg: #fff; border-color: var(--ink); }
.btn--onink { --bg: var(--paper); --fg: var(--ink); }
.btn--onink::before { background: var(--clay); }
.btn--onink:hover { color: #fff; }
.btn--outline-ink { --bg: transparent; --fg: #fff; border: 1px solid rgba(255,255,255,.28); }
.btn--outline-ink::before { background: var(--paper); }
.btn--outline-ink:hover { color: var(--ink); border-color: var(--paper); }

.tlink { font-family: var(--sans); font-size: .85rem; letter-spacing: .01em; text-transform: none;
  color: var(--ink); display: inline-flex; align-items: center; gap: .55rem; padding-bottom: 3px;
  background-image: linear-gradient(var(--clay), var(--clay)); background-size: 0 1px; background-repeat: no-repeat;
  background-position: left 100%; transition: background-size .4s var(--ease), color .3s; }
.tlink:hover { background-size: 100% 1px; color: var(--clay-deep); }
.tlink svg { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.tlink:hover svg { transform: translateX(5px); }


/* --- Header ---------------------------------------------------------------*/
.header { position: sticky; top: 0; z-index: 100; transition: box-shadow .4s, border-color .4s; border-bottom: 1px solid rgba(255,255,255,.10); background: var(--ink); }
.header.solid { border-color: rgba(255,255,255,.12); box-shadow: 0 4px 22px rgba(0,0,0,.30); }
/* navy header: light text + real logo lockup */
.brand__lockup { height: 96px; width: auto; display: block; }
@media (max-width: 720px) { .brand__lockup { height: 64px; } }
.header .nav__links a { color: rgba(233,238,244,.86); }
.header .nav__phone { color: #fff; }
.header .nav__toggle span { background: #fff; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .9rem; }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand__mark { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 500; font-size: 1.4rem; color: var(--ink); }
.brand__name { font-family: var(--display); font-weight: 500; font-size: 1.3rem; line-height: 1; color: var(--ink); }
.brand__tag { font-family: var(--sans); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--clay-deep); }
.nav__links { display: flex; gap: 2.2rem; }
.nav__links a { font-size: .92rem; font-weight: 450; color: var(--ink-2); position: relative; padding: .2rem 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0; background: var(--clay); transition: width .35s var(--ease); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { width: 100%; }
.nav__right { display: flex; align-items: center; gap: 1.4rem; }
.nav__phone { font-family: var(--sans); font-size: .82rem; color: var(--ink); letter-spacing: .04em; display: inline-flex; align-items: center; gap: .5rem; }
.nav__phone svg { width: 16px; height: 16px; color: var(--clay); }
.nav__toggle { display: none; width: 46px; height: 46px; position: relative; }
.nav__toggle span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease), opacity .2s; }
.nav__toggle span:nth-child(1){ top: 18px; } .nav__toggle span:nth-child(2){ top: 24px; } .nav__toggle span:nth-child(3){ top: 30px; }
body.menu-open .nav__toggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
body.menu-open .nav__toggle span:nth-child(2){ opacity: 0; }
body.menu-open .nav__toggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* header when over dark hero */
.header.on-dark:not(.solid) .brand__name, .header.on-dark:not(.solid) .brand__mark { color: #fff; border-color: rgba(255,255,255,.25); }
.header.on-dark:not(.solid) .nav__links a { color: rgba(255,255,255,.82); }
.header.on-dark:not(.solid) .nav__phone { color: #fff; }
.header.on-dark:not(.solid) .brand__tag { color: var(--clay-2); }
.header.on-dark:not(.solid) .nav__toggle span { background: #fff; }

/* --- Mobile nav -----------------------------------------------------------*/
.mnav { position: fixed; inset: 0; z-index: 99; background: var(--ink); color: #fff; padding: var(--pad);
  display: flex; flex-direction: column; justify-content: center; gap: .3rem;
  clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease); }
body.menu-open .mnav { clip-path: inset(0 0 0 0); }
/* with the menu open, leave only the close button in the header */
body.menu-open .header { background: transparent !important; border-color: transparent; box-shadow: none; }
body.menu-open .header .brand, body.menu-open .header .nav__right { opacity: 0; pointer-events: none; }
.mnav a.mnav__item { font-family: var(--display); font-size: clamp(2rem, 9vw, 3.2rem); font-weight: 360; color: #efe7d8; padding: .35rem 0; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: baseline; gap: 1rem; }
.mnav a.mnav__item span { font-family: var(--sans); font-size: .8rem; color: var(--clay-2); }
.mnav a.mnav__item:hover { color: var(--clay-2); }
.mnav__foot { margin-top: 2rem; font-family: var(--sans); font-size: .8rem; color: #cbc0af; letter-spacing: .08em; }

/* --- Hero -----------------------------------------------------------------*/
.hero { position: relative; background: linear-gradient(180deg, #081a2e 0%, #0b2239 55%, #0f2c48 100%); color: #eef1f6; overflow: hidden; padding: clamp(4rem,10vw,7rem) 0 clamp(3rem,6vw,5rem); }
.hero__grid { position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image: linear-gradient(var(--cream-line) 1px, transparent 1px), linear-gradient(90deg, var(--cream-line) 1px, transparent 1px);
  background-size: 100% 25%, 12.5% 100%; }
.hero__glow { position: absolute; z-index: 0; width: 55vw; height: 55vw; right: -12vw; bottom: -18vw;
  background: radial-gradient(circle, rgba(180,136,58,.26), transparent 62%); }
.hero__in { position: relative; z-index: 2; }
.hero .kicker { color: var(--clay-2); }
.hero__display { margin: clamp(1.5rem,4vw,2.8rem) 0; color: #fff; }
.hero__display em { color: var(--clay-2); }
.hero__display .thin { -webkit-text-stroke: 1px rgba(255,255,255,.55); color: transparent; }
.hero__bottom { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: end; }
.hero__lead { max-width: 44ch; color: #cec4b3; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.hero__meta { display: grid; gap: 1.1rem; justify-items: start; border-left: 1px solid rgba(255,255,255,.14); padding-left: clamp(1.5rem,3vw,2.5rem); }
.hero__meta .row b { font-family: var(--display); font-size: 2rem; color: #fff; line-height: 1; display: block; }
.hero__meta .row span { font-family: var(--sans); font-size: .8rem; letter-spacing: .01em; text-transform: none; color: #b6ab99; }


/* --- Service index (editorial list) ---------------------------------------*/
.svc { border-top: 1px solid var(--line); }
.svc__row { display: grid; grid-template-columns: 5rem 1fr 1.1fr auto; gap: clamp(1rem,3vw,3rem); align-items: center;
  padding: clamp(1.8rem,3.5vw,2.8rem) 0; border-bottom: 1px solid var(--line); position: relative; transition: padding .5s var(--ease); }
.svc__row::before { content: ""; position: absolute; inset: 0; background: var(--paper); z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); }
.svc__row:hover::before { transform: scaleY(1); }
.svc__row:hover { padding-inline: clamp(1rem,2vw,2rem); }
/* Big italic serif numeral, same treatment as the process steps, so the two
   numbered sections read as one system rather than a mono/parens AI tell. */
.svc__num { font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 1.9rem; line-height: 1; color: var(--clay-2); }
.svc__title { font-family: var(--display); font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 400; color: var(--ink); line-height: 1.02; }
.svc__desc { color: var(--stone); font-size: .98rem; max-width: 42ch; }
.svc__go { width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background .4s var(--ease), color .4s, border-color .4s, transform .4s var(--ease); }
.svc__go svg { width: 18px; height: 18px; }
.svc__row:hover .svc__go { background: var(--clay); border-color: var(--clay); color: #fff; transform: rotate(-45deg); }
@media (max-width: 860px) {
  .svc__row { grid-template-columns: 3rem 1fr auto; }
  .svc__desc { grid-column: 2 / 4; max-width: none; }
}
@media (max-width: 560px) {
  /* Stack cleanly: number, then title with the arrow beside it, then copy.
     The desktop 4-up grid collapsed into a scattered mess otherwise. */
  .svc__row { grid-template-columns: 1fr auto; gap: .5rem 1rem;
    padding: 1.8rem 0; align-items: start; }
  .svc__num { grid-column: 1; grid-row: 1; align-self: center; }
  .svc__title { grid-column: 1; grid-row: 2; text-align: left; font-size: 1.7rem; }
  .svc__go { grid-column: 2; grid-row: 1; width: 42px; height: 42px; align-self: center; }
  .svc__desc { grid-column: 1 / 3; grid-row: 3; margin-top: .4rem; font-size: .95rem; }
  /* No hover on touch, so don't reserve the inset-padding motion. */
  .svc__row:hover { padding-inline: 0; }
}

/* --- Molding "figure plates" (placeholders) -------------------------------*/
.plate { position: relative; background: linear-gradient(150deg, var(--plaster), var(--plaster-2)); overflow: hidden; color: rgba(23,19,15,.5);
  display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(23,19,15,.06); }
.plate__profile { width: 62%; height: 62%; color: rgba(23,19,15,.42); }
.plate__profile.light { color: rgba(255,255,255,.5); }
.plate__fig { position: absolute; left: 1rem; bottom: .9rem; font-family: var(--sans); font-size: .8rem; letter-spacing: .01em; text-transform: none; color: var(--clay-deep); }
.plate--dark { background: linear-gradient(150deg, #16324f, #0b2239); color: rgba(255,255,255,.5); }
.plate--dark .plate__fig { color: var(--clay-2); }

/* --- Real photography --------------------------------------------------- */
.plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; }
.tile { position: relative; }
.tile .plate { position: absolute; inset: 0; }
.brand__logo { width: 46px; height: 46px; flex-shrink: 0; display: block;
  background: var(--ink);
  -webkit-mask: url(../img/logo-mark.svg) center/contain no-repeat;
          mask: url(../img/logo-mark.svg) center/contain no-repeat; }
.header.on-dark:not(.solid) .brand__logo { background: #fff; }
.footer .brand__logo { background: #fff; }
/* real logo lockup — blends into navy footer / mobile menu */
.footer__logo { display: block; margin-bottom: 1.2rem; }
.footer__logo img { width: 220px; max-width: 70%; height: auto; display: block; }
.mnav__logo { width: 200px; height: auto; display: block; margin: 0 0 2rem; }
.hero__photo { position: absolute; inset: -9% 0; z-index: 0; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(9,26,45,.95) 0%, rgba(9,26,45,.80) 40%, rgba(9,26,45,.46) 100%),
              linear-gradient(0deg, rgba(9,26,45,.9), transparent 42%); }
.hero .hero__grid { z-index: 1; opacity: .28; }
.hero .hero__glow { z-index: 1; }
.phero__photo { position: absolute; inset: 0; z-index: 0; }
.phero__photo img { width: 100%; height: 100%; object-fit: cover; }
.phero__photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(9,26,45,.94), rgba(9,26,45,.7)); }
.phero .hero__grid { z-index: 1; }

/* --- About / editorial split ----------------------------------------------*/
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem,6vw,5.5rem); align-items: center; }
.split__media { position: relative; }
.split__media .plate { aspect-ratio: 4/5; border-radius: 2px; }
.split__tag { position: absolute; bottom: -1px; left: -1px; background: var(--ink); color: #efe7d8; padding: 1.2rem 1.5rem; max-width: 240px; }
.split__tag b { font-family: var(--display); font-size: 1.6rem; color: #fff; display: block; line-height: 1; margin-bottom: .3rem; }
.split__tag span { font-family: var(--sans); font-size: .78rem; letter-spacing: .01em; text-transform: none; color: var(--clay-2); }
.checklist { display: grid; gap: 0; margin: 1.8rem 0 2.2rem; }
.checklist li { display: flex; gap: 1rem; align-items: baseline; padding: .95rem 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 1rem; }
.checklist li:last-child { border-bottom: 1px solid var(--line); }
.checklist .n { font-family: var(--sans); font-size: .72rem; color: var(--clay-deep); flex-shrink: 0; }

/* --- Process --------------------------------------------------------------*/
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--cream-line); }
/* Left padding on every column but the first, so text never crowds the rule
   beside it while column one still lines up with the heading above. */
.step { padding: 2.2rem clamp(1rem,2vw,1.8rem) 0 clamp(1.5rem,2.4vw,2.4rem);
  border-right: 1px solid var(--cream-line); }
.step:first-child { padding-left: 0; }
.step:last-child { border-right: 0; }
/* Big serif numeral carries the step; the label sits quietly beside it. */
.step__n { display: flex; align-items: baseline; gap: .65rem; font-family: var(--sans);
  font-size: .84rem; letter-spacing: .01em; color: var(--clay-2); }
.step__n b { font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 2rem; line-height: .9; color: var(--clay-2); opacity: .9; }
.step h3 { color: #fff; margin: 1.2rem 0 .7rem; font-size: 1.5rem; }
.step p { color: #b6ab99; font-size: .95rem; }
@media (max-width: 860px){ .steps { grid-template-columns: 1fr 1fr; } .step { border-bottom: 1px solid var(--cream-line); padding-bottom: 2rem; } .step:nth-child(2n){ border-right:0; } .step:nth-child(2n+1){ padding-left: 0; } }
@media (max-width: 480px){ .steps { grid-template-columns: 1fr; } .step { border-right: 0; padding-left: 0; } }

/* --- Gallery --------------------------------------------------------------*/
.gal { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; grid-auto-flow: dense; }
.gal .tile { position: relative; overflow: hidden; border-radius: 2px; cursor: pointer; }
.gal .tile .plate { position: absolute; inset: 0; transition: transform .8s var(--ease); }
.gal .tile:hover .plate { transform: scale(1.05); }
.tile--a { grid-column: span 7; aspect-ratio: 16/11; }
.tile--b { grid-column: span 5; aspect-ratio: 4/5; }
.tile--c { grid-column: span 4; aspect-ratio: 1; }
.tile--d { grid-column: span 4; aspect-ratio: 1; }
.tile--e { grid-column: span 4; aspect-ratio: 1; }
.tile--wide { grid-column: span 8; aspect-ratio: 16/7; }
.tile--tall { grid-column: span 4; aspect-ratio: 3/4.4; }
.tile__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 1.4rem 1.3rem 1.1rem;
  background: linear-gradient(transparent, rgba(20,16,12,.82)); color: #fff; transform: translateY(10px); opacity: 0; transition: .45s var(--ease); }
.gal .tile:hover .tile__cap { transform: none; opacity: 1; }
.tile__cap b { font-family: var(--display); font-size: 1.25rem; font-weight: 400; display: block; }
.tile__cap span { font-family: var(--sans); font-size: .8rem; letter-spacing: .01em; text-transform: none; color: var(--clay-2); }
.preview-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
@media (max-width: 760px) and (min-width: 481px){
  .gal, .preview-grid { grid-template-columns: repeat(2, 1fr); }
  .gal .tile, .preview-grid .tile { grid-column: span 1 !important; }
  /* Keep a portrait and a landscape rhythm rather than forcing every frame to
     a square, which crops the detail shots the sequence depends on. */
  .gal .tile, .preview-grid .tile { aspect-ratio: 4/5 !important; }
  .gal .tile:nth-child(4n+2), .preview-grid .tile:nth-child(4n+2) { aspect-ratio: 1 !important; }
  .gal .tile:nth-child(4n+3), .preview-grid .tile:nth-child(4n+3) { aspect-ratio: 1 !important; }
}
@media (max-width: 480px){
  /* One column reads better than two thumbnails too small to show the work.
     The span must be reset here too: the tiles carry an inline grid-column
     span from the template, which would otherwise create implicit columns and
     hand each tile a different width. */
  .gal, .preview-grid { grid-template-columns: 1fr; gap: .85rem; }
  .gal .tile, .preview-grid .tile { grid-column: span 1 !important; aspect-ratio: 4/3 !important; }
  .gal .tile:nth-child(3n+1), .preview-grid .tile:nth-child(3n+1) { aspect-ratio: 4/5 !important; }
}

/* --- Testimonials ---------------------------------------------------------*/
.quote-big { max-width: 960px; }
.quote-big blockquote { font-family: var(--display); font-weight: 340; font-size: clamp(1.8rem, 4vw, 3.1rem); line-height: 1.15; color: var(--ink); letter-spacing: -.02em; }
.quote-big blockquote em { color: var(--clay-deep); }
.quote-big .by { display: flex; align-items: center; gap: 1rem; margin-top: 2.2rem; }
.quote-big .by .av { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--clay-2); display: grid; place-items: center; font-family: var(--display); }
.quote-big .by b { color: var(--ink); font-family: var(--sans); font-weight: 600; font-size: .95rem; }
.quote-big .by span { font-family: var(--sans); font-size: .8rem; letter-spacing: .01em; text-transform: none; color: var(--stone-lt); display: block; }
.mini-quotes { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(1.5rem,3vw,2.5rem); margin-top: clamp(2.5rem,5vw,4rem); padding-top: clamp(2rem,4vw,3rem); border-top: 1px solid var(--line); }
.mini-quotes p { color: var(--ink-2); font-size: 1.02rem; }
.mini-quotes .stars { color: var(--clay); letter-spacing: 2px; font-size: .85rem; margin-bottom: .7rem; }
.mini-quotes .who { font-family: var(--sans); font-size: .8rem; letter-spacing: .01em; text-transform: none; color: var(--stone-lt); margin-top: .9rem; }
@media (max-width: 720px){ .mini-quotes { grid-template-columns: 1fr; } }

/* --- FAQ ------------------------------------------------------------------*/
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; text-align: left; display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: center; padding: 1.6rem 0; }
.faq__q .qn { font-family: var(--sans); font-size: .78rem; color: var(--clay-deep); }
.faq__q .qt { font-family: var(--display); font-size: clamp(1.3rem,2.2vw,1.65rem); font-weight: 400; color: var(--ink); }
.faq__q .plus { width: 20px; height: 20px; position: relative; }
.faq__q .plus::before, .faq__q .plus::after { content: ""; position: absolute; background: var(--clay); transition: transform .35s var(--ease); }
.faq__q .plus::before { top: 9px; left: 0; right: 0; height: 1.5px; }
.faq__q .plus::after { left: 9px; top: 0; bottom: 0; width: 1.5px; }
.faq__item.open .plus::after { transform: scaleY(0); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq__a p { padding: 0 0 1.7rem 4rem; max-width: 70ch; }
@media (max-width: 560px){ .faq__q { grid-template-columns: 1fr auto; } .faq__q .qn { display: none; } .faq__a p { padding-left: 0; } }

/* --- CTA ------------------------------------------------------------------*/
.cta { position: relative; overflow: hidden; background: var(--ink); color: #efe7d8; border-radius: 3px; padding: clamp(3rem,8vw,6rem) var(--pad); text-align: center; }
.cta h2 { color: #fff; }
.cta p { color: #cec4b3; max-width: 52ch; margin: 1.2rem auto 2.2rem; }
.cta .hero__glow { right: -20vw; bottom: -30vw; }
.cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; }

/* --- Contact --------------------------------------------------------------*/
.contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem,6vw,5rem); }
.cinfo { display: grid; gap: 0; align-content: start; margin-top: 2rem; }
.cinfo__row { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.3rem 0; border-top: 1px solid var(--line); align-items: baseline; }
.cinfo__row:last-child { border-bottom: 1px solid var(--line); }
.cinfo__k { font-family: var(--sans); font-size: .8rem; letter-spacing: .01em; text-transform: none; color: var(--clay-deep); }
.cinfo__v { color: var(--ink); font-size: 1.15rem; }
.cinfo__v a:hover { color: var(--clay-deep); }
.form { background: var(--paper); border: 1px solid var(--line); border-radius: 3px; padding: clamp(1.6rem,4vw,2.8rem); }
.field { margin-bottom: 1.3rem; }
.field label { display: block; font-family: var(--sans); font-size: .8rem; letter-spacing: .01em; text-transform: none; color: var(--stone); margin-bottom: .5rem; }
.field input, .field select, .field textarea { width: 100%; padding: .9rem .2rem; font: inherit; font-size: 1.02rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line); transition: border-color .3s; }
.field input::placeholder, .field textarea::placeholder { color: var(--stone-lt); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--clay); }
.field textarea { min-height: 120px; resize: vertical; }
.field input[type="file"] { padding: .6rem 0; font-family: var(--sans); font-size: .78rem; color: var(--stone); cursor: pointer; border-bottom: 1px dashed var(--line); }
.field input[type="file"]::file-selector-button { font: inherit; font-family: var(--sans); font-size: .85rem; margin-right: 1rem;
  padding: .55rem 1.15rem; border: 1px solid var(--line); border-radius: 100px; background: var(--paper); color: var(--ink);
  cursor: pointer; transition: border-color .2s, background .2s; }
.field input[type="file"]::file-selector-button:hover { border-color: var(--clay); background: #fff; }
.field__hint { font-family: var(--sans); font-size: .8rem; letter-spacing: .01em; color: var(--stone-lt); margin-top: .5rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.form__note { font-family: var(--sans); font-size: .8rem; letter-spacing: .01em; color: var(--stone-lt); text-align: center; margin-top: 1rem; }

/* Jetpack contact form (WordPress) — styled to match the custom form */
.form .contact-form label, .form .grunion-field-label { display: block; font-family: var(--sans); font-size: .8rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--stone); margin-bottom: .5rem; }
.form .contact-form input[type="text"], .form .contact-form input[type="email"], .form .contact-form input[type="tel"],
.form .contact-form select, .form .contact-form textarea {
  width: 100%; padding: .9rem .2rem; font: inherit; font-size: 1.02rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; transition: border-color .2s; }
.form .contact-form input:focus, .form .contact-form select:focus, .form .contact-form textarea:focus { outline: none; border-color: var(--clay); }
.form .contact-form textarea { min-height: 120px; resize: vertical; }
.form .grunion-field-wrap { margin-bottom: 1.3rem; }
/* Three file slots (Jetpack allows only one file each) read as a single group */
.form .grunion-field-file-wrap { margin-bottom: .75rem; }
.form .grunion-field-file-wrap + .grunion-field-file-wrap .grunion-field-label { opacity: .6; }
.form .grunion-field-file-wrap:last-of-type { margin-bottom: 1.3rem; }
/* Jetpack's shortcode renders only an empty dropzone shell: the visible UI (icon,
   "Select a file" link, dashed border) comes from .wp-block-jetpack-dropzone, which
   the block editor emits and the shortcode does not. Left alone the control is 0px
   tall and invisible. Hide the dead overlay and surface the native input instead.
   Uploads still work: Jetpack binds them to the input's change event. */
.form .jetpack-form-file-field__dropzone-inner { display: none; }
.form .jetpack-form-file-field__dropzone input[type="file"] {
  display: block; width: 100%; padding: .55rem 0; cursor: pointer;
  font-family: var(--sans); font-size: .86rem; color: var(--stone); }
.form .jetpack-form-file-field__dropzone input[type="file"]::file-selector-button {
  margin-right: .9rem; padding: .5rem 1.15rem; border: 1px solid var(--line); border-radius: 100px;
  background: transparent; color: var(--ink); font-family: var(--sans); font-size: .8rem;
  cursor: pointer; transition: border-color .25s var(--ease), color .25s var(--ease); }
.form .jetpack-form-file-field__dropzone input[type="file"]::file-selector-button:hover {
  border-color: var(--clay); color: var(--clay); }
/* .contact-submit is Jetpack's <p> wrapper, not the button — keep it bare */
.form .contact-form .contact-submit { margin: 0; padding: 0; background: none; border: 0; }
.form .contact-form button[type="submit"], .form .contact-form input[type="submit"], .form .contact-form .pushbutton-wide {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1.05rem 1.9rem; border: 0; border-radius: 100px; background: var(--clay); color: #fff;
  font-family: var(--sans); font-weight: 500; font-size: .92rem; cursor: pointer; transition: background .3s var(--ease); }
.form .contact-form button[type="submit"]:hover, .form .contact-form input[type="submit"]:hover, .form .contact-form .pushbutton-wide:hover { background: var(--clay-deep); }
/* Post-submit state. Jetpack leaves the empty form sitting under the thank-you
   (so it shows "This field is required" beside a success message) and offers a
   "← Back" link that just re-runs validation on it. Keep the thank-you only. */
.form .go-back-message { display: none; }
/* Jetpack ALWAYS renders the submission container and only adds
   .submission-success once a response is stored, so the state class is what
   must be matched. Keying off the container alone hides the form from every
   visitor. */
.form .contact-form-submission.submission-success ~ form.contact-form { display: none; }
.form .contact-form-submission.submission-success { padding: 1.5rem 0; }
.form .contact-form-submission.submission-success h4,
.form .contact-form-submission.submission-success p { font-family: var(--display); font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 400; color: var(--ink); line-height: 1.2; }
/* Jetpack error banner: hidden until Jetpack flags errors */
.form .contact-form .contact-form__error { display: none; }
.form .contact-form .contact-form__error.show-errors { display: flex; gap: .5rem; align-items: center;
  margin-bottom: 1rem; color: #a33; font-size: .9rem; }
@media (max-width: 720px){ .form__row { grid-template-columns: 1fr; } }

/* --- Page hero (subpages) -------------------------------------------------*/
.phero { background: var(--ink); color: #efe7d8; padding: clamp(3rem,8vw,6rem) 0 clamp(2.5rem,5vw,4rem); position: relative; overflow: hidden; }
.phero .hero__grid { opacity: .4; }
.phero__in { position: relative; z-index: 2; }
.phero h1 { color: #fff; margin: 1.2rem 0 0; }
.phero .crumbs { font-family: var(--sans); font-size: .8rem; letter-spacing: .01em; text-transform: none; color: #b6ab99; margin-top: 1.4rem; }
.phero .crumbs a:hover { color: var(--clay-2); }

/* --- Footer ---------------------------------------------------------------*/
.footer { background: var(--ink); color: #a89d8b; padding: clamp(3.5rem,7vw,5.5rem) 0 2rem; }
.footer__cta { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; padding-bottom: clamp(2.5rem,5vw,4rem); border-bottom: 1px solid rgba(255,255,255,.12); }
.footer__cta h2 { color: #fff; font-size: clamp(2rem,5vw,3.5rem); }
.footer__cta .kicker { color: var(--clay-2); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; padding: clamp(2.5rem,5vw,3.5rem) 0; }
.footer h4 { font-family: var(--sans); font-size: .8rem; letter-spacing: .01em; text-transform: none; color: #cbc0af; margin-bottom: 1.3rem; font-weight: 400; }
.footer__links { display: grid; gap: .8rem; }
.footer a:hover { color: var(--clay-2); }
.footer__brand p { max-width: 32ch; margin: 1.2rem 0 1.5rem; font-size: .95rem; }
.footer__soc { display: flex; gap: .7rem; }
.footer__soc a { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; display: grid; place-items: center; transition: .35s var(--ease); }
.footer__soc a:hover { background: var(--clay); border-color: var(--clay); color: #fff; transform: translateY(-3px); }
.footer__soc svg { width: 17px; height: 17px; }
.footer__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.8rem; font-family: var(--sans); font-size: .8rem; letter-spacing: .01em; text-transform: none; color: #8d8271; }
@media (max-width: 860px){ .footer__grid { grid-template-columns: 1fr 1fr; } .footer__cta { grid-template-columns: 1fr; } }
@media (max-width: 520px){ .footer__grid { grid-template-columns: 1fr; } }

/* --- Lightbox -------------------------------------------------------------*/
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(12,10,8,.985); display: none; align-items: center; justify-content: center; padding: var(--pad); }
.lightbox.open { display: flex; }
.lightbox__inner { max-width: 940px; width: 100%; }
.lightbox__inner .plate { aspect-ratio: 3/2; border-radius: 2px; }
.lightbox__inner img { display: block; margin: auto; width: 100%; max-height: 86vh; object-fit: contain; border-radius: 2px; }
.lightbox__close { position: absolute; top: 1.5rem; right: 1.8rem; color: #fff; font-family: var(--sans); font-size: .8rem; letter-spacing: .1em; }

/* --- Lenis smooth scroll --------------------------------------------------*/
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* --- Header: solid brand navy so the logo lockup blends seamlessly --------*/
.header { background: var(--ink); }
.header.solid { background: var(--ink); }

/* --- Intro / arrival ------------------------------------------------------*/
.intro { position: fixed; inset: 0; z-index: 1000; background: var(--ink); display: grid; place-items: center; will-change: transform; }
.intro__logo { width: min(340px, 64vw); height: auto; opacity: 0; transform: translateY(14px) scale(.98); }
.intro.play .intro__logo { animation: introLogo 1.05s var(--ease) forwards; }
.intro.done { transform: translateY(-101%); transition: transform 1s var(--ease); }
@keyframes introLogo { 0%{opacity:0;transform:translateY(14px) scale(.98)} 45%{opacity:1;transform:none} 100%{opacity:1;transform:none} }
body.intro-lock { overflow: hidden; height: 100vh; }

/* --- Parallax + cinematic showcase break ----------------------------------*/
[data-parallax] { will-change: transform; }
.showcase { position: relative; min-height: min(76vh, 880px); overflow: hidden; display: grid; place-items: center; }
.showcase__img { position: absolute; inset: -14% 0; z-index: 0; }
.showcase__img img { width: 100%; height: 100%; object-fit: cover; }
.showcase::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(9,24,42,.52), rgba(9,24,42,.66)); }
.showcase__in { position: relative; z-index: 2; text-align: center; color: #fff; padding: 0 var(--pad); max-width: 940px; }
/* On the photo break, clay went muddy against the stone. White + a centred
   hairline reads clearly at any crop. */
.showcase__in .kicker { color: #fff; opacity: .95; font-size: clamp(1.05rem, 1.4vw, 1.3rem); }
.showcase__in .kicker::after { content: ""; display: block; width: 34px; height: 1px;
  margin: .9rem auto 0; background: var(--clay-2); }
.showcase__in h2 { color: #fff; margin-top: 1.1rem; }
.showcase__in p { color: #d7ddea; margin: 1.2rem auto 0; max-width: 52ch; }

/* --- Reveal ---------------------------------------------------------------*/
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
[data-d="1"]{ transition-delay: .08s; } [data-d="2"]{ transition-delay: .16s; } [data-d="3"]{ transition-delay: .24s; } [data-d="4"]{ transition-delay: .32s; }

/* --- Responsive core ------------------------------------------------------*/
@media (max-width: 960px){ .hero__bottom { grid-template-columns: 1fr; gap: 2rem; } .hero__meta { border-left: 0; padding-left: 0; grid-auto-flow: column; } .split { grid-template-columns: 1fr; } .split__media { max-width: 460px; } .contact { grid-template-columns: 1fr; } }
@media (max-width: 720px){
  .nav__links, .nav__phone { display: none; }
  .nav__toggle { display: block; }
  .hero__meta { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  /* The quote button was wrapping to two lines and swallowing the header.
     Keep it on one line and let the logo hold its weight. */
  .nav__right .btn { padding: .7rem 1.15rem; font-size: .82rem; white-space: nowrap; }
  .nav { gap: .75rem; padding-block: .7rem; }
  .nav__toggle { flex-shrink: 0; }
}
@media (max-width: 400px){
  .brand__lockup { height: 54px; }
  .nav__right .btn { padding: .62rem .95rem; font-size: .78rem; }
  .nav { gap: .5rem; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .intro { display: none !important; }
  [data-parallax] { transform: none !important; }
}

/* --- Project map ----------------------------------------------------------*/
.mapwrap { position: relative; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: var(--paper); }
#projectmap { height: clamp(420px, 62vh, 680px); width: 100%; background: var(--plaster); z-index: 1; }
/* Warm CARTO's neutral grey toward the site's bone palette so the map reads as
   part of the page instead of an embedded widget. */
/* No tint on the tiles: the map should read as a real modern map (Voyager),
   not a stylised wash. */
#projectmap .leaflet-container { font-family: var(--sans); background: var(--plaster); }
.mapwrap__note { font-family: var(--sans); font-size: .78rem; color: var(--stone-lt);
  padding: .85rem 1.1rem; border-top: 1px solid var(--line); background: var(--paper); }

/* Pins: filled clay where work has been done, hollow where we simply serve. */
.pin { background: none; border: 0; }
.pin .pin__dot { display: flex; align-items: center; justify-content: center; border-radius: 50%;
  box-sizing: border-box; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pin--worked .pin__dot { background: var(--clay); color: #fff;
  border: 1.5px solid rgba(255,255,255,.9); box-shadow: 0 3px 14px rgba(11,34,57,.28); }
.pin--area .pin__dot { background: rgba(11,34,57,.14); border: 1.5px solid rgba(11,34,57,.4); }
.pin__n { font-family: var(--sans); font-weight: 600; font-size: .82rem; line-height: 1; }
.pin:hover .pin__dot, .pin.is-active .pin__dot { transform: scale(1.16); box-shadow: 0 6px 22px rgba(11,34,57,.4); }
.pin.is-active .pin--area .pin__dot, .pin--area.is-active .pin__dot { background: rgba(184,111,52,.45); border-color: var(--clay); }

.pin__tip.leaflet-tooltip { background: var(--ink); color: #fff; border: 0; border-radius: 3px;
  padding: .5rem .75rem; box-shadow: 0 6px 20px rgba(11,34,57,.3); font-family: var(--sans); }
.pin__tip.leaflet-tooltip b { display: block; font-size: .86rem; font-weight: 600; }
.pin__tip.leaflet-tooltip span { display: block; font-size: .74rem; color: var(--clay-2); margin-top: .1rem; }
.pin__tip.leaflet-tooltip::before { border-top-color: var(--ink); }

/* Area list, cross-linked with the pins */
  font-size: clamp(1.02rem, 1.25vw, 1.2rem); color: var(--clay-deep); margin-bottom: 1.4rem; }
  padding: .8rem 0; border-bottom: 1px solid var(--line-2); cursor: pointer;
  transition: color .25s var(--ease), padding-left .3s var(--ease); }
.area__n { font-family: var(--sans); font-size: .8rem; color: var(--stone-lt); }

/* Leaflet chrome, toned down to match */
.leaflet-control-zoom a { color: var(--ink) !important; border-color: var(--line) !important; }
.leaflet-control-attribution { font-size: .62rem !important; background: rgba(250,249,244,.85) !important; color: var(--stone-lt) !important; }
.leaflet-control-attribution a { color: var(--stone) !important; }

/* --- Service specialties --------------------------------------------------*/
/* Replaces the scrolling ticker: same terms, stated once, where they inform. */


/* --- Mobile refinements ---------------------------------------------------*/
@media (max-width: 560px){
  /* Ragged button widths read as unfinished; match them and give a real tap target. */
  .hero__actions { gap: .75rem; }
  .hero__actions .btn, .cta__actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero__display { font-size: clamp(2.6rem, 12.5vw, 3.4rem); }
  .hero__lead { font-size: 1.05rem; }
  .hero__meta b { font-size: 1.5rem; }

  /* Section rhythm: the desktop spacing leaves phones scrolling through air. */
  .section { padding: clamp(3.25rem, 12vw, 5rem) 0; }
  .head { margin-bottom: 2rem; }
  h2 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }

  /* Specialties read as a list, not a cramped two-up. */

  /* Give the form room and stop iOS zooming on focus (needs >=16px). */
  .form { padding: 1.4rem 1.15rem; }
  .form .contact-form input, .form .contact-form select, .form .contact-form textarea { font-size: 16px; }
  .form .contact-form button[type="submit"], .form .contact-form .pushbutton-wide { padding: 1rem 1.4rem; }

  /* Map needs height to be usable under a thumb. */
  #projectmap { height: 58vh; min-height: 360px; }

  /* Testimonial pull-quote was set at desktop scale. */
  .quote-big blockquote { font-size: clamp(1.5rem, 7.5vw, 2.1rem); }
}
.mnav__cta { margin-top: 2rem; width: 100%; justify-content: center; }