@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Oxygen:wght@300;400;700&display=swap");

*,
*::before,
*::after {
  font-style: normal;
}

/* ── DOCUMENT ── */
html {
  scroll-behavior: smooth;
  overflow-y: auto;
}

body {
  background-color: var(--bg);
  font-family: var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}

html,
body,
button,
input,
textarea,
select,
a,
p,
div,
span,
label {
  font-family: var(--font);
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.page-header__title,
.section-header__title,
.card__title,
.process-step__title,
.stat-item__value,
.hero__name,
.hero__role-line,
.cta-section__headline,
.contact-header__title,
.connect-cta__title,
.cs-header__watermark,
.cs-header__title {
  font-family: var(--font-heading);
}

:is(
  .page-header,
  .page-header__two-col,
  .port-page-header,
  .test-page-header,
  .test-page-header__inner,
  .test-page-header__text,
  .contact-header,
  .contact-header__inner,
  .about-header__inner,
  .about-header__text,
  .cs-header,
  .cs-header__content,
  .cs-header__left,
  .page-title,
  .page-header__title,
  .page-header__subtitle,
  .section-header__title,
  .contact-header__title,
  .contact-header__sub,
  .test-page-header__subtitle,
  .cs-header__title
) {
  max-width: 100%;
  min-width: 0;
}

:is(
  .page-title,
  .page-header__title,
  .page-header__subtitle,
  .section-header__title,
  .contact-header__title,
  .contact-header__sub,
  .test-page-header__subtitle,
  .cs-header__title
) {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

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

ul {
  display: flex;
  flex-direction: column;
  gap: var(--paddingXS);
}

li {
  font-size: var(--textBody);
  color: var(--text-muted);
  line-height: 1.5;
  padding-left: var(--paddingSM);
}

::-webkit-scrollbar {
  width: var(--paddingXS);
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--secondary);
  border-radius: var(--borderThickness);
}

/* ── PAGE FOUNDATIONS ── */
.home-page,
.about-page,
.portfolio-page,
.job-detail-page,
.contact-page,
.testimonials-page {
  line-height: 1.6;
}

.home-page main > section,
.about-page main > section,
.portfolio-page main > section,
.job-detail-page main > section,
.contact-page main > section,
.testimonials-page main > section {
  scroll-margin-top: calc(var(--nav-height) + var(--paddingLG));
}

/* ── CONTAINER ── */
.container {
  box-sizing: border-box;
  margin: 0 auto;
  padding-left: var(--paddingXL);
  padding-right: var(--paddingXL);
}

.page {
  display: flex;
  flex-direction: row;
  width: 100%;
}

/* ── LOCAL SURFACE THEMES ── */
[data-surface="light"],
.theme-light {
  --paper: var(--themeBaseBackground);
  --ink: var(--themeBaseText);
  --bg: var(--themeBaseBackground);
  --bg-2: var(--themeBaseSurface2);
  --bg-card: var(--themeBaseSurface);
  --bg-card-hover: rgba(var(--themeBaseText-rgb), 0.07);
  --surface: rgba(var(--themeBaseText-rgb), 0.06);
  --surface-strong: rgba(var(--themeBaseText-rgb), 0.08);
  --surface-subtle: rgba(var(--themeBaseText-rgb), 0.03);
  --surface-tag: rgba(var(--themeBaseText-rgb), 0.05);
  --surface-emphasis: rgba(var(--themeBaseText-rgb), 0.15);
  --neutral-surface: var(--themeBaseSurface);
  --text: var(--themeBaseText);
  --text-muted: var(--themeBaseMuted);
  --text-soft: rgba(var(--themeBaseText-rgb), 0.7);
  --text-soft-50: rgba(var(--themeBaseText-rgb), 0.5);
  --text-faint: rgba(var(--themeBaseText-rgb), 0.15);
  --text-ghost: rgba(var(--themeBaseText-rgb), 0.04);
  --text-alt: var(--brandSecondary);
  --divider: rgba(var(--themeBaseBorder-rgb), 0.55);
  --border-card: rgba(var(--themeBaseBorder-rgb), 0.65);
  --border-light: rgba(var(--themeBaseBorder-rgb), 0.9);
  --neutral-border: rgba(var(--themeBaseBorder-rgb), 0.55);
  --field-bg: var(--themeBaseSurface);
  --field-border: rgba(var(--themeBaseBorder-rgb), 0.9);
  background: var(--bg);
  color: var(--text);
  color-scheme: light;
}

[data-surface="dark"],
.theme-dark {
  --paper: var(--themeBasePrimary);
  --ink: var(--basicText);
  --bg: var(--themeBasePrimary);
  --bg-2: var(--themeBaseDark);
  --bg-card: rgba(var(--basicText-rgb), 0.08);
  --bg-card-hover: rgba(var(--basicText-rgb), 0.12);
  --surface: rgba(var(--basicText-rgb), 0.08);
  --surface-strong: rgba(var(--basicText-rgb), 0.14);
  --surface-subtle: rgba(var(--basicText-rgb), 0.04);
  --surface-tag: rgba(var(--basicText-rgb), 0.1);
  --surface-emphasis: rgba(var(--basicText-rgb), 0.22);
  --neutral-surface: var(--themeBaseLight);
  --text: var(--basicText);
  --text-muted: rgba(var(--basicText-rgb), 0.68);
  --text-soft: rgba(var(--basicText-rgb), 0.76);
  --text-soft-50: rgba(var(--basicText-rgb), 0.5);
  --text-faint: rgba(var(--basicText-rgb), 0.22);
  --text-ghost: rgba(var(--basicText-rgb), 0.1);
  --text-alt: rgba(var(--basicText-rgb), 0.78);
  --divider: rgba(var(--basicText-rgb), 0.18);
  --border-card: rgba(var(--basicText-rgb), 0.2);
  --border-light: rgba(var(--basicText-rgb), 0.28);
  --neutral-border: rgba(var(--basicText-rgb), 0.18);
  --field-bg: rgba(var(--basicText-rgb), 0.08);
  --field-border: rgba(var(--basicText-rgb), 0.22);
  background: var(--bg);
  color: var(--text);
  color-scheme: dark;
}

[data-surface="dark"] :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label),
.theme-dark :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label) {
  color: inherit;
}

