/* ========================================================================
   GILL GREWAL CONSTRUCTION INC. — style.css
   The single stylesheet for the whole site.
   Media queries live in responsive.css.

   ORDER
     1. BASE      tokens, reset, global type, global spacing,
                  shared components (buttons, hero, labels, reveal)
     2. LAYOUT    header + footer, shared by every page
     3. PAGES     one block per page, each scoped to its main class
   ======================================================================== */

/* ======================================================================
   BASE
   ====================================================================== */

/* ========================================
   BASE — tokens, reset, global type, global
   spacing and the shared components that more
   than one page uses.

   Nothing here is page-scoped. Pages override
   only what genuinely differs, so a component
   is never written twice.
======================================== */

/* ========================================
   DESIGN TOKENS
======================================== */
:root{
  --gold:      #c39752;
  /* darker gold for text on cream — #c39752 fails contrast at small sizes */
  --gold-deep: #96701f;
  /* lighter gold for text on dark panels */
  --gold-soft: #e0c07a;
  --ink:       #0c0d10;
  --ink-2:     #14161b;
  --cream:     #f6f3ec;
  --cream-2:   #ece7dc;
  --body:      #5d6068;
  --body-dark: #a7a9b0;
  --line:      rgba(201,162,39,.35);

  --ff-serif: 'Playfair Display', Georgia, serif;
  --ff-body:  'Inter', system-ui, -apple-system, sans-serif;

  --ease:  cubic-bezier(.22,.68,.32,1);
  --shell: 1400px;

  /* The single horizontal gutter — sections own it, .container never does.
     Fluid rather than stepped: 1.5rem on a phone, reaching 3rem at 768px. */
  --gutter: clamp(1.5rem, 6.25vw, 3rem);

  /* header metrics — the hero paddings and the sticky drawer read these */
  --topbar-h: 40px;
  --nav-h:    102px;
  --nav-my:   1rem;   /* the navbar's own vertical margin — counts toward the offset */
  --header-h: calc(var(--topbar-h) + var(--nav-h) + var(--nav-my) * 2);
}

/* ========================================
   RESET
======================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.75;
  color:var(--body);
  background:var(--cream);
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* ========================================
   GLOBAL TYPOGRAPHY — single source of truth
   Do not restate these sizes on sections or
   components. They scale fluidly — no breakpoint.
   Headings are serif site-wide, so no extra
   display class is needed.
======================================== */
p, li, span, a,
button, .btn,
b, strong{ font-size:14px; }

h1,h2,h3,h4,h5,h6{
  margin:0; color:var(--ink);
  font-family:var(--ff-serif); font-weight:400;
  line-height:1.14; letter-spacing:-.5px;
}
h1{ font-size:clamp(30px,4.4vw,54px); }
h2{ font-size:clamp(32px, 3.32vw, 34px); }
h1 em,h2 em{ font-style:italic; color:var(--gold); }

/* ========================================
   JUSTIFIED BODY COPY
   The home page's About column has always been
   justified; this brings the rest of the running
   prose in line with it.

   Only running prose in a measure of roughly 380px
   or wider is listed. Card blurbs, numbered-step
   captions and the page-hero leads sit in 170-340px
   columns; justifying a column that narrow tears
   white rivers through it, so they stay ragged on
   purpose. hyphens:auto travels with every rule
   here — without it, justification pulls the word
   gaps apart on the narrower measures.

   The :not() guard matters. These containers hold
   more than prose: a <p class="stat"> counter, a
   <p class="eyebrow"> label, the sign-off line.
   Those are set in wide-tracked capitals over two
   or three words, and justifying them blows the
   word spaces open — "YEARS   OF   CONSTRUCTION".
   The guard keeps the rule on paragraphs only.
======================================== */
.company-page .expertise__copy p:not(.stat):not(.eyebrow):not(.signoff),
.company-page .mv__col p:not(.eyebrow),
.company-page .team__inner > p:not(.eyebrow),
.services-page .prhero__lead,
.projects-page .prhero__lead,
.projects-page .feat__copy p:not(.eyebrow),
.contact-page .cnext li p,
.legal__body p,
.legal__body li{
  text-align:justify; text-justify:inter-word; hyphens:auto;
}

/* ========================================
   GLOBAL SPACING
   Section owns the spacing, container owns
   the width. Never both.
======================================== */
section{ padding:2rem var(--gutter); }

.container{ width:100%; max-width:var(--shell); margin-inline:auto; }

/* header and footer are not <section>, so they take the gutter directly */
.topbar__inner,
.navbar__inner{ padding-inline:var(--gutter); }

/* ========================================
   SHARED LABELS
======================================== */
.eyebrow{
  font-size:13px; font-weight:500; color:var(--gold);
  letter-spacing:.3em; text-transform:uppercase;
  margin:0 0 26px;
}

.kicker{
  font-size:clamp(15px,1.6vw,19px);
  letter-spacing:.22em; text-transform:uppercase;
  white-space:nowrap;
}

.page-meta{
  font-size:12px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin-bottom:26px;
}
.page-meta b{ color:var(--gold); font-weight:500; }


/* centred label between two gold dashes */
.section-head{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(16px,3vw,34px); margin-bottom:clamp(38px,5vw,60px);
}
.section-head .rule{
  flex:0 0 clamp(38px,6vw,92px); height:1px; background:var(--line);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease) .1s;
}
.section-head .rule:last-child{ transform-origin:right; }
.section-head.in .rule{ transform:scaleX(1); }

/* dark bands invert the section head */
.section-head.is-dark .kicker{ color:var(--cream); }
.section-head.is-dark .rule{ background:rgba(201,162,39,.4); }

/* ========================================
   SHARED ARROW
======================================== */
.arrow{
  display:inline-block; position:relative;
  width:26px; height:1px; background:currentColor;
  vertical-align:middle; margin-left:10px;
  transition:width .35s var(--ease);
}
.arrow::after{
  content:''; position:absolute; right:0; top:50%;
  width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}

/* ========================================
   SHARED BUTTONS
======================================== */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:2px; white-space:nowrap;
  font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  padding:17px 30px; border:1px solid transparent;
  transition:color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn i{ position:relative; z-index:2; }
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover{ transform:translateY(-3px); }
.btn:hover::before{ transform:translateY(0); }
.btn:hover .arrow{ width:34px; }
/* compact header CTA — deliberately below the global button size so the
   full label fits beside the nav */
.btn-sm{ font-size:13px; padding:12px 18px; letter-spacing:.12em; }

.btn-gold{ background:var(--gold); color:#181206; }
.btn-gold::before{ background:#f0d98a; }
.btn-gold:hover{ color:#181206; }

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

.btn-outline{ border-color:rgba(12,13,16,.28); color:var(--ink); }
.btn-outline::before{ background:var(--ink); }
.btn-outline:hover{ color:var(--cream); border-color:var(--ink); }

.btn-dark{ background:var(--ink); color:var(--cream); }
.btn-dark::before{ background:var(--gold); }
.btn-dark:hover{ color:#181206; }

.link-arrow{
  display:inline-flex; align-items:center;
  font-size:12px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink);
  padding-bottom:8px; border-bottom:1px solid var(--line);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.link-arrow:hover{ color:var(--gold); border-color:var(--gold); }
.link-arrow:hover .arrow{ width:36px; }

/* ========================================
   SHARED GOLD RULE
   The short accent bar that sits above a
   heading. Draws left to right on reveal,
   then a single highlight sweeps across.
======================================== */
.rule-gold{
  position:relative; overflow:hidden;
  display:block; width:64px; height:2px;
  background:var(--gold); margin-bottom:26px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease);
}
.rule-gold.in{ transform:scaleX(1); }
.rule-gold.in::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, #f6e6b4, transparent);
  transform:translateX(-100%);
  animation:ruleSheen 1.1s var(--ease) .6s;
}
@keyframes ruleSheen{ to{ transform:translateX(120%); } }

/* ========================================
   SHARED HERO
   One component for every page banner. A page
   sets --photo to swap the image; a page with
   no photo keeps the plain gold wash.
   The photo is decorative, so it lives on
   ::before and never in an <img>.
======================================== */
.hero{
  --photo:none;
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
  background:var(--ink);
  padding:calc(var(--header-h, 150px) + clamp(46px,6vw,80px)) 0 clamp(46px,6vw,76px) !important;
}
.hero::before{
  content:''; position:absolute; inset:-6% 0; z-index:0;
  background-image:var(--photo);
  background-size:cover; background-position:center 58%;
  transform:scale(1.09); opacity:0;
  animation:heroZoom 18s ease-out forwards, heroFade 1.4s ease forwards;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 150% at 88% -30%, rgba(201,162,39,.16), transparent 58%),
    linear-gradient(95deg, rgba(6,7,10,.93) 0%, rgba(6,7,10,.74) 34%, rgba(6,7,10,.2) 68%, rgba(6,7,10,.45) 100%),
    linear-gradient(to top, rgba(6,7,10,.9) 0%, rgba(6,7,10,.15) 48%, transparent 72%);
}
.hero .container{ position:relative; z-index:2; }
.hero-content{ padding-inline:var(--gutter); }

@keyframes heroZoom{ to{ transform:scale(1); } }
@keyframes heroFade{ to{ opacity:1; } }

.hero-title{
  font-size:clamp(34px,5.4vw,72px); line-height:1.1;
  letter-spacing:.004em; text-transform:uppercase;
  color:#fff; margin:0;
}
/* both wrappers are <span>, so they opt out of the global span size */
.hero-title .line,
.hero-title .line span{ font-size:inherit; }
.hero-title .line{ display:block; overflow:hidden; padding-bottom:.1em; }
.hero-title .line span{
  display:block; transform:translateY(110%) skewY(4deg);
  animation:lineUp 1.1s var(--ease) forwards;
}
.hero-title .line:nth-child(1) span{ animation-delay:.30s; }
.hero-title .line:nth-child(2) span{ animation-delay:.44s; }
.hero-title .line:nth-child(3) span{ animation-delay:.58s; }
/* On load the headline waits for the page to settle. On a slide change there
   is nothing to wait for — the visitor is already looking at it — so the
   stagger tightens right up. */
.hero-title.is-swapping .line:nth-child(1) span{ animation-delay:.05s; }
.hero-title.is-swapping .line:nth-child(2) span{ animation-delay:.14s; }
.hero-title.is-swapping .line:nth-child(3) span{ animation-delay:.23s; }

/* the line under the headline has no mask to wipe, so it just crosses over */
.hero-text{ transition:opacity .22s var(--ease); }
.hero-text.is-fading{ opacity:0; }

@keyframes lineUp{ to{ transform:translateY(0) skewY(0); } }

.hero-rule{
  display:block; width:74px; height:2px; background:var(--gold);
  margin:22px 0 20px; transform:scaleX(0); transform-origin:left;
  animation:ruleGrow .9s var(--ease) .8s forwards;
}
@keyframes ruleGrow{ to{ transform:scaleX(1); } }

.hero-text{ color:rgba(255,255,255,.76); line-height:1.8; max-width:44ch; }

/* hairline closing the banner off from the section below */
.hero-line{
  position:absolute; left:0; right:0; bottom:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(201,162,39,.5) 22%, rgba(201,162,39,.5) 78%, transparent);
}

/* ========================================
   FILTER TABS   (projects)
   ======================================== */
.filters{
  position:relative; display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(6px,1.6vw,30px);
  margin-bottom:clamp(30px,3.6vw,46px);
  border-bottom:1px solid rgba(12,13,16,.1);
}
.filter{
  position:relative; background:none; border:0; cursor:pointer;
  padding:12px 4px 16px;
  font-family:var(--ff-body); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--body); white-space:nowrap;
  transition:color .3s var(--ease);
}
.filter:hover{ color:var(--ink); }
.filter.is-on{ color:var(--gold-deep); }
/* one shared underline that slides between tabs — positioned from the top
   so it can follow a tab on to the second or third wrapped row */
.filters__ink{
  position:absolute; left:0; top:0; height:2px; width:0;
  background:var(--gold); pointer-events:none;
  transition:transform .45s var(--ease), width .45s var(--ease);
}
/* Thirteen tabs wrap into three ragged rows, so this row scrolls sideways
   instead — one line, native swipe/wheel, no visible scrollbar. The mask
   fades both ends so it reads as "there is more this way". */
