/* ==========================================================================
   MBS SITE KIT — THEME
   This is the ONLY file you edit per client. site.css never changes.
   Load order:  fonts.css  ->  theme.css  ->  site.css
   ========================================================================== */

:root{
  /* ---------------------------------------------------------------- NEUTRALS
     Nine steps from near-black to near-white. Keep the ramp; change the hue.  */
  --black:        #0a1220;
  --black-soft:   #101b2c;
  --charcoal:     #1b2839;
  --stone-dark:   #465468;
  --stone:        #93a0b2;
  --stone-light:  #cfd7e1;
  --cream:        #e9eef4;
  --ivory:        #f5f8fb;
  --white:        #ffffff;

  /* ------------------------------------------------------------------ ACCENT
     --accent        small text and rules on LIGHT backgrounds (needs 4.5:1 on ivory)
     --accent-deep   hover / pressed / smallest text on light
     --accent-light  accents on DARK backgrounds (needs 4.5:1 on black)
     --accent-pale   faint wash, and the highlight inside the button sheen
     --btn           primary button fill        --btn-fg  its text colour
     --accent-rgb    same colour as "r,g,b" for the button glow shadows        */
  --accent:       #8a6220;
  --accent-deep:  #664915;
  --accent-light: #e0be79;
  --accent-pale:  #f0e2c4;
  --btn:          #c08a2e;
  --btn-hover:    #a57623;
  --btn-fg:       #0a1220;
  --accent-rgb:   138,98,32;

  /* -------------------------------------------------------------------- TEXT */
  --ink:            #101a28;   /* body text on light */
  --ink-rgb:        16,26,40;
  --ink-soft:       #4a5768;   /* secondary text on light */
  --paper-ink:      #e7edf4;   /* body text on dark */
  --paper-ink-soft: #a8b4c4;   /* secondary text on dark */
  --error:          #8a3b2f;

  /* -------------------------------------------------------------------- TYPE */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ------------------------------------------------------------------ LAYOUT */
  --container-max: 1360px;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ------------------------------------------------------------------ MOTION */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;

  --header-h: 88px;
  --mobile-cta-h: 62px;
}

/* If the display face is a heavy grotesk rather than a serif, add this:
:root{ --font-display:"Bricolage Grotesque",system-ui,sans-serif }
h1,h2,h3,h4,h5{font-weight:800;letter-spacing:-.035em}
.eyebrow{font-family:var(--font-body);font-style:normal;font-weight:700;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase}
*/


/* ==========================================================================
   PRESET PALETTES — paste one over the ACCENT + NEUTRAL blocks above
   ========================================================================== */

/* --- A. WARM BRASS (default) -------------------------------------------
   Trades, construction, cabinetry, HVAC, roofing, anything "established".
   --black #0b0b0a  --black-soft #141312  --charcoal #24221e
   --stone-dark #4a4640  --stone #a79d8c  --stone-light #ddd4c3
   --cream #efe8d9  --ivory #f8f4ec  --white #fffdf9
   --accent #9c7a29  --accent-deep #745c1e  --accent-light #e3c77a
   --accent-pale #f1e3bc  --btn #c99a35  --btn-hover #ad8329
   --btn-fg #0b0b0a  --accent-rgb 156,122,41
   --ink #1a1815  --ink-rgb 26,24,21  --ink-soft #55504a
   --paper-ink #efe9dd  --paper-ink-soft #bcb3a2
   ---------------------------------------------------------------------- */

/* --- B. DEEP ATLANTIC ---------------------------------------------------
   Legal, dental, medical, financial, insurance. Navy shell, brass accent.
   --black #0a1220  --black-soft #101b2c  --charcoal #1b2839
   --stone-dark #465468  --stone #93a0b2  --stone-light #cfd7e1
   --cream #e9eef4  --ivory #f5f8fb  --white #ffffff
   --accent #8a6220  --accent-deep #664915  --accent-light #e0be79
   --accent-pale #f0e2c4  --btn #c08a2e  --btn-hover #a57623
   --btn-fg #0a1220  --accent-rgb 138,98,32
   --ink #101a28  --ink-rgb 16,26,40  --ink-soft #4a5768
   --paper-ink #e7edf4  --paper-ink-soft #a8b4c4
   ---------------------------------------------------------------------- */

