/* ============================================================
   BURDS NERDS — bn-pages.css
   Shared styles for all inner pages (services, contact,
   portfolio, blog listing, blog posts, legal pages).

   Load order: bn-brand.css → bn-pages.css → page-specific sheet
   (bn-blog.css, etc. if needed)

   Philosophy: Every element is visible without JS. Animations
   and interactive states are additive enhancements only.
   ============================================================ */


/* ── SCROLL PROGRESS BAR ──────────────────────────────────────
   A thin accent line at the very top of the viewport that grows
   as the user reads down the page. Added to blog post pages.
   JS sets its width via style.width = percentage + '%'.
   z-index: 200 puts it above the nav (z-index: 100).
   ─────────────────────────────────────────────────────────── */

.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--bn-acc);
  z-index: 200;
  /* Linear transition keeps the bar visually snappy on scroll */
  transition: width 0.08s linear;
  pointer-events: none; /* never blocks clicks */
}


/* ── PAGE HERO (inner pages) ──────────────────────────────────
   Smaller than the homepage full-viewport hero. Provides
   consistent vertical rhythm at the top of every inner page.
   The padding-top accounts for the fixed nav (72px) plus
   breathing room above the eyebrow label.
   ─────────────────────────────────────────────────────────── */

.page-hero {
  background: var(--bn-bg);
  border-bottom: 1px solid var(--bn-bdr);
  padding: 128px 24px 72px;
}

/* Tighter bottom padding when the full-bleed grid follows immediately */
.page-hero--compact {
  padding-bottom: 40px;
}

.page-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Gold uppercase label above the main title */
.page-hero__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bn-acc);
  margin-bottom: 16px;
}

/* Main page title — Syne 800, large but smaller than homepage hero */
.page-hero__title {
  font-family: var(--bn-font-display);
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--bn-text);
  margin-bottom: 16px;
}

/* Subtitle / intro sentence below the title */
.page-hero__sub {
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--bn-text-muted);
  line-height: 1.65;
  max-width: 560px;
}


/* ── BREADCRUMB ───────────────────────────────────────────────
   Appears above the page hero eyebrow on inner pages.
   Tells the user where they are relative to the site root.
   Example: Home › Services › Web Design
   ─────────────────────────────────────────────────────────── */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  font-size: 12px;
  color: var(--bn-text-faint);
}

.breadcrumb a {
  color: var(--bn-text-faint);
  text-decoration: none;
  transition: color var(--bn-transition);
}
.breadcrumb a:hover { color: var(--bn-acc); }

/* The › separator between breadcrumb items */
.breadcrumb__sep {
  color: var(--bn-bdr-strong);
  user-select: none;
}

/* Current page item — not a link, just text */
.breadcrumb__current {
  color: var(--bn-text-muted);
}


/* ── PAGE LAYOUT (two-column: sidebar + content) ──────────────
   Used on the services page. The sidebar holds a sticky nav
   that highlights whichever section is currently in view.

   .page-layout--wide removes the sidebar column for pages
   that don't need it (contact, blog listing, legal pages).
   ─────────────────────────────────────────────────────────── */

.page-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  display: grid;
  /* 220px sidebar + flexible main content column */
  grid-template-columns: 220px 1fr;
  gap: 64px;
  align-items: start;
}

/* Make the aside column itself sticky as a direct grid child.
   Sticky on a grid item uses the grid container as the containing block,
   so it travels the full 6000+ px page height rather than being capped
   by the aside's own 235px content height (which breaks position:sticky
   on .sidebar-nav inside it). align-self:start keeps height = content. */
.page-layout > aside {
  position: sticky;
  top: 96px;
  align-self: start;
}

/* Single-column layout for pages without a sidebar */
.page-layout--wide {
  grid-template-columns: 1fr;
  max-width: 960px;
}

/* Narrow centered column for prose-heavy pages (blog posts, legal) */
.page-layout--prose {
  grid-template-columns: 1fr;
  max-width: 740px;
}


