/* Poppins, served from this site (was Google Fonts). Same files, same subsets. */

/* Backup font sized to match Poppins, so the page doesn't jump if Poppins
   arrives a moment after the first paint. Only shown for that split second. */
@font-face {
  font-family: 'Poppins Fallback';
  font-weight: 100 500;
  src: local('Arial'), local('ArialMT');
  size-adjust: 113.17%; ascent-override: 92.78%; descent-override: 30.93%; line-gap-override: 8.84%;
}
@font-face {
  font-family: 'Poppins Fallback';
  font-weight: 600 900;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 106.44%; ascent-override: 98.65%; descent-override: 32.88%; line-gap-override: 9.4%;
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-400-italic-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-400-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-500-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-600-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   Suhair Sayed portfolio
   Layout + motion rebuilt from the "Pratham" inspiration site
   (Nayla theme on Elementor). Desktop sizes are written in
   "design pixels" for a 1440px wide screen and scaled with --u.
   ========================================================= */

:root {
  --u: min(1px, calc(100vw / 1440));
  --cream: #F2E7DA;
  --name: #A4988B;
  --brown: #4A443E;
  --brown-dark: #452800;
  --orange: #FF8200;
  --orange-2: #FF7B00;
  --black: #000;
  --white: #fff;
  --cursor: #191919;
  --font: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: #191919;
  background: var(--cream);
  overflow-x: hidden;
}

#page {
  background-color: transparent;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
p, h1, h2, h3, h4 { margin: 0; }

.section { position: relative; }

/* Elementor Motion Effects element: widgets ease over 100ms,
   containers over 1s with Elementor's own curve */
[data-fx] { transition: transform .1s; will-change: transform; }
[data-fx].fx-slow { transition: transform 1s cubic-bezier(0, .33, .07, 1.03); }

/* =========================================================
   Mouse cursor
   ========================================================= */
#mouseCursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 15px;
  height: 15px;
  pointer-events: none;
  overflow: hidden;
  border-radius: 50%;
  transition: width .2s ease-out, height .2s ease-out, opacity .2s ease-out;
  opacity: 0;
}
#mouseCursor.is-ready { opacity: 1; }
#mouseCursor > svg { width: 100%; height: 100%; display: block; }
#mouseCursor .main-circle { fill: var(--cursor); transition: fill .3s ease; }
#mouseCursor.on-dark .main-circle { fill: #EBEBEB; }
#mouseCursor.hover-size { width: 150px; height: 150px; opacity: .25; }
#mouseCursor.hover-icon,
#mouseCursor.hover-text { opacity: 1; }

.cursor-icon-arrow,
.cursor-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--cursor-ink, #fff);
  line-height: 1.4;
  text-align: center;
  overflow: hidden;
}
.cursor-icon-arrow { width: 34px; height: 34px; opacity: 0; transition: opacity .3s ease; }
.cursor-icon-arrow svg { width: 100%; height: 100%; fill: currentColor; }
#mouseCursor.hover-icon .cursor-icon-arrow { opacity: 1; }
.cursor-text { font-size: 15px; white-space: nowrap; }
.cursor-text span { display: block; transform: translateY(24px); transition: transform .3s ease; }
#mouseCursor.hover-text .cursor-text span { transform: translateY(0); }

@media (hover: none), (pointer: coarse) {
  #mouseCursor { display: none; }
}

/* =========================================================
   Buttons (Nayla "fill" button)
   ========================================================= */
.btn-fill {
  --bg: var(--brown-dark);
  --bg-hover: var(--brown-dark);
  --ink: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  border-radius: 2em;
  padding: 1em 2.9em 1em 1.75em;
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  line-height: 1.2;
  white-space: nowrap;
  transition: padding .4s ease;
}
.btn-fill::before,
.btn-fill::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: -1;
  transition: height .3s ease;
}
.btn-fill::before { height: 100%; background: var(--bg); }
.btn-fill::after { height: 0; background: var(--bg-hover); }
.btn-fill:hover::after { height: 100%; }
.btn-fill:hover { padding: 1em 1.75em 1em 2.9em; }
.btn-arrow {
  position: absolute;
  top: 50%;
  right: 1.2em;
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  transition: right .4s ease, left .4s ease;
}
.btn-fill:hover .btn-arrow { right: calc(100% - 2.2em); }
.btn-arrow svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.btn-orange { --bg: var(--orange-2); --bg-hover: var(--orange-2); }

