/* ══════════════════════════════════════
   QUALITY CONTROL GLOBAL — style.css
   ══════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap");

/* ══════════════════════════════════════
   RESET & CUSTOM PROPERTIES
══════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --green: #42644a;
  --terra: #da7f4e;
  --peach: #f8c9af;
  --cream: #f3f0e8;
  --dark:  #1a1a18;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--dark);
  font-family: var(--sans);
  overflow-x: hidden;
}

/* ══════════════════════════════════════
   NAVIGATION
══════════════════════════════════════ */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  transition: box-shadow .3s ease, background .3s ease;
}

#navbar.scrolled {
  background: rgba(243,240,232,.97);
  box-shadow: 0 2px 20px rgba(0,0,0,.12);
  backdrop-filter: blur(8px);
}

.nav-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 60px;
  border-bottom: 1px solid rgba(66,100,74,.12);
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-logo-img {
  height: 76px;
  width: auto;
  display: block;
}

.nav-bottom {
  border-bottom: 2px solid var(--terra);
}

.nav-links {
  display: flex;
  list-style: none;
}

.nav-links li {
  flex: 1;
  border-right: 1px solid rgba(66,100,74,.12);
}

.nav-links li:first-child {
  border-left: 1px solid rgba(66,100,74,.12);
}

.nav-bottom .nav-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dark);
  text-decoration: none;
  transition: background .2s, color .2s;
}

.nav-bottom .nav-links a:hover       { background: var(--green); color: var(--cream); }
.nav-bottom .nav-links a.nav-active  { background: rgba(66,100,74,.08); color: var(--green); }
.nav-bottom .nav-links a.nav-talk    { background: var(--terra); color: #fff; }
.nav-bottom .nav-links a.nav-talk:hover { background: var(--green); color: var(--cream); }

/* ══════════════════════════════════════
   HAMBURGER
══════════════════════════════════════ */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--dark);
  transition: all .3s ease;
  transform-origin: center;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════
   MOBILE MENU
══════════════════════════════════════ */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

.mobile-menu-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 82%;
  max-width: 360px;
  height: 100%;
  z-index: 999;
  display: flex;
  flex-direction: column;
  background: var(--dark);
  border-left: 1px solid rgba(66,100,74,.3);
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.77,0,.175,1);
  overflow-y: auto;
}

.mobile-menu.open { transform: translateX(0); }

.mobile-menu-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 22px 24px;
  background: var(--dark);
  border-bottom: 1px solid rgba(243,240,232,.07);
}

.mobile-logo-img {
  height: 44px;
  width: auto;
  display: block;
}

.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: rgba(243,240,232,.05);
  border: 1px solid rgba(243,240,232,.1);
  border-radius: 50%;
  color: rgba(243,240,232,.7);
  font-family: var(--sans);
  font-size: 15px;
  cursor: pointer;
  transition: all .2s;
}

.mobile-menu-close:hover {
  background: rgba(218,127,78,.15);
  border-color: var(--terra);
  color: var(--terra);
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px 0;
  background: var(--dark);
}

.mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 24px !important;
  font-family: var(--serif) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: rgba(243,240,232,.8) !important;
  text-decoration: none !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(243,240,232,.06) !important;
  transition: color .2s, padding-left .25s, background .2s;
}

.mobile-nav a::after {
  content: "→";
  font-family: var(--sans);
  font-size: 14px;
  opacity: .25;
  transition: opacity .2s, transform .2s;
}

.mobile-nav a:hover {
  color: var(--peach) !important;
  padding-left: 32px !important;
  background: rgba(243,240,232,.03) !important;
}

.mobile-nav a:hover::after {
  opacity: 1;
  transform: translateX(4px);
  color: var(--terra);
}

.mobile-menu-footer {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 18px;
  padding: 20px 24px 32px;
  background: var(--dark);
  border-top: 1px solid rgba(243,240,232,.07);
}

/* Override btn-primary inside mobile footer */
.mobile-menu-footer .btn-primary {
  all: unset;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--terra);
  color: #fff;
  cursor: pointer;
  transition: background .25s;
}

.mobile-menu-footer .btn-primary:hover {
  background: var(--green);
  color: var(--cream);
}

.mobile-socials {
  display: flex;
  gap: 20px;
}

.mobile-socials a {
  display: inline !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(243,240,232,.3) !important;
  text-decoration: none !important;
  transition: color .2s;
}

.mobile-socials a:hover { color: var(--peach) !important; }

.mobile-tagline {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(243,240,232,.12);
}

/* ══════════════════════════════════════
   GLOBAL TYPOGRAPHY & UTILITIES
══════════════════════════════════════ */
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terra);
}

.section-label::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 30px;
  height: 1px;
  background: var(--terra);
}

.section-label.light        { color: var(--peach); }
.section-label.light::before { background: var(--peach); }

.section-heading {
  font-family: var(--serif);
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--dark);
  margin-bottom: 26px;
}

.section-heading em       { font-style: italic; color: var(--green); }
.section-heading.light    { color: var(--cream); }
.section-heading.light em { font-style: italic; color: var(--peach); }

.big-heading {
  font-family: var(--serif);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.1;
}

.big-heading em { font-style: italic; color: var(--terra); }

.body-text {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.85;
  color: rgba(26,26,24,.6);
  margin-bottom: 40px;
}

.body-text.light {
  color: rgba(243,240,232,.58);
  margin-bottom: 24px;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  text-decoration: none;
  transition: gap .2s, color .2s;
}

.arrow-link::after { content: "→"; }
.arrow-link:hover  { gap: 16px; color: var(--terra); }

.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin-top: 44px;
  padding-top: 40px;
  border-top: 1px solid rgba(66,100,74,.15);
}

.stat-number {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  color: var(--green);
}

.stat-label {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(26,26,24,.45);
}

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s ease, transform .7s ease;
}

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

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn-primary {
  display: inline-block;
  padding: 16px 36px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--terra);
  color: #fff;
  will-change: transform;
  transition: background .25s, transform .2s;
}

.btn-primary:hover {
  background: var(--peach);
  color: var(--dark);
  transform: translateY(-2px);
}

.btn-ghost {
  display: inline-block;
  padding: 15px 36px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(243,240,232,.3);
  color: var(--cream);
  transition: border-color .25s, color .25s, background .25s;
}

.btn-ghost:hover {
  border-color: var(--peach);
  background: var(--peach);
  color: var(--dark);
}

.btn-cream {
  display: inline-block;
  padding: 18px 44px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--cream);
  color: var(--dark);
  will-change: transform;
  transition: background .25s, transform .2s;
}

