/* ============================================================
   AL-KINDI — styles/main.css
   reset -> tokens -> base -> layout -> components
   ============================================================ */


/* ============================================================
   RESET
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg, video {
  display: block;
  max-width: 100%;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   TOKENS
   ============================================================ */

:root {
  /* Type scale — ratio 1.25 (Major Third) */
  --type-base: 1rem;
  --type-ratio: 1.25;

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: var(--type-base);
  --t-lg:   calc(var(--type-base) * pow(var(--type-ratio), 2));
  --t-xl:   calc(var(--type-base) * pow(var(--type-ratio), 3));
  --t-2xl:  calc(var(--type-base) * pow(var(--type-ratio), 4));
  --t-3xl:  calc(var(--type-base) * pow(var(--type-ratio), 5));
  --t-4xl:  calc(var(--type-base) * pow(var(--type-ratio), 6));

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 8rem;

  /* Layout */
  --margin:      3rem;
  --content-max: 80rem;

  /* Colors */
  --color-bg:      #ffffff;
  --color-fg:      #0d0d0d;
  --color-muted:   #585858;
  --color-border:  #e5e5e5;
  --color-dark:    #0d0d0d;
  --color-dark-fg: #ffffff;
  --color-night:   #060504;
  --color-night-rgb: 6, 5, 4;
  --color-charcoal: #111111;
  --color-accent:  #b35200;

  /* Overlays (semantic; keep alpha values exact) */
  --text-on-dark:         rgba(255, 255, 255, 0.75);
  --text-on-dark-muted:   rgba(255, 255, 255, 0.62);
  --text-on-dark-strong:  rgba(255, 255, 255, 0.95);
  --decoration-on-dark:   rgba(255, 255, 255, 0.20);

  /* Three-layer text halos carry legibility on the hero pattern
     without any overlay. Crisp edge drop + medium contact halo +
     wide diffuse glow. The body text on bright archway regions is
     the worst case — this stack reads cleanly there with the
     pattern fully visible underneath. */
  --shadow-text-soft:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 2px 8px rgba(0, 0, 0, 0.78),
    0 0 28px rgba(0, 0, 0, 0.62);
  --shadow-text-strong:
    0 2px 3px rgba(0, 0, 0, 0.95),
    0 4px 14px rgba(0, 0, 0, 0.78),
    0 0 42px rgba(0, 0, 0, 0.58);

  /* Reading scrim — feathered dark backdrop applied to text sections
     so the Münevver pattern is visible at section seams but recedes
     where long-form copy sits. Bookend (.contact) uses the softer
     value so the pattern returns more visibly at the page close. */
  --scrim-night:        rgba(var(--color-night-rgb), 0.92);
  --scrim-night-soft:   rgba(var(--color-night-rgb), 0.78);
  --accent-rule:        rgba(179, 82, 0, 0.22);

  --transition-color: color 0.35s ease;

  /* Typography */
  --font-fallback: system-ui, -apple-system, sans-serif;
  --font-sans:    'UnivaNova', var(--font-fallback);
  --font-slogan:  'Bricolage Grotesque', 'UnivaNova', var(--font-fallback);
  --leading-tight:  1.05;
  --leading-snug:   1.35;
  --leading-base:   1.65;
  --tracking-tight: 0;
  --tracking-wide:  0.1em;
}


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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: var(--leading-base);
  color: var(--color-fg);
  background-color: var(--color-night);
  background-image: image-set(
    url('../assets/images/munevver-pattern-1536.avif') type('image/avif'),
    url('../assets/images/munevver-pattern-1536.webp') type('image/webp')
  );
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 769px) {
  body {
    background-image: image-set(
      url('../assets/images/munevver-pattern-2880.avif') type('image/avif'),
      url('../assets/images/munevver-pattern-2880.webp') type('image/webp')
    );
  }
}

@media (min-width: 1441px) {
  body {
    background-image: image-set(
      url('../assets/images/munevver-pattern-3840.avif') type('image/avif'),
      url('../assets/images/munevver-pattern-3840.webp') type('image/webp')
    );
  }
}

@media (min-width: 1921px) {
  body {
    background-image: image-set(
      url('../assets/images/munevver-pattern-4800.avif') type('image/avif'),
      url('../assets/images/munevver-pattern-4800.webp') type('image/webp')
    );
  }
}

