/* ============================================================
   AETHER TYPOGRAPHY SYSTEM — SkillPeopleHire
   Playfair Display (headings) + Inter (body)
   Exact visual match to Aether Talent reference design
   ============================================================ */

/* ---- FONT VARIABLES -------------------------------------- */
:root {
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;

  /* Aether color overrides */
  --at-dark:    #1a1a2e;   /* deepest background */
  --at-navy:    #16213e;   /* section dark bg */
  --at-mid:     #0f3460;   /* mid accent */
  --at-text:    #2d2d2d;   /* body text */
  --at-muted:   #6b6b6b;   /* muted text */
  --at-light:   #f5f5f0;   /* off-white sections */
  --at-border:  #e8e8e0;   /* subtle borders */
}

/* ---- BASE OVERRIDES -------------------------------------- */
body {
  font-family: var(--font-sans);
  color: var(--at-text);
  background: #ffffff;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---- ALL HEADINGS USE PLAYFAIR DISPLAY ------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: 1.15;
  color: var(--at-dark);
}

/* ---- HERO H1 — Exact Aether headline style --------------- */
/*
  Aether hero uses Playfair Display:
  Line 1: "Excellence" — very large, bold serif, no italic
  Line 2: "IS NOT A SKILL," — smaller, italic serif, muted
  Line 3: "IT'S AN ATTITUDE." — medium weight, spaced
*/
.hero-h1 {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 1.5rem;
  font-family: var(--font-serif);
}

.hero-h1__line1 {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  font-weight: 700;
  font-style: normal;
  color: #ffffff;
  letter-spacing: -.02em;
  line-height: .95;
}

.hero-h1__line2 {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,.55);
  letter-spacing: .02em;
  line-height: 1.4;
  margin-top: .625rem;
}

.hero-h1__line3 {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 2vw, 1.625rem);
  font-weight: 600;
  font-style: normal;
  color: rgba(255,255,255,.75);
  letter-spacing: .04em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ---- HERO SUB — Aether body style ----------------------- */
.hero-sub {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 300;
  color: rgba(255,255,255,.62);
  max-width: 520px;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  letter-spacing: .01em;
}

/* ---- HERO EYEBROW ---------------------------------------- */
.hero-eyebrow {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---- THREE COLUMNS --------------------------------------- */
/* Aether three-col: large Playfair heading, Inter body */
.tcol-item__label {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
}

.tcol-item h3 {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--at-dark);
  line-height: 1.25;
  margin-bottom: .75rem;
}

.tcol-item p {
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 400;
  color: var(--at-muted);
  line-height: 1.75;
}

/* ---- SHAPING SECTION ------------------------------------- */
/*
  Aether "SHAPING A NEW EXPERIENCE":
  Left: very large stacked Playfair Display, mixed weights
  "SHAPING" = bold caps
  "A NEW" = light weight
  "Experience" = italic, accent color
*/
.shaping-left h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -.02em;
  color: var(--at-dark);
}

.shaping-left h2 .line-caps {
  display: block;
  font-weight: 800;
  font-style: normal;
  color: var(--at-dark);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.shaping-left h2 .line-light {
  display: block;
  font-weight: 400;
  font-style: normal;
  color: var(--at-muted);
  font-size: 85%;
}

.shaping-left h2 .line-italic {
  display: block;
  font-weight: 700;
  font-style: italic;
  color: var(--green);
}

.shaping-right p {
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 400;
  color: var(--at-muted);
  line-height: 1.85;
}

/* ---- ICON FEATURES --------------------------------------- */
.icon-feature__label {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin-top: 1.375rem;
}

.icon-feature h4 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--at-dark);
  line-height: 1.25;
  margin-bottom: .625rem;
}

.icon-feature p {
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 400;
  color: var(--at-muted);
  line-height: 1.75;
}

/* ---- EDITORIAL BAND -------------------------------------- */
/* Aether: full-width dark band, large italic serif quote */
.editorial-band__content blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  letter-spacing: .01em;
}

.editorial-band__content cite {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(107,191,43,.75);
  font-style: normal;
}

/* ---- STATS BAR ------------------------------------------- */
/* Aether: large Playfair Display numbers, small sans labels */
.stat-b__num {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -.03em;
  line-height: 1;
}