.btn-cream:hover {
  background: var(--peach);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════
   MARQUEE STRIPS
══════════════════════════════════════ */
@keyframes marqueeScroll  { to { transform: translateX(-50%); } }
@keyframes marqueeScroll2 { to { transform: translateX(-50%); } }
@keyframes marquee-left   { to { transform: translateX(-50%); } }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
@keyframes clientsScroll  { to { transform: translateX(-50%); } }

.marquee-wrap {
  display: flex;
  overflow: hidden;
  padding: 18px 0;
  background: var(--green);
}

.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marqueeScroll 24s linear infinite;
}

.marquee-track span {
  padding: 0 36px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  color: var(--cream);
}

.marquee-track span b {
  font-style: normal;
  font-weight: 400;
  color: var(--peach);
  margin-right: 8px;
}

.marquee-wrap-2 {
  display: flex;
  overflow: hidden;
  padding: 16px 0;
  background: var(--terra);
}

.marquee-track-2 {
  display: flex;
  white-space: nowrap;
  animation: marqueeScroll2 28s linear infinite;
}

.marquee-track-2 span {
  padding: 0 28px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer {
  padding: 80px 60px 36px;
  background: var(--dark);
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(243,240,232,.07);
}

.footer-logo-text {
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 300;
  letter-spacing: .1em;
  color: rgba(243,240,232,.7);
}

.footer-desc {
  margin-bottom: 24px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.8;
  color: rgba(243,240,232,.4);
}

.footer-socials {
  display: flex;
  gap: 20px;
}

.footer-socials a {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243,240,232,.4);
  text-decoration: none;
  transition: color .2s;
}

.footer-socials a:hover { color: var(--peach); }

.footer-col-title {
  margin-bottom: 24px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--peach);
}

.footer-links { list-style: none; }
.footer-links li { margin-bottom: 12px; }

.footer-links a {
  font-family: var(--sans);
  font-size: 15px;
  color: rgba(243,240,232,.4);
  text-decoration: none;
  transition: color .2s;
}

.footer-links a:hover { color: var(--peach); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.footer-copy {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(243,240,232,.25);
}

.footer-back-top {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243,240,232,.35);
  text-decoration: none;
  transition: color .2s;
}

.footer-credit {
  color: rgba(243,240,232,.35);
  text-decoration: none;
  font-size: 13px; /* slightly bigger than footer-copy */
  font-weight: 500;
  transition: color .2s;
}

.footer-credit:visited {
  color: rgba(243,240,232,.35); /* removes purple visited state */
}

.footer-credit:hover {
  color: var(--terra);
}

.footer-back-top:hover { color: var(--peach); }

/* ══════════════════════════════════════
   CTA SECTION
══════════════════════════════════════ */
.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 140px 60px;
  text-align: center;
  background: var(--green);
}

.cta-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--serif);
  font-size: 420px;
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(243,240,232,.05);
  pointer-events: none;
  user-select: none;
}

.cta-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.cta .section-label          { color: var(--peach); justify-content: center; }
.cta .section-label::before  { background: var(--peach); }

.cta-heading {
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--cream);
  margin-bottom: 24px;
}

.cta-heading em {
  display: block;
  font-style: italic;
  color: var(--peach);
}

.cta-sub {
  max-width: 520px;
  margin: 0 auto 48px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.85;
  color: rgba(243,240,232,.62);
}

.cta-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ══════════════════════════════════════
   HOMEPAGE — HERO
══════════════════════════════════════ */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  min-height: 100vh;
  background: var(--dark);
}

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 200px 60px 90px;
  position: relative;
  z-index: 2;
}

.hero-eyebrow {
  margin-bottom: 24px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--peach);
}

.hero-heading {
  font-family: var(--serif);
  font-size: clamp(48px, 6.5vw, 88px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--cream);
  margin-bottom: 32px;
}

.hero-heading em {
  display: block;
  font-style: italic;
  color: var(--peach);
}

.hero-sub {
  max-width: 400px;
  margin-bottom: 48px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.85;
  color: rgba(243,240,232,.6);
}

.hero-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.hero-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(160deg,#263c2a 0%,#1a1a18 100%);
}

.hero-big-text {
  position: absolute;
  z-index: 0;
  font-family: var(--serif);
  font-size: 280px;
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1px rgba(66,100,74,.15);
  user-select: none;
  animation: floatUp 9s ease-in-out infinite;
}

@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-20px); }
}

.hero-portrait-wrap {
  position: relative;
  z-index: 2;
  width: 300px;
  height: 420px;
}

.hero-portrait-frame {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 100%;
  height: 100%;
  border: 1.5px solid var(--terra);
  opacity: .7;
}

.hero-portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.hero-badge {
  position: absolute;
  bottom: 70px;
  right: 60px;
  z-index: 3;
  width: 90px;
  height: 90px;
  animation: spinBadge 22s linear infinite;
}

.hero-badge svg { width: 100%; height: 100%; }

@keyframes spinBadge { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════
   HOMEPAGE — WHO WE ARE
══════════════════════════════════════ */
.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.intro-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 600px;
  background: var(--green);
}

.intro-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 65% 40%, rgba(218,127,78,.15) 0%, transparent 70%);
  pointer-events: none;
}

.intro-img-frame {
  position: relative;
  z-index: 2;
  width: 280px;
  height: 380px;
}

.intro-img-offset {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--terra);
  opacity: .6;
}

.intro-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.intro-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 72px;
  background: var(--cream);
}

/* ══════════════════════════════════════
   HOMEPAGE — SERVICES CARDS
══════════════════════════════════════ */
.services {
  padding: 120px 60px;
  background: var(--cream);
}

.services-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 64px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(66,100,74,.15);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(66,100,74,.12);
}

.service-card {
  position: relative;
  overflow: hidden;
  padding: 52px 44px;
  background: var(--cream);
  transition: background .35s, box-shadow .35s;
}

.service-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--terra);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s;
}

.service-card:hover { background: #fff; box-shadow: 0 8px 32px rgba(26,26,24,.07); }
.service-card:hover::after { transform: scaleX(1); }

.service-num {
  margin-bottom: 22px;
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 300;
  line-height: 1;
  color: rgba(66,100,74,.1);
}

.service-title {
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--dark);
}

.service-desc {
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.85;
  color: rgba(26,26,24,.6);
}

/* ══════════════════════════════════════
   HOMEPAGE — ABOUT STRIP
══════════════════════════════════════ */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
  background: var(--dark);
}

.about-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 680px;
  background: linear-gradient(150deg,#263c2a,#1a1a18);
}

.about-watermark {
  position: absolute;
  bottom: -20px;
  left: -10px;
  font-family: var(--serif);
  font-size: 280px;
  font-weight: 300;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(66,100,74,.18);
  pointer-events: none;
  user-select: none;
}

