/* ============================================================
   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 (84px) plus
   breathing room above the eyebrow label.
   ─────────────────────────────────────────────────────────── */

.page-hero {
  background: var(--bn-bg);
  border-bottom: 1px solid var(--bn-bdr);
  padding: 140px 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-text);
  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-text);
  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-text);
  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;
}

/* Services page: sidebar narrows the content area, so force 2×2 */
.service-section .plan-grid {
  grid-template-columns: repeat(2, 1fr);
}

.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);
}

/* "Starting at" label above a project-tier price */
.plan-card__price-from {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bn-text-faint);
  margin-bottom: -8px;
}

.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;
}

/* "Everything in [tier], plus:" lead-in line on stacked project tiers */
.plan-card__feature--lead {
  font-weight: 700;
  color: var(--bn-text);
}
.plan-card__feature--lead::before {
  content: '+';
}


/* ── Plan Platform Label ─────────────────────────────────────── */
.plan-platform-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bn-text-faint);
  transition: color var(--bn-transition);
}
.plan-platform-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bn-bdr);
}

/* ── Other Platforms 2-column grid ──────────────────────────── */
.plan-grid--platforms {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 0;
}

/* Keep 2 columns on the services sidebar layout too */
.service-section .plan-grid--platforms {
  grid-template-columns: repeat(2, 1fr);
}

/* ── 3-up grid (website tiers, Code Care plans, SEO offerings) ── */
.plan-grid--three {
  grid-template-columns: repeat(3, 1fr);
}
/* Hold 3-up even inside the narrower services sidebar layout */
.service-section .plan-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Solo grid: single centered, width-capped card (Squarespace) ── */
.plan-grid--solo {
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
}
/* Keep the solo card centered inside the services sidebar layout too */
.service-section .plan-grid--solo {
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
}

/* Plan card subtitle — short description beneath the name/badge row */
.plan-card__sub {
  font-size: 13px;
  color: var(--bn-text-faint);
  line-height: 1.55;
  margin: 4px 0 4px;
  transition: color var(--bn-transition);
}

/* ── Platform badge (Squarespace Sites / Custom Sites) ────────── */
/* Kept from the retired plan-card-wide component — still used on
   the Squarespace Care and Code Care cards inside plan-grid--platforms */
.plan-card-wide__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bn-acc);
  border: 1px solid var(--bn-acc);
  border-radius: 4px;
  padding: 3px 8px;
  line-height: 1.4;
  flex-shrink: 0;
}

/* ── 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;
  }

  .page-layout > aside {
    position: sticky;
    top: 84px;
    z-index: 10;
    /* Bleed background to screen edges so scrolling content can't show
       through the sticky bar. Negative margins cancel the parent padding,
       compensating padding keeps content aligned. */
    background: var(--bn-bg);
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  }

  .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;
    min-height: 44px;
    display: flex;
    align-items: center;
    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: 112px 20px 48px;
  }

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

  /* Re-match aside bleed to the narrower 20px parent padding */
  .page-layout > aside {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }

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

  .plan-grid,
  .service-section .plan-grid,
  .plan-grid--three,
  .service-section .plan-grid--three,
  .plan-grid--solo {
    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: 44px;
  height: 44px;
  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;
}

/* "Not Sure" helper card — full width, below the six service cards */
.service-card--wide {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 14px;
  margin-top: 10px;
  padding: 16px 18px;
}
.service-card--wide .service-card__icon {
  flex-shrink: 0;
}
.service-card__wide-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.service-card__desc {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--bn-text-muted);
  line-height: 1.45;
}

/* ── 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;
  min-height: 44px;
  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: 16px; /* 16px prevents iOS Safari auto-zoom (any size <16 triggers zoom) */
  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;
}

/* ── Inline validation errors ── */
.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.form-error {
  font-size: var(--bn-fs-caption);
  color: #C0392B;
  margin-top: 4px;
  display: none;
}

.form-error.is-visible { display: block; }

/* Service cards — error ring when none selected on submit */
.service-cards.has-error {
  border: 1.5px solid #C0392B;
  border-radius: var(--bn-radius-md);
  padding: 8px;
}

.service-cards .form-error {
  text-align: center;
  margin-top: 8px;
}

/* ── 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;
}

/* Hide the floating reCAPTCHA badge — notice text in the form satisfies Google's policy */
.grecaptcha-badge { visibility: hidden !important; }

.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;
  }
}

@media (max-width: 400px) {
  /* On very small phones, 3-up service cards wrap awkwardly — go single column */
  .service-cards__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   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;
}


/* ── Portfolio section ───────────────────────────────────── */

.port-section {
  padding: 56px 24px 88px;
}

