/* ==========================================================================
   Lou Bavoil — Cosmetic Marketing & Product Development
   Design language: bold geometric sans-serif, near-black text on white,
   on a warm neutral base with a single espresso accent and soft
   off-white section tints.
   ========================================================================== */

:root {
  --white: #FFFFFF;

  /* Warm neutral base. A single accent carries every interactive and
     emphasis state — no secondary decorative colours. */
  --ink: #1A1A1C;
  --ink-soft: #67676C;

  /* Espresso. Safe as foreground everywhere: 6.1:1 on white, 5.6:1 on the
     section tint. --accent-dark is the hover/pressed shade. */
  --accent: #7A5C48;
  --accent-dark: #5E4636;
  --accent-tint: rgba(122, 92, 72, 0.10);

  /* Form error text only. Warm enough to sit with the accent. */
  --error: #A8382F;

  --line: rgba(26, 26, 28, 0.10);
  --tint: rgba(26, 26, 28, 0.05);

  /* Warm off-white for the two tinted sections */
  --section-tint: #F7F6F4;

  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-body: "Inter", sans-serif;

  --header-height: 72px;
  --radius: 16px;
  --radius-sm: 10px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------------- */
/* Reset                                                                 */
/* -------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------- */
/* Shared elements                                                      */
/* -------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.section-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 7rem 2rem;
}

.section-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: 3.5rem;
  letter-spacing: -0.01em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.btn--primary {
  background: var(--ink);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--accent);
  color: var(--white);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-soft);
}
.btn--ghost:hover {
  border-color: var(--accent-dark);
  color: var(--accent-dark);
}

/* Scroll-reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------------- */
/* Desktop top navigation bar                                           */
/* -------------------------------------------------------------------- */

.topnav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  z-index: 100;
}

@media (min-width: 900px) {
  .topnav { display: flex; }
}

.topnav__logo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

.topnav__links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.topnav__link {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 0.3rem;
  border-bottom: 1.5px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.topnav__link:hover {
  color: var(--ink);
}

.topnav__link.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* -------------------------------------------------------------------- */
/* Mobile top bar + menu                                                */
/* -------------------------------------------------------------------- */

.mobile-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  z-index: 200;
}

@media (max-width: 899px) {
  .mobile-bar { display: flex; }
}

.mobile-bar__logo {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

.mobile-bar__toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mobile-bar__toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.mobile-bar__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(10.5px) rotate(45deg);
}
.mobile-bar__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.mobile-bar__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-10.5px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  z-index: 199;
  flex-direction: column;
  padding: 2rem 1.5rem;
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}

@media (max-width: 899px) {
  .mobile-menu { display: flex; }
}

.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-menu__link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.mobile-menu__link:hover,
.mobile-menu__link:focus-visible,
.mobile-menu__link.is-active {
  color: var(--accent);
}

/* -------------------------------------------------------------------- */
/* HERO                                                                  */
/* -------------------------------------------------------------------- */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  position: relative;
}

@media (min-width: 900px) {
  .hero {
    padding: var(--header-height) 4rem 0;
  }
}

