/*
  NODE INTERIORS — COLOUR THEME
  ──────────────────────────────────────
  Palette drawn from the logo:
    • Orange mark → #E9663B  (terracotta)
    • Grey N mark → #B1B2B3  (logo grey, informs neutral token family)
  Fonts: unchanged — Archivo Black headings, Plus Jakarta Sans body
*/

/* ─────────────────────────────────────────
   COLOUR TOKENS
   ───────────────────────────────────────── */
:root {
  /* Ground tones — clean neutrals */
  --black:    #141414;   /* clean near-black */
  --white:    #F7F7F5;   /* near-white */

  --grey-50:  #EFEFED;   /* lightest section bg */
  --grey-100: #E4E4E2;   /* slightly deeper */
  --grey-200: #DDDDD9;   /* border / grid line */
  --grey-400: #8C8C8C;   /* mid-grey */
  --grey-600: #505050;   /* body text */

  /* Accent system — terracotta */
  --terracotta:       #E9663B;   /* terracotta */
  --terracotta-light: #F07B54;   /* lighter hover variant */
  --terracotta-muted: #BE4E27;   /* deeper pressed variant */

  /* Grid inner gap — breathing room between column guides and content.
     Matches the visual gap above the logo in the nav bar: (66px nav-h – 34px logo) / 2 ≈ 16px */
  --grid-inner: 1rem;
}

/* ─────────────────────────────────────────
   GLOBAL GROUND
   ───────────────────────────────────────── */
body {
  background: var(--white);
  color: var(--black);
}

/* Subtle grain on the body */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Hero dark bg */
.hero { background: #0E0E0E; }

/* ─────────────────────────────────────────
   STAT NUMBERS — terracotta accent
   ───────────────────────────────────────── */
.about__stat-num { color: var(--terracotta); }
.service-card__num { color: var(--grey-200); }
.process__step-num { color: var(--grey-200); }

/* ─────────────────────────────────────────
   LABEL — terracotta accent
   ───────────────────────────────────────── */
.label {
  color: var(--terracotta);
  letter-spacing: 0.26em;
}

/* ─────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────── */
.btn-outline {
  border-color: var(--terracotta);
  color:        var(--terracotta);
}
.btn-outline:hover {
  background: var(--terracotta);
  color:      var(--white);
}

/* Nav Contact CTA */
.nav__cta {
  background:   var(--terracotta) !important;
  color:        var(--white) !important;
  border-color: var(--terracotta) !important;
}
.nav__cta:hover {
  background:   var(--terracotta-muted) !important;
  border-color: var(--terracotta-muted) !important;
}
.nav.scrolled .nav__cta {
  background:   var(--terracotta) !important;
  color:        var(--white) !important;
  border-color: var(--terracotta) !important;
}

/* Portfolio filter active — black */
.filter-btn.active,
.filter-btn:hover {
  background:   var(--black);
  border-color: var(--black);
  color: var(--white);
}

/* ─────────────────────────────────────────
   SECTION BACKGROUNDS
   ───────────────────────────────────────── */
.services { background: var(--grey-50); }
.team     { background: var(--grey-50); }
.services__grid { background: var(--grey-200); }

/* Process step borders */
.process__steps  { border-color: var(--grey-200); }
.process__step   { border-right-color: var(--grey-200); }

/* ─────────────────────────────────────────
   NAV SCROLLED STATE
   ───────────────────────────────────────── */

/* On hero (transparent nav): white full-width bottom rule */
.nav { border-bottom-color: rgba(255, 255, 255, 0.30); }

/* Active nav link underline: pull it down to sit on top of the nav border-bottom.
   Link bottom is 42px from viewport top, nav bottom is 66px → gap = 24px. */
.nav__links a.active::after {
  bottom: -24px;
}

.nav.scrolled { background: var(--white); border-bottom-color: var(--grey-200); }

/* Mobile nav dropdown */
@media (max-width: 768px) {
  .nav__links {
    background: var(--white);
    border-bottom-color: var(--grey-200);
  }
  .nav__links a { border-bottom-color: var(--grey-100); }
}

/* ─────────────────────────────────────────
   FORM — terracotta focus
   ───────────────────────────────────────── */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 2px rgba(233, 102, 59, 0.12);
}

/* ─────────────────────────────────────────
   FOOTER — clean dark ground
   ───────────────────────────────────────── */