/* =========================================================
   Header (black pill, hides on scroll down)
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding-top: max(1vw, 12px);
  pointer-events: none;
}
.nav-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  background: #000;
  border-radius: 100px;
  padding: 7px 7px 7px 30px;
}
.nav-links {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  position: relative;
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  line-height: 1.6;
  white-space: nowrap;
}
.nav-links a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width .35s ease;
}
.nav-links a:hover::before { width: 100%; }
.nav-cv { font-size: 15px; padding: .85em 2.6em .85em 1.5em; }
.nav-cv:hover { padding: .85em 1.5em .85em 2.6em; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero-name-row {
  position: relative;
  z-index: 2;
  padding: 10px;
  margin-bottom: calc(-215 * var(--u));
}
.hero-name {
  font-size: calc(300 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: calc(-25 * var(--u));
  color: var(--name);
  text-align: center;
}
.hero-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  column-gap: 20px;
}
.hero-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  padding: 10px;
}
.hero-col-mid {
  padding: 0;
  align-items: center;
}
.hero-intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-left: calc(50 * var(--u));
}
.hero-hello {
  font-size: calc(32 * var(--u));
  font-weight: 600;
  line-height: 1;
  color: var(--brown);
  transform: translateY(calc(200 * var(--u)));
}
.hero-fullname {
  font-size: calc(48 * var(--u));
  font-weight: 600;
  line-height: 1;
  color: #000;
  white-space: nowrap;
  transform: translateY(calc(180 * var(--u)));
}
.hero-tagline {
  font-size: max(12px, calc(16 * var(--u)));
  line-height: 1.375;
  letter-spacing: -.5px;
  color: var(--brown);
  transform: translateY(calc(170 * var(--u)));
}

.flower-wrap { position: relative; transform-origin: left center; }
.flower { width: 100%; margin: 0 auto; user-select: none; -webkit-user-drag: none; }
.fl-1 { z-index: 75;  --sx: calc(300 * var(--u)); }
.fl-1 .flower { max-width: 53%; }
.fl-2 { z-index: 200; --sx: calc(183 * var(--u)); --sy: calc(-50 * var(--u)); }
.fl-2 .flower { max-width: 83%; }
.fl-3 { z-index: 75;  --sx: calc(-280 * var(--u)); }
.fl-3 .flower { max-width: 69%; }
.fl-4 { z-index: 200; --sx: calc(-175 * var(--u)); }
.fl-4 .flower { max-width: 55%; margin: 0; }

.hero-photo {
  position: relative;
  z-index: 100;
  height: calc(700 * var(--u));
  width: auto;
  max-width: none;
  /* white "sticker" outline + fade into the background, like the original cut-out */
  filter: drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 58%, transparent 96%);
}

/* =========================================================
   ABOUT
   ========================================================= */
.about {
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 10px;
}
.about-text {
  width: min(910px, 92vw);
  transform-origin: center center;
}
.about-text p {
  font-size: 24px;
  line-height: 37px;
  text-align: center;
  color: #191919;
}
.words-collapse .anim_word { display: inline-block; will-change: transform, opacity; }
.about-btn { transform-origin: center center; padding-top: 10px; }

/* "Read more about me": quiet text link, opens the full story in place */
.about-more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: -4px;
  padding: 6px 2px;
  background: none;
  border: 0;
  font: 500 15px/1.4 var(--font);
  color: var(--brown);
  cursor: pointer;
}
.about-more-label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(74, 68, 62, .45);
  transition: color .3s, text-decoration-color .3s;
}
.about-more-arrow {
  width: 15px;
  height: 15px;
  fill: currentColor;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.about-more-link:hover .about-more-label,
.about-more-link:focus-visible .about-more-label { color: var(--orange); text-decoration-color: var(--orange); }
.about-more-link:hover .about-more-arrow { transform: translateY(2px); }
.about-more-link[aria-expanded="true"] .about-more-arrow { transform: rotate(180deg); }
.about-more-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }

