/* ==========================================================================
   FEGGO — website template
   Plain CSS, no build step. Tokens and component classes are written so they
   can move as-is into resources/css/app.css and Blade components later.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Palette: taken from the FEGGO deck, tuned for screens and contrast */
  --night: #091521;          /* Aegean night: dark sections, hero */
  --night-raised: #10202f;   /* panels on night */
  --night-line: #26384a;     /* hairlines on night */
  --limestone: #ece7dd;      /* light sections */
  --limestone-deep: #e1dacd; /* panels on limestone */
  --limestone-line: #cbc2b2; /* hairlines on limestone */
  --graphite: #17202a;       /* text on limestone */
  --graphite-soft: #4a525b;  /* secondary text on limestone */
  --mist: #a9b3bc;           /* secondary text on night */
  --white: #fbf9f5;
  --brass: #c89b5a;          /* accent on night (7.2:1) */
  --brass-deep: #9a6f36;     /* large accent text on limestone (3.6:1) */
  --bronze: #7a5528;         /* small accent text on limestone (5.4:1) */
  --glow: #f6ddae;           /* 2700K light: hover and light effects only */

  --font: "Carlito", "Helvetica Neue", Arial, sans-serif;

  /* Type scale (px): 14, 16, 18, 21, 24, 36, 48, 60, 72, 96 */
  --fs-small: 0.875rem;
  --fs-ui: 1rem;
  --fs-body: 1.125rem;
  --fs-lead: 1.3125rem;
  --fs-h4: 1.5rem;
  --fs-h3: clamp(1.5rem, 1.25rem + 0.9vw, 2.25rem);
  --fs-h2: clamp(2.25rem, 1.7rem + 2vw, 3.75rem);
  --fs-h1: clamp(2.75rem, 1.4rem + 5vw, 6rem);
  --fs-statement: clamp(1.75rem, 1.2rem + 2vw, 3rem);

  --gutter: clamp(16px, 4.5vw, 64px);
  --container: 1320px;
  --section-y: clamp(80px, 10vw, 152px);
  --header-h: 76px;

  --ease-light: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--graphite);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

[hidden] {
  display: none !important;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
p,
ol,
ul,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3 {
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h3 {
  font-weight: 600;
  line-height: 1.2;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--focus, var(--brass));
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--brass);
  color: var(--night);
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

/* In-page anchors land just below the fixed header */
.section[id] {
  scroll-margin-top: calc(var(--header-h) - var(--section-y) + 32px);
}

/* Section themes set the colours their components read */
.theme-night {
  --fg: var(--white);
  --fg-muted: var(--mist);
  --accent: var(--brass);
  --accent-text: var(--brass);
  --line: var(--night-line);
  --panel: var(--night-raised);
  --focus: var(--brass);
  --btn-bg: var(--brass);
  --btn-fg: var(--night);
  --btn-hover-bg: var(--glow);
  --bg: var(--night);
  background: var(--night);
  color: var(--fg);
}

.theme-stone {
  --fg: var(--graphite);
  --fg-muted: var(--graphite-soft);
  --accent: var(--brass-deep);
  --accent-text: var(--bronze);
  --line: var(--limestone-line);
  --panel: var(--limestone-deep);
  --focus: var(--bronze);
  --btn-bg: var(--night);
  --btn-fg: var(--white);
  --btn-hover-bg: var(--night-raised);
  --bg: var(--limestone);
  background: var(--limestone);
  color: var(--fg);
}

/* Heading block with the brass rule from the deck. On night sections the
   rule carries a faint glow, like a linear profile switched on. */
.section-head {
  position: relative;
  display: grid;
  gap: 20px 48px;
  padding-bottom: clamp(24px, 3vw, 36px);
  margin-bottom: clamp(40px, 6vw, 80px);
}

.section-head::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--accent);
}

.theme-night .section-head::after {
  box-shadow: 0 0 14px 1px rgba(246, 221, 174, 0.28);
}

.section-head__title {
  font-size: var(--fs-h2);
  max-width: 14em;
}

.section-head__aside {
  color: var(--fg-muted);
  max-width: 30em;
}

