/*
 * Visible Studios - Main Stylesheet
 * Version: 1.0.0
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
h3 { font-size: inherit; font-weight: inherit; }

:root {
  --tan:  #c1c0b7;
  --dark: #3c3d3f;
  --deep: #3c3d3f;
  --off:  #c1c0b7;
  --mid:  #8a8a87;
  --sans: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

html { scroll-behavior: smooth; }
body {
  background: var(--off);
  color: var(--deep);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: none;
}

/* ─── CURSOR ─── */
#cur {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--deep);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .15s, height .15s, border-radius .15s, background .15s;
}
#cur.big { width: 42px; height: 42px; background: transparent; border: 1.5px solid var(--deep); border-radius: 50%; }
#cur.inv { background: var(--tan); }
#cur.big.inv { border-color: var(--tan); background: transparent; }

/* ─── NAV ─── */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px;
  transition: background .25s, border-color .25s;
}
nav.solid {
  background: var(--deep);
  border-bottom: 2px solid var(--tan);
}
.nav-logo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.02em;
  color: var(--deep);
  text-decoration: none;
  transition: color .25s;
}
nav.solid .nav-logo {
  color: var(--tan);
}
.nav-logo .studios {
  color: var(--dark);
  transition: color .25s;
}
nav.solid .nav-logo .studios {
  color: var(--tan);
}
.nav-links { list-style: none; display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(28,29,30,.5);
  text-decoration: none;
  transition: color .15s;
}
nav.solid .nav-links a { color: rgba(193,192,183,.5); }
.nav-links a:hover { color: var(--deep); }
nav.solid .nav-links a:hover { color: var(--tan); }
.nav-pill {
  background: var(--deep) !important;
  color: var(--tan) !important;
  padding: 8px 18px;
  border-radius: 100px;
  transition: background .15s !important;
}
nav.solid .nav-pill {
  background: var(--tan) !important;
  color: var(--deep) !important;
}
.nav-pill:hover { background: var(--dark) !important; }

/* ─── HERO ─── */
.hero {
  background: var(--tan);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  position: relative;
  border-bottom: 3px solid var(--deep);
  height: 100svh;
  overflow: hidden;
}

/* Top strip — nav clearance + meta */
.hero-top-bar {
  padding: 96px 28px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  animation: fi .5s ease forwards .2s;
}
.hero-location {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(28,29,30,.4);
}
.hero-year {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(28,29,30,.4);
}

/* thin rule between top bar and headline */
.hero-top-rule {
  width: calc(100% - 56px);
  margin: 0 28px;
  height: 1px;
  background: rgba(28,29,30,.15);
  opacity: 0;
  animation: fi .4s ease forwards .28s;
}

/* HEADLINE — each word on its own line, flush left, fills width */
.hero-headline-block {
  padding: 16px 28px 0;
}
.hero-word {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(70px, 17.5vw, 220px);
  letter-spacing: -.04em;
  line-height: .9;
  text-transform: uppercase;
  color: var(--deep);
  display: block;
  opacity: 0;
}
.hero-word:nth-child(1) { animation: fu .6s ease forwards .3s; }
.hero-word:nth-child(2) { animation: fu .6s ease forwards .4s; }
.hero-word:nth-child(3) { animation: fu .6s ease forwards .5s; }
.hero-word:nth-child(4) { animation: fu .6s ease forwards .6s; }
.hero-word:nth-child(5) { animation: fu .6s ease forwards .7s; }
.hero-word.dim { color: rgba(28,29,30,.4); }

/* Bottom bar — sits directly under headline, no flex stretching */
.hero-bottom {
  margin-top: 28px;
  border-top: 1.5px solid rgba(28,29,30,.15);
  padding: 20px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  opacity: 0;
  animation: fi .6s ease forwards .85s;
}
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
}

/* Hero CTA buttons */
.hero-btn {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: all .18s;
}
/* Primary — solid tan pill, no sharp corners */
.hero-btn-fill {
  background: var(--deep);
  color: var(--tan);
  border: none;
  border-radius: 100px;
  padding: 11px 26px;
}
.hero-btn-fill:hover {
  background: var(--dark);
}
/* Secondary — pure text link, underline on hover */
.hero-btn-text {
  background: transparent;
  color: rgba(28,29,30,.5);
  border: none;
  padding: 0;
  letter-spacing: .14em;
  font-size: 9px;
}
.hero-btn-text:hover {
  color: var(--deep);
}



