/* Homepage sections. The shared system lives in assets/css/*.css and is
   built into mc.css; these rules belong to the approved homepage composition
   only and are deliberately not part of it. */
  /* ---------------- 01 hero ---------------- */
  .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
        padding:clamp(7rem,15vh,10rem) 0 clamp(3rem,8vh,5rem)}
  /* Bleeds to the hero's own top, right and bottom edges so it meets the ivory
     band below with no gap. Absolute, so the section padding cannot push it in. */
  .hero-figure{position:absolute;top:0;right:0;bottom:0;width:min(52%,900px);margin:0;z-index:1;overflow:hidden}
  /* A fine dot screen over the photograph — a printed-halftone suggestion
     rather than a pattern you notice. It sits at z-index 1, above the image but
     UNDER the gradient at z-index 2, so it fades out exactly where the picture
     does instead of carrying on across the black. */
  .hero-figure::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
      background-image:radial-gradient(rgba(246,242,235,.28) 1px,transparent 1.1px);
      background-size:13px 13px}
  .hero-figure::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
      background:linear-gradient(90deg,var(--ink) 0%,rgba(11,10,9,.74) 14%,rgba(11,10,9,.2) 40%,transparent 64%)}
  .hero-figure img{width:100%;height:100%;object-fit:cover;object-position:44% 22%;
                   transform:scale(1);transition:transform 14s cubic-bezier(.22,.61,.36,1)}
  .js .hero-figure.in img{transform:scale(1.025)}
  /* .hero is a flex container: without this its .wrap sizes to its content and
     margin:0 auto centres it, which pushes the headline into mid-screen. */
  .hero > .wrap{width:100%;flex:1 1 auto}
  .hero-copy{position:relative;z-index:2;max-width:min(52%,620px)}
  .hero h1{font-size:clamp(2.9rem,7.6vw,7.4rem);letter-spacing:.055em;line-height:1.04}
  .hero h1 span{display:block}
  .hero-sub{margin:clamp(1.3rem,3vh,1.9rem) 0 0;font-size:clamp(11px,1.1vw,13.5px);
            letter-spacing:.3em;text-transform:uppercase;color:var(--on-dark);line-height:1.8}
  .hero-sub.dim{color:var(--on-dark-mute);letter-spacing:.26em;margin-top:0}
  .hero-rule{width:56px;height:1px;background:var(--champagne);margin:1.1rem 0;opacity:.9;transform-origin:left}
  .js .hero-rule{transform:scaleX(0);transition:transform 1s cubic-bezier(.22,.61,.36,1) .2s}
  .js .hero-rule.in{transform:scaleX(1)}
  .hero-ctas{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,3.2vw,3rem);margin-top:clamp(2rem,4.6vh,3rem)}
  .scroll-cue{position:absolute;right:clamp(.9rem,2.2vw,2.2rem);top:50%;transform:translateY(-50%);
              display:flex;flex-direction:column;align-items:center;gap:.9rem;z-index:3}
  .scroll-cue span{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;
                   color:var(--on-dark-mute);writing-mode:vertical-rl}
  .scroll-cue i{display:block;width:1px;height:90px;background:linear-gradient(var(--champagne),transparent);
                animation:cue 2.6s ease-in-out infinite}
  .scroll-cue b{display:block;width:5px;height:5px;border-radius:50%;background:var(--champagne)}
  @keyframes cue{0%,100%{opacity:.3;transform:scaleY(.55);transform-origin:top}
                 50%{opacity:1;transform:scaleY(1);transform-origin:top}}

  /* ---------------- 02 brand statement ---------------- */
  .statement{background:var(--ivory);color:var(--on-light);padding:clamp(4.5rem,12vh,8.5rem) 0}
  .statement-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
  .statement h2{font-size:clamp(2rem,4.4vw,3.7rem);color:var(--on-light)}
  .statement .body{font-size:clamp(13.5px,1.15vw,15.5px);line-height:1.95;color:var(--on-light-mute);font-weight:300}
  .statement .body p{margin:0 0 1.4rem}

  /* ---------------- 03 markets ---------------- */
  .markets-grid{display:grid;grid-template-columns:repeat(3,1fr)}
  .market{position:relative;overflow:hidden;aspect-ratio:1/1;display:block}
  .market img{width:100%;height:100%;object-fit:cover;
              filter:grayscale(.6) contrast(1.08) brightness(.62);
              transition:transform 650ms cubic-bezier(.22,.61,.36,1),filter 650ms ease}
  .market:hover img{transform:scale(1.04);filter:grayscale(.34) contrast(1.1) brightness(.74)}
  .market::after{content:'';position:absolute;inset:0;
      background:linear-gradient(180deg,transparent 35%,rgba(11,10,9,.82) 100%)}
  .market-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1.4rem,2.6vw,2.4rem)}
  .market-cap h3{font-family:var(--serif);font-weight:400;margin:0;text-transform:uppercase;
                 letter-spacing:.05em;font-size:clamp(1.3rem,2.1vw,1.95rem);color:var(--on-dark);line-height:1.1}
  .market-cap .ln{height:1px;background:rgba(246,242,235,.32);margin:.7rem 0 .6rem}
  .market-cap p{margin:0;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--on-dark-mute)}
  .market-cap .arw{display:block;margin-top:1rem;color:var(--on-dark);font-size:1.15rem;
                   transition:transform 650ms cubic-bezier(.22,.61,.36,1)}
  .market:hover .arw{transform:translateX(8px)}

  /* ---------------- 04 what we do ---------------- */
  .services{background:var(--ink);padding:clamp(4.5rem,12vh,8.5rem) 0}
  .svc-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:end;
            margin-bottom:clamp(2.6rem,6vh,4rem)}
  .services h2{font-size:clamp(1.9rem,4.2vw,3.5rem);color:var(--on-dark)}
  .services .lede{margin:0;font-size:clamp(13px,1.1vw,15px);line-height:1.9;
                  color:var(--on-dark-mute);font-weight:300;max-width:34rem}

  /* ---------------- 05 casting ---------------- */
  /* One continuous rectangle: two equal halves, identical height, no padding
     or gap anywhere between them. The section's own height is controlled so it
     can never open up into a tall empty band. */
  /* A wide, shallow band, not a half-screen block. The reference measures
     roughly 24% of the page width; the copy needs 336px at 1440 and 327px at
     1280, so 24vw is used where it fits and floored at 340px below that. Tied
     to width rather than viewport height, so the proportion holds whatever the
     window is. */
  .casting{display:grid;grid-template-columns:50% 50%;background:var(--ink);
           align-items:stretch;height:clamp(340px,24vw,480px)}
  .casting-img{position:relative;overflow:hidden;height:100%;margin:0;padding:0}
  /* The source is a 0.79 portrait covered into a wide, shallow box, so the
     vertical anchor decides where her face lands. Measured: the lit face spans
     rows 292-616 of the 1400px source. At the old 650px band, 18% put the face
     midpoint 38% down — the approved framing. The shallower band crops 560px
     instead of 256px, and 18% dropped that midpoint to 56%. 29% restores it to
     38%, and solves to the same value at 1440 and 1920. */
  .casting-img img{position:absolute;inset:0;width:100%;height:100%;
                   object-fit:cover;object-position:54% 29%}
  /* Same treatment as .split-img, and the same gradient token: without it the
     photograph and the black panel meet on a hard vertical edge and read as
     two separate boxes rather than one band. */
  .casting-img::after{content:'';position:absolute;inset:0;z-index:2;
                      pointer-events:none;background:var(--edge-fade-x)}
  .casting-body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
                padding-block:clamp(2.5rem,5vh,4rem);padding-inline:clamp(60px,7vw,140px)}
  .casting-body > *{max-width:650px}
  .casting-body h2{font-size:clamp(64px,4.8vw,100px);line-height:.9;color:var(--on-dark)}
  .casting-body .tags{margin:1.9rem 0 0;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
                      color:var(--on-dark-mute)}
  /* a deliberate rule length rather than one that shrink-wraps the words */
  .casting-body .link-cta{min-width:248px;justify-content:space-between}

  /* ---------------- 06 final CTA ---------------- */
  .final{position:relative;padding:clamp(5rem,15vh,10rem) 0;overflow:hidden;background:var(--ink)}
  .final::before{content:'';position:absolute;inset:0;background:url("/assets/r2/satin.webp") center/cover no-repeat;opacity:.55}
  .final::after{content:'';position:absolute;inset:0;
      background:linear-gradient(90deg,rgba(11,10,9,.95) 30%,rgba(11,10,9,.55) 100%)}
  .final .wrap{position:relative;z-index:2}
  .final-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
  .final h2{font-size:clamp(1.9rem,4.4vw,3.6rem);color:var(--on-dark)}

  /* ---------------- responsive ---------------- */
  @media (max-width:1024px){
    /* The hero is already exactly 100svh; the empty band under the CTA came from
       centring, which split the spare space evenly. Anchor the copy to the
       bottom and the space moves above the text, onto the portrait. */
    .hero{align-items:flex-end;min-height:100svh;
          padding:clamp(6rem,12vh,8rem) 0 clamp(3.4rem,7vh,5.5rem)}
    .hero-copy{max-width:none}
    /* the portrait becomes a full band behind the words; crop unchanged —
       face large, upper-left, hair filling the upper right */
    .hero-figure{position:absolute;inset:0;width:100%}
    .hero-figure img{object-position:64% 12%}
    /* the figure now fills the hero and the copy sits over its lower half, so
       the dots are finer and lighter here than on desktop */
    .hero-figure::before{background-image:radial-gradient(rgba(246,242,235,.20) 1px,transparent 1.1px);
                         background-size:11px 11px}
    /* A photographic fade rather than a hard cut to black: the picture stays
       readable well past halfway, then goes down in stages. The lower stops are
       heavy because the copy sits over them and has to stay legible. */
    .hero-figure::after{background:linear-gradient(180deg,
        rgba(11,10,9,.22) 0%,
        rgba(11,10,9,.06) 20%,
        rgba(11,10,9,.34) 44%,
        rgba(11,10,9,.72) 62%,
        rgba(11,10,9,.90) 78%,
        rgba(11,10,9,.97) 92%,
        var(--ink) 100%)}
    /* a composed group, not a stretched one */
    .hero h1{line-height:1.02}
    .hero-sub{margin-top:clamp(.85rem,2vh,1.25rem)}
    .hero-rule{margin:.8rem 0}
    .hero-ctas{margin-top:clamp(1.3rem,2.8vh,1.9rem)}
    .scroll-cue{display:none}
    .statement-grid,.final-grid,.svc-head{grid-template-columns:1fr;gap:2rem}
    /* the split survives on tablet; it only stacks below 768 */
    /* the panel is only 48% wide here, so it needs proportionally more height
       than the desktop ratio would give it */
    .casting{height:clamp(330px,40vw,420px);grid-template-columns:52% 48%}
    .casting-img{height:100%;min-height:0}
    .casting-body{padding-inline:clamp(36px,5vw,64px)}
    /* narrower panel here, so the type has to come down or "LOOKING FOR"
       breaks onto a third line */
    .casting-body h2{font-size:clamp(38px,4.6vw,54px)}
  }
  @media (max-width:760px){
    .hero-ctas{flex-direction:column;align-items:flex-start;gap:.75rem}
    .hero-ctas .link-cta{padding:.45rem 0 .6rem}
    .markets-grid{grid-template-columns:1fr}
    .market{aspect-ratio:16/10}
    /* Image above, black panel below — one column, no gap between them.
       height:auto is essential: the two halves are now stacked rows, so the
       fixed band height from the 1024 rule would squash them and spill the
       copy over the next section. */
    .casting{grid-template-columns:1fr;height:auto}
    .casting-img{height:68vw;min-height:320px;max-height:560px}
    .casting-img img{object-position:54% 16%}
    /* stacked: the panel is underneath, so the fade turns with it */
    .casting-img::after{background:var(--edge-fade-y)}
    .casting-body{padding-block:clamp(2.5rem,7vh,3.5rem);padding-inline:clamp(1.25rem,6vw,2rem)}
    .casting-body h2{font-size:clamp(40px,11vw,56px)}
    .casting-body .link-cta{min-width:248px}
  }
  @media (prefers-reduced-motion:reduce){
    .js .hero-figure.in img{transform:none;transition:none}
    .js .hero-rule{transform:scaleX(1);transition:none}
    .scroll-cue i{animation:none}
    .market img,.market .arw{transition:none}
  }
</style>
</head>
<body>