/* ==========================================================================
   WebSetGo — stylesheet
   1. Tokens  2. Base  3. Buttons  4. Header/Nav  5. Hero  6. About/Team
   7. Work  8. Services  9. Pricing  10. Contact  11. Footer  12. Responsive
   TODO (branding): change --accent and --accent-2 below to recolour the site.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --accent:      #4f46e5;   /* indigo — primary */
  --accent-2:    #c026d3;   /* fuchsia — echoes the magenta in the logo's "Go"
                               (was #7c3aed violet; revert this one line to undo) */
  --accent-dark: #4338ca;
  --accent-soft: #eef2ff;

  --ink:   #0b1020;
  --body:  #4a5568;
  --muted: #6b7280;
  --line:  #e6e8f0;
  --bg:    #ffffff;
  --soft:  #f7f8fc;
  --dark:  #0b1020;

  --radius:    14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(11, 16, 32, .06), 0 1px 3px rgba(11, 16, 32, .04);
  --shadow:    0 4px 6px -1px rgba(11, 16, 32, .07), 0 12px 24px -8px rgba(11, 16, 32, .08);
  --shadow-lg: 0 24px 48px -12px rgba(11, 16, 32, .18);
  --ring:      0 0 0 3px rgba(79, 70, 229, .28);

  --container: 1160px;
  --header-h:  72px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  margin: 0 0 .5em;
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -.021em;
  font-weight: 700;
}
h1 { font-size: clamp(2.15rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -.033em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.45rem); font-weight: 800; letter-spacing: -.028em; }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--accent); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--accent-dark); }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
svg { width: 100%; height: 100%; fill: currentColor; }
/* Outline-style icons declare fill="none" and draw with stroke. A CSS rule
   beats a presentation attribute, so the line above was silently filling them
   solid — which turned the footer's envelope icon into a blank block. This
   restores the attribute's intent for every stroke-drawn icon at once.
   (.success-ico / .to-top below carry their own fill:none from when this was
   patched per-icon; harmless now, just redundant.) */