/* ── SIDEBAR NAV ──────────────────────────────────────────────
   A vertical list of anchor links on the left column of the
   services page. Sticks to the top of the viewport as the
   user scrolls. JS adds .is-active to the link whose section
   is currently in view.
   ─────────────────────────────────────────────────────────── */

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Stickiness is handled by .page-layout > aside (the grid item).
     Positioning sticky on this inner element would be capped by
     aside's own content height (~235px) and stop too early. */
}

.sidebar-nav__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bn-text-faint);
  margin-bottom: 8px;
  padding-left: 12px;
}

.sidebar-nav__item {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--bn-text-muted);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--bn-radius-sm);
  border-left: 2px solid transparent;
  transition: color var(--bn-transition), border-color var(--bn-transition),
              background var(--bn-transition);
}

.sidebar-nav__item:hover {
  color: var(--bn-text);
  background: var(--bn-surf);
}

/* Active state — set by JS as user scrolls through sections */
.sidebar-nav__item.is-active {
  color: var(--bn-acc);
  border-left-color: var(--bn-acc);
  background: var(--bn-surf);
}


/* ── SERVICE SECTIONS ─────────────────────────────────────────
   Each service (Web Design, Photography, etc.) gets its own
   section with an anchor ID. The sidebar nav links to these.
   ─────────────────────────────────────────────────────────── */

.service-section {
  padding: 48px 0;
  /* Visually separates sections from each other */
  border-top: 1px solid var(--bn-bdr);
}

/* Remove top border from the very first section */
.service-section:first-child {
  border-top: none;
  padding-top: 0;
}

.service-section__header {
  margin-bottom: 32px;
}

.service-section__title {
  font-family: var(--bn-font-display);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bn-text);
  line-height: 1.15;
  margin-bottom: 12px;
}

.service-section__intro {
  font-size: 15px;
  color: var(--bn-text-muted);
  line-height: 1.7;
  max-width: 600px;
}

/* Feature list — the bullet points under each service */
.service-section__features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

.service-section__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--bn-text-muted);
  line-height: 1.55;
}

/* Gold checkmark before each feature item */
.service-section__feature::before {
  content: '✓';
  font-size: 12px;
  font-weight: 700;
  color: var(--bn-acc);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Pricing callout within a service section */
.service-section__price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 24px;
}

.service-section__price-from {
  font-size: 13px;
  color: var(--bn-text-muted);
}

.service-section__price-num {
  font-family: var(--bn-font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bn-text);
  line-height: 1;
}

.service-section__price-unit {
  font-size: 14px;
  color: var(--bn-text-muted);
}


/* ── PROSE (blog post body, legal pages) ──────────────────────
   Applied to the main content wrapper of blog posts and legal
   pages. Provides consistent, readable typographic rhythm.

   The .prose selector scopes all these rules so they don't
   leak into nav, footer, or other components.
   ─────────────────────────────────────────────────────────── */

.prose {
  /* Comfortable reading measure — 65–75 characters per line */
  font-size: 16px;
  line-height: 1.8;
  color: var(--bn-text-muted);
}

/* All heading levels in prose use Syne */
.prose h2 {
  font-family: var(--bn-font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bn-text);
  line-height: 1.2;
  margin: 48px 0 16px;
}

.prose h3 {
  font-family: var(--bn-font-display);
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bn-text);
  line-height: 1.3;
  margin: 36px 0 12px;
}

.prose h4 {
  font-family: var(--bn-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--bn-text);
  margin: 28px 0 8px;
}

/* Standard body paragraphs */
.prose p {
  margin-bottom: 1.5em;
}

/* Lists */
.prose ul,
.prose ol {
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}

.prose li {
  margin-bottom: 0.5em;
  line-height: 1.7;
}

.prose ul li::marker {
  color: var(--bn-acc);
}

/* Blockquote — pull quote style, matches the Why section aesthetic */
.prose blockquote {
  border-left: 3px solid var(--bn-acc);
  padding: 4px 0 4px 20px;
  margin: 32px 0;
  font-style: italic;
  font-size: 1.05em;
  color: var(--bn-text);
}