@media (max-width: 899px) {
  .hero {
    padding: 100px 1.5rem 4rem;
    min-height: auto;
    padding-top: 140px;
    padding-bottom: 6rem;
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3rem;
  width: 100%;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 4.5rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

.hero__photo {
  width: 100%;
}

@media (max-width: 899px) {
  .hero__photo {
    max-width: 320px;
    margin: 0 auto;
  }
}

.hero__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #F1F1F1;
  transition: border-color 0.4s var(--ease);
}

/* The frame warms on hover. Decorative only. */
.hero__photo:hover img {
  border-color: var(--accent);
}

.hero__inner {
  max-width: 560px;
}

@media (min-width: 900px) {
  .hero__inner {
    max-width: none;
  }
}

.hero__headline {
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 1.75rem;
}

.hero__subheadline {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 560px;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.hero__body {
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 560px;
  margin-bottom: 2.75rem;
}

.hero__cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.scroll-cue {
  position: absolute;
  left: 4rem;
  bottom: 3rem;
}

@media (max-width: 899px) {
  .scroll-cue { display: none; }
}

.scroll-cue__line {
  position: relative;
  width: 1px;
  height: 60px;
  background: var(--ink-soft);
  overflow: hidden;
}

.scroll-cue__dot {
  position: absolute;
  left: -2.5px;
  top: -6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: fall 2.2s ease-in-out infinite;
}

@keyframes fall {
  0%   { top: -6px; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 60px; opacity: 0; }
}

/* -------------------------------------------------------------------- */
/* ABOUT                                                                 */
/* -------------------------------------------------------------------- */

.about {
  padding-top: var(--header-height);
  background: var(--section-tint);
}

@media (max-width: 899px) {
  .about { padding-top: 0; }
}

/* Matches Tools and Contact — About previously sat at 820px, which made it
   read narrower than every neighbour while also being the tallest section. */
.about .section-inner {
  max-width: 980px;
}

.about .section-title {
  margin-bottom: 1.25rem;
}

.about__intro {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: 4rem;
}

/* Asymmetric split: the career timeline leads, a narrow rail of supporting
   facts sits beside it. Echoes the hero's two-column rhythm. */
.about__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .about__layout {
    grid-template-columns: 1.9fr 1fr;
    gap: 4rem;
  }
}

/* Shared small-caps accent label used by every block in this section */
.about__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

/* Track record — the section's visual anchor. A 2x2 block rather than a
   stacked list, so the rail stays shorter than the timeline it supports. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1.25rem;
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  margin-bottom: 2.5rem;
}

.fact__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.fact__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

.edu {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.edu__degree {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
}

.edu__school {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.1rem;
}

/* ---------------------------------------------------------------------- */
/* Career journey — collapsed role rows on a vertical rail, expanding to   */
/* reveal dates + highlight. Shares the accordion idiom used by projects.  */
/* ---------------------------------------------------------------------- */

.journey {
  /* Single source of truth for the rail's x position: it must land in the
     middle of the gap between the year column and the body column. */
  --journey-year-col: 3rem;
  --journey-gap: 1.75rem;
  --journey-rail: calc(var(--journey-year-col) + (var(--journey-gap) / 2));
  position: relative;
}

.journey::before {
  content: "";
  position: absolute;
  left: var(--journey-rail);
  top: 0.7rem;
  bottom: 0.7rem;
  width: 1px;
  background: var(--line);
}

.journey__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--journey-year-col) 1fr;
  gap: var(--journey-gap);
  align-items: start;
}

.journey__item + .journey__item {
  margin-top: 0.35rem;
}

.journey__tick {
  position: absolute;
  left: var(--journey-rail);
  top: 0.85rem;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--ink-soft);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.journey__item--current .journey__tick {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(122, 92, 72, 0.18);
}

/* Hovering or opening a row lights up its dot */
.journey__item:has(.journey__toggle:hover) .journey__tick,
.journey__item:has(.journey__toggle[aria-expanded="true"]) .journey__tick {
  border-color: var(--accent);
}

.journey__year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-align: right;
  padding-top: 0.6rem;
}

.journey__item--current .journey__year {
  color: var(--accent);
}

/* Collapsed row — the scannable default state */
.journey__toggle {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  /* Negative margin keeps the text optically flush with the column edge
     while still giving the hover background room to breathe. */
  margin: 0 -0.75rem;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: background-color 0.3s var(--ease);
}

.journey__toggle:hover {
  background: var(--tint);
}

.journey__heading {
  flex: 1;
  min-width: 0;
}

