/* ============================================
   Vorela Studio
   A studio site, not a SaaS landing page. Warm
   grey ground, one enormous headline, hairline
   rules instead of cards, and micro-typography
   carrying the detail. Coral appears rarely and
   hot — the work supplies the colour.
   ============================================ */


:root {
  /* Warm grey, not near-white. It gives the page depth without going dark —
     the two things the earlier cream and near-black versions each got wrong. */
  --bg:        #EDEBE5;
  --white:     #F7F6F2;
  --paper:     #FDFCFA;
  --tint:      #E6E3DB;
  --tint-2:    #E9E7E0;

  --ink:       #14131A;
  --ink-block: #14131A;
  --muted:     #5E5A5F;
  --faint:     #8D888C;
  --line:      #D9D5CB;
  --line-mid:  #C6C1B5;

  --accent:      #FF6A45;
  --accent-deep: #E8532F;
  --accent-soft: #FFB498;
  --accent-wash: #FFEDE5;

  /* vertical colour coding */
  --clinic:      #FF6A45;
  --clinic-wash: #FFEDE5;
  --venue:       #E08A1E;
  --venue-wash:  #FFF3DF;
  --estate:      #5C6AD0;
  --estate-wash: #F1F2FD;

  --display: 'Familjen Grotesk', 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --page: 1200px;
  --gut:  clamp(22px, 5vw, 60px);
  /* Studio sites square things off. Rounded corners read as software. */
  --r:    3px;
  --r-sm: 2px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding-inline: var(--gut); }

section { padding-block: clamp(84px, 11vw, 156px); }

/* ---------- shared type ---------- */

.eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 26px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line-mid);
  display: block;
}

.section-title { font-size: clamp(34px, 6.2vw, 84px); line-height: 0.95; max-width: 17ch; }
.split .section-title,
.two-col .section-title { font-size: clamp(30px, 3.6vw, 52px); max-width: 15ch; }

.lede {
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--muted);
  line-height: 1.6;
  max-width: 56ch;
  letter-spacing: -0.005em;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 16px 30px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease, border-color .25s ease,
              transform .25s ease, box-shadow .25s ease;
}

.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--accent); color: #fff; }

.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }

.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: var(--accent); color: #fff; }

.btn svg { width: 16px; height: 16px; flex: none; }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
.nav.is-stuck {
  background: rgba(237,235,229,.86);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--line);
}

.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 24px; }

.logo {
  display: flex; align-items: baseline; gap: 11px;
  font-family: var(--display); font-size: 20px; font-weight: 500; letter-spacing: -0.03em;
}
.logo-mark { width: 20px; height: 20px; flex: none; color: var(--accent); align-self: center; }
.logo span { color: var(--faint); font-family: var(--sans); font-size: 12.5px; font-weight: 450; letter-spacing: .02em; }

.nav-links { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 28px); }
/* Numbered, uppercase, tiny. A studio indexes its sections; software labels
   its features. */
.nav-links { counter-reset: nav; }
.nav-links > a { white-space: nowrap; }
.nav-links > a {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); transition: color .2s ease; position: relative;
}
.nav-links > a::before {
  counter-increment: nav; content: counter(nav, decimal-leading-zero);
  font-size: 9px; vertical-align: super; margin-right: 5px; color: var(--faint);
  letter-spacing: 0;
}
.nav-links > a:hover { color: var(--accent); }
.nav-links > a:hover::before { color: var(--accent); }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn { padding: 12px 20px; font-size: 11px; }

.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }
.nav-toggle svg { width: 22px; height: 22px; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(64px, 9vw, 116px);
  padding-bottom: clamp(76px, 10vw, 140px);
}
.hero::before {
  content: '';
  position: absolute;
  top: -420px; left: 50%;
  width: min(1500px, 170vw); height: 1000px;
  transform: translateX(-50%);
  /* Derived from --accent so a client demo's glow matches its own palette. */
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%);
  pointer-events: none;
}
.hero > .wrap { position: relative; }