/* Inline code */
.prose code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875em;
  background: var(--bn-surf-2);
  color: var(--bn-acc);
  padding: 2px 6px;
  border-radius: var(--bn-radius-sm);
  white-space: nowrap;
}

/* Code block — wraps <pre><code> pairs */
.prose pre {
  background: var(--bn-surf);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  padding: 20px 24px;
  overflow-x: auto;
  margin: 24px 0;
}

.prose pre code {
  background: none;
  color: var(--bn-text);
  padding: 0;
  white-space: pre;
  font-size: 13px;
  line-height: 1.7;
}

/* Images and figures within prose */
.prose figure {
  margin: 32px 0;
}

.prose figure img {
  width: 100%;
  border-radius: var(--bn-radius-md);
  border: 1px solid var(--bn-bdr);
}

.prose figcaption {
  font-size: 12px;
  color: var(--bn-text-faint);
  text-align: center;
  margin-top: 8px;
}

/* Horizontal rule — section divider within prose */
.prose hr {
  border: none;
  border-top: 1px solid var(--bn-bdr);
  margin: 48px 0;
}

/* Links within prose — underlined for clarity in reading context */
.prose a {
  color: var(--bn-acc);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--bn-acc-hover); }

/* Strong / em */
.prose strong { color: var(--bn-text); font-weight: 600; }
.prose em     { font-style: italic; }


/* ── FILTER BAR (blog listing, portfolio) ─────────────────────
   A row of toggle buttons that filter visible cards by category.
   JS adds/removes .is-active and shows/hides cards.
   ─────────────────────────────────────────────────────────── */

.filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--bn-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bn-text-muted);
  background: var(--bn-surf);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-full);
  padding: 8px 16px;
  cursor: pointer;
  transition: color var(--bn-transition), border-color var(--bn-transition),
              background var(--bn-transition);
  /* 44px minimum touch target height (WCAG 2.5.5) */
  min-height: 44px;
}

.filter-btn:hover {
  color: var(--bn-text);
  border-color: var(--bn-bdr-strong);
}

/* Active filter — gold outline, gold text */
.filter-btn.is-active {
  color: var(--bn-acc);
  border-color: var(--bn-acc);
  background: var(--bn-acc-subtle);
}


/* ── TAG / CATEGORY BADGE ─────────────────────────────────────
   Small pill labels used on blog cards and portfolio cards.
   Example: "SEO · WEB DESIGN" above a blog post title.
   ─────────────────────────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bn-acc);
  background: var(--bn-acc-subtle);
  border-radius: var(--bn-radius-full);
  padding: 3px 10px;
  white-space: nowrap;
}


/* ── INLINE CTA BLOCK ─────────────────────────────────────────
   A contained CTA block that can appear mid-page on services
   or at the bottom of a blog post. Less prominent than the
   full-page dark CTA on the homepage.
   ─────────────────────────────────────────────────────────── */

.inline-cta {
  background: var(--bn-surf);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-lg);
  padding: 40px 48px;
  margin: 48px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.inline-cta__text {}

.inline-cta__title {
  font-family: var(--bn-font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--bn-text);
  margin-bottom: 6px;
}

.inline-cta__sub {
  font-size: 14px;
  color: var(--bn-text-muted);
  line-height: 1.6;
}


/* ── FEATURE GROUPS (AI / Photography / Retouching sections) ──
   Each sub-category (e.g. "Conversational AI & Support") gets
   a .feature-group heading + a grid of .feature-items.
   Each item has a bold title and a one-line description.
   This is richer than a plain checkmark list and better suits
   services that need explanation, not just enumeration.
   ─────────────────────────────────────────────────────────── */

/* Two-column layout for service sub-sections side by side
   (used in the Web Design section: Creation + Additions) */
.service-section__two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

/* Sub-section heading within a service section */
.service-subsection__title {
  font-family: var(--bn-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bn-text);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bn-bdr);
}

.feature-group {
  margin-bottom: 40px;
}

/* Sub-category label above the feature grid */
.feature-group__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bn-acc);
  margin-bottom: 16px;
}

