/* =========================================================================
   Avalon Ventures — home.css
   Home-page sections. Flow (CONTENT.md v1.2): hero → who we are → proof strip
   → before/after → who we serve → the homes → closing band. Tokens and shared
   components (buttons, cards, header, footer) live in base.css.
   ========================================================================= */

/* ------------------------------------------------ shared section heading */
/* Every section leads with a brass eyebrow tight above an H2 (Jost 26/500). */
.section-head{margin-bottom:clamp(24px, 4vw, 40px);}
.section-head .eyebrow{margin-bottom:12px;}
.section-head h2{font-size:26px; line-height:1.2;}
.section-head--center{text-align:center; max-width:40em; margin-inline:auto;}

/* ----------------------------------------------------- hero (photo + scrim) */
.hero{
  position:relative; display:flex; flex-direction:column;
  min-height:clamp(560px, 88vh, 800px);
  background:var(--color-oxford-blue);
  color:var(--color-text-on-dark-body);
}
/* Media layer is the only thing clipped — keeps the mobile nav dropdown,
   which lives in the (un-clipped) header, from being cut off. */
.hero__media{position:absolute; inset:0; overflow:hidden; z-index:0;}
.hero__bg{position:absolute; inset:-14% 0; will-change:transform;}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:center 40%;}
/* 15% Oxford Blue tint over the entire hero image (separate from the scrim) */
.hero__bg::after{content:""; position:absolute; inset:0; background:rgba(14,24,47,0.15); pointer-events:none;}
/* Functional legibility scrim (the sanctioned DESIGN.md dark hero): a top
   wash so the nav stays legible, plus a left-heavy wash under the headline. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(14,24,47,0.72) 0%, rgba(14,24,47,0.10) 26%, rgba(14,24,47,0) 44%),
    linear-gradient(102deg, rgba(14,24,47,0.94) 0%, rgba(14,24,47,0.88) 26%, rgba(14,24,47,0.62) 62%, rgba(14,24,47,0.42) 100%),
    /* flat navy base across the whole image, beneath the two gradients above */
    linear-gradient(rgba(14,24,47,0.55), rgba(14,24,47,0.55));
}
.hero__inner{position:relative; z-index:2; margin-block:auto; padding-block:clamp(48px, 7vw, 88px);}
.hero__content{max-width:44rem; margin-inline:auto; text-align:center;}
.hero__title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(30px, 5.4vw, 44px); line-height:1.12;
  color:var(--color-text-on-dark-heading);
  letter-spacing:-0.005em;
}
.hero__subline{
  font-family:var(--font-body);
  font-size:17px; line-height:1.55;          /* clearly secondary to the headline, not weaker than body */
  color:var(--color-text-on-dark-body);
  max-width:40em; margin:18px auto 0;
}
/* Quiet scroll cue replaces the hero button (CONTENT.md v1.2). */
.hero__cue{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:2;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  color:var(--color-text-on-dark-body); border-radius:var(--radius-pill);
}
.hero__cue svg{
  width:28px; height:28px; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  animation:cue-bob 1.9s var(--ease) infinite;
}
.hero__cue:hover{color:var(--color-text-on-dark-heading);}
.hero__cue:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring);}
@keyframes cue-bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);}}

/* Mobile: hero fills the visible viewport (so the next section doesn't peek),
   and the copy sits slightly above center rather than dead-centered. */
@media (max-width:640px){
  .hero{min-height:100vh; min-height:100svh;}
  .hero__inner{margin-block:0 auto; padding-top:clamp(32px, 11vh, 110px);}
}

/* --------------------------------------------------------- who we are */
.who__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 5vw, 64px); align-items:center;}
.who__copy .prose{margin-top:16px;}
.who__media img{
  width:100%; aspect-ratio:4 / 3; object-fit:cover;
  border-radius:var(--radius-lg); border:0.5px solid var(--color-border-hairline);
}
@media (max-width:820px){
  .who__grid{grid-template-columns:1fr; gap:28px; max-width:34em; margin-inline:auto;}
  .who__media{order:-1;}                 /* photo on top when stacked */
  .who__copy .prose{max-width:none;}
}

/* ------------------------------------------------------------- proof strip */
.proof{
  padding-block:clamp(28px, 4.5vw, 44px);
  border-block:0.5px solid var(--color-border-hairline);
  background:var(--color-bg-surface);
}
.proof__grid{
  list-style:none; display:grid; grid-template-columns:repeat(4, 1fr);
  gap:20px 24px; align-items:start;
}
.proof__item{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  font-family:var(--font-ui); font-weight:500; font-size:15px;
  color:var(--color-text-heading);
}
.proof__item::before{content:""; width:26px; height:2px; border-radius:2px; background:var(--color-brass);}
/* Mobile: single-column 4x1 stack with vertical breathing (brass marks kept). */
@media (max-width:620px){.proof__grid{grid-template-columns:1fr; gap:26px;}}

/* --------------------------------------------------- before / after slider */
/* On the homepage this is framed as proof of the operating standard, not a
   renovation flourish: heading + a short standfirst, then a selective slider. */