[data-surface="dark"]
  :is(.text-muted, .card__meta, .stat-item__label, .form-char-count),
.theme-dark :is(.text-muted, .card__meta, .stat-item__label, .form-char-count) {
  color: var(--text-muted);
}

[data-surface="dark"]
  :is(.card__title, .process-step__title, .stat-item__value),
.theme-dark :is(.card__title, .process-step__title, .stat-item__value) {
  color: var(--text);
}

[data-surface="dark"] a:not(.btn):not(.btn-link),
.theme-dark a:not(.btn):not(.btn-link) {
  color: inherit;
}

[data-surface="light"] :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label),
.theme-light :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label) {
  color: inherit;
}

[data-surface="light"]
  :is(.text-muted, .card__meta, .stat-item__label, .form-char-count),
.theme-light
  :is(.text-muted, .card__meta, .stat-item__label, .form-char-count) {
  color: var(--text-muted);
}

[data-surface="light"]
  :is(.card__title, .process-step__title, .stat-item__value),
.theme-light :is(.card__title, .process-step__title, .stat-item__value) {
  color: var(--text);
}

[data-surface="light"] a:not(.btn):not(.btn-link),
.theme-light a:not(.btn):not(.btn-link) {
  color: inherit;
}

/* ── GLOBAL SECTION PADDING ── */
.site-section {
  padding: var(--paddingLG) var(--paddingXL);
}

.site-section > .container {
  padding-inline: 0;
}

/* ── SECTION MARKER ── */
:root {
  --mark-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.83398 5.83331L14.1673 14.1666' stroke='%23FF7400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.1673 5.83331V14.1666H5.83398' stroke='%23FF7400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.section-mark {
  color: var(--brandPrimary);
  font-family: var(--font-heading);
  font-size: var(--textCallout);
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  text-transform: capitalize;
  white-space: nowrap;
}

.section-mark::before {
  content: "";
  display: inline-block;
  width: var(--paddingMD);
  height: var(--paddingMD);
  margin-right: var(--paddingXS);
  vertical-align: -0.25em;
  background: var(--mark-arrow-icon) center / contain no-repeat;
}

/* Inline variant: sits beside a large title on the same row */
.section-hd {
  display: flex;
  align-items: center;
  color: inherit;
  gap: var(--paddingLG);
  margin-bottom: var(--paddingXL);
}

.section-hd[data-anim] {
  opacity: 0;
  transform: translateY(var(--paddingSM));
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.section-hd[data-anim].visible {
  opacity: 1;
  transform: translateY(0);
}

.home-section-mark {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
  position: relative;
  flex-direction: column;
}

.section-mark::before {
  margin-right: var(--paddingXS);
}

.section-mark--inline {
  flex-shrink: 0;
  margin-bottom: 0;
}

.section-header__title {
  color: inherit;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: var(--textH1);
  font-weight: 700;
  letter-spacing: calc(var(--borderThickness) * -1);
  line-height: normal;
  margin: 0;
  white-space: normal;
}

.btn-link {
  flex-shrink: 0;
  margin-bottom: 0.2em;
}

/* ── FORMS ── */
.form-label,
label {
  display: flex;
  flex-direction: column;
  font-size: var(--textBody);
  font-weight: 500;
  color: var(--text);
  opacity: 0.67;
  text-transform: capitalize;
  line-height: 1.2;
}

.form-grid {
  display: flex;
  flex-direction: column;
  gap: var(--paddingLG);
  margin-top: var(--inputField);
  width: 100%;
}

.form-grid--two-column {
  flex-flow: column wrap;
  align-content: stretch;
  max-height: calc((var(--inputField) * 4) + (var(--paddingLG) * 3));
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--paddingXS);
}

.form-field--textarea {
  flex-basis: calc((var(--inputField) * 3) + (var(--paddingLG) * 2));
}

.form-field--actions {
  flex-basis: auto;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--paddingMD);
}