.filters--wrap{
  flex-wrap:nowrap; justify-content:flex-start;
  gap:clamp(10px,1.5vw,26px);
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
}
.filters--wrap::-webkit-scrollbar{ display:none; }
.filters--wrap .filter{ flex:none; padding-inline:2px; }

/* ========================================
   GOLD CTA BAND   (projects)
   ======================================== */
.ctaband{ background:var(--gold); padding:clamp(24px,3vw,38px) var(--gutter) !important; }
.ctaband__inner{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(20px,4vw,56px); flex-wrap:wrap;
}
.ctaband h2{
  font-family:var(--ff-serif); font-weight:400; text-transform:uppercase;
  color:#181206; letter-spacing:.01em;
}
.ctaband .btn-dark{ background:var(--ink); color:var(--cream); }
.ctaband .btn-dark::before{ background:#fff; }
.ctaband .btn-dark:hover{ color:var(--ink); }

/* ========================================
   SCROLL-REVEAL PRIMITIVES
   Driven by assets/js/main.js
======================================== */
.reveal,
.reveal-card,
.reveal-img{
  opacity:0; will-change:transform,opacity;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal{ transform:translateY(26px); }
.reveal-card{ transform:translateY(38px) scale(.98); }
.reveal-img{
  transform:translateY(34px); clip-path:inset(0 0 100% 0);
  transition:opacity .1s linear, transform 1s var(--ease), clip-path 1.1s var(--ease);
}

.reveal.in,
.reveal-card.in{ opacity:1; transform:none; }
.reveal-img.in{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }


/* ======================================================================
   LAYOUT - HEADER & FOOTER
   ====================================================================== */

/* ========================================
   LAYOUT — header & footer, shared by every page.
   Responsive rules live in media/responsive.css.
   ----------------------------------------
   Gill Grewal Construction Inc.
   Injected by assets/js/include.js, shared by every page.
   Loads after style.css so it can reuse the design tokens.
   ========================================================= */

/* pages that are NOT full-bleed at the top get pushed down */
/* =========================================================
   LOGO LOCKUP
   Badge as artwork, everything right of the rule as live text —
   set to match the printed letterhead.
   ========================================================= */
.logo{ display:inline-flex; align-items:center; gap:clamp(10px,1vw,14px); }

/* The badge ships as a JPEG, so it carries a white square behind the
   circle. Clipping it to a disc turns that square into a deliberate
   white chip — right on cream, and a clean cut-out on the dark footer. */
.logo__mark{
  flex:none; display:block; width:auto; aspect-ratio:1;
  height:clamp(70px,7.1vw,96px);
  border-radius:50%; background:#fff;
  /* matches the navbar's own height transition, so the two shrink
     together when the header compacts on scroll */
  transition:height .4s var(--ease);
}
.site-header.is-compact .logo__mark{ height:clamp(60px,6vw,78px); }

/* the letterhead's vertical bar dividing badge from wordmark */
.logo__rule{
  flex:none; align-self:stretch; width:2px; margin:5px 0;
  background:var(--ink); opacity:.82;
}

/* Live text, not artwork — stays crisp at any size and recolours itself.
   The lockup has no hover state at all: a logo is fixed artwork, so it
   must not shift colour or fade when the pointer crosses it. */
.logo__text{
  display:flex; flex-direction:column; justify-content:center;
  line-height:1; color:var(--ink);
}
.logo__type,
.logo__meta{ display:flex; flex-direction:column; }
.logo__name{
  font-family:var(--ff-body); font-weight:800;
  font-size:clamp(15px,1.32vw,19.5px); letter-spacing:.05em;
  text-transform:uppercase; white-space:nowrap;
}
.logo__sub{
  font-family:var(--ff-body); font-weight:700;
  font-size:clamp(8.5px,.7vw,10.5px); letter-spacing:.17em;
  text-transform:uppercase; margin-top:4px; white-space:nowrap;
}
/* The letterhead's detail lines, set as live text so they stay readable
   at any size. They are tuned to land the whole stack at roughly the
   badge's height, which is what keeps the navbar from growing.
   Note: the whole lockup is one link to the home page, so it carries no
   contact detail — the phone and email stay live in the topbar and footer,
   where they are their own links. */
.logo__license{
  font-family:var(--ff-body); font-weight:600;
  font-size:clamp(8px,.62vw,9.5px); letter-spacing:.05em;
  margin-top:5px; white-space:nowrap; color:rgba(12,13,16,.62);
}
.logo__trades{
  font-family:var(--ff-body); font-weight:800;
  font-size:clamp(7.5px,.58vw,9px); letter-spacing:.05em;
  text-transform:uppercase; margin-top:5px; white-space:nowrap;
  color:var(--ink);
}

/* dark footer variant — black would vanish, so the whole lockup goes light */
.logo--light .logo__text{ color:#fff; }

/* The footer's brand column is a narrow grid track, nothing like the free
   space the header has. Beside the badge these nowrap lines overflowed the
   track and ran under the next column, so here the detail block takes a
   full-width row of its own under the wordmark — display:contents promotes
   both groups to flex children of .logo so that row can exist. */
.logo--light{ flex-wrap:wrap; row-gap:10px; }
.logo--light .logo__text{ display:contents; }
.logo--light .logo__meta{ flex:1 1 100%; }
.logo--light .logo__license{ margin-top:0; }
.logo--light .logo__rule{ background:#fff; opacity:.45; }
.logo--light .logo__license{ color:rgba(255,255,255,.6); }
.logo--light .logo__trades{ color:rgba(255,255,255,.82); }
.logo--light .logo__mark{ height:clamp(72px,7.1vw,96px); }

/* =========================================================
   HEADER SHELL
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto; z-index:200;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.site-header::before{                  /* the solid plate, faded in on scroll */
  content:''; position:absolute; inset:0; z-index:-1;
  background:#fff; opacity:0;
  transition:opacity .45s var(--ease);
}
.site-header.is-solid::before,
.site-header.is-stuck::before{ opacity:1; }
.site-header.is-stuck{ box-shadow:0 10px 34px -22px rgba(0,0,0,.55); }

/* ---------- top utility bar ---------- */
.topbar{
  background:var(--gold);
  height:var(--topbar-h); overflow:hidden;
  transition:height .4s var(--ease), opacity .3s var(--ease);
}
.site-header.is-compact .topbar{ height:0; opacity:0; }

.topbar__inner{
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.topbar__info,.topbar__social{ display:flex; align-items:center; gap:24px; }
.topbar__info li,.topbar__social li{ display:flex; align-items:center; gap:8px;}
.topbar__info{
  font-family:var(--ff-body); color:#2c2205;
  min-width:0; overflow:hidden;
}
/* utility-bar micro type — deliberately below the global body scale */
.topbar__info li,.topbar__info a{ font-size:14px; }
.topbar__info a:hover{ text-decoration:underline; }
.topbar svg{
  width:16px; height:16px; flex:none; fill:none;
  stroke:#2c2205; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
/* the socials sit in their own chip so they read against the gold bar */
.topbar__social{ gap:10px; }
.topbar__social a{
  display:grid; place-items:center; width:27px; height:27px;
  border:1px solid rgba(24,18,6,.28); border-radius:50%;
  color:#241b06;
  transition:transform .3s var(--ease), background .3s var(--ease),
             border-color .3s var(--ease), color .3s var(--ease);
}
.topbar__social a svg{ width:17px; height:17px; stroke-width:1.7; }
.topbar__social a:hover{
  transform:translateY(-2px);
  background:var(--ink); border-color:var(--ink); color:var(--gold);
}
.topbar__social a:hover svg{ stroke:currentColor; }

/* ---------- main nav bar ---------- */
.navbar{ height:var(--nav-h); transition:height .4s var(--ease); margin:var(--nav-my) 0; }
.site-header.is-compact .navbar{ height:86px; }
.navbar__inner{
  height:100%; display:flex; align-items:center; gap:clamp(14px,2vw,28px);
}
/* Logo and actions are each only as wide as they need to be; the nav takes
   everything left over and centres its list inside that. Giving the two
   outer items equal flex instead looks off-centre, because the button sits
   flush to the right of its grown box and leaves dead space beside the nav.
   No shrink on the nav — below 1200px it becomes a drawer anyway. */
.logo{ flex:0 0 auto; }
.nav{ flex:1 0 auto; display:flex; justify-content:center; }
.navbar__actions{ display:flex; align-items:center; justify-content:flex-end; gap:12px; flex:0 0 auto; }

.nav__list{ display:flex; align-items:center; gap:clamp(10px,1.4vw,21px); }
.nav__item > a{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--ff-body);font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  padding:10px 0;
  transition:color .3s var(--ease);
}
.nav__item > a::after{
  content:''; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__item:hover > a::after,
.nav__item.is-active > a::after{ transform:scaleX(1); transform-origin:left; }
.nav__item:hover > a,
.nav__item.is-active > a{ color:var(--gold); }

.nav__item{ position:relative; }

/* ---------- actions ---------- */
.burger{
  display:none; width:40px; height:40px; padding:9px 8px;
  background:none; border:1px solid rgba(12,13,16,.16); cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.burger span{
  display:block; height:1.6px; background:var(--ink);
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.nav-open .burger span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav-open .burger span:nth-child(2){ opacity:0; }
.nav-open .burger span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:#0a0b0e; color:var(--body-dark); }
.footer__grid{
  display:grid; gap:clamp(28px,3.4vw,48px);
  /* the services column carries twelve names — minmax keeps its track wide
     enough for the longest one ("Demolition Construction") to stay on a
     single line instead of breaking into a ragged two-line stack */
  grid-template-columns:1.1fr 1.15fr .72fr minmax(210px,1.1fr) 1fr;
  padding:clamp(54px,6vw,82px) var(--gutter) clamp(40px,4vw,56px);
}
.footer__brand .logo{ margin-bottom:20px; }
.footer__brand p{line-height:1.75; max-width:34ch; color:rgba(200,198,192,.66); }

/* fr tracks default to min-content, and the long e-mail address was
   dragging the contact column wide enough to starve the ones beside it */
.footer__col{ min-width:0; }
.footer__contact a{ overflow-wrap:anywhere; }

.footer__col h6{
  font-family:var(--ff-body); font-size:14px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  margin:6px 0 20px;
}
.footer__links li + li,
.footer__contact li + li{ margin-top:11px; }
/* twelve services in one column: a touch smaller and tighter than the
   other lists so the footer does not tower over the page */
.footer__links--svc a{ font-size:14px; }
.footer__links--svc li + li{ margin-top:9px; }
/* colour alone on hover — no sliding dash, so the row never shifts */
.footer__links a{
  color:rgba(200,198,192,.72);
  transition:color .3s var(--ease);
}
.footer__links a:hover{ color:var(--gold-soft); }

.footer__contact li{ display:flex; align-items:flex-start; gap:11px;}
.footer__contact a{ font-size:14px; }
.footer__contact svg{
  width:19px; height:19px; margin-top:3px; flex:none; fill:none;
  stroke:var(--gold); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.footer__contact a:hover{ color:#fff; }

/* the contractor licence sits under the contact block, quieter than the
   rows above it but still selectable text rather than part of the logo */
.footer__note{line-height:1.7; margin-bottom:16px; color:rgba(200,198,192,.66); }
.subscribe{ display:flex; border:1px solid rgba(255,255,255,.16); }
.subscribe input{
  flex:1; min-width:0; background:none; border:0; padding:12px 14px;
  font:inherit; font-size:13px; color:#fff;
}
.subscribe input::placeholder{ color:rgba(200,198,192,.45); }
.subscribe input:focus{ outline:none; }
.subscribe:focus-within{ border-color:var(--gold); }
.subscribe button{
  width:46px; flex:none; background:var(--gold); border:0; cursor:pointer;
  display:grid; place-items:center;
  transition:background .3s var(--ease);
}
.subscribe button svg{ width:20px; height:20px; fill:none; stroke:#181206; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.subscribe button:hover{ background:#e6cd77; }
.subscribe__msg{margin-top:9px; min-height:1em; }
.subscribe__msg.is-ok{ color:var(--gold); }
.subscribe__msg.is-err{ color:#e08a72; }

.footer__bar{ border-top:1px solid rgba(255,255,255,.08); }
.footer__bar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; padding:20px var(--gutter);
  color:rgba(200,198,192,.55);
}
/* legal strip micro type — deliberately below the global body scale */
.footer__bar-inner p,.footer__legal a{ font-size:12.5px; }
.footer__social{ display:flex; gap:10px; }
.footer__social a{
  display:grid; place-items:center; width:38px; height:38px;
  border:1px solid rgba(255,255,255,.14); color:rgba(200,198,192,.7);
  transition:transform .35s var(--ease), border-color .35s var(--ease),
             color .35s var(--ease), background .35s var(--ease);
}
.footer__social svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; }
.footer__social a:hover{
  transform:translateY(-3px); border-color:var(--gold);
  color:#181206; background:var(--gold);
}
.footer__legal{ display:flex; gap:22px; }
.footer__legal a:hover{ color:var(--gold); }


/* ======================================================================
   HOME PAGE
   ====================================================================== */

/* ========================================
   HOME PAGE
   Every rule is scoped to home-page so it
   can never leak into another page.
   Responsive rules live in media/responsive.css
======================================== */

/* ========================================
   HOME PAGE - HERO SECTION
   Reuses the shared .hero. Only the things that
   genuinely differ are restated here: it is full
   height, centred, and carries a drifting grain.
======================================== */
.home-page .hero{
  /* the slider supplies the picture now. --photo stays defined (the base
     .hero still reads it) so the ::before layer resolves to nothing rather
     than to a broken url; the dark background behind it is the fallback. */
  --photo:none;
  align-items:center;
  min-height:100svh;
  padding:calc(var(--header-h, 150px) + clamp(40px,6vh,80px)) 0 clamp(70px,9vh,100px) !important;
}
.home-page .hero::before{
  background-position:center 52%;
  transform:scale(1.08);
  animation:heroZoomHome 22s ease-out forwards, heroFade 1.6s ease forwards;
}
/* real <img>s carry the photo on the slider hero, so the pseudo-element
   layer would only sit on top of them doing nothing */
.hero--slider::before{ display:none; }

/* =========================================================
   HERO SLIDER
   Three stacked slides cross-fading in place. Opacity only —
   nothing reflows, so the headline over the top never judders.
   ========================================================= */
.hero-slides{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-slide{
  position:absolute; inset:0; margin:0;
  opacity:0; transition:opacity 1.5s var(--ease);
}
.hero-slide.is-active{ opacity:1; }
.hero-slide img{
  width:100%; height:100%; object-fit:cover;
  /* biased above centre: on these forecourts the canopy and the storefront
     sit in the upper half and the foreground is bare concrete */
  object-position:center 42%;
  transform:scale(1.1);
}
/* Each photo is framed differently, so the crop is set per slide rather than
   picking one value that half-suits all three.

   Note these are HORIZONTAL values. All three photos are wider than the hero
   box at every viewport, so cover scales them to the box height and the crop
   falls on the sides — the vertical figure never comes into play. It bites
   hardest on a phone, where a 2:1 photo in a 0.45 box shows barely a fifth of
   its width, so each value picks the part of the frame worth keeping. */
.hero-slide:nth-child(1) img{ object-position:46% 50%; }   /* the store front */
.hero-slide:nth-child(2) img{ object-position:57% 50%; }   /* the lit signage */
.hero-slide:nth-child(3) img{ object-position:55% 50%; }   /* the CAR WASH sign */
/* Ken Burns runs only on the slide on screen, and is re-triggered each time
   a slide becomes active — see the class swap in main.js */
.hero-slide.is-active img{ animation:heroSlideZoom 9s ease-out forwards; }
@keyframes heroSlideZoom{ to{ transform:scale(1); } }

/* ---------- the dot rail ---------- */
.hero-dots{
  position:absolute; z-index:3; bottom:38px; right:clamp(20px,5vw,72px);
  display:flex; gap:10px;
  animation:heroFade 1s ease 1.6s both;
}
.hero-dot{
  position:relative; width:38px; height:3px; padding:0;
  border:0; border-radius:2px; cursor:pointer;
  background:rgba(255,255,255,.28);
  transition:background .3s var(--ease);
}
.hero-dot:hover{ background:rgba(255,255,255,.5); }
/* the gold fill is the countdown to the next slide */
.hero-dot::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
}
.hero-dot.is-active::after{ animation:heroDotFill var(--slide-ms,6000ms) linear forwards; }
/* paused rail: hold the fill where it is rather than snapping back */
.hero-dots.is-paused .hero-dot::after{ animation-play-state:paused; }
@keyframes heroDotFill{ to{ transform:scaleX(1); } }
.hero-dot:focus-visible{ outline:2px solid var(--gold); outline-offset:5px; }

/* Reduced motion: no drift, no countdown, no auto-advance (main.js stops the
   timer too). The rail stays, so the slides are still reachable by click. */
@media (prefers-reduced-motion: reduce){
  .hero-slide img{ transform:none; animation:none; }
  .hero-slide{ transition-duration:.01ms; }
  .hero-dot.is-active::after{ animation:none; transform:scaleX(1); }
  .hero-dots{ animation:none; }
}
.home-page .hero::after{
  background:
    radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 3px 3px,
    linear-gradient(100deg, rgba(6,7,10,.93) 0%, rgba(6,7,10,.85) 26%, rgba(6,7,10,.5) 54%, rgba(6,7,10,.14) 80%, rgba(6,7,10,.5) 100%),
    linear-gradient(to top, rgba(6,7,10,.88) 0%, rgba(6,7,10,.22) 38%, transparent 62%);
  animation:heroGrain 6s steps(6) infinite;
}
.home-page .hero-title{ font-size:clamp(38px,6.1vw,84px); margin-bottom:32px; }
.home-page .hero-text{ max-width:520px; margin-bottom:38px; }
.home-page .hero-actions{ display:flex; flex-wrap:wrap; gap:16px; }

@keyframes heroZoomHome{ to{ transform:scale(1) translateY(-1%); } }
@keyframes heroGrain{
  0%,100%{ background-position:0 0, 0 0, 0 0; }
  25%    { background-position:-2px 1px, 0 0, 0 0; }
  50%    { background-position:1px -2px, 0 0, 0 0; }
  75%    { background-position:2px 1px, 0 0, 0 0; }
}

.home-page .hero-scroll{
  position:absolute; z-index:2; bottom:34px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  animation:heroFade 1s ease 1.6s both;
}
/* the travelling gold tick — pseudo-element, no markup */
.home-page .hero-scroll::after{
  content:''; width:1px; height:52px;
  background:linear-gradient(var(--gold) 0 33%, rgba(255,255,255,.28) 33% 100%);
  background-size:100% 300%;
  animation:scrollTick 2.2s var(--ease) infinite;
}
@keyframes scrollTick{
  0%   { background-position:0 100%; }
  60%,100%{ background-position:0 -100%; }
}

/* ========================================
   HOME PAGE - ABOUT SECTION
======================================== */
.home-page .about{ background:var(--cream); }
.home-page .about-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,90px); align-items:center;
}

.home-page .about-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.home-page .photo{
  margin:0; overflow:hidden; background:var(--cream-2);
  aspect-ratio:4/3;
}
/* the lead shot spans the row — no modifier class needed */
.home-page .photo:first-child{ grid-column:1 / -1; aspect-ratio:16/9; }
.home-page .photo img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); filter:saturate(.9);
  transition:transform 1.2s var(--ease), filter .8s var(--ease);
}
.home-page .photo:hover img{ transform:scale(1.14); filter:saturate(1.1); }

.home-page .about-content h2{ margin-bottom:22px; }
.home-page .about-content > p{
  max-width:52ch; margin-bottom:34px;
  text-align:justify; text-justify:inter-word; hyphens:auto;
}
/* the eyebrow is a <p> too, so it has to opt out of the paragraph rhythm */
.home-page .about-content > p.eyebrow{ margin:14px 0 12px; text-align:left; hyphens:none; }
.home-page .about-content > p + p{ margin-top:-14px; }

/* The closing line of the About copy is a signature, not a paragraph — it is
   set in the display serif and led by a short gold rule so it reads as the
   company's own sign-off rather than another body sentence. Both page shells
   justify their About paragraphs, so the selectors have to match that weight
   to opt this one line back out. */
.home-page .about-content > p.signoff,
.company-page .expertise__copy p.signoff{
  display:flex; align-items:center; gap:14px;
  font-family:var(--ff-serif); font-style:italic; font-weight:400;
  font-size:clamp(17px,1.5vw,21px); line-height:1.4; color:var(--gold);
  text-align:left; hyphens:none; max-width:none;
  margin:26px 0 34px;
}
.home-page .about-content > p.signoff::before,
.company-page .expertise__copy p.signoff::before{
  content:''; flex:none; width:34px; height:2px;
  background:var(--gold); opacity:.75;
}

.home-page .about-stats,
.company-page .about-stats{ display:flex; gap:clamp(20px,4vw,44px); margin-bottom:36px; }
/* equal tracks: the labels are full sentences now, so each one wraps
   inside its own third of the row instead of setting the column width */
.home-page .stat,
.company-page .stat{ display:flex; flex-direction:column; flex:1 1 0; }
.home-page .stat b,
.company-page .stat b{
  font-family:var(--ff-serif); font-size:clamp(34px,4.4vw,50px);
  font-weight:400; line-height:1; color:var(--gold);
}
.home-page .stat span,
.company-page .stat span{
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--body); margin-top:8px; line-height:1.4;
}
/* the three labels spell out the full claim now, so they are set smaller
   than body copy to keep the row from filling the column edge to edge */
.home-page .about-stats{ gap:clamp(16px,2vw,26px); }
.home-page .stat span{ font-size:10px; letter-spacing:.1em; }

/* the full-width counter row under the about grid: three equal columns
   with a hairline above, so it reads as a band rather than a paragraph */
.home-page .about-stats--wide{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,50px);
  margin:clamp(44px,4.4vw,64px) 0 0;
  padding-top:clamp(28px,3vw,40px);
  border-top:1px solid rgba(12,13,16,.12);
}
/* each counter is centred inside its own third of the band */
.home-page .about-stats--wide .stat{ align-items:center; text-align:center; }
.home-page .about-stats--wide .stat b{ font-size:clamp(40px,5vw,62px); }
.home-page .about-stats--wide .stat span{ font-size:11.5px; letter-spacing:.14em; }

/* ========================================
   HOME PAGE - SERVICES SECTION
   The scrim only darkens the bottom third, so
   the photo stays bright and readable.
======================================== */
.home-page .services{ background:#08090b; }
.home-page .services .kicker{ color:var(--gold); }
.home-page .services .rule{ background:linear-gradient(90deg, rgba(201,162,39,0), rgba(201,162,39,.6)); }
.home-page .services .rule:last-child{ background:linear-gradient(90deg, rgba(201,162,39,.6), rgba(201,162,39,0)); }
.home-page .services .btn-outline{ border-color:rgba(201,162,39,.55); color:var(--gold); }
.home-page .services .btn-outline::before{ background:var(--gold); }
.home-page .services .btn-outline:hover{ color:#181206; border-color:var(--gold); }

.home-page .services-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,26px);
}
.home-page .service-card{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  /* a fluid min-height, not aspect-ratio: the latter overrides grid
     stretch and leaves the card narrower than its track */
  min-height:clamp(240px,20vw,290px);
  padding:24px 26px 26px;
  background:#0a0b0d;
  border:1px solid rgba(201,162,39,.38);
  /* a faint light ring so the card edge reads against the near-black section */
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 18px 40px -26px rgba(0,0,0,1);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.home-page .service-card img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  /* the photos are dusk shots on a near-black section — lift them so they read */
  filter:brightness(1.16) contrast(1.06) saturate(1.12);
  transition:transform 1.2s var(--ease), filter .7s var(--ease);
}
/* the scrim only has to carry the text, so it clears the top half of the photo */
.home-page .service-card::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top,
    rgba(4,5,7,.92) 0%, rgba(4,5,7,.76) 22%, rgba(4,5,7,.36) 46%,
    rgba(4,5,7,.08) 68%, rgba(4,5,7,0) 86%);
}
.home-page .service-card:hover{
  transform:translateY(-4px);
  border-color:rgba(201,162,39,.8);
  box-shadow:0 22px 46px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(201,162,39,.18);
}
.home-page .service-card:hover img{
  transform:scale(1.07);
  filter:brightness(1.26) contrast(1.08) saturate(1.16);
}

.home-page .service-num{
  font-family:var(--ff-serif); font-size:clamp(38px,3.3vw,50px);
  font-weight:400; line-height:1; color:var(--gold);
  margin:0 0 8px; text-shadow:0 2px 14px rgba(0,0,0,.75);
  transition:color .4s var(--ease);
}
.home-page .service-card:hover .service-num{ color:#e9cf84; }

.home-page .service-body{ display:block; padding-right:54px; }
.home-page .service-body h3{
  font-family:var(--ff-serif); font-size:clamp(19px,1.6vw,23px);
  font-weight:400; letter-spacing:.01em; line-height:1.2;
  color:#f4efe4; margin-bottom:8px;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}
.home-page .service-body p{
  line-height:1.55; max-width:30ch;
  color:rgba(233,223,202,.72);
  text-shadow:0 1px 10px rgba(0,0,0,.8);
}

.home-page .service-card .arrow{
  position:absolute; right:28px; bottom:30px; width:34px;
  color:var(--gold); opacity:.9;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.home-page .service-card:hover .arrow{ transform:translateX(9px); opacity:1; }

.home-page .services-action{ text-align:center; margin-top:clamp(38px,5vw,56px); }

/* ========================================
   HOME PAGE - SPECIALISTS SECTION
======================================== */
.home-page .specialists{ background:var(--cream-2); }
.home-page .specialists .section-head{ margin-bottom:clamp(30px,4vw,44px); }
.home-page .specialists .kicker{ color:var(--ink); }

.home-page .specialist-row{
  display:grid; grid-template-columns:repeat(6,1fr);
  border-left:1px solid rgba(12,13,16,.1);
}
.home-page .specialist{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:26px 12px 24px; text-align:center;
  border-right:1px solid rgba(12,13,16,.1);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); line-height:1.45;
  transition:background .4s var(--ease);
}
.home-page .specialist:hover{ background:rgba(201,162,39,.09); }
.home-page .specialist img{
  width:auto; height:66px; max-width:110px;
  object-fit:contain; object-position:center bottom;
  transition:transform .5s var(--ease);
}
.home-page .specialist:hover img{ transform:translateY(-5px) scale(1.06); }

/* ========================================
   HOME PAGE - TRUST SECTION
======================================== */
.home-page .trust{ background:var(--ink); }
.home-page .trust-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,40px);
}
.home-page .trust-item{
  text-align:center; padding:0 clamp(6px,1.4vw,18px);
  border-right:1px solid rgba(255,255,255,.09);
}
.home-page .trust-item:last-child{ border-right:0; }
.home-page .trust-item img{
  display:block; width:auto; max-width:64px; height:46px;
  object-fit:contain; margin:0 auto 16px;
}
.home-page .trust-item h3{
  font-size:19px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; margin-bottom:8px;
}
.home-page .trust-item p{ line-height:1.6; color:var(--body-dark); }

/* ========================================
   HOME PAGE - PROJECTS SECTION
======================================== */
.home-page .projects{ background:var(--cream); }

.home-page .project-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  /* definite rows: the cards' photos are absolute, so they no longer
     supply the height the rows used to borrow from them */
  grid-template-rows:repeat(2,clamp(190px,20vw,300px));
  gap:clamp(14px,1.6vw,20px);
}
.home-page .project-card{
  position:relative; overflow:hidden; display:block;
  background:var(--ink-2);
}
/* the lead card spans both rows — no modifier class needed */
.home-page .project-card:first-child{ grid-row:span 2; }
.home-page .project-card img{
  /* absolute: a portrait photo must fill the card, never set its height */
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); filter:brightness(.82);
  transition:transform 1.2s var(--ease), filter .7s var(--ease);
}
.home-page .project-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,9,12,.85), transparent 55%);
}
.home-page .project-card:hover img{ transform:scale(1.11); filter:brightness(.68); }