/* ─── BIG STATEMENT ─── */
/* Consciously-style: type IS the section, fills the block */
.statement {
  background: var(--deep);
  padding: 80px 40px 72px;
  border-bottom: 3px solid var(--tan);
  position: relative;
  overflow: hidden;
}
.statement-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
}
.statement-h {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(52px, 9vw, 116px);
  letter-spacing: -.04em;
  line-height: .9;
  text-transform: uppercase;
  color: var(--off);
}
.statement-h em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px var(--off);
}
.statement-rhs {
  max-width: 280px;
  padding-bottom: 8px;
}
.statement-body {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(193,192,183,.55);
  margin-bottom: 20px;
}
.statement-body strong { font-weight: 700; color: var(--off); }

/* tag badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 100px;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.badge-dark { background: var(--deep); color: var(--off); }
.badge-dark:hover { background: var(--dark); }
.badge-out { border: 2px solid var(--deep); color: var(--deep); }
.badge-out:hover { background: var(--deep); color: var(--off); }
.badge-tan { background: var(--tan); color: var(--deep); }
.badge-tan:hover { background: var(--deep); color: var(--tan); }
.badge-sm { font-size: 8.5px; padding: 6px 13px; }

/* ─── SERVICES — big flat list, consciously-style ─── */
.services { background: var(--deep); border-bottom: 3px solid var(--tan); }
.services-head {
  padding: 60px 40px 40px;
  border-bottom: 2px solid rgba(193,192,183,.1);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.services-h {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 100px);
  letter-spacing: -.04em;
  line-height: .88;
  text-transform: uppercase;
  color: var(--off);
}
.services-h em { font-style: normal; color: var(--tan); }

.svc-list { display: flex; flex-direction: column; }
.svc {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 0;
  padding: 0 40px;
  min-height: 100px;
  border-bottom: 1px solid rgba(193,192,183,.08);
  position: relative;
}

.svc-num {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: rgba(193,192,183,.22);
}
.svc-body {
  padding: 28px 0;
  border-left: 1px solid rgba(193,192,183,.08);
  padding-left: 32px;
}
.svc-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 40px);
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--off);
  line-height: 1;
  margin-bottom: 6px;
}
.svc-name em { font-style: normal; color: var(--tan); }
.svc-desc {
  font-weight: 300;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(193,192,183,.38);
  max-width: 560px;
}


/* ─── HOW — big statement block, tan bg ─── */
.how {
  background: var(--tan);
  border-bottom: 3px solid var(--deep);
  padding: 80px 40px;
}
.how-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 60px;
  padding-bottom: 52px;
  border-bottom: 2px solid rgba(28,29,30,.15);
}
.how-h {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(44px, 7vw, 88px);
  letter-spacing: -.04em;
  line-height: .9;
  text-transform: uppercase;
  color: var(--deep);
}
.how-rhs {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  gap: 16px;
}
.how-body {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(28,29,30,.65);
}
.how-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.how-item {
  background: rgba(28,29,30,.07);
  padding: 28px 26px;
}
.how-n {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: rgba(28,29,30,.35);
  margin-bottom: 10px;
}
.how-item-h {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--deep);
  margin-bottom: 6px;
  line-height: 1.2;
}
.how-item-b {
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(28,29,30,.55);
}

/* ─── GROWTH GRAPHIC ─── */
.growth-graphic {
  background: var(--dark);
  border-bottom: 3px solid var(--tan);
  position: relative;
  overflow: hidden;
  height: 280px;
}
#growth-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ─── NEWSLETTER ─── */
.newsletter {
  background: var(--tan);
  border-bottom: 3px solid var(--deep);
  padding: 64px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.newsletter-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.newsletter-h {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 6.5vw, 60px);
  letter-spacing: -.04em;
  line-height: .9;
  text-transform: uppercase;
  color: var(--deep);
}
.newsletter-sub {
  font-weight: 300;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(28,29,30,.55);
  max-width: 260px;
  text-align: right;
}
.newsletter-form {
  display: flex;
  gap: 0;
  border: 2px solid rgba(28,29,30,.25);
}
.newsletter-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--deep);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  padding: 14px 18px;
  outline: none;
  min-width: 0;
}
.newsletter-input::placeholder { color: rgba(28,29,30,.35); }
.newsletter-btn {
  background: var(--deep);
  color: var(--tan);
  border: none;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 14px 20px;
  cursor: none;
  white-space: nowrap;
  transition: background .18s;
  flex-shrink: 0;
}
.newsletter-btn:hover { background: rgba(28,29,30,.8); }