.about-image {
  position: relative;
  z-index: 2;
  width: 320px;
  height: 420px;
  object-fit: cover;
}

.about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 72px;
}

/* ══════════════════════════════════════
   HOMEPAGE — CORE VALUES
══════════════════════════════════════ */
.values {
  padding: 120px 60px;
  background: #fff;
}

.values-header { margin-bottom: 64px; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px 40px;
}

.value-item {
  display: flex;
  flex-direction: column;
}

.value-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--green);
}

/* Pure CSS diamond — immune to mobile emoji colour override */
.value-icon::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--cream);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.value-title {
  margin-bottom: 10px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--dark);
}

.value-desc {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.8;
  color: rgba(26,26,24,.55);
}

/* ══════════════════════════════════════
   HOMEPAGE — PORTFOLIO STRIP
══════════════════════════════════════ */
.portfolio {
  padding: 120px 60px;
  background: var(--cream);
}

.portfolio-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
}

.portfolio-grid {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding-bottom: 24px;
  cursor: grab;
}

.portfolio-grid:active              { cursor: grabbing; }
.portfolio-grid::-webkit-scrollbar  { height: 2px; }
.portfolio-grid::-webkit-scrollbar-track { background: rgba(66,100,74,.1); }
.portfolio-grid::-webkit-scrollbar-thumb { background: var(--green); }

.portfolio-card {
  flex: 0 0 360px;
  cursor: pointer;
}

.portfolio-img-wrap {
  position: relative;
  width: 360px;
  height: 460px;
  overflow: hidden;
}

.portfolio-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.portfolio-card:hover .portfolio-img-wrap img { transform: scale(1.05); }

.portfolio-info { padding: 20px 0; }

.portfolio-client {
  margin-bottom: 6px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--dark);
}

.portfolio-type {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terra);
}

/* ══════════════════════════════════════
   ABOUT PAGE — HERO
   
   FIX: .about-hero-content is position:relative
   (in normal flex flow) so justify-content:flex-end
   on the parent correctly pushes it to the bottom.
   Photo + overlay remain position:absolute (decorative).
══════════════════════════════════════ */
.about-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 80vh;
  padding: 180px 80px 80px;
}

.about-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(26,26,24,.85) 0%,
    rgba(26,26,24,.3)  50%,
    transparent        100%
  );
}

/* position:relative keeps it in flex flow */
.about-hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.about-hero-heading {
  font-family: var(--serif);
  font-size: clamp(52px, 7.5vw, 100px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--cream);
  margin: 20px 0 36px;
}

.about-hero-heading em {
  font-style: italic;
  color: var(--peach);
}

/* ══════════════════════════════════════
   ABOUT PAGE — INTRO
══════════════════════════════════════ */
.about-intro {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0 80px;
  align-items: start;
  padding: 100px 60px;
  background: var(--cream);
}

.about-intro-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  grid-column: 1;
  grid-row: 1;
  padding-top: 10px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terra);
}

.about-intro-eyebrow::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 1px;
  background: var(--terra);
}

.about-intro-statement {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 60px;
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 300;
  line-height: 1.25;
  color: var(--dark);
}

.about-intro-statement em { font-style: italic; color: var(--green); }

.about-intro-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  grid-column: 2;
  grid-row: 2;
  padding-top: 40px;
  border-top: 1px solid rgba(66,100,74,.15);
}

/* ══════════════════════════════════════
   ABOUT PAGE — FOUNDER
══════════════════════════════════════ */
.founder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
  background: #fff;
}

.founder-img-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px 60px;
  background: var(--green);
}

.founder-img-wrap {
  position: relative;
  width: 320px;
  height: 440px;
}

.founder-img-frame {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--terra);
  opacity: .6;
}

.founder-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.founder-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 72px;
}

.founder-facts {
  margin-top: 32px;
  padding: 28px 32px;
  background: var(--cream);
  border-left: 3px solid var(--terra);
}

.founder-facts-label {
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terra);
}

.founder-facts ul { list-style: none; }

.founder-facts ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(26,26,24,.7);
  border-bottom: 1px solid rgba(66,100,74,.08);
}

.founder-facts ul li::before {
  content: "→";
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 12px;
  color: var(--terra);
}

.founder-facts ul li:last-child { border-bottom: none; }

/* ══════════════════════════════════════
   ABOUT PAGE — PHILOSOPHY
══════════════════════════════════════ */
.philosophy {
  padding: 100px 60px;
  background: var(--cream);
}

.philosophy-header { margin-bottom: 72px; }

.philosophy-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
  margin-bottom: 4px;
}

.philosophy-row--flip .philosophy-text   { order: 2; }
.philosophy-row--flip .philosophy-visual { order: 1; }

.philosophy-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 64px;
  background: #fff;
}

.philosophy-num {
  display: block;
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: 72px;
  font-weight: 300;
  line-height: 1;
  color: rgba(66,100,74,.1);
}

.philosophy-title {
  margin-bottom: 20px;
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 400;
  color: var(--dark);
}

.philosophy-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.philosophy-visual--green { background: var(--green); }
.philosophy-visual--terra { background: var(--terra); }
.philosophy-visual--dark  { background: var(--dark); }

.philosophy-watermark {
  font-family: var(--serif);
  font-size: 200px;
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.18);
  user-select: none;
  pointer-events: none;
}

/* ══════════════════════════════════════
   ABOUT PAGE — CLIENTS STRIP
══════════════════════════════════════ */
.clients-strip {
  overflow: hidden;
  padding: 20px 0;
  background: var(--dark);
  border-top: 1px solid rgba(243,240,232,.1);
  border-bottom: 1px solid rgba(243,240,232,.1);
}

.clients-label {
  margin-bottom: 16px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(243,240,232,.3);
  text-align: center;
}

.clients-marquee-wrap {
  display: flex;
  overflow: hidden;
}

.clients-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: clientsScroll 28s linear infinite;
}

.clients-marquee-track span {
  padding: 0 32px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  color: rgba(243,240,232,.5);
  white-space: nowrap;
  opacity: .85;
  transition: color .2s;
}

.clients-marquee-track span:hover { color: var(--peach); }

.clients-sep {
  font-style: normal !important;
  font-size: 16px !important;
  padding: 0 12px !important;
  color: var(--terra) !important;
}

/* ══════════════════════════════════════
   ABOUT PAGE — TEAM
══════════════════════════════════════ */
.team {
  padding: 100px 60px;
  background: var(--cream);
}

.team-header {
  margin-bottom: 64px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(66,100,74,.12);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.team-card {
  overflow: hidden;
  background: #fff;
  transition: transform .3s ease;
}

.team-card:hover { transform: translateY(-4px); }

.team-card-img-wrap {
  width: 100%;
  height: 380px;
  overflow: hidden;
}

.team-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform .5s ease;
}