/* Grid of feature items — 2 columns on wide layouts */
.feature-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Individual feature item — title + description */
.feature-item {
  padding: 16px;
  background: var(--bn-surf);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  transition: border-color var(--bn-transition);
}

.feature-item:hover {
  border-color: var(--bn-bdr-strong);
}

.feature-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--bn-text);
  margin-bottom: 6px;
  line-height: 1.35;
}

/* Gold dot before each feature item title */
.feature-item__title::before {
  content: '— ';
  color: var(--bn-acc);
  font-weight: 700;
}

.feature-item__desc {
  font-size: 12.5px;
  color: var(--bn-text-muted);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .service-section__two-col {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}


/* ── PLAN / PRICING CARDS ─────────────────────────────────────
   Used on the services page to show tiered pricing (e.g.
   the three maintenance plan tiers). Three cards side by side.
   ─────────────────────────────────────────────────────────── */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.plan-card {
  background: var(--bn-surf);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color var(--bn-transition);
}

/* Featured / recommended plan gets a gold top border */
.plan-card--featured {
  border-color: var(--bn-acc);
}

.plan-card:hover {
  border-color: var(--bn-bdr-strong);
}

.plan-card--featured:hover {
  border-color: var(--bn-acc);
}

.plan-card__badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bn-acc);
  margin-bottom: -8px; /* pulls badge close to plan name */
}

.plan-card__name {
  font-family: var(--bn-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bn-text);
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.plan-card__price-num {
  font-family: var(--bn-font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bn-text);
  line-height: 1;
}

.plan-card__price-unit {
  font-size: 13px;
  color: var(--bn-text-muted);
}

.plan-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.plan-card__feature {
  font-size: 13px;
  color: var(--bn-text-muted);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.plan-card__feature::before {
  content: '✓';
  font-size: 11px;
  font-weight: 700;
  color: var(--bn-acc);
  flex-shrink: 0;
  margin-top: 1px;
}


/* ── RESPONSIVE ───────────────────────────────────────────────
   Mobile-first breakpoints mirror the homepage breakpoints
   (900px tablet threshold, 600px mobile threshold).
   ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Stack sidebar below page hero on tablet — sidebar disappears,
     content takes full width. The sticky sidebar nav doesn't work
     well on mobile so it's hidden; anchor links still work. */
  .page-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sidebar-nav {
    /* On mobile, show as a horizontal scroll list instead of vertical */
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--bn-bdr);
  }

  .sidebar-nav__label {
    width: 100%;
    padding-left: 0;
    margin-bottom: 4px;
  }

  .sidebar-nav__item {
    border-left: none;
    border: 1px solid var(--bn-bdr);
    border-radius: var(--bn-radius-full);
    padding: 6px 14px;
    font-size: 12px;
  }

  .sidebar-nav__item.is-active {
    border-color: var(--bn-acc);
  }

  .page-hero {
    padding: 108px 24px 56px;
  }

  .inline-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 28px;
  }
}

@media (max-width: 600px) {
  .page-hero {
    padding: 100px 20px 48px;
  }

  .page-layout {
    padding: 48px 20px 72px;
  }

  .service-section__features {
    grid-template-columns: 1fr;
  }

  .plan-grid {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    gap: 6px;
  }

  /* Contact page responsive */
  .contact-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 20px 72px;
  }

  .service-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}


/* ── CONTACT PAGE ─────────────────────────────────────────────
   Two-column layout: info panel (left) + form (right).
   On mobile, stacks to single column.
   ─────────────────────────────────────────────────────────── */

.contact-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 72px;
  align-items: start;
}

/* ── Info panel ── */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contact-info__heading {
  font-family: var(--bn-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bn-text);
  margin: 0;
}

.contact-info__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-info__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--bn-text);
}

.contact-info__item svg {
  flex-shrink: 0;
  color: var(--bn-acc);
}

.contact-info__item a {
  color: var(--bn-text);
  text-decoration: none;
  transition: color var(--bn-transition);
}

.contact-info__item a:hover { color: var(--bn-acc); }

.contact-info__social {
  display: flex;
  gap: 16px;
}