@media (min-width: 960px) {
  .section-head {
    grid-template-columns: 7fr 5fr;
    align-items: end;
  }
}

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.35s var(--ease-light),
    border-color 0.35s var(--ease-light),
    box-shadow 0.35s var(--ease-light),
    color 0.35s var(--ease-light);
}

.btn--primary {
  background: var(--btn-bg, var(--brass));
  color: var(--btn-fg, var(--night));
}

.btn--primary:hover {
  background: var(--btn-hover-bg, var(--glow));
}

.theme-night .btn--primary:hover {
  box-shadow: 0 0 28px rgba(246, 221, 174, 0.4);
}

.btn--ghost {
  border-color: color-mix(in srgb, var(--fg, var(--white)) 40%, transparent);
  color: var(--fg, var(--white));
}

.btn--ghost:hover {
  border-color: var(--accent, var(--brass));
}

.text-link {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.text-link:hover {
  text-decoration-color: currentColor;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--white);
}

/* The blur lives on a pseudo-element: backdrop-filter on the header itself
   would make it the containing block of the fixed mobile menu. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(9, 21, 33, 0.94);
  box-shadow: 0 1px 0 var(--night-line);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.4s var(--ease-light);
}

.site-header.is-solid::before {
  opacity: 1;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--header-h);
}

/* Logo PNG, trimmed to the mark so it lines up with the container edge */
.wordmark {
  position: relative;
  z-index: 2;
  display: block;
  flex: none;
}

.wordmark img {
  width: auto;
  height: 34px;
}

.site-nav {
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav__link {
  position: relative;
  display: block;
  padding-block: 8px;
  color: rgba(251, 249, 245, 0.8);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.25s;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--white);
}

.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--brass);
  box-shadow: 0 0 10px rgba(246, 221, 174, 0.5);
}

.site-nav__extra {
  display: none;
}

@media (min-width: 1100px) {
  .site-nav__mobile-only {
    display: none;
  }
}

.site-header__tools {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
}

.lang-switch {
  display: flex;
  gap: 4px;
  font-size: var(--fs-small);
}

.lang-switch a {
  padding: 6px 6px;
  color: var(--mist);
  text-decoration: none;
}

.lang-switch a[aria-current="true"] {
  color: var(--white);
}

.lang-switch a:hover {
  color: var(--white);
}

.site-header .btn {
  min-height: 42px;
  padding-inline: 22px;
  font-size: 0.9375rem;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.menu-toggle__bars {
  position: relative;
  display: block;
  width: 24px;
  height: 10px;
  margin: auto;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--white);
  transition: transform 0.3s var(--ease-light), top 0.3s var(--ease-light);
}

.menu-toggle__bars::before {
  top: 0;
}

.menu-toggle__bars::after {
  top: 8.5px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
  top: 4px;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
  top: 4px;
  transform: rotate(-45deg);
}

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

  .site-header__tools {
    margin-left: auto;
  }

  /* Starts below the header so a scrolling menu never slides under it */
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 40px var(--gutter);
    background: var(--night);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease-light), visibility 0s linear 0.35s;
    overflow-y: auto;
  }

  .menu-open .site-nav {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s var(--ease-light);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__list li {
    border-bottom: 1px solid var(--night-line);
  }

  .site-nav__link {
    padding-block: 18px;
    color: var(--white);
    font-size: clamp(1.5rem, 1rem + 2.5vw, 2.25rem);
    font-weight: 600;
  }

  .site-nav__link[aria-current="page"] {
    color: var(--brass);
  }

  .site-nav__link[aria-current="page"]::after {
    display: none;
  }

  .site-nav__extra {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 40px;
    color: var(--mist);
    font-size: var(--fs-small);
  }

  .site-nav__extra .btn {
    justify-self: start;
    margin-bottom: 24px;
  }
}

@media (max-width: 639px) {
  .site-header__tools .btn {
    display: none;
  }
}

/* ---------- Hero (home) ----------
   The one orchestrated moment: the scene starts dark, the ribbon pendant lights
   up from one end to the other, the other lights of the terrace come on, then
   the full photo fades up and the headline appears. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--night);
  color: var(--white);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 0;
}

.hero__lamp,
.hero__glow {
  mix-blend-mode: lighten;
}

/* The pendant hangs at the top of the photo, behind the header: the top band
   keeps the menu readable. The text sits low, on the dark wall and floor. */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(9, 21, 33, 0.84) 0, rgba(9, 21, 33, 0.66) 64px, rgba(9, 21, 33, 0) 160px),
    linear-gradient(0deg, rgba(9, 21, 33, 0.96) 0%, rgba(9, 21, 33, 0.72) 38%, rgba(9, 21, 33, 0.05) 72%);
}

