/* ==========================================================================
   Osai Consulting — styles
   Palette and type sampled from the original Canva site.
   ========================================================================== */

:root {
  --navy:        #020122;
  --green:       #00ce93;
  --mint:        #b4f0df;
  --mint-pale:   #dfeee7;
  --orange:      #ff5220;
  --orange-dark: #ef4514;
  --gray:        #e2e2e2;
  --white:       #ffffff;

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --script: "Dancing Script", cursive;

  --page: 1200px;
  --dot: radial-gradient(var(--navy) 1.6px, transparent 1.7px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--navy);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -0.02em; }

p { margin: 0 0 1.25rem; }

section { position: relative; overflow: hidden; }

.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 1rem 2.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.btn-orange { background: var(--orange); color: var(--white); }
.btn-orange:hover { background: var(--orange-dark); }

.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: #12113a; }

.btn-sm { padding: 0.7rem 1.6rem; font-size: 0.875rem; }

/* ---------- Header ---------- */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding: 1.75rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.logo { width: 118px; height: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.site-nav a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-nav a:not(.btn):hover { color: var(--green); }
.site-nav a:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }

/* The menu button only exists on narrow screens; see the media query below. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.nav-toggle-bars {
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }

/* ---------- Hero ---------- */
.hero {
  min-height: 92vh;
  display: grid;
  place-items: center;
  padding: 9rem 1.5rem 5rem;
  text-align: center;
  background: var(--white);
}
.hero-blob {
  position: absolute;
  top: -42%;
  right: -6%;
  width: 62vw;
  height: 85vh;
  background: var(--mint);
  border-radius: 0 0 50% 45%;
  z-index: 0;
}
.hero-dots {
  position: absolute;
  /* Starts below the header row so the nav links are not read through the
     dot pattern; the bottom edge stays where it was. */
  top: 104px;
  right: 0;
  width: 290px;
  height: 376px;
  background-image: var(--dot);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 95%);
          mask-image: linear-gradient(to bottom, #000 35%, transparent 95%);
  z-index: 1;
}
.hero-content { position: relative; z-index: 2; max-width: 900px; }

.hero h1 {
  font-size: clamp(2.15rem, 7.2vw, 5.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}
.hero-sub {
  margin: 1.75rem 0 2.75rem;
  color: var(--green);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ---------- Founder ---------- */
.founder {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  background: #000;
}
.founder-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% top;
  filter: grayscale(1);
}
.founder-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.85) 36%, rgba(0,0,0,0.2) 62%, transparent 76%);
}
.founder-text {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin-left: max(2rem, calc((100vw - var(--page)) / 2));
  padding: 4.5rem 1.5rem;
  color: var(--white);
}
.founder-text p {
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
  max-width: 34ch;
}
.signature { margin-top: 3rem; }
.signature-name {
  display: block;
  font-family: var(--script);
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  font-weight: 500;
  line-height: 1;
}
.signature-role {
  display: inline-block;
  margin-top: 0.5rem;
  margin-left: 3.5rem;
  color: var(--green);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Why work with us ---------- */
.why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: var(--page);
  margin: 0 auto;
  padding: 7rem 1.5rem;
}
.why-images { position: relative; min-height: 560px; }
.why-img {
  position: absolute;
  border: 5px solid var(--green);
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(2, 1, 34, 0.12);
}
.why-img-1 { width: 54%; aspect-ratio: 3/4;   top: 4%;  left: 2%;  z-index: 1; }
.why-img-2 { width: 50%; aspect-ratio: 4/3;   top: 34%; left: 44%; z-index: 3; }
.why-img-3 { width: 52%; aspect-ratio: 3/4;   top: 48%; left: 16%; z-index: 2; }

.dots {
  position: absolute;
  background-image: var(--dot);
  background-size: 26px 26px;
}
.dots-top    { top: 0;   left: 44%; width: 200px; height: 330px; }
.dots-bottom { bottom: -4%; left: 2%; width: 180px; height: 300px;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 30%, transparent 92%); }

.why-text h2 {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  font-weight: 800;
  margin-bottom: 1.75rem;
}
.why-text p { font-size: 1.25rem; }
.why-text .btn { margin-top: 1.25rem; }