.footer { background: #141414; }

/* ─────────────────────────────────────────
   WHATSAPP FAB
   ───────────────────────────────────────── */
.whatsapp-fab:hover { background: var(--grey-50); }

/* ─────────────────────────────────────────
   TEAM CARD OVERLAY
   ───────────────────────────────────────── */
.team__card-overlay {
  background: linear-gradient(
    to top,
    rgba(20, 20, 20, 0.88) 0%,
    rgba(20, 20, 20, 0.0) 60%
  );
}

/* ─────────────────────────────────────────
   BLOG / SERVICE CARD HOVER
   ───────────────────────────────────────── */
.blog-card:hover,
.service-card:hover {
  background: var(--grey-100);
}

/* <picture> is inline by default — make it a transparent pass-through so the
   <img> inside inherits its container's width/height correctly. */
picture { display: contents; }

/* ─────────────────────────────────────────
   BLOG CARD TITLE — fix blurry rendering
   Inline CSS sets letter-spacing: -0.01em which causes Archivo Black
   to bleed at card scale. Zero tracking + crisp rendering fixes it.
   ───────────────────────────────────────── */
.blog-card__title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  font-size: 1.1rem !important;
  line-height: 1.3 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────────
   SELECTION COLOUR
   ───────────────────────────────────────── */
::selection {
  background: var(--terracotta);
  color: var(--white);
}

/* ─────────────────────────────────────────
   FULL-WIDTH HORIZONTAL SECTION DIVIDERS
   border-top on block-level sections = 100vw.
   ───────────────────────────────────────── */

/* Remove pre-existing section border-bottoms — they double up with our border-top system */
.about,
.portfolio,
.services,
.process,
.team {
  border-bottom: none;
}

/* All sections except the hero (which sits at the very top) */
section:not(.hero) {
  border-top: 1px solid rgba(20, 20, 20, 0.09);
}
/* Grey-bg sections: slightly softer line */
.services,
.team,
.testimonials {
  border-top-color: rgba(20, 20, 20, 0.06);
}
/* Dark-bg sections: white horizontal divider (section.cta-banner matches specificity of section:not(.hero)) */
section.cta-banner {
  border-top-color: rgba(255, 255, 255, 0.12);
}
/* Footer top border — white on dark */
.footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* On inner pages (no hero), the first section sits directly under the nav whose
   border-bottom already acts as the divider — remove the redundant border-top */
section:first-of-type {
  border-top: none;
}

/* Footer inner divider (.footer__top border-bottom is inside .wrap,
   so only container-wide). Replace it with a full-bleed ::after. */
.footer__top {
  border-bottom: none !important;
  position: relative;
}
.footer__top::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(-50%);
  pointer-events: none;
}

/* ─────────────────────────────────────────
   ARCHITECTURAL DRAFTING GRID LINES
   Each section/footer carries a ::before that
   spans its full height. Lines from adjacent
   sections abut flush — appearing continuous
   from top to bottom of the page.
   ───────────────────────────────────────── */

/* All sections: establish stacking context */
section { position: relative; }

/* Default guides: subtle dark (light-bg sections) */
section::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left:  max(0px, calc((100% - var(--max-w)) / 2));
  right: max(0px, calc((100% - var(--max-w)) / 2));
  border-left:  1px solid rgba(20, 20, 20, 0.09);
  border-right: 1px solid rgba(20, 20, 20, 0.09);
  pointer-events: none;
  z-index: 0;
}

/* Grey-bg sections: slightly softer */
.services::before,
.team::before {
  border-left-color:  rgba(20, 20, 20, 0.06);
  border-right-color: rgba(20, 20, 20, 0.06);
}

/* Hero: images bleed outside guides; white lines, above slides */
.hero::before {
  border-left:  1px solid rgba(255, 255, 255, 0.25);
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  z-index: 1;
}

/* CTA banner (dark bg): white vertical guides */
.cta-banner::before {
  border-left-color:  rgba(255, 255, 255, 0.12);
  border-right-color: rgba(255, 255, 255, 0.12);
}

/* Footer (dark bg): white guides */
.footer { position: relative; }
.footer::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left:  max(0px, calc((100% - var(--max-w)) / 2));
  right: max(0px, calc((100% - var(--max-w)) / 2));
  border-left:  1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
  z-index: 0;
}

/* Hero content & dots: sit inside the column guides with --grid-inner breathing room */
.hero__content {
  padding-left:  max(var(--px), calc((100vw - var(--max-w)) / 2 + var(--grid-inner)));
  padding-right: max(var(--px), calc((100vw - var(--max-w)) / 2 + var(--grid-inner)));
}
.hero__dots {
  left: max(var(--px), calc((100vw - var(--max-w)) / 2 + var(--grid-inner)));
}

/* ─────────────────────────────────────────
   NAV — VERTICAL GRID LINES
   ::before paints first (below logo/links),
   so nav content renders on top naturally.
   White on the transparent hero nav, dark on
   the scrolled white nav.
   ───────────────────────────────────────── */
.nav::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left:  max(0px, calc((100vw - var(--max-w)) / 2));
  right: max(0px, calc((100vw - var(--max-w)) / 2));
  border-left:  1px solid rgba(255, 255, 255, 0.25);
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
}
.nav.scrolled::before {
  border-left-color:  rgba(20, 20, 20, 0.09);
  border-right-color: rgba(20, 20, 20, 0.09);
}

/* ─────────────────────────────────────────
   NAV — GRID-ALIGNED + CENTERED LINKS
   Desktop: logo flush to left grid edge,
   primary links centred in viewport,
   Contact button flush to right grid edge.
   Mobile: retains existing flex + burger.
   ───────────────────────────────────────── */

@media (min-width: 769px) {
  .nav {
    display: flex !important;
    justify-content: space-between !important;
    /* Grid line position + --grid-inner breathing room, matching logo-to-screen-top gap */
    padding-left:  calc(max(var(--px), calc((100vw - var(--max-w)) / 2)) + var(--grid-inner)) !important;
    padding-right: calc(max(var(--px), calc((100vw - var(--max-w)) / 2)) + var(--grid-inner)) !important;
  }
  /* Float nav links to the absolute centre of the viewport */
  .nav__links {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 2.2rem !important;
    /* Prevent long link lists from overlapping logo / CTA */
    max-width: 60%;
    white-space: nowrap;
  }
}