.hero__content {
  align-self: end;
  padding-top: calc(var(--header-h) + 80px);
  padding-bottom: 48px;
}

.hero__title {
  max-width: 8.5em;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.hero__lead {
  max-width: 24em;
  margin-top: 24px;
  color: rgba(251, 249, 245, 0.86);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  padding-block: 20px;
  border-top: 1px solid rgba(251, 249, 245, 0.14);
  color: var(--mist);
  font-size: var(--fs-small);
}

@media (min-width: 900px) {
  .hero__media img {
    object-position: 25% 20%;
  }

  .hero__shade {
    background:
      linear-gradient(180deg, rgba(9, 21, 33, 0.84) 0, rgba(9, 21, 33, 0.66) 64px, rgba(9, 21, 33, 0) 160px),
      radial-gradient(85% 70% at 0% 100%, rgba(9, 21, 33, 0.9) 0%, rgba(9, 21, 33, 0.55) 50%, rgba(9, 21, 33, 0) 100%),
      linear-gradient(0deg, rgba(9, 21, 33, 0.85) 0%, rgba(9, 21, 33, 0) 28%);
  }

  /* On short screens a smaller headline keeps clear of the pendant */
  .hero__title {
    font-size: min(var(--fs-h1), 11vh);
  }
}

/* Dimmer sequence (only when JS is running, so the page is never stuck dark) */
.js .hero__base {
  filter: brightness(0.09) saturate(0.4);
  transition: filter 1.9s var(--ease-light) 1.3s;
}

/* The ribbon lights up from left to right. The mask is 2.5 times the image
   width: opaque up to 40%, fading out by 60%. At 100% only its clear part
   covers the image; sliding it to 0 moves the soft edge across. */
.js .hero__lamp {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition:
    -webkit-mask-position 1.3s cubic-bezier(0.45, 0, 0.25, 1) 0.15s,
    mask-position 1.3s cubic-bezier(0.45, 0, 0.25, 1) 0.15s;
}

.js .hero__glow {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.5, 0, 0.2, 1) 1.05s;
}

.js .hero__content,
.js .hero__foot {
  opacity: 0;
  transition: opacity 1.1s var(--ease-light) 1.5s;
}

.hero.is-lit .hero__base {
  filter: none;
}

.hero.is-lit .hero__lamp {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

.hero.is-lit .hero__glow,
.hero.is-lit .hero__content,
.hero.is-lit .hero__foot {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__base,
  .js .hero__lamp,
  .js .hero__glow,
  .js .hero__content,
  .js .hero__foot {
    transition: none;
  }
}

/* ---------- Reveal on scroll ----------
   Blocks fade in and rise a little as they enter the viewport (app.js adds
   .is-revealed). Photos come up from dark, like the hero, and the gold rule
   under a section head draws from left to right, like the hero's ribbon.
   The items of a [data-reveal-stagger] list reveal one by one. "fade" items
   do not move, so a rule running through them (the process steps) builds up
   in place. --reveal-i staggers blocks that enter together.
   Screen only, and skipped when the visitor asks for reduced motion. */
@media screen and (prefers-reduced-motion: no-preference) {
  .js [data-reveal],
  .js [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.9s var(--ease-light),
      transform 0.9s var(--ease-light),
      filter 1.6s var(--ease-light);
    transition-delay: calc(var(--reveal-i, 0) * 90ms);
  }

  .js [data-reveal="fade"],
  .js [data-reveal-stagger="fade"] > * {
    transform: none;
  }

  .js [data-reveal="photo"],
  .js [data-reveal-stagger="photo"] > * {
    transform: none;
    filter: brightness(0.25);
  }

  .js .section-head[data-reveal]::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.3s cubic-bezier(0.45, 0, 0.25, 1);
    transition-delay: calc(0.2s + var(--reveal-i, 0) * 90ms);
  }

  .js [data-reveal].is-revealed,
  .js [data-reveal-stagger] > .is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .js .section-head.is-revealed::after {
    transform: none;
  }
}