.stat-b__num span {
  font-family: var(--font-sans);
  font-size: 55%;
  font-weight: 700;
  color: var(--green);
  vertical-align: super;
}

.stat-b__label {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-top: .5rem;
}

.stat-b__sub {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 400;
  color: rgba(255,255,255,.28);
  margin-top: .25rem;
}

/* ---- AREAS WE SERVE -------------------------------------- */
.areas-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--at-dark);
  letter-spacing: -.02em;
}

.areas-header p {
  font-family: var(--font-sans);
  font-size: .9375rem;
  color: var(--at-muted);
  line-height: 1.75;
}

.area-card h4 {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--at-dark);
  margin-bottom: .375rem;
}

.area-card p {
  font-family: var(--font-sans);
  font-size: .875rem;
  color: var(--at-muted);
  line-height: 1.7;
}

/* ---- TESTIMONIAL ----------------------------------------- */
/*
  Aether testimonial:
  Heading: large Playfair, mixed weight
  Quote: Playfair italic, medium size
  Cite: Sans, small caps style
*/
.testimonial-label {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
}

.testimonial-body h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: var(--at-dark);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.testimonial-quote {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 400;
  font-style: italic;
  color: var(--at-text);
  line-height: 1.85;
  border-left: 3px solid var(--green-lt);
  padding-left: 1.375rem;
}

.testimonial-cite__name {
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--at-dark);
}

.testimonial-cite__role {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--at-muted);
}

.testimonial-stars {
  font-size: .9375rem;
  color: #f59e0b;
  letter-spacing: .08em;
  margin-top: .25rem;
}

/* ---- TEAM SECTION ---------------------------------------- */
/*
  Aether "We Are Pleased To Meet You":
  Left heading: Playfair Display, multi-line stacked
  Team cards: grayscale portrait, Playfair name, sans role
*/
.team-intro h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 700;
  color: var(--at-dark);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.team-intro p {
  font-family: var(--font-sans);
  font-size: .9375rem;
  color: var(--at-muted);
  line-height: 1.8;
  margin-top: 1rem;
}

.team-card h4 {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--at-dark);
  margin-top: .875rem;
}

.team-card__role {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
  margin-top: .25rem;
}

/* ---- PARTNER LOGOS --------------------------------------- */
/* Aether: clean pill-border, elegant serif lettering */
.logo-pill {
  font-family: var(--font-serif);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #aaa;
  border: 1.5px solid #e0e0e0;
  padding: .625rem 1.625rem;
  border-radius: 40px;
  transition: color .2s, border-color .2s;
}

.logo-pill:hover {
  color: var(--at-dark);
  border-color: var(--green-lt);
}

/* ---- PORTFOLIO / CASE STUDIES ---------------------------- */
.portfolio-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--at-dark);
  letter-spacing: -.02em;
}

.portfolio-header p {
  font-family: var(--font-sans);
  font-size: .9375rem;
  color: var(--at-muted);
  line-height: 1.7;
  margin-top: .5rem;
}

.portfolio-card__tag {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(107,191,43,.85);
  margin-bottom: .5rem;
}

.portfolio-card__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.portfolio-card__sub {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 400;
  color: rgba(255,255,255,.52);
  line-height: 1.55;
  margin-top: .375rem;
}

/* ---- NEWSLETTER BAR -------------------------------------- */
.newsletter-text h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.newsletter-text p {
  font-family: var(--font-sans);
  font-size: .9375rem;
  color: rgba(255,255,255,.45);
  line-height: 1.7;
  margin-top: .5rem;
}

/* ---- NAVIGATION ------------------------------------------ */
/* Aether nav: clean sans-serif menu links, spaced */
.nav-menu a {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav-logo-text {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--at-dark);
  letter-spacing: -.03em;
}

