/* ============================================================
   NORRTH STUDIO — SECTIONS
   Page-specific layout. Content lives in index.html; this file
   only positions it.
   ============================================================ */

/* Grid items default to min-width:auto, which can force a track wider than
   its 1fr share (and overflow the viewport) once content is long enough.
   Reset it everywhere a grid is used so single-column mobile layouts always
   shrink to the viewport instead of pushing text off-screen. */
.hero-grid > *, .problem-grid > *, .approach-inner > *, .pricing-grid > *,
.about-inner > *, .about-people > *, .contact-inner > *, .bearing-grid > *,
.work-grid > *{ min-width: 0; }

/* Hero */
.hero{ position: relative; overflow: hidden; padding: calc(var(--nav-height) + 4em) 0 5em; border-bottom: 1px solid var(--line); }
.compass-field{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.compass-svg{ width: 900px; max-width: 150vw; opacity: .4; }
.compass-svg .ring{ fill: none; stroke: var(--line-strong); stroke-width: 1; }
.compass-svg .ring-dashed{ stroke-dasharray: 3 8; }
.compass-svg .axis{ stroke: var(--line-strong); stroke-width: 1; }

.hero-grid{ position: relative; display: grid; grid-template-columns: 1fr; gap: 3em; align-items: center; }
.hero-copy{ max-width: 640px; }
.hero h1{ font-size: clamp(2.3rem, 6vw, 3.6rem); line-height: 1.08; }
.hero-sub{ color: var(--muted); font-size: 1.08rem; max-width: 540px; margin: 1.2em 0 2em; }
.hero-actions{ display: flex; gap: 1em; flex-wrap: wrap; }

.hero-visual{ position: relative; display: flex; align-items: center; justify-content: center; }
.hero-visual .logo-reveal-compass{ width: min(220px, 45vw); height: min(220px, 45vw); }
.hero-visual .logo-reveal-name{ width: min(220px, 45vw); margin-top: 14px; }

/* Trust / stats strip under hero */
.trust-strip{ padding: 1.8em 0; border-bottom: 1px solid var(--line); }

/* Problem / solution */
.problem{ background: var(--bg-alt); }
.problem-grid{ display: grid; grid-template-columns: 1fr; gap: 2.2em; }
.problem-col h3{ font-size: 1.05rem; margin-bottom: .4em; color: var(--ink); }
.problem-col.is-problem p{ color: var(--muted); }
.problem-arrow{ display: flex; align-items: center; justify-content: center; color: var(--accent); }
.problem-arrow svg{ transform: rotate(90deg); }

/* Services */
.bearing-grid{ display: grid; grid-template-columns: 1fr; gap: 1.4em; }

/* Portfolio */
.work-grid{ display: grid; grid-template-columns: 1fr; gap: 1.6em; }

/* Process */
.approach-inner{ display: grid; grid-template-columns: 1fr; gap: 3em; align-items: center; }
.steps{ list-style: none; padding: 0; margin: 1.6em 0 0; display: flex; flex-direction: column; gap: 1.4em; border-left: 1px solid var(--line); }
.steps li{ padding-left: 1.4em; color: var(--muted); position: relative; }
.steps li::before{ content: ''; position: absolute; left: -4px; top: .4em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.steps strong{ color: var(--ink); font-family: var(--font-display); font-weight: 600; }
.approach-visual{ display: flex; justify-content: center; }
.approach-visual .logo-reveal-compass{ width: 170px; height: 170px; }
.approach-visual .logo-reveal-name{ width: 170px; margin-top: 10px; }

/* Pricing */
.pricing-grid{ display: grid; grid-template-columns: 1fr; gap: 1.6em; align-items: stretch; }

/* About */
.about-inner{ display: grid; grid-template-columns: 1fr; gap: 2.5em; }
.about-people{ display: grid; grid-template-columns: 1fr; gap: 1.4em; }
.person-card{ display: flex; gap: 1em; align-items: flex-start; }
.person-avatar{
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent-light); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  flex-shrink: 0;
}
.person-name{ font-family: var(--font-display); font-weight: 600; margin-bottom: .2em; }
.person-role{ font-size: .85rem; color: var(--accent); margin-bottom: .4em; }
.person-bio{ color: var(--muted); font-size: .9rem; margin: 0; }

/* Contact */
.contact-inner{ display: grid; grid-template-columns: 1fr; gap: 3em; }
.contact-side{ display: flex; flex-direction: column; }
.contact-methods{ display: flex; flex-direction: column; gap: 1.2em; margin-top: 1.5em; }
.contact-method{ display: flex; gap: 1em; align-items: flex-start; }
.contact-method__icon{ width: 40px; height: 40px; min-width: 40px; background: var(--accent-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.contact-method__icon svg{ width: 20px; height: 20px; }
.contact-method__label{ font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .15em; }
.contact-method__value{ font-weight: 600; margin: 0; }
.contact-method__value a:hover{ color: var(--accent); }

/* Legal pages */
.legal{ padding: calc(var(--nav-height) + 3em) 0 5em; }
.legal .wrap{ max-width: 760px; }
.legal h2{ margin-top: 1.6em; font-size: 1.25rem; }
.legal p, .legal li{ color: var(--muted); }
.legal ul{ padding-left: 1.4em; list-style: disc; margin-bottom: 1em; }
.legal-updated{ color: var(--muted-dim); font-size: .85rem; }

/* ---------- Responsive ---------- */
@media (min-width: 640px){
  .about-people{ grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 720px){
  .problem-grid{ grid-template-columns: 1fr auto 1fr; align-items: center; }
  .problem-arrow svg{ transform: none; }
  .work-grid{ grid-template-columns: repeat(2,1fr); }
  .pricing-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (min-width: 860px){
  .bearing-grid{ grid-template-columns: repeat(3,1fr); }
  .approach-inner{ grid-template-columns: 1.1fr .9fr; }
  .contact-inner{ grid-template-columns: 1fr 1fr; }
  .hero-grid{ grid-template-columns: 1.15fr .85fr; }
}
@media (min-width: 1024px){
  .work-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 720px){
  .main-nav{
    position: fixed; top: var(--nav-height); left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5em 24px 1em;
    max-height: 0; overflow: hidden;
    transition: max-height .25s var(--ease);
  }
  .main-nav.is-open{ max-height: 420px; }
  .main-nav a:not(.btn){ display: block; padding: 1em 0; width: 100%; border-bottom: 1px solid var(--line); }
  .main-nav .btn{ margin: 1em 0; }
  .nav-toggle{ display: flex; }
}