@media (min-width: 2401px) {
  body {
    background-image: image-set(
      url('../assets/images/munevver-pattern-6528.avif') type('image/avif'),
      url('../assets/images/munevver-pattern-6528.webp') type('image/webp')
    );
  }
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}

p { max-width: 65ch; }

a {
  color: inherit;
  text-decoration: none;
}


/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  width: min(calc(100% - var(--margin) * 2), var(--content-max));
  margin-inline: auto;
}

.section-gap {
  padding-block: var(--space-3xl);
}


/* ============================================================
   COMPONENTS
   ============================================================ */

/* Nav — transparent overlay floats above hero */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  background: transparent;
  transition: transform 0.4s ease, background 0.4s ease;
}

.header--scrolled {
  background: transparent;
}

.header--hidden {
  transform: translateY(-110%);
}

.nav__logo {
  pointer-events: auto;
  padding-top: 0.1em;
}

.nav__logo-img {
  height: clamp(1.5rem, 2.5vw, 2.5rem);
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: filter 0.4s ease, opacity 0.4s ease;
}

.nav__logo-img:hover {
  opacity: 1;
}

.nav {
  pointer-events: auto;
}

.nav__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-on-dark);
  text-shadow: var(--shadow-text-soft);
  transition: var(--transition-color);
}

.nav__link--active {
  color: var(--text-on-dark-strong);
}

.nav__link:hover {
  color: rgba(255, 255, 255, 0.90);
}

.nav__arrow {
  display: inline-block;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.25s ease, width 0.25s ease;
}

.nav__link--active .nav__arrow {
  opacity: 1;
  width: 1em;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  pointer-events: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: var(--space-lg);
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

.lang-switch__item {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.75rem 0.5rem;
  color: var(--text-on-dark);
  text-shadow: var(--shadow-text-soft);
  letter-spacing: inherit;
  text-transform: inherit;
  transition: var(--transition-color);
}

.lang-switch__item--active {
  color: var(--text-on-dark-strong);
  cursor: default;
}


/* Hero heading — 2-phrase cycling animation */

/* Hero — full viewport after nav; heading top, tagline + body bottom */

.hero {
  height: 100svh;
  background-color: transparent;
  color: var(--color-dark-fg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}


/* Reading-zone scrim — feathered dark backdrop on text sections.
   Pattern shows at the section seams (top/bottom 5rem) and dims under
   the reading column so long-form copy stays legible. ABA rhythm:
   hero opens with full pattern, scrimmed middle for reading, contact
   uses softer scrim to let pattern return as visual bookend. */
#services,
.about,
.origin,
.team,
.contact {
  position: relative;
  isolation: isolate;
}

#services::before,
.about::before,
.origin::before,
.team::before,
.contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--scrim-night);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 5rem,
    black calc(100% - 5rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 5rem,
    black calc(100% - 5rem),
    transparent 100%
  );
  z-index: -1;
  pointer-events: none;
}

.contact::before {
  background-color: var(--scrim-night-soft);
}


/* Grain / noise overlay — shared */
.hero::after,
.team::after,
.contact::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
  opacity: 0.09;
  pointer-events: none;
  z-index: 2;
}

.hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block-start: var(--space-3xl);
  position: relative;
  z-index: 3;
}

.hero__heading {
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: 0.95;
  display: grid;
  margin-block-start: auto;
}

.hero__phrase {
  grid-area: 1 / 1;
  font-family: var(--font-slogan);
  color: rgba(255, 255, 255, 0.98);
  text-shadow: var(--shadow-text-strong);
}

.hero__foot {
  display: flex;
  gap: var(--space-xl);
  flex-wrap: wrap;
  align-items: flex-start;
  margin-block-start: var(--space-xl);
  padding-block-end: var(--space-2xl);
}

.hero__body {
  flex: 1;
  min-width: 18rem;
  font-size: var(--t-sm);
  line-height: var(--leading-base);
  color: rgba(255, 255, 255, 0.78);
  max-width: unset;
  text-shadow: var(--shadow-text-soft);
}


/* Section label — small uppercase tag above each section */

.section__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  max-width: unset;
}

.section__label::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background-color: currentColor;
  flex-shrink: 0;
}


/* Services */

#services {
  background-color: transparent;
  color: var(--color-dark-fg);
}

.services__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-block-end: var(--space-2xl);
}

.services__lead {
  font-size: var(--t-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  max-width: 38ch;
}

.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.3rem var(--space-lg);
  padding-block: var(--space-xl);
  align-items: start;
  margin-inline: calc(-1 * var(--space-lg));
  padding-inline: var(--space-lg);
}