.contact-info__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius);
  color: var(--bn-text-muted);
  transition: border-color var(--bn-transition), color var(--bn-transition);
}

.contact-info__social a:hover {
  border-color: var(--bn-acc);
  color: var(--bn-acc);
}

/* ── Form wrapper ── */
.contact-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Honeypot (visually hidden, still in DOM for bots) ── */
.website-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

/* ── Form legend (service selection heading) ── */
.form-legend {
  font-family: var(--bn-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bn-text-muted);
  margin-bottom: 12px;
  padding: 0;
  border: none;
}

/* ── Service cards ── */
.service-cards {
  border: none;
  padding: 0;
  margin: 0 0 28px;
}

.service-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.service-card {
  /* The <label> acts as the interactive card */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--bn-transition), background var(--bn-transition);
  user-select: none;
}

.service-card:hover {
  border-color: var(--bn-bdr-strong);
}

/* Hide the native radio visually — keyboard/screen reader still uses it */
.service-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Gold ring + tint when selected */
.service-card:has(input[type="radio"]:checked) {
  border-color: var(--bn-acc);
  background: var(--bn-acc-subtle);
}

.service-card:has(input[type="radio"]:checked) .service-card__icon {
  color: var(--bn-acc);
}

/* Keyboard focus ring via the hidden radio */
.service-card:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--bn-acc);
  outline-offset: 2px;
}

.service-card__icon {
  color: var(--bn-text-muted);
  transition: color var(--bn-transition);
  line-height: 0;
}

.service-card__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bn-text);
  line-height: 1.2;
}

/* ── Form rows + groups ── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.form-row .form-group {
  margin-bottom: 0; /* row container handles spacing */
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--bn-text);
  letter-spacing: 0.01em;
}

.form-required { color: var(--bn-acc); margin-left: 2px; }
.form-optional { font-weight: 400; color: var(--bn-text-muted); }

.form-input,
.form-textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--bn-surf);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius);
  color: var(--bn-text);
  font-family: var(--bn-font-body);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color var(--bn-transition), box-shadow var(--bn-transition);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--bn-text-muted);
  opacity: 0.7;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--bn-acc);
  box-shadow: 0 0 0 3px var(--bn-acc-subtle);
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
}

/* ── Submit button ── */
.form-submit {
  margin-top: 4px;
  padding: 14px 36px;
  font-size: 15px;
}

/* ── Privacy + reCAPTCHA notices ── */
.form-privacy-note {
  font-size: 13px;
  color: var(--bn-text-muted);
  margin: 16px 0 20px;
  line-height: 1.5;
}

.form-privacy-note a {
  color: var(--bn-acc);
  text-decoration: underline;
}

.recaptcha-notice {
  font-size: 11px;
  color: var(--bn-text-muted);
  margin-top: 12px;
  line-height: 1.5;
}

.recaptcha-notice a {
  color: var(--bn-text-muted);
  text-decoration: underline;
  transition: color var(--bn-transition);
}

.recaptcha-notice a:hover { color: var(--bn-text); }

/* ── Inline form message ── */
.form-message {
  padding: 14px 18px;
  border-radius: var(--bn-radius);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 24px;
  border: 1px solid transparent;
}

.form-message--success {
  background: var(--bn-acc-subtle);
  border-color: var(--bn-acc);
  color: var(--bn-text);
}

.form-message--error {
  background: rgba(220, 53, 69, 0.08);
  border-color: rgba(220, 53, 69, 0.4);
  color: var(--bn-text);
}

/* ── Contact page — tablet / mobile ── */
@media (max-width: 900px) {
  .contact-wrap {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 48px 24px 80px;
  }
}

@media (max-width: 480px) {
  .service-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  /* Prevent iOS Safari from auto-zooming into form fields.
     iOS zooms when input font-size < 16px. Placed after the base
     14px rule so the cascade order is correct. */
  .form-input,
  .form-textarea {
    font-size: 16px;
  }
}


/* ============================================================
   PORTFOLIO
   ============================================================ */

/* ── Service pills (shared between cards, featured, overlay) ── */