/* --- C. FOREST & BONE ---------------------------------------------------
   Landscaping, tree work, outdoor living, farm, veterinary, garden centre.
   --black #0c1210  --black-soft #131b18  --charcoal #1e2a25
   --stone-dark #47554e  --stone #97a399  --stone-light #d3dacf
   --cream #e9ede3  --ivory #f6f8f2  --white #fffffc
   --accent #35603b  --accent-deep #24462a  --accent-light #8fbf95
   --accent-pale #d7ebd9  --btn #c6a24a  --btn-hover #a9873a
   --btn-fg #0c1210  --accent-rgb 53,96,59
   --ink #14201a  --ink-rgb 20,32,26  --ink-soft #4c5a51
   --paper-ink #e8eee6  --paper-ink-soft #a9b5ab
   ---------------------------------------------------------------------- */

/* --- D. SLATE & SIGNAL --------------------------------------------------
   Auto, security, IT, industrial, anything that should read technical.
   Note --btn-fg is white here, not black.
   --black #07080b  --black-soft #0e1015  --charcoal #191c23
   --stone-dark #444a57  --stone #8b93a2  --stone-light #d2d6de
   --cream #eaecf0  --ivory #f6f7f9  --white #ffffff
   --accent #1f5fd0  --accent-deep #17469b  --accent-light #7fa9f0
   --accent-pale #d6e3fb  --btn #2f6bff  --btn-hover #1b45c8
   --btn-fg #ffffff  --accent-rgb 31,95,208
   --ink #0b0d12  --ink-rgb 11,13,18  --ink-soft #5a6170
   --paper-ink #e9ecf2  --paper-ink-soft #a6aebe
   ---------------------------------------------------------------------- */


/* ==========================================================================
   FONT PAIRINGS — pick one, then fetch the woff2 files (see fonts/README.txt)
   ==========================================================================
   1. Playfair Display 500 + Inter        heritage, trades, professional (default)
   2. Fraunces 600 + Inter                warmer, more character: food, wellness, boutique
   3. Bricolage Grotesque 800 + Inter     modern and loud: tech, agency, SaaS
   4. Instrument Serif 400 + Public Sans  high-contrast editorial: luxury, design

   Rule that does not change: ONE expressive display face, ONE quiet body face.
   Two grotesks together is the tell that a template made it.
   ========================================================================== */


/* --- Project override: text-only brand lockup (no logo file supplied) ---- */
.brand--text{padding-block:.2rem}
.brand--text .brand-text{display:block;line-height:1.04}
.brand--text .brand-name{display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,2.55vw,2.15rem);color:var(--white);letter-spacing:-.008em;
  white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.brand--text .brand-sub{display:block;font-size:clamp(.66rem,.9vw,.84rem);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-light);margin-top:.3rem;
  white-space:nowrap}
/* the lockup is the identity here, so it keeps its size when the header condenses */
.site-header.is-solid .brand--text .brand-name{font-size:clamp(1.36rem,2.25vw,1.9rem)}
.site-header.is-solid .brand--text .brand-sub{font-size:clamp(.62rem,.82vw,.76rem)}
/* Nav labels are short phrases; never let one break across two lines. */
.nav-link{white-space:nowrap}
/* between the nav breakpoint and 1180px the nav, phone and lockup share a tight row,
   so the lockup holds a fixed size and the nav tightens around it */