.home-page .project-label{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:22px 24px; color:#fff;
}
.home-page .project-label h3{
  font-family:var(--ff-serif); font-size:clamp(17px,1.6vw,22px);
  font-weight:400; letter-spacing:.01em; color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
  transition:transform .5s var(--ease);
}
.home-page .project-label .arrow{ width:34px; color:var(--gold); flex:none; transition:transform .5s var(--ease); }
.home-page .project-card:hover .project-label h3{ transform:translateY(-4px); }
.home-page .project-card:hover .project-label .arrow{ transform:translateX(8px); }

.home-page .projects-action{ text-align:center; margin-top:clamp(34px,4vw,50px); }

/* ========================================
   HOME PAGE - PROCESS SECTION
   Numeral beside icon, copy centred beneath,
   with a gold chevron bridging each pair.
======================================== */
.home-page .process{ background:var(--ink); }
/* dark band, so the section head inverts — no modifier class needed */
.home-page .process .kicker{ color:var(--cream); }
.home-page .process .rule{ background:rgba(201,162,39,.4); }
.home-page .step-list{ display:grid; grid-template-columns:repeat(4,1fr); }
.home-page .step{
  position:relative; text-align:center;
  padding:0 clamp(16px,2.4vw,34px);
}
.home-page .step::after{
  content:''; position:absolute; right:-7px;
  top:calc(clamp(36px,3.4vw,46px) / 2 - 7px);
  width:14px; height:14px;
  border-top:1.4px solid rgba(201,162,39,.55);
  border-right:1.4px solid rgba(201,162,39,.55);
  transform:rotate(45deg);
}
.home-page .step:last-child::after{ display:none; }