.form-input,
.form-textarea,
.input,
.textarea {
  font-family: var(--font);
  font-size: var(--textCallout);
  font-weight: 400;
  color: var(--text);
  line-height: var(--buttonsSmall);
}

.form-input::placeholder,
.form-textarea::placeholder,
.input::placeholder,
.textarea::placeholder {
  opacity: 0.5;
}

.form-char-count {
  font-size: var(--textCallout);
  font-weight: 500;
  color: var(--text);
  opacity: 0.25;
  text-align: right;
  line-height: 1.5;
}

.form-input,
.form-textarea,
.input,
.textarea {
  background: var(--field-bg);
  border: var(--borderThickness) solid var(--field-border);
  border-radius: var(--radiusMD);
  padding: var(--paddingSM) var(--paddingMD);
  outline: none;
  resize: none;
  transition:
    border-color var(--trans),
    box-shadow var(--trans);
}

.form-input,
.input {
  height: var(--inputField);
}

.form-textarea,
.textarea {
  flex: 1;
  min-height: var(--min-textarea-h);
}

.form-input:focus,
.form-textarea:focus,
.input:focus,
.textarea:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 var(--borderThickness) rgba(var(--brandPrimary-rgb), 0.2);
}

/* ── STAT BAND ── */
.stat-band {
  background: var(--paper);
  color: var(--text);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--paddingXL);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--paddingXS);
  padding: var(--paddingXL) var(--paddingLG);
  width: 100%;
  text-align: center;
}

.stat-item:last-child {
  border-right: none;
}

.stat-item__value {
  font-size: var(--textSubtitle);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ls-heading);
}

.stat-item__label {
  font-size: var(--textCaption);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--text);
  opacity: 0.55;
}

/* ── CLIENT TICKER STRIP ── */
.client-strip {
  overflow: hidden;
  padding: var(--paddingSM) 0;
}

.client-strip__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 20s linear infinite;
}

.client-strip__item {
  white-space: nowrap;
  padding: 0 var(--paddingXL);
  font-size: var(--textBody);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--basicText);
  opacity: 0.9;
}

.client-strip__item::after {
  content: " · ";
  margin-left: var(--paddingXL);
  opacity: 0.5;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ── TYPEWRITER / CURSOR ANIMATIONS ── */
@keyframes cursor-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Numbered section marks: arrow icon sweeps in from right, then blinks */
.home-section-mark .section-mark::before {
  background: var(--mark-arrow-icon) center / contain no-repeat;
  width: var(--paddingMD);
  height: var(--paddingMD);
  margin-right: var(--paddingXS);
  vertical-align: -0.25em;
  transform: translateX(var(--mark-offset, 44px));
  opacity: 0;
  transition:
    transform 0.4s ease-out,
    opacity 0.15s ease;
}

.home-section-mark .section-mark.is-sweeping::before {
  transform: translateX(0);
  opacity: 1;
}

.home-section-mark .section-mark.is-done::before {
  transform: translateX(0);
  opacity: 1;
  animation: cursor-blink 0.65s step-end infinite;
}

/* Typewriter cursor injected alongside section/page titles */
.tw-cursor {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background: #ff7400;
  border-radius: 1px;
  vertical-align: -0.08em;
  margin-left: 3px;
  opacity: 0;
}

.tw-cursor.is-active {
  opacity: 1;
  animation: cursor-blink 0.65s step-end infinite;
}

/* ── RESPONSIVE ── */
@media (max-width: 1199px) {
  .stat-band {
    flex-wrap: no-wrap;
    flex-direction: row;
    gap: 0;
  }

  .stat-band .stat-item {
    flex: 1 1 calc(50% - var(--paddingXL));
  }

  .section-hd {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--paddingSM);
    margin: 0;
  }
}

@media (max-width: 767px) {
  .stat-band {
    flex-wrap: no-wrap;
    flex-direction: column;
  }

  .form-grid--two-column {
    flex-flow: column nowrap;
    max-height: none;
  }

  .form-field--textarea,
  .form-field--actions {
    flex-basis: auto;
  }
  .home-section-mark {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}