.team-card:hover .team-card-img { transform: scale(1.04); }

.team-card-body { padding: 36px 40px 40px; }

.team-card-role {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terra);
}

.team-card-role::before {
  content: "";
  display: block;
  width: 18px;
  height: 1px;
  background: var(--terra);
}

.team-card-name {
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 300;
  color: var(--dark);
}

.team-card-bio {
  margin-bottom: 24px;
  padding-bottom: 24px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.8;
  color: rgba(26,26,24,.6);
  border-bottom: 1px solid rgba(66,100,74,.1);
}

.team-card-facts { list-style: none; }

.team-card-facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(26,26,24,.6);
  border-bottom: 1px solid rgba(66,100,74,.06);
}

.team-card-facts li::before {
  content: "→";
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 11px;
  color: var(--terra);
}

.team-card-facts li:last-child { border-bottom: none; }

/* ══════════════════════════════════════
   SERVICES PAGE — HERO
══════════════════════════════════════ */
.svc-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: calc(100vh - 100px);
  margin-top: 100px;
  padding: 100px 80px;
  text-align: center;
  background: var(--dark);
}

.svc-hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .28;
  pointer-events: none;
}

.svc-hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.svc-hero-content .section-label         { justify-content: center; margin-bottom: 28px; }
.svc-hero-content .section-label::before { display: none; }

.svc-hero-heading {
  font-family: var(--serif);
  font-size: clamp(52px, 7.5vw, 100px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--cream);
  margin: 0 0 40px;
}

.svc-hero-heading em {
  display: block;
  font-style: italic;
  color: var(--peach);
}

/* ── Niche marquee ── */
.niche-strip {
  overflow: hidden;
  padding: 20px 0;
  background: var(--green);
  border-top: 1px solid rgba(243,240,232,.1);
  border-bottom: 1px solid rgba(243,240,232,.1);
}

.niche-track {
  display: flex;
  width: max-content;
  animation: marquee-left 28s linear infinite;
}

.niche-item {
  padding: 0 32px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  color: var(--cream);
  white-space: nowrap;
  opacity: .85;
}

.niche-dot {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  font-size: 20px;
  line-height: 1;
  color: var(--peach);
  opacity: .8;
}

/* ══════════════════════════════════════
   SERVICES PAGE — INTRO
══════════════════════════════════════ */
.svc-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
  background: #fff;
}

.svc-intro-img {
  position: relative;
  overflow: hidden;
}

.svc-intro-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.svc-intro-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 88px 80px;
  background: var(--cream);
}

.svc-intro-heading {
  font-family: var(--serif);
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--dark);
  margin: 16px 0 28px;
}

.svc-intro-heading em { font-style: italic; color: var(--terra); }

.svc-intro-text .body-text { margin-bottom: 16px; }

.svc-client-list {
  margin-top: 36px;
  border-top: 1px solid rgba(66,100,74,.15);
}

.svc-client-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid rgba(66,100,74,.1);
  transition: background .2s;
}

.svc-client-item:hover { background: rgba(66,100,74,.03); }

.svc-client-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--dark);
}

.svc-client-growth {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--green);
}

/* ══════════════════════════════════════
   SERVICES PAGE — APPROACH
══════════════════════════════════════ */
.approach {
  padding: 120px 0 0;
  background: #fff;
}

.approach-header {
  padding: 0 80px;
  margin-bottom: 80px;
}

.approach-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
  border-top: 1px solid rgba(66,100,74,.1);
}

.approach-step:nth-child(even) .approach-step-text { order: 2; }
.approach-step:nth-child(even) .approach-step-img  { order: 1; }

.approach-step-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px;
  background: #fff;
}

.approach-num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 100px;
  font-weight: 300;
  line-height: 1;
  color: rgba(66,100,74,.08);
}

.approach-title {
  margin-bottom: 20px;
  font-family: var(--serif);
  font-size: clamp(32px, 3vw, 46px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--dark);
}

.approach-title em { font-style: italic; color: var(--terra); }

.approach-desc {
  max-width: 480px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.85;
  color: rgba(26,26,24,.6);
}

.approach-desc p { margin-bottom: 14px; }

.approach-step-img {
  position: relative;
  overflow: hidden;
}

.approach-step-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s ease;
}

.approach-step:hover .approach-step-img img { transform: scale(1.03); }

/* ══════════════════════════════════════
   SERVICES PAGE — SERVICE BLOCKS
══════════════════════════════════════ */
.services-detail {
  padding: 120px 0 0;
  background: var(--cream);
}

.services-detail-header {
  padding: 0 80px;
  margin-bottom: 80px;
}

.svc-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
  border-top: 1px solid rgba(66,100,74,.12);
}

.svc-block--reverse .svc-block-text { order: 2; }
.svc-block--reverse .svc-block-img  { order: 1; }

.svc-block-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 88px 80px;
  background: #fff;
}

.svc-block-text--cream { background: var(--cream); }
.svc-block-text--dark  { background: var(--dark); }

.svc-block-num {
  position: absolute;
  top: 44px;
  right: 44px;
  font-family: var(--serif);
  font-size: 110px;
  font-weight: 300;
  line-height: 1;
  color: rgba(66,100,74,.06);
  user-select: none;
  pointer-events: none;
}

.svc-block-num--light { color: rgba(243,240,232,.06); }

.svc-block-text .body-text { margin-bottom: 14px; }

.svc-includes { margin: 28px 0; }

.svc-includes-label {
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terra);
}

.svc-includes--light .svc-includes-label { color: var(--peach); }

.svc-includes ul { list-style: none; }

.svc-includes ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(26,26,24,.7);
  border-bottom: 1px solid rgba(66,100,74,.1);
}

.svc-includes--light ul li {
  color: rgba(243,240,232,.65);
  border-bottom-color: rgba(243,240,232,.08);
}

.svc-includes ul li::before {
  content: "\2192";
  flex-shrink: 0;
  font-size: 13px;
  color: var(--terra);
}

.svc-includes--light ul li::before { color: var(--peach); }
.svc-includes ul li:last-child      { border-bottom: none; }

.svc-block-img {
  position: relative;
  overflow: hidden;
}

.svc-block-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s ease;
}

.svc-block:hover .svc-block-img img { transform: scale(1.03); }

/* ══════════════════════════════════════
   SERVICES PAGE — PACKAGES
══════════════════════════════════════ */
.packages {
  padding: 120px 80px;
  background: var(--cream);
}

.packages-header {
  text-align: center;
  margin-bottom: 64px;
}

.packages-header .big-heading {
  max-width: 600px;
  margin: 0 auto;
}

