/*
 * Version 35 — SarDev Growth Lab theme alignment
 * Source theme: the local growth.sardev.io backup supplied for this release.
 * The current Keith Trowbridge font system is intentionally preserved while
 * the SarDev palette, video treatment, glass surfaces, chrome, and controls
 * are applied after the existing page-specific styles.
 */

@font-face {
  font-family: "Bebas Neue";
  src: url("/assets/fonts/bebas-neue/BebasNeue-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "League Gothic";
  src: url("/assets/fonts/league-gothic/LeagueGothic-Variable.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  font-stretch: 75% 100%;
}

:root {
  --gold: #d8b45b;
  --gold-soft: #f1d58a;
  --gold-pale: #f8e8b9;
  --copper: var(--gold);
  --copper-deep: var(--gold);
  --copper-soft: var(--gold-soft);
  --copper-pale: var(--gold-pale);
  --ice: #f5f7fb;
  --ice-muted: #b8c0d4;
  --heading: #f5f7fb;
  --heading-strong: #ffffff;
  --ocean: #02040a;
  --ocean-deep: #02040a;
  --ink: #02040a;
  --text: #f5f7fb;
  --muted: #b8c0d4;
  --panel: rgba(7, 12, 24, .68);
  --panel-strong: rgba(2, 4, 10, .72);
  --chrome: rgba(2, 4, 10, .58);
  --line: rgba(255, 255, 255, .14);
  --line-strong: rgba(216, 180, 91, .50);
  --shadow: 0 24px 80px rgba(0, 0, 0, .30);
  --intent-cyan: var(--gold);
  --intent-cyan-soft: var(--gold-soft);
  --intent-gold: var(--gold);
  --intent-panel: rgba(7, 12, 24, .78);
  --intent-panel-soft: rgba(7, 12, 24, .68);
  --intent-line: rgba(255, 255, 255, .14);
  --photo-violet: var(--gold);
  --photo-violet-soft: var(--gold-soft);
  --photo-gold: var(--gold);
  --photo-ink: rgba(2, 4, 10, .82);
  --photo-panel: rgba(7, 12, 24, .68);
  --photo-line: rgba(255, 255, 255, .14);
  --font-display: "League Gothic", "Bebas Neue", "Arial Narrow", "Roboto Condensed", sans-serif;
}

html,
body {
  background-color: var(--ocean-deep);
}

body {
  color: var(--text);
}

.site-bg-video {
  background: #02040a;
  filter: saturate(1.08) contrast(1.08) brightness(.64);
}

.site-overlay {
  background:
    radial-gradient(circle at 20% 10%, rgba(216, 180, 91, .18), transparent 34%),
    linear-gradient(120deg, rgba(1, 4, 12, .78), rgba(4, 8, 18, .46), rgba(1, 4, 12, .82));
}

a:focus-visible,
button:focus-visible {
  outline-color: var(--copper-soft);
}

/* Shared chrome */

.site-header {
  top: 0;
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--chrome);
  box-shadow: none;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.site-nav-shell {
  width: min(1180px, 92vw);
  min-height: 92px;
  gap: 22px;
  padding: 10px 0;
}

.brand {
  gap: 11px;
}

.brand-logo {
  width: 58px;
  height: 58px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .34));
}

.brand-copy strong {
  color: #fff;
  font: 400 25px/.88 var(--font-display);
  letter-spacing: .045em;
  text-transform: uppercase;
}

.brand-copy small {
  color: var(--text);
  font-size: 8px;
  letter-spacing: .21em;
}

.site-nav {
  gap: 5px;
}

.site-nav a {
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  border-color: rgba(216, 180, 91, .40);
  background: rgba(216, 180, 91, .08);
  color: #fff;
}

.sardev-link {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding: 5px 12px 5px 6px;
  border-color: var(--line);
  background: rgba(255, 255, 255, .06);
  color: #dce4f8;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.sardev-logo-wrap {
  width: 34px;
  height: 34px;
  margin: 0;
}

.sardev-link:hover,
.sardev-link:focus-visible {
  border-color: rgba(216, 180, 91, .40);
  background: rgba(216, 180, 91, .08);
}

/* Shared typography and controls */

body[class] main h1,
body[class] main h2,
body[class] main h3,
.dashboard-showcase-header :where(h1, h2),
.case-study :where(h2, h3),
.site-footer > p {
  color: var(--heading);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: .025em;
  text-transform: uppercase;
}

