@media (min-width: 1024px) and (max-width: 1199px) { .nav-link { padding-inline: var(--space-3); } }
/* ================= HOME PAGE ================= */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }
section { position: relative; }
.sec { padding: var(--space-32) 0 0; }
.sec-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-12); }
.kicker { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); display: inline-flex; align-items: center; gap: var(--space-2); }
.kicker::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-pill); border: var(--border-thin) solid var(--color-border-strong); background: var(--k, var(--color-candy-pink)); }
.nav-links .nav-link { font-weight: var(--weight-semibold); }

/* Top tint: soft colour behind nav + hero, 100% at the top fading to 0% at the hero's bottom */
body.has-tint { background: transparent; } /* page colour comes from <html>; the hero layer sits in between */
/* Hero background: mint tint (100% top -> 0% at hero bottom) + designer grid + cursor spotlight */
.hero-bg { position: absolute; left: 0; right: 0; top: calc(var(--nav-h, 104px) * -1); bottom: 0; overflow: hidden; pointer-events: none;
  --tint: var(--color-candy-mint-soft); --spot: var(--color-candy-mint);
  --line-major: color-mix(in srgb, var(--color-text-primary) 7%, transparent);
  --line-minor: color-mix(in srgb, var(--color-text-primary) 3%, transparent);
  --fade: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); }