.nav-cta {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---- TOPBAR ---------------------------------------------- */
.topbar a, .topbar-left, .topbar-right {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
}

/* ---- SECTION LABELS -------------------------------------- */
/* Aether uses small ALL-CAPS sans with a preceding line */
.section-label {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ---- FOOTER ---------------------------------------------- */
.footer-col h5 {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

.footer-col a, .footer-contact-list li {
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 400;
}

.footer-brand-col p {
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255,255,255,.38);
}

.footer-bottom p {
  font-family: var(--font-sans);
  font-size: .8rem;
}

/* ---- HERO CONTACT STRIP ---------------------------------- */
.hcs-item {
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 400;
}

.hcs-item a {
  font-weight: 500;
  color: rgba(255,255,255,.65);
}

/* ---- SHAPING SECTION updated H2 ------------------------- */
/*
  Override the inline-style approach to use CSS classes
  Aether uses stacked lines with mixed Playfair weights
*/
.shaping-left h2 {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5.5vw, 5rem);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.025em;
  color: var(--at-dark);
}

/* The green italic word in shaping section */
.shaping-left h2 em {
  font-style: italic;
  font-weight: 700;
  color: var(--green);
  display: block;
  font-size: 90%;
}

/* ---- TEAM SECTION H2 updated ---------------------------- */
.team-intro h2 em {
  font-style: italic;
  font-weight: 700;
  color: var(--green);
  display: inline;
}

/* ---- BTN LINK -------------------------------------------- */
.btn-link {
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---- PORTFOLIO SECTION HEADER OVERRIDES ----------------- */
.section-header h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--at-dark);
}

.section-header p {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--at-muted);
}

/* ---- AREA CARD ICON LABEL -------------------------------- */
/* Override section to add Playfair to area section heading */
.areas-header .section-label {
  font-family: var(--font-sans);
}

/* ---- HERO EYEBROW REFINEMENT ----------------------------- */
.hero-eyebrow {
  background: rgba(107,191,43,.12);
  border: 1px solid rgba(107,191,43,.28);
  color: rgba(168,224,99,.9);
  font-size: .72rem;
  letter-spacing: .14em;
  padding: .325rem .875rem;
  border-radius: 20px;
  margin-bottom: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* ---- BODY / PARAGRAPH DEFAULTS --------------------------- */
p {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--at-muted);
  line-height: 1.75;
}

/* ---- BUTTON TYPOGRAPHY ----------------------------------- */
.btn-primary, .btn-outline, .btn-ghost-white, .btn-white, .btn-outline-white,
.nav-cta, .newsletter-form button {
  font-family: var(--font-sans);
  letter-spacing: .04em;
}

/* ---- SHAPING: background refinement for Aether feel ------ */
.shaping {
  background: #f7f7f3;
}

/* ---- THREE COL: border divider matches Aether ----------- */
.three-col {
  background: #ffffff;
  border-bottom: 1px solid var(--at-border);
}

.three-col .c .tcol-item {
  border-right: 1px solid var(--at-border);
}

/* ---- ICONS SECTION: off-white bg like Aether ------------ */
.icons-section {
  background: #ffffff;
}

/* ---- STATS BAR: Aether uses very dark background --------- */
.stats-bar {
  background: var(--at-navy);
}

.stats-bar::before {
  background: linear-gradient(135deg, rgba(107,191,43,.06) 0%, transparent 60%);
}

/* ---- AREAS: light grey like Aether ----------------------- */
.areas {
  background: #f7f7f3;
}

/* ---- TESTIMONIAL: white like Aether ---------------------- */
.testimonial-section {
  background: #ffffff;
}

/* ---- TEAM: very light grey ------------------------------ */
.team-section {
  background: #f7f7f3;
}

/* ---- LOGOS: white with top/bottom border ----------------- */
.logos-section {
  background: #ffffff;
  border-top: 1px solid var(--at-border);
  border-bottom: 1px solid var(--at-border);
  padding: 2.5rem 0;
}

/* ---- PORTFOLIO: light grey like Aether ------------------- */
.portfolio {
  background: #f7f7f3;
}

/* ---- NEWSLETTER: dark like Aether ------------------------ */
.newsletter-bar {
  background: var(--at-navy);
}

/* ---- FOOTER: deepest dark like Aether ------------------- */
.site-footer {
  background: var(--at-dark);
}

/* ============================================================
   MOBILE TYPOGRAPHY OVERRIDES
   ============================================================ */