.port-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.port-pill {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bn-acc);
  border: 1px solid rgba(184,134,11,0.45);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}

.port-pill--sm {
  font-size: 11px;
  padding: 2px 8px;
}


/* ── Featured hero card ──────────────────────────────────── */

.port-featured-wrap {
  padding: 0;
}

.port-featured {
  position: relative;
  height: 560px;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  background-color: #2A2825;
  background-image: var(--port-img, none);
  background-size: cover;
  background-position: top center;
  outline-offset: 3px;
}

.port-featured:focus  { outline: 2px solid var(--bn-acc); }

/* Hover overlay — "View Project" button */
.port-featured__hover {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 2;
}

.port-featured:hover .port-featured__hover,
.port-featured:focus .port-featured__hover { opacity: 1; }

.port-featured__view-btn {
  background: var(--bn-acc);
  color: #1A1818;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 100px;
  transform: translateY(10px);
  transition: transform 0.22s ease;
  pointer-events: none;
}

.port-featured:hover .port-featured__view-btn,
.port-featured:focus .port-featured__view-btn { transform: translateY(0); }

/* Bottom info strip */
.port-featured__bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 120px 40px 36px;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 55%, transparent 100%);
  z-index: 1;
}

.port-featured__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bn-acc);
  margin-bottom: 8px;
}

.port-featured__name {
  font-family: var(--bn-font-display);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 800;
  color: #F0EDE6;
  line-height: 1.15;
  margin-bottom: 14px;
}


/* ── Portfolio grid ──────────────────────────────────────── */

.port-section {
  padding: 0;
}

.port-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}


/* ── Individual grid cards ───────────────────────────────── */

.port-card {
  position: relative;
  height: 300px;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  background-color: #2A2825;
  background-image: var(--port-img, none);
  background-size: cover;
  background-position: top center;
  outline-offset: 3px;
}

.port-card--wide {
  grid-column: span 2;
  height: 300px;
}

.port-card:focus  { outline: 2px solid var(--bn-acc); }

/* Hover reveal */
.port-card__hover {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.port-card:hover .port-card__hover,
.port-card:focus .port-card__hover { opacity: 1; }

.port-card__view-btn {
  background: var(--bn-acc);
  color: #1A1818;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 100px;
  transform: translateY(8px);
  transition: transform 0.2s ease;
  pointer-events: none;
}

.port-card:hover .port-card__view-btn,
.port-card:focus .port-card__view-btn { transform: translateY(0); }

/* Always-visible bottom label */
.port-card__bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 56px 16px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.88), transparent);
  z-index: 1;
  transition: opacity 0.2s ease;
}

.port-card:hover .port-card__bottom,
.port-card:focus .port-card__bottom { opacity: 0; }

.port-card__name {
  font-size: 14px;
  font-weight: 600;
  color: #F0EDE6;
  margin-bottom: 7px;
  line-height: 1.3;
}


/* ── Testimonial break cards ─────────────────────────────── */

.port-break {
  grid-column: 1 / -1;
  background: var(--bn-acc-subtle);
  border-top: 1px solid var(--bn-bdr);
  border-bottom: 1px solid var(--bn-bdr);
  border-radius: 0;
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.port-break__quote {
  font-family: var(--bn-font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  font-style: italic;
  color: var(--bn-text);
  line-height: 1.4;
  max-width: 720px;
}

.port-break__credit {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--bn-text-muted);
  font-style: normal;
}


/* ── Overlay / lightbox ──────────────────────────────────── */

.port-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.port-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* Prevent body scroll when overlay is open */
body.overlay-open { overflow: hidden; }

.port-overlay__box {
  position: relative;
  background: var(--bn-bg);
  border: 1px solid var(--bn-bdr);
  border-radius: 12px;
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(16px);
  transition: transform 0.25s ease;
}

.port-overlay.is-open .port-overlay__box { transform: translateY(0); }

/* Close button */
.port-overlay__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: var(--bn-surface);
  border: 1px solid var(--bn-bdr);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--bn-text);
  transition: background 0.15s ease;
  z-index: 10;
}