/* The headline is the design. At this scale it stops being a sentence on a
   page and becomes the page — which is what separates a studio site from a
   landing page using the same words. */
.hero h1 {
  font-size: clamp(46px, 8.4vw, 126px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  max-width: 19ch;
  margin-bottom: 34px;
}
.hero:not(:has(.hero-visual)) h1 { font-size: clamp(42px, 7.2vw, 92px); max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--accent); }

.hero-lede { max-width: 46ch; margin-bottom: 42px; font-size: clamp(16px, 1.35vw, 18.5px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.hero-note { font-size: 13.5px; color: var(--faint); margin-top: 28px; display: flex; align-items: center; gap: 9px; }
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---------- markets strip ---------- */

.strip { padding-block: 0; overflow: hidden; }
.marquee {
  display: flex; gap: 0; width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee-set { display: flex; align-items: center; gap: clamp(28px, 4vw, 60px); padding-right: clamp(28px, 4vw, 60px); }
.marquee span {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 600; letter-spacing: -0.035em;
  white-space: nowrap; color: var(--ink);
}
.marquee .sep { color: var(--accent); font-size: clamp(16px, 2vw, 26px); }
.marquee-wrap { border-block: 1px solid var(--line-mid); padding-block: clamp(20px, 2.6vw, 34px); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }
.strip-inner {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: clamp(18px, 4vw, 52px);
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.strip-label { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.strip-items { display: flex; flex-wrap: wrap; gap: clamp(18px, 4vw, 44px); }
.strip-items span {
  font-family: var(--display); font-size: clamp(16px, 2vw, 19px);
  font-weight: 400; color: var(--muted); letter-spacing: -0.02em;
}

/* ---------- split layout ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(44px, 8vw, 110px); align-items: start; }

.check-list { display: grid; gap: 34px; }
.check-item { display: flex; gap: 16px; align-items: flex-start; }
.check-item svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--accent); }
.check-item h4 { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 7px; }
.check-item p { font-size: 15.5px; color: var(--muted); line-height: 1.6; }

/* ---------- two paths ---------- */

.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 46px); margin-top: 72px; }
.path {
  display: flex; flex-direction: column;
  background: none;
  border-top: 1px solid var(--ink);
  padding-top: 20px;
}
.path:hover .path-photo img { transform: scale(1.05); }

.path-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; order: 2; margin-top: 28px; }
.path-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.path:hover .path-photo img { transform: scale(1.06); }

.path-body { padding: 0; position: relative; order: 1; display: flex; flex-direction: column; flex: 1; }
.path-icon { display: none; }
.path-index {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--clinic);
  margin-bottom: 16px; display: block;
}
.path:nth-child(2) .path-index { color: #B36A0F; }
.path:nth-child(3) .path-index { color: var(--estate); }
.path-icon-off {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--clinic); color: #fff;
  margin: -30px 0 24px; position: relative; z-index: 2;
  box-shadow: 0 10px 22px -10px rgba(255,106,69,.7);
}
.path:nth-child(2) .path-icon { display: none; }
.path-index {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--clinic);
  margin-bottom: 16px; display: block;
}
.path:nth-child(2) .path-index { color: #B36A0F; }
.path:nth-child(3) .path-index { color: var(--estate); }
.path-icon-off { background: var(--venue); box-shadow: 0 10px 22px -10px rgba(224,138,30,.7); }
.path:nth-child(3) .path-icon { display: none; }
.path-index {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--clinic);
  margin-bottom: 16px; display: block;
}
.path:nth-child(2) .path-index { color: #B36A0F; }
.path:nth-child(3) .path-index { color: var(--estate); }
.path-icon-off { background: var(--estate); box-shadow: 0 10px 22px -10px rgba(92,106,208,.7); }
.path-icon svg { width: 25px; height: 25px; }
.path h3 { font-size: clamp(23px, 2.3vw, 31px); margin-bottom: 14px; }
.path p { font-size: 15.5px; color: var(--muted); line-height: 1.58; margin-bottom: 22px; }
.path-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--line-mid); padding-bottom: 4px;
  margin-top: auto; align-self: flex-start;
}

