/*
  The remaining homepage compositions: intro statement, testimonials,
  gallery mosaic and the closing CTA. Each is a different shape on purpose
  — the brief's central complaint about the existing site is that every
  section is "heading + paragraph + three equal cards".
*/

/* ---------- Intro statement ----------
   One large piece of editorial type, offset right of the label, set at a
   generous measure. No card, no image, no columns — the pause between the
   hero and the first dense section. */
.m-intro{padding-block:var(--section-y);}
.m-intro-grid{
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  gap:var(--s-6) var(--s-9);align-items:start;
}
.m-intro-statement{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.4rem, .95rem + 1.9vw, 2.5rem);
  line-height:1.26;letter-spacing:-.022em;color:var(--ink);
  max-width:28ch;margin:0;text-wrap:pretty;
}
.m-intro-statement a{
  color:var(--accent);text-decoration:none;
  background-image:linear-gradient(var(--accent-2),var(--accent-2));
  background-size:100% 1px;background-position:0 92%;background-repeat:no-repeat;
  transition:background-size var(--dur-mid) var(--ease-out);
}
.m-intro-statement a:hover{background-size:100% 3px;}
.m-intro-foot{
  display:flex;flex-wrap:wrap;gap:var(--s-5);align-items:center;
  margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line);
}
@media (max-width:860px){
  .m-intro-grid{grid-template-columns:1fr;gap:var(--s-5);}
  .m-intro-statement{max-width:none;}
}

/* ---------- Testimonials ----------
   One lead quote at display size spanning a tall cell, with two supporting
   quotes stacked beside it. A hierarchy, not three equal cards. */
.m-quotes{padding-block:var(--section-y);}
.m-quotes-grid{
  display:grid;grid-template-columns:1.25fr 1fr;
  grid-auto-rows:1fr;gap:var(--s-5);
}
.m-quote{
  display:flex;flex-direction:column;gap:var(--s-5);
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--card-radius);
  padding:clamp(var(--s-5), 4.5vw, var(--s-7));
  transition:border-color var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out),
             transform var(--dur-mid) var(--ease-out);
}
.m-quote:hover{border-color:var(--accent-line);box-shadow:var(--shadow-sm);transform:translateY(-3px);}

.m-quote-lead{
  grid-row:span 2;
  background:var(--accent-dark);border-color:var(--accent-dark);
  color:var(--panel-dark-text);justify-content:center;
  padding:clamp(var(--s-5), 5vw, var(--s-9));
}
.m-quote-lead:hover{border-color:var(--accent-dark);}

.m-quote-mark{
  font-family:var(--font-display);font-size:3rem;line-height:.6;
  color:var(--accent-2);height:.6em;
}
.m-quote-text{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:var(--t-lead);line-height:1.45;letter-spacing:-.012em;
  color:var(--ink);text-wrap:pretty;
}
.m-quote-lead .m-quote-text{
  font-size:clamp(1.15rem, .95rem + 1.4vw, 2.4rem);line-height:1.35;
  color:var(--panel-dark-text);
}
/* Without this the auto margin out-ranks the flex centring above. */
.m-quote-lead .m-quote-who{margin-top:0;}
.m-quote-text p{margin:0;}
.m-quote-text p + p{margin-top:.6em;}

