/* ═══════════════════════════════════════════════
   CONCIERGE CROW — The Rookery
   Palette and rules: Branding/Visual-World.md
   ═══════════════════════════════════════════════ */

:root{
  --crow:    #3950AE;   /* ground. from the logo silhouette */
  --crow-dk: #2B3E8C;
  --bone:    #F2EDE4;   /* paper */
  --ink:     #0B0B0C;   /* type only, never the art field */
  --signal:  #FF3B1F;   /* one per view */

  --serif: "Instrument Serif", "Times New Roman", Times, serif;
  --mono:  "JetBrains Mono", ui-monospace, "Courier New", monospace;

  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);
  line-height:1.5;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
ol,ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* ── paper grain, sits over everything ─────────── */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.055; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ── type ──────────────────────────────────────── */
.display{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.6rem,1.2rem + 7.4vw,7rem);
  line-height:.92;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin:.15em 0 .45em;
  color:var(--bone);
  /* misregistration: the press didn't line up.
     kept faint on purpose — at full strength it reads as a 3D shadow,
     which is the opposite of a flat mis-struck print. */
  text-shadow:
    -0.008em 0 0 rgba(0,220,255,.30),
     0.008em 0 0 rgba(255,0,140,.24);
}
.display--dark{ color:var(--crow); text-shadow:-0.007em 0 0 rgba(0,190,255,.26), 0.007em 0 0 rgba(255,0,120,.20); }

.mono{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; }

.eyebrow{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(242,237,228,.62);
  margin:0 0 1.6rem; padding-bottom:.9rem;
  border-bottom:1px solid rgba(242,237,228,.22);
}
.eyebrow--dark{ color:rgba(11,11,12,.55); border-bottom-color:rgba(57,80,174,.28); }

.lede{ font-size:clamp(1.05rem,1rem + .5vw,1.45rem); line-height:1.42; max-width:44ch; color:rgba(242,237,228,.9); margin:0 0 2.2rem; }
.lede--tight{ margin-inline:auto; }

.fineprint{ color:rgba(11,11,12,.5); margin-top:2.5rem; }

/* ── nav ───────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem var(--gutter);
  background:var(--crow);
  border-bottom:1px solid rgba(242,237,228,.2);
}
.nav__mark{
  display:flex; flex-direction:column; line-height:.95; text-decoration:none;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; color:var(--bone);
}
.nav__links{ display:flex; gap:clamp(.9rem,2.4vw,2.2rem); }
.nav__links a{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  color:rgba(242,237,228,.78); text-decoration:none; padding-bottom:2px;
  border-bottom:1px solid transparent; transition:color .15s, border-color .15s;
}
.nav__links a:hover{ color:var(--bone); border-bottom-color:var(--signal); }

/* ── buttons ───────────────────────────────────── */
.btn{
  display:inline-block; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.15em; text-transform:uppercase; text-decoration:none;
  padding:.95em 1.7em; border:1px solid transparent; transition:transform .12s, background .15s, color .15s;
}
.btn:active{ transform:translateY(1px); }
.btn--signal{ background:var(--signal); color:var(--bone); }
.btn--signal:hover{ background:var(--bone); color:var(--crow); }
.btn--ghost{ border-color:rgba(242,237,228,.45); color:var(--bone); }
.btn--ghost:hover{ background:rgba(242,237,228,.12); }
.btn--lg{ padding:1.1em 2.4em; font-size:.78rem; }

/* ── hero ──────────────────────────────────────── */
.hero{ background:var(--crow); color:var(--bone); padding:clamp(3rem,7vw,6.5rem) 0 clamp(3.5rem,8vw,7rem); }
.hero__inner{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:900px){ .hero__inner{ grid-template-columns:1.05fr .95fr; } }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.hero__plate figcaption,
.how__plate figcaption{ margin-top:.8rem; color:rgba(242,237,228,.55); }
.hero__plate img{
  width:100%;
  border:1px solid rgba(242,237,228,.28);
}

/* ── ray band ──────────────────────────────────── */
.band--ray{ line-height:0; border-block:1px solid rgba(57,80,174,.35); }
.band--ray img{ width:100%; height:clamp(120px,17vw,240px); object-fit:cover; }