.hero-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--tint) 0%, transparent 100%); }
.hero-bg > span { position: absolute; inset: 0; -webkit-mask-image: var(--fade); mask-image: var(--fade); }
.bg-grid { background-image:
    linear-gradient(var(--line-major) 1px, transparent 1px), linear-gradient(90deg, var(--line-major) 1px, transparent 1px),
    linear-gradient(var(--line-minor) 1px, transparent 1px), linear-gradient(90deg, var(--line-minor) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px; background-position: -1px -1px; }
/* Spotlight: soft mint glow + stronger grid revealed around the cursor */
.bg-spot { --r: 280px; --line-hi: color-mix(in srgb, var(--color-text-primary) 16%, transparent); --line-lo: color-mix(in srgb, var(--color-text-primary) 4%, transparent);
  background:
    linear-gradient(var(--line-hi) 1px, transparent 1px) -1px -1px / 160px 160px,
    linear-gradient(90deg, var(--line-hi) 1px, transparent 1px) -1px -1px / 160px 160px,
    linear-gradient(var(--line-lo) 1px, transparent 1px) -1px -1px / 32px 32px,
    linear-gradient(90deg, var(--line-lo) 1px, transparent 1px) -1px -1px / 32px 32px,
    radial-gradient(circle var(--r) at var(--mx, 72%) var(--my, 32%), color-mix(in srgb, var(--spot) 85%, transparent), transparent 75%);
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx, 72%) var(--my, 32%), #000 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--mx, 72%) var(--my, 32%), #000 0%, #000 30%, transparent 100%); }
/* Hero — left aligned per wireframe */
.home-hero { position: relative; padding: var(--space-12) 0 var(--space-20); }
.home-hero > .wrap { position: relative; }
.home-hero-grid { display: grid; grid-template-columns: max-content minmax(0, 500px); justify-content: space-between; gap: var(--space-10); align-items: center; }
.home-hero-inner { position: relative; z-index: 1; display: grid; gap: var(--space-8); justify-items: start; }
.home-hero h1 { margin: 0; font-size: 90px; font-weight: var(--weight-bold); line-height: 1; letter-spacing: -0.02em; }
.home-hero .hero-sub { margin: 0; text-align: left; max-width: none; font-size: 32px; font-weight: var(--weight-regular); line-height: 1.5; color: var(--color-text-primary); }
.home-hero .line { display: block; white-space: nowrap; }
.home-hero .hero-ctas { justify-content: flex-start; }
@keyframes fs-visual-in { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: 0 0; } }
.hero-visual { margin: 0; aspect-ratio: 1 / 1; animation: fs-visual-in var(--dur-xslow) var(--ease-spring) 200ms both; }
.hero-visual img { display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
@media (max-width: 1199px) {
  .home-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .home-hero h1 { font-size: 72px; }
  .home-hero .hero-sub { font-size: 26px; }
  .hero-visual { width: min(100%, 560px); justify-self: center; }
}
@media (max-width: 767px) {
  .home-hero { padding-top: var(--space-8); }
  .home-hero h1 { font-size: clamp(40px, 11.5vw, 56px); }
  .home-hero .hero-sub { font-size: 20px; }
  .home-hero .line { white-space: normal; }
}

/* Selected work — editorial rows with cursor-following preview */
.work-list { list-style: none; margin: 0; padding: 0; border-top: var(--border-base) solid var(--color-border-strong); }
.work-row { border-bottom: var(--border-base) solid var(--color-border-strong); }
.work-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-6); padding: var(--space-8) var(--space-2); color: inherit; text-decoration: none; position: relative; transition: background-color var(--dur-base) var(--ease-calm), padding var(--dur-base) var(--ease-spring); }
.work-name { margin: 0; transition: transform var(--dur-base) var(--ease-spring); }
.work-cat { font-size: var(--text-body-lg); color: var(--color-text-muted); padding-bottom: var(--space-2); text-align: right; }
.work-link:hover, .work-link:focus-visible { background: var(--row-bg); padding-inline: var(--space-8); }
.work-link:hover .work-name { transform: translateX(var(--space-2)); }
.work-thumb { display: none; }
.work-preview { position: fixed; left: 0; top: 0; z-index: var(--z-dropdown); width: 340px; aspect-ratio: 4 / 3; pointer-events: none; border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sticker-lg); overflow: hidden; opacity: 0; transform: scale(.7) rotate(-6deg); transition: opacity var(--dur-fast) var(--ease-calm), transform var(--dur-base) var(--ease-spring); }
.work-preview.is-on { opacity: 1; transform: scale(1) rotate(-3deg); }
.work-more { display: flex; justify-content: flex-end; margin-top: var(--space-10); }
@media (max-width: 767px) { .work-more { justify-content: stretch; } .work-more .btn { width: 100%; } }
.work-preview.is-wide { width: 420px; aspect-ratio: 16 / 10; }
.mock-img { position: absolute; inset: 0; display: grid; grid-template-rows: 26px 1fr; background: var(--color-bg-surface); }
.mock-img img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; display: block; }
.mock { position: absolute; inset: 0; display: grid; grid-template-rows: 13% 1fr; }
.mock-bar { background: var(--color-bg-surface); border-bottom: var(--border-thin) solid var(--color-border-strong); display: flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-3); }
.mock-bar i { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-border-subtle); }
.mock-body { padding: 9%; display: grid; gap: var(--space-3); align-content: start; }
.mock-body b { display: block; height: 14px; border-radius: var(--radius-pill); background: var(--color-bg-inverse); }
.mock-body b:nth-child(2) { width: 55%; opacity: .35; height: 10px; }
.mock-body .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-2); }
.mock-body .row span { aspect-ratio: 1; border-radius: var(--radius-sm); border: var(--border-thin) solid var(--color-border-strong); background: var(--color-bg-surface); }
.mock-phone { position: absolute; right: 10%; bottom: -8%; width: 30%; aspect-ratio: 9 / 17; background: var(--color-bg-surface); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-sticker-sm); }
@media (max-width: 767px), (pointer: coarse) {
  .work-link { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-6) 0; }
  .work-link:hover, .work-link:focus-visible { padding-inline: 0; background: none; }
  .work-cat { text-align: left; font-size: var(--text-body-md); padding: 0; }
  .work-thumb { display: block; position: relative; aspect-ratio: 16 / 10; border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--space-3); }
  .work-preview { display: none; }
}