.port-overlay__close:hover { background: var(--bn-bdr); }

/* Screenshot */
.port-overlay__img-wrap {
  width: 100%;
  height: 340px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: #2A2825;
}

.port-overlay__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Body */
.port-overlay__body {
  padding: 32px 36px 36px;
}

.port-overlay__name {
  font-family: var(--bn-font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--bn-text);
  margin-bottom: 14px;
  line-height: 1.1;
}

.port-overlay__pills {
  margin-bottom: 24px;
}

.port-overlay__quote {
  font-size: 15px;
  font-style: italic;
  line-height: 1.75;
  color: var(--bn-text-muted);
  border-left: 3px solid var(--bn-acc);
  padding-left: 20px;
  margin-bottom: 32px;
}

.port-overlay__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}


/* ── Portfolio responsive ────────────────────────────────── */

@media (max-width: 900px) {
  .port-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .port-card--wide {
    grid-column: span 2;
  }

  .port-featured {
    height: 420px;
  }

  .port-featured__bottom {
    padding: 80px 28px 28px;
  }

  .port-break {
    padding: 40px 28px;
  }
}

@media (max-width: 600px) {
  .port-grid {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .port-card,
  .port-card--wide {
    grid-column: auto;
    height: 240px;
  }

  .port-featured {
    height: 320px;
  }

  .port-featured__bottom {
    padding: 60px 20px 20px;
  }

  .port-featured__name {
    font-size: 20px;
  }

  .port-overlay__img-wrap {
    height: 220px;
  }

  .port-overlay__body {
    padding: 24px 20px 28px;
  }

  .port-break {
    padding: 28px 20px;
  }

  .port-break__quote {
    font-size: 18px;
  }
}


/* ============================================================
   PORTFOLIO HUB — Triptych accordion panels
   ============================================================ */

.port-hub {
  display: flex;
  height: calc(100vh - 72px); /* full viewport minus nav */
  min-height: 560px;
  max-height: 960px;
}

/* ── Individual panel ──────────────────────────────────────── */

.port-hub__panel {
  flex: 1;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  border-right: 1px solid rgba(255,255,255,0.08);
  transition: flex 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  outline-offset: -4px;
}

.port-hub__panel:last-child { border-right: none; }
.port-hub__panel--soon       { cursor: default; }

/* Accordion: on any hover, shrink idle panels and expand hovered one */
.port-hub:hover .port-hub__panel                              { flex: 0.80; }
.port-hub__panel:hover:not(.port-hub__panel--soon)            { flex: 1.40 !important; }

/* ── Background image ──────────────────────────────────────── */

.port-hub__bg {
  position: absolute;
  inset: -6%;                   /* oversized so scale never shows edges */
  background-color: #1A1818;    /* fallback until image loads */
  background-size: cover;
  background-position: center 50%;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.port-hub__panel:hover:not(.port-hub__panel--soon) .port-hub__bg {
  transform: scale(1.06);
}

/* ── Gradient overlay ──────────────────────────────────────── */

.port-hub__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.42) 50%,
    rgba(0,0,0,0.18) 100%
  );
  transition: background 0.45s ease;
  z-index: 1;
}

/* Darken idle panels when any panel is hovered */
.port-hub:hover .port-hub__panel .port-hub__overlay {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.65) 50%,
    rgba(0,0,0,0.45) 100%
  );
}

/* Lighten the actively hovered panel */
.port-hub__panel:hover:not(.port-hub__panel--soon) .port-hub__overlay {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.32) 55%,
    rgba(0,0,0,0.12) 100%
  );
}

/* ── Content layout ────────────────────────────────────────── */

.port-hub__content {
  position: absolute;
  inset: 0;
  padding: 44px 36px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
}

.port-hub__rule {
  width: 28px;
  height: 2px;
  background: var(--bn-acc);
  border: none;
  margin-bottom: 12px;
  display: block;
  flex-shrink: 0;
}

.port-hub__rule--muted { background: rgba(184,134,11,0.4); }

.port-hub__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bn-acc);
  display: block;
}