.service-item__index {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--t-xs);
  color: var(--color-accent);
  letter-spacing: var(--tracking-wide);
  padding-top: 0.35em; /* optical alignment with title */
}

.service-item__title {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: var(--leading-snug);
}

.service-item__desc {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--t-sm);
  color: var(--text-on-dark-muted);
  line-height: var(--leading-base);
  max-width: 56ch;
  margin-top: var(--space-sm);
}


/* About */

.about {
  background-color: transparent;
  color: var(--color-dark-fg);
  border-top: none;
  border-bottom: none;
}

.about .section__label {
  margin-block-end: var(--space-2xl);
}

.about__layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-2xl);
  align-items: start;
}

.about__lead {
  font-size: var(--t-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  max-width: 26ch;
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.about__body p {
  font-size: var(--t-base);
  color: var(--text-on-dark-muted);
  line-height: var(--leading-base);
  max-width: 52ch;
}


/* Origin — short narrative on the al-Kindi name, reads as a quiet
   interlude between About and Team. Single narrow column, opening
   paragraph weighted as a lead. */

.origin {
  background-color: transparent;
  color: var(--color-dark-fg);
}

.origin .section__label {
  margin-block-end: var(--space-2xl);
}

.origin__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 60ch;
}

.origin__body {
  font-size: var(--t-base);
  color: var(--text-on-dark);
  line-height: 1.7;
  max-width: unset;
}

.origin__body:first-of-type {
  font-size: var(--t-lg);
  color: var(--text-on-dark-strong);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}


/* Team — cipher plates. Each member is a typographic dossier:
   monogram, cipher index, locale tag, hairline crosshairs.
   Pays tribute to al-Kindi's cryptographic legacy (see Origin).
   Layout mirrors on the second card for editorial asymmetry. */

.team {
  background-color: transparent;
  color: var(--color-dark-fg);
}

.team .section__label {
  margin-block-end: var(--space-2xl);
}

.team__intro {
  font-size: var(--t-2xl);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  max-width: 16ch;
  margin-block-end: var(--space-3xl);
}

.team__list {
  padding-inline: var(--margin);
  max-width: calc(var(--content-max) + var(--margin) * 2);
  margin-inline: auto;
}

.team__member {
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: clamp(var(--space-lg), 5vw, var(--space-3xl));
  padding-block: var(--space-3xl);
  position: relative;
  align-items: stretch;
}

.team__member + .team__member {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Mirror the second card: info-left, plate-right. Creates the
   alternating editorial rhythm that two photo-portrait cards alone
   couldn't carry. */
.team__member--partner {
  grid-template-columns: 1fr 44%;
}

.team__member--partner .team__plate {
  grid-column: 2;
  grid-row: 1;
}

.team__member--partner .team__info {
  grid-column: 1;
  grid-row: 1;
  align-items: flex-end;
  text-align: right;
}

.team__member--partner .team__name,
.team__member--partner .team__bio,
.team__member--partner .team__role {
  margin-inline-start: auto;
}

.team__member--partner .team__links {
  justify-content: flex-end;
}

.team__member--partner .team__role::before {
  display: none;
}

.team__member--partner .team__role::after {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background-color: currentColor;
  flex-shrink: 0;
}


/* Plate — the typographic dossier replacing the photo placeholder.
   Background blends warm night tones with a subtle pattern echo. */

.team__plate {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(179, 82, 0, 0.10) 0%, transparent 55%),
    radial-gradient(110% 90% at 85% 95%, rgba(40, 30, 22, 0.45) 0%, transparent 60%),
    linear-gradient(165deg, #14110d 0%, #0a0907 55%, #050403 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: clamp(var(--space-md), 2.4vw, var(--space-xl));
  display: grid;
  grid-template-rows: auto 1fr;
  transition: border-color 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.team__plate::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.team__member:hover .team__plate {
  border-color: rgba(255, 255, 255, 0.14);
}

/* Crosshair frame — registration marks at the four corners. Reads
   as drafting/blueprint, ties the plate to the technical half of
   the studio identity. */
.team__plate-frame {
  position: absolute;
  inset: clamp(0.6rem, 1.2vw, 1rem);
  pointer-events: none;
  z-index: 1;
}

.team__plate-corner {
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
}

.team__plate-corner::before,
.team__plate-corner::after {
  content: '';
  position: absolute;
  background-color: rgba(255, 255, 255, 0.22);
}

.team__plate-corner::before { left: 0; right: 0; height: 1px; }
.team__plate-corner::after  { top: 0; bottom: 0; width: 1px; }

.team__plate-corner--tl { top: 0; left: 0; }
.team__plate-corner--tl::before { top: 0; }
.team__plate-corner--tl::after  { left: 0; }

.team__plate-corner--tr { top: 0; right: 0; }
.team__plate-corner--tr::before { top: 0; }
.team__plate-corner--tr::after  { right: 0; }

.team__plate-corner--bl { bottom: 0; left: 0; }
.team__plate-corner--bl::before { bottom: 0; }
.team__plate-corner--bl::after  { left: 0; }

.team__plate-corner--br { bottom: 0; right: 0; }
.team__plate-corner--br::before { bottom: 0; }
.team__plate-corner--br::after  { right: 0; }

/* Locale tag — top-right, muted caps. */
.team__locale {
  grid-row: 1;
  z-index: 2;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  align-self: start;
  justify-self: end;
  text-align: right;
}

/* Monogram — the centerpiece. Single letter, light weight,
   centered with slight optical offset for visual tension. */
.team__monogram {
  grid-row: 2;
  z-index: 2;
  font-family: var(--font-slogan);
  font-size: clamp(8rem, 16vw, 16rem);
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
  align-self: center;
  justify-self: center;
  transform: translateY(-0.05em);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
              letter-spacing 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  user-select: none;
}

.team__member:hover .team__monogram {
  transform: translateY(-0.08em);
  letter-spacing: -0.03em;
}

/* Info — role, name, bio, links. Justified to bottom of plate
   so the name baseline aligns with the monogram. */

.team__info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block-end: var(--space-md);
}

.team__role {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-block-end: var(--space-md);
}

.team__role::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background-color: currentColor;
  flex-shrink: 0;
}

.team__name {
  font-size: var(--t-2xl);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 0.95;
  margin-block-end: var(--space-lg);
  color: rgba(255, 255, 255, 0.98);
}

.team__bio {
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.62);
  line-height: var(--leading-base);
  padding-block-start: var(--space-sm);
  max-width: 52ch;
}