.packages-note {
  max-width: 500px;
  margin: 20px auto 0;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1.75;
  text-align: center;
  color: rgba(26,26,24,.45);
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(66,100,74,.12);
}

.package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 52px 48px;
  background: #fff;
}

.package-card--featured { background: var(--dark); }

.package-featured-badge {
  position: absolute;
  top: -1px;
  left: 48px;
  padding: 5px 14px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--terra);
  color: #fff;
}

.package-card-top {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(66,100,74,.12);
}

.package-card--featured .package-card-top { border-bottom-color: rgba(243,240,232,.1); }

.package-tier {
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terra);
}

.package-card--featured .package-tier { color: var(--peach); }

.package-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.package-price-amount {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  color: var(--dark);
}

.package-card--featured .package-price-amount { color: var(--cream); }

.package-price-period {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(26,26,24,.4);
}

.package-card--featured .package-price-period { color: rgba(243,240,232,.4); }

.package-tagline {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
  color: rgba(26,26,24,.55);
}

.package-card--featured .package-tagline { color: rgba(243,240,232,.5); }

.package-features {
  flex: 1;
  list-style: none;
  margin: 0 0 36px;
}

.package-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(26,26,24,.65);
  border-bottom: 1px solid rgba(66,100,74,.07);
}

.package-card--featured .package-features li {
  color: rgba(243,240,232,.65);
  border-bottom-color: rgba(243,240,232,.07);
}

.package-features li::before {
  content: "\2192";
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 12px;
  color: var(--terra);
}

.package-card--featured .package-features li::before { color: var(--peach); }
.package-features li:last-child { border-bottom: none; }

.package-cta {
  display: inline-block;
  padding: 15px 28px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid var(--dark);
  color: var(--dark);
  transition: background .2s, color .2s;
}

.package-cta:hover                          { background: var(--dark); color: var(--cream); }
.package-card--featured .package-cta       { border-color: var(--cream); color: var(--cream); }
.package-card--featured .package-cta:hover { background: var(--cream); color: var(--dark); }

.packages-footer-note {
  margin-top: 52px;
  font-family: var(--sans);
  font-size: 13px;
  text-align: center;
  color: rgba(26,26,24,.5);
}

.packages-footer-note a {
  color: var(--terra);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Progression marquee ── */
.progression-strip {
  overflow: hidden;
  padding: 20px 0;
  background: var(--dark);
  border-top: 1px solid rgba(243,240,232,.1);
  border-bottom: 1px solid rgba(243,240,232,.1);
}

.progression-label {
  margin-bottom: 16px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(243,240,232,.3);
}

.progression-marquee-wrap {
  overflow: hidden;
  width: 100%;
}

.progression-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-left 28s linear infinite;
}

.prog-item {
  padding: 0 32px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  color: rgba(243,240,232,.5);
  white-space: nowrap;
  opacity: .85;
}

.prog-item em { font-style: italic; color: var(--peach); }

.prog-sep {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  font-size: 18px;
  line-height: 1;
  color: var(--peach);
  opacity: .8;
}

/* ── Is This You ── */
.is-this-you {
  padding: 120px 80px;
  background: #fff;
}

.is-this-you-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.ity-left .big-heading em { color: var(--terra); }
.ity-left .body-text      { max-width: 440px; margin-top: 16px; }

.ity-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(66,100,74,.1);
}

.ity-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 32px;
  background: #fff;
  transition: background .25s;
}

.ity-item:hover { background: rgba(66,100,74,.03); }

.ity-icon {
  flex-shrink: 0;
  margin-top: 4px;
  font-size: 12px;
  color: var(--terra);
}

.ity-item p {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--dark);
}

/* ══════════════════════════════════════
   PORTFOLIO PAGE — HERO
══════════════════════════════════════ */
.port-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: calc(100vh - 100px);
  margin-top: 100px;
  padding: 120px 80px;
  text-align: center;
  background: var(--dark);
}

.port-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.port-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26,26,24,.55) 0%,
    rgba(26,26,24,.35) 50%,
    rgba(26,26,24,.72) 100%
  );
}

.port-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 40px;
}

.port-hero-label {
  display: block;
  margin-bottom: 24px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--peach);
}

.port-hero-heading {
  font-family: var(--serif);
  font-size: clamp(52px, 7.5vw, 100px);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--cream);
  margin: 0;
}

.port-hero-heading em {
  display: block;
  font-style: italic;
  color: var(--peach);
}

.port-hero-sub {
  max-width: 480px;
  margin: 28px auto 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.8;
  color: rgba(243,240,232,.6);
}

/* ── Filter bar ── */
.port-filter {
  position: sticky;
  top: 130px;
  z-index: 80;
  background: var(--cream);
  border-bottom: 1px solid rgba(66,100,74,.12);
}

.port-filter-inner {
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding: 0 60px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.port-filter-inner::-webkit-scrollbar { display: none; }

.port-filter-btn {
  position: relative;
  padding: 22px 28px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(26,26,24,.4);
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s;
}

.port-filter-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 28px;
  right: 28px;
  height: 2px;
  background: var(--terra);
  transform: scaleX(0);
  transition: transform .2s;
}

.port-filter-btn:hover         { color: var(--dark); }
.port-filter-btn.active        { color: var(--dark); }
.port-filter-btn.active::after { transform: scaleX(1); }

/* ── Portfolio grid ── */
.port-grid-section {
  padding: 64px 60px 100px;
  background: var(--cream);
}

.port-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(8, 180px);
  gap: 12px;
}

.port-item:nth-child(1) { grid-column: 1;   grid-row: 1 / 4; }
.port-item:nth-child(2) { grid-column: 2;   grid-row: 1 / 3; }
.port-item:nth-child(3) { grid-column: 3;   grid-row: 1 / 3; }
.port-item:nth-child(4) { grid-column: 2/4; grid-row: 3 / 5; }
.port-item:nth-child(5) { grid-column: 1;   grid-row: 4 / 7; }
.port-item:nth-child(6) { grid-column: 2;   grid-row: 5 / 7; }
.port-item:nth-child(7) { grid-column: 3;   grid-row: 5 / 7; }
.port-item:nth-child(8) { grid-column: 1/3; grid-row: 7 / 9; }
.port-item:nth-child(9) { grid-column: 3;   grid-row: 7 / 9; }

.port-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--dark);
  transition: opacity .35s ease, filter .35s ease;
}

.port-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.88);
  transition: transform .6s cubic-bezier(.25,.46,.45,.94), filter .4s ease;
}

.port-item:hover img {
  transform: scale(1.05);
  filter: brightness(.55);
}

.port-item-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 28px;
  background: linear-gradient(to top, rgba(26,26,24,.7) 0%, transparent 55%);
  transition: background .3s ease;
}