.home-page .step-head{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,1.2vw,18px); margin-bottom:20px;
}
.home-page .step-num{
  font-family:var(--ff-serif); font-size:clamp(32px,3.3vw,46px);
  font-weight:400; line-height:1; color:var(--gold);
}
.home-page .step img{
  display:block; width:auto; max-width:64px;
  height:clamp(46px,4.2vw,60px); object-fit:contain;
  opacity:.95; transition:transform .5s var(--ease);
}
.home-page .step:hover img{ transform:translateY(-4px) rotate(-4deg); }
.home-page .step h3{
  font-family:var(--ff-serif); font-size:clamp(16px,1.5vw,19px);
  font-weight:400; letter-spacing:.01em; color:#f4efe4;
  margin-bottom:12px;
}
.home-page .step p{
  line-height:1.75; color:var(--body-dark);
  max-width:27ch; margin-inline:auto;
}

/* ========================================
   HOME PAGE - PARTNER SECTION
======================================== */
.home-page .partner{ background:var(--cream-2); }
.home-page .partner-grid{
  display:grid; grid-template-columns:minmax(230px,.9fr) 2.3fr;
  gap:clamp(28px,3.4vw,54px); align-items:start;
}
.home-page .partner-title{
  text-transform:uppercase; letter-spacing:.01em;
  line-height:1.2; color:var(--ink);
}

.home-page .partner-list{ display:grid; grid-template-columns:repeat(4,1fr); }
.home-page .partner-item{
  text-align:center; padding:0 clamp(12px,1.6vw,24px);
  border-left:1px solid rgba(12,13,16,.13);
  transition:transform .45s var(--ease);
}
.home-page .partner-item:hover{ transform:translateY(-6px); }
.home-page .partner-item img{
  display:block; width:auto; max-width:78px; height:56px;
  object-fit:contain; margin:0 auto 16px;
}
.home-page .partner-item h3{
  font-family:var(--ff-body); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); margin-bottom:11px;
}
.home-page .partner-item p{ line-height:1.7; max-width:24ch; margin-inline:auto; }

/* ========================================
   HOME PAGE - CTA SECTION
   Background photo is decorative → ::before.
======================================== */
.home-page .cta{
  position:relative; overflow:hidden; background:var(--ink);
  padding:clamp(44px,5.4vw,78px) 0 !important;
}
.home-page .cta::before{
  content:''; position:absolute; inset:-8% 0; z-index:0;
  background:url('../img/hero.jpg?v=42') center / cover no-repeat;
  /* --py is written by the parallax loop in main.js */
  transform:translate3d(0, var(--py, 0), 0);
  will-change:transform;
}
.home-page .cta::after{
  content:''; position:absolute; inset:0; z-index:1;
  /* light enough to read the forecourt photo through it, still dark
     enough on the left to carry the white heading */
  background:linear-gradient(95deg, rgba(8,9,12,.72) 0%, rgba(8,9,12,.46) 42%, rgba(8,9,12,.08) 100%);
}
.home-page .cta .container{ position:relative; z-index:2; }
.home-page .cta-content{ padding-inline:var(--gutter); }
.home-page .cta-content h2{
  font-family:var(--ff-serif); font-weight:400;
  line-height:1.14; letter-spacing:.004em;
  text-transform:uppercase; color:#fff; margin-bottom:26px;
}


/* ======================================================================
   COMPANY PAGE
   ====================================================================== */

/* =========================================================
   Gill Grewal Construction Inc. — Company / About page
   Loads after style.css + layout.css.
   ========================================================= */

/* =========================================================
   PAGE HERO — dark copy panel beside a full-bleed photo
   ========================================================= */
.phero{
  position:relative;
  display:grid; grid-template-columns:minmax(340px,.86fr) 1.14fr;
  background:var(--ink);
  /* split hero: photo runs to the viewport edge, so no global gutter */
  padding:var(--header-h) 0 0 !important;
  min-height:clamp(380px,42vw,520px);
}
.company-page .phero__panel{
  display:flex; align-items:center;
  padding:clamp(34px,4vw,58px) clamp(20px,4.4vw,64px);
  background:var(--ink);
}
/* the panel keeps bleeding to the left edge on wide screens */
.company-page .phero__panel::before{
  content:''; position:absolute; top:0; bottom:0; right:100%; width:50vw;
  background:var(--ink);
}
.company-page .phero__copy{ max-width:430px; }
.company-page .phero__copy h1{ color:#fff; margin-bottom:18px; }
.company-page .phero__lead{
  color:rgba(255,255,255,.7);line-height:1.75;
  max-width:38ch; margin-bottom:26px;
}
.company-page .phero__media{ position:relative; margin:0; overflow:hidden; }
/* absolute so the photo crops to the panel height instead of dictating it */
.company-page .phero__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  transform:scale(1.1);
  animation:pheroIn 1.6s var(--ease) .1s forwards;
}
@keyframes pheroIn{
to{ transform:scale(1); } }
/* soft blend so the photo melts into the dark panel */
.company-page .phero__wash{
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--ink) 0%, rgba(12,13,16,.55) 16%, rgba(12,13,16,0) 46%);
}

/* ---------- hero carrying the project board ----------
   The board is 4:3 and the hero panel is 16:9, so roughly a quarter of it is
   cropped away whatever we do. Two adjustments make that crop cost the least:
   the frame sits low, which spends the loss on sky rather than on the
   buildings in the lower two photos; and the blend is pulled in from 46% to
   32%, because at full length it washed straight over the Starbucks. It
   still covers the seam against the copy panel, which is its actual job. */
.company-page .phero__media--board img{ object-position:center 56%; }
.company-page .phero__media--board .phero__wash{
  background:linear-gradient(90deg, var(--ink) 0%, rgba(12,13,16,.5) 12%, rgba(12,13,16,0) 32%);
}
/* =========================================================
   EXPERTISE
   ========================================================= */
.company-page .expertise{ background:var(--cream); }
.company-page .expertise__grid{
  display:grid; grid-template-columns:1.08fr 1fr;
  gap:clamp(28px,3.2vw,54px); align-items:center;
}
.company-page .expertise__copy h2{ margin-bottom:24px; }
.company-page .expertise__copy p + p{ margin-top:18px; }
.company-page .expertise__copy p{ max-width:none; }
/* the About column is narrower than the home page's, so the counter block
   is set a little tighter to keep all three labels on two lines */