body[class] main :where(h1, h2, h3) :where(em, .accent-line),
.dashboard-showcase-header :where(h1, h2) em,
.case-study :where(h2, h3) em {
  color: var(--copper-soft);
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
}

.eyebrow,
.section-heading > p,
.profile-index,
.section-kicker,
.fit-section > p,
.portfolio-eyebrow,
.portfolio-section-label,
.portfolio-brief > p,
.intent-kicker,
.photo-case-kicker,
.spatial-kicker,
.about-company {
  color: var(--copper-soft);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: .2em;
}

.section-heading h2,
.profile-hero h1,
.design-evaluation-page .profile-hero h2,
.portfolio-hero h1,
.portfolio-hero h2,
.portfolio-positioning h2,
.portfolio-work-heading h1,
.portfolio-work-heading h2,
.portfolio-contact h2,
.about-heading h1,
.intent-hero h1,
.photo-case-hero h1,
.spatial-intro h1,
.fit-section h2,
.value-list h2 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.portfolio-hero h1 em,
.portfolio-hero h2 em,
.home-page .portfolio-hero h2 em,
.profile-hero .accent-line {
  color: var(--copper-deep);
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
}

.button,
.portfolio-button,
.about-button,
.intent-button,
.photo-case-button,
.spatial-button {
  border-color: rgba(216, 180, 91, .50);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(216, 180, 91, .24), rgba(255, 255, 255, .06));
  color: #fff;
  font-family: var(--font-sans);
  letter-spacing: .12em;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.button-primary,
.portfolio-button-primary,
.about-button-primary,
.intent-button-primary,
.photo-case-button-primary {
  border-color: rgba(216, 180, 91, .55);
  background: linear-gradient(135deg, rgba(216, 180, 91, .32), rgba(255, 255, 255, .08));
  color: #fff;
}

.button-primary:hover,
.button-primary:focus-visible,
.portfolio-button-primary:hover,
.portfolio-button-primary:focus-visible,
.about-button-primary:hover,
.about-button-primary:focus-visible,
.intent-button-primary:hover,
.intent-button-primary:focus-visible,
.photo-case-button-primary:hover,
.photo-case-button-primary:focus-visible {
  background: linear-gradient(135deg, rgba(216, 180, 91, .42), rgba(255, 255, 255, .12));
  color: #fff;
}

.button-secondary:hover,
.button-secondary:focus-visible,
.portfolio-button-secondary:hover,
.portfolio-button-secondary:focus-visible,
.about-button:hover,
.about-button:focus-visible {
  border-color: rgba(216, 180, 91, .50);
  background: rgba(216, 180, 91, .08);
  color: #fff;
}

.intent-controls button,
.photo-lab-summary-error button,
.spatial-toolbar button,
.spatial-history-button,
.library-download,
.case-study-report,
.site-footer a {
  color: var(--gold-soft);
}

/* Sharper glass surfaces carry the selected theme through the public site. */

.profile-hero,
.value-section,
.fit-section,
.profile-card,
.portfolio-hero,
.portfolio-positioning,
.portfolio-feature,
.portfolio-card,
.portfolio-contact,
.portfolio-brief,
.about-story,
.about-profile {
  border-color: var(--line);
  border-radius: 24px;
}