/* ── services ──────────────────────────────────── */
.services{ background:var(--bone); padding:clamp(3.5rem,8vw,7rem) 0; }
.grid{
  display:grid; gap:1px; margin-top:clamp(2rem,4vw,3.5rem);
  background:rgba(57,80,174,.3);
  border:1px solid rgba(57,80,174,.3);
  grid-template-columns:1fr;
}
@media (min-width:720px){ .grid{ grid-template-columns:1fr 1fr; } }
.card{ background:var(--bone); padding:clamp(1.5rem,3vw,2.6rem); }
.card__num{ color:var(--signal); margin:0 0 1.1rem; }
.card__title{
  font-family:var(--serif); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.35rem,1.1rem + .9vw,2rem); line-height:1.05;
  letter-spacing:-.01em; color:var(--crow); margin:0 0 .7rem;
}
.card p:last-child{ margin:0; color:rgba(11,11,12,.78); max-width:40ch; }

/* ── how ───────────────────────────────────────── */
.how{ background:var(--crow); color:var(--bone); padding:clamp(3.5rem,8vw,7rem) 0; }
.how__inner{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .how__inner{ grid-template-columns:.9fr 1.1fr; } }
.how__plate img{ width:100%; border:1px solid rgba(242,237,228,.28); }
.steps{ display:grid; gap:1.45rem; }
.steps li{ display:grid; grid-template-columns:2.6rem 1fr; gap:1rem; align-items:start; }
.steps span{ color:var(--signal); padding-top:.35em; }
.steps strong{ font-weight:400; }
.steps div{ color:rgba(242,237,228,.82); }
.steps strong{ color:var(--bone); }

/* ── closer plate ──────────────────────────────── */
.closer{ position:relative; line-height:0; background:var(--crow); }
.closer img{ width:100%; max-height:78vh; object-fit:cover; object-position:center 42%; }
.closer__cap{
  position:absolute; right:var(--gutter); bottom:1rem;
  color:var(--bone); line-height:1;
  background:rgba(57,80,174,.82);
  padding:.45em .7em;
}