.port-item:hover .port-item-overlay {
  background: linear-gradient(to top, rgba(26,26,24,.9) 0%, rgba(26,26,24,.2) 100%);
}

.port-item-cat {
  margin-bottom: 6px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--peach);
  transform: translateY(4px);
  transition: transform .3s ease;
}

.port-item-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--cream);
  transform: translateY(4px);
  transition: transform .3s ease .04s;
}

.port-item-name em { font-style: italic; color: var(--peach); }

.port-item-arrow {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(243,240,232,.5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease .06s, transform .3s ease .06s;
}

.port-item:hover .port-item-cat,
.port-item:hover .port-item-name  { transform: translateY(0); }
.port-item:hover .port-item-arrow { opacity: 1; transform: translateY(0); }

/* ── Stats strip ── */
.port-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--green);
  border-top: 1px solid rgba(243,240,232,.1);
  border-bottom: 1px solid rgba(243,240,232,.1);
}

.port-stat-item {
  padding: 52px 48px;
  text-align: center;
  background: var(--green);
  transition: background .2s;
}

.port-stat-item:hover { background: rgba(0,0,0,.15); }

.port-stat-num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  color: var(--cream);
}

.port-stat-num em { font-style: italic; color: var(--peach); }

.port-stat-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(243,240,232,.55);
}

/* ── Testimonials ── */
.port-testimonials {
  padding: 100px 60px;
  background: #fff;
}

.port-testimonials-header { margin-bottom: 64px; }

.port-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(66,100,74,.1);
}

.port-testi-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 48px 40px;
  background: #fff;
  transition: background .2s;
}

.port-testi-card:hover { background: rgba(66,100,74,.02); }

.port-testi-quote {
  flex: 1;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--dark);
}

.port-testi-quote::before {
  content: "\201C";
  font-size: 40px;
  font-style: normal;
  line-height: 0;
  vertical-align: -0.4em;
  margin-right: 4px;
  color: var(--terra);
}

.port-testi-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(66,100,74,.1);
}

.port-testi-brand-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terra);
}

.port-testi-brand {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dark);
}

.port-testi-growth {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--green);
}

/* ── Portfolio marquee ── */
.port-marquee-strip {
  overflow: hidden;
  background: var(--dark);
}

.port-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 36s linear infinite;
  border-top: 1px solid rgba(243,240,232,.06);
  border-bottom: 1px solid rgba(243,240,232,.06);
}

.port-marquee-item {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 28px 64px;
  white-space: nowrap;
  border-right: 1px solid rgba(243,240,232,.06);
}

.port-marquee-brand {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  color: rgba(243,240,232,.5);
}

.port-marquee-num {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--peach);
}

/* ══════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════ */
.contact-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 80vh;
  padding: 180px 80px 80px;
  background: var(--dark);
}

.contact-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: .3;
  pointer-events: none;
}

.contact-hero-bg {
  position: absolute;
  right: -60px;
  bottom: -80px;
  font-family: var(--serif);
  font-size: 420px;
  font-weight: 300;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(66,100,74,.07);
  pointer-events: none;
  user-select: none;
}

.contact-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.contact-hero-heading {
  font-family: var(--serif);
  font-size: clamp(52px, 7.5vw, 100px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--cream);
  margin: 20px 0 24px;
}

.contact-hero-heading em { font-style: italic; color: var(--peach); }

.contact-hero-sub {
  max-width: 480px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.85;
  color: rgba(243,240,232,.5);
}

.contact-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  background: #fff;
}

.contact-info {
  display: flex;
  flex-direction: column;
  padding: 80px 72px;
  background: #fff;
  border-right: 1px solid rgba(66,100,74,.1);
}

.contact-tagline {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 300;
  line-height: 1.25;
  color: rgba(26,26,24,.75);
  margin: 12px 0 16px;
}

.contact-tagline em { font-style: italic; color: var(--terra); }

.contact-info .body-text {
  max-width: 380px;
  margin-bottom: 0;
  color: rgba(26,26,24,.45);
}

.contact-details {
  display: flex;
  flex-direction: column;
  margin-top: 44px;
  border-top: 1px solid rgba(66,100,74,.1);
}

.contact-detail-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(66,100,74,.1);
}

.contact-detail-label {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terra);
}

.contact-detail-value {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .01em;
  color: rgba(26,26,24,.55);
  text-decoration: none;
  transition: color .2s;
}

.contact-detail-value:hover { color: var(--terra); }

.contact-socials {
  display: flex;
  gap: 1px;
  margin-top: 44px;
  background: rgba(66,100,74,.1);
}

.contact-social-link {
  flex: 1;
  padding: 16px 0;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: rgba(26,26,24,.45);
  background: #fff;
  transition: background .2s, color .2s;
}

.contact-social-link:hover { background: var(--green); color: var(--cream); }

.contact-form-panel {
  display: flex;
  flex-direction: column;
  padding: 80px 72px;
  background: var(--terra);
}

.contact-form-panel .section-label         { margin-bottom: 32px; color: rgba(243,240,232,.6); }
.contact-form-panel .section-label::before { background: rgba(243,240,232,.4); }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-bottom: 1px;
  background: rgba(66,100,74,.12);
}

.form-field {
  position: relative;
  margin-bottom: 1px;
  background: #fff;
}

.form-field--full {
  margin-bottom: 1px;
  background: #fff;
}

.form-field::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.form-field:focus-within::after { transform: scaleX(1); }

.form-label {
  display: block;
  padding: 18px 24px 0;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terra);
  transition: color .2s;
}

.contact-form-panel .form-label                       { color: rgba(243,240,232,.7); }
.form-field:focus-within .form-label                  { color: var(--green); }
.contact-form-panel .form-field:focus-within .form-label { color: #fff; }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 6px 24px 16px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: rgba(26,26,24,.7);
  background: transparent;
  border: none;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23DA7F4E' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
  padding-right: 48px;
}

.form-textarea {
  resize: none;
  min-height: 140px;
  padding-top: 8px;
}

.form-input::placeholder,
.form-textarea::placeholder {
  font-style: italic;
  color: rgba(26,26,24,.25);
}

.form-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
}

.form-note {
  flex: 1;
  min-width: 180px;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.6;
  color: rgba(243,240,232,.6);
}