.value-section,
.fit-section,
.profile-card,
.portfolio-positioning,
.portfolio-card,
.portfolio-contact,
.portfolio-brief,
.about-story,
.about-profile {
  background: var(--panel);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.profile-card:hover,
.profile-card:focus-visible,
.portfolio-card:hover,
.portfolio-card:focus-within {
  border-color: var(--line-strong);
  background: rgba(7, 12, 24, .78);
}

/* Homepage — selected Copper Column composition */

.home-page .home-hero {
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(620px, 1.18fr);
  align-items: stretch;
  gap: clamp(34px, 4.2vw, 76px);
  width: 100%;
  min-height: min(820px, calc(100vh - 88px));
  margin: 0;
  padding: 22px max(5vw, 56px) 60px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-page .home-hero-copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: flex;
  min-height: 700px;
  flex-direction: column;
  justify-content: center;
  padding: 38px 26px 38px clamp(36px, 4vw, 62px);
  border-left: 4px solid var(--copper);
}

.home-page .home-hero-copy .eyebrow {
  margin-bottom: 31px;
  color: var(--copper-soft);
  font-size: 14px;
  letter-spacing: .24em;
}

.home-page .home-hero-copy .eyebrow span {
  display: none;
}

.home-page .hero-copy {
  max-width: 470px;
  color: #d9deeb;
  font: 20px/1.58 var(--font-sans);
  text-shadow: 0 12px 36px rgba(0, 0, 0, .52);
}

.home-page .hero-actions {
  display: grid;
  width: min(100%, 410px);
  gap: 14px;
  margin-top: 34px;
}

.home-page .hero-actions .button {
  width: 100%;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  padding: 8px 25px;
  font-size: 12px;
  letter-spacing: .14em;
}

.home-page .hero-identity {
  position: relative;
  display: block;
  min-height: 0;
  margin-top: 40px;
  padding: 37px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.home-page .hero-identity::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 62px;
  height: 1px;
  content: "";
  background: var(--copper);
}

.home-page .hero-identity-label {
  color: var(--copper-soft);
  font-size: 12px;
  letter-spacing: .22em;
}

.home-page .hero-identity-label::before {
  display: none;
}

.home-page .hero-identity p {
  max-width: 430px;
  margin: 20px 0 23px;
  color: var(--ice);
  font: 400 clamp(25px, 2.15vw, 34px)/1.1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-page .hero-identity-location {
  position: relative;
  display: block;
  padding-top: 30px;
  color: var(--ice-muted);
  font-size: 10px;
  letter-spacing: .18em;
}

.home-page .hero-identity-location::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 1px;
  content: "";
  background: var(--ice-muted);
}

.home-page #home-title {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  max-width: none;
  min-width: 0;
  min-height: 720px;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 18px 44px 18px 30px;
  color: var(--ice);
  font-family: var(--font-display);
  font-size: clamp(148px, 15.8vw, 238px);
  font-stretch: 82%;
  font-style: normal;
  font-weight: 400;
  line-height: .75;
  letter-spacing: .006em;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .23), 0 22px 55px rgba(0, 0, 0, .34);
}

.home-page #home-title::before,
.home-page #home-title::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.home-page #home-title::before {
  top: 25px;
  right: 0;
  width: 47%;
  height: 44%;
  border-top: 3px solid var(--copper);
  border-right: 3px solid var(--copper);
}

.home-page #home-title::after {
  bottom: 24px;
  left: 19%;
  width: 18%;
  height: 24%;
  border-bottom: 3px solid var(--copper);
  border-left: 3px solid var(--copper);
}

.home-title-word {
  position: relative;
  z-index: 1;
  display: block;
  width: max-content;
  white-space: nowrap;
}

.home-title-word-one {
  margin-left: 18%;
  color: var(--ice);
}

.home-title-word-career {
  margin-left: 10%;
  color: var(--copper-deep);
}

.home-title-word-multiple {
  margin-left: 22%;
  color: var(--ice);
}

.home-title-word-angles {
  align-self: flex-end;
  margin-right: 1%;
  color: var(--copper-deep);
}

.home-page .home-portfolio-panel.portfolio-hero {
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, .55fr);
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 42px max(6vw, 70px) 54px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  box-shadow: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.home-page .home-portfolio-panel.portfolio-hero::after {
  display: none;
}

.home-page .home-portfolio-panel .portfolio-eyebrow {
  font-size: 12px;
  letter-spacing: .22em;
}

.home-page .home-portfolio-panel.portfolio-hero h2 {
  max-width: 1180px;
  margin: 16px 0 24px;
  color: var(--ice);
  font: 400 clamp(54px, 6vw, 92px)/.92 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
}

.home-page .home-portfolio-panel.portfolio-hero h2 em {
  display: inline;
  color: var(--copper-deep);
}

.home-page .portfolio-intro {
  color: var(--ice-muted);
  font-family: var(--font-sans);
}

.home-page .portfolio-brief {
  border-radius: 4px;
}

/* Interior page theme continuity */

.profile-hero,
.portfolio-hero {
  background: var(--panel);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.profile-hero h1,
.design-evaluation-page .profile-hero h2 {
  color: var(--heading);
  font-size: clamp(64px, 7.5vw, 112px);
  line-height: .86;
}

.profile-thesis,
.portfolio-intro,
.about-intro,
.about-story p {
  color: var(--text);
  font-family: var(--font-sans);
}

.portfolio-hero h1,
.portfolio-hero h2,
.about-heading h1,
.intent-hero h1,
.photo-case-hero h1 {
  color: var(--heading);
  line-height: .9;
}

.portfolio-hero::after {
  color: rgba(220, 233, 233, .04);
  font-family: var(--font-display);
  letter-spacing: .01em;
}

.about-story p:first-child::first-letter {
  color: var(--copper-soft);
  font-family: var(--font-display);
  font-weight: 400;
}

.about-profile-copy .about-profile-name {
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.site-footer {
  width: min(1180px, 92vw);
  margin: 30px auto 0;
  padding: 28px 24px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: var(--chrome);
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .08em;
  box-shadow: none;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--copper-soft);
}

@media (max-width: 1200px) {
  .home-page .home-hero {
    grid-template-columns: minmax(320px, .76fr) minmax(540px, 1.24fr);
    padding-right: 4vw;
    padding-left: 4vw;
  }

  .home-page .home-hero-copy {
    min-height: 650px;
    padding-left: 34px;
  }

  .home-page #home-title {
    min-height: 670px;
    padding-right: 30px;
    font-size: clamp(136px, 16vw, 198px);
  }
}