.company-page .about-stats{ margin-top:36px; margin-bottom:0; gap:clamp(16px,2.4vw,32px); }
.company-page .stat b{ font-size:clamp(30px,3.4vw,42px); }
.company-page .stat span{ font-size:10px; letter-spacing:.12em; }
/* ---------- framed project board ----------
   The board is a finished composition: three photos, its own gutters and the
   GG badge sitting over the seams. So nothing crops it, nothing overlaps it
   and nothing tints it — the frame stays outside the picture. A gold rule is
   offset behind it, the way a mounted print sits proud of its mat.

   The rule hangs off the MEDIA wrapper rather than off the figure: as the
   figure's own ::before it would need a negative z-index, and that paints it
   behind the figure's white background, i.e. invisible. */
.company-page .expertise__media{ position:relative; }
.company-page .expertise__media::before{
  content:''; position:absolute; pointer-events:none;
  --off:clamp(14px,1.6vw,24px);
  top:var(--off); left:var(--off); right:calc(var(--off) * -1); bottom:auto;
  height:100%;
  border:2px solid var(--gold); opacity:.5;
}
.company-page .showcase{
  position:relative;                     /* lifts the figure over the rule */
  margin:0; padding:clamp(10px,1vw,14px);
  background:#fff;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.5);
}
.company-page .showcase img{
  display:block; width:100%; height:auto;
  transition:transform 1.1s var(--ease);
}
/* A whole-image scale would push the picture under the white frame, so the
   lift is on the frame instead and the photo stays exactly as supplied. */
.company-page .showcase{ transition:transform .7s var(--ease), box-shadow .7s var(--ease); }
.company-page .showcase:hover{
  transform:translateY(-6px);
  box-shadow:0 40px 70px -34px rgba(0,0,0,.58);
}
.company-page .showcase figcaption{
  margin-top:12px; padding:0 2px 2px;
  font-family:var(--ff-body); font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(12,13,16,.5);
}
/* =========================================================
   MISSION / VISION
   ========================================================= */
.company-page .mv{ background:var(--ink);  }
.company-page .mv__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.4vw,34px);
}
/* each statement is its own panel, lifted a shade off the ink background */
.company-page .mv__col{
  position:relative; overflow:hidden;
  padding:clamp(30px,3.4vw,46px);
  background:linear-gradient(158deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  border:1px solid rgba(201,162,39,.24);
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
/* a gold rule that draws itself across the top edge on hover */
.company-page .mv__col::after{
  content:''; position:absolute; left:0; top:0; width:100%; height:2px;
  background:linear-gradient(90deg, var(--gold), rgba(201,162,39,0));
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.company-page .mv__col:hover{ transform:translateY(-4px); border-color:rgba(201,162,39,.5); }
.company-page .mv__col:hover::after{ transform:scaleX(1); }

.company-page .mv__icon{
  display:grid; place-items:center;
  width:clamp(48px,3.6vw,58px); aspect-ratio:1; border-radius:50%;
  margin-bottom:26px;
  background:rgba(201,162,39,.07);
  border:1px solid rgba(201,162,39,.4);
  transition:background .5s var(--ease), border-color .5s var(--ease);
}
.company-page .mv__icon svg{
  width:46%; height:46%;
  fill:none; stroke:var(--gold); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.company-page .mv__col:hover .mv__icon{
  background:rgba(201,162,39,.14); border-color:rgba(201,162,39,.72);
}
/* label followed by a short gold dash */
.company-page .mv__col .eyebrow{
  display:flex; align-items:center; gap:16px;
  font-family:var(--ff-serif); font-size:15px; font-weight:400;
  letter-spacing:.2em; margin-bottom:18px;
}
.company-page .mv__col .eyebrow::after{
  content:''; flex:0 0 clamp(28px,3vw,46px); height:1px; background:var(--gold);
}
.company-page .mv__col p{
  color:rgba(238,235,228,.86);
  line-height:1.8;
}
/* =========================================================
   VALUES
   ========================================================= */
.company-page .values{ background:var(--cream-2); }
.company-page .values .kicker{ color:var(--ink); }
.company-page .values__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.6vw,38px);
}
.company-page .value{
  position:relative; padding-right:clamp(14px,2vw,28px);
  transition:transform .45s var(--ease);
}
.company-page .value + .value{
  border-left:1px solid rgba(201,162,39,.28);
  padding-left:clamp(20px,2.6vw,38px);
}
.company-page .value:hover{ transform:translateY(-5px); }
/* hollow serif numerals,
company-page like the reference */
.company-page .value__num{
  display:block; font-family:var(--ff-serif);
  font-size:clamp(50px,5.2vw,74px); font-weight:400; line-height:1;
  color:rgba(201,162,39,.3); margin-bottom:16px;
  transition:color .4s var(--ease), -webkit-text-stroke-color .4s var(--ease);
}
@supports (-webkit-text-stroke: 1px black){
.company-page .value__num{
    color:transparent;
    -webkit-text-stroke:1.1px rgba(176,142,60,.5);
  }
.company-page .value:hover .value__num{ -webkit-text-stroke-color:var(--gold); }
}
.company-page .value:hover .value__num{ color:rgba(201,162,39,.55); }
.company-page .value h4{
  font-family:var(--ff-serif); font-size:clamp(16px,1.45vw,19px);
  font-weight:500; line-height:1.35; margin-bottom:14px; color:var(--ink);
  max-width:16ch;
}
.company-page .value p{line-height:1.75; max-width:25ch; }
/* =========================================================
   CAPABILITY — photo left,
company-page dark copy right
   ========================================================= */
.company-page .capability{
  display:grid; grid-template-columns:1fr 1.06fr;
  background:#fff; align-items:stretch;
  padding:0 !important;          /* photo runs edge to edge */
}
.company-page .capability__media{
  position:relative; margin:0; overflow:hidden;
  min-height:clamp(320px,34vw,470px);
}
/* absolute: the band matches the dark copy column, whatever the photo shape */
.company-page .capability__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.05);
  transition:transform 1.4s var(--ease);
}
.company-page .capability:hover .capability__media img{ transform:scale(1.1); }
.company-page .capability__copy{
  display:flex; align-items:center;
  padding:clamp(44px,5.4vw,80px) clamp(24px,4.4vw,70px);
}
.company-page .capability__inner{ max-width:560px; }
.company-page .display-light{ color:var(--ink); }
.company-page .display-light em{ color:var(--gold-deep); }
.company-page .capability__inner > p{
  color:var(--body); line-height:1.8;
  margin:22px 0 30px; max-width:48ch;
}
/* gold tick list */
.company-page .ticks{ display:grid; gap:13px; margin-bottom:34px; }
.company-page .ticks li{
  position:relative; padding-left:32px;
  font-family:var(--ff-body);letter-spacing:.06em;
  color:var(--ink);
}
.company-page .ticks li::before{
  content:''; position:absolute; left:2px; top:6px;
  width:13px; height:7px;
  border-left:1.8px solid var(--gold-deep); border-bottom:1.8px solid var(--gold-deep);
  transform:rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform .4s var(--ease);
}
.company-page .ticks.in li::before{ transform:rotate(-45deg) scale(1); }
.company-page .ticks.in li:nth-child(2)::before{ transition-delay:.07s; }
.company-page .ticks.in li:nth-child(3)::before{ transition-delay:.14s; }
.company-page .ticks.in li:nth-child(4)::before{ transition-delay:.21s; }
.company-page .ticks.in li:nth-child(5)::before{ transition-delay:.28s; }
.company-page .ticks.in li:nth-child(6)::before{ transition-delay:.35s; }
/* =========================================================
   HOW WE WORK  (reuses .steps from style.css)
   ========================================================= */
.company-page .howwe{ background:#0a0b0e; }
/* =========================================================
   TEAM
   ========================================================= */
.company-page .team{
  display:grid; grid-template-columns:1fr 1.1fr;
  background:var(--cream-2); align-items:stretch;
  padding:0 !important;          /* photo runs edge to edge */
}
.company-page .team__media{
  position:relative; margin:0; overflow:hidden;
  min-height:clamp(300px,30vw,420px);
}
/* absolute: the band matches the copy column, whatever the photo shape */
.company-page .team__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04);
  transition:transform 1.3s var(--ease);
}
.company-page .team:hover .team__media img{ transform:scale(1.09); }
.company-page .team__copy{ display:flex; align-items:center; padding:clamp(40px,5vw,74px) clamp(24px,4.4vw,66px); }
.company-page .team__inner{ max-width:640px; }
.company-page .kicker--dark{
  display:block; color:var(--ink); text-align:left;
  white-space:normal; margin-bottom:18px;
}
.company-page .team__inner > p{max-width:52ch; margin-bottom:34px; }
.company-page .team__traits{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,30px); }
.company-page .trait{ position:relative; padding-top:18px; }
.company-page .trait::before{
  content:''; position:absolute; top:0; left:0; width:34px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.company-page .trait.in::before{ transform:scaleX(1); }
.company-page .trait h5{
  font-family:var(--ff-body); font-size:17px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:9px;
}
.company-page .trait p{line-height:1.7; }
/* ========================================
   COMPANY PAGE - HOW WE WORK
   Numeral beside icon, copy centred beneath,
   with a gold chevron bridging each pair.
======================================== */
.company-page .steps{ display:grid; grid-template-columns:repeat(4,1fr); }
.company-page .step{
  position:relative; text-align:center;
  padding:0 clamp(16px,2.4vw,34px);
}
.company-page .step::after{
  content:''; position:absolute; right:-7px;
  top:calc(clamp(46px,4.2vw,60px) / 2 - 7px);
  width:14px; height:14px;
  border-top:1.4px solid rgba(201,162,39,.55);
  border-right:1.4px solid rgba(201,162,39,.55);
  transform:rotate(45deg);
}
.company-page .step:last-child::after{ display:none; }

.company-page .step__top{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,1.2vw,18px); margin-bottom:20px;
}
.company-page .step__num{
  font-family:var(--ff-serif); font-size:clamp(32px,3.3vw,46px);
  font-weight:400; line-height:1; color:var(--gold);
}
.company-page .step img{
  display:block; width:auto; max-width:76px;
  height:clamp(46px,4.2vw,60px); object-fit:contain;
  opacity:.95; transition:transform .5s var(--ease);
}
.company-page .step:hover img{ transform:translateY(-4px) rotate(-4deg); }
.company-page .step h5{
  font-family:var(--ff-serif); font-size:clamp(16px,1.5vw,19px);
  font-weight:400; color:#f4efe4; margin-bottom:12px;
}
.company-page .step p{
  line-height:1.75; color:var(--body-dark);
  max-width:27ch; margin-inline:auto;
}

/* ========================================
   COMPANY PAGE - CTA
======================================== */
.company-page .cta{
  position:relative; overflow:hidden; background:var(--ink);
  padding:clamp(44px,5.4vw,78px) 0 !important;
}
.company-page .cta__media{ position:absolute; inset:-8% 0; }
.company-page .cta__media img{ width:100%; height:100%; object-fit:cover; }
.company-page .cta__scrim{
  position:absolute; inset:0;
  /* light enough to read the forecourt photo through it, still dark
     enough on the left to carry the white heading */
  background:linear-gradient(95deg, rgba(8,9,12,.72) 0%, rgba(8,9,12,.46) 42%, rgba(8,9,12,.08) 100%);
}
.company-page .cta__inner{ position:relative; z-index:2; padding-inline:var(--gutter); }
.company-page .cta h2{
  font-family:var(--ff-serif); font-weight:400;
  line-height:1.14; letter-spacing:.004em;
  text-transform:uppercase; color:#fff; margin-bottom:34px;
}

/* =========================================================
   SERVING BAND
   ========================================================= */