/* Folk Sites */
.sites { margin-top: var(--space-32); padding: var(--space-24) 0; background: var(--color-candy-lemon-soft); border-block: var(--border-base) solid var(--color-border-strong); }
.sites-head h2 .line { display: block; white-space: nowrap; }
@media (max-width: 1100px) { .sites-head { grid-template-columns: minmax(0, 1fr) !important; gap: var(--space-5) !important; } .sites-head h2 .line { white-space: normal; } }
.sites-head { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-12); align-items: end; margin-bottom: var(--space-12); }
.sites-head h2 { margin: 0; }
.sites-head p { margin: 0; font-size: var(--text-body-lg); color: var(--color-text-secondary); max-width: 34ch; }
.price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
.price-grid .pricing-card { padding: var(--space-6); border-radius: var(--radius-lg); }
.price-grid .pricing-card > .btn { width: 100%; }
.price-grid .pricing-price { font-size: var(--text-heading-lg); margin: var(--space-1) 0 0; }
.price-grid h3 { margin: 0; }
.price-grid .pricing-card { gap: var(--space-4); display: flex; flex-direction: column; }
/* Equal-height cards: the button sits at the bottom of every card */
.price-grid .pricing-card > .badge { align-self: flex-start; }
.price-grid .pricing-card > .btn { margin-top: auto; }
.nav-actions { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 1100px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .navbar-inner .btn-wa-nav { display: inline-flex; padding-inline: var(--space-3); } .wa-label { display: none; } }
.sites-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6); margin-top: var(--space-12); }
.sites-foot p { margin: 0; }

/* Services */
.svc-list { list-style: none; margin: 0; padding: 0; border-top: var(--border-base) solid var(--color-border-strong); }
.svc { border-bottom: var(--border-base) solid var(--color-border-strong); }
.svc a { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-6); padding: var(--space-6) var(--space-2); color: inherit; text-decoration: none; transition: background-color var(--dur-base) var(--ease-calm); }
.svc a:hover, .svc a:focus-visible { background: var(--svc-bg); }
.svc-dot { width: 40px; height: 40px; border-radius: var(--radius-pill); border: var(--border-base) solid var(--color-border-strong); background: var(--svc-bg); display: grid; place-items: center; transition: transform var(--dur-base) var(--ease-spring); }
.svc a:hover .svc-dot { transform: rotate(90deg) scale(1.1); background: var(--color-bg-surface); }
.svc-name { margin: 0; }
.svc-desc { margin: 0; color: var(--color-text-muted); }
.svc-desc b { color: var(--color-text-primary); font-weight: var(--weight-bold); }
@media (max-width: 767px) {
  .svc a { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
  .svc-desc { grid-column: 2; }
  .sites-head { grid-template-columns: 1fr; gap: var(--space-4); }
  .sites-head h2 .line { white-space: normal; }
  .price-grid { grid-template-columns: 1fr; }
  .sec { padding-top: var(--space-20); }
  .sites { margin-top: var(--space-20); padding: var(--space-16) 0; }
}

/* Footer */
.home-footer { margin-top: var(--space-32); }
.brand-big { font-size: clamp(52px, 14vw, 220px); font-weight: var(--weight-bold); letter-spacing: -0.06em; line-height: .85; margin: 0; }
.brand-big sup { font-size: .22em; vertical-align: top; position: relative; top: .5em; letter-spacing: 0; }
.footer-tag { font-size: var(--text-heading-lg); font-weight: var(--weight-semibold); letter-spacing: -0.02em; margin: var(--space-6) 0 0; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-16); padding-top: var(--space-6); border-top: var(--border-thin) solid var(--color-text-inverse); font-size: var(--text-body-sm); }
.footer-row ul { display: flex; flex-wrap: wrap; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.footer-row a { color: inherit; opacity: .85; text-decoration: none; } .footer-row a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.skip { position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-toast); } .skip:focus { top: var(--space-4); }

/* CMS-edited hero copy: keep the typed line breaks, but let an overlong line wrap instead of squeezing the visual */
.home-hero .home-hero-inner { min-width: 0; }
.home-hero h1 .line, .home-hero .hero-sub .line { white-space: normal; text-wrap: balance; }