@media (max-width: 1100px) {
  .site-nav-shell {
    min-height: 96px;
  }

  .home-page .home-hero {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 34px;
  }

  .home-page #home-title {
    grid-column: 1;
    grid-row: 1;
    width: min(100%, 760px);
    min-height: 610px;
    justify-self: center;
    padding: 28px 54px;
    font-size: clamp(132px, 20vw, 190px);
  }

  .home-page .home-hero-copy {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 760px);
    min-height: 0;
    justify-self: center;
    padding-top: 30px;
    padding-bottom: 40px;
  }

  .home-page .hero-copy {
    max-width: 650px;
  }

  .home-page .home-portfolio-panel.portfolio-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .site-header {
    top: 0;
    width: 100%;
    margin-top: 0;
    border-radius: 0;
  }

  .site-nav-shell {
    width: 92vw;
    min-height: 90px;
  }

  .brand-logo {
    width: 48px;
    height: 48px;
  }

  .brand-copy strong {
    font-size: 16px;
  }

  .site-nav a {
    padding: 8px 10px;
    font-size: 10px;
  }

  .sardev-link {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    font-size: 10px;
  }

  .sardev-logo-wrap {
    width: 30px;
    height: 30px;
  }

  .home-page .home-hero {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 24px 5vw 46px;
    border-radius: 0;
  }

  .home-page #home-title {
    width: 100%;
    min-height: 430px;
    padding: 25px 34px;
    font-size: clamp(94px, 25vw, 142px);
  }

  .home-page #home-title::before {
    width: 45%;
    border-width: 2px;
  }

  .home-page #home-title::after {
    border-width: 2px;
  }

  .home-page .home-hero-copy {
    width: 100%;
    padding: 30px 0 34px 28px;
  }

  .home-page .home-hero-copy .eyebrow {
    font-size: 11px;
  }

  .home-page .hero-copy {
    padding-right: 16px;
    font-size: 17px;
  }

  .home-page .hero-actions {
    width: calc(100% - 16px);
  }

  .home-page .hero-identity {
    padding-right: 16px;
  }

  .home-page .hero-identity p {
    font-size: clamp(27px, 8vw, 38px);
  }

  .home-page .home-portfolio-panel.portfolio-hero {
    width: 100%;
    margin: 0;
    padding: 38px 6vw 48px;
    border-radius: 0;
  }

  .home-page .home-portfolio-panel.portfolio-hero h2 {
    font-size: clamp(48px, 14vw, 74px);
  }

  .profile-hero,
  .value-section,
  .fit-section,
  .profile-card,
  .portfolio-hero,
  .portfolio-positioning,
  .portfolio-feature,
  .portfolio-card,
  .portfolio-contact,
  .portfolio-brief,
  .about-story,
  .about-profile {
    border-radius: 4px;
  }

  .site-footer {
    width: 92vw;
    margin: 22px auto 0;
    padding: 22px;
    border-radius: 0;
  }
}

@media (max-width: 520px) {
  .brand {
    gap: 8px;
  }

  .brand-logo {
    width: 44px;
    height: 44px;
  }

  .brand-copy strong {
    font-size: 15px;
  }

  .home-page #home-title {
    min-height: 350px;
    padding: 22px 16px 22px 22px;
    font-size: clamp(76px, 24vw, 112px);
  }

  .home-page #home-title::before {
    top: 15px;
    right: 2px;
  }

  .home-page #home-title::after {
    bottom: 14px;
  }

  .home-page .home-hero-copy {
    padding-left: 22px;
  }

  .home-page .hero-actions .button {
    height: auto;
    min-height: 54px;
    max-height: none;
  }

  .home-page .hero-identity-location {
    line-height: 1.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-bg-video,
  .sardev-video {
    animation: none;
  }
}