/* ---------- Page head (inner pages) ---------- */
.page-head {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(56px, 9vw, 128px));
  padding-bottom: clamp(56px, 7vw, 96px);
  overflow: hidden;
}

.page-head__inner {
  display: grid;
  gap: 32px;
}

.page-head__title {
  max-width: 11em;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.page-head__lead {
  max-width: 30em;
  color: var(--fg-muted);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

/* ---------- Intro statement + facts ---------- */
.statement {
  max-width: 21em;
  font-size: var(--fs-statement);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.facts {
  display: grid;
  gap: 32px;
  margin-top: clamp(56px, 8vw, 104px);
}

.fact {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.fact dt {
  color: var(--accent);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.15;
}

.fact dd {
  max-width: 22em;
  margin-top: 12px;
  color: var(--fg-muted);
}

@media (min-width: 800px) {
  .facts {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
}

/* ---------- Ruled grid (services, applications, technology) ---------- */
.ruled-grid {
  display: grid;
  gap: 0 clamp(32px, 6vw, 96px);
}

.ruled-grid__item {
  padding-block: 32px 40px;
  border-bottom: 1px solid var(--line);
}

.ruled-grid__title {
  color: var(--accent);
  font-size: var(--fs-h3);
}

.ruled-grid__text {
  max-width: 28em;
  margin-top: 16px;
  color: var(--fg-muted);
}

.ruled-grid__meta {
  margin-top: 20px;
  color: var(--fg-muted);
  font-size: var(--fs-small);
}

@media (min-width: 760px) {
  .ruled-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ruled-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.section-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  margin-top: clamp(40px, 6vw, 72px);
}

.section-foot__note {
  max-width: 34em;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.4;
}

/* ---------- Process steps ----------
   Five real steps. The marker between 03 and 04 is "the critical moment":
   every check happens before anything goes to production. */
.steps {
  position: relative;
  display: grid;
  gap: 0;
}

.steps__item {
  position: relative;
  padding: 24px 0 28px;
  border-top: 1px solid var(--line);
}

.steps__num {
  display: block;
  color: var(--accent-text);
  font-size: var(--fs-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.steps__title {
  margin-top: 12px;
  font-size: var(--fs-h4);
  line-height: 1.2;
}

.steps__marker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
  color: var(--accent-text);
  font-size: var(--fs-small);
  font-weight: 600;
}

.steps__marker::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 4px rgba(200, 155, 90, 0.2), 0 0 18px 2px rgba(246, 221, 174, 0.7);
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(5, 1fr);
    padding-top: 56px;
  }

  .steps__item {
    padding: 24px 28px 0 0;
    border-top-color: var(--accent);
  }

  .steps__item--gate {
    padding-left: 24px;
    box-shadow: inset 1px 0 0 rgba(200, 155, 90, 0.55);
  }

  .steps__marker {
    position: absolute;
    bottom: 100%;
    left: 0;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 10px;
    height: 56px;
    padding: 0;
    transform: translateX(-5px);
    white-space: nowrap;
  }

  .steps__marker::before {
    margin-top: auto;
    transform: translateY(5px);
  }
}

.critical {
  display: grid;
  gap: 32px;
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(32px, 5vw, 64px);
  background: var(--night);
  color: var(--white);
}

.critical__title {
  max-width: 16em;
  font-size: var(--fs-h3);
}

.critical__text {
  max-width: 34em;
  margin-top: 16px;
  color: var(--mist);
}

.checklist {
  display: grid;
  gap: 0 32px;
  align-content: start;
}

.checklist li {
  display: flex;
  gap: 14px;
  padding-block: 12px;
  border-bottom: 1px solid var(--night-line);
  font-size: var(--fs-ui);
}

.checklist li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--brass);
}

@media (min-width: 900px) {
  .critical {
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
  }
}

@media (min-width: 1024px) {
  .critical {
    position: relative;
  }

  /* line dropping from the marker into the panel */
  .critical--linked::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 60%;
    width: 1px;
    height: clamp(40px, 6vw, 72px);
    background: linear-gradient(var(--brass), rgba(200, 155, 90, 0.3));
  }
}

/* ---------- Split: image + text ---------- */
.split {
  display: grid;
  gap: 48px;
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.split__body {
  align-self: center;
}

.split__title {
  font-size: var(--fs-h2);
  max-width: 12em;
}

.principles {
  display: grid;
  gap: 32px;
  margin-top: 48px;
}

.principles--flush {
  margin-top: 0;
}

.principles__title {
  color: var(--accent);
  font-size: var(--fs-h4);
}

.principles__text {
  max-width: 28em;
  margin-top: 8px;
  color: var(--fg-muted);
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: 7fr 5fr;
    gap: clamp(48px, 6vw, 112px);
  }

  .split--bleed .split__media {
    margin-left: calc(-1 * var(--gutter) - max(0px, (100vw - var(--container) - 2 * var(--gutter)) / 2));
  }

  .split__media img {
    aspect-ratio: auto;
    min-height: 560px;
  }

  .split--reverse {
    grid-template-columns: 5fr 7fr;
  }

  .split--even {
    grid-template-columns: 1fr 1fr;
  }

  .split--reverse .split__media {
    order: 2;
  }
}

/* ---------- Definition rows (system, indoor/outdoor) ---------- */
.def-rows {
  border-top: 1px solid var(--line);
}

.def-rows__row {
  display: grid;
  gap: 6px 48px;
  padding-block: 24px;
  border-bottom: 1px solid var(--line);
}

.def-rows__term {
  color: var(--accent);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.25;
}

.def-rows__desc {
  color: var(--fg-muted);
}

@media (min-width: 760px) {
  .def-rows__row {
    grid-template-columns: minmax(220px, 4fr) 8fr;
    align-items: baseline;
  }
}

/* ---------- Quote ---------- */
.quote {
  display: grid;
  align-content: center;
  gap: 32px;
  padding: clamp(40px, 6vw, 80px);
  background: var(--limestone);
  color: var(--graphite);
}

.quote__text {
  max-width: 14em;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.quote__by {
  color: var(--bronze);
  font-size: var(--fs-small);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.06em;
}

/* ---------- CTA band ---------- */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.cta__title {
  max-width: 11em;
  font-size: var(--fs-h2);
}

.cta__text {
  max-width: 28em;
  margin-top: 24px;
  color: var(--mist);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 40px;
}

/* Compact CTA on limestone, used where the section before it is night */
.cta--compact {
  padding-block: clamp(64px, 8vw, 112px);
}

.cta--compact .container {
  display: grid;
  gap: 32px;
  align-items: end;
}

.cta--compact .cta__title {
  font-size: var(--fs-h3);
  max-width: 16em;
}

.cta--compact .cta__text {
  margin-top: 12px;
  color: var(--fg-muted);
  font-size: var(--fs-body);
}

.cta--compact .cta__actions {
  margin-top: 0;
}

@media (min-width: 900px) {
  .cta--compact .container {
    grid-template-columns: 1fr auto;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  padding-block: 72px 32px;
  background: #060f18;
  color: var(--mist);
  font-size: var(--fs-ui);
}

.site-footer__grid {
  display: grid;
  gap: 40px;
}

.site-footer__brand .wordmark img {
  height: 48px;
}

.site-footer__tagline {
  margin-top: 12px;
  color: var(--white);
}

.site-footer__heading {
  margin-bottom: 14px;
  color: var(--white);
  font-size: var(--fs-ui);
  font-weight: 600;
}

.site-footer__list {
  display: grid;
  gap: 8px;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--white);
  text-decoration: underline;
}

.site-footer address {
  font-style: normal;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--night-line);
  font-size: var(--fs-small);
}

/* Social icons (footer and mobile menu) */
.social {
  display: flex;
  gap: 10px;
}

.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--night-line);
  border-radius: 50%;
  color: var(--mist);
  transition: color 0.3s var(--ease-light), border-color 0.3s var(--ease-light), box-shadow 0.3s var(--ease-light);
}