.team__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
  margin: 0;
  padding-block-start: var(--space-lg);
}

.team__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  padding-block-end: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.team__link-mark {
  display: inline-block;
  font-size: 0.85em;
  transform: translateY(-0.05em);
  transition: transform 0.25s ease;
  color: var(--color-accent);
  opacity: 0.7;
}

.team__link:hover,
.team__link:focus-visible {
  color: rgba(255, 255, 255, 0.98);
  border-color: var(--color-accent);
  outline: none;
}

.team__link:hover .team__link-mark,
.team__link:focus-visible .team__link-mark {
  transform: translate(0.15em, -0.2em);
  opacity: 1;
}


/* Contact — dark section, mirrors the hero as visual bookend */

.contact {
  background-color: transparent;
  color: var(--color-dark-fg);
}

.contact .section__label {
  margin-block-end: var(--space-2xl);
}

.contact__heading {
  font-size: var(--t-xl);
  line-height: var(--leading-snug);
  max-width: 22ch;
  margin-block-end: var(--space-lg);
}

.contact__sub {
  font-size: var(--t-base);
  color: rgba(255, 255, 255, 0.65);
  max-width: 48ch;
  margin-block-end: var(--space-2xl);
}

.contact__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact__link {
  font-size: var(--t-xl);
  color: var(--color-dark-fg);
  text-decoration: underline;
  text-decoration-color: var(--decoration-on-dark);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.15s ease;
  max-width: unset;
}

.contact__link:hover {
  color: var(--color-accent);
  text-decoration-color: rgba(179, 82, 0, 0.4);
}

.contact__link--sub {
  font-size: var(--t-base);
  color: rgba(255, 255, 255, 0.60);
  text-decoration-color: var(--decoration-on-dark);
}

.contact__link--sub:hover {
  color: rgba(255, 255, 255, 0.85);
  text-decoration-color: rgba(255, 255, 255, 0.50);
}


/* Footer — restrained closing whisper. Hairline anchor + two
   small text lines. Brand pulled inline so the footer carries
   nothing the rest of the page already said louder. */

.site-footer {
  background-color: transparent;
  padding-block: var(--space-3xl) var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-block-start: var(--space-2xl);
}