.company-page .serving{ background:var(--gold); padding:clamp(22px,2.6vw,32px) var(--gutter) !important; }
.company-page .serving__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.company-page .serving__left{ display:flex; align-items:center; gap:18px; }
.company-page .serving__pin{
  display:grid; place-items:center; width:54px; height:54px; flex:none;
  border:1px solid rgba(24,18,6,.32); border-radius:50%;
}
.company-page .serving__pin svg{
  width:26px; height:26px; fill:none; stroke:#241b06;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.company-page .serving__left p{ display:flex; flex-direction:column; line-height:1.2; }
.company-page .serving__left b{
  font-family:var(--ff-body); font-size:clamp(15px,1.5vw,18px); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:#3a2c08;
}
.company-page .serving__left span{
  font-family:var(--ff-body); font-size:clamp(19px,2.3vw,27px); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:#181206;
}
.company-page .serving .btn-dark{ background:var(--ink); color:var(--cream); }
.company-page .serving .btn-dark::before{ background:#fff; }
.company-page .serving .btn-dark:hover{ color:var(--ink); }

/* =========================================================
   RESPONSIVE
   ========================================================= */


/* ======================================================================
   PROJECTS PAGE
   ====================================================================== */

/* =========================================================
   Gill Grewal Construction Inc. — Projects page
   Loads after style.css + layout.css + pages.css.
   ========================================================= */

/* =========================================================
   HERO — full-bleed photo with the copy sitting low-left
   ========================================================= */
.prhero{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
  min-height:clamp(400px,52vw,600px);
  padding:calc(var(--header-h, 150px) + clamp(50px,7vw,90px)) 0 clamp(46px,6vw,76px) !important;
  background:var(--ink);
}
.prhero__media{ position:absolute; inset:-6% 0; will-change:transform; }
.prhero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
  transform:scale(1.09);
  animation:prZoom 18s ease-out forwards, prFade 1.4s ease forwards;
  opacity:0;
}
@keyframes prZoom{
to{ transform:scale(1); } }
@keyframes prFade{
to{ opacity:1; } }
.prhero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(95deg, rgba(6,7,10,.93) 0%, rgba(6,7,10,.74) 34%, rgba(6,7,10,.2) 68%, rgba(6,7,10,.45) 100%),
    linear-gradient(to top, rgba(6,7,10,.9) 0%, rgba(6,7,10,.15) 48%, transparent 72%);
}
.prhero__inner{ position:relative; z-index:2; padding-inline:var(--gutter); }
.prhero .crumbs{
  display:flex; align-items:center; gap:12px; margin-bottom:22px;
  font-family:var(--ff-body); font-size:11.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
}
.prhero .crumbs a{ color:rgba(255,255,255,.65); transition:color .3s var(--ease); }
.prhero .crumbs a:hover{ color:var(--gold-soft); }
.prhero .crumbs span{ color:rgba(255,255,255,.3); }
.prhero .crumbs b{ font-weight:500; color:var(--gold-soft); }
.prhero__title{
  font-family:var(--ff-serif); font-weight:400;
  font-size:clamp(34px,5.4vw,72px); line-height:1.1;
  letter-spacing:.004em; text-transform:uppercase;
  color:#fff; margin:0;
}
/* both wrappers are <span>,
projects-page so they opt out of the global span size */
.prhero__title .line,
.prhero__title .line span{ font-size:inherit; }
.prhero__title .line{ display:block; overflow:hidden; padding-bottom:.1em; }
.prhero__title .line span{
  display:block; transform:translateY(110%) skewY(4deg);
  animation:prLine 1.1s var(--ease) forwards;
}
.prhero__title .line:nth-child(1) span{ animation-delay:.3s; }
.prhero__title .line:nth-child(2) span{ animation-delay:.44s; }
@keyframes prLine{
to{ transform:translateY(0) skewY(0); } }
.prhero__rule{
  display:block; width:74px; height:2px; background:var(--gold);
  margin:22px 0 20px; transform:scaleX(0); transform-origin:left;
  animation:prRule .9s var(--ease) .8s forwards;
}
@keyframes prRule{
to{ transform:scaleX(1); } }
.prhero__lead{
  color:rgba(255,255,255,.76);line-height:1.8; max-width:44ch;
}
/* =========================================================
   PORTFOLIO HEAD + FILTERS
   ========================================================= */
.projects-page .portfolio{ background:var(--cream); }
.projects-page .portfolio__head{ text-align:center; margin-bottom:clamp(30px,3.6vw,44px); }
.projects-page .portfolio__head .eyebrow{ margin-bottom:14px; }
.projects-page .portfolio__head h2{ text-transform:uppercase; margin-bottom:18px; }
.projects-page .portfolio__lead{
line-height:1.85; max-width:62ch; margin-inline:auto;
}
/* =========================================================
   PROJECT GRID — 12 columns,
projects-page cards of varied span
   ========================================================= */
.projects-page .pgrid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.6vw,22px);
}
.projects-page .pcard--w3{ grid-column:span 3; }
.projects-page .pcard--w4{ grid-column:span 4; }
.projects-page .pcard--w5{ grid-column:span 5; }
.projects-page .pcard--w7{ grid-column:span 7; }
/* while a category filter is on,
projects-page the collage becomes a tidy 3-up */
.projects-page .pgrid.is-filtered .pcard{ grid-column:span 4; }
.projects-page .pcard{
  position:relative; isolation:isolate; overflow:hidden;
  display:block;
  min-height:clamp(230px,21vw,290px);
  background:#0b0c0f;
  border:1px solid rgba(201,162,39,.22);
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease),
             transform .45s var(--ease), opacity .35s var(--ease);
}
.projects-page .pcard img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.03);
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
}
.projects-page .pcard:hover{
  transform:translateY(-4px);
  border-color:rgba(201,162,39,.75);
  box-shadow:0 24px 48px -22px rgba(0,0,0,.85);
}
.projects-page .pcard:hover img{ transform:scale(1.08); filter:brightness(1.05); }
/* filtering: hidden cards collapse out of the grid */
.projects-page .pcard.is-hidden{ display:none; }
.projects-page .pcard.is-out{ opacity:0; transform:translateY(10px) scale(.97); }
.projects-page .pgrid__empty{
  display:none; text-align:center; padding:56px 0;
  font-family:var(--ff-serif);color:var(--body);
}
.projects-page .pgrid__empty.is-on{ display:block; }
/* =========================================================
   FEATURED PROJECT
   ========================================================= */
.projects-page .feat{ background:var(--ink);  overflow:hidden; }
.projects-page .feat__grid{
  display:grid; grid-template-columns:1.46fr 1.18fr .56fr;
  gap:clamp(20px,2.4vw,34px); align-items:center;
}
/* three skewed stage panels; the hovered one opens up */
.projects-page .fslides{
  display:flex; gap:5px; overflow:hidden;
  height:clamp(155px,15.5vw,205px);
  border:1px solid rgba(201,162,39,.18);
}
.projects-page .fslide{
  position:relative; margin:0; overflow:hidden; cursor:pointer;
  flex:1 1 0; min-width:0;
  transform:skewX(-8deg);
  transition:flex-grow .55s var(--ease);
}
.projects-page .fslide:nth-child(1){ flex-grow:1; }
.projects-page .fslide:nth-child(2){ flex-grow:1.45; }
.projects-page .fslide:nth-child(3){ flex-grow:1.75; }
.projects-page .fslide.is-open{ flex-grow:2.2; }
.projects-page .fslides:hover .fslide:hover{ flex-grow:2.2; }
.projects-page .fslide img{
  width:124%; height:100%; object-fit:cover; object-position:center 52%;
  margin-left:-12%; transform:skewX(8deg);
  filter:brightness(.74) saturate(.98);
  transition:filter .5s var(--ease), transform 1s var(--ease);
}
.projects-page .fslide:nth-child(1) img{ object-position:center 60%; }
/* keep the graded lot in frame */
.projects-page .fslide:nth-child(2) img{ object-position:center 46%; }
/* canopy steel sits high  */
.projects-page .fslide:nth-child(3) img{ object-position:center 56%; }
.projects-page .fslide:hover img,
.projects-page .fslide.is-open img{ filter:brightness(.98) saturate(1); }
.projects-page .fslide figcaption{
  position:absolute; top:10px; left:clamp(11px,1.3vw,16px);
  transform:skewX(8deg); transform-origin:left center;
  padding:5px 10px; background:rgba(9,10,13,.88);
  font-family:var(--ff-body); font-size:9px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#fff;
  white-space:nowrap;
}
.projects-page .feat__copy .eyebrow{ margin-bottom:16px; }
.projects-page .feat__copy h2{
  font-family:var(--ff-serif); font-weight:400;
line-height:1.26;
  text-transform:uppercase; color:#fff; margin-bottom:16px;
}
.projects-page .feat__copy > p{
  color:rgba(230,228,222,.72);line-height:1.75;
  max-width:44ch; margin-bottom:22px;
}
.projects-page .feat__copy .btn{ padding:14px 24px;}
.projects-page .feat__scope{ display:grid; gap:13px; }
.projects-page .feat__scope li{
  display:flex; align-items:center; gap:14px;
  font-family:var(--ff-body);color:rgba(238,234,226,.85);
}
.projects-page .feat__scope img{
  width:auto; height:34px; max-width:44px; flex:none; object-fit:contain;
  transition:transform .4s var(--ease);
}
.projects-page .feat__scope li:hover img{ transform:translateX(3px) scale(1.08); }
/* =========================================================
   DELIVERY PROCESS
   Each step is a 2x2 block: numeral over icon on the left,
projects-page title over copy on the right — matching the reference.
   ========================================================= */
.projects-page .deliver{ background:var(--cream-2); }
.projects-page .deliver__head{ text-align:center; margin-bottom:clamp(30px,3.6vw,48px); }
.projects-page .deliver__head .eyebrow{ margin-bottom:14px; }
.projects-page .deliver__head h2{ text-transform:uppercase; }
.projects-page .dsteps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,34px); }
.projects-page .dstep{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px clamp(12px,1.4vw,20px);
  align-items:start;
  padding-right:clamp(10px,1.6vw,22px);
}
.projects-page .dstep + .dstep{ border-left:1px solid rgba(12,13,16,.14); padding-left:clamp(16px,2vw,30px); }
.projects-page .dstep__num{
  grid-column:1; justify-self:center;
  font-family:var(--ff-serif); font-size:clamp(26px,2.6vw,34px);
  font-weight:400; line-height:1; color:rgba(201,162,39,.62);
  transition:color .4s var(--ease);
}
.projects-page .dstep:hover .dstep__num{ color:var(--gold); }
.projects-page .dstep h5{
  grid-column:2; align-self:center;
  font-family:var(--ff-body); font-size:11.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
.projects-page .dstep__ico{
  grid-column:1; justify-self:center;
  width:auto; height:clamp(46px,4.2vw,58px); max-width:68px;
  object-fit:contain;
  transition:transform .45s var(--ease);
}
.projects-page .dstep:hover .dstep__ico{ transform:translateY(-4px); }
.projects-page .dstep p{ grid-column:2;line-height:1.75; }
/* =========================================================
   DETAILS DEFINE THE DIFFERENCE
   ========================================================= */
.projects-page .details{
  position:relative; display:grid; grid-template-columns:1fr 1.12fr;
  background:var(--ink); align-items:stretch;
  padding:0 !important;          /* photo runs edge to edge */
}
.projects-page .details__media{
  position:relative; margin:0; overflow:hidden;
  min-height:clamp(300px,32vw,440px);
}
/* absolute: the band matches the panel beside it, whatever the photo shape */
.projects-page .details__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  transform:scale(1.04);
  transition:transform 1.3s var(--ease);
}
.projects-page .details:hover .details__media img{ transform:scale(1.09); }
.projects-page .details__panel{
  display:flex; align-items:center;
  background:var(--cream);
  padding:clamp(38px,4.6vw,70px) clamp(24px,4vw,60px);
}
/* heading block | hairline | list */
.projects-page .details__inner{
  display:grid; grid-template-columns:auto 1px minmax(0,1fr);
  gap:clamp(20px,2.5vw,38px); align-items:center; width:100%;
}
.projects-page .details__head h2{
  text-transform:uppercase;line-height:1.22;
  margin-bottom:20px;
}
/* short gold dash sits under the heading,
projects-page as in the reference */
.projects-page .details__dash{
  display:block; width:64px; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease);
}
.projects-page .details__dash.in{ transform:scaleX(1); }
.projects-page .details__rule{
  display:block; width:1px; align-self:stretch;
  background:linear-gradient(to bottom, rgba(201,162,39,0), rgba(201,162,39,.55) 12%, rgba(201,162,39,.55) 88%, rgba(201,162,39,0));
  transform:scaleY(0); transform-origin:top;
  transition:transform .9s var(--ease) .1s;
}
.projects-page .details__rule.in{ transform:scaleY(1); }
.projects-page .dlist{ display:grid; gap:clamp(20px,2.4vw,30px); }
.projects-page .dlist li{ display:flex; align-items:flex-start; gap:18px; }
.projects-page .dlist img{
  width:auto; height:48px; max-width:58px; flex:none; object-fit:contain;
  margin-top:2px; transition:transform .4s var(--ease);
}
.projects-page .dlist li:hover img{ transform:scale(1.1) rotate(-4deg); }
.projects-page .dlist h6{
  font-family:var(--ff-body); font-size:11.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); margin-bottom:8px;
}
.projects-page .dlist p{line-height:1.75; max-width:34ch; }