/* ─── FAQ ─── */
.faq {
  background: var(--off);
  border-bottom: 3px solid var(--deep);
}
.faq-top {
  padding: 72px 40px 52px;
  border-bottom: 2px solid rgba(28,29,30,.12);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.faq-h {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(44px, 7vw, 88px);
  letter-spacing: -.04em;
  line-height: .9;
  text-transform: uppercase;
  color: var(--deep);
}

.faq-list {}
.faq-item { border-bottom: 1.5px solid rgba(28,29,30,.1); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 40px;
  cursor: none;
  gap: 24px;
  transition: background .15s;
}
.faq-q:hover { background: rgba(28,29,30,.03); }
.faq-item.open .faq-q { background: var(--deep); }
.faq-q-txt {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--deep);
  line-height: 1.2;
  transition: color .15s;
}
.faq-item.open .faq-q-txt { color: var(--tan); }
.faq-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  border: 2px solid rgba(28,29,30,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--mid);
  transition: all .25s;
}
.faq-item.open .faq-icon { transform: rotate(45deg); border-color: var(--tan); color: var(--tan); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-a-inner {
  padding: 0 40px 32px;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mid);
  max-width: 680px;
  background: var(--deep);
  color: rgba(193,192,183,.45);
  padding-top: 0;
}
.faq-a-inner p { padding: 24px 40px; }
.faq-item.open .faq-a { max-height: 200px; }

/* ─── CONTACT ─── */
.contact {
  background: var(--deep);
  border-bottom: 3px solid var(--tan);
}
.contact-top {
  padding: 80px 40px 60px;
  border-bottom: 2px solid rgba(193,192,183,.08);
}
.contact-h {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(52px, 10vw, 130px);
  letter-spacing: -.045em;
  line-height: .88;
  text-transform: uppercase;
}
.contact-h .l1 { color: var(--off); display: inline; }
.contact-h .l2 { color: var(--tan); display: inline; margin-left: .2em; }
.contact-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.contact-lhs {
  padding: 52px 40px;
  border-right: 2px solid rgba(193,192,183,.08);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.contact-sub {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(193,192,183,.4);
}

.contact-rhs { padding: 52px 40px; }

/* form */
.fld { margin-bottom: 14px; }
.fld label {
  display: block;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(193,192,183,.28);
  margin-bottom: 8px;
}
.fld input, .fld select, .fld textarea {
  width: 100%;
  background: rgba(193,192,183,.04);
  border: 1.5px solid rgba(193,192,183,.1);
  color: var(--off);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  padding: 14px 16px;
  outline: none;
  -webkit-appearance: none;
  border-radius: 0;
  transition: border-color .2s, background .2s;
}
.fld select { color: rgba(193,192,183,.45); cursor: none; }
.fld input::placeholder, .fld textarea::placeholder {
  color: rgba(193,192,183,.45);
  font-weight: 300;
}
.fld select option { background: var(--deep); color: var(--off); }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--tan);
  background: rgba(193,192,183,.07);
}
.fld textarea { resize: vertical; min-height: 100px; }
.submit-btn {
  width: 100%; margin-top: 6px;
  background: var(--tan); color: var(--deep);
  border: none;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  padding: 17px; cursor: none;
  font-weight: 500;
  transition: background .18s;
}
.submit-btn:hover { background: var(--off); }