.form-submit {
  padding: 18px 40px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--dark);
  color: var(--cream);
  border: none;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.form-submit:hover { background: #fff; color: var(--dark); }

.form-success {
  display: none;
  padding: 48px 24px;
  text-align: center;
}

.form-success-icon { font-size: 40px; margin-bottom: 16px; }

.form-success h3 {
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 300;
  color: var(--cream);
}

.form-success h3 em { font-style: italic; color: var(--peach); }

.form-success p {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.75;
  color: rgba(243,240,232,.7);
}

/* Honeypot */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ── FAQ ── */
.contact-faq {
  padding: 100px 80px;
  background: var(--green);
}

.contact-faq-header                        { margin-bottom: 56px; }
.contact-faq-header .big-heading           { color: var(--cream); }
.contact-faq-header .big-heading em        { color: var(--peach); }
.contact-faq-header .section-label         { color: var(--peach); }
.contact-faq-header .section-label::before { background: var(--peach); }

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(243,240,232,.12);
}

.faq-item {
  padding: 40px 44px;
  background: var(--green);
  cursor: pointer;
  transition: background .2s;
}

.faq-item:hover,
.faq-item.open { background: rgba(243,240,232,.07); }

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--cream);
}

.faq-toggle {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 20px;
  font-style: normal;
  line-height: 1;
  color: var(--peach);
  transition: transform .25s ease;
}

.faq-item.open .faq-toggle { transform: rotate(45deg); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.8;
  color: rgba(243,240,232,.6);
  opacity: 0;
  transition: max-height .35s ease, opacity .3s ease;
}

.faq-item.open .faq-a { max-height: 400px; opacity: 1; }

/* ── What to Expect ── */
.contact-expect {
  padding: 100px 80px;
  background: var(--cream);
}

.contact-expect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 64px;
  background: rgba(66,100,74,.1);
}

.expect-item {
  padding: 48px 44px;
  background: var(--cream);
  transition: background .25s;
}