.about-full { width: min(720px, 92vw); overflow: hidden; }
.about-full-inner { padding: 10px 0 18px; }
.about-full p {
  font-size: 18px;
  line-height: 30px;
  color: var(--brown);
  text-align: left;
}
.about-full p + p { margin-top: 18px; }
.about-full .about-full-close { color: #191919; font-weight: 500; }

/* =========================================================
   SERVICES ("What I can help you with?")
   ========================================================= */
.services {
  min-height: 886px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.services-inner {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  gap: 20px;
}
.services-title {
  position: relative;
  z-index: 0;
  font-size: calc(90 * var(--u));
  font-weight: 600;
  line-height: calc(82 * var(--u));
  letter-spacing: calc(-5 * var(--u));
  color: var(--name);
  text-align: center;
  transform-origin: center center;
}
.services-row {
  display: flex;
  justify-content: center;
  gap: calc(28 * var(--u));
  padding: 0 10%;
  margin-top: calc(60 * var(--u)); /* with the 20px gap: same title-to-content space as Clients */
}
.service-card {
  position: relative;
  flex: 1 1 0;
  min-height: 53vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  border-radius: 7%;
  box-shadow: 0 0 8px rgba(0, 0, 0, .24);
  text-decoration: none;
  transform-origin: center center;
}
.service-card.g-blue   { background-image: linear-gradient(90deg, #022CB0 0%, #00C6FF 100%); }
.service-card.g-green  { background-image: linear-gradient(90deg, #00B160 0%, #01B0EA 100%); }
.service-card.g-pink   { background-image: linear-gradient(90deg, #F728AC 0%, #FB662E 100%); }
.service-card.g-orange { background-image: linear-gradient(-90deg, #FE5914 0%, #FFF10A 100%); }
.service-icon {
  min-height: 42vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 7% 7% 7% 7% / 9% 9% 9% 9%;
}
.service-icon img { width: 80%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.service-card:hover .service-icon img { transform: scale(1.06) rotate(-4deg); }
.service-label {
  padding: 0 8px 8%;
  font-size: max(15px, calc(24 * var(--u)));
  font-weight: 500;
  line-height: 1.17;
  color: #fff;
  text-align: center;
}

/* =========================================================
   PROJECTS (sticky title, work flies past with blur)
   ========================================================= */
.projects {
  min-height: 990px;
  display: flex;
  flex-direction: column;
}
.projects-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.projects-title {
  font-size: calc(200 * var(--u));
  font-weight: 600;
  line-height: calc(180 * var(--u));
  letter-spacing: calc(-13 * var(--u));
  color: #EAEAEA;
  text-align: center;
}
.chars-up .anim_line { overflow: hidden; padding: 0 .08em .06em; margin: 0 -.08em -.06em; }
.chars-up .anim_char { display: inline-block; }
.projects-stage { display: flex; flex-direction: column; }
.projects-row {
  position: relative;
  z-index: 2000;
  display: flex;
  justify-content: center;
  margin-bottom: 200px;
}
.p-col { flex: 0 0 20%; display: flex; flex-direction: column; scroll-margin-top: 10vh; }
.p-col-side { flex-basis: 10%; }
.spacer { height: calc(var(--sp) * 1vh); flex: none; }
.folder { width: 100%; }
.folder img { width: var(--fw, 100%); max-width: none; user-select: none; }
.work {
  margin: 0;
  width: 100%;
}
.work.w-90 { width: 90%; }
.work.w-110 { width: 110%; }
.work.w-120 { width: 120%; }
.work.w-130 { width: 130%; }
.work img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35);
}
.work figcaption {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 14px;
  border-radius: 100px;
  background: #000;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
}

/* ---------- Selected Work: results cards ---------- */
.results {
  position: relative;
  z-index: 2001;
  width: min(1240px, 90%);
  margin: 0 auto;
  padding-bottom: 180px;
}
.results-head { text-align: center; margin-bottom: calc(70 * var(--u)); }
.results-eyebrow {
  display: inline-block;
  margin-bottom: 20px;
  padding: 7px 16px;
  border: 1px solid rgba(255, 130, 0, .45);
  border-radius: 100px;
  color: var(--orange);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.results-title {
  font-size: calc(72 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: #191919;
}
.results-grid {
  max-width: 1054px; /* 15% smaller than the full 1240px row */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.result-card { perspective: 1000px; }
.result-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 34px 31px 30px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 15px;
  background: linear-gradient(160deg, #1f1d1b 0%, #121212 60%);
  color: #EBEBEB;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .45);
  transition: border-color .5s ease, box-shadow .6s ease;
  will-change: transform;
}
.result-glare {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 178, 30, .2), transparent 60%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.result-card:hover .result-inner {
  border-color: rgba(255, 178, 30, .35);
  box-shadow: 0 40px 70px -30px rgba(255, 130, 0, .45);
}
.result-card:hover .result-glare { opacity: 1; }
.result-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-height: 37px;
}
.result-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #9C9C9C;
}
.result-tag span { color: var(--orange); }
.result-logo {
  flex: none;
  height: 34px;
  width: auto;
  max-width: 82px;
  object-fit: contain;
  opacity: .35;
  transition: opacity .5s ease;
}
.result-card:hover .result-logo { opacity: .95; }
.result-title {
  margin: 19px 0 14px;
  font-size: max(24px, calc(32 * var(--u)));
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff;
}
.result-line {
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: #A8A29C;
}
.result-label {
  margin: 26px 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #FFB21E;
}
.result-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.result-stats li {
  position: relative;
  padding-left: 17px;
  font-size: 14px;
  color: #A8A29C;
}
.result-stats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.result-stats strong { color: #fff; font-weight: 600; }

/* =========================================================
   TOOLKIT (draggable cards) + UK CASE FILES
   ========================================================= */
.toolkit {
  min-height: 998px;
  padding-bottom: 220px; /* room for the bottom row of cards before Contact */
  color: #EBEBEB;
}
.toolkit-head { padding: 150px 10px 10px; }
.toolkit-title {
  position: relative;
  z-index: 0;
  font-size: calc(94 * var(--u));
  font-weight: 600;
  line-height: calc(90 * var(--u));
  letter-spacing: calc(-3 * var(--u));
  color: #262626;
  text-align: center;
  transform-origin: center center;
}
.toolkit-tables { margin-top: -110px; }
.showcase-table {
  position: relative;
  width: 100%;
  height: 100vh;
}
.showcase-table + .showcase-table { margin-top: -100px; }
.st-wrapper { position: absolute; inset: 0; }
.tool-card {
  position: absolute;
  top: 100vh;
  left: 50vw;
  width: 14vw;
  padding: .65em .65em 0;
  border-radius: 10px;
  background: #fff;
  color: #191919;
  box-shadow: -1px 0 10px -2px rgba(0, 0, 0, .1);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.tool-card:active { cursor: grabbing; }
.tool-img {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
}
.tool-img img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tool-name {
  padding: .7em .2em .9em;
  font-size: max(11px, calc(14 * var(--u)));
  font-weight: 500;
  line-height: 1.2;
}
.tool-img.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FBF5EC;
}
.tool-img.logo img { width: 58%; height: 58%; object-fit: contain; }
.tool-img.logo-lg img { width: 70%; height: 70%; }
.tool-img.logo-round img { border-radius: 22%; }
.tool-img.logo-wide img { width: 82%; }
.tool-img.logo-dark { background: #1F1E1D; }
.tool-img.logo-lift img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .12)); }

.uk {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 0 140px;
  overflow: hidden;
}
.uk-title {
  font-size: calc(200 * var(--u));
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  color: #EBEBEB;
  white-space: nowrap;
  padding: 0 0 0 10px;
}
.uk-title .anim_line { white-space: nowrap; }
.uk-sub {
  margin: 28px auto 54px;
  width: 80%;
  font-size: max(16px, calc(20 * var(--u)));
  color: #9C9C9C;
}
.uk-grid {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.case-tile {
  position: relative;
  aspect-ratio: 16 / 10.5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(34 * var(--u)) calc(38 * var(--u));
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.case-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.case-tile:hover::before { transform: scale(1.06); }
.case-teffie { color: #2b1700; }
.case-teffie::before {
  background:
    radial-gradient(70% 80% at 100% 100%, rgba(57, 37, 23, .32), transparent 70%), /* small touch of Teffie cocoa */
    radial-gradient(120% 90% at 85% 15%, #FFE07A 0%, #FFB21E 45%, #FF8200 100%);
}
.case-molly { color: #F2E7DA; }
.case-molly::before {
  background:
    radial-gradient(70% 80% at 100% 100%, rgba(210, 125, 150, .38), transparent 70%), /* small touch of Molly Maid rose */
    radial-gradient(120% 90% at 85% 15%, #6d6257 0%, #3b342e 50%, #1d1a17 100%);
}
.case-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #D27D96;
  vertical-align: 1px;
}
.case-dot-teffie { background: #392517; }
.case-top { display: flex; gap: 8px; }
.case-chip {
  padding: 6px 14px;
  border: 1px solid currentColor;
  border-radius: 100px;
  font-size: 13px;
  line-height: 1.2;
}
.case-name {
  font-size: calc(96 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}
.case-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: max(15px, calc(18 * var(--u)));
  font-weight: 500;
}
.case-arrow {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: currentColor;
  transition: transform .4s ease;
}
.case-arrow svg { width: 22px; height: 22px; }
.case-teffie .case-arrow svg { fill: #FFB21E; }
.case-molly .case-arrow svg { fill: #2b2621; }
.case-tile:hover .case-arrow { transform: rotate(45deg); }

/* =========================================================
   CLIENTS (logo cloud, two rows of four)
   ========================================================= */
.clients {
  position: relative;
  padding: 150px 0 160px;
  overflow: hidden;
  isolation: isolate;
}
.clients-head { padding: 0 10px; text-align: center; }
.clients-head-inner { transform-origin: center center; }
.clients-eyebrow {
  display: inline-block;
  margin-bottom: 22px;
  padding: 7px 16px;
  border: 1px solid rgba(255, 178, 30, .5);
  border-radius: 100px;
  color: #FFB21E;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.clients-title {
  position: relative;
  z-index: 0;
  font-size: calc(90 * var(--u));
  font-weight: 600;
  line-height: calc(82 * var(--u));
  letter-spacing: calc(-5 * var(--u));
  color: var(--cream);
  text-align: center;
  transform-origin: center center;
}
.clients-grid {
  width: 80%;
  margin: calc(80 * var(--u)) auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-left: 1px solid rgba(255, 255, 255, .12);
}
.client {
  position: relative;
  aspect-ratio: 1.45 / 1;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  overflow: hidden;
}
.client::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 55%, rgba(255, 178, 30, .22), transparent 70%);
  opacity: 0;
  transition: opacity .6s ease;
}
.client-logo {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
.client img {
  position: relative;
  width: auto;
  height: calc(var(--h) * var(--u) * .8);
  max-width: 61%;
  object-fit: contain;
  opacity: .78;
  transition: opacity .5s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
  user-select: none;
}
.client:hover::before { opacity: 1; }
.client:hover img { opacity: 1; transform: scale(1.06); }

/* =========================================================
   TESTIMONIALS (scroll card stack)
   Without JS or with reduced motion the cards sit side by side.
   main.js adds .is-stacked to turn on the pinned stack.
   ========================================================= */
.testimonials { padding: 150px 0 120px; overflow: clip; }
.testi-head { padding: 0 10px; }
.testi-title {
  position: relative;
  z-index: 0;
  font-size: calc(90 * var(--u));
  font-weight: 600;
  line-height: calc(82 * var(--u));
  letter-spacing: calc(-5 * var(--u));
  color: var(--name);
  text-align: center;
  transform-origin: center center;
}
.testi-sub {
  margin: 22px auto 0;
  max-width: 460px;
  text-align: center;
  font-size: max(15px, calc(18 * var(--u)));
  color: var(--brown);
}
.testi-scroll { position: relative; }
.testi-sticky { padding: 60px 20px 0; }
.testi-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.testi-card {
  position: relative;
  width: min(380px, 100%);
  min-height: 470px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 44px 34px 34px;
  border-radius: 10px;
  background: #fff;
  color: #191919;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow: -1px 0 10px -2px rgba(0, 0, 0, .1);
}
.testi-card.t-cream { background: #FFF6E3; }
.testi-flower {
  position: absolute;
  z-index: -1;
  width: 150px;
  right: -42px;
  top: -42px;
  opacity: .9;
  pointer-events: none;
}
.testi-stars { display: flex; gap: 3px; color: #FFB21E; }
.testi-stars svg { width: 18px; height: 18px; fill: currentColor; }
.testi-quote {
  margin: 0;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: #262626;
}
.testi-person { display: flex; align-items: center; gap: 14px; text-align: left; }
.testi-avatar {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
}
.testi-alby .testi-avatar { background: var(--brown); }
.testi-mirajul .testi-avatar { background: #FFB21E; color: #2b1700; }
.testi-pakhshal .testi-avatar { background: var(--brown-dark); }
.testi-name { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.testi-role { display: block; font-size: 14px; color: #6b6259; }

/* pinned stack (motion on) */
.testimonials.is-stacked { padding-bottom: 0; }
.is-stacked .testi-scroll { height: 380vh; margin-top: -16vh; }
.is-stacked .testi-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: 0 20px;
  display: grid;
  place-items: center;
}
.is-stacked .testi-stack {
  position: relative;
  display: block;
  width: min(380px, 100%);
  height: 470px;
  perspective: 1000px;
}
.is-stacked .testi-card {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform, filter;
  backface-visibility: hidden;
  box-shadow: none;
}

/* =========================================================
   EDUCATION AND CERTIFICATIONS
   A sunflower-stem timeline that fills as you scroll,
   then certificate cards.
   ========================================================= */
.education { padding: 150px 0 170px; overflow: hidden; }
.edu-head { padding: 0 10px; }
.edu-title {
  position: relative;
  z-index: 0;
  font-size: calc(90 * var(--u));
  font-weight: 600;
  line-height: calc(82 * var(--u));
  letter-spacing: calc(-5 * var(--u));
  color: var(--name);
  text-align: center;
  transform-origin: center center;
}
.edu-timeline {
  position: relative;
  width: min(1100px, 84%);
  margin: calc(100 * var(--u)) auto 0;
}
.edu-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: #EFE6DA;
  overflow: hidden;
}
.edu-line-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #FFB21E, #FF8200 60%, #6B8E23);
  transform-origin: top center;
  transform: scaleY(var(--fill, 1));
}
.edu-list { list-style: none; margin: 0; padding: 0; }
.edu-item {
  position: relative;
  display: flex;
  padding: 30px 0;
}
.edu-left { justify-content: flex-start; }
.edu-right { justify-content: flex-end; }
.edu-node {
  position: absolute;
  left: 50%;
  top: 58px;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px #fff, 0 6px 18px rgba(0, 0, 0, .1);
  z-index: 2;
}
.edu-emoji {
  display: block;
  font-size: 28px;
  line-height: 1;
  filter: grayscale(1) opacity(.45);
  transform: rotate(-25deg) scale(.8);
  transition: filter .8s ease, transform 1.2s cubic-bezier(.16, 1, .3, 1);
}
.edu-item.is-lit .edu-emoji { filter: none; transform: rotate(0) scale(1); }
/* the whole card (logo, year pill, capsules) stays grey until the line reaches its emoji */
.edu-card { filter: grayscale(1); transition: filter 1.2s ease; }
.edu-item.is-lit .edu-card { filter: grayscale(0); }
.edu-card {
  position: relative;
  width: calc(50% - 64px);
  padding: 34px 36px 32px;
  border-radius: 10px;
  background: #FBF5EC;
  color: #191919;
}
.edu-card::after {
  content: "";
  position: absolute;
  top: 76px;
  width: 16px;
  height: 16px;
  background: #FBF5EC;
  transform: rotate(45deg);
}
.edu-left .edu-card::after { right: -8px; }
.edu-right .edu-card::after { left: -8px; }
.edu-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.edu-logo { display: block; width: auto; max-width: 55%; object-fit: contain; }
.edu-logo-1 { height: 46px; }
.edu-logo-2 { height: 50px; }
.edu-logo-3 { height: 36px; }
.edu-year {
  flex: none;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}
.edu-degree {
  margin: 18px 0 6px;
  font-size: max(22px, calc(30 * var(--u)));
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.edu-school { font-size: 15px; font-weight: 500; color: var(--brown); }
.edu-note { margin-top: 14px; font-size: 15px; line-height: 1.55; color: #4d4741; }
.edu-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.edu-chip {
  padding: 6px 12px;
  border: 1px solid #E3D6C6;
  border-radius: 100px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 500;
  color: #4A443E;
}
.edu-chip-rep {
  border-color: #FF9A3C;
  background: #FF9A3C;
  color: #fff;
  font-weight: 600;
}

.certs { width: min(1240px, 90%); margin: calc(120 * var(--u)) auto 0; }
.certs-title {
  margin-bottom: 26px;
  font-size: max(26px, calc(40 * var(--u)));
  font-weight: 600;
  letter-spacing: -.03em;
  color: #191919;
}
.certs-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.cert {
  flex: 0 0 calc(25% - 12px);
  position: relative;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
  border-radius: 10px;
  background: #191919;
  color: #F2E7DA;
  overflow: hidden;
  isolation: isolate;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.cert::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90% 70% at 100% 0%, rgba(255, 178, 30, .28), transparent 65%);
  opacity: .6;
  transition: opacity .6s ease;
}
.cert:hover { transform: translateY(-8px) rotate(-1.5deg); }
.cert:hover::before { opacity: 1; }
.cert-top { display: flex; align-items: center; justify-content: space-between; }
.cert-num { font-size: 13px; font-weight: 500; color: #9C9C9C; letter-spacing: .08em; }
.cert-badge {
  height: 32px;
  display: flex;
  align-items: center;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
/* all issuer logos shown as plain white marks on the dark card */
.cert-badge img { display: block; width: auto; filter: brightness(0) invert(1); }
.cert-badge.is-google img { height: 24.3px; }
.cert-badge.is-iide img { height: 28.8px; }
.cert-badge.is-anthropic img { height: 12.6px; }
.cert:hover .cert-badge { transform: scale(1.06); }
.cert-title {
  margin: auto 0 12px;
  padding-top: 14px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.cert-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(242, 231, 218, .16);
}
.cert-issuer { font-size: 14px; font-weight: 500; color: #FFB21E; }
.cert-kind { font-size: 13px; color: #9C9C9C; }

/* =========================================================
   CONTACT + FOOTER
   ========================================================= */
.cta {
  min-height: 573px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  padding: 10px 10px 60px;
  text-align: center;
}
.cta-title {
  position: relative;
  z-index: 0;
  width: 100%;
  font-size: calc(100 * var(--u));
  font-weight: 600;
  line-height: calc(93 * var(--u));
  letter-spacing: calc(-5 * var(--u));
  color: #593000;
  transform-origin: center center;
}
.cta-text {
  font-size: max(16px, calc(24 * var(--u)));
  line-height: 1.42;
  letter-spacing: -.2px;
  color: #000;
}
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 30px;
  border-radius: 100px;
  background: #fff;
  color: #000;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  transition: background .3s, color .3s;
}
.btn-pill svg { width: 20px; height: 20px; fill: currentColor; }
.btn-pill:hover { background: #593000; color: #fff; }
.cta-gap { height: 250px; }

.site-footer {
  position: relative;
  background: transparent;
  color: #000;
  overflow: hidden;
}
.footer-top {
  display: flex;
  padding: 10px 10px 10px 100px;
}
.footer-lines {
  flex: 1;
  font-size: 38px;
  font-weight: 500;
  line-height: 45px;
}
.footer-cols { flex: 1; display: flex; }
.footer-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 10px;
}
.footer-head {
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 500;
  color: #F98B01;
}
.footer-col a {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-name {
  margin-top: 50px;
  font-size: 25vw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.7vw;
  color: #A4988B36;
  text-align: center;
  user-select: none;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: -100px;
  padding: 0 40px 20px;
  font-size: 16px;
  letter-spacing: .2px;
  position: relative;
}

/* ---------- Hero on phones ---------- */
@media (max-width: 767px) {
  .nav-pill { gap: 10px; padding: 5px 5px 5px 16px; }
  .nav-links { gap: 12px; }
  .nav-links a { font-size: 13px; }
  .nav-cv { font-size: 12px; padding: .8em 2.3em .8em 1.1em; }
  .nav-cv:hover { padding: .8em 1.1em .8em 2.3em; }
  .btn-arrow { right: 1em; }

  .hero {
    min-height: 100svh;
    justify-content: flex-start;
    padding-top: 78px;
    overflow: hidden;
  }
  .hero-name-row { margin-bottom: -9vw; padding: 0; }
  .hero-name { font-size: 27vw; letter-spacing: -1.8vw; }
  .hero-row {
    position: relative;
    flex: 1;
    display: block;
    min-height: 118vw;
  }
  .hero-col-mid {
    position: absolute;
    inset: 0;
    justify-content: flex-end;
  }
  .hero-photo { height: min(100%, 172vw); }
  .hero-col-left,
  .hero-col-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 42vw;
    padding: 0;
    gap: 2vw;
    justify-content: center;
  }
  .hero-col-left { left: 0; }
  .hero-col-right { right: 0; }
  .hero-intro {
    position: absolute;
    left: 0;
    width: 100vw;
    bottom: 5svh;
    z-index: 300;
    margin: 0;
    gap: 6px;
    text-align: center;
  }
  .hero-hello, .hero-fullname, .hero-tagline { transform: none; }
  .hero-hello { font-size: 16px; }
  .hero-fullname { font-size: 30px; }
  .hero-tagline { font-size: 13px; }
  .fl-1 { --sx: -6vw; --sy: -10vw; }
  .fl-2 { --sx: -10vw; --sy: 6vw; }
  .fl-3 { --sx: 12vw; --sy: -12vw; }
  .fl-4 { --sx: 14vw; --sy: 4vw; }
  .fl-4 .flower { margin-left: auto; margin-right: 0; }

  .about { min-height: 70svh; padding: 60px 20px; }
  .about-text p { font-size: 18px; line-height: 28px; }
  .about-more-link { font-size: 14px; padding: 10px 4px; }
  .about-full p { font-size: 16px; line-height: 26px; }
  .about-full p + p { margin-top: 14px; }

  .services { min-height: 0; }
  .services-inner { min-height: 0; padding: 70px 0 90px; gap: 34px; }
  .services-title { font-size: 12.5vw; line-height: 11.5vw; letter-spacing: -.6vw; }
  .services-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 16px;
    padding: 0 20px;
  }
  .service-card { min-height: 0; }
  .service-icon { min-height: 0; aspect-ratio: 1 / 1.05; }
  .service-label { font-size: 15px; padding: 2px 6px 14px; }

  .projects { min-height: 0; }
  .projects-sticky { height: 100svh; }
  .projects-title { font-size: 21vw; line-height: 19vw; letter-spacing: -1.3vw; }
  .projects-row { flex-wrap: wrap; margin-bottom: 120px; padding: 0 8px; }
  .p-col { flex: 0 0 50%; padding: 0 8px; align-items: center; }
  .p-col-side { display: none; }
  .spacer { height: calc(var(--sp) * .38svh); }
  .work, .work.w-90, .work.w-110, .work.w-120, .work.w-130 { width: 100%; }
  .work figcaption { font-size: 11px; padding: 5px 10px; margin-top: 8px; }

  .toolkit { min-height: 0; padding-bottom: 170px; }
  .toolkit-head { padding: 100px 20px 10px; }
  .toolkit-title { font-size: 13vw; line-height: 12.5vw; letter-spacing: -.4vw; }
  .toolkit-tables { margin-top: -20px; }
  .showcase-table { height: 88svh; }
  .showcase-table + .showcase-table { margin-top: -40px; }
  .tool-card { width: 30vw; padding: .45em .45em 0; }
  .tool-name { font-size: 11px; padding: .55em .1em .7em; }

  .projects-row { margin-bottom: 120px; }
  .results { width: auto; margin: 0 20px; padding-bottom: 110px; }
  .results-head { margin-bottom: 34px; }
  .results-eyebrow { font-size: 11px; margin-bottom: 14px; }
  .results-title { font-size: 11vw; }
  .results-grid { grid-template-columns: 1fr; gap: 16px; }
  .result-inner { padding: 24px 19px 22px; border-radius: 12px; }
  .result-tag { font-size: 10px; letter-spacing: .16em; }
  .result-logo { height: 27px; max-width: 68px; }
  .result-title { font-size: 23px; margin: 14px 0 10px; }
  .result-line, .result-stats li { font-size: 13.5px; }
  .result-label { margin-top: 19px; }
  .clients { padding: 100px 0 110px; }
  .clients-head { padding: 0 20px; }
  .clients-eyebrow { font-size: 11px; margin-bottom: 16px; }
  .clients-title { font-size: 12.5vw; line-height: 11.5vw; letter-spacing: -.6vw; }
  .clients-grid { width: auto; margin: 40px 20px 0; grid-template-columns: repeat(2, 1fr); }
  .client img { height: calc(var(--h) * .4px); }
  .education { padding: 100px 0 110px; }
  .edu-head { padding: 0 20px; }
  .edu-title { font-size: 12.5vw; line-height: 11.5vw; letter-spacing: -.6vw; }
  .edu-timeline { width: auto; margin: 50px 20px 0; }
  .edu-line { left: 21px; }
  .edu-item, .edu-left, .edu-right { justify-content: flex-end; padding: 14px 0; }
  .edu-node { left: 21px; top: 36px; width: 40px; height: 40px; margin-left: -20px; box-shadow: 0 0 0 5px #fff, 0 4px 12px rgba(0, 0, 0, .1); }
  .edu-emoji { font-size: 21px; }
  .edu-chips { gap: 6px; margin-top: 14px; }
  .edu-chip { padding: 5px 10px; font-size: 11.5px; }
  .edu-logo-1 { height: 34px; }
  .edu-logo-2 { height: 38px; }
  .edu-logo-3 { height: 26px; }
  .edu-card { width: calc(100% - 58px); padding: 24px 20px 22px; }
  .edu-card::after { top: 48px; }
  .edu-left .edu-card::after { right: auto; left: -8px; }
  .edu-degree { font-size: 20px; margin-top: 14px; }
  .edu-school, .edu-note { font-size: 14px; }
  .certs { width: auto; margin: 60px 20px 0; }
  .certs-grid { gap: 12px; }
  .cert { flex-basis: 100%; }
  .cert { min-height: 172px; padding: 18px 18px 16px; }
  .cert-badge { height: 32px; }
  .cert-badge.is-google img { height: 19.8px; }
  .cert-badge.is-iide img { height: 22.5px; }
  .cert-badge.is-anthropic img { height: 9.45px; }
  .cert-title { font-size: 18px; padding-top: 18px; }
  .cert-issuer { font-size: 12.5px; }
  .cert-kind { font-size: 12px; }
  .testimonials { padding: 100px 0 80px; }
  .testi-head { padding: 0 20px; }
  .testi-title { font-size: 12.5vw; line-height: 11.5vw; letter-spacing: -.6vw; }
  .testi-sub { margin-top: 16px; }
  .testi-sticky { padding-top: 40px; }
  .testi-card { min-height: 0; gap: 20px; padding: 36px 24px 26px; }
  .is-stacked .testi-scroll { height: 340svh; margin-top: -14svh; }
  .is-stacked .testi-stack { width: min(340px, 100%); height: min(440px, 72svh); }
  .testi-quote { font-size: 16.5px; }
  .testi-name { font-size: 17px; }
  .testi-flower { width: 120px; right: -36px; top: -36px; }
  .uk { min-height: 0; padding: 60px 0 90px; }
  .uk-title { font-size: 14.5vw; padding-left: 20px; }
  .uk-sub { width: auto; margin: 18px 20px 30px; }
  .uk-grid { width: auto; margin: 0 20px; grid-template-columns: 1fr; gap: 16px; }
  .case-tile { padding: 22px; aspect-ratio: 16 / 11; }
  .case-name { font-size: 13vw; }
  .case-chip { font-size: 12px; }
  .case-arrow { width: 40px; height: 40px; }

  .cta { min-height: 72svh; padding: 60px 20px 56px; }
  .cta-title { font-size: 13vw; line-height: 12.4vw; letter-spacing: -.6vw; }
  .btn-pill { font-size: 17px; padding: 13px 26px; }
  .cta-gap { height: 60px; }

  .footer-top { flex-direction: column; gap: 30px; padding: 10px 20px; }
  .footer-lines { font-size: 28px; line-height: 34px; }
  .footer-col { padding: 0; }
  .footer-head { font-size: 18px; margin-bottom: 6px; }
  .footer-col a { font-size: 16px; }
  .footer-name { margin-top: 36px; letter-spacing: -1.5vw; font-size: 30vw; }
  .footer-bottom { margin-top: -4vw; padding: 0 20px 18px; font-size: 12px; flex-wrap: wrap; gap: 4px 16px; justify-content: center; }
}

.nowrap { white-space: nowrap; }

/* =========================================================
   CONNECT POP-UP (opened by Get in Touch, Let's Connect, footer Email)
   ========================================================= */
.connect {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.connect[hidden] { display: none; }
.connect-overlay {
  position: absolute;
  inset: 0;
  background: rgba(35, 22, 6, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.connect-panel {
  position: relative;
  width: min(480px, 100%);
  padding: 40px 36px 32px;
  border-radius: 28px;
  background: var(--cream);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
  color: #191919;
}
.connect-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(74, 68, 62, .08);
  color: var(--brown);
  cursor: pointer;
  transition: background .3s, color .3s, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.connect-close svg { width: 18px; height: 18px; fill: currentColor; }
.connect-close:hover { background: var(--brown-dark); color: #fff; transform: rotate(90deg); }
.connect-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--brown-dark);
}
.connect-sub {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--brown);
}
.connect-list { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.connect-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 14px 16px;
  border-radius: 18px;
  background: #fff;
  color: #191919;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s;
}
a.connect-item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(69, 40, 0, .12); }
.connect-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--brown-dark);
  color: #fff;
}
.connect-icon svg { width: 22px; height: 22px; fill: currentColor; }
.connect-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.connect-label { font-size: 13px; font-weight: 500; color: var(--name); }
.connect-value {
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connect-go { flex: none; width: 22px; height: 22px; fill: var(--brown); transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
a.connect-item:hover .connect-go { transform: translate(2px, -2px); fill: var(--orange); }
.connect-copy {
  flex: none;
  min-width: 82px;
  padding: 10px 16px;
  border: 0;
  border-radius: 100px;
  background: var(--brown-dark);
  color: #fff;
  font: 500 14px/1 var(--font);
  cursor: pointer;
  transition: background .3s;
}
.connect-copy:hover { background: var(--orange); }
.connect-copy.is-copied { background: #2E7D32; }
.connect-mail {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--brown);
  text-decoration: underline;
  text-decoration-color: rgba(74, 68, 62, .4);
  text-underline-offset: 4px;
  transition: color .3s, text-decoration-color .3s;
}
.connect-mail:hover { color: var(--orange); text-decoration-color: var(--orange); }
.connect :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
html.connect-open { overflow: hidden; }

@media (max-width: 767px) {
  .connect { align-items: flex-end; padding: 0; }
  .connect-panel {
    width: 100%;
    padding: 34px 20px calc(24px + env(safe-area-inset-bottom));
    border-radius: 26px 26px 0 0;
  }
  .connect-panel::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 4px;
    background: rgba(74, 68, 62, .2);
  }
  .connect-close { top: 16px; right: 14px; }
  .connect-title { font-size: 32px; letter-spacing: -1.5px; }
  .connect-sub { font-size: 15px; }
  .connect-list { margin-top: 22px; }
  .connect-item { gap: 12px; padding: 12px 12px 12px 12px; }
  .connect-icon { width: 40px; height: 40px; border-radius: 11px; }
  .connect-value { font-size: 14px; white-space: normal; overflow-wrap: break-word; line-height: 1.35; }
  .connect-copy { min-width: 72px; padding: 10px 14px; }
}