.path-link svg { width: 15px; height: 15px; transition: transform .3s ease; }
.path:hover .path-link { border-bottom-color: var(--ink); }
.path:hover .path-link svg { transform: translateX(5px); }

.paths-note { margin-top: 34px; font-size: 15.5px; color: var(--muted); }
.paths-note a { color: var(--accent-deep); font-weight: 500; border-bottom: 1px solid currentColor; }

/* ---------- services (tinted field) ---------- */

.services { background: var(--tint); }
.services + .services { border-top: 1px solid var(--line-mid); }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; background: none; border: 0; }
.svc {
  background: none;
  border: 0;
  border-top: 1px solid var(--line-mid);
  border-radius: 0;
  padding: 22px 0 4px;
  transition: border-color .3s ease;
}
.svc:hover { border-top-color: var(--ink); }
.svc-num { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; margin-bottom: 26px; }
.svc h3 { font-size: clamp(20px, 1.9vw, 25px); margin-bottom: 12px; }
.svc p { font-size: 15.5px; color: var(--muted); line-height: 1.62; }

/* the index keeps its hue; the row itself stays uncoloured */
.svc:nth-child(1) .svc-num { color: #E8532F; }
.svc:nth-child(2) .svc-num { color: #D18A2C; }
.svc:nth-child(3) .svc-num { color: #2E9B7C; }
.svc:nth-child(4) .svc-num { color: #5C6AD0; }
.svc:nth-child(5) .svc-num { color: #C74F86; }
.svc:nth-child(6) .svc-num { color: #8A7B5C; }

/* ---------- work ---------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 54px) clamp(20px, 2.4vw, 40px);
  margin-top: 76px;
}
/* Deliberately uneven. An even three-across grid is what a template does;
   a studio lets the work breathe at different sizes. */
.work-card { position: relative; display: block; grid-column: span var(--span, 4); }

.work-thumb {
  aspect-ratio: 4 / 3;
  background: var(--paper);
  border: 0;
  border-radius: var(--r-sm);
  padding: 0;
  display: grid; place-items: stretch;
  margin-bottom: 16px;
  overflow: hidden;
}
.work-card[data-shape="full"] .work-thumb { aspect-ratio: 21 / 9; }
/* An unequal pair (7 + 5) shares one image height so the captions line up.
   Giving both the same aspect ratio made the wider card's picture taller and
   left the two hairlines at different heights. */
.work-card[data-shape="pair"] .work-thumb { aspect-ratio: auto; height: clamp(240px, 30vw, 420px); }
.work-thumb img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.16,1,.3,1), filter .4s ease;
  filter: saturate(.92); }
.work-card:hover .work-thumb img { transform: scale(1.035); filter: saturate(1.06); }
.work-tag {
  position: static; z-index: 2;
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  background: none; border: 0; border-radius: 0; padding: 0;
  display: block; margin-bottom: 6px;
}
.work-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--line-mid); padding-top: 12px; }
.work-card:hover .work-meta { border-top-color: var(--ink); }
.work-meta h4 { font-family: var(--display); font-size: clamp(17px, 1.5vw, 21px); font-weight: 600;
  letter-spacing: -0.025em; margin-bottom: 0; }
.work-meta p { font-size: 12.5px; color: var(--faint); text-align: right; flex: none; max-width: 55%; line-height: 1.4; }

/* ---------- process ---------- */

.process { background: var(--bg); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 64px; background: none; border: 0; }
.step { background: transparent; border-top: 2px solid var(--line-mid); padding: 26px 0 0; }
.step:nth-child(1) { border-top-color: #E8532F; }
.step:nth-child(2) { border-top-color: #D18A2C; }
.step:nth-child(3) { border-top-color: #2E9B7C; }
.step:nth-child(4) { border-top-color: #5C6AD0; }
.step-num { font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: .04em; margin-bottom: 40px; color: var(--muted); }
.step:nth-child(1) .step-num { color: #E8532F; }
.step:nth-child(2) .step-num { color: #D18A2C; }
.step:nth-child(3) .step-num { color: #2E9B7C; }
.step:nth-child(4) .step-num { color: #5C6AD0; }
.step h3 { font-size: 20px; margin-bottom: 12px; }
.step p { font-size: 15px; color: var(--muted); line-height: 1.62; }

/* ---------- packages (tinted field) ---------- */

#packages { background: var(--tint-2); }

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; align-items: stretch; }
.price-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 40px 32px 36px;
  background: var(--white);
  display: flex; flex-direction: column; position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
.price-card:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -28px rgba(80,50,40,.35); }
.price-card.featured {
  border-color: transparent;
  background: linear-gradient(180deg, var(--accent-wash), var(--white) 40%);
  box-shadow: 0 0 0 2px var(--accent), 0 24px 44px -28px rgba(255,106,69,.6);
}
.price-tag {
  position: absolute; top: -12px; left: 32px;
  background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px;
}
.price-card h3 { font-size: 25px; margin-bottom: 10px; }
.price-card > .price-sub { font-size: 15px; color: var(--muted); margin-bottom: 20px; min-height: 46px; line-height: 1.55; }
.price-terms {
  font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.price-list { list-style: none; padding: 0; margin: 0 0 34px; display: grid; gap: 14px; }
.price-list li { font-size: 15px; color: var(--muted); display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.price-list svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--accent); }
.price-card .btn { margin-top: auto; width: 100%; }

.care-note {
  margin-top: 22px; padding: 34px 38px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
}
.care-note h4 { font-family: var(--display); font-size: 23px; font-weight: 500; letter-spacing: -0.03em; margin-bottom: 8px; }
.care-note p { font-size: 15.5px; color: var(--muted); max-width: 64ch; line-height: 1.6; }
.care-price { white-space: nowrap; }

/* ---------- faq ---------- */

.faq { background: var(--bg); }
.faq-list { margin-top: 56px; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary {
  list-style: none; cursor: pointer;
  padding: 28px 52px 28px 0;
  font-size: 18px; font-weight: 500;
  font-family: var(--display); letter-spacing: -0.025em;
  position: relative; transition: color .2s ease;
}
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--accent-deep); }
summary::after {
  content: ''; position: absolute; right: 8px; top: 50%;
  width: 10px; height: 10px;
  border-right: 1.6px solid var(--faint); border-bottom: 1.6px solid var(--faint);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s ease, border-color .2s ease;
}
summary:hover::after { border-color: var(--accent); }
details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
details p { padding: 0 64px 32px 0; color: var(--muted); font-size: 16px; line-height: 1.68; max-width: 76ch; }

/* ---------- cta (solid colour block) ---------- */

.cta {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(150deg, #FF7A4E 0%, #FF6A45 45%, #F1532C 100%);
  color: #fff;
}
.cta::before {
  content: ''; position: absolute; top: -240px; right: -120px;
  width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%);
  pointer-events: none;
}
.cta > .wrap { position: relative; }
.cta h2 { font-size: clamp(36px, 6vw, 72px); color: #fff; max-width: 17ch; margin: 0 auto 26px; }
.cta p { color: rgba(255,255,255,.9); max-width: 52ch; margin: 0 auto 42px; font-size: 18px; line-height: 1.6; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta .btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.cta .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.14); }
.cta-meta { margin-top: 34px; font-size: 13.5px; color: rgba(255,255,255,.75); }

/* ---------- footer ---------- */

.footer { padding-block: 52px; background: var(--bg); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between; }
.footer-links { display: flex; flex-wrap: wrap; gap: 28px; font-size: 14.5px; color: var(--muted); }
.footer-links a:hover { color: var(--accent-deep); }
.footer-legal { font-size: 13.5px; color: var(--faint); }

/* ---------- reveal ---------- */

.reveal { opacity: 0; transform: translateY(10px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
/* Photographs fade, they do not rise. Nine large images each lifting 22px read
   as the whole page sliding under the reader. */
.work-card.reveal { transform: none; }

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

/* ============================================
   Product mockups — light UI
   ============================================ */

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 6vw, 88px);
}
.hero-copy { max-width: none; }
.hero-visual { justify-self: stretch; }
.hero-visual { position: relative; }

.browser {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 46px 90px -34px rgba(80,50,40,.45);
}
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 11px 13px; background: #F7F2EF; border-bottom: 1px solid var(--line); }
.browser-dot { width: 8px; height: 8px; border-radius: 50%; background: #DCD2CC; flex: none; }
.browser-url {
  margin-left: 9px; flex: 1; height: 19px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 11px;
  font-size: 9px; letter-spacing: .02em; color: var(--faint);
  overflow: hidden; white-space: nowrap;
}
.browser-body { padding: 16px 18px 20px; background: var(--white); }

.device {
  width: 190px; border-radius: 32px;
  border: 8px solid #26222B; background: var(--white);
  overflow: hidden;
  box-shadow: 0 44px 80px -26px rgba(60,40,35,.55);
}
.device-notch { height: 20px; display: grid; place-items: center; }
.device-notch::after { content: ''; width: 52px; height: 4px; border-radius: 999px; background: #E7DED9; }
.device-screen { padding: 4px 13px 18px; }

.hero-visual .device { position: absolute; right: -10px; bottom: -46px; }

.mk-row { display: flex; align-items: center; gap: 7px; }
.mk-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-nav { display: flex; gap: 9px; }
.mk-line { height: 6px; border-radius: 4px; background: #E7DFDA; flex: none; }
.mk-line.faint { background: #F0EAE6; }
.mk-dot { width: 13px; height: 13px; border-radius: 5px; background: var(--accent); flex: none; }
.mk-photo {
  border-radius: 9px;
  background: linear-gradient(140deg, #FFC3A8, #FFE3D2 55%, #FFF1E8);
  border: 1px solid rgba(0,0,0,.04);
  overflow: hidden;
}
.mk-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 9px; }
.mk-h { font-family: var(--display); font-weight: 500; letter-spacing: -0.03em; color: var(--ink); line-height: 1.12; }
.mk-t { color: var(--muted); letter-spacing: -0.005em; }
.mk-t.tiny { font-size: 7.5px; }
.mk-t.dim { color: var(--faint); }
.mk-pill { display: inline-flex; align-items: center; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; letter-spacing: -0.01em; }
.mk-pill.ghost { background: transparent; border: 1px solid var(--line-mid); color: var(--muted); font-weight: 500; }
.mk-eyebrow { font-size: 6.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; }

.mkp-nav { margin-bottom: 16px; }
.mkp-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.mkp-title { font-size: 15px; margin-bottom: 7px; }
.mkp-sub { font-size: 7.5px; line-height: 1.5; margin-bottom: 10px; }
.mkp-cta { font-size: 7px; padding: 5px 11px; }
.mkp-shot { aspect-ratio: 1 / 1; }
.mkp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mkp-cards .mk-photo { aspect-ratio: 3 / 2; margin-bottom: 7px; }
.mkp-cards .mk-t { font-size: 7px; }

.mks-head { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 14px; }
.mks-title { font-size: 13px; margin-bottom: 3px; }
.mks-photo { aspect-ratio: 16 / 9; margin-bottom: 12px; }
.mks-list { display: grid; gap: 7px; margin-bottom: 13px; }
.mks-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; }
.mks-item .mk-t { font-size: 8px; }
.mks-item.on { border-color: var(--accent-soft); background: var(--accent-wash); }
.mks-btn {
  display: block; text-align: center; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 8.5px; font-weight: 600; padding: 9px; letter-spacing: -0.01em;
}

.work-thumb .browser { box-shadow: none; height: 100%; display: flex; flex-direction: column; }
.work-thumb .browser-body { flex: 1; }

/* ---------- photography ---------- */

.path { padding: 0; }

.band {
  position: relative;
  height: clamp(220px, 27vw, 360px);
  overflow: hidden;
}
.band img { width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,20,18,.55), rgba(26,20,18,.35) 50%, rgba(26,20,18,.6));
}
.band-quote { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; padding-inline: var(--gut); }
.band-quote p {
  font-family: var(--display); font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(20px, 3vw, 34px); line-height: 1.2; max-width: 22ch; color: #fff;
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .svc-grid, .work-grid, .steps, .price-grid { grid-template-columns: 1fr 1fr; }
  .paths { grid-template-columns: 1fr; }
  .path-body { padding: 4px 32px 34px; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-visual { max-width: 560px; }
  .hero h1 { font-size: clamp(40px, 6.4vw, 62px); }
  .hero-visual .device { right: 0; bottom: -34px; width: 168px; }
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav.is-open { background: rgba(255,252,250,.96); backdrop-filter: saturate(180%) blur(18px); }
  .nav.is-open .nav-links {
    display: flex; position: absolute; top: 80px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 10px var(--gut) 24px;
  }
  .nav.is-open .nav-links > a { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav-cta .btn-ghost { display: none; }
  .nav.is-open .nav-links { max-height: calc(100vh - 80px); overflow-y: auto; }


  .svc-grid, .work-grid, .steps, .price-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1 1 auto; }
  .care-note { flex-direction: column; align-items: flex-start; padding: 30px 26px; }
  .path-body { padding: 4px 26px 30px; }
  .svc, .price-card { padding: 30px 26px 32px; }
  .check-list { gap: 28px; }
  .hero-visual .device { display: none; }
  .browser-body { padding: 13px 14px 16px; }
  .mkp-title { font-size: 13px; }

  .nav-cta { gap: 8px; }
  .nav-cta .btn-primary { padding: 11px 18px; font-size: 14px; gap: 8px; }
}

@media (max-width: 390px) {
  .nav-cta .btn-primary { padding: 11px 14px; }
  .nav-cta .btn-primary .label { display: none; }
}

/* Portfolio thumbnails hold a real screenshot rather than the mockup kit. */
.work-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; border-radius: 12px; }
.work-thumb:has(img) { padding: 0; }

/* ---------- nav sector menu ---------- */
/* One entry instead of a link per vertical: the list of what we build is
   longer than the bar, and a clinic owner should see "dental" and "hair
   restoration" named rather than guess they are covered. */
.has-menu { position: relative; }
.menu-trigger {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}

.menu-trigger::after {
  content: ''; width: 0; height: 0; margin-left: 2px;
  border: 3.5px solid transparent; border-top-color: currentColor;
  transition: transform .2s ease;
}
.has-menu.open .menu-trigger,
.menu-trigger:hover { color: var(--accent); }
.has-menu.open .menu-trigger::after { transform: rotate(180deg) translateY(2px); }

.menu-panel {
  position: absolute; top: calc(100% + 14px); left: -22px; z-index: 80;
  display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 30px;
  background: var(--paper);
  border: 1px solid var(--line-mid);
  border-radius: var(--r-sm);
  padding: 24px 26px;
  box-shadow: 0 30px 60px -30px rgba(30,25,20,.4);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-menu.open .menu-panel { opacity: 1; visibility: visible; transform: none; }
.menu-head {
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 10px;
}
.menu-panel a {
  display: block; padding: 6px 0;
  font-family: var(--sans); font-size: 14.5px; font-weight: 450;
  letter-spacing: -0.01em; text-transform: none; color: var(--ink);
  white-space: nowrap;
}
.menu-panel a:hover { color: var(--accent); }

/* ---------- work filter ---------- */
.work-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 40px;
}
.work-filter button {
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); background: none;
  border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  padding: 9px 15px; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.work-filter button:hover { color: var(--ink); border-color: var(--ink); }
.work-filter button[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}
.work-count { font-size: 12.5px; color: var(--faint); margin-left: 6px; }
.work-grid { margin-top: 34px; }

@media (max-width: 900px) {
  .menu-panel { grid-template-columns: 1fr; gap: 18px; left: 0; }
}

/* ---------- nav menu on a phone ----------
   Must come after the base .menu-panel rules: same specificity, so the later
   block is the one that wins. In the drawer the sectors are simply listed —
   a 700px absolutely-positioned panel hangs off the screen, and burying the
   list behind a second tap defeats the point of naming the sectors at all. */
@media (max-width: 760px) {
  .nav.is-open .nav-links { max-height: calc(100vh - 80px); overflow-y: auto; }

  .has-menu { width: 100%; position: static; }
  .menu-trigger {
    width: 100%; padding: 14px 0; justify-content: flex-start;
    border-bottom: 1px solid var(--line); pointer-events: none;
    color: var(--faint);
  }
  .menu-trigger::after { display: none; }
  .menu-panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: block; background: none; border: 0; box-shadow: none;
    padding: 6px 0 10px; gap: 0;
  }
  .menu-head { margin: 14px 0 2px; }
  .menu-panel a {
    padding: 12px 0 12px 14px; border-bottom: 1px solid var(--line);
    white-space: normal;
  }
  .work-filter { margin-top: 28px; }
  .work-filter button { flex: 1 1 auto; }
}

/* ---------- work card: the site and the panel behind it ---------- */
.work-open { display: block; color: inherit; }
.work-links {
  display: flex; gap: 18px; margin: 10px 0 0;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
}
.work-links a { color: var(--muted); border-bottom: 1px solid var(--line-mid); padding-bottom: 3px; }
.work-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.work-links a + a { color: var(--ink); }

/* ---------- panel section ---------- */
/* Showing the back office is the part competitors leave out. A prospect who
   has clicked through the panel has already imagined running their business
   on it, which is most of the sale. */
.panel-open {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: start;
  margin-top: clamp(34px, 4vw, 54px);
  border-top: 1px solid var(--ink); padding-top: 26px;
}
.panel-open-label {
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 10px;
}
.panel-open-note { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
.panel-creds { margin: 0; display: grid; gap: 14px; }
.panel-creds div { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: baseline; }
.panel-creds dt {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.panel-creds dd { margin: 0; font-size: 15px; }
.panel-creds .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; }
.panel-creds a { border-bottom: 1px solid var(--line-mid); }
.panel-creds a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.services-note {
  margin: clamp(34px, 4vw, 52px) 0 0; padding-top: 24px;
  border-top: 1px solid var(--line-mid);
  font-size: 15.5px; line-height: 1.65; color: var(--muted); max-width: 68ch;
}
.services-note a { color: var(--ink); border-bottom: 1px solid var(--line-mid); }
.services-note a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* The page was nine sections and ten thousand pixels. Tighter rhythm, so the
   work arrives before a visitor decides to leave. */
section { padding-block: clamp(72px, 8vw, 112px); }

@media (max-width: 760px) {
  .panel-open { grid-template-columns: 1fr; }
  .panel-creds div { grid-template-columns: 84px 1fr; gap: 10px; }
  .work-links { gap: 14px; font-size: 11px; }
}
.as-link{
  font:inherit;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;
  border-bottom:1px solid var(--line-mid);
}
.as-link:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* Three columns: who it is for, and what they actually get. */
.menu-wide { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.menu-services { border-left: 1px solid var(--line); padding-left: 26px; }
@media (max-width: 900px) {
  .menu-wide { grid-template-columns: 1fr; }
  .menu-services { border-left: 0; padding-left: 0; }
}

/* ---------- phones ----------
   Most of this site is read on a phone — the headline says so — and the
   buyers arrive from an Instagram DM. Measured at 375px: the two links that
   matter most were 22px tall, which is half what a thumb needs. */
@media (max-width: 760px) {
  /* Apple's floor is 44px. These are the links to the work and the panels. */
  .work-links { gap: 0; flex-wrap: wrap; }
  .work-links a {
    min-height: 44px; display: inline-flex; align-items: center;
    padding-right: 20px; margin-right: 4px;
  }

  .work-filter { gap: 8px; }
  .work-filter button { min-height: 44px; padding: 12px 16px; font-size: 12px; }
  .work-count { width: 100%; margin: 4px 0 0; }

  .menu-head { font-size: 12px; letter-spacing: .14em; }
  .menu-panel a { min-height: 44px; display: flex; align-items: center; }

  .nav-toggle { min-width: 44px; min-height: 44px; display: grid; place-items: center; }

  /* Text links inside prose need room too. */
  .path-link { min-height: 44px; align-items: center; }
  .panel-creds dd a, .services-note a { padding-block: 4px; display: inline-block; }

  /* iOS zooms a page in when a focused field is under 16px. */
  input, textarea, select { font-size: 16px; }
}

@media (max-width: 760px) {
  /* Footer links measured 24px tall. The footer is where a thumb ends up
     after a scroll, so these matter more than their size suggested. */
  .footer-links { flex-direction: column; align-items: flex-start; gap: 0; }
  .footer-links a,
  .footer a { min-height: 44px; display: inline-flex; align-items: center; }

  /* The nav CTA was 40px — four short of a comfortable thumb. */
  .nav-cta .btn { min-height: 44px; padding-inline: 18px; }
}

/* ---------- work grid, per screen ----------
   Must come after the base rules. The spans set by script.js are desktop
   spans; below 980px they are replaced outright rather than left for the
   browser to squeeze into implicit columns. */
@media (max-width: 980px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-card { grid-column: span var(--span-t, 1); }
  .work-card[data-shape] .work-thumb { aspect-ratio: 4 / 3; height: auto; }
}
@media (max-width: 760px) {
  .work-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .work-card { grid-column: 1 / -1; }
  .work-card[data-shape] .work-thumb { aspect-ratio: 16 / 11; }
}

/* ---------- nav collapse ----------
   The vertical pages carry a sector menu, five section links and two buttons;
   in one row that needs about 1180px. The drawer used to start at 760px, so
   between the two the bar pushed its buttons past the right edge and every
   tablet could scroll the page sideways by up to 280px. The drawer now takes
   over wherever the row does not fit. Also replaces the open bar's old cream
   background, left over from before the warm-grey redesign. */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-toggle { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
  .nav.is-open { background: rgba(237,235,229,.97); backdrop-filter: saturate(180%) blur(18px); }
  .nav.is-open .nav-links {
    display: flex; position: absolute; top: 74px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 10px var(--gut) 24px;
    max-height: calc(100vh - 74px); overflow-y: auto;
  }
  .nav.is-open .nav-links > a {
    padding: 14px 0; width: 100%; min-height: 44px;
    border-bottom: 1px solid var(--line);
  }
  .has-menu { width: 100%; position: static; }
  .menu-trigger {
    width: 100%; padding: 14px 0; justify-content: flex-start;
    border-bottom: 1px solid var(--line); pointer-events: none; color: var(--faint);
  }
  .menu-trigger::after { display: none; }
  .menu-panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: block; background: none; border: 0; box-shadow: none; padding: 6px 0 10px;
  }
  .menu-services { border-left: 0; padding-left: 0; }
  .menu-head { margin: 14px 0 2px; font-size: 12px; }
  .menu-panel a {
    padding: 12px 0 12px 14px; border-bottom: 1px solid var(--line);
    white-space: normal; min-height: 44px; display: flex; align-items: center;
  }
}

/* "see all 9" is a link inside the count, not a sixth filter chip. It is a
   <button> inside .work-filter, so the chip rule reached it and drew a box
   beside the real "All" chip. */
.work-filter .as-link {
  border: 0; border-radius: 0; padding: 0; min-height: 0; background: none;
  font: inherit; text-transform: none; letter-spacing: 0; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line-mid);
}
.work-filter .as-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
@media (max-width: 760px) {
  .work-filter .as-link { min-height: 44px; display: inline-flex; align-items: center; }
}