.footer__line {
  margin: 0;
  max-width: unset;
  font-size: var(--t-xs);
  line-height: var(--leading-snug);
  letter-spacing: 0.02em;
}

.footer__line + .footer__line {
  margin-block-start: 0.4rem;
}

.footer__line--primary {
  color: rgba(255, 255, 255, 0.78);
}

.footer__line--secondary {
  color: rgba(255, 255, 255, 0.40);
}

.footer__sep {
  display: inline-block;
  margin-inline: 0.7em;
  color: var(--color-accent);
  opacity: 0.65;
}

.footer__line--secondary a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.18);
  text-underline-offset: 0.18em;
  white-space: nowrap;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

.footer__line--secondary a:hover {
  color: rgba(255, 255, 255, 0.95);
  text-decoration-color: var(--color-accent);
}


/* Scroll reveal */

.reveal-enabled .reveal {
  opacity: 0;
  transform: translateY(52px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-enabled .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-enabled .reveal-delay-1 { transition-delay: 0.1s; }
.reveal-enabled .reveal-delay-2 { transition-delay: 0.2s; }
.reveal-enabled .reveal-delay-3 { transition-delay: 0.32s; }
.reveal-enabled .reveal-delay-4 { transition-delay: 0.44s; }
.reveal-enabled .reveal-delay-5 { transition-delay: 0.56s; }
.reveal-enabled .reveal-delay-6 { transition-delay: 0.68s; }
.reveal-enabled .reveal-delay-7 { transition-delay: 0.80s; }
.reveal-enabled .reveal-delay-8 { transition-delay: 0.92s; }


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

@media (min-width: 48rem) {
  html {
    font-size: 17px;
  }

  .hero__heading {
    font-size: var(--t-4xl);
  }

  .services__lead {
    font-size: var(--t-2xl);
  }

  .team__intro {
    font-size: var(--t-4xl);
  }

  .team__name {
    font-size: var(--t-3xl);
  }

  .contact__heading {
    font-size: var(--t-3xl);
  }
}

@media (min-width: 80rem) {
  html {
    font-size: 18px;
  }

  .hero__heading {
    font-size: 7.5rem;
  }

  .team__intro {
    font-size: 5rem;
  }

  .team__name,
  .contact__heading {
    font-size: var(--t-4xl);
  }
}

@media (max-width: 48rem) {
  :root {
    --margin: 1.25rem;
    --space-3xl: 5rem;
  }

  .site-header {
    padding: var(--space-md);
  }

  .lang-switch {
    top: var(--space-md);
  }

  .hero__content {
    padding-block-start: var(--space-2xl);
  }

  .hero__foot {
    flex-direction: column;
    gap: var(--space-md);
    padding-block: var(--space-lg);
  }

  .service-item {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin-inline: 0;
    padding-inline: 0;
  }

  .service-item__index,
  .service-item__title,
  .service-item__desc {
    grid-column: 1;
    grid-row: auto;
  }

  .service-item__index {
    padding-top: 0;
  }

  .team__member,
  .team__member--partner {
    grid-template-columns: 1fr;
    padding-block: var(--space-2xl);
    gap: var(--space-lg);
  }

  .team__member--partner .team__plate {
    grid-column: 1;
    grid-row: 1;
  }

  .team__member--partner .team__info {
    grid-column: 1;
    grid-row: 2;
    align-items: flex-start;
    text-align: left;
  }

  .team__member--partner .team__name,
  .team__member--partner .team__bio,
  .team__member--partner .team__role {
    margin-inline-start: 0;
  }

  .team__member--partner .team__links {
    justify-content: flex-start;
  }

  .team__member--partner .team__role::after { display: none; }

  .team__member--partner .team__role::before {
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    background-color: currentColor;
    flex-shrink: 0;
  }

  .team__plate {
    aspect-ratio: 5 / 4;
  }

  .team__monogram {
    font-size: clamp(7rem, 28vw, 12rem);
  }

}


/* ============================================================
   PROGRESSIVE ENHANCEMENT FALLBACKS
   ============================================================ */

@media (scripting: none) {
  .lang-switch { display: none; }
}
/* Older browsers without (scripting: none) support fall back to
   styles/noscript.css, loaded inside <noscript> in index.html. */

[data-i18n]:empty { visibility: hidden; }

.noscript-message {
  padding: var(--space-md);
  background: var(--color-night);
  color: var(--color-dark-fg);
  text-align: center;
  font-size: var(--t-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .hero__phrase { transform: none !important; }
}