/* =========================================================
   RESPONSIVE
   ========================================================= */


/* ======================================================================
   SERVICES PAGE
   ====================================================================== */

/* =========================================================
   Gill Grewal Construction Inc. — Services page
   Reuses .prhero from projects.css; everything else is here.
   ========================================================= */

/* =========================================================
   EXPERTISE HEAD
   ========================================================= */
.expertise-head{
  background:var(--cream);
  text-align:center;
}
.services-page .expertise-head .eyebrow{ margin-bottom:14px; }
.services-page .expertise-head h2{ text-transform:uppercase; }
.services-page .dash{
  display:block; width:58px; height:2px; background:var(--gold);
  margin:22px auto 0; transform:scaleX(0);
  transition:transform .8s var(--ease);
}
.services-page .dash.in{ transform:scaleX(1); }
/* =========================================================
   ALL SERVICES — photo cards
   Same idea as the home page grid, but the copy sits under
   the photo instead of over it: image, heading, one line of
   scope, then the button through to the detail section.
   ========================================================= */
.services-page .allsvc{ background:var(--cream); padding-top:clamp(28px,3.2vw,44px) !important; }
.services-page .allsvc__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,28px);
}
.services-page .svcard{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid rgba(12,13,16,.09);
  transition:transform .45s var(--ease), border-color .45s var(--ease),
             box-shadow .45s var(--ease);
}
.services-page .svcard:hover{
  transform:translateY(-6px); border-color:rgba(201,162,39,.55);
  box-shadow:0 26px 46px -30px rgba(12,13,16,.45);
}
.services-page .svcard__media{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:16/10; background:var(--cream-2);
}
.services-page .svcard__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.services-page .svcard:hover .svcard__media img{ transform:scale(1.07); }
/* the number stays on the photo, as it is on the home page */
.services-page .svcard__num{
  position:absolute; left:0; bottom:0;
  padding:5px 14px; background:rgba(12,13,16,.72);
  font-family:var(--ff-serif); font-size:20px; line-height:1.25;
  color:var(--gold-soft);
}
.services-page .svcard__body{
  display:flex; flex-direction:column; align-items:flex-start;
  flex:1; padding:clamp(20px,1.9vw,28px);
}
.services-page .svcard__body h3{
  font-family:var(--ff-serif); font-weight:400;
  font-size:clamp(19px,1.55vw,23px); line-height:1.25;
  color:var(--ink); margin-bottom:10px;
}
.services-page .svcard__body p{
  font-size:14.5px; line-height:1.65; color:var(--body);
  margin-bottom:22px;
}
/* pushed to the bottom so the buttons line up across a row */
.services-page .svcard__btn{ margin-top:auto; }

/* =========================================================
   ONE CONTRACTOR. EVERY PHASE.
   ========================================================= */
.services-page .onec{
  position:relative; overflow:hidden;
  background:#08090b;
}
.services-page .onec::before{                        /* faint gold corner wash */
  content:''; position:absolute; inset:0;
  background:radial-gradient(90% 120% at 6% -20%, rgba(201,162,39,.13), transparent 55%);
}
.services-page .onec > .container{ position:relative; z-index:2; }
.services-page .onec__title{
  font-family:var(--ff-serif); font-weight:400;
text-transform:uppercase;
  letter-spacing:.01em; color:#fff; text-align:center;
  margin-bottom:clamp(24px,3vw,38px);
}
.services-page .onec__shots{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,24px); margin-bottom:clamp(26px,3.2vw,42px);
}
.services-page .onec__shots figure{
  margin:0; overflow:hidden; aspect-ratio:16/10;
  border:1px solid rgba(201,162,39,.24);
}
.services-page .onec__shots img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); filter:brightness(.92);
  transition:transform 1.2s var(--ease), filter .6s var(--ease);
}
.services-page .onec__shots figure:hover img{ transform:scale(1.1); filter:brightness(1.04); }
.services-page .onec__values{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.services-page .onec__values li{
  display:flex; align-items:flex-start; gap:16px;
  padding:0 clamp(14px,2vw,30px);
  border-left:1px solid rgba(255,255,255,.11);
}
.services-page .onec__values li:first-child{ border-left:0; padding-left:0; }
.services-page .onec__values img{
  width:auto; height:48px; max-width:58px; flex:none; object-fit:contain;
  transition:transform .45s var(--ease);
}
.services-page .onec__values li:hover img{ transform:translateY(-4px); }
.services-page .onec__values h5{
  font-family:var(--ff-body); font-size:12.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:#f3eee4; margin-bottom:9px;
}
.services-page .onec__values p{line-height:1.75; color:var(--body-dark); max-width:32ch; }
/* =========================================================
   PROCESS — numbered dots joined by a line that draws in
   ========================================================= */
.services-page .sproc{ background:var(--cream); }
.services-page .sproc__title{
  text-align:center; text-transform:uppercase;
margin-bottom:clamp(34px,4vw,54px);
}
.services-page .pline{
  position:relative;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2vw,28px);
}
/* the rail sits behind the dots and grows outward on reveal */
.services-page .pline::before{
  content:''; position:absolute; z-index:0;
  top:19px; left:12.5%; right:12.5%; height:1px;
  background:rgba(201,162,39,.45);
  transform:scaleX(0); transform-origin:center;
  transition:transform 1.1s var(--ease) .25s;
}
.services-page .pline.in::before{ transform:scaleX(1); }
.services-page .pstep{
  position:relative; z-index:1; text-align:center;
  padding:0 clamp(8px,1.4vw,20px);
}
.services-page .pstep + .pstep{ border-left:1px solid rgba(12,13,16,.1); }
.services-page .pstep__dot{
  display:grid; place-items:center;
  width:38px; height:38px; margin:0 auto 20px; border-radius:50%;
  background:var(--cream); border:1px solid var(--gold);
  font-family:var(--ff-serif); font-size:15px; color:var(--gold-deep);
  transform:scale(0);
  transition:transform .5s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.services-page .pline.in .pstep:nth-child(1) .pstep__dot{ transition-delay:.30s; }
.services-page .pline.in .pstep:nth-child(2) .pstep__dot{ transition-delay:.48s; }
.services-page .pline.in .pstep:nth-child(3) .pstep__dot{ transition-delay:.66s; }
.services-page .pline.in .pstep:nth-child(4) .pstep__dot{ transition-delay:.84s; }
.services-page .pline.in .pstep__dot{ transform:scale(1); }
.services-page .pstep:hover .pstep__dot{ background:var(--gold); color:#181206; }
.services-page .pstep__ico{
  width:auto; height:52px; max-width:64px; margin:0 auto 16px;
  display:block; object-fit:contain;
  transition:transform .45s var(--ease);
}
.services-page .pstep:hover .pstep__ico{ transform:translateY(-5px); }
.services-page .pstep h5{
  font-family:var(--ff-body); font-size:11.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); margin-bottom:10px;
}
.services-page .pstep p{line-height:1.75; max-width:26ch; margin-inline:auto; }
/* =========================================================
   GOLD CTA BAND
   ========================================================= */
.services-page .sband{
  position:relative; overflow:hidden;
  background:var(--gold); padding:clamp(22px,2.8vw,34px) var(--gutter) !important;
}
.services-page .sband::before{                       /* subtle sheen sweeping across */
  content:''; position:absolute; top:0; bottom:0; left:-40%; width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  animation:sheen 6s ease-in-out 1.2s infinite;
}
@keyframes sheen{
0%{ left:-40%; }
55%,
100%{ left:120%; }
}
.services-page .sband__inner{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,3vw,44px); flex-wrap:wrap;
}
.services-page .sband__left{ display:flex; align-items:center; gap:20px; }
.services-page .sband__left img{
  width:auto; height:54px; max-width:64px; flex:none; object-fit:contain;
  filter:brightness(0) opacity(.72);   /* gold icon reads as dark ink on the gold band */
}
.services-page .sband h2{
  font-family:var(--ff-serif); font-weight:400;
text-transform:uppercase;
  letter-spacing:.01em; color:#181206; margin-bottom:5px;
}
.services-page .sband__left p{color:#3a2c08; }
.services-page .sband .btn-dark{ background:var(--ink); color:var(--cream); }
.services-page .sband .btn-dark::before{ background:#fff; }
.services-page .sband .btn-dark:hover{ color:var(--ink); }

/* =========================================================
   RESPONSIVE
   ========================================================= */


/* ======================================================================
   CONTACT & LEGAL PAGES
   ====================================================================== */

/* =========================================================
   Gill Grewal Construction Inc. — inner pages
   Shared by contact.html,
contact-page privacy.html and terms.html.
   Loads after style.css + layout.css.
   ========================================================= */

/* =========================================================
   COMPACT PAGE HEADER (dark band under the fixed header)
   ========================================================= */
.phead{
  position:relative; overflow:hidden;
  background:var(--ink);
  padding:calc(var(--header-h, 150px) + clamp(46px,6vw,80px)) 0 clamp(46px,6vw,74px) !important;
}
.contact-page .phead::before, .legal-page .phead::before{                       /* faint gold wash, top-right */
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 150% at 88% -30%, rgba(201,162,39,.16), transparent 58%),
    linear-gradient(to top, rgba(255,255,255,.02), transparent 60%);
}
.contact-page .phead::after, .legal-page .phead::after{                        /* hairline rule at the base */
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,162,39,.5) 22%, rgba(201,162,39,.5) 78%, transparent);
}
/* contact carries a photo band; the legal pages stay plain ink */
.contact-page .phead{
  background-image:url('../img/office.jpg?v=42');
  background-size:cover; background-position:center 64%;
}
/* the copy sits left, so the scrim is heaviest there and opens up to the right */
.contact-page .phead::before{
  background:
    radial-gradient(120% 150% at 88% -30%, rgba(201,162,39,.18), transparent 58%),
    linear-gradient(96deg,
      rgba(8,9,12,.96) 0%, rgba(8,9,12,.9) 32%,
      rgba(8,9,12,.66) 58%, rgba(8,9,12,.42) 100%),
    linear-gradient(to top, rgba(8,9,12,.7), transparent 55%);
}
.contact-page .phead__inner, .legal-page .phead__inner{ position:relative; z-index:2; padding-inline:var(--gutter); }
.contact-page .phead h1, .legal-page .phead h1{
  color:#fff; text-transform:uppercase;
  font-size:clamp(28px,3.6vw,46px); line-height:1.16; letter-spacing:.01em;
  margin-bottom:18px;
}
.contact-page .phead__meta, .legal-page .phead__meta{
  font-family:var(--ff-body); font-size:12px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin-bottom:26px;
}
.contact-page .phead__meta b, .legal-page .phead__meta b{ color:var(--gold-soft); font-weight:500; }
.contact-page .phead .crumbs, .legal-page .phead .crumbs{
  display:flex; align-items:center; gap:12px;
  font-family:var(--ff-body); font-size:11.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
}
.contact-page .phead .crumbs a, .legal-page .phead .crumbs a{ color:rgba(255,255,255,.6); transition:color .3s var(--ease); }
.contact-page .phead .crumbs a:hover, .legal-page .phead .crumbs a:hover{ color:var(--gold-soft); }
.contact-page .phead .crumbs span, .legal-page .phead .crumbs span{ color:rgba(255,255,255,.26); }
.contact-page .phead .crumbs b, .legal-page .phead .crumbs b{ font-weight:500; color:var(--gold-soft); }
/* =========================================================
   LEGAL PAGES — sticky contents rail beside the article
   ========================================================= */