/* ── start ─────────────────────────────────────── */
.start{ background:var(--bone); padding:clamp(4rem,9vw,8rem) 0; }
.start__inner{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.start .display{ color:var(--crow); text-shadow:-0.007em 0 0 rgba(0,190,255,.26), 0.007em 0 0 rgba(255,0,120,.20); }
.start .eyebrow{ color:rgba(11,11,12,.55); border-bottom-color:rgba(57,80,174,.28); }
.start .lede{ color:rgba(11,11,12,.78); }
.start .fineprint{ margin-top:1.6rem; }

/* ── footer ────────────────────────────────────── */
.foot{ background:var(--crow); color:rgba(242,237,228,.7); padding:1.4rem 0; }
.foot__inner{ display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

/* ═══ ABOUT PAGE ═══════════════════════════════ */
.hero--about{ padding-block:clamp(3rem,7vw,6rem); }
.hero__portrait img{ width:100%; border:1px solid rgba(242,237,228,.28); }

.prose{ max-width:64ch; }
.prose p{ margin:0 0 1.35rem; color:rgba(11,11,12,.82); }
.prose strong{ font-weight:400; color:var(--crow); }
.prose--light p{ color:rgba(242,237,228,.86); }
.prose--light strong{ color:var(--bone); }
.subhead{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(1.3rem,1.05rem + .9vw,1.85rem); line-height:1.2;
  color:var(--crow); margin:2.4rem 0 1rem;
}
.callout{
  border-left:3px solid var(--signal);
  padding:.15rem 0 .15rem 1.2rem;
  margin-block:2rem !important;
}
.rules__intro{ max-width:56ch; color:rgba(11,11,12,.7); margin:0; }
.about__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem !important; }
.how__copy .lede{ margin-bottom:1.4rem; }

/* ═══ INTAKE FORM ══════════════════════════════ */
.intake{
  width:100%; max-width:760px; margin-top:1rem;
  text-align:left; display:grid; gap:1.15rem;
}
.intake__row{ display:grid; gap:1.15rem; grid-template-columns:1fr; }
@media (min-width:640px){ .intake__row{ grid-template-columns:1fr 1fr; } }

.field{ display:grid; gap:.45rem; }
.field label{ color:rgba(11,11,12,.62); }

.intake input,
.intake select,
.intake textarea{
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--ink);
  background:transparent;
  border:1px solid rgba(57,80,174,.4);
  border-radius:0;
  padding:.75em .85em;
  width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.intake textarea{ resize:vertical; min-height:7.5em; line-height:1.45; }
.intake select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--crow) 50%),linear-gradient(135deg,var(--crow) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:2.4em;
}
.intake ::placeholder{ color:rgba(11,11,12,.38); }
.intake :is(input,select,textarea):focus-visible{
  outline:none;
  border-color:var(--signal);
  box-shadow:0 0 0 2px rgba(255,59,31,.18);
}
.intake button{ justify-self:start; cursor:pointer; font-family:var(--mono); }
.intake .fineprint{ margin-top:0; }
.intake .fineprint a{ color:var(--crow); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* keyboard focus everywhere else */
a:focus-visible, button:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

/* about hero: copy column now carries body text, not just a lede */
.hero__copy p:not(.eyebrow):not(.lede){
  color:rgba(242,237,228,.84);
  max-width:46ch;
  margin:0 0 1.2rem;
}
.hero--about .lede{ margin-bottom:1.5rem; }
.callout--light{ border-left-color:var(--signal); color:var(--bone) !important; }
.hero--about .hero__inner{ align-items:start; }
.hero__portrait{ position:sticky; top:5.5rem; }
@media (max-width:899px){ .hero__portrait{ position:static; } }

/* ═══ CONTACT PAGE ═════════════════════════════ */
.contact{ background:var(--bone); padding:clamp(3rem,7vw,6rem) 0 clamp(4rem,8vw,7rem); }
.contact__inner{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1fr; align-items:start;
}
@media (min-width:940px){ .contact__inner{ grid-template-columns:.85fr 1.15fr; } }

.contact__copy .display{ color:var(--crow); text-shadow:-0.007em 0 0 rgba(0,190,255,.26), 0.007em 0 0 rgba(255,0,120,.20); }
.contact__copy .eyebrow{ color:rgba(11,11,12,.55); border-bottom-color:rgba(57,80,174,.28); }
.contact__copy .lede{ color:var(--crow); margin-bottom:1.6rem; }
.contact__note{ color:rgba(11,11,12,.72); max-width:42ch; margin:0 0 1.1rem; }
.contact__note a{ color:var(--crow); text-decoration-thickness:1px; text-underline-offset:3px; }

.intake--page{ max-width:none; margin-top:0; }
@media (min-width:940px){ .intake--page{ padding-top:2.9rem; } }
/* narrower column than the hero — the full display size wraps to six lines */
.contact__copy .display{ font-size:clamp(2.4rem,1.1rem + 3.4vw,4rem); }

/* services as its own page: give the grid room to breathe without a hero above it */
.services--page{ padding-block:clamp(3.5rem,8vw,7rem) clamp(4rem,9vw,8rem); }
.services--page .grid{ margin-top:clamp(2.5rem,5vw,4rem); }

/* services page: short title, so the whole block centres */
.services--page .eyebrow{
  text-align:center; max-width:22rem; margin-inline:auto;
}
.services--page .display{ text-align:center; }
.services--page .card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.services--page .card p:last-child{ margin-inline:auto; }
.services--page .fineprint{ text-align:center; }
/* no eyebrow above it now — the title needs its own top margin */
.services--page .display{ margin-top:0; }
/* short one-word heading sits straight above the form */
.start .display{ margin-top:0; margin-bottom:2.2rem; }
.start .display{ margin-bottom:.5rem; }
.start .lede{ margin-bottom:2.4rem; }

/* ═══ MOBILE ═══════════════════════════════════
   The layout above is desktop-first with min-width
   queries, so small screens fell through to the
   desktop nav. This is the layer that catches them.
   ═══════════════════════════════════════════════ */

@media (max-width:719px){

  /* nav: stack the mark over the links and stop it
     from clipping CONTACT off the right edge.
     unsticky here — 80px of fixed chrome is a lot
     of screen to give up on a 4,500px page. */
  .nav{
    position:static;
    flex-direction:column;
    align-items:center;
    gap:.8rem;
    padding:1rem var(--gutter) 1.05rem;
  }
  .nav__mark{ align-items:center; font-size:.76rem; letter-spacing:.22em; }
  .nav__links{
    width:100%;
    flex-wrap:wrap;
    justify-content:center;
    gap:.6rem .9rem;
  }
  .nav__links a{ white-space:nowrap; font-size:.66rem; letter-spacing:.12em; }

  /* cards want a little more room off the hairline */
  .card{ padding:1.75rem 1.4rem; }

  /* a 78vh plate is most of a phone screen */
  .closer img{ max-height:52vh; }

  /* footer reads as three centred lines, not a
     squeezed space-between row */
  .foot__inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:.5rem;
  }
}