.m-quote-who{
  display:flex;align-items:center;gap:var(--s-4);margin-top:auto;
  padding-top:var(--s-5);border-top:1px solid var(--line);
}
.m-quote-lead .m-quote-who{border-top-color:rgba(236,239,230,.2);}
.m-quote-av{
  width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--accent-tint);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:1.1rem;
}
.m-quote-av img{width:100%;height:100%;object-fit:cover;}
.m-quote-lead .m-quote-av{background:var(--accent);color:#fff;}
.m-quote-id{display:block;min-width:0;}
.m-quote-who b{display:block;font-size:var(--t-sm);font-weight:700;color:var(--ink);}
/* Scoped to .m-quote-role, not a bare descendant `span`: that selector
   (0,1,1) out-specifies .m-quote-av (0,1,0) no matter what order they
   appear in, so it was overriding the avatar's own display:flex and
   font-size and dropping its initial into the top-left corner at 0.7rem. */
.m-quote-role{
  display:block;font-family:var(--font-mono);font-size:var(--t-mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
  line-height:1.4;
}
.m-quote-lead .m-quote-who b{color:var(--panel-dark-text);}
.m-quote-lead .m-quote-role{color:var(--accent-2);}

@media (max-width:900px){
  .m-quotes-grid{grid-template-columns:1fr;grid-auto-rows:auto;}
  .m-quote-lead{grid-row:auto;}
}

/* ---------- Gallery mosaic ----------
   A deliberately unequal grid: the first photo takes a 2x2 cell, the rest
   are 1x1, so the block has a focal point instead of reading as a contact
   sheet. The parent's lightbox binds to .gallery-grid a[href], so that
   class name is kept and the interaction comes along for free. */
.m-gallery{padding-block:var(--section-y);background:var(--surface-2);}
.m-gallery .gallery-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(130px,15vw,196px);
  /* Dense so a later small photo backfills any gap the feature cell's span
     leaves behind, instead of the row being abandoned half-empty. */
  grid-auto-flow:dense;
  gap:var(--s-4);margin:0;
}
.m-gallery .gallery-grid a{
  position:relative;overflow:hidden;border-radius:var(--radius-md);
  display:block;background:var(--line);
  /* base.css pins these to a fixed height:180px. That silently cancelled
     the 2x2 feature cell below — it kept its row span but rendered one row
     tall, leaving a hole in the mosaic. Filling the grid area is what makes
     the span mean anything. */
  height:100%;
}
.m-gallery .gallery-grid a:first-child{grid-column:span 2;grid-row:span 2;}
.m-gallery .gallery-more{height:100%;}
.m-gallery .gallery-grid a img{
  width:100%;height:100%;object-fit:cover;object-position:center 25%;
  transition:transform var(--dur-slow) var(--ease-out);
}
.m-gallery .gallery-grid a:hover img{transform:scale(1.06);}
/* Hover scrim so the cursor has somewhere to land visually. */
.m-gallery .gallery-grid a::after{
  content:"";position:absolute;inset:0;background:var(--scrim);
  opacity:0;transition:opacity var(--dur-mid) var(--ease-out);
}
.m-gallery .gallery-grid a:hover::after{opacity:1;}

.m-gallery .gallery-more{
  display:flex;align-items:center;
  border-radius:var(--radius-md);border:1px dashed var(--line);
  background:transparent;padding:var(--s-5);
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);line-height:1.6;
}

@media (max-width:900px){
  .m-gallery .gallery-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:620px){
  .m-gallery .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(116px,32vw,160px);}
  .m-gallery .gallery-grid a:first-child{grid-column:span 2;grid-row:span 2;}
  .m-gallery .gallery-more{grid-column:span 2;}
}

/* ---------- Closing CTA ----------
   A full-bleed gold panel that wipes up as it enters. The wipe is a
   clip-path on the panel's own background layer, so no text ever animates
   its own clip (which would hurt legibility mid-transition). */
.m-cta{position:relative;overflow:hidden;padding-block:var(--section-y);}
.m-cta::before{
  content:"";position:absolute;inset:0;background:var(--accent-2);
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1s var(--ease-out);
  z-index:0;
}
.m-cta.is-revealed::before{clip-path:inset(0 0 0 0);}
.m-cta > *{position:relative;z-index:1;}

.m-cta-grid{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:var(--s-7) var(--s-9);align-items:end;
}
.m-cta h2{color:var(--accent-dark);max-width:16ch;}
.m-cta .m-label{color:var(--accent-2-deep);}
.m-cta p{margin:0;color:var(--accent-dark);opacity:.82;max-width:44ch;}
.m-cta-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);}
.m-cta .btn-dark{background:var(--accent-dark);color:var(--panel-dark-text);}
.m-cta .btn-dark:hover{background:var(--accent);}
.m-cta .btn-ghost{border-color:rgba(15,35,27,.35);color:var(--accent-dark);}
.m-cta .btn-ghost:hover{background:rgba(15,35,27,.08);border-color:var(--accent-dark);}