.legal-page .legal{ background:var(--cream); }
.legal-page .legal__grid{
  display:grid; grid-template-columns:250px 1fr;
  gap:clamp(34px,5vw,76px); align-items:start;
}
.legal-page .legal__toc{ position:sticky; top:calc(var(--header-h, 150px) + 24px); }
.legal-page .legal__toc-title{
  font-family:var(--ff-body); font-size:11.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep); padding-bottom:14px; margin-bottom:6px;
  border-bottom:1px solid rgba(201,162,39,.32);
}
.legal-page .legal__toc ol{ counter-reset:toc; }
.legal-page .legal__toc a{
  display:block; position:relative;
  padding:8px 0 8px 26px;line-height:1.5;
  color:var(--body); counter-increment:toc;
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.legal-page .legal__toc a::before{
  content:counter(toc,decimal-leading-zero);
  position:absolute; left:0; top:8px;
  font-family:var(--ff-serif); font-size:11.5px;
  color:rgba(165,129,26,.6);
}
.legal-page .legal__toc a:hover{ color:var(--ink); transform:translateX(3px); }
.legal-page .legal__toc a.is-current{ color:var(--gold-deep); font-weight:500; }
.legal-page .legal__toc a.is-current::before{ color:var(--gold); }
.legal-page .legal__body > p:first-of-type{
line-height:1.85; color:#4b4e56;
  padding-bottom:26px; margin-bottom:34px;
  border-bottom:1px solid rgba(12,13,16,.1);
}
.legal-page .legal__body section{ scroll-margin-top:calc(var(--header-h, 150px) + 26px); }
.legal-page .legal__body section + section{ margin-top:clamp(32px,4vw,46px); }
.legal-page .legal__body h2{
  font-family:var(--ff-serif); font-weight:500;
line-height:1.3;
  color:var(--ink); margin-bottom:14px;
}
.legal-page .legal__body h2 .sn{
  font-size:.78em; color:var(--gold-deep); margin-right:10px;
}
.legal-page .legal__body p{line-height:1.9; max-width:70ch; }
.legal-page .legal__body p + p{ margin-top:14px; }
.legal-page .legal__body ul{ margin-top:14px; display:grid; gap:10px; max-width:70ch; }
.legal-page .legal__body ul + p{ margin-top:18px; }
.legal-page .legal__body li{
  position:relative; padding-left:22px;line-height:1.8;
}
.legal-page .legal__body li::before{
  content:''; position:absolute; left:2px; top:.72em;
  width:6px; height:6px; border:1px solid var(--gold); transform:rotate(45deg);
}
.legal-page .legal__body a{ color:var(--gold-deep); border-bottom:1px solid rgba(201,162,39,.4); }
.legal-page .legal__body a:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.legal-page .legal__note{
  margin-top:clamp(38px,5vw,56px); padding:24px 26px;
  background:var(--cream-2); border-left:2px solid var(--gold);
}
.legal-page .legal__note p{line-height:1.8; max-width:none; }
.legal-page .legal__note b{ color:var(--ink); font-weight:600; }
/* =========================================================
   CONTACT — quick-detail strip
   ========================================================= */
.contact-page .cstrip{ background:var(--ink);  }
.contact-page .cstrip__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.contact-page .cstrip__item{
  text-align:center; padding:0 clamp(12px,1.8vw,26px);
  border-left:1px solid rgba(255,255,255,.1);
}
.contact-page .cstrip__item:first-child{ border-left:0; }
.contact-page .cstrip__item svg{
  width:34px; height:34px; margin:0 auto 16px; display:block;
  fill:none; stroke:var(--gold); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .45s var(--ease);
}
.contact-page .cstrip__item:hover svg{ transform:translateY(-4px); }
.contact-page .cstrip__item h5{
  font-family:var(--ff-body); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:10px;
}
.contact-page .cstrip__item p,
.contact-page .cstrip__item a{
line-height:1.7; color:rgba(226,224,218,.8);
  word-break:break-word;
}
.contact-page .cstrip__item a:hover{ color:#fff; }
/* =========================================================
   CONTACT — form + aside
   ========================================================= */
.contact-page .cmain{ background:var(--cream); }
.contact-page .cmain__grid{
  display:grid; grid-template-columns:1.55fr 1fr;
  gap:clamp(34px,5vw,72px); align-items:start;
}
.contact-page .cform__head{ margin-bottom:32px; }
.contact-page .cform__head h2{ margin-bottom:14px; }
.contact-page .cform__head p{max-width:52ch; }
:is(.contact-page,.enq) .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 22px; }
:is(.contact-page,.enq) .field{ display:flex; flex-direction:column; }
:is(.contact-page,.enq) .field--full{ grid-column:1 / -1; }
:is(.contact-page,.enq) .field label{
  font-family:var(--ff-body); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); margin-bottom:9px;
}
:is(.contact-page,.enq) .field label .req{ color:var(--gold-deep); }
:is(.contact-page,.enq) .field input,
:is(.contact-page,.enq) .field select,
:is(.contact-page,.enq) .field textarea{
  font:inherit; font-size:14.5px; color:var(--ink);
  background:#fff; border:1px solid rgba(12,13,16,.16);
  padding:13px 15px; width:100%;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
:is(.contact-page,.enq) .field textarea{ resize:vertical; min-height:150px; line-height:1.7; }
:is(.contact-page,.enq) .field select{
  appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230c0d10' stroke-width='1.4' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:12px;
}
:is(.contact-page,.enq) .field input:focus,
:is(.contact-page,.enq) .field select:focus,
:is(.contact-page,.enq) .field textarea:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,39,.14);
}
:is(.contact-page,.enq) .field.has-error input,
:is(.contact-page,.enq) .field.has-error select,
:is(.contact-page,.enq) .field.has-error textarea{ border-color:#c0562f; }
:is(.contact-page,.enq) .field .err{
  font-size:11.5px; color:#c0562f; margin-top:7px;
  min-height:0; opacity:0; transform:translateY(-3px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
:is(.contact-page,.enq) .field.has-error .err{ opacity:1; transform:none; }
:is(.contact-page,.enq) .cform__foot{
  grid-column:1 / -1; display:flex; align-items:center;
  gap:20px; flex-wrap:wrap; margin-top:6px;
}
:is(.contact-page,.enq) .cform__hint{line-height:1.7; max-width:38ch; }
:is(.contact-page,.enq) .cform__done{
  display:none; align-items:flex-start; gap:16px;
  padding:22px 24px; background:#fff;
  border-left:2px solid var(--gold);
  box-shadow:0 20px 46px -30px rgba(0,0,0,.4);
}
:is(.contact-page,.enq) .cform__done.is-on{ display:flex; }
:is(.contact-page,.enq) .cform__done svg{
  width:32px; height:32px; flex:none; margin-top:2px;
  fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
:is(.contact-page,.enq) .cform__done h5{
  font-family:var(--ff-serif); font-size:18px; font-weight:500; margin-bottom:7px;
}
:is(.contact-page,.enq) .cform__done p{line-height:1.75; }
/* ---------- aside ---------- */
.contact-page .caside{
  background:var(--ink); color:var(--body-dark);
  padding:clamp(30px,3.4vw,44px);
}
.contact-page .caside h3{
  font-family:var(--ff-serif); font-size:clamp(20px,2vw,25px);
  font-weight:400; color:#fff; margin-bottom:26px;
}
.contact-page .cnext{ counter-reset:cnext; display:grid; gap:24px; }
.contact-page .cnext li{ position:relative; padding-left:52px; counter-increment:cnext; }
.contact-page .cnext li::before{
  content:counter(cnext,decimal-leading-zero);
  position:absolute; left:0; top:-4px;
  font-family:var(--ff-serif); font-size:24px; color:var(--gold);
}
.contact-page .cnext li::after{                     /* connector between the steps */
  content:''; position:absolute; left:13px; top:26px; bottom:-24px; width:1px;
  background:rgba(201,162,39,.28);
}
.contact-page .cnext li:last-child::after{ display:none; }
.contact-page .cnext h6{
  font-family:var(--ff-body); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:#f2ede2; margin-bottom:8px;
}
.contact-page .cnext p{line-height:1.75; }
.contact-page .caside__hr{
  height:1px; margin:30px 0;
  background:linear-gradient(90deg, rgba(201,162,39,.5), transparent);
}
.contact-page .caside__urgent h6{
  font-family:var(--ff-body); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:12px;
}
.contact-page .caside__urgent p{line-height:1.75; margin-bottom:14px; }
.contact-page .caside__tel{
  font-family:var(--ff-serif); font-size:clamp(21px,2.2vw,27px);
  color:#fff; transition:color .3s var(--ease);
}
.contact-page .caside__tel:hover{ color:var(--gold-soft); }
/* =========================================================
   SERVICE-AREA BAND
   ========================================================= */
.contact-page .areaband{ background:var(--gold); padding:clamp(22px,2.6vw,32px) var(--gutter) !important; }
.contact-page .areaband__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.contact-page .areaband__left{ display:flex; align-items:center; gap:18px; }
.contact-page .areaband__pin{
  display:grid; place-items:center; width:54px; height:54px; flex:none;
  border:1px solid rgba(24,18,6,.32); border-radius:50%;
}
.contact-page .areaband__pin svg{
  width:26px; height:26px; fill:none; stroke:#241b06;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.contact-page .areaband__left p{ display:flex; flex-direction:column; line-height:1.2; }
.contact-page .areaband__left b{
  font-family:var(--ff-body); font-size:11.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:#3a2c08;
}
.contact-page .areaband__left span{
  font-family:var(--ff-serif); font-size:clamp(19px,2.2vw,26px);
  text-transform:uppercase; color:#181206; letter-spacing:.01em;
}
.contact-page .areaband .btn-dark{ background:var(--ink); color:var(--cream); }
.contact-page .areaband .btn-dark::before{ background:#fff; }
.contact-page .areaband .btn-dark:hover{ color:var(--ink); }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* ======================================================================
   ENQUIRY MODAL
   The same form as the contact page, opened from any CTA that carries
   data-enquiry. The field chrome is shared — see the :is(.contact-page,.enq)
   selectors above — so there is only one set of input styles on the site.
   ====================================================================== */
.enq{
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(14px,4vh,54px) clamp(12px,4vw,40px);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transition:opacity .3s var(--ease);
}
.enq[hidden]{ display:none; }
.enq.is-open{ opacity:1; }
.enq__scrim{ position:fixed; inset:0; background:rgba(5,6,8,.82); }

.enq__panel{
  position:relative; width:min(820px,100%); margin:auto;
  background:var(--cream); padding:clamp(26px,3.4vw,46px);
  border-top:2px solid var(--gold);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
  transform:translateY(14px) scale(.985);
  transition:transform .35s var(--ease);
}
.enq.is-open .enq__panel{ transform:none; }

.enq__x{
  position:absolute; top:12px; right:12px;
  display:grid; place-items:center; width:40px; height:40px;
  background:none; border:1px solid rgba(12,13,16,.16); cursor:pointer;
  color:var(--ink); line-height:1;
  transition:background .3s var(--ease), border-color .3s var(--ease),
             color .3s var(--ease), transform .3s var(--ease);
}
.enq__x svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.enq__x:hover{ background:var(--ink); border-color:var(--ink); color:var(--gold); transform:rotate(90deg); }

.enq__head{ margin-bottom:28px; padding-right:44px; }
.enq__head .rule-gold{ transform:scaleX(1); }
.enq__head h2{ font-size:clamp(24px,2.6vw,34px); margin:16px 0 12px; }
.enq__head p{ line-height:1.75; max-width:52ch; }

/* the mail-app fallback confirmation, same component as the contact page */
.enq .cform__done{ margin-top:22px; }

body.enq-open{ overflow:hidden; }