@media (min-width:1000px) and (max-width:1180px){
  .brand--text .brand-name{font-size:1.72rem}
  .brand--text .brand-sub{font-size:.66rem;letter-spacing:.16em}
  .site-header.is-solid .brand--text .brand-name{font-size:1.54rem}
  .main-nav{gap:.6rem}
  .nav-link{font-size:.84rem;padding-inline:.2rem}
  .header-actions{margin-left:.8rem;gap:.6rem}
  .header-phone{font-size:.86rem}
  /* the button is the first thing to go: the phone number is the real CTA,
     and the lockup is carrying the identity with no logo file to fall back on */
  .header-actions .btn{display:none}
}
@media (min-width:1181px) and (max-width:1320px){
  .main-nav{gap:.7rem}
  .nav-link{font-size:.86rem}
}
@media (max-width:560px){
  .brand--text .brand-name{font-size:1.38rem}
  .brand--text .brand-sub{font-size:.6rem;letter-spacing:.15em}
}
@media (max-width:380px){
  .brand--text .brand-name{font-size:1.16rem}
  .brand--text .brand-sub{font-size:.55rem;letter-spacing:.11em}
}

/* --- Wayfinding grid (photographs of the building and its signage) ------- */
.wayfind{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
@media (max-width:820px){.wayfind{grid-template-columns:1fr}}
.wayfind figure{margin:0}
.wayfind .shot{position:relative;overflow:hidden;border-radius:var(--radius-sm);background:var(--charcoal)}
.wayfind .shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;
  transition:transform 900ms var(--ease)}
.wayfind figure:hover .shot img{transform:scale(1.03)}
.wayfind .step{position:absolute;top:0;left:0;background:var(--btn);color:var(--btn-fg);
  font-family:var(--font-display);font-size:1.05rem;font-weight:600;
  padding:.4rem .8rem;z-index:2}
.wayfind figcaption{padding-top:.9rem;font-size:.95rem;line-height:1.6;color:var(--ink-soft)}
.wayfind figcaption b{display:block;font-family:var(--font-display);font-size:1.15rem;
  font-weight:600;color:var(--ink);margin-bottom:.3rem}
.bg-black .wayfind figcaption{color:var(--paper-ink-soft)}
.bg-black .wayfind figcaption b{color:var(--white)}

/* Disclaimer strip above the footer */
.legal-strip{background:var(--black-soft);border-top:1px solid rgba(255,255,255,.08);
  padding-block:1.25rem;color:var(--paper-ink-soft);font-size:.8rem;line-height:1.65}
.legal-strip p{max-width:88ch;margin:0}

/* --- Project override: hero legibility on bright, busy photography --------
   The refinery and bullion slides are light and high-detail, and the client
   does not want the scrim darkened any further. So the type is made to carry
   itself instead: pure white, a touch more weight, and a TIGHT dark halo
   rather than the soft wide bloom, which is what actually separates a letter
   from the metal behind it. Behind the text sits a soft-edged backdrop blur
   that defocuses the photograph without changing its brightness. It lives on
   a pseudo-element, not on .hero-content, so the mask never touches the type. */
.hero-content{position:relative;isolation:isolate}
.hero-content::before{
  content:"";position:absolute;z-index:-1;
  inset:-2.5rem -3rem;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  -webkit-mask-image:radial-gradient(110% 72% at 50% 50%,#000 40%,transparent 76%);
  mask-image:radial-gradient(110% 72% at 50% 50%,#000 40%,transparent 76%);
  pointer-events:none;
}
.hero-content h1{
  color:var(--white);
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 10px rgba(0,0,0,.55),0 14px 44px rgba(0,0,0,.45);
}
.hero-content p{
  color:var(--white);font-weight:500;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 8px rgba(0,0,0,.6),0 10px 28px rgba(0,0,0,.4);
}
.hero-callphone{
  color:var(--white);font-weight:500;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 8px rgba(0,0,0,.6);
}
.hero-callphone a{color:#f4dca8}
.hero-content .eyebrow{background:rgba(4,4,3,.62)}
.hero-dots button{box-shadow:0 1px 3px rgba(0,0,0,.7)}

/* Same treatment on the interior page heroes, which use the same photography. */
.page-hero-inner h1{
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 10px rgba(0,0,0,.55),0 14px 44px rgba(0,0,0,.45);
}
.page-hero-inner .lead{
  color:var(--white);font-weight:500;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 8px rgba(0,0,0,.6);
}

/* Browsers without backdrop-filter still get the type treatment, which is
   doing most of the work here. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-content::before{display:none}
}
@media (prefers-reduced-transparency:reduce){
  .hero-content::before{display:none}
}