.social__link:hover {
  border-color: var(--brass);
  color: var(--glow);
  box-shadow: 0 0 16px rgba(246, 221, 174, 0.25);
}

.social__icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-nav__extra .social {
  margin-top: 12px;
}

@media (min-width: 800px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1.3fr 1fr;
    gap: 48px;
  }
}

/* ---------- Spec list (indoor / outdoor / coastal) ---------- */
.spec-list {
  border-top: 1px solid var(--line);
}

.spec-list li {
  display: flex;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}

.spec-list li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 1px;
  margin-top: 0.8em;
  background: var(--accent);
}

.spec-list--compact {
  margin-top: 20px;
  border-top: 0;
}

.spec-list--compact li {
  padding-block: 6px;
  border-bottom: 0;
  color: var(--fg-muted);
}

/* ---------- Projects ---------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.filter__btn {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.filter__btn:hover {
  border-color: var(--fg);
}

.filter__btn[aria-pressed="true"] {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}

.filter__status {
  margin: -24px 0 32px;
  color: var(--fg-muted);
  font-size: var(--fs-small);
}

.project-grid {
  display: grid;
  gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px);
}

.project-card__link {
  display: grid;
  gap: 18px;
  text-decoration: none;
}

.project-card[hidden] {
  display: none;
}

.project-card__media {
  overflow: hidden;
  background: var(--night);
}

.project-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s var(--ease-light), filter 0.8s var(--ease-light);
}

.project-card:hover .project-card__media img {
  transform: scale(1.03);
  filter: brightness(1.08);
}

.project-card__sector {
  color: var(--accent-text);
  font-weight: 600;
}

.project-card__title {
  font-size: var(--fs-h4);
  line-height: 1.25;
}

.project-card:hover .project-card__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.project-card__meta {
  margin-top: 6px;
  color: var(--fg-muted);
  font-size: var(--fs-ui);
}

.project-grid__empty {
  padding: 48px 0;
  color: var(--fg-muted);
}

@media (min-width: 700px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .project-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .project-card {
    grid-column: span 4;
  }

  .project-card--wide {
    grid-column: span 8;
  }

  /* same height as the 4-column cards beside it */
  .project-card--wide .project-card__media img {
    aspect-ratio: 2.8 / 1;
  }

  .project-grid.is-filtered .project-card--wide {
    grid-column: span 4;
  }

  .project-grid.is-filtered .project-card--wide .project-card__media img {
    aspect-ratio: 4 / 3;
  }
}