/* ---------- Our services ---------- */
.services {
  background: linear-gradient(180deg, var(--mint) 0%, #9fe6cd 100%);
  padding: 5rem 1.5rem 7rem;
}
.services-head { max-width: var(--page); margin: 0 auto 4.5rem; }
.services h2 {
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  font-weight: 800;
}
.services-quote { font-size: clamp(1.05rem, 2vw, 1.5rem); margin-top: 0.5rem; }

.service-cards {
  max-width: var(--page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem;
}
.service-card {
  position: relative;
  background: var(--white);
  border: 5px solid var(--green);
  border-radius: 180px 180px 6px 6px;
  padding: 5rem 1.75rem 3rem;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  text-align: center;
  box-shadow: 14px 14px 0 var(--navy);
}
.service-icon { width: 92px; margin-bottom: -0.5rem; }
.service-card h3 {
  font-size: 1.85rem;
  font-weight: 800;
}
.service-card p { font-size: 1.0625rem; max-width: 22ch; margin: 0; }

/* ---------- Technical strategy ---------- */
.technical {
  max-width: var(--page);
  margin: 0 auto;
  padding: 6rem 1.5rem 7rem;
}
.technical h2 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  margin-bottom: 4rem;
}
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 4rem;
  margin-bottom: 4rem;
}
.tech-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 1.25rem;
}
.tech-card.outlined { border: 3px solid var(--orange); }
.tech-card h3 {
  font-size: 1.5rem;
  font-weight: 800;
  padding: 0.75rem 0 1.25rem;
}
.tech-card p {
  background: var(--mint-pale);
  margin: 0;
  padding: 1.5rem 1.25rem;
  font-size: 1.0625rem;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- People strategy ---------- */
.people {
  background: var(--mint-pale);
  padding: 5rem 1.5rem 7rem;
}
.people-blob {
  position: absolute;
  top: -12%;
  left: 38%;
  width: 46vw;
  height: 60vh;
  background: var(--mint);
  border-radius: 50% 40% 45% 55%;
}
.people-dots {
  position: absolute;
  top: 2%;
  left: 52%;
  width: 180px;
  height: 200px;
  background-image: radial-gradient(var(--white) 2px, transparent 2.2px);
  background-size: 26px 26px;
}
.people h2 {
  position: relative;
  z-index: 2;
  max-width: var(--page);
  margin: 0 auto 3rem;
  text-align: center;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
}
.people-body {
  position: relative;
  z-index: 2;
  max-width: var(--page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.people-photo { width: 100%; }
.people-text { text-align: center; }
.people-text p { font-size: clamp(1.05rem, 1.8vw, 1.4rem); }
.people-text .btn { margin-top: 1.5rem; }

/* ---------- Creative strategy ---------- */
.creative {
  background: var(--navy);
  color: var(--white);
  padding: 6rem 1.5rem 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 100%;
}
/* Dot spiral: the original's decoration is one spiral-of-dots SVG drawn three
   times (green outer, pale mid and inner) at different sizes, each slowly
   breathing in and out. Periods are deliberately mismatched so the three
   layers drift against each other and the pattern never visibly repeats. */
.creative-dots {
  position: absolute;
  top: 88px;
  left: 0;
  width: 294px;
  height: 294px;
  z-index: 1;
  pointer-events: none;
}

/* Geometry copied from the original: the green ring is centred 37px to the
   left of the two pale rings, all three sharing one vertical centre. Sizes
   are the original's 415 / 266 / 228 expressed against the green ring. */
.dot-spiral {
  --dx: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  transform: translate(calc(-50% + var(--dx)), -50%);
  transform-origin: 50% 50%;
}
/* Each ring animates differently, as on the original:
     outer  — spins clockwise, measured at 17.8 deg/s (20.2s per turn)
     middle — fades, opacity 1 <-> 0.35 on a 1100ms cycle
     inner  — pulses, scale 0.85 <-> 1.15 on a 901ms cycle
   `alternate` halves each cycle, so the durations below are half the measured
   full-cycle period. */
/* Sizes are the rings' true layout sizes on the original (294 / 233 / 187).
   Do not take these from getBoundingClientRect: two of the rings rotate, and
   a rotating square's bounding box is up to sqrt(2) larger than the element,
   which inflates the reading. The middle ring also carries a static 8 degree
   tilt, visible as its 266 bounding box against a 233 layout width. */
.dot-spiral-outer { width: 294px; animation: dot-spin 20.2s linear infinite; }
.dot-spiral-mid   { width: 233px; --dx: 37px; --tilt: 8deg;
                    transform: translate(calc(-50% + var(--dx)), -50%) rotate(var(--tilt));
                    animation: dot-fade 550ms ease-in-out infinite alternate; }
/* The inner ring both spins and pulses. Two animations cannot share one
   transform, so the wrapper carries the spin and the image inside carries the
   pulse, letting the 20.2s rotation and 450ms scale run independently. */
.dot-spiral-inner { width: 187px; --dx: 37px; display: block; animation: dot-spin 20.2s linear infinite; }
.dot-spiral-inner > img { display: block; width: 100%; height: auto;
  animation: dot-pulse 450ms ease-in-out infinite alternate; }

@keyframes dot-spin {
  from { transform: translate(calc(-50% + var(--dx)), -50%) rotate(0deg); }
  to   { transform: translate(calc(-50% + var(--dx)), -50%) rotate(360deg); }
}
@keyframes dot-fade {
  from { opacity: 1; }
  to   { opacity: 0.35; }
}
@keyframes dot-pulse {
  from { transform: scale(0.85); }
  to   { transform: scale(1.15); }
}

/* Reduced motion: the original has no such guard and animates for everyone.
   Rather than freezing the rings, slow each behaviour right down and shrink
   its range. Set `animation: none` here to stop them completely. */
@media (prefers-reduced-motion: reduce) {
  .dot-spiral-outer,
  .dot-spiral-inner     { animation-duration: 120s; }
  .dot-spiral-mid       { animation: dot-fade-calm 6s ease-in-out infinite alternate; }
  .dot-spiral-inner > img { animation: dot-pulse-calm 7s ease-in-out infinite alternate; }

  @keyframes dot-fade-calm {
    from { opacity: 1; }
    to   { opacity: 0.85; }
  }
  @keyframes dot-pulse-calm {
    from { transform: scale(0.98); }
    to   { transform: scale(1.02); }
  }
}
.creative-left {
  position: relative;
  z-index: 2;
  padding-left: max(1rem, calc((100vw - var(--page)) / 2));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.creative-stack { display: grid; margin-bottom: 2.5rem; }
.creative-title {
  font-size: clamp(2.25rem, 4.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.ghost-1 { color: #6f6f88; }
.ghost-2 { color: #1f5f52; }

.creative-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
  /* Wide enough to keep "Social Media Strategy" — the longest item — on one
     line at the desktop type size. */
  max-width: 580px;
}
.creative-list li {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.creative-right { position: relative; z-index: 2; min-height: 540px; }
.mock {
  position: absolute;
  border: 6px solid var(--green);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.mock-1 { width: 70%; top: 0;   left: 2%;  z-index: 1; }
.mock-2 { width: 42%; top: 14%; left: 58%; z-index: 3; }
.mock-3 { width: 60%; top: 40%; left: 10%; z-index: 4; }

.creative-cta {
  grid-column: 1 / -1;
  text-align: center;
  padding-top: 1rem;
  position: relative;
  z-index: 2;
}

/* ---------- Contact form ---------- */
.contact {
  background: var(--mint-pale);
  padding: 6rem 1.5rem 7rem;
}
.contact-inner { max-width: 680px; margin: 0 auto; }
.contact h2 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  margin-bottom: 1rem;
}
.contact-intro { font-size: 1.15rem; margin-bottom: 2.5rem; max-width: 52ch; }
.contact-intro a { color: inherit; font-weight: 700; }

.field { margin-bottom: 1.5rem; }
.field label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.field .optional { font-weight: 400; text-transform: none; opacity: 0.6; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 2px solid var(--navy);
  border-radius: 8px;
  background: var(--white);
  color: var(--navy);
  font-family: inherit;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.field textarea { resize: vertical; min-height: 120px; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

/* :user-invalid only matches once the visitor has actually interacted with the
   field, so a pristine form is never shown as full of errors. (:invalid would
   flag every empty required field on load, and :not(:placeholder-shown) does
   not help here because these inputs carry no placeholder.) Browsers without
   :user-invalid simply drop this rule and show no error styling. */
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid { border-color: var(--orange); }

.contact button[type="submit"] {
  border: none;
  cursor: pointer;
  font-family: inherit;
  margin-top: 0.5rem;
}

/* ---------- Thanks page ---------- */
/* Short page: stretch it so the footer sits at the bottom of the viewport
   rather than leaving bare space beneath it. */
.page-thanks { min-height: 100vh; display: flex; flex-direction: column; }
.page-thanks .thanks { flex: 1; }

.thanks {
  min-height: 72vh;
  display: grid;
  place-items: center;
  padding: 10rem 1.5rem 6rem;
  background: var(--mint-pale);
  text-align: center;
}
.thanks-inner { max-width: 620px; }
.thanks h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  margin-bottom: 1.25rem;
}
.thanks p { font-size: 1.15rem; margin-bottom: 2rem; }
.thanks a:not(.btn) { color: inherit; font-weight: 700; }

/* ---------- Text pages (Highlands, privacy) ---------- */
.page-inner { max-width: 860px; margin: 0 auto; }

.page-hero {
  background: var(--mint-pale);
  padding: 9rem 1.5rem 5rem;
}
.eyebrow {
  color: var(--green);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.page-hero h1 {
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 800;
  margin-bottom: 1.75rem;
}
.page-lede { font-size: clamp(1.125rem, 2vw, 1.4rem); font-weight: 600; max-width: 40ch; }
.page-note { font-size: 1.0625rem; max-width: 44ch; }
.page-hero .btn { margin-top: 1rem; }

.page-body { padding: 5rem 1.5rem 2rem; }
.page-body h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 800;
  margin: 3.5rem 0 1.5rem;
}
.page-body h2:first-child { margin-top: 0; }
.page-body p { font-size: 1.125rem; }

.hab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 2.5rem 0 1rem;
}
.hab-card { border: 3px solid var(--orange); padding: 1.5rem 1.25rem; }
.hab-card h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.9rem; }
.hab-card p { font-size: 1rem; margin: 0; }

.hab-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.hab-steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 4.25rem;
  margin-bottom: 2.5rem;
}
.hab-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.15rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-weight: 800;
  font-size: 1.35rem;
  display: grid;
  place-items: center;
}
.hab-steps h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.6rem; }

.hab-list { font-size: 1.125rem; padding-left: 1.25rem; margin: 0 0 1.5rem; }
.hab-list li { margin-bottom: 0.5rem; }

.hab-source {
  border-top: 2px solid var(--mint);
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  font-size: 1rem;
}
.hab-source a { color: inherit; font-weight: 700; }

.hab-cta {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 5rem 1.5rem 6rem;
}
.hab-cta h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; margin-bottom: 1rem; }
.hab-cta p { font-size: 1.125rem; margin-bottom: 2rem; }

/* ---------- Cookie consent ---------- */
.analytics-off-note {
  border-left: 5px solid var(--green);
  background: var(--mint-pale);
  padding: 1rem 1.25rem;
}
.consent {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--navy);
  color: var(--white);
  border-radius: 16px;
  padding: 1.35rem 1.6rem;
  box-shadow: 0 18px 50px rgba(2, 1, 34, 0.35);
}
.consent-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.consent-text a { color: var(--green); font-weight: 700; }
.consent-actions {
  display: flex;
  gap: 0.75rem;
  flex: none;
}
/* Decline has to be as easy to reach as accept — same size, same position,
   no visual nudge towards saying yes. */
.consent .btn { cursor: pointer; border: 2px solid transparent; font-family: inherit; }
.consent-no {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.consent-no:hover { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 640px) {
  .consent { flex-direction: column; align-items: stretch; gap: 1rem; }
  .consent-actions > .btn { flex: 1; }
}

.footer-legal { display: inline-flex; gap: 1.5rem; margin-left: 1.5rem; }
.footer-legal a { color: inherit; text-decoration: underline; }
.footer-legal a:hover { color: var(--green); }

@media (max-width: 560px) {
  .footer-bar .footer-legal { display: flex; justify-content: center; margin: 0.5rem 0 0; }
}

/* ---------- 404 ---------- */
/* Needs the .thanks prefix: `.thanks p` would otherwise win on specificity
   and this would render at body size. */
.thanks .four-oh-four {
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 800;
  line-height: 1;
  /* The brand green washes out on the pale mint background; this is the
     deeper green already used for the Creative Strategy ghost type. */
  color: #1f5f52;
  margin-bottom: 0.5rem;
  letter-spacing: -0.04em;
}
.notfound-links {
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
  font-size: 1.05rem;
  font-weight: 700;
}
.notfound-links a { color: var(--navy); }

/* ---------- Footer ---------- */
footer { background: var(--gray); }
.footer-main {
  max-width: var(--page);
  margin: 0 auto;
  padding: 4.5rem 1.5rem 3.5rem;
}
.footer-logo { width: 190px; }
.footer-tagline {
  color: var(--green);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 600;
  margin: 1.5rem 0 3rem;
}
.footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-contact li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.65rem;
  font-size: 1.25rem;
  text-transform: uppercase;
}
.footer-contact svg { width: 26px; height: 26px; flex: none; }
.footer-contact a { color: inherit; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }

.footer-bar {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 1.1rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .service-cards { grid-template-columns: 1fr; max-width: 420px; gap: 2.5rem; }
  .tech-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
  .creative { grid-template-columns: 1fr; }
  .creative-left { padding-left: 1rem; }
  .creative-list { text-align: left; }
  .creative-right { min-height: 460px; margin-top: 2rem; }
}

@media (max-width: 820px) {
  .hab-grid { grid-template-columns: 1fr; }
  .page-hero { padding-top: 7rem; }
  .why { grid-template-columns: 1fr; gap: 3rem; padding: 4.5rem 1.5rem; }
  .why-images { min-height: 480px; }
  .people-body { grid-template-columns: 1fr; gap: 2.5rem; }
  .people-photo { max-width: 460px; margin: 0 auto; }
  .founder { min-height: auto; }
  .founder-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.88) 45%);
  }
  .founder-text { margin-left: 0; padding: 12rem 1.5rem 4rem; }
  .founder-text p { max-width: none; }
  .signature-role { margin-left: 2rem; }
}