@media (max-width:860px){
  .m-cta-grid{grid-template-columns:1fr;gap:var(--s-6);align-items:start;}
  .m-cta h2{max-width:none;}
}
@media (max-width:560px){
  .m-cta-actions .btn{flex:1 1 100%;}
}

@media (prefers-reduced-motion: reduce){
  .m-cta::before{clip-path:inset(0 0 0 0);transition:none;}
  .m-quote:hover{transform:none;}
  .m-gallery .gallery-grid a:hover img{transform:none;}
}

/* ---------- Feature split ----------
   Image one side, copy the other, alternating down a page. The media is
   allowed to bleed slightly past the copy column's baseline so the two
   halves interlock rather than sitting in two tidy boxes. */
.m-feature{padding-block:var(--section-y);}
.m-feature.is-tint{background:var(--surface-2);}
.m-feature.is-dark{background:var(--accent-dark);color:var(--panel-dark-text);}
.m-feature.is-dark h2{color:var(--panel-dark-text);}
.m-feature.is-dark .m-lead,
.m-feature.is-dark .m-feature-points li{color:var(--panel-dark-text-soft);}
.m-feature.is-dark .m-label{color:var(--accent-2);}
.m-feature.is-dark .m-feature-points li::before{background:var(--accent-2);}

.m-feature-grid{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(var(--s-7), 5vw, var(--s-10));align-items:center;
}
.m-feature.is-flipped .m-feature-media{order:2;}

.m-feature-media .m-media{border-radius:var(--radius-lg);box-shadow:var(--shadow);}

.m-feature-copy{display:flex;flex-direction:column;gap:var(--s-5);align-items:flex-start;}
.m-feature-copy h2{margin:0;max-width:18ch;}

.m-feature-points{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--s-3);
}
.m-feature-points li{
  position:relative;padding-left:var(--s-6);
  color:var(--ink-soft);font-size:var(--t-sm);line-height:1.6;
}
.m-feature-points li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:var(--s-4);height:2px;background:var(--accent-2);
}

.m-feature-ctas{display:flex;flex-wrap:wrap;gap:var(--s-3);}

@media (max-width:900px){
  .m-feature-grid{grid-template-columns:1fr;gap:var(--s-6);}
  .m-feature.is-flipped .m-feature-media{order:0;}
  .m-feature-media{max-width:520px;}
  .m-feature-media .m-media{aspect-ratio:3/2;}
}

/* ---------- Form section ---------- */
.m-formsec{padding-block:var(--section-y);background:var(--surface-2);}
.m-formsec-grid{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(var(--s-7), 5vw, var(--s-9));align-items:start;
}
.m-formsec-grid.is-single{grid-template-columns:minmax(0,1fr);max-width:760px;}
.m-formsec-copy{display:flex;flex-direction:column;gap:var(--s-5);}
.m-formsec-copy h2{margin:0;max-width:16ch;}

.m-formsec-aside{
  list-style:none;margin:var(--s-3) 0 0;padding:0;
  display:flex;flex-direction:column;gap:var(--s-5);
}
.m-formsec-aside li{
  display:flex;flex-direction:column;gap:var(--s-1);
  padding-top:var(--s-4);border-top:1px solid var(--line);
}
.m-formsec-aside strong{
  font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2-deep);
}
.m-formsec-aside span{color:var(--ink-soft);font-size:var(--t-sm);line-height:1.6;}
.m-formsec-aside a{color:var(--accent);font-weight:600;}

.m-formsec-panel{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--card-radius);
  padding:clamp(var(--s-6), 3.5vw, var(--s-8));
  box-shadow:var(--shadow-sm);
}

@media (max-width:900px){
  .m-formsec-grid{grid-template-columns:1fr;}
}


/* Phones: the quotes stack, so each card gets the full column. */
@media (max-width:620px){
  .m-quotes-grid{gap:var(--s-4);}
  .m-quote{gap:var(--s-4);}
  .m-quote-mark{font-size:2.2rem;}
  .m-quote-who{gap:var(--s-3);padding-top:var(--s-4);}
  .m-quote-av{width:40px;height:40px;font-size:1rem;}
}