.port-hub__eyebrow--muted { color: rgba(184,134,11,0.45); }

/* ── Bottom content block ──────────────────────────────────── */

.port-hub__bottom {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.port-hub__title {
  font-family: var(--bn-font-display);
  font-size: clamp(34px, 3.8vw, 58px);
  font-weight: 800;
  color: #F0EDE6;
  line-height: 1.02;
  letter-spacing: -0.025em;
  transform: translateY(6px);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.port-hub__panel:hover .port-hub__title  { transform: translateY(0); }
.port-hub__title--muted                  { color: rgba(240,237,230,0.45); }

/* Description — hidden until hover */
.port-hub__desc {
  font-size: clamp(13px, 1vw, 15px);
  color: rgba(240,237,230,0.7);
  line-height: 1.65;
  max-width: 240px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.32s ease 0.06s, transform 0.32s ease 0.06s;
}

.port-hub__panel:hover .port-hub__desc { opacity: 1; transform: translateY(0); }

/* Always show on coming-soon panel (can't hover) */
.port-hub__desc--visible {
  opacity: 1 !important;
  transform: none !important;
  color: rgba(240,237,230,0.4);
}

/* CTA label — hidden until hover */
.port-hub__cta {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F0EDE6;
  border-bottom: 1px solid rgba(240,237,230,0.4);
  padding-bottom: 4px;
  width: fit-content;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.32s ease 0.12s, transform 0.32s ease 0.12s;
}

.port-hub__panel:hover .port-hub__cta { opacity: 1; transform: translateY(0); }

.port-hub__cta--soon {
  opacity: 1 !important;
  transform: none !important;
  color: rgba(240,237,230,0.3);
  border-bottom-color: rgba(240,237,230,0.12);
  letter-spacing: 0.14em;
}

/* ── Photography panel: slightly desaturated until photography is live ── */
.port-hub__panel--soon .port-hub__bg { filter: grayscale(25%) brightness(0.85); }

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 768px) {
  .port-hub {
    flex-direction: column;
    height: auto;
    max-height: none;
  }

  .port-hub__panel,
  .port-hub:hover .port-hub__panel {
    flex: none !important;
    height: 62vh;
    min-height: 360px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .port-hub__panel:last-child { border-bottom: none; }

  /* Always show desc + CTA on touch — no hover available */
  .port-hub__desc,
  .port-hub__cta {
    opacity: 1 !important;
    transform: none !important;
  }

  .port-hub__title { transform: none !important; }

  .port-hub__content { padding: 32px 28px 36px; }
}

@media (max-width: 480px) {
  .port-hub__panel,
  .port-hub:hover .port-hub__panel { height: 55vh; min-height: 300px; }

  .port-hub__title { font-size: clamp(30px, 10vw, 44px); }
}


/* ── 404 PAGE ──────────────────────────────────────────────────
   Full-viewport centered layout for the custom error page.
   The large "404" is decorative (aria-hidden) — screen readers
   get the h1 "Off the Grid" instead.
   ─────────────────────────────────────────────────────────── */

.error-page {
  min-height: calc(100vh - 72px); /* full viewport minus nav */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
}

.error-page__inner {
  max-width: 560px;
}

.error-page__code {
  font-family: var(--bn-font-display);
  font-size: clamp(96px, 20vw, 160px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--bn-acc);
  opacity: 0.25;
  margin: 0 0 -16px; /* pull title up toward the number */
  pointer-events: none;
  user-select: none;
}

.error-page__title {
  font-family: var(--bn-font-display);
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--bn-text);
  margin: 0 0 16px;
}

.error-page__sub {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--bn-text-muted);
  line-height: 1.6;
  margin: 0 0 40px;
}

.error-page__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.error-page__links {
  border-top: 1px solid var(--bn-bdr);
  padding-top: 32px;
}

.error-page__links-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bn-text-faint);
  margin: 0 0 12px;
}

.error-page__links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.error-page__links a {
  font-size: 14px;
  color: var(--bn-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.error-page__links a:hover {
  color: var(--bn-acc);
}