@media (max-width: 900px) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 2.5rem;
    left: 2.5rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border: 2px solid var(--navy);
    border-radius: 14px;
    padding: 0.5rem;
    box-shadow: 0 18px 40px rgba(2, 1, 34, 0.18);
  }
  .js .site-header.nav-open .site-nav { display: flex; }
  .js .site-nav a { padding: 0.85rem 1rem; text-align: center; }
  .js .site-nav a.btn { margin-top: 0.35rem; }
}

@media (max-width: 560px) {
  .js .site-nav { right: 1.5rem; left: 1.5rem; }
  .site-header { padding: 1.25rem 1.5rem; }
  .logo { width: 96px; }
  .hero { padding: 7rem 1.25rem 4rem; min-height: 86vh; }
  .hero-blob { width: 105vw; right: -20%; top: -30%; height: 58vh; }
  .hero-dots { width: 150px; height: 300px; background-size: 24px 24px; }
  .btn { padding: 0.9rem 2rem; font-size: 0.9375rem; }
  .tech-grid { grid-template-columns: 1fr; }
  .why-images { min-height: 400px; }
  .dots-top, .dots-bottom { display: none; }
  .creative-right { min-height: 380px; }
  .mock-1 { width: 80%; }
  .mock-2 { width: 52%; left: 46%; }
  .mock-3 { width: 72%; }
  .footer-contact li { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}

/* ==========================================================================
   Scroll reveal
   Matches the original site: fade in while sliding 80px in from the left.
   Timing measured off the live Canva site — 500ms, ease-out-quad.
   Gated on .js so the content is never hidden if JavaScript doesn't run.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateX(-80px);
  transition:
    opacity   500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slight stagger so grouped elements arrive in sequence rather than as a block */
.js .reveal[data-reveal-order="1"] { transition-delay: 80ms; }
.js .reveal[data-reveal-order="2"] { transition-delay: 160ms; }
.js .reveal[data-reveal-order="3"] { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}