@media (max-width:560px){

  /* buttons: equal width, stacked, edge to edge.
     inline-block sizing made these ragged. */
  .hero__actions,
  .about__actions{
    flex-direction:column;
    align-items:stretch;
    gap:.7rem;
  }
  .hero__actions .btn,
  .about__actions .btn,
  .intake .btn{
    width:100%;
    text-align:center;
  }

  /* .22em tracking pushed the eyebrow to two lines,
     and the second one was a single orphaned word */
  .eyebrow{ font-size:.64rem; letter-spacing:.15em; text-wrap:balance; }

  .lede{ margin-bottom:1.8rem; }
}

/* ═══ MOBILE MENU ══════════════════════════════
   Only engages when .js is on the root element, so
   a script failure leaves the wrapped row above
   intact rather than a nav with no way to open it.
   ═══════════════════════════════════════════════ */

.nav__toggle{
  display:none;
  appearance:none; -webkit-appearance:none;
  background:none; border:0; padding:0; margin-right:-.4rem;
  width:44px; height:44px;      /* touch target, not icon size */
  cursor:pointer; color:var(--bone);
  align-items:center; justify-content:center;
}
.nav__bars{ position:relative; }
.nav__bars,
.nav__bars::before,
.nav__bars::after{
  display:block; width:24px; height:1.5px;
  background:currentColor;
  transition:transform .22s ease, background-color .15s ease;
}
.nav__bars::before,
.nav__bars::after{ content:""; position:absolute; left:0; }
.nav__bars::before{ transform:translateY(-7px); }
.nav__bars::after{  transform:translateY(7px); }

.nav.is-open .nav__bars{ background:transparent; }
.nav.is-open .nav__bars::before{ transform:rotate(45deg); }
.nav.is-open .nav__bars::after{  transform:rotate(-45deg); }

@media (max-width:719px){

  /* the header is compact again, so it can afford to stick */
  .js .nav{
    position:sticky;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:.9rem var(--gutter);
  }
  .js .nav__mark{ align-items:flex-start; font-size:.72rem; letter-spacing:.2em; }
  .js .nav__toggle{ display:inline-flex; }

  /* both sit above the panel (z 90) so the mark stays put
     and the close X is always reachable */
  .js .nav__mark,
  .js .nav__toggle{ position:relative; z-index:95; }

  .js .nav__links{
    position:fixed; inset:0; z-index:90;
    background:var(--crow);
    flex-direction:column; justify-content:center; align-items:stretch;
    gap:0;
    padding:5.5rem var(--gutter) 3rem;
    opacity:0; visibility:hidden; transform:translateY(-.9rem);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .js .nav.is-open .nav__links{ opacity:1; visibility:visible; transform:none; }

  .js .nav__links a{
    font-family:var(--serif);
    font-size:clamp(1.85rem,1.1rem + 3.4vw,2.5rem);
    line-height:1.1; letter-spacing:-.01em;
    color:var(--bone);
    text-align:center;
    padding:.42em .2em;
    border-bottom:1px solid rgba(242,237,228,.14);
  }
  .js .nav__links a:last-child{ border-bottom:0; }
  .js .nav__links a[aria-current="page"]{ color:var(--signal); }

  body.nav-open{ overflow:hidden; }
}

@media (prefers-reduced-motion:reduce){
  .js .nav__links{ transition:none; }
}