.ba-section__head{text-align:center; max-width:40em; margin:0 auto 14px;}
.ba-section__intro{
  font-family:var(--font-body); font-size:17px; line-height:1.55;
  color:var(--color-text-deck); text-align:center;
  max-width:40em; margin:0 auto clamp(28px, 4vw, 40px);
}

.ba{--pos:50%; max-width:920px; margin-inline:auto;}
.ba__stage{
  position:relative; aspect-ratio:4 / 3;
  border-radius:var(--radius-lg); overflow:hidden;
  background:var(--color-antiflash);
  border:0.5px solid var(--color-border-hairline);
  touch-action:none; user-select:none; cursor:ew-resize;
}
.ba__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; -webkit-user-drag:none; user-select:none; pointer-events:none;
}
.ba__after{
  position:absolute; inset:0;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
  will-change:clip-path;
}
.ba__divider{
  position:absolute; top:0; bottom:0; left:var(--pos);
  width:2px; margin-left:-1px;
  background:var(--color-seasalt);
  box-shadow:0 0 0 0.5px rgba(14,24,47,0.25);
  pointer-events:none;
}
.ba__handle{
  position:absolute; top:50%; left:var(--pos);
  transform:translate(-50%, -50%);
  width:44px; height:44px; border-radius:var(--radius-pill);
  background:var(--color-seasalt);
  border:1px solid var(--color-border-hairline);
  box-shadow:0 1px 3px rgba(14,24,47,0.22);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-oxford-blue); cursor:ew-resize; padding:0;
}
.ba__handle svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.ba__handle:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring);}

.ba__after,.ba__divider,.ba__handle{transition:clip-path 120ms var(--ease), left 120ms var(--ease);}
.ba.is-dragging .ba__after,
.ba.is-dragging .ba__divider,
.ba.is-dragging .ba__handle{transition:none;}

.ba__hint{
  font-family:var(--font-ui); font-size:13px;
  color:var(--color-text-muted); text-align:center; margin:14px 0 0;
}
.ba__tabs{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:18px;}
.ba__tab{
  font-family:var(--font-ui); font-size:13px; font-weight:500;
  padding:10px 18px; min-height:44px; border-radius:var(--radius-pill);
  background:transparent; border:0.5px solid var(--color-border-hairline);
  color:var(--color-text-deck); cursor:pointer;
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.ba__tab:hover{border-color:var(--color-payne); color:var(--color-text-heading);}
.ba__tab[aria-selected="true"]{background:var(--color-oxford-blue); color:#fff; border-color:var(--color-oxford-blue);}
.ba__tab:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring);}

/* --------------------------------------------------------- who we serve */
.serve__inner{max-width:46em; margin-inline:auto; text-align:center;}
.serve__inner .prose{max-width:40em; margin:16px auto 0; text-align:center;}

/* ----------------------------------------------- portfolio glimpse (homes) */
.homes__head{margin-bottom:clamp(24px, 4vw, 36px);}
.homes__more{margin-top:28px;}
/* Showcase cards are not links — don't imply clickability on hover. */
.cards--showcase .card{cursor:default;}
.cards--showcase .card:hover{border-color:var(--color-border-hairline);}

/* ----------------------------------------------- portfolio page (/portfolio/) */
.page-head{padding-block:clamp(48px, 7vw, 80px) 0;}
.page-head__inner{max-width:42em; margin-inline:auto; text-align:center;}
.page-head h1{font-size:clamp(28px, 4.4vw, 32px); line-height:1.18;}
.page-head .prose{max-width:42em; margin:14px auto 0;}
.pf-gallery{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.pf-figure{
  margin:0; border-radius:var(--radius-lg); overflow:hidden;
  border:0.5px solid var(--color-border-hairline); background:var(--color-french-gray);
}
.pf-figure img{width:100%; aspect-ratio:4 / 3; object-fit:cover; display:block; transition:transform var(--dur-base) var(--ease);}
.pf-figure figcaption{
  font-family:var(--font-ui); font-size:14px; color:var(--color-text-muted);
  padding:10px 14px; background:var(--color-bg-surface);
}
/* Each image is a button that opens the lightbox. */
.pf-figure__btn{display:block; width:100%; margin:0; padding:0; border:0; background:none; cursor:zoom-in;}
.pf-figure__btn:hover img{transform:scale(1.03);}
.pf-figure__btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring);}
@media (max-width:820px){.pf-gallery{grid-template-columns:repeat(2, 1fr);}}
@media (max-width:520px){.pf-gallery{grid-template-columns:1fr;}}
/* Mobile: tighten the gap between the Portfolio intro and the gallery so the
   first images appear sooner under the headline (desktop .section unchanged). */
@media (max-width:640px){
  .pf-section{padding-block:clamp(24px, 5vw, 36px) clamp(56px, 7vw, 88px);}
}