svg[fill="none"] { fill: none; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section {
  padding: 104px 0;
  scroll-margin-top: var(--header-h);
}
.section-soft { background: var(--soft); }

/* Client work: badge on the screenshot plus a line naming the business.
   Only rendered for a PROJECTS entry that has a `client` block. */
.project .thumb { position: relative; }
.badge-client {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(96deg, #0d9488, #059669);
  box-shadow: 0 6px 18px -6px rgba(5, 150, 105, .7);
}
.badge-client.soon {
  background: linear-gradient(96deg, #7c3aed, #a855f7);
  box-shadow: 0 6px 18px -6px rgba(124, 58, 237, .7);
}
.project.is-client { border-color: rgba(13, 148, 136, .45); }
.client-meta {
  margin: -4px 0 10px;
  font-size: .85rem;
  font-weight: 600;
  color: #0d9488;
}

/* Dark band used by the "How we work" section. Sits between two light
   sections, so the eyebrow, heading and body text are all re-coloured. */
.section-dark {
  background:
    radial-gradient(760px 300px at 50% 0%, rgba(124, 58, 237, .30), transparent 66%),
    linear-gradient(120deg, #171b34, #0b1020);
}
.section-dark h2 { color: #fff; }
.section-dark .section-head p { color: #b9c0d4; }
.section-dark .eyebrow {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: #cbb8ff;
}
.section-head-center { max-width: 720px; margin-inline: auto; text-align: center; }

/* Process steps. Four across on desktop, two on tablets, one on phones. */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.step {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
}
.step-num {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(120deg, #8ab4ff, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step h3 {
  margin: 14px 0 8px;
  font-size: 1.12rem;
  color: #fff;
  letter-spacing: -.01em;
}
.step p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: #b9c0d4;
}
.process-note {
  margin: 28px auto 0;
  max-width: 70ch;
  text-align: center;
  font-size: .9rem;
  line-height: 1.6;
  color: #97a0ba;
}
@media (max-width: 980px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .process-grid { gap: 10px; }
  .step { padding: 16px 14px; border-radius: 16px; }
  .step-num { font-size: 1.4rem; }
  .step h3 { margin: 10px 0 6px; font-size: .95rem; }
  .step p { font-size: .8rem; line-height: 1.5; }
}

.section-head { max-width: 680px; margin-bottom: 56px; }
.section-head p { font-size: 1.06rem; color: var(--muted); margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.muted { color: var(--muted); }
.grad {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
}
.skip-link:focus { left: 16px; color: #fff; }

.noscript {
  padding: 16px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  text-align: center;
}

/* Scroll reveal — only ever hides content when JS is running (html.js), so a
   script error or a blocked file can never leave the page blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 3. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-ico { width: 18px; height: 18px; flex: none; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(11,16,32,.1), 0 8px 20px -8px rgba(79,70,229,.55);
}
.btn-primary:hover {
  background: var(--accent-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(11,16,32,.1), 0 14px 28px -10px rgba(79,70,229,.6);
}

.btn-ghost {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { color: var(--ink); border-color: #c9cfe0; transform: translateY(-2px); box-shadow: var(--shadow); }

.btn-outline {
  background: transparent;
  color: var(--accent);
  border-color: rgba(79,70,229,.35);
}
.btn-outline:hover { background: var(--accent-soft); color: var(--accent-dark); }

.btn-lg { padding: 15px 30px; font-size: 1rem; border-radius: 12px; }
.btn-sm { padding: 8px 14px; font-size: .84rem; }
.btn-block { width: 100%; }

/* ---------- 4. Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.scrolled:not(.on-dark) {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px -12px rgba(11,16,32,.25);
}

/* While the dark hero is behind it, the bar goes transparent with light text.
   .on-dark is toggled in main.js; .menu-open forces the solid bar back so the
   white mobile menu never hangs off a transparent header. */
.site-header.on-dark:not(.menu-open) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.site-header.on-dark:not(.menu-open) .brand,
.site-header.on-dark:not(.menu-open) .brand:hover { color: #fff; }
.site-header.on-dark:not(.menu-open) .nav-link { color: rgba(255,255,255,.78); }
.site-header.on-dark:not(.menu-open) .nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
}
.site-header.on-dark:not(.menu-open) .nav-link.active { color: #fff; font-weight: 600; }
.site-header.on-dark:not(.menu-open) .icon-btn {
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}
.site-header.on-dark:not(.menu-open) .nav-toggle {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}
.site-header.on-dark:not(.menu-open) .nav-toggle span { background: #fff; }

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -.02em;
  color: var(--ink);
  flex: none;
}
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 6px 14px -6px rgba(79,70,229,.7);
  overflow: hidden;
}
/* logo mark image sits inside the tile; the gradient shows if it fails to load */
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  position: relative;
  padding: 8px 13px;
  border-radius: 8px;
  font-size: .93rem;
  font-weight: 500;
  color: var(--body);
}
.nav-link:hover { color: var(--ink); background: rgba(11,16,32,.04); }
.nav-link.active { color: var(--accent); font-weight: 600; }
.nav-cta-mobile { display: none; }

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--body);
  border: 1px solid var(--line);
  background: #fff;
  transition: all .18s var(--ease);
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  transform: translateY(-2px);
}

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav-toggle span {
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  /* Pull up under the sticky header so the dark hero sits behind the
     transparent bar, then pad the content back down to clear it. */
  margin-top: calc(var(--header-h) * -1);
  padding: calc(clamp(64px, 8vw, 104px) + var(--header-h)) 0 clamp(72px, 9vw, 120px);
  overflow: hidden;
}
/* Dark hero — matches the logo's navy so the brand feels native here.
   This gradient is the finished look; the 3D tubes canvas is optional on top. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(820px 460px at 78% -6%, rgba(224, 108, 252, .22), transparent 63%),
    radial-gradient(760px 460px at 6%  10%, rgba(33, 125, 250, .20), transparent 62%),
    linear-gradient(180deg, #050b28 0%, #020727 58%, #04091f 100%);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 50% 25%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 25%, #000 0%, transparent 72%);
}

/* WebGL tubes layer: fades in only once the module is live */
.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;          /* pointer is tracked on document, not here */
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero-fx.ready { opacity: 1; }

/* Legibility, without erasing the effect.
   Most of the work is done by text-shadow on the copy itself — a local dark
   halo behind the glyphs — so the scrim can stay light and the tubes remain
   visible right across the hero, including behind the text. */
.hero.fx-on::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(2, 7, 39, .42) 0%,
    rgba(2, 7, 39, .28) 24%,
    rgba(2, 7, 39, .10) 40%,
    rgba(2, 7, 39, 0)   54%);
}
.hero.fx-on .hero-title { text-shadow: 0 2px 26px rgba(2, 7, 39, .78); }
.hero.fx-on .hero-sub {
  text-shadow: 0 1px 3px rgba(2, 7, 39, .95), 0 2px 18px rgba(2, 7, 39, .85);
}
.hero.fx-on .hero-stats strong,
.hero.fx-on .hero-stats span { text-shadow: 0 1px 3px rgba(2, 7, 39, .95); }

.hero-inner {
  position: relative;            /* must sit above the canvas */
  z-index: 2;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

/* HERO_CARD.enabled = false -> single wide column, tubes fill the hero */
.hero-inner.is-single { grid-template-columns: 1fr; }
.hero-inner.is-single .hero-sub { max-width: 58ch; }

/* ---- hero text recoloured for the dark ground ---- */
.hero .hero-title { color: #fff; }
.hero .grad {
  background: linear-gradient(100deg, #4cc4ff, #b06cff 52%, #ff6fe0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* NOTE: these need the .hero prefix — the base light-theme rules for
   .hero-sub / .hero-stats appear later in this file and would otherwise win
   on equal specificity. */
.hero .hero-sub { color: #a8b2d1; }

.hero .pill {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: #dbe2f5;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
}

.hero .btn-ghost {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
}
.hero .btn-ghost:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}

.hero .hero-stats { border-top-color: rgba(255, 255, 255, .14); }
.hero .hero-stats strong { color: #fff; }
.hero .hero-stats span { color: #9aa5c2; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: .82rem;
  font-weight: 600;
  color: var(--body);
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}
.pill .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
  50%      { box-shadow: 0 0 0 6px rgba(22,163,74,.06); }
}

.hero-title { margin-bottom: 20px; }
.hero-sub {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: 32px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 44px; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 4vw, 48px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats strong {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.hero-stats span { font-size: .85rem; color: var(--muted); }

/* Glass price ladder in the hero — translucent on purpose so the 3D tubes
   stay visible through it. Rows are rendered from PACKAGES in data.js. */
.hero-card {
  max-width: 400px;
  margin-left: auto;
  padding: 24px 24px 22px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 28px 64px -28px rgba(0, 0, 0, .85);
}

.hc-eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #c9a6ff;
}
.hc-lead {
  margin: 9px 0 18px;
  font-size: 1.22rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}
.hc-lead strong {
  font-weight: 800;
  background: linear-gradient(100deg, #4cc4ff, #ff6fe0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hc-list { margin-bottom: 16px; }
.hc-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.hc-list li + li { margin-top: 7px; }
.hc-list li.is-pick {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(224, 108, 252, .45);
}
.hc-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .91rem;
  font-weight: 500;
  color: #c3cbe4;
}
.hc-tag {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.hc-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.hc-note {
  margin: 0 0 16px;
  padding-left: 14px;
  font-size: .78rem;
  color: #8f9ab8;
}

/* On narrow phones the badge forces the package name to wrap and the rows go
   ragged. The highlighted row already reads as the pick without it. */
@media (max-width: 430px) {
  .hc-tag { display: none; }
}

/* ---------- 6. About / Team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}
.member {
  position: relative;
  padding: 30px 26px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.member:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #d7dcec; }

.avatar {
  width: 78px; height: 78px;
  border-radius: 20px;
  display: grid; place-items: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  margin-bottom: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 22px -10px rgba(79,70,229,.75);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.member h3 { margin-bottom: 2px; font-size: 1.16rem; }
.member .role {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 12px;
}
.member p { font-size: .93rem; color: var(--muted); margin-bottom: 16px; }
/* That 16px was the gap before the skill chips. With the chips gone the bio is
   usually the last thing in the card, and the margin became trailing dead
   space under it. :last-child keeps the gap if profile links are ever added
   back below, and drops it when nothing follows. */
.member p:last-child { margin-bottom: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: .74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--body);
}
.member-links { display: flex; gap: 8px; margin-top: 16px; }
.member-links a {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #fff;
}
.member-links a svg { width: 16px; height: 16px; }
.member-links a:hover { color: var(--accent); border-color: rgba(79,70,229,.4); background: var(--accent-soft); }

/* ---------- Team goal panel ----------
   Sits under the three cards where the per-person bios used to be. Given the
   dark treatment so it reads as a statement rather than a fourth team card —
   the section otherwise ends on three white boxes and just stops. */
.team-goal {
  margin-top: 26px;
  padding: clamp(28px, 4vw, 46px);
  border-radius: var(--radius-lg);
  text-align: center;
  background:
    radial-gradient(620px 240px at 50% 0%, rgba(124, 58, 237, .32), transparent 64%),
    linear-gradient(120deg, #171b34, #0b1020);
  box-shadow: var(--shadow-lg);
}
.team-goal .eyebrow {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: #cbb8ff;
}
.team-goal h3 {
  margin: 14px 0 12px;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  color: #fff;
  letter-spacing: -.02em;
}
.team-goal p {
  max-width: 60ch;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.65;
  color: #a9b2cc;
}
.team-goal__kicker {
  margin-top: 18px !important;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-weight: 650;
  color: #fff !important;
  letter-spacing: -.01em;
}

/* ---------- 7. Work ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}
/* Client cards: a compact row, not the big concept-build cards.
   Tablet: 2 across. Laptop and desktop: up to 4 across (auto-fit, so 2 or 3
   cards stretch to fill the row instead of leaving empty slots). */
@media (min-width: 641px) {
  #clientsGrid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  #clientsGrid .project-body { padding: 16px 18px 18px; }
  #clientsGrid .project-body h3 { font-size: 1rem; margin-bottom: 4px; }
  #clientsGrid .project-body > .client-meta { font-size: .78rem; margin: 0 0 8px; line-height: 1.4; color: var(--muted); }
  #clientsGrid .project-body > p {
    font-size: .84rem;
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #clientsGrid .chips { gap: 5px; margin-bottom: 14px; }
  #clientsGrid .chip { font-size: .68rem; padding: 3px 8px; }
  #clientsGrid .link-arrow { font-size: .86rem; }
  #clientsGrid .badge-client { top: 10px; left: 10px; padding: 4px 10px; font-size: .62rem; }
}
@media (min-width: 1024px) {
  #clientsGrid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  #clientsGrid .project:hover { transform: translateY(-4px); }
}
.project {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.project:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: #d7dcec; }

/* featured: spans two columns and goes side-by-side on wide screens */
.project.featured { grid-column: span 2; }
@media (min-width: 1021px) {
  .project.featured { flex-direction: row; align-items: stretch; }
  /* NOTE: side-by-side makes this box roughly square, so a 16:10 screenshot
     gets its left and right edges cropped. Fine for abstract imagery, bad for
     a shot with a centred logo — prefer a normal card for those. */
  .project.featured .thumb {
    flex: 0 0 56%;
    aspect-ratio: auto;
    min-height: 300px;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .project.featured .project-body { justify-content: center; padding: 30px 32px; }
  .project.featured .project-body h3 { font-size: 1.34rem; }
}

.thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.project:hover .thumb img { transform: scale(1.045); }

/* Placeholder tile shown until a real screenshot is added */
.thumb-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(79,70,229,.09), rgba(124,58,237,.09)),
    repeating-linear-gradient(45deg, #fff 0 12px, #f6f7fc 12px 24px);
}
.thumb-ph svg { width: 34px; height: 34px; color: var(--accent); opacity: .75; }
.thumb-ph span {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .85;
}
.thumb-ph small { font-size: .72rem; color: var(--muted); }

.project-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.project-body h3 { margin-bottom: 6px; font-size: 1.12rem; }
.project-body > p { font-size: .93rem; color: var(--muted); margin-bottom: 16px; }
.project .chips { margin-bottom: 20px; }
.project-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  font-weight: 600;
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translate(2px, -2px); }

/* Extra projects beyond WORK_GRID.initialCount. Scoped to .js for the same
   reason .reveal is: the class is only ever added by script, so without JS
   every project stays visible rather than the grid collapsing to three. */
.js .project.is-hidden { display: none; }

.work-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}
.work-more__status {
  margin: 0;
  font-size: .85rem;
  color: var(--muted);
}

.section-foot {
  margin-top: 52px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.section-foot p { margin: 0; }

/* ---------- 8. Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}
.service {
  padding: 30px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.service:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #d7dcec; }
.service-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 18px;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.service-ico svg { width: 23px; height: 23px; }
.service:hover .service-ico { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.service h3 { font-size: 1.08rem; margin-bottom: 8px; }
.service p { font-size: .93rem; color: var(--muted); margin: 0; }

/* ---------- 9. Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px;
  margin-bottom: 56px;
}
/* Four packages: one row on desktop. 290px minimums would wrap the fourth
   card onto a line of its own inside the 1160px container, so the columns
   are set explicitly and the card padding tightens to suit. */
@media (min-width: 861px) {
  .pricing-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .package { padding: 28px 20px; }
}
.package {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.package:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.package.highlight {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent), var(--shadow);
}
.badge {
  position: absolute;
  top: -12px; left: 28px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 14px -6px rgba(79,70,229,.8);
}
.package h3 { font-size: 1.06rem; margin-bottom: 4px; }
.package .price {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.03em;
  margin: 6px 0 4px;
  line-height: 1.2;
}
.package .price-unit {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.package .blurb { font-size: .9rem; color: var(--muted); margin-bottom: 20px; }
.package ul { margin-bottom: 26px; display: flex; flex-direction: column; gap: 11px; }
.package li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .92rem;
  color: var(--body);
}
.package li svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--accent); }
.package .btn { margin-top: auto; }

.pricing-note {
  display: flex;
  gap: 10px;
  max-width: 78ch;
  margin: -20px 0 40px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid rgba(79, 70, 229, .18);
  font-size: .89rem;
  color: var(--body);
}
.pricing-note::before {
  content: "+";
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1;
}

.ratecard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 220px at 88% 0%, rgba(124,58,237,.35), transparent 62%),
    linear-gradient(120deg, #171b34, #0b1020);
  color: #cbd2e6;
  box-shadow: var(--shadow-lg);
}
.ratecard-copy { max-width: 56ch; }
.ratecard h3 { color: #fff; font-size: 1.45rem; margin-bottom: 8px; }
.ratecard p { margin: 0; font-size: .98rem; color: #a9b2cc; }
.ratecard-action { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ratecard-action .btn-primary {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.6);
}
.ratecard-action .btn-primary:hover { background: #f1f2f8; color: var(--ink); }
.ratecard-note { font-size: .78rem; color: #8b93b0; }

/* ---------- 10. Contact ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 34px;
  align-items: start;
}

.contact-aside { display: flex; flex-direction: column; gap: 14px; }
.info-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.info-ico {
  width: 42px; height: 42px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}
.info-ico svg { width: 21px; height: 21px; }
.info-card h3 {
  margin: 0 0 1px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.info-card a { font-size: .95rem; font-weight: 600; color: var(--ink); word-break: break-word; }
.info-card a:hover { color: var(--accent); }

.info-note {
  margin-top: 8px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid rgba(79,70,229,.18);
}
.info-note strong { display: block; color: var(--ink); margin-bottom: 12px; font-size: .95rem; }
.info-note ol { counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
.info-note li {
  counter-increment: step;
  position: relative;
  padding-left: 30px;
  font-size: .89rem;
  color: var(--body);
  line-height: 1.5;
}
.info-note li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 1px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}

.form-wrap {
  padding: clamp(24px, 3.4vw, 38px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.form { display: flex; flex-direction: column; gap: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label {
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink);
}
.field .req { color: var(--accent); }
.field .opt { color: var(--muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 128px; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 17px;
  padding-right: 38px;
  cursor: pointer;
}
.field input::placeholder,
.field textarea::placeholder { color: #a3aabd; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.field.invalid input,
.field.invalid textarea { border-color: #dc2626; }
.field.invalid input:focus,
.field.invalid textarea:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.2); }
.error { color: #dc2626; font-size: .8rem; min-height: 0; }

/* honeypot — visually hidden, not display:none (some bots skip hidden fields) */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

#submitBtn { position: relative; margin-top: 4px; }
.spinner {
  display: none;
  width: 17px; height: 17px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
#submitBtn.loading .spinner { display: block; }
#submitBtn.loading { opacity: .85; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-foot { margin: 0; font-size: .82rem; color: var(--muted); text-align: center; }
.form-error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: .88rem;
}

.form-success { text-align: center; padding: 20px 8px 8px; }
.success-ico {
  width: 62px; height: 62px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  animation: pop .45s var(--ease);
}
.success-ico svg { width: 30px; height: 30px; fill: none; }
@keyframes pop {
  0%   { transform: scale(.6); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.form-success .form-success-title { font-size: 1.35rem; font-weight: 700; line-height: 1.18; letter-spacing: -.021em; color: var(--ink); margin-bottom: 8px; }
.form-success p { color: var(--muted); margin-bottom: 22px; }

/* ---------- 11. Footer ---------- */
.site-footer {
  background: var(--dark);
  color: #9aa3bf;
  padding: 72px 0 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.25fr 2fr;
  gap: 48px;
  padding-bottom: 52px;
}
.footer-brand p { font-size: .93rem; max-width: 38ch; margin: 18px 0 22px; }
.brand-light { color: #fff; }
.brand-light:hover { color: #fff; }

/* full logo card — its navy background sits naturally on the dark footer */
/* Circular, not the old rounded square: the logo is a round badge, so a 20px
   radius left four dark corners sticking out past it. No border either — the
   badge already carries its own gradient ring, and a second one around it read
   as a double outline. The hover glow is kept. */
.footer-logo {
  display: block;
  width: 190px;
  max-width: 100%;
  border-radius: 50%;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.footer-logo img,
.footer-logo picture { display: block; width: 100%; height: auto; }
.footer-logo:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -18px rgba(192, 38, 211, .85);
}

.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: #cbd2e6;
  transition: all .2s var(--ease);
}
.social-row a svg { width: 18px; height: 18px; }
.social-row a:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  transform: translateY(-3px);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.footer-nav h3 {
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-nav a {
  display: block;
  font-size: .92rem;
  color: #9aa3bf;
  padding: 5px 0;
}
.footer-nav a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 24px;
  padding-bottom: 28px;
  border-top: 1px solid rgba(255,255,255,.09);
}
.footer-bottom p { margin: 0; font-size: .85rem; color: #7d86a3; }

/* Back to top */
.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all .28s var(--ease);
}
.to-top svg { width: 20px; height: 20px; fill: none; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: #fff; background: var(--accent); transform: translateY(-3px); }

/* "Copied: address" confirmation shown after clicking a mailto: link —
   the safety net for visitors whose browser has no mail app to hand off to */
.copy-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 200;
  transform: translate(-50%, 14px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.copy-toast.is-shown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

@media (max-width: 480px) {
  .copy-toast { left: 16px; right: 16px; bottom: 18px; transform: translateY(14px); text-align: center; }
  .copy-toast.is-shown { transform: translateY(0); }
}

/* Cookie notice — bottom bar, dismissed once and remembered via localStorage
   (see initCookieNotice() in main.js). Sits below .to-top's z-index so the
   back-to-top button still shows on top of it, but .to-top is nudged up
   while this is open (via body.has-cookie-notice below) so the two never
   visually overlap. */
.cookie-notice {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  padding: 18px clamp(20px, 4vw, 40px);
  background: var(--ink);
  color: #cbd2e6;
  box-shadow: 0 -12px 32px -12px rgba(0, 0, 0, .35);
  transform: translateY(100%);
  transition: transform .35s var(--ease);
}
.cookie-notice:not([hidden]) { transform: translateY(0); }
.cookie-notice p { margin: 0; max-width: 62ch; font-size: .87rem; line-height: 1.6; }
.cookie-notice__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
/* .btn-ghost's default white fill reads clearly against this dark bar as-is
   — no scoped override needed here. */

/* --cookie-notice-h is set from JS to the bar's REAL rendered height
   (syncToTopOffset() in main.js) — the message wraps to 1, 2, or occasionally
   3 lines depending on viewport width, so a fixed px guess per breakpoint
   doesn't track it reliably (confirmed: a hardcoded pair of values still
   overlapped by 44px at a width neither breakpoint covered). Falls back to
   a sane fixed value if JS hasn't run yet or is disabled. */
body.has-cookie-notice .to-top { bottom: calc(var(--cookie-notice-h, 100px) + 18px); }

@media (max-width: 640px) {
  .cookie-notice { justify-content: center; text-align: center; }
  .cookie-notice__actions { width: 100%; justify-content: center; }
}

/* ---------- 12. Responsive ---------- */
@media (max-width: 1020px) {
  .contact-layout { grid-template-columns: 1fr; }
  .project.featured { grid-column: span 1; }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-card { max-width: 460px; margin-inline: auto; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 860px) {
  .header-cta { display: none; }
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 16px 24px 26px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: all .26s var(--ease);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav.open { transform: none; opacity: 1; visibility: visible; }
  .nav-link { padding: 13px 12px; font-size: 1rem; border-radius: 10px; }
  .nav-cta-mobile { display: block; margin-top: 12px; }
}

@media (max-width: 640px) {
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 38px; }
  .field-row { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1 1 100%; }
  .ratecard { flex-direction: column; align-items: flex-start; }
  .ratecard-action { width: 100%; }
  .ratecard-action .btn { width: 100%; }
  .section-foot { flex-direction: column; align-items: flex-start; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 24px; }
  .hero-card { padding: 20px 18px 18px; }
}

/* ==========================================================================
   MOBILE GRID DENSITY  (<= 640px)
   --------------------------------------------------------------------------
   Phones previously got one column for every grid, which made each card fill
   most of the screen and turned the page into a very long scroll. These rules
   pack them into rows instead: 3 team, 2 work, 2 services, 3 packages.

   The card internals HAVE to be compacted alongside the column counts. Each
   card was designed for a ~300px desktop column; at a third of a 375px phone
   it gets ~100px, so desktop padding, type scale and prose simply do not fit.
   Where text cannot survive the squeeze it is hidden rather than left to
   collapse into a one-word-per-line sliver — noted at each spot below.

   Hover lifts are also switched off here: on touch there is no pointer to
   leave, so :hover sticks after a tap and cards stay stuck in a raised state.
   ========================================================================== */
@media (max-width: 640px) {

  /* ---- Hero stats: 3 across ----
     Was flex-wrap, which fit two and stranded the third on its own row. */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding-top: 20px;
  }
  .hero-stats li { min-width: 0; }          /* let grid tracks actually shrink */
  .hero-stats strong { font-size: 1.35rem; }
  .hero-stats span { font-size: .72rem; line-height: 1.35; }

  /* ---- Team: 3 across ----
     Bio, skill chips and profile links are hidden: at ~100px wide the bio
     becomes a 20-line ribbon and each chip claims its own row. What is left
     is a "meet the team" strip — face, name, role. */
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .member {
    padding: 16px 8px 14px;
    text-align: center;
    border-radius: 16px;
  }
  .member:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }
  .avatar {
    width: 54px; height: 54px;
    margin: 0 auto 10px;
    border-radius: 15px;
    font-size: 1.05rem;
  }
  /* Reserve two lines whether the name needs them or not, so the roles below
     start at the same height across all three cards. Without this a name that
     wraps ("Sargam Ghevade") drops its role out of line with the others. */
  .member h3 { font-size: .82rem; line-height: 1.25; margin-bottom: 3px; min-height: 2.5em; }
  /* display:block, not the inherited inline-block. An inline-block aligns by
     the baseline of its LAST line, so a role that wraps to two lines ("Frontend
     Developer") gets pulled a whole line-height higher than a one-line one
     ("UI/UX Designer") — which is what knocked the three roles out of line. */
  .member .role { display: block; font-size: .67rem; line-height: 1.3; margin-bottom: 0; }
  .member p,
  .member-links { display: none; }

  /* ---- Team goal panel ---- */
  .team-goal { margin-top: 16px; padding: 22px 16px; border-radius: 16px; }
  .team-goal h3 { font-size: 1.1rem; margin: 10px 0 8px; }
  .team-goal p { font-size: .86rem; line-height: 1.6; }
  .team-goal__kicker { margin-top: 14px !important; padding-top: 12px; font-size: .82rem; }

  /* ---- Work: 2 across ----
     Screenshot and title carry the card here; the description is clamped so
     two cards sharing a row stay the same height, and the tag pills go —
     four of them at ~150px wide stack into four separate lines. */
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .project { border-radius: 16px; }
  .project:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }
  .project:hover .thumb img { transform: none; }
  .project-body { padding: 12px 12px 14px; }
  .project-body h3 { font-size: .92rem; margin-bottom: 4px; }
  .project-body > p {
    font-size: .76rem;
    line-height: 1.45;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .project .chips { display: none; }
  .project-body > .client-meta { font-size: .7rem; margin: 0 0 6px; line-height: 1.35; color: var(--muted); }
  .badge-client { top: 8px; left: 8px; padding: 3px 8px; font-size: .55rem; letter-spacing: .08em; }
  .project-links .link-arrow { font-size: .78rem; }
  .project-links .link-arrow svg { width: 13px; height: 13px; }

  /* ---- Services: 2 across ----
     Six services land as a clean 2 x 3. Descriptions are short enough to keep
     in full at this width. */
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .service { padding: 18px 14px; border-radius: 16px; }
  .service:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }
  .service-ico { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 12px; }
  .service-ico svg { width: 19px; height: 19px; }
  .service h3 { font-size: .92rem; line-height: 1.3; margin-bottom: 5px; min-height: 2.6em; }
  .service p { font-size: .78rem; line-height: 1.5; }

  /* ---- Pricing: 3 across ----
     The tightest of the five — three cards share the row, so each gets about
     a third of the width and everything inside is on a reduced scale. The
     "Best for ..." blurb is dropped; the feature list is kept, because what
     is included is the whole reason someone reads this section.
     The "Most popular" badge is re-centred: anchored left it overhung the
     card edge at this width. */
  .pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 40px; }
  .package { padding: 18px 10px 14px; border-radius: 16px; }
  .package:hover { transform: none; }
  .badge {
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 8px;
    font-size: .57rem;
    letter-spacing: .02em;
    white-space: nowrap;
  }
  .package h3 { font-size: .75rem; line-height: 1.3; margin-bottom: 3px; }
  .package .price { font-size: 1.1rem; margin: 4px 0 2px; }
  .package .price-unit { font-size: .6rem; letter-spacing: .01em; line-height: 1.3; margin-bottom: 10px; }
  .package .blurb { display: none; }
  .package ul { gap: 7px; margin-bottom: 14px; }
  .package li { font-size: .67rem; line-height: 1.35; gap: 5px; }
  .package li svg { width: 12px; height: 12px; margin-top: 2px; }
  .package .btn { padding: 9px 4px; font-size: .71rem; }

  /* ---- Rate card banner ----
     Built as a wide two-column banner; stacked on a phone it turned into a
     tall slab, with a 1.45rem heading and 15px-tall button both sized for the
     desktop version. Everything here is the same block at phone scale. */
  .ratecard { gap: 14px; padding: 20px 18px; border-radius: 16px; }
  .ratecard h3 { font-size: 1.02rem; line-height: 1.3; margin-bottom: 5px; }
  .ratecard p { font-size: .8rem; line-height: 1.5; }
  .ratecard-action { gap: 7px; }
  .ratecard-action .btn-lg { padding: 11px 18px; font-size: .84rem; border-radius: 10px; }
  .ratecard-action .btn-ico { width: 15px; height: 15px; }
  .ratecard-note { font-size: .68rem; }

  /* Back-to-top: smaller and tucked nearer the edge so it stops sitting over
     the text being read. Still well above the 24px minimum touch target.
     NOTE: body.has-cookie-notice .to-top (higher specificity) keeps its own
     bottom offset while the cookie bar is open — that override still wins. */
  .to-top {
    width: 36px; height: 36px;
    right: 10px; bottom: 14px;
    border-radius: 10px;
  }
  .to-top svg { width: 16px; height: 16px; }
  .to-top:hover { transform: none; }
}

/* Narrow phones: claw back 16px of gutter, which is the difference between
   these grids being tight and being cramped. */
@media (max-width: 430px) {
  .container { padding-inline: 16px; }
  .team-grid { gap: 8px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pricing-grid { gap: 6px; }
  .services-grid { gap: 10px; }
  .member h3 { font-size: .78rem; }
  .member .role { font-size: .63rem; }
  .package li { font-size: .64rem; }
  .package .price { font-size: 1.02rem; }
}

@media (max-width: 340px) {
  .brand-name { display: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .to-top, .hero-card, .form-wrap, .nav-toggle { display: none !important; }
  body { color: #000; }
  .js .reveal { opacity: 1; transform: none; }
}