/* Single project hero image */
.project-hero {
  background: var(--night);
}

.project-hero img {
  width: 100%;
  max-height: 82vh;
  object-fit: cover;
}

/* Single project */
.project-facts {
  display: grid;
  gap: 0 48px;
  border-top: 1px solid var(--line);
}

.project-facts div {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-ui);
}

.project-facts dt {
  color: var(--fg-muted);
}

@media (min-width: 900px) {
  .project-facts {
    grid-template-columns: repeat(2, 1fr);
  }
}

.story {
  display: grid;
  gap: 48px;
}

.story__block h3 {
  color: var(--accent);
  font-size: var(--fs-h4);
}

.story__block p {
  max-width: 34em;
  margin-top: 12px;
  color: var(--fg-muted);
}

@media (min-width: 900px) {
  .story {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gallery {
  display: grid;
  gap: 16px;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery figcaption {
  margin-top: 10px;
  color: var(--fg-muted);
  font-size: var(--fs-small);
}

@media (min-width: 900px) {
  .gallery {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
  }

  .gallery figure:first-child {
    grid-row: span 2;
  }
}

/* All photos of a real project: masonry columns, so portrait and landscape
   shots keep their full frame */
.photo-grid {
  columns: 1;
  column-gap: 16px;
}

.photo-grid figure {
  margin-bottom: 16px;
  break-inside: avoid;
}

.photo-grid img {
  width: 100%;
}

@media (min-width: 700px) {
  .photo-grid {
    columns: 2;
  }
}

@media (min-width: 1100px) {
  .photo-grid {
    columns: 3;
  }
}

.next-project {
  display: grid;
  gap: 8px;
  padding-block: 40px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.next-project__label {
  color: var(--fg-muted);
  font-size: var(--fs-ui);
}

.next-project__title {
  font-size: var(--fs-h3);
}

.next-project:hover .next-project__title {
  color: var(--accent);
}

/* ---------- Client logos ----------
   Transparent PNGs in any colour. The filter draws every logo in one light
   colour, so marks from different brands read as one set. */
.clients {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.clients__item {
  flex: 0 0 calc(100% / 3);
  padding-inline: clamp(4px, 1vw, 12px);
}

.clients__logo {
  width: 100%;
  max-width: 180px;
  margin-inline: auto;
  filter: brightness(0) invert(1);
  opacity: 0.72;
}

@media (min-width: 700px) {
  .clients__item {
    flex-basis: 20%;
  }
}

@media (min-width: 1100px) {
  .clients__item {
    flex-basis: calc(100% / 7);
  }
}

/* ---------- Contact ---------- */
.contact-layout {
  display: grid;
  gap: 64px;
}

@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: 7fr 4fr;
    gap: clamp(64px, 8vw, 128px);
  }
}

.form {
  display: grid;
  gap: 28px;
}

.form__row {
  display: grid;
  gap: 28px;
}

@media (min-width: 640px) {
  .form__row--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.field {
  display: grid;
  gap: 8px;
}

.field__label,
.field legend {
  font-size: var(--fs-ui);
  font-weight: 600;
}

.field__optional {
  color: var(--fg-muted);
  font-weight: 400;
}

.field__hint {
  color: var(--fg-muted);
  font-size: var(--fs-small);
}

.field__control {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--limestone-line);
  border-radius: 4px;
  background: var(--white);
  color: var(--graphite);
  font-size: var(--fs-ui);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field__control:hover {
  border-color: var(--graphite-soft);
}

.field__control:focus {
  border-color: var(--night);
  outline: none;
  box-shadow: 0 0 0 3px rgba(122, 85, 40, 0.28);
}

textarea.field__control {
  min-height: 160px;
  resize: vertical;
  line-height: 1.6;
}

select.field__control {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2317202a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

.field.has-error .field__control {
  border-color: #a3341f;
}

.field__error {
  color: #a3341f;
  font-size: var(--fs-small);
  font-weight: 600;
}

.field__error:empty {
  display: none;
}

fieldset.field {
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset.field legend {
  margin-bottom: 8px;
  padding: 0;
}

.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice {
  position: relative;
}

.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--limestone-line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.9375rem;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.choice input:hover + span {
  border-color: var(--graphite-soft);
}

.choice input:checked + span {
  border-color: var(--night);
  background: var(--night);
  color: var(--white);
}

.choice input:focus-visible + span {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--fs-ui);
}

.consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--night);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.form__status {
  padding: 24px 28px;
  border-left: 2px solid var(--brass);
  background: var(--night);
  color: var(--white);
}

.form__status[hidden] {
  display: none;
}

.form__status p + p {
  margin-top: 6px;
  color: var(--mist);
}

.contact-aside {
  display: grid;
  gap: 40px;
  align-content: start;
}

.contact-aside__block h3 {
  margin-bottom: 12px;
  font-size: var(--fs-h4);
}

.contact-aside__block address,
.contact-aside__block p {
  color: var(--fg-muted);
  font-style: normal;
}

.contact-aside__list {
  display: grid;
  gap: 4px;
  color: var(--fg-muted);
}

.map-card {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 280px;
  padding: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 62% 38%, rgba(246, 221, 174, 0.55) 0, rgba(246, 221, 174, 0) 9%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(200, 155, 90, 0.12) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(200, 155, 90, 0.12) 47px 48px),
    var(--night);
  color: var(--white);
}

.map-card::before {
  content: "";
  position: absolute;
  top: 38%;
  left: 62%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 6px rgba(200, 155, 90, 0.25);
  transform: translate(-50%, -50%);
}

.map-card p {
  color: var(--mist);
  font-size: var(--fs-ui);
}

.map-card a {
  margin-top: 8px;
  color: var(--brass);
  font-weight: 600;
}

/* ---------- Utilities (keep last) ---------- */
.stack-xl {
  margin-top: clamp(56px, 8vw, 104px);
}

.section--flush-top {
  padding-top: 0;
}

/* No top padding to subtract, so anchors only clear the header */
.section--flush-top[id] {
  scroll-margin-top: calc(var(--header-h) + 32px);
}