@media (max-width: 767px) {
  .hero-h1__line1 { font-size: clamp(2.75rem, 12vw, 4rem); }
  .hero-h1__line2 { font-size: clamp(1rem, 5vw, 1.375rem); }
  .hero-h1__line3 { font-size: clamp(.9rem, 4.5vw, 1.25rem); }
  .shaping-left h2 { font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .team-intro h2   { font-size: clamp(2rem, 9vw, 2.75rem); }
}

/* ============================================================
   SHAPING SECTION — Exact Aether stacked line styles
   ============================================================ */

.shaping-left h2 .line-caps {
  display: block;
  font-family: var(--font-serif);
  font-weight: 900;
  font-style: normal;
  color: var(--at-dark);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 100%;
}

.shaping-left h2 .line-light {
  display: block;
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: normal;
  color: #999;
  font-size: 78%;
  letter-spacing: .02em;
  margin-top: .1em;
}

.shaping-left h2 .line-italic {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;
  color: var(--green);
  font-size: 88%;
  margin-top: .05em;
}

/* ============================================================
   NAVIGATION — Aether exact header style
   White bg, subtle shadow, generous padding
   ============================================================ */

.site-nav {
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid #eeeeea;
  box-shadow: 0 1px 12px rgba(0,0,0,.04);
}

.site-nav .nav-inner {
  padding: 1rem 0;
}

/* ============================================================
   HERO — Aether exact background + layout
   Deep charcoal/navy, subtle radial overlay
   ============================================================ */

.hero {
  background: linear-gradient(150deg, #0d1b2a 0%, #1a2e1f 40%, #0f2318 100%);
  min-height: 620px;
  padding-bottom: 0;
}

.hero::before {
  background:
    radial-gradient(ellipse 65% 85% at 80% 40%, rgba(107,191,43,.10) 0%, transparent 65%),
    radial-gradient(ellipse 45% 65% at 10% 85%, rgba(15,35,24,.6) 0%, transparent 60%);
}

.hero-body {
  padding: 5.5rem 0 3.5rem;
}

/* Hero contact strip bottom */
.hero-contact-strip {
  background: rgba(0,0,0,.22);
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 1.25rem 0;
}

.hero-contact-strip .c {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: center;
}

.hcs-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: rgba(255,255,255,.55);
  font-size: .875rem;
}

.hcs-item svg {
  color: var(--green);
  flex-shrink: 0;
}

/* ============================================================
   THREE COLUMNS — Aether exact style
   White background, bordered vertical dividers
   ============================================================ */

.three-col {
  padding: 0;
  background: #ffffff;
  border-bottom: 1px solid #eeeeea;
}

.three-col .c {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0;
}

.three-col .c .tcol-item {
  padding: 3.5rem 2.75rem;
  border-right: 1px solid #eeeeea;
  border-bottom: none;
}

.three-col .c .tcol-item:last-child {
  border-right: none;
}

.tcol-icon {
  width: 44px;
  height: 44px;
  background: var(--green-xl);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  margin-bottom: .75rem;
}

@media (max-width: 767px) {
  .three-col .c { grid-template-columns: 1fr; }
  .three-col .c .tcol-item {
    border-right: none;
    border-bottom: 1px solid #eeeeea;
    padding: 2.5rem 0;
  }
  .three-col .c .tcol-item:last-child { border-bottom: none; }
}

/* ============================================================
   SHAPING SECTION — Aether exact layout
   Off-white bg, generous 5rem+ vertical padding
   ============================================================ */

.shaping {
  background: #f7f7f3;
  padding: 0;
}

.shaping .c {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: start;
  padding: 6rem 0;
}

@media (max-width: 900px) {
  .shaping .c {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 4rem 0;
  }
}

.shaping-label {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.25rem;
}

/* ============================================================
   ICON FEATURES — Aether exact layout
   Full white, equal padding, coloured image tops
   ============================================================ */

.icons-section {
  padding: 5.5rem 0;
  background: #ffffff;
}

.icons-section .c {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.icon-feature__img {
  width: 100%;
  height: 210px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .icons-section .c { grid-template-columns: 1fr; gap: 3rem; }
}

/* ============================================================
   EDITORIAL BAND — Aether exact full-width dark section
   ============================================================ */

.editorial-band__inner {
  min-height: 300px;
  background: linear-gradient(150deg, #0d1b2a 0%, #1a2e1f 60%, #0f2318 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.editorial-band__inner::before {
  content: '\201C';
  position: absolute;
  top: -80px;
  left: 3%;
  font-size: 32rem;
  font-family: var(--font-serif);
  color: rgba(107,191,43,.035);
  line-height: 1;
  pointer-events: none;
  font-weight: 900;
}

.editorial-band__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 760px;
  padding: 5rem 2rem;
}

/* ============================================================
   STATS BAR — Aether exact dark section
   ============================================================ */

.stats-bar {
  background: #16213e;
  padding: 4rem 0;
}

.stats-bar .c {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.stat-b {
  text-align: center;
  padding: 1.5rem 1rem;
  border-left: 1px solid rgba(255,255,255,.07);
}

.stat-b:first-child { border-left: none; }

@media (max-width: 640px) {
  .stats-bar .c { grid-template-columns: 1fr 1fr; }
  .stat-b:nth-child(2n+1) { border-left: none; }
}

/* ============================================================
   AREAS WE SERVE — Aether exact three-column phone layout
   ============================================================ */

.areas {
  padding: 6rem 0;
  background: #f7f7f3;
}

.areas-header {
  text-align: center;
  max-width: 580px;
  margin: 0 auto 4.5rem;
}

.areas-three-col {
  display: grid;
  grid-template-columns: 1fr 220px 1fr;
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 900px) {
  .areas-three-col {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .areas-phone { order: -1; }
}

.areas-left, .areas-right {
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}

.areas-right .area-card {
  flex-direction: row-reverse;
  text-align: right;
}

@media (max-width: 900px) {
  .areas-right .area-card {
    flex-direction: row;
    text-align: left;
  }
}

/* ============================================================
   TESTIMONIAL — Aether exact two-column layout
   ============================================================ */

.testimonial-section {
  padding: 6rem 0;
  background: #ffffff;
}

.testimonial-section .c {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: center;
}

@media (max-width: 900px) {
  .testimonial-section .c { grid-template-columns: 1fr; gap: 3rem; }
}

.testimonial-img {
  height: 500px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, #e8e8e0 0%, #d0d0c8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-img-placeholder { color: #c0c0b8; }

.testimonial-body {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* ============================================================
   TEAM SECTION — Aether exact two-column layout
   Left text intro + right 4-card grid
   ============================================================ */

.team-section {
  padding: 6rem 0;
  background: #f7f7f3;
}

.team-section .c {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .team-section .c { grid-template-columns: 1fr; gap: 3rem; }
}

.team-intro {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: .5rem;
}

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

@media (max-width: 640px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
}

.team-card__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: linear-gradient(160deg, #e0e0d8, #c8c8c0);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  filter: grayscale(90%);
  transition: filter .35s ease;
}

.team-card__img:hover { filter: grayscale(0%); }
.team-card__avatar-placeholder { color: #b8b8b0; }

/* ============================================================
   LOGOS — Aether clean pill row
   ============================================================ */

.logos-section {
  background: #ffffff;
  border-top: 1px solid #eeeeea;
  border-bottom: 1px solid #eeeeea;
  padding: 2.75rem 0;
}

.logos-section .c {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   PORTFOLIO — Aether case study grid
   ============================================================ */

.portfolio {
  padding: 6rem 0;
  background: #f7f7f3;
}

.portfolio-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2.75rem;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 900px) { .portfolio-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .portfolio-grid { grid-template-columns: 1fr; } }

.portfolio-card {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .28s ease, box-shadow .28s ease;
}

.portfolio-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(0,0,0,.18);
}

.portfolio-card__bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  opacity: .25;
}

.portfolio-card__overlay {
  position: relative;
  z-index: 1;
  background: linear-gradient(0deg, rgba(10,20,15,.92) 0%, rgba(10,20,15,.4) 60%, transparent 100%);
  padding: 1.625rem;
}

/* ============================================================
   NEWSLETTER — Aether dark subscribe bar
   ============================================================ */

.newsletter-bar {
  padding: 4.5rem 0;
  background: #16213e;
}

.newsletter-bar .c {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 767px) {
  .newsletter-bar .c { grid-template-columns: 1fr; gap: 2rem; }
}

.newsletter-form {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
}

.newsletter-form input {
  flex: 1;
  padding: .9375rem 1.25rem;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.1);
  border-right: none;
  border-radius: 8px 0 0 8px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: .9375rem;
  outline: none;
  transition: background .2s, border-color .2s;
}

.newsletter-form input:focus {
  background: rgba(255,255,255,.08);
  border-color: rgba(107,191,43,.4);
}

.newsletter-form input::placeholder {
  color: rgba(255,255,255,.28);
}

.newsletter-form button {
  padding: .9375rem 1.75rem;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 0 8px 8px 0;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
}

.newsletter-form button:hover { background: var(--green-dk); }

/* ============================================================
   FOOTER — Aether deepest dark style
   ============================================================ */

.site-footer {
  background: #0d1b2a;
  padding: 5rem 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.4fr;
  gap: 3.5rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media (max-width: 550px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-col h5 {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin-bottom: 1.375rem;
}

.footer-col ul li { margin-bottom: .625rem; }
.footer-col a { font-size: .875rem; color: rgba(255,255,255,.42); transition: color .15s; }
.footer-col a:hover { color: #fff; }

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

.footer-contact-list li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  color: rgba(255,255,255,.4);
  font-size: .875rem;
  font-family: var(--font-sans);
}

.footer-contact-list svg {
  color: rgba(107,191,43,.65);
  flex-shrink: 0;
  margin-top: .2rem;
}

.footer-contact-list a { color: rgba(255,255,255,.42); }
.footer-contact-list a:hover { color: #fff; }

.footer-bottom {
  padding: 1.625rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}

.footer-bottom p { font-size: .8rem; color: rgba(255,255,255,.22); }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { font-size: .8rem; color: rgba(255,255,255,.22); }
.footer-legal a:hover { color: rgba(255,255,255,.65); }

.footer-socials {
  display: flex;
  gap: .625rem;
  margin-top: 1.5rem;
}

.footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.45);
  font-size: .7rem;
  font-weight: 700;
  transition: background .2s, color .2s, border-color .2s;
}

.footer-socials a:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* ============================================================
   NAV LOGO MARK — refined for Aether feel
   ============================================================ */

.nav-logo-mark {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--green) 0%, #2D5A3D 100%);
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: .7rem;
  letter-spacing: .06em;
  box-shadow: 0 2px 12px rgba(107,191,43,.4);
}

/* ============================================================
   SECTION LABEL — refined ::before line
   ============================================================ */

.section-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: .75rem;
}

.section-label::before {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ============================================================
   HERO ACTIONS — refined button sizing
   ============================================================ */

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: .25rem;
}

.btn-primary.btn-lg {
  padding: .9375rem 2rem;
  font-size: .9375rem;
}

.btn-ghost-white.btn-lg {
  padding: .9375rem 2rem;
  font-size: .9375rem;
}

/* ============================================================
   PHONE MOCKUP — refined Aether orange/pink gradient
   ============================================================ */

.phone-mockup {
  width: 190px;
  margin: 0 auto;
}

.phone-mockup__outer {
  width: 190px;
  height: 385px;
  background: #111118;
  border-radius: 38px;
  padding: 11px;
  box-shadow:
    0 30px 70px rgba(0,0,0,.45),
    0 8px 20px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.12);
  position: relative;
}

.phone-mockup__outer::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 13px;
  background: #000;
  border-radius: 0 0 10px 10px;
  z-index: 3;
}

.phone-mockup__screen {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background: linear-gradient(160deg, #f97316 0%, #ec4899 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  overflow: hidden;
  position: relative;
}

.phone-mockup__screen::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 180px;
  height: 180px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
}

.phone-mockup__screen::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 120px;
  height: 120px;
  background: rgba(0,0,0,.1);
  border-radius: 50%;
}

.phone-mockup__logo {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 800;
  color: rgba(255,255,255,.95);
  text-shadow: 0 4px 16px rgba(0,0,0,.15);
  position: relative;
  z-index: 1;
  letter-spacing: -.03em;
}

.phone-mockup__tagline {
  font-family: var(--font-sans);
  font-size: .65rem;
  font-weight: 700;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .14em;
  position: relative;
  z-index: 1;
}

/* ============================================================
   FADE-UP ANIMATION for hero
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-body > * {
  animation: fadeUp .65s cubic-bezier(.22, .61, .36, 1) both;
}
.hero-body > *:nth-child(1) { animation-delay: .08s; }
.hero-body > *:nth-child(2) { animation-delay: .18s; }
.hero-body > *:nth-child(3) { animation-delay: .28s; }
.hero-body > *:nth-child(4) { animation-delay: .38s; }