.journey__role {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.journey__company {
  display: block;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

.journey__badge {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-tint);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-top: 0.15rem;
}

/* Same plus/minus idiom as the project cards, at a smaller scale */
.journey__icon {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 0.35rem;
}

.journey__icon::before,
.journey__icon::after {
  content: "";
  position: absolute;
  background: var(--ink-soft);
  transition: transform 0.35s var(--ease), background-color 0.3s var(--ease);
}

.journey__icon::before {
  left: 0;
  top: 6.25px;
  width: 14px;
  height: 1.5px;
}

.journey__icon::after {
  left: 6.25px;
  top: 0;
  width: 1.5px;
  height: 14px;
}

.journey__toggle[aria-expanded="true"] .journey__icon::after {
  transform: rotate(90deg);
}

.journey__toggle[aria-expanded="true"] .journey__icon::before,
.journey__toggle[aria-expanded="true"] .journey__icon::after {
  background: var(--accent);
}

.journey__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
}

.journey__panel-inner {
  padding: 0.35rem 0 1.1rem;
}

.journey__dates {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.journey__highlight {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 48ch;
}

@media (max-width: 599px) {
  .journey {
    --journey-year-col: 2.25rem;
    --journey-gap: 1.25rem;
  }

  .journey__year {
    font-size: 0.82rem;
  }
}

/* Expertise tag row, full width below the two-column layout */
.about__expertise {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}

.about__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

/* -------------------------------------------------------------------- */
/* TOOLS & PLATFORMS — logo grid                                        */
/* -------------------------------------------------------------------- */

.tools {
  padding-top: var(--header-height);
  background: var(--white);
}

@media (max-width: 899px) {
  .tools { padding-top: 0; }
}

.tools__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

@media (max-width: 899px) {
  .tools__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 599px) {
  .tools__grid { grid-template-columns: repeat(2, 1fr); }
}

.tool-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  padding: 1.5rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.tool-card:hover {
  border-color: var(--accent-dark);
  transform: translateY(-3px);
}

/* Logos are normalised to one optical scale regardless of source ratio.
   The width cap is generous so wide wordmarks are still limited by height
   rather than being shrunk well below the square logos. */
.tool-card img {
  max-height: 36px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Shown in place of the logo when an image file is missing */
.tool-card__fallback {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------------- */
/* PROJECTS — accordion cards                                           */
/* -------------------------------------------------------------------- */

.projects {
  padding-top: var(--header-height);
  background: var(--white);
}

@media (max-width: 899px) {
  .projects { padding-top: 0; }
}

/* Projects runs full-bleed: no shared content cap, just edge padding.
   Every other section keeps the standard .section-inner max-width. */
.projects .section-inner {
  max-width: none;
}

/* More generous edge padding once the section is genuinely wide */
@media (min-width: 1400px) {
  .projects .section-inner {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

.accordion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  /* Cards size to their own content, so expanding one doesn't stretch its
     row-neighbour to match. */
  align-items: start;
}

/* Two columns only from 980px — the width at which .section-inner stops
   growing, so cards sit at their full ~449px. Going 2-up any earlier
   squeezes the longest card titles onto a third line. */
@media (min-width: 980px) {
  .accordion {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}

.card:hover {
  border-color: var(--accent-dark);
}

.card:has(.card__header[aria-expanded="true"]) {
  border-color: var(--accent);
}

.card__header {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2rem 3.25rem 2rem 2rem;
  position: relative;
  display: block;
  font-family: inherit;
  color: inherit;
}

.card__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Darker shade because this sits on the accent tint rather than white */
  color: var(--accent-dark);
  background: var(--accent-tint);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin-bottom: 1rem;
}

.card__title {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  /* 90% keeps it clear of the toggle icon on narrow cards; the 640px cap
     stops it sprawling once cards go full-bleed wide, and matches the
     measure used by .card__context below. */
  max-width: min(90%, 640px);
}

.card__context {
  color: var(--ink-soft);
  font-size: 0.96rem;
  max-width: 640px;
}

.card__icon {
  position: absolute;
  top: 2.1rem;
  right: 2rem;
  width: 18px;
  height: 18px;
}

.card__icon::before,
.card__icon::after {
  content: "";
  position: absolute;
  background: var(--ink-soft);
  transition: transform 0.35s var(--ease), background-color 0.3s var(--ease);
}

.card__icon::before {
  left: 0;
  top: 8px;
  width: 18px;
  height: 1.5px;
}

.card__icon::after {
  left: 8px;
  top: 0;
  width: 1.5px;
  height: 18px;
}

.card__header[aria-expanded="true"] .card__icon::after {
  transform: rotate(90deg);
}

.card__header[aria-expanded="true"] .card__icon::before,
.card__header[aria-expanded="true"] .card__icon::after {
  background: var(--accent);
}

.card__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
}

.card__panel-inner {
  padding: 1.75rem 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  border-top: 1px solid var(--line);
}

.card__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

/* Body copy keeps a readable measure even when cards run full-bleed wide.
   NB: this selector also matches .card__label (a <p>) and, being more
   specific, overrides its colour/size — left as-is to avoid changing the
   labels' current appearance. */
.card__block p {
  color: var(--ink-soft);
  font-size: 0.96rem;
  max-width: 68ch;
}

.card__block ul {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.card__block ul li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--ink-soft);
  font-size: 0.96rem;
  max-width: 68ch;
}

.card__block ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-soft);
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

/* Shared pill component — project expertise tags and About expertise row */
.card__tags span,
.about__tags span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--tint);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}