.port-section__inner {
  max-width: 1200px;
  margin: 0 auto;
}


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

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


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

.port-card {
  background: var(--bn-surf);
  border: 1px solid var(--bn-bdr);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 3px;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

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

.port-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
  border-color: var(--bn-bdr-strong);
}

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


/* Screenshot area */
.port-card__img-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: var(--bn-surf-2);
}

.port-card--wide .port-card__img-wrap {
  height: 256px;
}

.port-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform 500ms ease;
  pointer-events: none;
  user-select: none;
}

.port-card:hover .port-card__img { transform: scale(1.025); }


/* Hover overlay */
.port-card__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.2s ease;
}

.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); }


/* Card info bar — always visible below the screenshot */
.port-card__info {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--bn-bdr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.port-card__info-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.port-card__name {
  font-family: var(--bn-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--bn-text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.port-card__cta {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--bn-acc);
  white-space: nowrap;
  flex-shrink: 0;
  transition: letter-spacing 150ms ease;
}

.port-card:hover .port-card__cta { letter-spacing: 0.11em; }


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

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

.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-bg);
  border: 1px solid var(--bn-acc);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--bn-acc);
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 10;
}

.port-overlay__close:hover {
  background: var(--bn-acc);
  color: #1A1818;
}

/* 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);
    gap: 16px;
  }

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

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

@media (max-width: 600px) {
  .port-section {
    padding: 40px 16px 60px;
  }

  .port-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .port-card,
  .port-card--wide,
  .port-card--wide-right {
    grid-column: auto;
  }

  .port-card--wide .port-card__img-wrap {
    height: 220px;
  }

  .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
   ============================================================ */

/* ── Intro line (frames the triptych) ─────────────────────────
   Single H1 statement above the panels. Matches the homepage's
   two-line, period-separated voice. Compact vertical rhythm so
   the triptych below remains the dominant element on the page.
   ─────────────────────────────────────────────────────────── */

.port-hub-intro {
  background: var(--bn-bg);
  /* 140px top accounts for the 84px fixed nav plus breathing room.
     Bottom is tight to the triptych so the two read as one section. */
  padding: 140px 24px 56px;
  text-align: center;
}

.port-hub-intro__title {
  font-family: var(--bn-font-display);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--bn-text);
  margin: 0 auto;
  max-width: 800px;
}

@media (max-width: 768px) {
  .port-hub-intro { padding: 112px 20px 40px; }
}

@media (max-width: 480px) {
  .port-hub-intro { padding: 104px 16px 32px; }
}


.port-hub {
  display: flex;
  /* Subtract the intro's padding + line height from viewport height
     so the panels keep their commanding presence without forcing
     the user to scroll past empty space. */
  height: calc(100vh - 84px - 200px);
  min-height: 480px;
  max-height: 820px;
}

/* ── 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 — animated gradient + grain ────────────────── */
/*    No image files needed. Each panel has a distinct animated  */
/*    gradient that shifts through brand-aligned color palettes. */
/*    A SVG feTurbulence grain layer sits above for texture.     */