/* ─── FOOTER ─── */
footer {
  background: var(--deep);
  border-top: 2px solid rgba(193,192,183,.08);
  padding: 24px 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ft-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ft-logo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.02em;
  color: var(--off);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.ft-logo .studios { color: var(--tan); }
.ft-links { list-style: none; display: flex; gap: 24px; flex-wrap: nowrap; align-items: center; }
.ft-links a {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(193,192,183,.25);
  text-decoration: none;
  transition: color .15s;
  white-space: nowrap;
}
.ft-links a:hover { color: var(--tan); }
.ft-rule {
  width: 100%;
  height: 1px;
  background: rgba(193,192,183,.08);
}
.ft-copy {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(193,192,183,.18);
  text-align: center;
}

/* ─── REVEAL ─── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s cubic-bezier(0.22, 1, 0.36, 1), transform .65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.on { opacity: 1; transform: none; }

/* ─── HERO DIAGRAM ─── */
.hero-diagram {
  flex: 1;
  position: relative;
  z-index: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
}
#diagram-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
#diagram-canvas-desktop {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  inset: 0;
}

.hero-top-bar,
.hero-top-rule,
.hero-headline-block,
.hero-bottom,
.hero-diagram { position: relative; z-index: 1; }

/* ─── KEYFRAMES ─── */
@keyframes fu { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes fi { from { opacity:0; } to { opacity:1; } }
@keyframes tick { from { transform:translateX(0); } to { transform:translateX(-50%); } }

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--deep); }
::-webkit-scrollbar-thumb { background: var(--tan); }
::selection { background: var(--tan); color: var(--deep); }

/* ─── HAMBURGER (hidden on desktop) ─── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  z-index: 200;
}
.nav-hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--deep);
  transition: transform .25s, opacity .25s;
}
nav.solid .nav-hamburger span { background: var(--deep); }
.hero ~ nav .nav-hamburger span,
nav:not(.solid) .nav-hamburger span { background: var(--tan); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.nav-drawer {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--tan);
  z-index: 150;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 32px;
  gap: 0;
}
.nav-drawer.open { display: flex; }
.nav-drawer li { list-style: none; width: 100%; border-bottom: 1px solid rgba(28,29,30,.1); }
.nav-drawer a {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 42px;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--deep);
  text-decoration: none;
  padding: 20px 0;
  transition: color .15s;
  text-align: center;
}
.nav-drawer a:hover { color: var(--dark); }
.nav-drawer .cta-item a {
  color: var(--dark);
  font-size: 42px;
}


.drawer-close-item {
  border-bottom: none !important;
  display: flex;
  justify-content: flex-start;
  padding: 0 4px;
  margin-bottom: 8px;
}
.drawer-close {
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 300;
  color: rgba(28,29,30,.45);
  cursor: pointer;
  padding: 8px 12px;
  line-height: 1;
  transition: color .15s;
}
.drawer-close:hover { color: var(--deep); }

/* ─── MOBILE BREAKPOINT ─── */
@media (max-width: 768px) {

  /* disable custom cursor on touch */
  body { cursor: auto; }
  #cur { display: none; }

  /* NAV */
  nav { padding: 20px 24px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  /* hamburger lines white on dark hero, dark on tan bg */
  nav:not(.solid) .nav-hamburger span { background: rgba(28,29,30,.6); }
  nav.solid .nav-hamburger span { background: var(--tan); }

  /* HERO */
  .hero-top-bar { padding: 80px 20px 16px; }
  .hero-top-rule { width: calc(100% - 40px); margin: 0 20px; }
  .hero-headline-block { padding: 12px 20px 0; }
  .hero-word { font-size: clamp(52px, 16.5vw, 88px); line-height: .9; }
  .hero-bottom { margin-top: 20px; padding: 16px 20px 32px; gap: 10px; }


  /* STATEMENT */
  .statement { padding: 52px 24px 48px; }
  .statement-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .statement-h { font-size: clamp(44px, 14vw, 72px); }
  .statement-rhs { max-width: 100%; }

  /* SERVICES */
  .services-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 44px 24px 32px;
  }
  .services-h { font-size: clamp(44px, 14vw, 72px); }
  .svc {
    grid-template-columns: 44px 1fr 24px;
    gap: 0;
    padding: 0 24px;
    min-height: 88px;
  }
  .svc-body { padding: 22px 0 22px 20px; }
  .svc-name { font-size: clamp(18px, 5.5vw, 26px); }
  .svc-desc { font-size: 12.5px; }

  /* HOW */
  .how { padding: 52px 24px; }
  .how-top {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 40px;
    padding-bottom: 36px;
  }
  .how-h { font-size: clamp(42px, 13vw, 68px); }
  .how-items { grid-template-columns: 1fr; }
  .how-item { padding: 22px 20px; }

  /* FEATURE */


  /* NEWSLETTER */
  .newsletter { padding: 48px 24px; gap: 22px; }
  .newsletter-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .newsletter-sub { text-align: left; max-width: 100%; }

  /* FAQ */
  .faq-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 52px 24px 36px;
  }
  .faq-h { font-size: clamp(28px, 6.5vw, 60px); }
  .faq-q { padding: 22px 24px; }
  .faq-q-txt { font-size: 14px; }
  .faq-a-inner p { padding: 16px 24px; }

  /* CONTACT */
  .contact-top { padding: 52px 24px 40px; }
  .contact-h { font-size: clamp(44px, 13vw, 72px); }
  .contact-body { grid-template-columns: 1fr; }
  .contact-lhs {
    padding: 36px 24px;
    border-right: none;
    border-bottom: 2px solid rgba(193,192,183,.08);
  }
  .contact-rhs { padding: 36px 24px; }

  /* FOOTER */
  footer { padding: 20px 24px 16px; }
  .ft-links { gap: 16px; }
  .ft-links a { font-size: 8px; letter-spacing: .12em; }
  .ft-logo { font-size: 13px; }
}