/* -------------------------------------------------------------------- */
/* CONTACT                                                               */
/* -------------------------------------------------------------------- */

.contact {
  background: var(--section-tint);
  color: var(--ink);
  padding-top: var(--header-height);
}

/* Carries the same weight as the hero headline — same scale, weight,
   line-height and tracking, so the two read as one visual family. */
.contact .section-title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

@media (max-width: 899px) {
  .contact { padding-top: 0; }
}

/* Two columns on desktop: info cards beside the form */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 900px) {
  .contact__grid {
    grid-template-columns: 1fr 1.15fr;
    gap: 2.5rem;
  }
}

/* --- Info cards ------------------------------------------------------ */

.contact__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.info-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

a.info-card:hover {
  border-color: var(--accent-dark);
  transform: translateY(-2px);
}

.info-card__badge {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
}

.info-card__badge svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.info-card__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.info-card__value {
  display: block;
  font-size: 1rem;
  color: var(--ink);
  margin-top: 0.3rem;
}

.info-card__value--note {
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* --- Form ------------------------------------------------------------ */

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
}

@media (max-width: 599px) {
  .form-card { padding: 1.5rem; }
}

.form__row {
  margin-bottom: 1.1rem;
}

/* Short fields sit two-up on desktop, which is what brings the form's
   height into line with the info-card column beside it. */
.form__pair {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1rem;
}

@media (min-width: 600px) {
  .form__pair {
    grid-template-columns: 1fr 1fr;
  }
}

.form__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.45rem;
}

.form__optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  opacity: 0.75;
}

.form__field {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.form__field::placeholder { color: var(--ink-soft); }

/* Replaces the default outline with an equally visible accent focus ring */
.form__field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.form__field--select {
  appearance: none;
  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='%235D6471' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  padding-right: 2.4rem;
  cursor: pointer;
}

.form__field--textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.55;
}

/* Bots fill this; it is never shown to people */
.form__honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form__submit {
  width: 100%;
  margin-top: 0.4rem;
}

.form__submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.form__status {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  display: none;
}

.form__status.is-visible { display: block; }
.form__status--ok { color: var(--accent); }
.form__status--error { color: var(--error); }

/* -------------------------------------------------------------------- */
/* FOOTER                                                                */
/* -------------------------------------------------------------------- */

.footer {
  background: var(--white);
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.75rem 2rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  border-top: 1px solid var(--line);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

@media (max-width: 899px) {
  .footer { padding: 1.75rem 1.5rem; }
}

.footer__top {
  transition: color 0.3s var(--ease);
}

.footer__top:hover,
.footer__top:focus-visible {
  color: var(--accent-dark);
}