.port-hub__bg {
  position: absolute;
  inset: -6%;                   /* oversized so scale never shows edges */
  background-size: 550% 550%;   /* larger field = more colour to sweep through */
  background-repeat: no-repeat;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Spotlight removed — title colour is the sole hover interaction */

/* Grain texture — SVG feTurbulence noise at low opacity */
.port-hub__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
  opacity: 0.22;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* No bg scale on hover — title colour change is the only hover signal */

/* ── Panel 1: Web Design — Amber Architecture ──────────────── */
/*    Deep charcoal → warm gold → dark amber.                   */
/*    Diagonal sweep — structured, precise, deliberate.          */

.port-hub__panel--web .port-hub__bg {
  background-image: linear-gradient(
    135deg,
    #0A0806 0%,
    #1C1409 18%,
    #3A2208 35%,
    #7A5200 48%,
    #B8860B 55%,
    #6B4A08 66%,
    #2A1A06 80%,
    #0E0B05 100%
  );
  animation: hub-web 22s ease-in-out infinite alternate;
}

/* ── Panel 2: Photography — The Darkroom ───────────────────── */
/*    Near-black → deep sienna → warm burnt amber.              */
/*    Slow, intimate — like an enlarger light opening up.        */

.port-hub__panel--photo .port-hub__bg {
  background-image: linear-gradient(
    165deg,
    #060302 0%,
    #180800 18%,
    #3A1400 34%,
    #7A2E00 50%,
    #B85200 57%,
    #5C2200 68%,
    #1C0900 82%,
    #060200 100%
  );
  animation: hub-photo 26s ease-in-out infinite alternate;
}

/* ── Panel 3: AI Solutions — Deep Signal ───────────────────── */
/*    Deep navy → electric amber → cool indigo.                  */
/*    Fluid, multi-axis movement — intelligence in motion.       */

.port-hub__panel--ai .port-hub__bg {
  background-image: linear-gradient(
    155deg,
    #050810 0%,
    #0C1422 18%,
    #1A2438 34%,
    #3E2600 50%,
    #C49A00 57%,
    #3D2A00 68%,
    #101828 82%,
    #040709 100%
  );
  animation: hub-ai 15s ease-in-out infinite alternate;
}

/* ── Keyframes ─────────────────────────────────────────────── */
/* Each panel traces a distinct multi-stop path through its     */
/* gradient field — larger swings, more waypoints, organic      */
/* non-linear arcs so the light feels alive rather than linear. */

@keyframes hub-web {
  0%   { background-position:   0%  15%; }
  28%  { background-position: 100%  70%; }
  55%  { background-position:  35%  95%; }
  78%  { background-position:  85%  25%; }
  100% { background-position:  10%  55%; }
}

@keyframes hub-ai {
  0%   { background-position:  10%   0%; }
  20%  { background-position:  90%  35%; }
  42%  { background-position:  15%  80%; }
  65%  { background-position:  80%  10%; }
  85%  { background-position:  40%  90%; }
  100% { background-position:  70%  45%; }
}

@keyframes hub-photo {
  0%   { background-position:   5%  75%; }
  30%  { background-position:  95%  15%; }
  58%  { background-position:  45%  90%; }
  80%  { background-position:  85%  40%; }
  100% { background-position:  20%  60%; }
}

/* Hover: non-hovered panels pause their shimmer; hovered panel
   swaps to a fresh fast animation so the gradient visibly kicks
   in instantly. Mirrors the homepage Work section behavior. */
.port-hub:hover .port-hub__panel:not(:hover) .port-hub__bg {
  animation-play-state: paused;
}
.port-hub__panel:hover:not(.port-hub__panel--soon) .port-hub__bg {
  animation: port-hub-shimmer-fast 2.5s linear infinite;
}
@keyframes port-hub-shimmer-fast {
  0%   { background-position:   0%   0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position:   0%   0%; }
}

/* Freeze animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .port-hub__bg { animation: none !important; }
}

/* ── Gradient overlay ──────────────────────────────────────── */
/* Dark only in the bottom ~50% where text lives.              */
/* Fades to pure zero above that — no gray wash on the         */
/* gradient art in the upper portion of the panel.             */

.port-hub__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.90) 0%,
    rgba(0,0,0,0.00) 52%
  );
  transition: background 0.45s ease;
  z-index: 1;
}

/* No separate hover overlay — all panels use the same base.
   Photography already proved this looks correct; Web Design
   and AI now match it exactly on hover. */

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

.port-hub__content {
  position: absolute;
  inset: 0;
  padding: 56px 36px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  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;
  margin-bottom: 6px;
}

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

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

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

.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;
  /* Always settled — hover only changes color, not position. */
  transition: color 0.35s ease;
}

.port-hub__panel:hover .port-hub__title { color: #D4A017; }
.port-hub__title--muted                 { color: #F0EDE6; }

/* Description — always visible at reduced opacity, full on hover.
   Visitors read every panel's purpose without needing to mouse over,
   and mobile (no hover) parity comes for free. */
.port-hub__desc {
  font-size: clamp(13px, 1vw, 15px);
  color: rgba(240,237,230,0.78);
  line-height: 1.65;
  max-width: 240px;
  opacity: 0.85;
  transition: opacity 0.32s ease;
}

.port-hub__panel:hover .port-hub__desc { opacity: 1; }

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

/* CTA — visible by default but quiet, gold accent on hover so the
   interaction reward is still satisfying without hiding information. */
.port-hub__cta {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240,237,230,0.7);
  border-bottom: 1px solid rgba(240,237,230,0.25);
  padding-bottom: 4px;
  width: fit-content;
  transition:
    color              0.32s ease,
    border-bottom-color 0.32s ease;
}

.port-hub__panel:hover .port-hub__cta {
  color: #D4A017;
  border-bottom-color: #D4A017;
}

.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;
}

/* ── 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: 44px 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 - 84px); /* 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);
}

/* ── Portfolio overlay — industry tag ────────────────────────── */
.port-overlay__industry {
  display: inline-block;
  margin: 6px 0 10px;
  padding: 3px 9px;
  background: var(--bn-acc-subtle);
  color: var(--bn-acc);
  border-radius: var(--bn-radius-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Portfolio overlay — case study description ───────────────── */
.port-overlay__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--bn-text-muted);
  margin: 12px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bn-bdr);
}