/* ----------------------------------------------- lightbox (portfolio gallery) */
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(14,24,47,0.88);
}
.lightbox[hidden]{display:none;}
.lightbox__img{
  max-width:min(1100px, 92vw); max-height:88vh; width:auto; height:auto;
  border-radius:var(--radius-md); box-shadow:0 10px 40px rgba(0,0,0,0.45);
}
.lightbox__close{
  position:absolute; top:16px; right:16px;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.12); border:0; border-radius:var(--radius-pill);
  color:var(--color-seasalt); cursor:pointer;
}
.lightbox__close:hover{background:rgba(255,255,255,0.22);}
.lightbox__close:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring);}
.lightbox__close svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round;}
/* previous / next controls — restrained, vertically centered on each edge */
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.12); border:0; border-radius:var(--radius-pill);
  color:var(--color-seasalt); cursor:pointer;
}
.lightbox__nav:hover{background:rgba(255,255,255,0.22);}
.lightbox__nav:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring);}
.lightbox__nav svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.lightbox__prev{left:16px;}
.lightbox__next{right:16px;}
@media (max-width:520px){
  .lightbox__prev{left:8px;}
  .lightbox__next{right:8px;}
}

/* ------------------------------------------------------------- closing */
.closing__inner{
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px;
  max-width:42em; margin-inline:auto;
}
.closing h2{font-size:clamp(24px, 4vw, 32px); color:var(--color-text-on-dark-heading);}
.closing__subline{
  font-family:var(--font-body); font-size:17px; line-height:1.55;
  color:var(--color-text-on-dark-body); max-width:34em;
}
.closing__actions{margin-top:8px;}
/* Payne surface so the CTA reads as its own section, distinct from the navy
   footer below it. Payne is a lightness step of navy (DESIGN.md), not a new hue. */
.closing--payne{background:var(--color-payne);}

/* ----------------------------------------------- contact page */
/* Scoped top-area breathing room (does not touch the shared .page-head used
   by Portfolio/About — higher specificity, Contact only). */
.page-head.contact-head{padding-block:clamp(64px, 9vw, 104px) clamp(28px, 4vw, 44px);}
.contact-intent{padding-block:0 clamp(48px, 7vw, 72px);}
.contact-form-section{padding-block:0 clamp(56px, 8vw, 88px);}

/* Form + image sit together in a white panel against the gray page bg, which
   separates this area from the inquiry cards above without a loud color block. */
.contact-panel{
  max-width:980px; margin-inline:auto;
  display:grid; grid-template-columns:0.85fr 1fr; gap:clamp(20px, 3vw, 36px);
  align-items:stretch;
  background:var(--color-white);
  border:0.5px solid var(--color-border-hairline);
  border-radius:var(--radius-lg);
  padding:clamp(20px, 3vw, 32px);
  box-shadow:0 1px 2px rgba(14,24,47,0.06);
}
.contact-panel__media{
  border-radius:var(--radius-md); overflow:hidden; background:var(--color-french-gray);
}
.contact-panel__media img{width:100%; height:100%; min-height:320px; object-fit:cover; display:block;}

.contact-form{max-width:660px; margin-inline:auto;}
.contact-panel .contact-form{max-width:none; margin:0;}          /* fill the panel column */
.contact-form__grid{display:grid; grid-template-columns:1fr; gap:16px;}  /* single column beside the image */
.contact-form__grid .field--full{grid-column:1 / -1;}
.contact-form__actions{margin-top:40px; display:flex; flex-direction:column; align-items:center; gap:14px;}
.contact-form .btn--lg{margin-bottom:20px;}   /* Contact-scoped only — not a global .btn--lg change */
.contact-note{
  font-family:var(--font-ui); font-size:14px; line-height:1.55;
  color:var(--color-text-muted); text-align:center; max-width:44em; margin-inline:auto;
}
.contact-note a{
  color:var(--color-text-heading); text-decoration:underline;
  text-decoration-color:var(--color-brass); text-underline-offset:3px;
}
.contact-note a:hover{text-decoration-color:var(--color-brass-hover);}
.contact-fine{
  font-family:var(--font-ui); font-size:13px; line-height:1.5;
  color:var(--color-text-subtle); text-align:center; max-width:44em; margin:2px auto 0;
}
/* Stack the panel on narrower screens; image drops BELOW the form so the form
   stays immediately reachable. */
@media (max-width:760px){
  .contact-panel{grid-template-columns:1fr; gap:20px;}
  .contact-panel__media{order:2;}
  .contact-panel__media img{min-height:200px; max-height:300px;}
}

/* ----------------------------------------------- about page (story column) */
.story__body{max-width:720px; margin-inline:auto;}     /* wider desktop measure, still readable */
.story__body .prose{max-width:none;}
.story__body .prose + .prose{margin-top:1.1em;}
/* brass-ruled pull quote — a restrained, premium brand statement (DESIGN.md pull-quote) */
.story__quote{
  max-width:720px; margin:clamp(28px, 4vw, 40px) auto 0;
  padding:4px 0 4px 24px;
  border-left:3px solid var(--color-brass);
  font-family:var(--font-body); font-style:italic; font-weight:500;
  font-size:clamp(19px, 2.4vw, 22px); line-height:1.45;
  color:var(--color-text-heading);
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .ba__after,.ba__divider,.ba__handle{transition:none;}
  .hero__cue svg{animation:none;}
}