/* ═══════════════════════════════════════
   DESKTOP BREAKPOINT — 1024px and up
═══════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── LAYOUT CONSTRAINT ── */
  /* Max-width container for content sections */
  .svc-list,
  .how-top,
  .how-items,
  .faq-list,
  .contact-body,
  .ft-top,
  .ft-rule,
  .ft-copy {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── NAV ── */
  nav { padding: 28px 64px; }
  nav.solid { padding: 20px 64px; }
  .nav-links { display: flex; }
  .nav-hamburger { display: none; }
  .nav-logo { font-size: 17px; }

  /* ── HERO ── */
  .hero {
    height: 100svh;
    min-height: 700px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "topbar topbar"
      "headline diagram"
      "bottom bottom";
    padding: 0;
  }
  .hero-top-bar {
    grid-area: topbar;
    padding: 90px 64px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .hero-top-rule {
    display: none;
  }
  .hero-headline-block {
    grid-area: headline;
    padding: 0 32px 48px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero-word {
    font-size: clamp(52px, 6.2vw, 96px);
    line-height: .88;
    display: block;
  }
  .hero-bottom {
    grid-area: bottom;
    margin-top: 0;
    padding: 40px 64px 44px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: nowrap;
    border-top: 1.5px solid rgba(28,29,30,.12);
  }
  .hero-btn { font-size: 11px; padding: 14px 32px; }
  .hero-btn-text { font-size: 11px; }
  .hero-diagram {
    grid-area: diagram;
    padding: 16px 64px 16px 16px;
    position: relative;
  }
  #diagram-canvas { display: none; }
  #diagram-canvas-desktop { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }

  /* ── STATEMENT ── */
  .statement { padding: 100px 64px; }
  .statement-inner {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
  }
  .statement-h { font-size: clamp(52px, 6vw, 96px); }

  /* ── SERVICES ── */
  .services-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding: 72px 64px 48px;
  }
  .services-h { font-size: clamp(52px, 6vw, 96px); }
  .svc {
    grid-template-columns: 72px 1fr;
    padding: 0 64px;
    min-height: 110px;
  }
  .svc-body { padding: 32px 0 32px 40px; }
  .svc-name { font-size: clamp(24px, 2.8vw, 40px); }
  .svc-desc { font-size: 14px; max-width: 640px; }

  /* ── HOW ── */
  .how { padding: 100px 64px; }
  .how-top {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    margin-bottom: 56px;
    padding-bottom: 52px;
  }
  .how-h { font-size: clamp(44px, 5vw, 80px); white-space: nowrap; }
  .how-items { grid-template-columns: 1fr 1fr; }
  .how-item { padding: 32px 28px; }

  /* ── GROWTH GRAPHIC ── */
  .growth-graphic { height: 360px; }

  /* ── NEWSLETTER ── */
  .newsletter { padding: 80px 64px; flex-direction: row; align-items: center; gap: 60px; }
  .newsletter-top { flex-direction: row; align-items: center; justify-content: space-between; flex: 1; }
  .newsletter-h { font-size: clamp(32px, 3vw, 52px); white-space: nowrap; }
  .newsletter-sub { text-align: right; max-width: 280px; }
  .newsletter-form { max-width: 420px; flex-shrink: 0; }

  /* ── FAQ ── */
  .faq-top {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding: 80px 64px 48px;
    gap: 60px;
  }
  .faq-h { font-size: clamp(36px, 4vw, 72px); }
  .faq-q { padding: 28px 64px; }
  .faq-q-txt { font-size: clamp(15px, 1.4vw, 20px); }
  .faq-a-inner p { padding: 0 64px 32px; }

  /* ── CONTACT ── */
  .contact-top { padding: 80px 64px 56px; }
  .contact-h { font-size: clamp(52px, 7vw, 110px); }
  .contact-body { grid-template-columns: 1fr 1fr; }
  .contact-lhs { padding: 52px 64px; border-right: 2px solid rgba(193,192,183,.08); border-bottom: none; }
  .contact-rhs { padding: 52px 64px; }

  /* ── FOOTER ── */
  footer { padding: 28px 64px 24px; }
  .ft-top { max-width: 1200px; margin: 0 auto; }
  .ft-rule { max-width: 1200px; margin: 0 auto; }
  .ft-copy { max-width: 1200px; margin: 0 auto; }
}

/* ═══════════════════════════════════════
   WIDE DESKTOP — 1440px and up
═══════════════════════════════════════ */
@media (min-width: 1440px) {
  .hero { padding: 0 80px 80px; }
  .hero-top-bar { padding-top: 120px; }
  .statement { padding: 120px 80px; }
  .services-head { padding: 80px 80px 52px; }
  .svc { padding: 0 80px; }
  .how { padding: 120px 80px; }
  .newsletter { padding: 80px 80px; }
  .faq-top { padding: 80px 80px 52px; }
  .faq-q { padding: 28px 80px; }
  .faq-a-inner p { padding: 0 80px 32px; }
  .contact-top { padding: 80px 80px 56px; }
  .contact-lhs { padding: 60px 80px; }
  .contact-rhs { padding: 60px 80px; }
  footer { padding: 28px 80px 24px; }
}


/* CF7 overrides */
.wpcf7-form p { margin: 0 0 14px; }
.wpcf7-form br { display: none; }
.wpcf7-form label { display: block; }
.wpcf7-form .wpcf7-form-control-wrap { display: block; }

.wpcf7-form input:not([type="submit"]),
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  background: rgba(193,192,183,.04) !important;
  border: 1.5px solid rgba(193,192,183,.1) !important;
  color: var(--off) !important;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  padding: 14px 16px;
  outline: none;
  -webkit-appearance: none;
  border-radius: 0 !important;
  box-sizing: border-box;
  transition: border-color .2s, background .2s;
}
.wpcf7-form select { color: rgba(193,192,183,.45) !important; }
.wpcf7-form select option { background: var(--deep); color: var(--off); }
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: rgba(193,192,183,.45); font-weight: 300; }
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  border-color: var(--tan) !important;
  background: rgba(193,192,183,.07) !important;
}
.wpcf7-form textarea { resize: vertical; min-height: 50px!important; height: 100px!important;}

.wpcf7-form input[type="submit"] {
  width: 100%; margin-top: 6px;
  background: var(--tan) !important;
  color: var(--deep) !important;
  border: none !important;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase;
  padding: 17px; cursor: pointer;
  font-weight: 500;
  transition: background .18s;
  border-radius: 0 !important;
}
.wpcf7-form input[type="submit"]:hover { background: var(--off) !important; }
.wpcf7-form fieldset.hidden-fields-container {
  display: none;
}

.screen-reader-response{
    margin-bottom: 10px;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.8;
    color: rgba(193,192,183,.4);
}

.wpcf7-not-valid-tip{
    
    font-weight: 300;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(193,192,183,.4);
}