.expect-item:hover { background: #fff; }

.expect-num {
  display: block;
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 300;
  line-height: 1;
  color: rgba(66,100,74,.1);
}

.expect-title {
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 300;
  color: var(--dark);
}

.expect-desc {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.8;
  color: rgba(26,26,24,.55);
}

/* ══════════════════════════════════════
   RESPONSIVE — TABLET (max-width: 1024px)
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-left            { padding: 140px 40px 70px; }
  .intro-text           { padding: 70px 44px; }
  .about-content        { padding: 70px 44px; }
  .services             { padding: 80px 32px; }
  .values               { padding: 80px 32px; }
  .portfolio            { padding: 80px 32px; }
  .cta                  { padding: 100px 40px; }
  footer                { padding: 60px 32px 32px; }
  .about-hero           { padding: 0 40px 80px; }
  .about-intro          { padding: 80px 40px; gap: 0 48px; }
  .founder-content      { padding: 60px 44px; }
  .philosophy           { padding: 80px 40px; }
  .philosophy-text      { padding: 56px 44px; }
  .team                 { padding: 80px 40px; }
  .svc-hero             { padding: 160px 40px 80px; }
  .svc-intro-text       { padding: 72px 52px; }
  .approach-header      { padding: 0 52px; }
  .approach-step-text   { padding: 60px 52px; }
  .services-detail-header { padding: 0 52px; }
  .svc-block-text       { padding: 72px 52px; }
  .packages             { padding: 100px 52px; }
  .package-card         { padding: 44px 36px; }
  .is-this-you          { padding: 100px 52px; }
  .port-grid-section    { padding: 48px 40px 80px; }
  .port-filter-inner    { padding: 0 40px; }
  .port-stats-strip     { grid-template-columns: repeat(2, 1fr); }
  .port-testimonials    { padding: 80px 40px; }
  .contact-hero         { padding: 160px 48px 72px; }
  .contact-info         { padding: 72px 52px; }
  .contact-form-panel   { padding: 72px 52px; }
  .contact-faq          { padding: 80px 48px; }
  .contact-expect       { padding: 80px 48px; }
}

@media (max-width: 900px) {
  .founder-img-wrap { width: 260px; height: 360px; }
}

/* ══════════════════════════════════════
   RESPONSIVE — MOBILE (max-width: 768px)
══════════════════════════════════════ */
@media (max-width: 768px) {
  /* Nav */
  .nav-links              { display: none; }
  .nav-top                { padding: 14px 24px; }
  #navbar .nav-logo-img   { height: 44px; }
  .hamburger              { display: flex; }

  /* Homepage hero */
  .hero                   { grid-template-columns: 1fr; min-height: 100vh; }
  .hero-right             { display: none; }
  .hero-left              { padding: 140px 24px 60px; }
  .hero-heading           { font-size: clamp(40px, 10vw, 60px); }
  .hero-sub               { font-size: 14px; max-width: 100%; }
  .hero-btns              { flex-direction: column; align-items: flex-start; }
  .btn-primary,
  .btn-ghost              { width: 100%; text-align: center; }

  /* Marquees */
  .marquee-track span     { font-size: 15px; padding: 0 24px; }
  .marquee-track-2 span   { font-size: 11px; padding: 0 18px; }

  /* Intro */
  .intro                  { grid-template-columns: 1fr; }
  .intro-visual           { min-height: 360px; }
  .intro-img-frame        { width: 200px; height: 270px; }
  .intro-text             { padding: 52px 24px; }
  .stats-row              { gap: 24px; }
  .stat-number            { font-size: 36px; }

  /* Services (homepage) */
  .services               { padding: 72px 24px; }
  .services-header        { flex-direction: column; align-items: flex-start; gap: 20px; }
  .services-grid          { grid-template-columns: 1fr; }
  .service-card           { padding: 40px 28px; }

  /* About (homepage strip) */
  .about                  { grid-template-columns: 1fr; }
  .about-visual           { min-height: 320px; }
  .about-watermark        { font-size: 160px; }
  .about-content          { padding: 52px 24px; }

  /* Values */
  .values                 { padding: 72px 24px; }
  .values-grid            { grid-template-columns: 1fr 1fr; gap: 32px 24px; }

  /* Portfolio (homepage strip) */
  .portfolio              { padding: 72px 24px; }
  .portfolio-header       { flex-direction: column; align-items: flex-start; gap: 24px; }
  .portfolio-header .btn-primary { width: 100%; text-align: center; }
  .portfolio-card         { flex: 0 0 280px; }
  .portfolio-img-wrap     { width: 280px; height: 360px; }

  /* CTA */
  .cta                    { padding: 80px 24px; }
  .cta-heading            { font-size: clamp(40px, 10vw, 60px); }
  .cta-bg-text            { font-size: 200px; }
  .cta-btns               { flex-direction: column; align-items: center; }
  .btn-cream              { width: 100%; text-align: center; }
  .cta .btn-ghost         { width: 100%; text-align: center; }

  /* Footer */
  footer                  { padding: 52px 24px 28px; }
  .footer-top             { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand           { grid-column: 1 / -1; }
  .footer-bottom          { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* About page hero — centred between navbar bottom and section bottom */
  .about-hero {
    height: 100vh;
    justify-content: center;
    padding: 72px 24px 52px;
  }

  /* About page content */
  .about-intro            { grid-template-columns: 1fr; padding: 64px 24px; gap: 0; }
  .about-intro-eyebrow    { grid-column: 1; grid-row: auto; margin-bottom: 20px; }
  .about-intro-statement  { grid-column: 1; grid-row: auto; }
  .about-intro-stats      { grid-column: 1; grid-row: auto; gap: 24px; }
  .founder                { grid-template-columns: 1fr; }
  .founder-img-col        { padding: 60px 24px; min-height: 420px; }
  .founder-img-wrap       { width: 260px; height: 360px; }
  .founder-content        { padding: 52px 24px; }
  .philosophy             { padding: 64px 24px; }
  .philosophy-row,
  .philosophy-row--flip   { grid-template-columns: 1fr; }
  .philosophy-row--flip .philosophy-text,
  .philosophy-row--flip .philosophy-visual { order: unset; }
  .philosophy-visual      { min-height: 200px; }
  .philosophy-text        { padding: 48px 28px; }
  .philosophy-watermark   { font-size: 120px; }
  .clients-strip          { padding: 44px 0 36px; }
  .clients-marquee-track span { font-size: clamp(22px, 5vw, 36px); padding: 0 24px; }
  .team                   { padding: 64px 24px; }
  .team-grid              { grid-template-columns: 1fr; gap: 32px; }
  .team-card-img-wrap     { height: 300px; }
  .team-card-body         { padding: 28px 28px 32px; }

  /* Services page */
  .svc-hero               { margin-top: 72px; padding: 140px 24px 80px; min-height: 80vh; }
  .svc-hero-heading       { font-size: clamp(44px, 11vw, 64px); }
  .svc-intro              { grid-template-columns: 1fr; }
  .svc-intro-img          { min-height: 320px; }
  .svc-intro-text         { padding: 60px 28px; }
  .approach-header        { padding: 0 28px; }
  .approach-step          { grid-template-columns: 1fr; }
  .approach-step:nth-child(even) .approach-step-text,
  .approach-step:nth-child(even) .approach-step-img { order: unset; }
  .approach-step-img      { min-height: 280px; }
  .approach-step-text     { padding: 52px 28px; }
  .services-detail        { padding: 80px 0 0; }
  .services-detail-header { padding: 0 28px; }
  .svc-block              { grid-template-columns: 1fr; }
  .svc-block--reverse .svc-block-text,
  .svc-block--reverse .svc-block-img { order: unset; }
  .svc-block-img          { min-height: 280px; }
  .svc-block-text         { padding: 52px 28px; }
  .svc-block-num          { font-size: 80px; top: 20px; right: 20px; }
  .packages               { padding: 80px 24px; }
  .packages-grid          { grid-template-columns: 1fr; }
  .package-card           { padding: 40px 28px; }
  .package-featured-badge { left: 28px; }
  .is-this-you            { padding: 80px 24px; }
  .is-this-you-inner      { grid-template-columns: 1fr; gap: 48px; }

  /* Portfolio page */
  .port-hero              { margin-top: 72px; height: 80vh; }
  .port-filter            { top: 80px; }
  .port-filter-inner      { padding: 0 20px; }
  .port-filter-btn        { padding: 18px; font-size: 10px; }
  .port-grid-section      { padding: 32px 16px 64px; }
  .port-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: 240px;
    gap: 8px;
  }
  .port-item:nth-child(1),
  .port-item:nth-child(2),
  .port-item:nth-child(3),
  .port-item:nth-child(4),
  .port-item:nth-child(5),
  .port-item:nth-child(6),
  .port-item:nth-child(7),
  .port-item:nth-child(8),
  .port-item:nth-child(9) { grid-column: auto; grid-row: auto; }
  .port-item:nth-child(4),
  .port-item:nth-child(8) { grid-column: span 2; }
  .port-stats-strip       { grid-template-columns: repeat(2, 1fr); }
  .port-stat-item         { padding: 36px 24px; }
  .port-stat-num          { font-size: 40px; }
  .port-testimonials      { padding: 64px 24px; }
  .port-testi-grid        { grid-template-columns: 1fr; }
  .port-testi-card        { padding: 36px 28px; }

  /* Contact page */
  .contact-hero           { padding: 130px 24px 56px; min-height: 60vh; }
  .contact-hero-bg        { font-size: 160px; right: -20px; bottom: -40px; }
  .contact-hero-heading   { font-size: clamp(40px, 11vw, 58px); }
  .contact-hero-sub       { font-size: 13px; }
  .contact-main           { grid-template-columns: 1fr; }
  .contact-info           { padding: 52px 24px 44px; border-right: none; border-bottom: 1px solid rgba(66,100,74,.1); }
  .contact-tagline        { font-size: clamp(24px, 7vw, 32px); }
  .contact-details        { margin-top: 32px; }
  .contact-detail-item    { grid-template-columns: 86px 1fr; padding: 13px 0; }
  .contact-detail-label   { font-size: 8px; }
  .contact-form-panel     { padding: 44px 24px 52px; }
  .form-row               { grid-template-columns: 1fr; }
  .form-label             { padding: 14px 20px 0; font-size: 8px; }
  .form-input,
  .form-select,
  .form-textarea          { padding: 5px 20px 14px; font-size: 14px; }
  .form-select            { background-position: right 20px center; padding-right: 40px; }
  .form-textarea          { min-height: 110px; }
  .form-submit-row        { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 20px; }
  .form-submit            { text-align: center; padding: 16px 24px; }
  .contact-socials        { margin-top: 32px; }
  .contact-expect         { padding: 60px 24px; }
  .contact-expect-grid    { grid-template-columns: 1fr; margin-top: 40px; }
  .expect-item            { padding: 36px 28px; }
  .expect-num             { font-size: 48px; }
  .contact-faq            { padding: 60px 24px; }
  .faq-grid               { grid-template-columns: 1fr; }
  .faq-item               { padding: 28px 24px; }
  .faq-q                  { font-size: 18px; }
}

/* ══════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (max-width: 480px)
══════════════════════════════════════ */
@media (max-width: 480px) {
  .values-grid      { grid-template-columns: 1fr; }
  .footer-top       { grid-template-columns: 1fr; }
  .big-heading      { font-size: clamp(36px, 9vw, 48px); }
  .section-heading  { font-size: clamp(30px, 8vw, 44px); }
  .stats-row        { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .port-grid        { grid-template-columns: 1fr; grid-auto-rows: 280px; }
  .port-item:nth-child(4),
  .port-item:nth-child(8) { grid-column: 1; }
}